From 8d245c04562ebae6b06cfd4d098c850aba876d95 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:14:27 +0200
Subject: [PATCH] Refine activatable controls with generic remove class and
 shared style cascade

---
 components/interactive-elements.html | 8 ++++----
 styleguide.css                       | 9 +++++++--
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/components/interactive-elements.html b/components/interactive-elements.html
index 6774886..8c5828b 100644
--- a/components/interactive-elements.html
+++ b/components/interactive-elements.html
@@ -130,7 +130,7 @@
             <button class="sg-interaction-element sg-pulldown sg-pulldown--inactive-selectable sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown ohne aktive Auswahl" data-label-base="Auswahl" data-component-part="pulldown-trigger">
               Auswahl
             </button>
-            <button class="sg-pulldown-panel__remove" type="button" aria-label="Pulldown-Filter entfernen" data-pulldown-activate-remove hidden>×</button>
+            <button class="sg-activatable-remove" type="button" aria-label="Pulldown-Filter entfernen" data-pulldown-activate-remove hidden>×</button>
           </span>
 
           <div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown" data-component-part="pulldown-panel">
@@ -396,7 +396,7 @@
           <span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
         </button>
         <span>Option wählbar</span>
-        <button class="sg-pulldown-panel__remove" type="button" aria-label="Checkbox entfernen" data-checkbox-activate-remove hidden>×</button>
+        <button class="sg-activatable-remove" type="button" aria-label="Checkbox entfernen" data-checkbox-activate-remove hidden>×</button>
       </label>
 
       <label class="sg-checkbox-field-option sg-checkbox-field-option--disabled sg-body" data-component="checkbox-field" data-component-state="disabled">
@@ -446,7 +446,7 @@
             <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>
+        <button class="sg-activatable-remove" type="button" aria-label="Radio-Auswahl entfernen" data-radio-activate-remove hidden>×</button>
       </label>
 
       <label class="sg-checkbox-field-option sg-checkbox-field-option--disabled sg-body" data-component="radio-field" data-component-state="disabled">
@@ -525,7 +525,7 @@
             aria-label="Slider inaktiv auswählbar"
           >
           <output class="sg-slider-value sg-body" for="slider">2.0</output>
-          <button class="sg-pulldown-panel__remove" type="button" aria-label="Slider-Filter entfernen" data-slider-activate-remove hidden>×</button>
+          <button class="sg-activatable-remove" type="button" aria-label="Slider-Filter entfernen" data-slider-activate-remove hidden>×</button>
         </label>
       </div>
     </div>
diff --git a/styleguide.css b/styleguide.css
index 6055640..d407e6c 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -928,7 +928,7 @@ section + section {
       color: var(--text-control-default);
     }
 
-    .sg-slider-row .sg-pulldown-panel__remove {
+    .sg-slider-row .sg-activatable-remove {
       flex: 0 0 auto;
     }
 
@@ -1155,7 +1155,8 @@ section + section {
       color: var(--text-control-default);
     }
 
-    .sg-pulldown-panel__remove {
+    .sg-pulldown-panel__remove,
+    .sg-activatable-remove {
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -1176,6 +1177,10 @@ section + section {
       display: none;
     }
 
+    .sg-activatable-remove[hidden] {
+      display: none;
+    }
+
     .sg-pulldown-panel__row--disabled {
       color: var(--text-control-disabled);
       opacity: var(--disabled-opacity);