Interactive Elements: Aktivierung über Schalter statt Entfernen-Button

components/interactive-elements.html

@@ -120,17 +120,25 @@
       <div class="sg-state-example">
         <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" data-activatable="true">
+        <div class="sg-activatable-row">
+          <button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung: aus" data-activation-target="component-pulldown-activatable">
+            <span class="sg-mode-toggle__switch" aria-hidden="true" data-component-part="toggle-track">
+              <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
+              <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
+              <span class="sg-mode-toggle__handle" data-component-part="toggle-handle"></span>
+            </span>
+          </button>
+
+          <div class="sg-pulldown-demo" id="component-pulldown-activatable" 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.
+            Initial state: the activation toggle is off, therefore the trigger starts as inactive selectable.
-            Clicking an option activates the pulldown and shows the selected count in brackets.
+            Switching the activation toggle to "an" applies the active default selection and shows the selected count.
           -->
           <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-activatable-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">
@@ -203,6 +211,7 @@
           </div>
           </div>
         </div>
+      </div>
 
       <div class="sg-state-example">
         <p class="sg-state-example__label sg-table-label">form-disabled</p>
@@ -390,14 +399,22 @@
         <span>Standard Checkbox</span>
       </label>
 
-      <label class="sg-checkbox-field-option sg-checkbox-field-option--inactive-selectable sg-body" data-component="checkbox-field" data-component-state="inactive-selectable" data-activatable="true">
+      <div class="sg-activatable-row">
+        <button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung: aus" data-activation-target="component-checkbox-activatable">
+          <span class="sg-mode-toggle__switch" aria-hidden="true" data-component-part="toggle-track">
+            <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
+            <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
+            <span class="sg-mode-toggle__handle" data-component-part="toggle-handle"></span>
+          </span>
+        </button>
+        <label class="sg-checkbox-field-option sg-checkbox-field-option--inactive-selectable sg-body" id="component-checkbox-activatable" data-component="checkbox-field" data-component-state="inactive-selectable" data-activatable="true">
           <span class="sg-state-example__label sg-table-label">Variante aktivierbar</span>
           <button class="sg-checkbox-field sg-checkbox-field--inactive-selectable" type="button" role="checkbox" aria-checked="false" aria-label="Option wählen">
             <span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
           </button>
           <span>Option wählbar</span>
-        <button class="sg-activatable-remove" type="button" aria-label="Checkbox entfernen" data-checkbox-activate-remove hidden>×</button>
         </label>
+      </div>
 
       <label class="sg-checkbox-field-option sg-checkbox-field-option--disabled sg-body" data-component="checkbox-field" data-component-state="disabled">
         <span class="sg-state-example__label sg-table-label">form-disabled</span>
@@ -430,7 +447,15 @@
         <span>Standard Radio</span>
       </label>
 
-      <label class="sg-checkbox-field-option sg-checkbox-field-option--inactive-selectable sg-body sg-radio-activatable-group" data-component="radio-field" data-component-state="inactive-selectable" data-activatable="true" data-activatable-radio-group="true">
+      <div class="sg-activatable-row">
+        <button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung: aus" data-activation-target="component-radio-activatable">
+          <span class="sg-mode-toggle__switch" aria-hidden="true" data-component-part="toggle-track">
+            <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
+            <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
+            <span class="sg-mode-toggle__handle" data-component-part="toggle-handle"></span>
+          </span>
+        </button>
+        <label class="sg-checkbox-field-option sg-checkbox-field-option--inactive-selectable sg-body sg-radio-activatable-group" id="component-radio-activatable" data-component="radio-field" data-component-state="inactive-selectable" data-activatable="true" data-activatable-radio-group="true">
           <span class="sg-state-example__label sg-table-label">Variante aktivierbar</span>
           <span class="sg-radio-activatable-group__choices">
             <span class="sg-radio-activatable-group__choice">
@@ -446,8 +471,8 @@
               <span>Option 2</span>
             </span>
           </span>
-        <button class="sg-activatable-remove" type="button" aria-label="Radio-Auswahl entfernen" data-radio-activate-remove hidden>×</button>
         </label>
+      </div>
 
       <label class="sg-checkbox-field-option sg-checkbox-field-option--disabled sg-body" data-component="radio-field" data-component-state="disabled">
         <span class="sg-state-example__label sg-table-label">form-disabled</span>
@@ -528,7 +553,15 @@
 
       <div class="sg-state-example">
         <p class="sg-state-example__label sg-table-label">Variante aktivierbar</p>
-        <label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
+        <div class="sg-activatable-row">
+          <button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung: aus" data-activation-target="component-slider-activatable">
+            <span class="sg-mode-toggle__switch" aria-hidden="true" data-component-part="toggle-track">
+              <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
+              <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
+              <span class="sg-mode-toggle__handle" data-component-part="toggle-handle"></span>
+            </span>
+          </button>
+          <label class="sg-slider-row sg-slider-row--inactive-selectable" id="component-slider-activatable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
             <span class="sg-label">Wert</span>
             <input
               class="sg-interaction-element sg-slider sg-form-inactive-selectable"
@@ -540,10 +573,10 @@
               aria-label="Slider inaktiv auswählbar"
             >
             <output class="sg-slider-value sg-body" for="slider">2.0</output>
-          <button class="sg-activatable-remove" type="button" aria-label="Slider-Filter entfernen" data-slider-activate-remove hidden>×</button>
           </label>
         </div>
       </div>
+    </div>
   </section>
 
   <!-- Component: Sandwich Menu Button -->
@@ -625,11 +658,80 @@
       });
     });
 
+    const setActivatableComponentState = (target, isActive) => {
+      if (!target) {
+        return;
+      }
+
+      const componentType = target.dataset.component;
+      target.dataset.componentState = isActive ? 'active' : 'inactive-selectable';
+
+      if (componentType === 'pulldown') {
+        const trigger = target.querySelector('.sg-pulldown-demo__trigger');
+        const options = target.querySelectorAll('[data-pulldown-option]');
+        if (!trigger || options.length === 0) {
+          return;
+        }
+
+        options.forEach((option, index) => {
+          option.setAttribute('aria-checked', String(isActive && index === 0));
+        });
+        target.dataset.open = 'false';
+        trigger.setAttribute('aria-expanded', 'false');
+        updatePulldownSelectionState(target);
+        return;
+      }
+
+      if (componentType === 'checkbox-field') {
+        const checkbox = target.querySelector('.sg-checkbox-field');
+        if (!checkbox) {
+          return;
+        }
+
+        checkbox.setAttribute('aria-checked', String(isActive));
+        checkbox.classList.toggle('sg-form-active', isActive);
+        checkbox.classList.toggle('sg-checkbox-field--inactive-selectable', !isActive);
+        return;
+      }
+
+      if (componentType === 'radio-field') {
+        const radios = target.querySelectorAll('.sg-radio-field');
+        const defaultRadio = radios[0];
+        radios.forEach((radio) => {
+          const checked = isActive && radio === defaultRadio;
+          radio.setAttribute('aria-checked', String(checked));
+          radio.classList.toggle('sg-form-active', checked);
+          radio.classList.toggle('sg-radio-field--inactive-selectable', !isActive);
+        });
+        return;
+      }
+
+      if (componentType === 'slider') {
+        const slider = target.querySelector('.sg-slider');
+        if (!slider) {
+          return;
+        }
+
+        target.classList.toggle('sg-slider-row--inactive-selectable', !isActive);
+        slider.classList.toggle('sg-form-active', isActive);
+        slider.classList.toggle('sg-form-inactive-selectable', !isActive);
+      }
+    };
+
     document.querySelectorAll('.sg-activation-mode-toggle').forEach((toggle) => {
       toggle.addEventListener('click', () => {
         const nextState = toggle.dataset.active === 'absolute' ? 'relative' : 'absolute';
+        const isActive = nextState === 'relative';
         toggle.dataset.active = nextState;
-        toggle.setAttribute('aria-label', `Aktivierung: ${nextState === 'absolute' ? 'aus' : 'an'}`);
+        toggle.setAttribute('aria-label', `Aktivierung: ${isActive ? 'an' : 'aus'}`);
+
+        const targetId = toggle.dataset.activationTarget;
+        if (!targetId) {
+          return;
+        }
+
+        const target = document.getElementById(targetId);
+        setActivatableComponentState(target, isActive);
       });
     });
 
@@ -669,8 +771,6 @@
     document.querySelectorAll('.sg-slider-row').forEach((row) => {
       const slider = row.querySelector('.sg-slider');
       const valueOutput = row.querySelector('.sg-slider-value');
-      const removeButton = row.querySelector('[data-slider-activate-remove]');
-
       if (!slider || !valueOutput) {
         return;
       }
@@ -686,25 +786,12 @@
         valueOutput.textContent = value.toFixed(1);
       };
 
-      const activateSliderRow = () => {
-        if (row.dataset.activatable === 'true' && row.dataset.componentState === 'inactive-selectable') {
-          row.dataset.componentState = 'active';
-          row.classList.remove('sg-slider-row--inactive-selectable');
-          slider.classList.remove('sg-form-inactive-selectable');
-          slider.classList.add('sg-form-active');
-          if (removeButton) {
-            removeButton.hidden = false;
-          }
-        }
-      };
-
       slider.addEventListener('input', () => {
-        activateSliderRow();
+        if (row.dataset.activatable === 'true' && row.dataset.componentState !== 'active') {
+          return;
+        }
         updateSliderState();
       });
-
-      slider.addEventListener('pointerdown', activateSliderRow);
-      slider.addEventListener('click', activateSliderRow);
       updateSliderState();
     });
 
@@ -716,16 +803,10 @@
 
         const activatableOption = checkbox.closest('[data-component="checkbox-field"][data-activatable="true"]');
         if (activatableOption) {
-          checkbox.setAttribute('aria-checked', 'true');
+          if (activatableOption.dataset.componentState !== 'active') {
-          checkbox.classList.add('sg-form-active');
-          checkbox.classList.remove('sg-checkbox-field--inactive-selectable');
-          activatableOption.dataset.componentState = 'active';
-          const removeButton = activatableOption.querySelector('[data-checkbox-activate-remove]');
-          if (removeButton) {
-            removeButton.hidden = false;
-          }
             return;
           }
+        }
 
         const nextState = checkbox.getAttribute('aria-checked') !== 'true';
         checkbox.setAttribute('aria-checked', String(nextState));
@@ -744,6 +825,9 @@
         if (!pulldownDemo) {
           return;
         }
+        if (pulldownDemo.dataset.activatable === 'true' && pulldownDemo.dataset.componentState !== 'active') {
+          return;
+        }
 
         const selectionMode = pulldownDemo.dataset.selectionMode || 'single';
         if (selectionMode === 'multiple') {
@@ -775,32 +859,16 @@
 
         const activatableGroup = radio.closest('[data-activatable-radio-group="true"]');
         if (activatableGroup) {
-          const radios = activatableGroup.querySelectorAll('.sg-radio-field');
+          if (activatableGroup.dataset.componentState !== 'active') {
-          const defaultRadio = radios[0];
-          const removeButton = activatableGroup.querySelector('[data-radio-activate-remove]');
-
-          if (activatableGroup.dataset.componentState === 'inactive-selectable' && defaultRadio) {
-            radios.forEach((otherRadio) => {
-              otherRadio.setAttribute('aria-checked', String(otherRadio === defaultRadio));
-              otherRadio.classList.remove('sg-radio-field--inactive-selectable');
-              otherRadio.classList.toggle('sg-form-active', otherRadio === defaultRadio);
-            });
-            activatableGroup.dataset.componentState = 'active';
-            if (removeButton) {
-              removeButton.hidden = false;
-            }
             return;
           }
 
+          const radios = activatableGroup.querySelectorAll('.sg-radio-field');
           radios.forEach((otherRadio) => {
             otherRadio.setAttribute('aria-checked', String(otherRadio === radio));
             otherRadio.classList.remove('sg-radio-field--inactive-selectable');
             otherRadio.classList.toggle('sg-form-active', otherRadio === radio);
           });
-          activatableGroup.dataset.componentState = 'active';
-          if (removeButton) {
-            removeButton.hidden = false;
-          }
           return;
         }
 
@@ -818,7 +886,6 @@
     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;
@@ -843,15 +910,13 @@
       const labelBase = trigger.dataset.labelBase || 'Auswahl';
 
       trigger.textContent = selectedCount > 0 ? `${labelBase} (${selectedCount})` : labelBase;
-      trigger.classList.toggle('sg-pulldown--selected', selectedCount > 0);
+      const isActivatableActive = demo.dataset.activatable === 'true' && demo.dataset.componentState === 'active';
-      trigger.classList.toggle('sg-form-active', selectedCount > 0);
+      trigger.classList.toggle('sg-pulldown--selected', selectedCount > 0 || isActivatableActive);
-      trigger.classList.toggle('sg-pulldown--inactive-selectable', selectedCount === 0);
+      trigger.classList.toggle('sg-form-active', selectedCount > 0 || isActivatableActive);
-      if (activatableRemove) {
+      trigger.classList.toggle('sg-pulldown--inactive-selectable', selectedCount === 0 && !isActivatableActive);
-        activatableRemove.hidden = selectedCount === 0;
-      }
       trigger.setAttribute(
         'aria-label',
-        selectedCount > 0 ? 'Pulldown mit aktiver Auswahl' : 'Pulldown ohne aktive Auswahl'
+        selectedCount > 0 || isActivatableActive ? 'Pulldown mit aktiver Auswahl' : 'Pulldown ohne aktive Auswahl'
       );
     };
 
@@ -869,18 +934,11 @@
 
       trigger.addEventListener('click', (event) => {
         event.stopPropagation();
+        if (demo.dataset.activatable === 'true' && demo.dataset.componentState !== 'active') {
+          return;
+        }
         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';
@@ -922,82 +980,6 @@
       });
     });
 
-    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);
-      });
-    });
-
-    document.querySelectorAll('[data-checkbox-activate-remove]').forEach((removeButton) => {
-      removeButton.addEventListener('click', (event) => {
-        event.stopPropagation();
-        const option = removeButton.closest('[data-component="checkbox-field"][data-activatable="true"]');
-        const checkbox = option ? option.querySelector('.sg-checkbox-field') : null;
-
-        if (!option || !checkbox) {
-          return;
-        }
-
-        option.dataset.componentState = 'inactive-selectable';
-        checkbox.setAttribute('aria-checked', 'false');
-        checkbox.classList.remove('sg-form-active');
-        checkbox.classList.add('sg-checkbox-field--inactive-selectable');
-        removeButton.hidden = true;
-      });
-    });
-
-    document.querySelectorAll('[data-radio-activate-remove]').forEach((removeButton) => {
-      removeButton.addEventListener('click', (event) => {
-        event.stopPropagation();
-        const option = removeButton.closest('[data-activatable-radio-group="true"]');
-        const radios = option ? option.querySelectorAll('.sg-radio-field') : null;
-
-        if (!option || !radios || radios.length === 0) {
-          return;
-        }
-
-        option.dataset.componentState = 'inactive-selectable';
-        radios.forEach((radio) => {
-          radio.setAttribute('aria-checked', 'false');
-          radio.classList.remove('sg-form-active');
-          radio.classList.add('sg-radio-field--inactive-selectable');
-        });
-        removeButton.hidden = true;
-      });
-    });
-
-    document.querySelectorAll('[data-slider-activate-remove]').forEach((removeButton) => {
-      removeButton.addEventListener('click', (event) => {
-        event.stopPropagation();
-        const row = removeButton.closest('.sg-slider-row[data-activatable="true"]');
-        const slider = row ? row.querySelector('.sg-slider') : null;
-
-        if (!row || !slider) {
-          return;
-        }
-
-        row.dataset.componentState = 'inactive-selectable';
-        row.classList.add('sg-slider-row--inactive-selectable');
-        slider.classList.remove('sg-form-active');
-        slider.classList.add('sg-form-inactive-selectable');
-        removeButton.hidden = true;
-      });
-    });
-
     // 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) => {

semantic-tokens-components.html

@@ -124,7 +124,7 @@
     <h3 class="sg-sub-heading sg-section-h3">Pulldown and Menu</h3>
     <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead><tbody>
       <tr><td>surface-pulldown-panel</td><td>color-light-grey</td><td>Fläche geöffneter Pulldown-Panels.</td></tr>
-      <tr><td>surface-activatable-remove</td><td>surface-control-default</td><td>Fläche des generischen Schließen-Kontrollfelds in aktivierbaren Varianten (Pulldown, Checkbox, Radio, Slider).</td></tr>
+      <tr><td>surface-activatable-remove</td><td>surface-control-default</td><td>Fläche des Schließen-Kontrollfelds für aktive Filterzeilen innerhalb geöffneter Pulldown-Panel-Formbereiche.</td></tr>
       <tr><td>icon-pulldown-chevron</td><td>currentColor-basierte Verlaufsgrafik</td><td>Chevron-Icon für Pulldown-Trigger und Select-Felder; folgt der aktuellen Textfarbe.</td></tr>
       <tr><td>layout-pulldown-panel-padding-inline</td><td>compact-interaction-padding-horizontal</td><td>Horizontaler Innenabstand des geöffneten Pulldown-Panels.</td></tr>
       <tr><td>layout-pulldown-option-padding-inline</td><td>compact-interaction-padding-horizontal</td><td>Horizontaler Innenabstand der einzelnen Pulldown-Optionen.</td></tr>
@@ -137,7 +137,7 @@
       <tr><td>layout-multiselect-pulldown-panel-mobile-width</td><td>dimension-multiselect-pulldown-panel-mobile-width</td><td>Reservierter semantischer Alias für feste Mobile-Breite im Multiselektions-Pulldown; aktuell nicht aktiv genutzt, da das Panel inhaltsbasiert mit Viewport-Kappe skaliert.</td></tr>
       <tr><td>surface-menu-panel-portal</td><td>color-light-grey</td><td>Fläche des Sandwich-Menü-Panels für große und kleine Variante.</td></tr>
       <tr><td>text-menu-link-portal</td><td>color-font-dark</td><td>Linktextfarbe im Sandwich-Menü für große und kleine Variante.</td></tr>
-      <tr><td>text-activatable-remove</td><td>text-control-default</td><td>Zeichenfarbe des generischen Schließen-Kontrollfelds in aktivierbaren Varianten.</td></tr>
+      <tr><td>text-activatable-remove</td><td>text-control-default</td><td>Zeichenfarbe des Schließen-Kontrollfelds für aktive Filterzeilen innerhalb geöffneter Pulldown-Panel-Formbereiche.</td></tr>
     </tbody></table>
 
     <h3 class="sg-sub-heading sg-section-h3">Toggle / Checkbox / Radio / Help</h3>

styleguide.css

@@ -507,6 +507,12 @@ section + section {
       gap: var(--spacing-small);
     }
 
+    .sg-activatable-row {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--spacing-small);
+    }
+
     .sg-interaction-element {
       box-sizing: border-box;
       height: var(--interaction-height);
@@ -1012,36 +1018,6 @@ section + section {
       color: var(--text-control-default);
     }
 
-    .sg-slider-row[data-activatable="true"] {
-      position: relative;
-      padding-right: calc(var(--interaction-height) + var(--spacing-small));
-    }
-
-    #component-slider .sg-form-preview-area {
-      padding-right: calc(var(--spacing-large) + var(--interaction-height) + var(--spacing-small));
-    }
-
-    .sg-slider-row[data-activatable="true"] .sg-activatable-remove {
-      position: absolute;
-      top: 50%;
-      right: 0;
-      transform: translateY(-50%);
-    }
-
-    #component-slider .sg-slider-row[data-activatable="true"] {
-      position: static;
-      padding-right: 0;
-    }
-
-    #component-slider .sg-slider-row[data-activatable="true"] .sg-activatable-remove {
-      position: static;
-      top: auto;
-      right: auto;
-      transform: none;
-      align-self: center;
-      margin-left: calc(var(--spacing-small) * 1.5);
-    }
-
     .sg-slider-row--inactive-selectable {
       opacity: var(--disabled-opacity);
     }
@@ -1051,11 +1027,9 @@ section + section {
       grid-template-columns:
         var(--layout-input-label-width)
         minmax(0, 1fr)
-        auto
+        auto;
-        var(--interaction-height);
       align-items: center;
       column-gap: var(--spacing-small);
-      padding-right: 0;
     }
 
     .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-label {
@@ -1082,16 +1056,6 @@ section + section {
       grid-row: 1;
     }
 
-    .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-activatable-remove {
-      position: static;
-      top: auto;
-      right: auto;
-      transform: none;
-      margin-left: calc(var(--spacing-small) * 1.5);
-      grid-column: 4;
-      grid-row: 1;
-    }
-
     @media (max-width: 48rem) {
       #component-slider .sg-state-example {
         grid-template-columns: 1fr;
@@ -1130,18 +1094,6 @@ section + section {
         white-space: nowrap;
       }
 
-      .sg-slider-row[data-activatable="true"] {
-        padding-right: 0;
-      }
-
-      .sg-slider-row[data-activatable="true"] .sg-activatable-remove {
-        position: static;
-        top: auto;
-        right: auto;
-        transform: none;
-        align-self: center;
-        margin-left: calc(var(--spacing-small) * 1.5);
-      }
     }
 
     .sg-sandwich-button {
@@ -1350,8 +1302,7 @@ section + section {
       color: var(--text-control-default);
     }
 
-.sg-pulldown-panel__remove,
+.sg-pulldown-panel__remove {
-.sg-activatable-remove {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1374,10 +1325,6 @@ section + section {
       display: none;
     }
 
-    .sg-activatable-remove[hidden] {
-      display: none;
-    }
-
     .sg-pulldown-panel__row--disabled {
       color: var(--text-control-disabled);
       opacity: var(--disabled-opacity);
@@ -1764,7 +1711,6 @@ section + section {
     flex-wrap: wrap;
     align-items: center;
     gap: var(--spacing-small);
-    padding-right: 0;
   }
 
   .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-label {
@@ -1786,19 +1732,6 @@ section + section {
     flex: 0 0 auto;
   }
 
-  .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-activatable-remove {
-    position: static;
-    transform: none;
-    margin-left: calc(var(--spacing-small) * 1.5);
-    flex: 0 0 var(--interaction-height);
-  }
-
-  .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-activatable-remove[hidden] {
-    display: inline-flex;
-    visibility: hidden;
-    pointer-events: none;
-  }
-
   .sg-pulldown-panel__row {
     grid-template-columns: minmax(0, 1fr) var(--interaction-height);
   }