Add activatable checkbox and radio variants with inactive opacity and remove action

components/interactive-elements.html

@@ -390,23 +390,13 @@
         <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">
+      <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">
-        <span class="sg-state-example__label sg-table-label">Variante aktivierbar: inaktiv</span>
+        <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 nicht gewählt, aber auswählbar</span>
+        <span>Option wählbar</span>
-      </label>
+        <button class="sg-pulldown-panel__remove" type="button" aria-label="Checkbox entfernen" data-checkbox-activate-remove hidden>×</button>
-
-      <label class="sg-checkbox-field-option sg-body" data-component="checkbox-field" data-component-state="active">
-        <span class="sg-state-example__label sg-table-label">Variante aktivierbar: aktiv</span>
-        <span class="sg-activatable-control">
-          <button class="sg-checkbox-field sg-form-active" type="button" role="checkbox" aria-checked="true" aria-label="Option gewählt">
-            <span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
-          </button>
-          <button class="sg-pulldown-panel__remove" type="button" aria-label="Checkbox entfernen">×</button>
-        </span>
-        <span>Option gewählt</span>
       </label>
 
       <label class="sg-checkbox-field-option sg-checkbox-field-option--disabled sg-body" data-component="checkbox-field" data-component-state="disabled">
@@ -440,23 +430,13 @@
         <span>Standard Radio</span>
       </label>
 
-      <label class="sg-checkbox-field-option sg-checkbox-field-option--inactive-selectable sg-body" data-component="radio-field" data-component-state="inactive-selectable">
+      <label class="sg-checkbox-field-option sg-checkbox-field-option--inactive-selectable sg-body" data-component="radio-field" data-component-state="inactive-selectable" data-activatable="true">
-        <span class="sg-state-example__label sg-table-label">Variante aktivierbar: inaktiv</span>
+        <span class="sg-state-example__label sg-table-label">Variante aktivierbar</span>
         <button class="sg-radio-field sg-radio-field--inactive-selectable" type="button" role="radio" aria-checked="false" aria-label="Option wählen">
           <span class="sg-radio-field__mark" aria-hidden="true"></span>
         </button>
-        <span>Option nicht gewählt, aber auswählbar</span>
+        <span>Option wählbar</span>
-      </label>
+        <button class="sg-pulldown-panel__remove" type="button" aria-label="Radio-Auswahl entfernen" data-radio-activate-remove hidden>×</button>
-
-      <label class="sg-checkbox-field-option sg-body" data-component="radio-field" data-component-state="active">
-        <span class="sg-state-example__label sg-table-label">Variante aktivierbar: aktiv</span>
-        <span class="sg-activatable-control">
-          <button class="sg-radio-field sg-form-active" type="button" role="radio" aria-checked="true" aria-label="Option gewählt">
-            <span class="sg-radio-field__mark" aria-hidden="true"></span>
-          </button>
-          <button class="sg-pulldown-panel__remove" type="button" aria-label="Radio-Auswahl entfernen">×</button>
-        </span>
-        <span>Option gewählt</span>
       </label>
 
       <label class="sg-checkbox-field-option sg-checkbox-field-option--disabled sg-body" data-component="radio-field" data-component-state="disabled">
@@ -699,6 +679,19 @@
           return;
         }
 
+        const activatableOption = checkbox.closest('[data-component="checkbox-field"][data-activatable="true"]');
+        if (activatableOption) {
+          checkbox.setAttribute('aria-checked', 'true');
+          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));
 
@@ -745,6 +738,19 @@
           return;
         }
 
+        const activatableOption = radio.closest('[data-component="radio-field"][data-activatable="true"]');
+        if (activatableOption) {
+          radio.setAttribute('aria-checked', 'true');
+          radio.classList.add('sg-form-active');
+          radio.classList.remove('sg-radio-field--inactive-selectable');
+          activatableOption.dataset.componentState = 'active';
+          const removeButton = activatableOption.querySelector('[data-radio-activate-remove]');
+          if (removeButton) {
+            removeButton.hidden = false;
+          }
+          return;
+        }
+
         const group = radio.closest('.sg-form-preview-area');
         if (!group) {
           return;
@@ -883,6 +889,42 @@
       });
     });
 
+    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-component="radio-field"][data-activatable="true"]');
+        const radio = option ? option.querySelector('.sg-radio-field') : null;
+
+        if (!option || !radio) {
+          return;
+        }
+
+        option.dataset.componentState = 'inactive-selectable';
+        radio.setAttribute('aria-checked', 'false');
+        radio.classList.remove('sg-form-active');
+        radio.classList.add('sg-radio-field--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) => {

styleguide.css

@@ -1293,6 +1293,10 @@ section + section {
       color: var(--text-control-default);
     }
 
+    .sg-checkbox-field-option[data-activatable="true"][data-component-state="inactive-selectable"] {
+      opacity: var(--disabled-opacity);
+    }
+
     .sg-checkbox-field-option--disabled {
       color: var(--text-control-disabled);
       opacity: var(--disabled-opacity);