diff --git a/components/interactive-elements.html b/components/interactive-elements.html index 1ab587f..9961a34 100644 --- a/components/interactive-elements.html +++ b/components/interactive-elements.html @@ -935,6 +935,7 @@ const updatePulldownSelectionState = (demo) => { const trigger = demo.querySelector('.sg-pulldown-demo__trigger'); const selectableOptions = demo.querySelectorAll('[data-pulldown-option]'); + const selectionMode = demo.dataset.selectionMode || 'single'; const isActivatableInactive = demo.dataset.activatable === 'true' && demo.dataset.componentState !== 'active'; if (!trigger || selectableOptions.length === 0) { @@ -945,6 +946,10 @@ return option.getAttribute('aria-checked') === 'true'; }).length; + const selectedOption = Array.from(selectableOptions).find((option) => { + return option.getAttribute('aria-checked') === 'true'; + }); + selectableOptions.forEach((option) => { const isSelected = option.getAttribute('aria-checked') === 'true'; const optionRow = option.closest('.sg-pulldown-option'); @@ -967,8 +972,16 @@ }); const labelBase = trigger.dataset.labelBase || 'Auswahl'; - - trigger.textContent = selectedCount > 0 ? `${labelBase} (${selectedCount})` : labelBase; + if (selectionMode === 'multiple') { + trigger.textContent = selectedCount > 0 ? `${labelBase} (${selectedCount})` : labelBase; + } else if (selectedOption) { + const selectedText = selectedOption.closest('.sg-pulldown-option')?.querySelector('span')?.textContent?.trim() + || selectedOption.closest('label')?.querySelector('span:last-child')?.textContent?.trim() + || selectedOption.textContent?.trim(); + trigger.textContent = selectedText || labelBase; + } else { + trigger.textContent = labelBase; + } const isActivatableActive = demo.dataset.activatable === 'true' && demo.dataset.componentState === 'active'; const showActiveState = !isActivatableInactive && (selectedCount > 0 || isActivatableActive); trigger.classList.toggle('sg-pulldown--selected', showActiveState);