From ecf6f2afee481ec48bba8c6e0c73e415833b4d70 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:39:33 +0200
Subject: [PATCH] Clean multiselect slider state semantics and touch feedback

---
 patterns/multiselektions-pulldown.html | 16 ++++++++--------
 styles/25-patterns-form-sections.css   |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/patterns/multiselektions-pulldown.html b/patterns/multiselektions-pulldown.html
index e9bd704..77e18e3 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="inactive-selectable" data-activatable="true">
+                    <label class="sg-slider-row" data-component="slider" data-component-state="active" 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>
@@ -57,7 +57,7 @@
                       <output class="sg-slider-value" for="slider">6.5</output>
                     </label>
 
-                    <label class="sg-slider-row" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
+                    <label class="sg-slider-row" data-component="slider" data-component-state="active" 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>
@@ -78,7 +78,7 @@
                       <output class="sg-slider-value" for="slider">9.5</output>
                     </label>
 
-                    <label class="sg-slider-row" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
+                    <label class="sg-slider-row" data-component="slider" data-component-state="active" 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>
@@ -99,7 +99,7 @@
                       <output class="sg-slider-value" for="slider">5.0</output>
                     </label>
 
-                    <label class="sg-slider-row" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
+                    <label class="sg-slider-row" data-component="slider" data-component-state="active" 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>
@@ -124,7 +124,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="inactive-selectable" data-activatable="true">
+                    <label class="sg-slider-row" data-component="slider" data-component-state="active" 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>
@@ -145,7 +145,7 @@
                       <output class="sg-slider-value" for="slider">3.0</output>
                     </label>
 
-                    <label class="sg-slider-row" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
+                    <label class="sg-slider-row" data-component="slider" data-component-state="active" 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>
@@ -166,7 +166,7 @@
                       <output class="sg-slider-value" for="slider">2.5</output>
                     </label>
 
-                    <label class="sg-slider-row" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
+                    <label class="sg-slider-row" data-component="slider" data-component-state="active" 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>
@@ -308,7 +308,7 @@
           if (!slider) {
             return;
           }
-          sliderRow.dataset.componentState = isActive ? 'active' : 'inactive-selectable';
+          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');
diff --git a/styles/25-patterns-form-sections.css b/styles/25-patterns-form-sections.css
index 9bdd608..76f2138 100644
--- a/styles/25-patterns-form-sections.css
+++ b/styles/25-patterns-form-sections.css
@@ -113,7 +113,7 @@
   line-height: 1;
 }
 
-.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"][data-component-state="inactive-selectable"] {
+.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] {
   -webkit-tap-highlight-color: transparent;
 }