From 981de5e0584da3a655788caf5bb292ef139a7162 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Tue, 19 May 2026 10:58:57 +0200
Subject: [PATCH] Fix pulldown activatable inactive variant to start inactive
 and be clickable

---
 components/interactive-elements.html | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/interactive-elements.html b/components/interactive-elements.html
index cdd2220..5f53821 100644
--- a/components/interactive-elements.html
+++ b/components/interactive-elements.html
@@ -120,14 +120,14 @@
       <div class="sg-state-example">
         <p class="sg-state-example__label sg-table-label">Variante aktivierbar: inaktiv</p>
 
-        <div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="multiple" data-component="pulldown" data-component-state="selected">
+        <div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="multiple" data-component="pulldown" data-component-state="inactive-selectable">
           <!--
             The number in brackets shows the count of currently selected options inside this pulldown.
-            Initial state: one option is selected, therefore the trigger label shows Auswahl (1).
-            If no option is selected, the trigger returns to Auswahl and uses form-inactive-selectable.
+            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.
           -->
-          <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 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>
 
           <div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown" data-component-part="pulldown-panel">
@@ -176,8 +176,8 @@
             </div>
 
             <div class="sg-checkbox-field-list sg-pulldown-panel__checkbox-list" aria-label="Checkboxen im Pulldown">
-              <label class="sg-checkbox-field-option sg-body" data-component="checkbox-field" data-component-state="active">
-                <button class="sg-checkbox-field sg-checkbox-field--on-grey sg-form-active" type="button" role="checkbox" aria-checked="true" aria-label="Checkbox 1" data-pulldown-option>
+              <label class="sg-checkbox-field-option sg-body" data-component="checkbox-field" data-component-state="inactive-selectable">
+                <button class="sg-checkbox-field sg-checkbox-field--on-grey sg-checkbox-field--inactive-selectable" type="button" role="checkbox" aria-checked="false" aria-label="Checkbox 1" data-pulldown-option>
                   <span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
                 </button>
                 <span>Checkbox 1</span>