From b81fd57e57e41bfd096a06933bf24043722def73 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Tue, 19 May 2026 13:33:22 +0200
Subject: [PATCH] Make Multiselektionspulldown fully interactive

---
 patterns/multiselektionspulldown.html | 126 +++++++++++++++++++++++---
 styleguide.css                        |   5 +
 2 files changed, 116 insertions(+), 15 deletions(-)

diff --git a/patterns/multiselektionspulldown.html b/patterns/multiselektionspulldown.html
index fba3af0..74b3fe3 100644
--- a/patterns/multiselektionspulldown.html
+++ b/patterns/multiselektionspulldown.html
@@ -47,57 +47,57 @@
                     <span>Nur Score "attraktiv"</span>
                   </label>
 
-                  <div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" aria-disabled="true">
+                  <div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" data-active="false" data-decimals="1" aria-disabled="true">
                     <span class="sg-label">Aktienbewertung</span>
                     <input class="sg-slider" type="range" min="0" max="10" step="0.1" value="6.5" disabled>
                     <span class="sg-slider-value">6.5</span>
-                    <button class="sg-activatable-remove" type="button" aria-label="Aktienbewertung entfernen" hidden>&times;</button>
+                    <button class="sg-activatable-remove sg-multiselect-pulldown__toggle" type="button" aria-label="Aktienbewertung aktivieren" data-action="toggle">+</button>
                   </div>
 
-                  <div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" aria-disabled="true">
+                  <div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" data-active="false" data-decimals="1" aria-disabled="true">
                     <span class="sg-label">Wachstum</span>
                     <input class="sg-slider" type="range" min="0" max="10" step="0.1" value="9.5" disabled>
                     <span class="sg-slider-value">9.5</span>
-                    <button class="sg-activatable-remove" type="button" aria-label="Wachstum entfernen" hidden>&times;</button>
+                    <button class="sg-activatable-remove sg-multiselect-pulldown__toggle" type="button" aria-label="Wachstum aktivieren" data-action="toggle">+</button>
                   </div>
 
-                  <div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" aria-disabled="true">
+                  <div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" data-active="false" data-decimals="1" aria-disabled="true">
                     <span class="sg-label">Profitabilität</span>
                     <input class="sg-slider" type="range" min="0" max="10" step="0.1" value="5.0" disabled>
                     <span class="sg-slider-value">5.0</span>
-                    <button class="sg-activatable-remove" type="button" aria-label="Profitabilität entfernen" hidden>&times;</button>
+                    <button class="sg-activatable-remove sg-multiselect-pulldown__toggle" type="button" aria-label="Profitabilität aktivieren" data-action="toggle">+</button>
                   </div>
 
-                  <div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" aria-disabled="true">
+                  <div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" data-active="false" data-decimals="1" aria-disabled="true">
                     <span class="sg-label">Stabilität</span>
                     <input class="sg-slider" type="range" min="0" max="10" step="0.1" value="6.5" disabled>
                     <span class="sg-slider-value">6.5</span>
-                    <button class="sg-activatable-remove" type="button" aria-label="Stabilität entfernen" hidden>&times;</button>
+                    <button class="sg-activatable-remove sg-multiselect-pulldown__toggle" type="button" aria-label="Stabilität aktivieren" data-action="toggle">+</button>
                   </div>
                 </div>
 
                 <div class="sg-multiselect-pulldown__section" aria-labelledby="kennzahlen-marktbewertung-max">
                   <h2 id="kennzahlen-marktbewertung-max" class="sg-sub-heading sg-multiselect-pulldown__section-title">Marktbewertung Maximum</h2>
 
-                  <div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" aria-disabled="true">
+                  <div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" data-active="false" data-decimals="0" aria-disabled="true">
                     <span class="sg-label">PE</span>
                     <input class="sg-slider" type="range" min="0" max="60" step="1" value="30" disabled>
                     <span class="sg-slider-value">30</span>
-                    <button class="sg-activatable-remove" type="button" aria-label="PE entfernen" hidden>&times;</button>
+                    <button class="sg-activatable-remove sg-multiselect-pulldown__toggle" type="button" aria-label="PE aktivieren" data-action="toggle">+</button>
                   </div>
 
-                  <div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" aria-disabled="true">
+                  <div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" data-active="false" data-decimals="0" aria-disabled="true">
                     <span class="sg-label">PE forw.</span>
                     <input class="sg-slider" type="range" min="0" max="50" step="1" value="25" disabled>
                     <span class="sg-slider-value">25</span>
-                    <button class="sg-activatable-remove" type="button" aria-label="PE forw. entfernen" hidden>&times;</button>
+                    <button class="sg-activatable-remove sg-multiselect-pulldown__toggle" type="button" aria-label="PE forw. aktivieren" data-action="toggle">+</button>
                   </div>
 
-                  <div class="sg-slider-row" data-activatable="true">
+                  <div class="sg-slider-row" data-activatable="true" data-active="true" data-decimals="1">
                     <span class="sg-label">PEG</span>
                     <input class="sg-slider" type="range" min="0" max="4" step="0.1" value="1.6">
                     <span class="sg-slider-value">1.6</span>
-                    <button class="sg-activatable-remove" type="button" aria-label="PEG entfernen">&times;</button>
+                    <button class="sg-activatable-remove sg-multiselect-pulldown__toggle" type="button" aria-label="PEG deaktivieren" data-action="toggle">&times;</button>
                   </div>
                 </div>
 
@@ -122,7 +122,7 @@
 
                   <div class="sg-multiselect-pulldown__row-label">
                     <span class="sg-label">Moat mindestens</span>
-                    <button class="sg-interaction-element sg-pulldown sg-multiselect-pulldown__compact-pulldown" type="button" aria-label="Moat mindestens Maessig">Maessig</button>
+                    <button class="sg-interaction-element sg-pulldown sg-multiselect-pulldown__compact-pulldown" type="button" aria-label="Moat mindestens Maessig" data-moat-options="Schwach|Maessig|Stark|Sehr stark" data-moat-index="1">Maessig</button>
                   </div>
                 </div>
               </div>
@@ -136,5 +136,101 @@
     </div>
   </section>
 
+  <script>
+    (() => {
+      const pattern = document.querySelector('[data-pattern="multiselektionspulldown"]');
+      if (!pattern) {
+        return;
+      }
+
+      const formatSliderValue = (row, value) => {
+        const decimals = Number(row.dataset.decimals || 0);
+        return Number(value).toFixed(decimals);
+      };
+
+      const updateSliderRowState = (row, isActive) => {
+        const slider = row.querySelector('.sg-slider');
+        const toggle = row.querySelector('[data-action="toggle"]');
+        const label = row.querySelector('.sg-label');
+        if (!slider || !toggle || !label) {
+          return;
+        }
+
+        row.dataset.active = String(isActive);
+        row.classList.toggle('sg-slider-row--inactive-selectable', !isActive);
+        row.setAttribute('aria-disabled', String(!isActive));
+        slider.disabled = !isActive;
+        toggle.textContent = isActive ? '×' : '+';
+        toggle.setAttribute(
+          'aria-label',
+          `${label.textContent?.trim() || 'Filter'} ${isActive ? 'deaktivieren' : 'aktivieren'}`
+        );
+      };
+
+      pattern.querySelectorAll('.sg-slider-row[data-activatable="true"]').forEach((row) => {
+        const slider = row.querySelector('.sg-slider');
+        const valueEl = row.querySelector('.sg-slider-value');
+        const toggle = row.querySelector('[data-action="toggle"]');
+
+        if (!slider || !valueEl || !toggle) {
+          return;
+        }
+
+        valueEl.textContent = formatSliderValue(row, slider.value);
+        updateSliderRowState(row, row.dataset.active === 'true');
+
+        slider.addEventListener('input', () => {
+          valueEl.textContent = formatSliderValue(row, slider.value);
+        });
+
+        toggle.addEventListener('click', () => {
+          updateSliderRowState(row, row.dataset.active !== 'true');
+        });
+      });
+
+      pattern.querySelectorAll('[data-component="checkbox-field"] .sg-checkbox-field').forEach((checkbox) => {
+        checkbox.addEventListener('click', () => {
+          const isChecked = checkbox.getAttribute('aria-checked') === 'true';
+          const nextState = !isChecked;
+          checkbox.setAttribute('aria-checked', String(nextState));
+          checkbox.classList.toggle('sg-form-active', nextState);
+          checkbox.classList.toggle('sg-checkbox-field--inactive-selectable', !nextState);
+        });
+      });
+
+      pattern.querySelectorAll('.sg-multiselect-pulldown__radio-row').forEach((group) => {
+        const options = Array.from(group.querySelectorAll('[role="radio"]'));
+        options.forEach((radio) => {
+          radio.addEventListener('click', () => {
+            options.forEach((other) => {
+              const selected = other === radio;
+              other.setAttribute('aria-checked', String(selected));
+              other.classList.toggle('sg-radio-field--inactive-selectable', !selected);
+            });
+          });
+        });
+      });
+
+      const moatButton = pattern.querySelector('.sg-multiselect-pulldown__compact-pulldown');
+      if (moatButton) {
+        const options = (moatButton.dataset.moatOptions || '')
+          .split('|')
+          .map((option) => option.trim())
+          .filter(Boolean);
+
+        moatButton.addEventListener('click', () => {
+          if (options.length === 0) {
+            return;
+          }
+          const currentIndex = Number(moatButton.dataset.moatIndex || 0);
+          const nextIndex = (currentIndex + 1) % options.length;
+          moatButton.dataset.moatIndex = String(nextIndex);
+          moatButton.textContent = options[nextIndex];
+          moatButton.setAttribute('aria-label', `Moat mindestens ${options[nextIndex]}`);
+        });
+      }
+    })();
+  </script>
+
 </body>
 </html>
diff --git a/styleguide.css b/styleguide.css
index 94ae9f4..72bdb3a 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -1743,6 +1743,11 @@ section + section {
   min-width: 7.5rem;
 }
 
+.sg-multiselect-pulldown__toggle {
+  font-size: 1.2rem;
+  line-height: 1;
+}
+
 @media (max-width: 48rem) {
   .sg-multiselect-pulldown-demo {
     width: 100%;