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);