Add an/aus activation toggle to interactive elements

components/interactive-elements.html

@@ -489,6 +489,25 @@
     </button>
   </section>
 
+  <!-- Component: Aktivierungs-Schalter -->
+  <section id="component-activation-toggle">
+    <p class="sg-preview-label">Component: Aktivierungs-Schalter (an/aus)</p>
+
+    <div class="sg-activation-toggle-pattern" data-component="activation-toggle">
+      <button
+        class="sg-activation-toggle-chip"
+        type="button"
+        data-active="aus"
+        aria-pressed="false"
+        aria-label="Aktivierung aus"
+      >
+        <span class="sg-activation-toggle-chip__text">aus</span>
+        <span class="sg-activation-toggle-chip__text">an</span>
+      </button>
+      <span class="sg-activation-toggle-pattern__label sg-body" data-component-part="activation-toggle-state">Status: aus</span>
+    </div>
+  </section>
+
   <!-- Component: Slider -->
   <section id="component-slider">
     <p class="sg-preview-label">Component: Slider</p>
@@ -610,6 +629,21 @@
       });
     });
 
+    document.querySelectorAll('.sg-activation-toggle-chip').forEach((toggle) => {
+      toggle.addEventListener('click', () => {
+        const nextState = toggle.dataset.active === 'an' ? 'aus' : 'an';
+        const statusLabel = toggle.closest('[data-component="activation-toggle"]')?.querySelector('[data-component-part="activation-toggle-state"]');
+
+        toggle.dataset.active = nextState;
+        toggle.setAttribute('aria-pressed', String(nextState === 'an'));
+        toggle.setAttribute('aria-label', `Aktivierung ${nextState}`);
+
+        if (statusLabel) {
+          statusLabel.textContent = `Status: ${nextState}`;
+        }
+      });
+    });
+
     document.querySelectorAll('.sg-tab-button-group').forEach((group) => {
       group.querySelectorAll('.sg-tab-button').forEach((button) => {
         button.addEventListener('click', () => {