From b97e1d4d475375972496113bea8c8bc0266afff4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Thu, 28 May 2026 10:26:50 +0200
Subject: [PATCH] Add missing button and mode-toggle interactions to VSF list
 detail page

---
 patterns/vsf-list-detailseite.html | 132 +++++++++++++++++++----------
 1 file changed, 88 insertions(+), 44 deletions(-)

diff --git a/patterns/vsf-list-detailseite.html b/patterns/vsf-list-detailseite.html
index 8d3ed22..55544da 100644
--- a/patterns/vsf-list-detailseite.html
+++ b/patterns/vsf-list-detailseite.html
@@ -116,23 +116,17 @@
 
   <script src="../scripts/help-icon-overlays.js"></script>
   <script>
-    const updatePulldownSelectionState = (pulldownDemo) => {
-      const checkedOption = pulldownDemo.querySelector('[data-pulldown-option][aria-checked="true"] span');
-      const trigger = pulldownDemo.querySelector('.sg-pulldown-demo__trigger');
-      const labelBase = trigger?.dataset.labelBase || '';
-
-      if (!trigger) {
-        return;
-      }
-
-      if (checkedOption) {
-        trigger.textContent = `${labelBase}: ${checkedOption.textContent?.trim() || ''}`;
-        pulldownDemo.dataset.componentState = 'active';
-      } else {
-        trigger.textContent = labelBase;
-        pulldownDemo.dataset.componentState = 'inactive-selectable';
-      }
-    };
+    document.querySelectorAll('.sg-portal-header__tabs').forEach((group) => {
+      group.querySelectorAll('.sg-tab-button').forEach((button) => {
+        button.addEventListener('click', () => {
+          group.querySelectorAll('.sg-tab-button').forEach((otherButton) => {
+            const isActive = otherButton === button;
+            otherButton.setAttribute('aria-selected', String(isActive));
+            otherButton.dataset.componentState = isActive ? 'active' : 'inactive';
+          });
+        });
+      });
+    });
 
     document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
       const button = wrap.querySelector('.sg-sandwich-button');
@@ -142,29 +136,81 @@
 
       button.addEventListener('click', (event) => {
         event.stopPropagation();
-        const isOpen = wrap.dataset.open === 'true';
-        wrap.dataset.open = String(!isOpen);
-        button.setAttribute('aria-expanded', String(!isOpen));
+        const nextState = wrap.dataset.open !== 'true';
+        document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((otherWrap) => {
+          const otherButton = otherWrap.querySelector('.sg-sandwich-button');
+          otherWrap.dataset.open = 'false';
+          if (otherButton) {
+            otherButton.setAttribute('aria-expanded', 'false');
+          }
+        });
+
+        wrap.dataset.open = String(nextState);
+        button.setAttribute('aria-expanded', String(nextState));
       });
     });
 
-    document.querySelectorAll('.sg-pulldown-demo .sg-pulldown-demo__trigger').forEach((trigger) => {
-      trigger.addEventListener('click', (event) => {
-        event.stopPropagation();
-        const demo = trigger.closest('.sg-pulldown-demo');
-        if (!demo) {
+    document.querySelectorAll('.sg-mode-toggle').forEach((toggle) => {
+      toggle.addEventListener('click', () => {
+        const nextState = toggle.dataset.active === 'relative' ? 'absolute' : 'relative';
+        toggle.dataset.active = nextState;
+        toggle.dataset.componentState = nextState;
+        toggle.setAttribute(
+          'aria-label',
+          `Modus Schieber global: ${nextState === 'relative' ? 'relativ' : 'absolut'} aktiv`
+        );
+      });
+    });
+
+    const updatePulldownSelectionState = (demo) => {
+      const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
+      const selectableOptions = demo.querySelectorAll('[data-pulldown-option]');
+
+      if (!trigger || selectableOptions.length === 0) {
+        return;
+      }
+
+      const selectedCount = Array.from(selectableOptions).filter((option) => {
+        return option.getAttribute('aria-checked') === 'true';
+      }).length;
+
+      selectableOptions.forEach((option) => {
+        const optionRow = option.closest('.sg-pulldown-option');
+        if (!optionRow) {
           return;
         }
 
+        optionRow.classList.toggle(
+          'sg-pulldown-option--selected',
+          option.getAttribute('aria-checked') === 'true'
+        );
+      });
+
+      const labelBase = trigger.dataset.labelBase || 'Auswahl';
+      trigger.textContent = selectedCount > 0 ? `${labelBase} (${selectedCount})` : labelBase;
+      trigger.classList.toggle('sg-pulldown--selected', selectedCount > 0);
+      trigger.classList.toggle('sg-form-active', selectedCount > 0);
+      trigger.dataset.componentState = selectedCount > 0 ? 'selected' : 'inactive-selectable';
+      demo.dataset.componentState = selectedCount > 0 ? 'selected' : 'inactive-selectable';
+      trigger.setAttribute(
+        'aria-label',
+        selectedCount > 0 ? `Pulldown ${labelBase} mit aktiver Auswahl` : `Pulldown ${labelBase} ohne aktive Auswahl`
+      );
+    };
+
+    document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
+      const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
+      if (!trigger) {
+        return;
+      }
+
+      trigger.addEventListener('click', (event) => {
+        event.stopPropagation();
         const nextState = demo.dataset.open !== 'true';
 
-        document.querySelectorAll('.sg-pulldown-demo').forEach((other) => {
-          if (other === demo) {
-            return;
-          }
-
-          other.dataset.open = 'false';
-          const otherTrigger = other.querySelector('.sg-pulldown-demo__trigger');
+        document.querySelectorAll('.sg-pulldown-demo').forEach((otherDemo) => {
+          const otherTrigger = otherDemo.querySelector('.sg-pulldown-demo__trigger');
+          otherDemo.dataset.open = 'false';
           if (otherTrigger) {
             otherTrigger.setAttribute('aria-expanded', 'false');
           }
@@ -199,19 +245,17 @@
       option.addEventListener('click', (event) => {
         event.stopPropagation();
         const pulldownDemo = option.closest('.sg-pulldown-demo');
-        if (!pulldownDemo) {
-          return;
-        }
+        if (pulldownDemo) {
+          pulldownDemo.querySelectorAll('[data-pulldown-option]').forEach((otherOption) => {
+            otherOption.setAttribute('aria-checked', String(otherOption === option));
+          });
 
-        pulldownDemo.querySelectorAll('[data-pulldown-option]').forEach((otherOption) => {
-          otherOption.setAttribute('aria-checked', String(otherOption === option));
-        });
-
-        updatePulldownSelectionState(pulldownDemo);
-        const trigger = pulldownDemo.querySelector('.sg-pulldown-demo__trigger');
-        pulldownDemo.dataset.open = 'false';
-        if (trigger) {
-          trigger.setAttribute('aria-expanded', 'false');
+          updatePulldownSelectionState(pulldownDemo);
+          const trigger = pulldownDemo.querySelector('.sg-pulldown-demo__trigger');
+          pulldownDemo.dataset.open = 'false';
+          if (trigger) {
+            trigger.setAttribute('aria-expanded', 'false');
+          }
         }
       });
     });