From 7457dd34eee536c93e38f5c997e394d5b28ab1cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Tue, 19 May 2026 11:08:31 +0200
Subject: [PATCH] Update activatable radio variant to horizontal two-option
 group with shared remove

---
 components/interactive-elements.html | 66 ++++++++++++++++++++--------
 styleguide.css                       | 12 +++++
 2 files changed, 60 insertions(+), 18 deletions(-)

diff --git a/components/interactive-elements.html b/components/interactive-elements.html
index f6e18fa..ab5850b 100644
--- a/components/interactive-elements.html
+++ b/components/interactive-elements.html
@@ -430,12 +430,22 @@
         <span>Standard Radio</span>
       </label>
 
-      <label class="sg-checkbox-field-option sg-checkbox-field-option--inactive-selectable sg-body" data-component="radio-field" data-component-state="inactive-selectable" data-activatable="true">
+      <label class="sg-checkbox-field-option sg-checkbox-field-option--inactive-selectable sg-body sg-radio-activatable-group" data-component="radio-field" data-component-state="inactive-selectable" data-activatable="true" data-activatable-radio-group="true">
         <span class="sg-state-example__label sg-table-label">Variante aktivierbar</span>
-        <button class="sg-radio-field sg-radio-field--inactive-selectable" type="button" role="radio" aria-checked="false" aria-label="Option wählen">
-          <span class="sg-radio-field__mark" aria-hidden="true"></span>
-        </button>
-        <span>Option wählbar</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">
+              <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">
+              <span class="sg-radio-field__mark" aria-hidden="true"></span>
+            </button>
+            <span>Option 2</span>
+          </span>
+        </span>
         <button class="sg-pulldown-panel__remove" type="button" aria-label="Radio-Auswahl entfernen" data-radio-activate-remove hidden>×</button>
       </label>
 
@@ -738,13 +748,31 @@
           return;
         }
 
-        const activatableOption = radio.closest('[data-component="radio-field"][data-activatable="true"]');
-        if (activatableOption) {
-          radio.setAttribute('aria-checked', 'true');
-          radio.classList.add('sg-form-active');
-          radio.classList.remove('sg-radio-field--inactive-selectable');
-          activatableOption.dataset.componentState = 'active';
-          const removeButton = activatableOption.querySelector('[data-radio-activate-remove]');
+        const activatableGroup = radio.closest('[data-activatable-radio-group="true"]');
+        if (activatableGroup) {
+          const radios = activatableGroup.querySelectorAll('.sg-radio-field');
+          const defaultRadio = radios[0];
+          const removeButton = activatableGroup.querySelector('[data-radio-activate-remove]');
+
+          if (activatableGroup.dataset.componentState === 'inactive-selectable' && defaultRadio) {
+            radios.forEach((otherRadio) => {
+              otherRadio.setAttribute('aria-checked', String(otherRadio === defaultRadio));
+              otherRadio.classList.remove('sg-radio-field--inactive-selectable');
+              otherRadio.classList.toggle('sg-form-active', otherRadio === defaultRadio);
+            });
+            activatableGroup.dataset.componentState = 'active';
+            if (removeButton) {
+              removeButton.hidden = false;
+            }
+            return;
+          }
+
+          radios.forEach((otherRadio) => {
+            otherRadio.setAttribute('aria-checked', String(otherRadio === radio));
+            otherRadio.classList.remove('sg-radio-field--inactive-selectable');
+            otherRadio.classList.toggle('sg-form-active', otherRadio === radio);
+          });
+          activatableGroup.dataset.componentState = 'active';
           if (removeButton) {
             removeButton.hidden = false;
           }
@@ -910,17 +938,19 @@
     document.querySelectorAll('[data-radio-activate-remove]').forEach((removeButton) => {
       removeButton.addEventListener('click', (event) => {
         event.stopPropagation();
-        const option = removeButton.closest('[data-component="radio-field"][data-activatable="true"]');
-        const radio = option ? option.querySelector('.sg-radio-field') : null;
+        const option = removeButton.closest('[data-activatable-radio-group="true"]');
+        const radios = option ? option.querySelectorAll('.sg-radio-field') : null;
 
-        if (!option || !radio) {
+        if (!option || !radios || radios.length === 0) {
           return;
         }
 
         option.dataset.componentState = 'inactive-selectable';
-        radio.setAttribute('aria-checked', 'false');
-        radio.classList.remove('sg-form-active');
-        radio.classList.add('sg-radio-field--inactive-selectable');
+        radios.forEach((radio) => {
+          radio.setAttribute('aria-checked', 'false');
+          radio.classList.remove('sg-form-active');
+          radio.classList.add('sg-radio-field--inactive-selectable');
+        });
         removeButton.hidden = true;
       });
     });
diff --git a/styleguide.css b/styleguide.css
index 53c2613..6055640 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -1297,6 +1297,18 @@ section + section {
       opacity: var(--disabled-opacity);
     }
 
+    .sg-radio-activatable-group__choices {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--spacing-small);
+    }
+
+    .sg-radio-activatable-group__choice {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--spacing-small);
+    }
+
     .sg-checkbox-field-option--disabled {
       color: var(--text-control-disabled);
       opacity: var(--disabled-opacity);