From 825091cb284e1e1f4da3b51b5272939a65188a7d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= Date: Mon, 25 May 2026 07:44:01 +0200 Subject: [PATCH] Enforce inactive pulldown visuals while preserving selection --- components/interactive-elements.html | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/components/interactive-elements.html b/components/interactive-elements.html index e923dcf..698d0cd 100644 --- a/components/interactive-elements.html +++ b/components/interactive-elements.html @@ -707,7 +707,7 @@ options.forEach((option) => { option.classList.toggle('sg-checkbox-field--inactive-selectable', !isActive); - option.classList.toggle('sg-form-active', option.getAttribute('aria-checked') === 'true'); + option.classList.toggle('sg-form-active', isActive && option.getAttribute('aria-checked') === 'true'); }); target.dataset.open = 'false'; trigger.setAttribute('aria-expanded', 'false'); @@ -951,12 +951,14 @@ trigger.textContent = selectedCount > 0 ? `${labelBase} (${selectedCount})` : labelBase; const isActivatableActive = demo.dataset.activatable === 'true' && demo.dataset.componentState === 'active'; - trigger.classList.toggle('sg-pulldown--selected', selectedCount > 0 || isActivatableActive); - trigger.classList.toggle('sg-form-active', selectedCount > 0 || isActivatableActive); - trigger.classList.toggle('sg-pulldown--inactive-selectable', selectedCount === 0 && !isActivatableActive); + const isActivatableInactive = demo.dataset.activatable === 'true' && demo.dataset.componentState !== 'active'; + const showActiveState = !isActivatableInactive && (selectedCount > 0 || isActivatableActive); + trigger.classList.toggle('sg-pulldown--selected', showActiveState); + trigger.classList.toggle('sg-form-active', showActiveState); + trigger.classList.toggle('sg-pulldown--inactive-selectable', !showActiveState); trigger.setAttribute( 'aria-label', - selectedCount > 0 || isActivatableActive ? 'Pulldown mit aktiver Auswahl' : 'Pulldown ohne aktive Auswahl' + showActiveState ? 'Pulldown mit aktiver Auswahl' : 'Pulldown ohne aktive Auswahl' ); };