Fix pulldown activatable variant behavior and restore normal pulldown appearance

components/interactive-elements.html

@@ -118,17 +118,20 @@
       </div>
 
       <div class="sg-state-example">
-        <p class="sg-state-example__label sg-table-label">Variante aktivierbar: inaktiv</p>
+        <p class="sg-state-example__label sg-table-label">Variante aktivierbar</p>
 
-        <div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="multiple" data-component="pulldown" data-component-state="inactive-selectable">
+        <div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="multiple" data-component="pulldown" data-component-state="inactive-selectable" data-activatable="true">
           <!--
             The number in brackets shows the count of currently selected options inside this pulldown.
             Initial state: no option is selected, therefore the trigger starts as inactive selectable.
             Clicking an option activates the pulldown and shows the selected count in brackets.
           -->
+          <span class="sg-activatable-control">
             <button class="sg-interaction-element sg-pulldown sg-pulldown--inactive-selectable sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown ohne aktive Auswahl" data-label-base="Auswahl" data-component-part="pulldown-trigger">
               Auswahl
             </button>
+            <button class="sg-pulldown-panel__remove" type="button" aria-label="Pulldown-Filter entfernen" data-pulldown-activate-remove hidden>×</button>
+          </span>
 
           <div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown" data-component-part="pulldown-panel">
             <!--
@@ -201,16 +204,6 @@
         </div>
       </div>
 
-      <div class="sg-state-example">
-        <p class="sg-state-example__label sg-table-label">Variante aktivierbar: aktiv</p>
-        <span class="sg-activatable-control">
-          <button class="sg-interaction-element sg-pulldown sg-pulldown--selected sg-form-active sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown mit aktiver Auswahl" data-label-base="Auswahl" data-component-part="pulldown-trigger">
-            Auswahl (1)
-          </button>
-          <button class="sg-pulldown-panel__remove" type="button" aria-label="Pulldown-Filter entfernen">×</button>
-        </span>
-      </div>
-
       <div class="sg-state-example">
         <p class="sg-state-example__label sg-table-label">form-disabled</p>
         <select class="sg-interaction-element sg-pulldown sg-pulldown--disabled" aria-label="Deaktivierter Pulldown" disabled data-component="pulldown" data-component-state="disabled">
@@ -766,6 +759,7 @@
     const updatePulldownSelectionState = (demo) => {
       const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
       const selectableOptions = demo.querySelectorAll('[data-pulldown-option]');
+      const activatableRemove = demo.querySelector('[data-pulldown-activate-remove]');
 
       if (!trigger || selectableOptions.length === 0) {
         return;
@@ -793,6 +787,9 @@
       trigger.classList.toggle('sg-pulldown--selected', selectedCount > 0);
       trigger.classList.toggle('sg-form-active', selectedCount > 0);
       trigger.classList.toggle('sg-pulldown--inactive-selectable', selectedCount === 0);
+      if (activatableRemove) {
+        activatableRemove.hidden = selectedCount === 0;
+      }
       trigger.setAttribute(
         'aria-label',
         selectedCount > 0 ? 'Pulldown mit aktiver Auswahl' : 'Pulldown ohne aktive Auswahl'
@@ -815,6 +812,16 @@
         event.stopPropagation();
         const nextState = demo.dataset.open !== 'true';
 
+        if (demo.dataset.activatable === 'true') {
+          const activatableRemove = demo.querySelector('[data-pulldown-activate-remove]');
+          trigger.classList.add('sg-pulldown--selected', 'sg-form-active');
+          trigger.classList.remove('sg-pulldown--inactive-selectable');
+          trigger.setAttribute('aria-label', 'Pulldown mit aktiver Auswahl');
+          if (activatableRemove) {
+            activatableRemove.hidden = false;
+          }
+        }
+
         document.querySelectorAll('.sg-pulldown-demo').forEach((otherDemo) => {
           const otherTrigger = otherDemo.querySelector('.sg-pulldown-demo__trigger');
           otherDemo.dataset.open = 'false';
@@ -856,6 +863,26 @@
       });
     });
 
+    document.querySelectorAll('[data-pulldown-activate-remove]').forEach((removeButton) => {
+      removeButton.addEventListener('click', (event) => {
+        event.stopPropagation();
+        const demo = removeButton.closest('.sg-pulldown-demo');
+        const trigger = demo ? demo.querySelector('.sg-pulldown-demo__trigger') : null;
+
+        if (!demo || !trigger) {
+          return;
+        }
+
+        demo.querySelectorAll('[data-pulldown-option]').forEach((option) => {
+          option.setAttribute('aria-checked', 'false');
+        });
+        demo.dataset.componentState = 'inactive-selectable';
+        demo.dataset.open = 'false';
+        trigger.setAttribute('aria-expanded', 'false');
+        updatePulldownSelectionState(demo);
+      });
+    });
+
     // Filter rows inside the opened pulldown start as inactive preselected rows.
     // They are visually dimmed but remain operable; clicking or changing them activates the row.
     document.querySelectorAll('[data-pulldown-filter-row]').forEach((row) => {

styleguide.css

@@ -608,7 +608,6 @@ section + section {
     .sg-pulldown--inactive-selectable {
       background-color: var(--surface-control-inactive);
       color: var(--text-control-default);
-      opacity: var(--disabled-opacity);
     }
 
     .sg-pulldown--disabled {