From 0be27e6a6a190f40968208ebaaa46c19f7674370 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Wed, 27 May 2026 10:45:38 +0200
Subject: [PATCH] Gate multiselect sliders by local on off toggle

---
 patterns/multiselektions-pulldown.html | 48 ++++++++++++++++----------
 1 file changed, 29 insertions(+), 19 deletions(-)

diff --git a/patterns/multiselektions-pulldown.html b/patterns/multiselektions-pulldown.html
index 77e18e3..26ad618 100644
--- a/patterns/multiselektions-pulldown.html
+++ b/patterns/multiselektions-pulldown.html
@@ -36,7 +36,7 @@
                       <span>Checkbox 1</span>
                     </label>
 
-                    <label class="sg-slider-row" data-component="slider" data-component-state="active" data-activatable="true">
+                    <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>
@@ -46,18 +46,19 @@
                       </button>
                       <span class="sg-label">Slider 1</span>
                       <input
-                        class="sg-interaction-element sg-slider sg-form-active"
+                        class="sg-interaction-element sg-slider sg-form-inactive-selectable"
                         type="range"
                         min="1"
                         max="10"
                         step="0.1"
                         value="6.5"
                         aria-label="Slider 1 von 1 bis 10"
+                        disabled
                       >
                       <output class="sg-slider-value" for="slider">6.5</output>
                     </label>
 
-                    <label class="sg-slider-row" data-component="slider" data-component-state="active" data-activatable="true">
+                    <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>
@@ -67,18 +68,19 @@
                       </button>
                       <span class="sg-label">Slider 2</span>
                       <input
-                        class="sg-interaction-element sg-slider sg-form-active"
+                        class="sg-interaction-element sg-slider sg-form-inactive-selectable"
                         type="range"
                         min="1"
                         max="10"
                         step="0.1"
                         value="9.5"
                         aria-label="Slider 2 von 1 bis 10"
+                        disabled
                       >
                       <output class="sg-slider-value" for="slider">9.5</output>
                     </label>
 
-                    <label class="sg-slider-row" data-component="slider" data-component-state="active" data-activatable="true">
+                    <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>
@@ -88,18 +90,19 @@
                       </button>
                       <span class="sg-label">Slider 3</span>
                       <input
-                        class="sg-interaction-element sg-slider sg-form-active"
+                        class="sg-interaction-element sg-slider sg-form-inactive-selectable"
                         type="range"
                         min="1"
                         max="10"
                         step="0.1"
                         value="5.0"
                         aria-label="Slider 3 von 1 bis 10"
+                        disabled
                       >
                       <output class="sg-slider-value" for="slider">5.0</output>
                     </label>
 
-                    <label class="sg-slider-row" data-component="slider" data-component-state="active" data-activatable="true">
+                    <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>
@@ -109,13 +112,14 @@
                       </button>
                       <span class="sg-label">Slider 4</span>
                       <input
-                        class="sg-interaction-element sg-slider sg-form-active"
+                        class="sg-interaction-element sg-slider sg-form-inactive-selectable"
                         type="range"
                         min="1"
                         max="10"
                         step="0.1"
                         value="6.5"
                         aria-label="Slider 4 von 1 bis 10"
+                        disabled
                       >
                       <output class="sg-slider-value" for="slider">6.5</output>
                     </label>
@@ -124,7 +128,7 @@
                   <section class="sg-form-sections-card__chapter" aria-labelledby="multiselect-block-2">
                     <h2 id="multiselect-block-2" class="sg-strong sg-form-sections-card__chapter-title">Block 2</h2>
 
-                    <label class="sg-slider-row" data-component="slider" data-component-state="active" data-activatable="true">
+                    <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>
@@ -134,18 +138,19 @@
                       </button>
                       <span class="sg-label">Slider 5</span>
                       <input
-                        class="sg-interaction-element sg-slider sg-form-active"
+                        class="sg-interaction-element sg-slider sg-form-inactive-selectable"
                         type="range"
                         min="1"
                         max="10"
                         step="0.1"
                         value="3.0"
                         aria-label="Slider 5 von 1 bis 10"
+                        disabled
                       >
                       <output class="sg-slider-value" for="slider">3.0</output>
                     </label>
 
-                    <label class="sg-slider-row" data-component="slider" data-component-state="active" data-activatable="true">
+                    <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>
@@ -155,18 +160,19 @@
                       </button>
                       <span class="sg-label">Slider 6</span>
                       <input
-                        class="sg-interaction-element sg-slider sg-form-active"
+                        class="sg-interaction-element sg-slider sg-form-inactive-selectable"
                         type="range"
                         min="1"
                         max="10"
                         step="0.1"
                         value="2.5"
                         aria-label="Slider 6 von 1 bis 10"
+                        disabled
                       >
                       <output class="sg-slider-value" for="slider">2.5</output>
                     </label>
 
-                    <label class="sg-slider-row" data-component="slider" data-component-state="active" data-activatable="true">
+                    <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>
@@ -176,13 +182,14 @@
                       </button>
                       <span class="sg-label">Slider 7</span>
                       <input
-                        class="sg-interaction-element sg-slider sg-form-active"
+                        class="sg-interaction-element sg-slider sg-form-inactive-selectable"
                         type="range"
                         min="1"
                         max="10"
                         step="0.1"
                         value="1.6"
                         aria-label="Slider 7 von 1 bis 10"
+                        disabled
                       >
                       <output class="sg-slider-value" for="slider">1.6</output>
                     </label>
@@ -308,11 +315,11 @@
           if (!slider) {
             return;
           }
-          sliderRow.dataset.componentState = 'active';
-          sliderRow.classList.remove('sg-slider-row--inactive-selectable');
-          slider.classList.add('sg-form-active');
-          slider.classList.remove('sg-form-inactive-selectable');
-          slider.disabled = false;
+          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;
         }
 
@@ -424,6 +431,9 @@
         };
 
         slider.addEventListener('input', () => {
+          if (row.dataset.activatable === 'true' && row.dataset.componentState !== 'active') {
+            return;
+          }
           updateSliderState();
         });