From 94bc9f48fdcce03dcc0e947a8f274a048c179281 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Mon, 25 May 2026 06:59:50 +0200
Subject: [PATCH] Update multiselect pulldown to activation-toggle pattern

---
 patterns/multiselektions-pulldown.html | 331 +++++++++++++------------
 styleguide.css                         | 132 ++++++++++
 2 files changed, 298 insertions(+), 165 deletions(-)

diff --git a/patterns/multiselektions-pulldown.html b/patterns/multiselektions-pulldown.html
index f568ccd..26becfa 100644
--- a/patterns/multiselektions-pulldown.html
+++ b/patterns/multiselektions-pulldown.html
@@ -37,6 +37,13 @@
                     </label>
 
                     <label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
+                      <button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 1: aus">
+                        <span class="sg-mode-toggle__switch" aria-hidden="true">
+                          <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
+                          <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
+                          <span class="sg-mode-toggle__handle"></span>
+                        </span>
+                      </button>
                       <span class="sg-label">Slider 1</span>
                       <input
                         class="sg-interaction-element sg-slider sg-form-inactive-selectable"
@@ -46,12 +53,19 @@
                         step="0.1"
                         value="6.5"
                         aria-label="Slider 1 von 1 bis 10"
+                        disabled
                       >
-                      <output class="sg-slider-value sg-body" for="slider">6.5</output>
-                      <button class="sg-activatable-remove" type="button" aria-label="Slider 1 entfernen" data-slider-activate-remove hidden>×</button>
+                      <output class="sg-slider-value" for="slider">6.5</output>
                     </label>
 
                     <label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
+                      <button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 2: aus">
+                        <span class="sg-mode-toggle__switch" aria-hidden="true">
+                          <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
+                          <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
+                          <span class="sg-mode-toggle__handle"></span>
+                        </span>
+                      </button>
                       <span class="sg-label">Slider 2</span>
                       <input
                         class="sg-interaction-element sg-slider sg-form-inactive-selectable"
@@ -61,12 +75,19 @@
                         step="0.1"
                         value="9.5"
                         aria-label="Slider 2 von 1 bis 10"
+                        disabled
                       >
-                      <output class="sg-slider-value sg-body" for="slider">9.5</output>
-                      <button class="sg-activatable-remove" type="button" aria-label="Slider 2 entfernen" data-slider-activate-remove hidden>×</button>
+                      <output class="sg-slider-value" for="slider">9.5</output>
                     </label>
 
                     <label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
+                      <button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 3: aus">
+                        <span class="sg-mode-toggle__switch" aria-hidden="true">
+                          <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
+                          <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
+                          <span class="sg-mode-toggle__handle"></span>
+                        </span>
+                      </button>
                       <span class="sg-label">Slider 3</span>
                       <input
                         class="sg-interaction-element sg-slider sg-form-inactive-selectable"
@@ -76,12 +97,19 @@
                         step="0.1"
                         value="5.0"
                         aria-label="Slider 3 von 1 bis 10"
+                        disabled
                       >
-                      <output class="sg-slider-value sg-body" for="slider">5.0</output>
-                      <button class="sg-activatable-remove" type="button" aria-label="Slider 3 entfernen" data-slider-activate-remove hidden>×</button>
+                      <output class="sg-slider-value" for="slider">5.0</output>
                     </label>
 
                     <label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
+                      <button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 4: aus">
+                        <span class="sg-mode-toggle__switch" aria-hidden="true">
+                          <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
+                          <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
+                          <span class="sg-mode-toggle__handle"></span>
+                        </span>
+                      </button>
                       <span class="sg-label">Slider 4</span>
                       <input
                         class="sg-interaction-element sg-slider sg-form-inactive-selectable"
@@ -91,9 +119,9 @@
                         step="0.1"
                         value="6.5"
                         aria-label="Slider 4 von 1 bis 10"
+                        disabled
                       >
-                      <output class="sg-slider-value sg-body" for="slider">6.5</output>
-                      <button class="sg-activatable-remove" type="button" aria-label="Slider 4 entfernen" data-slider-activate-remove hidden>×</button>
+                      <output class="sg-slider-value" for="slider">6.5</output>
                     </label>
                   </section>
 
@@ -101,6 +129,13 @@
                     <h2 id="multiselect-block-2" class="sg-strong sg-form-sections-card__chapter-title">Block 2</h2>
 
                     <label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
+                      <button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 5: aus">
+                        <span class="sg-mode-toggle__switch" aria-hidden="true">
+                          <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
+                          <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
+                          <span class="sg-mode-toggle__handle"></span>
+                        </span>
+                      </button>
                       <span class="sg-label">Slider 5</span>
                       <input
                         class="sg-interaction-element sg-slider sg-form-inactive-selectable"
@@ -110,12 +145,19 @@
                         step="0.1"
                         value="3.0"
                         aria-label="Slider 5 von 1 bis 10"
+                        disabled
                       >
-                      <output class="sg-slider-value sg-body" for="slider">3.0</output>
-                      <button class="sg-activatable-remove" type="button" aria-label="Slider 5 entfernen" data-slider-activate-remove hidden>×</button>
+                      <output class="sg-slider-value" for="slider">3.0</output>
                     </label>
 
                     <label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
+                      <button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 6: aus">
+                        <span class="sg-mode-toggle__switch" aria-hidden="true">
+                          <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
+                          <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
+                          <span class="sg-mode-toggle__handle"></span>
+                        </span>
+                      </button>
                       <span class="sg-label">Slider 6</span>
                       <input
                         class="sg-interaction-element sg-slider sg-form-inactive-selectable"
@@ -125,12 +167,19 @@
                         step="0.1"
                         value="2.5"
                         aria-label="Slider 6 von 1 bis 10"
+                        disabled
                       >
-                      <output class="sg-slider-value sg-body" for="slider">2.5</output>
-                      <button class="sg-activatable-remove" type="button" aria-label="Slider 6 entfernen" data-slider-activate-remove hidden>×</button>
+                      <output class="sg-slider-value" for="slider">2.5</output>
                     </label>
 
                     <label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
+                      <button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 7: aus">
+                        <span class="sg-mode-toggle__switch" aria-hidden="true">
+                          <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
+                          <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
+                          <span class="sg-mode-toggle__handle"></span>
+                        </span>
+                      </button>
                       <span class="sg-label">Slider 7</span>
                       <input
                         class="sg-interaction-element sg-slider sg-form-inactive-selectable"
@@ -140,9 +189,9 @@
                         step="0.1"
                         value="1.6"
                         aria-label="Slider 7 von 1 bis 10"
+                        disabled
                       >
-                      <output class="sg-slider-value sg-body" for="slider">1.6</output>
-                      <button class="sg-activatable-remove" type="button" aria-label="Slider 7 entfernen" data-slider-activate-remove hidden>×</button>
+                      <output class="sg-slider-value" for="slider">1.6</output>
                     </label>
                   </section>
 
@@ -150,6 +199,14 @@
                     <h2 id="multiselect-block-3" class="sg-strong sg-form-sections-card__chapter-title">Block 3</h2>
 
                     <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">
+                      <button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Radio Auswahl: aus">
+                        <span class="sg-mode-toggle__switch" aria-hidden="true">
+                          <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
+                          <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
+                          <span class="sg-mode-toggle__handle"></span>
+                        </span>
+                      </button>
+                      <span class="sg-label">Radio Auswahl</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="Radio 1 wählen">
@@ -164,19 +221,23 @@
                           <span>Radio 2</span>
                         </span>
                       </span>
-                      <button class="sg-activatable-remove" type="button" aria-label="Radio-Auswahl entfernen" data-radio-activate-remove hidden>×</button>
                     </label>
 
                     <div class="sg-pulldown-panel__row sg-pulldown-panel__row--disabled" data-pulldown-filter-row data-active="false" data-component-part="pulldown-filter-row">
+                      <button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Pulldown 1: aus">
+                        <span class="sg-mode-toggle__switch" aria-hidden="true">
+                          <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
+                          <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
+                          <span class="sg-mode-toggle__handle"></span>
+                        </span>
+                      </button>
                       <p class="sg-pulldown-panel__label sg-body">Pulldown 1</p>
 
-                      <select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 1 Auswahl">
+                      <select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 1 Auswahl" disabled>
                         <option selected>Option 1</option>
                         <option>Option 2</option>
                         <option>Option 3</option>
                       </select>
-
-                      <button class="sg-pulldown-panel__remove" type="button" aria-label="Pulldown 1 entfernen" hidden>×</button>
                     </div>
                   </section>
 
@@ -184,39 +245,54 @@
                     <h2 id="multiselect-block-4" class="sg-strong sg-form-sections-card__chapter-title">Block 4</h2>
 
                     <div class="sg-pulldown-panel__row sg-pulldown-panel__row--disabled" data-pulldown-filter-row data-active="false" data-component-part="pulldown-filter-row">
+                      <button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Pulldown 2: aus">
+                        <span class="sg-mode-toggle__switch" aria-hidden="true">
+                          <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
+                          <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
+                          <span class="sg-mode-toggle__handle"></span>
+                        </span>
+                      </button>
                       <p class="sg-pulldown-panel__label sg-body">Pulldown 2</p>
 
-                      <select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 2 Auswahl">
+                      <select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 2 Auswahl" disabled>
                         <option selected>Option 1</option>
                         <option>Option 2</option>
                         <option>Option 3</option>
                       </select>
-
-                      <button class="sg-pulldown-panel__remove" type="button" aria-label="Pulldown 2 entfernen" hidden>×</button>
                     </div>
 
                     <div class="sg-pulldown-panel__row sg-pulldown-panel__row--disabled" data-pulldown-filter-row data-active="false" data-component-part="pulldown-filter-row">
+                      <button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Pulldown 3: aus">
+                        <span class="sg-mode-toggle__switch" aria-hidden="true">
+                          <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
+                          <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
+                          <span class="sg-mode-toggle__handle"></span>
+                        </span>
+                      </button>
                       <p class="sg-pulldown-panel__label sg-body">Pulldown 3</p>
 
-                      <select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 3 Auswahl">
+                      <select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 3 Auswahl" disabled>
                         <option selected>Option 1</option>
                         <option>Option 2</option>
                         <option>Option 3</option>
                       </select>
-
-                      <button class="sg-pulldown-panel__remove" type="button" aria-label="Pulldown 3 entfernen" hidden>×</button>
                     </div>
 
                     <div class="sg-pulldown-panel__row sg-pulldown-panel__row--disabled" data-pulldown-filter-row data-active="false" data-component-part="pulldown-filter-row">
+                      <button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Pulldown 4: aus">
+                        <span class="sg-mode-toggle__switch" aria-hidden="true">
+                          <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
+                          <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
+                          <span class="sg-mode-toggle__handle"></span>
+                        </span>
+                      </button>
                       <p class="sg-pulldown-panel__label sg-body">Pulldown 4</p>
 
-                      <select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 4 Auswahl">
+                      <select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 4 Auswahl" disabled>
                         <option selected>Option 1</option>
                         <option>Option 2</option>
                         <option>Option 3</option>
                       </select>
-
-                      <button class="sg-pulldown-panel__remove" type="button" aria-label="Pulldown 4 entfernen" hidden>×</button>
                     </div>
                   </section>
                 </div>
@@ -232,10 +308,64 @@
 
   <script>
     (() => {
+      const setLocalActivationState = (toggle, isActive) => {
+        const sliderRow = toggle.closest('.sg-slider-row[data-activatable="true"]');
+        if (sliderRow) {
+          const slider = sliderRow.querySelector('.sg-slider');
+          if (!slider) {
+            return;
+          }
+          sliderRow.dataset.componentState = isActive ? 'active' : 'inactive-selectable';
+          sliderRow.classList.toggle('sg-slider-row--inactive-selectable', !isActive);
+          slider.classList.toggle('sg-form-active', isActive);
+          slider.classList.toggle('sg-form-inactive-selectable', !isActive);
+          slider.disabled = !isActive;
+          return;
+        }
+
+        const radioGroup = toggle.closest('[data-activatable-radio-group="true"]');
+        if (radioGroup) {
+          const radios = radioGroup.querySelectorAll('.sg-radio-field');
+          radioGroup.dataset.componentState = isActive ? 'active' : 'inactive-selectable';
+          radios.forEach((radio) => {
+            if (!isActive) {
+              radio.setAttribute('aria-checked', 'false');
+            }
+            const checked = radio.getAttribute('aria-checked') === 'true';
+            radio.classList.toggle('sg-form-active', checked);
+            radio.classList.toggle('sg-radio-field--inactive-selectable', !isActive);
+          });
+          return;
+        }
+
+        const pulldownRow = toggle.closest('[data-pulldown-filter-row]');
+        if (pulldownRow) {
+          const select = pulldownRow.querySelector('.sg-pulldown');
+          if (!select) {
+            return;
+          }
+          pulldownRow.dataset.active = isActive ? 'true' : 'false';
+          select.disabled = !isActive;
+          pulldownRow.classList.toggle('sg-pulldown-panel__row--disabled', !isActive);
+          select.classList.toggle('sg-pulldown--selected', isActive);
+          select.classList.toggle('sg-pulldown--inactive-selectable', !isActive);
+        }
+      };
+
+      document.querySelectorAll('.sg-activation-mode-toggle').forEach((toggle) => {
+        toggle.addEventListener('click', (event) => {
+          event.stopPropagation();
+          const nextState = toggle.dataset.active === 'absolute' ? 'relative' : 'absolute';
+          const isActive = nextState === 'relative';
+          toggle.dataset.active = nextState;
+          toggle.setAttribute('aria-label', toggle.getAttribute('aria-label').replace(/(an|aus)$/, isActive ? 'an' : 'aus'));
+          setLocalActivationState(toggle, isActive);
+        });
+      });
+
       const updatePulldownSelectionState = (demo) => {
         const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
         const selectableOptions = demo.querySelectorAll('[data-pulldown-option]');
-        const activatableRemove = demo.querySelector('[data-pulldown-activate-remove]');
         const forceActive = demo.dataset.forceActive === 'true';
 
         if (!trigger || selectableOptions.length === 0) {
@@ -253,9 +383,6 @@
         trigger.classList.toggle('sg-pulldown--selected', forceActive || selectedCount > 0);
         trigger.classList.toggle('sg-form-active', forceActive || selectedCount > 0);
         trigger.classList.toggle('sg-pulldown--inactive-selectable', !forceActive && selectedCount === 0);
-        if (activatableRemove) {
-          activatableRemove.hidden = forceActive || selectedCount === 0;
-        }
         trigger.setAttribute(
           'aria-label',
           forceActive || selectedCount > 0 ? `${labelBase} mit aktiver Auswahl` : `${labelBase} ohne aktive Auswahl`
@@ -265,7 +392,6 @@
       document.querySelectorAll('.sg-slider-row').forEach((row) => {
         const slider = row.querySelector('.sg-slider');
         const valueOutput = row.querySelector('.sg-slider-value');
-        const removeButton = row.querySelector('[data-slider-activate-remove]');
 
         if (!slider || !valueOutput) {
           return;
@@ -282,26 +408,13 @@
           valueOutput.textContent = value.toFixed(1);
         };
 
-        const activateSliderRow = () => {
-          if (row.dataset.activatable === 'true' && row.dataset.componentState === 'inactive-selectable') {
-            row.dataset.componentState = 'active';
-            row.classList.remove('sg-slider-row--inactive-selectable');
-            slider.classList.remove('sg-form-inactive-selectable');
-            slider.classList.add('sg-form-active');
-            if (removeButton) {
-              removeButton.hidden = false;
-            }
-          }
-        };
-
         slider.addEventListener('input', () => {
-          activateSliderRow();
+          if (row.dataset.activatable === 'true' && row.dataset.componentState !== 'active') {
+            return;
+          }
           updateSliderState();
         });
 
-        slider.addEventListener('pointerdown', activateSliderRow);
-        slider.addEventListener('click', activateSliderRow);
-
         updateSliderState();
       });
 
@@ -318,10 +431,6 @@
             checkbox.classList.add('sg-form-active');
             checkbox.classList.remove('sg-checkbox-field--inactive-selectable');
             activatableOption.dataset.componentState = 'active';
-            const removeButton = activatableOption.querySelector('[data-checkbox-activate-remove]');
-            if (removeButton) {
-              removeButton.hidden = false;
-            }
           }
 
           const pulldownDemo = checkbox.closest('.sg-pulldown-demo');
@@ -347,6 +456,9 @@
           if (!activatableGroup) {
             return;
           }
+          if (activatableGroup.dataset.componentState !== 'active') {
+            return;
+          }
 
           const radios = activatableGroup.querySelectorAll('.sg-radio-field');
           radios.forEach((otherRadio) => {
@@ -354,12 +466,6 @@
             otherRadio.classList.remove('sg-radio-field--inactive-selectable');
             otherRadio.classList.toggle('sg-form-active', otherRadio === radio);
           });
-          activatableGroup.dataset.componentState = 'active';
-
-          const removeButton = activatableGroup.querySelector('[data-radio-activate-remove]');
-          if (removeButton) {
-            removeButton.hidden = false;
-          }
         });
       });
 
@@ -375,12 +481,8 @@
           const nextState = demo.dataset.open !== 'true';
 
           if (demo.dataset.activatable === 'true') {
-            const activatableRemove = demo.querySelector('[data-pulldown-activate-remove]');
             trigger.classList.add('sg-pulldown--selected', 'sg-form-active');
             trigger.classList.remove('sg-pulldown--inactive-selectable');
-            if (activatableRemove) {
-              activatableRemove.hidden = false;
-            }
           }
 
           document.querySelectorAll('.sg-pulldown-demo').forEach((otherDemo) => {
@@ -424,92 +526,10 @@
         });
       });
 
-      document.querySelectorAll('[data-pulldown-activate-remove]').forEach((removeButton) => {
-        removeButton.addEventListener('click', (event) => {
-          event.stopPropagation();
-          const demo = removeButton.closest('.sg-pulldown-demo');
-          const trigger = demo ? demo.querySelector('.sg-pulldown-demo__trigger') : null;
-
-          if (!demo || !trigger) {
-            return;
-          }
-
-          demo.querySelectorAll('[data-pulldown-option]').forEach((option) => {
-            option.setAttribute('aria-checked', 'false');
-          });
-          demo.dataset.componentState = 'inactive-selectable';
-          demo.dataset.open = 'false';
-          trigger.setAttribute('aria-expanded', 'false');
-          updatePulldownSelectionState(demo);
-        });
-      });
-
-      document.querySelectorAll('[data-checkbox-activate-remove]').forEach((removeButton) => {
-        removeButton.addEventListener('click', (event) => {
-          event.stopPropagation();
-          const option = removeButton.closest('[data-component="checkbox-field"][data-activatable="true"]');
-          const checkbox = option ? option.querySelector('.sg-checkbox-field') : null;
-
-          if (!option || !checkbox) {
-            return;
-          }
-
-          option.dataset.componentState = 'inactive-selectable';
-          checkbox.setAttribute('aria-checked', 'false');
-          checkbox.classList.remove('sg-form-active');
-          checkbox.classList.add('sg-checkbox-field--inactive-selectable');
-          removeButton.hidden = true;
-
-          const pulldownDemo = option.closest('.sg-pulldown-demo');
-          if (pulldownDemo) {
-            updatePulldownSelectionState(pulldownDemo);
-          }
-        });
-      });
-
-      document.querySelectorAll('[data-radio-activate-remove]').forEach((removeButton) => {
-        removeButton.addEventListener('click', (event) => {
-          event.stopPropagation();
-          const option = removeButton.closest('[data-activatable-radio-group="true"]');
-          const radios = option ? option.querySelectorAll('.sg-radio-field') : null;
-
-          if (!option || !radios || radios.length === 0) {
-            return;
-          }
-
-          option.dataset.componentState = '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;
-        });
-      });
-
-      document.querySelectorAll('[data-slider-activate-remove]').forEach((removeButton) => {
-        removeButton.addEventListener('click', (event) => {
-          event.stopPropagation();
-          const row = removeButton.closest('.sg-slider-row[data-activatable="true"]');
-          const slider = row ? row.querySelector('.sg-slider') : null;
-
-          if (!row || !slider) {
-            return;
-          }
-
-          row.dataset.componentState = 'inactive-selectable';
-          row.classList.add('sg-slider-row--inactive-selectable');
-          slider.classList.remove('sg-form-active');
-          slider.classList.add('sg-form-inactive-selectable');
-          removeButton.hidden = true;
-        });
-      });
-
       document.querySelectorAll('[data-pulldown-filter-row]').forEach((row) => {
         const select = row.querySelector('.sg-pulldown');
-        const removeButton = row.querySelector('.sg-pulldown-panel__remove');
 
-        if (!select || !removeButton) {
+        if (!select) {
           return;
         }
 
@@ -518,28 +538,9 @@
           row.classList.toggle('sg-pulldown-panel__row--disabled', !isActive);
           select.classList.toggle('sg-pulldown--selected', isActive);
           select.classList.toggle('sg-pulldown--inactive-selectable', !isActive);
-          removeButton.hidden = !isActive;
+          select.disabled = !isActive;
         };
 
-        select.addEventListener('click', (event) => {
-          event.stopPropagation();
-          if (row.dataset.active !== 'true') {
-            row.dataset.active = 'true';
-            updateFilterRowState();
-          }
-        });
-
-        select.addEventListener('change', () => {
-          row.dataset.active = 'true';
-          updateFilterRowState();
-        });
-
-        removeButton.addEventListener('click', (event) => {
-          event.stopPropagation();
-          row.dataset.active = 'false';
-          updateFilterRowState();
-        });
-
         updateFilterRowState();
       });
 
diff --git a/styleguide.css b/styleguide.css
index 47900e3..a1e16fb 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -2039,6 +2039,73 @@ section + section {
   margin-top: var(--spacing-small);
 }
 
+.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] {
+  display: grid;
+  grid-template-columns: max-content max-content minmax(0, 1fr) auto;
+  align-items: center;
+  column-gap: var(--spacing-large);
+}
+
+.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-mode-toggle {
+  grid-column: 1;
+}
+
+.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-label {
+  grid-column: 2;
+  min-width: 0;
+}
+
+.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-slider {
+  grid-column: 3;
+  min-width: 0;
+  width: 100%;
+  max-width: none;
+}
+
+.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-slider-value {
+  grid-column: 4;
+  margin: 0;
+  min-width: 0;
+  line-height: 1;
+}
+
+.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group {
+  display: grid;
+  grid-template-columns: max-content max-content minmax(0, 1fr);
+  align-items: center;
+  column-gap: var(--spacing-large);
+}
+
+.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-label {
+  grid-column: 2;
+  margin: 0;
+}
+
+.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-mode-toggle {
+  grid-column: 1;
+}
+
+.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-radio-activatable-group__choices {
+  grid-column: 3;
+}
+
+.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] {
+  grid-template-columns: max-content max-content minmax(0, 1fr);
+  column-gap: var(--spacing-large);
+}
+
+.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-mode-toggle {
+  grid-column: 1;
+}
+
+.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown-panel__label {
+  grid-column: 2;
+}
+
+.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown {
+  grid-column: 3;
+}
+
 .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-demo .sg-pulldown-panel {
   min-width: 100%;
   width: max-content;
@@ -2051,6 +2118,71 @@ section + section {
     width: max-content;
     max-width: calc(100vw - (2 * var(--spacing-large)));
   }
+
+  .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] {
+    grid-template-columns: max-content minmax(0, 1fr);
+    row-gap: var(--spacing-small);
+  }
+
+  .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-mode-toggle {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-label {
+    grid-column: 2;
+    grid-row: 1;
+  }
+
+  .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-slider {
+    grid-column: 1;
+    grid-row: 2;
+  }
+
+  .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-slider-value {
+    grid-column: 2;
+    grid-row: 2;
+  }
+
+  .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group {
+    grid-template-columns: max-content minmax(0, 1fr);
+    row-gap: var(--spacing-small);
+  }
+
+  .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-label {
+    grid-column: 2;
+    grid-row: 1;
+  }
+
+  .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-mode-toggle {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-radio-activatable-group__choices {
+    grid-column: 1 / -1;
+    grid-row: 2;
+  }
+
+  .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] {
+    grid-template-columns: max-content minmax(0, 1fr);
+    row-gap: var(--spacing-small);
+  }
+
+  .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-mode-toggle {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown-panel__label {
+    grid-column: 2;
+    grid-row: 1;
+  }
+
+  .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown {
+    grid-column: 1 / -1;
+    grid-row: 2;
+  }
 }
 
 .sg-form-sections-card__actions {