Add activatable active/inactive variants for pulldown, checkbox, radio, and slider

components/interactive-elements.html

@@ -80,7 +80,7 @@
     -->
     <div class="sg-form-preview-area">
       <div class="sg-state-example">
-        <p class="sg-state-example__label sg-table-label">form-inactive-selectable</p>
+        <p class="sg-state-example__label sg-table-label">Komponente normal</p>
 
         <div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-state="inactive-selectable">
           <!--
@@ -118,7 +118,7 @@
       </div>
 
       <div class="sg-state-example">
-        <p class="sg-state-example__label sg-table-label">form-active / selected</p>
+        <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">
           <!--
@@ -201,6 +201,16 @@
         </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">
@@ -379,8 +389,16 @@
       - form-disabled: technically unavailable and cannot be toggled.
     -->
     <div class="sg-form-preview-area sg-checkbox-field-list">
+      <label class="sg-checkbox-field-option sg-body" data-component="checkbox-field" data-component-state="default">
+        <span class="sg-state-example__label sg-table-label">Komponente normal</span>
+        <button class="sg-checkbox-field" type="button" role="checkbox" aria-checked="false" aria-label="Standard Checkbox">
+          <span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
+        </button>
+        <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">
-        <span class="sg-state-example__label sg-table-label">form-inactive-selectable</span>
+        <span class="sg-state-example__label sg-table-label">Variante aktivierbar: inaktiv</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>
@@ -388,10 +406,13 @@
       </label>
 
       <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">form-active / selected</span>
+        <span class="sg-state-example__label sg-table-label">Variante aktivierbar: aktiv</span>
-        <button class="sg-checkbox-field sg-form-active" type="button" role="checkbox" aria-checked="true" aria-label="Option gewählt">
+        <span class="sg-activatable-control">
-          <span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
+          <button class="sg-checkbox-field sg-form-active" type="button" role="checkbox" aria-checked="true" aria-label="Option gewählt">
-        </button>
+            <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>
 
@@ -418,8 +439,16 @@
       - form-disabled: technically unavailable and cannot be selected.
     -->
     <div class="sg-form-preview-area sg-checkbox-field-list">
+      <label class="sg-checkbox-field-option sg-body" data-component="radio-field" data-component-state="default">
+        <span class="sg-state-example__label sg-table-label">Komponente normal</span>
+        <button class="sg-radio-field" type="button" role="radio" aria-checked="false" aria-label="Standard Radio">
+          <span class="sg-radio-field__mark" aria-hidden="true"></span>
+        </button>
+        <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">
-        <span class="sg-state-example__label sg-table-label">form-inactive-selectable</span>
+        <span class="sg-state-example__label sg-table-label">Variante aktivierbar: inaktiv</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>
@@ -427,10 +456,13 @@
       </label>
 
       <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">form-active / selected</span>
+        <span class="sg-state-example__label sg-table-label">Variante aktivierbar: aktiv</span>
-        <button class="sg-radio-field sg-form-active" type="button" role="radio" aria-checked="true" aria-label="Option gewählt">
+        <span class="sg-activatable-control">
-          <span class="sg-radio-field__mark" aria-hidden="true"></span>
+          <button class="sg-radio-field sg-form-active" type="button" role="radio" aria-checked="true" aria-label="Option gewählt">
-        </button>
+            <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>
 
@@ -480,8 +512,8 @@
 
     <div class="sg-form-preview-area">
       <div class="sg-state-example">
-        <p class="sg-state-example__label sg-table-label">form-active / selected</p>
+        <p class="sg-state-example__label sg-table-label">Komponente normal</p>
-        <label class="sg-slider-row" data-component="slider" data-component-state="active">
+        <label class="sg-slider-row" data-component="slider" data-component-state="default">
           <span class="sg-label">Wert</span>
           <input
             class="sg-interaction-element sg-slider"
@@ -495,6 +527,41 @@
           <output class="sg-slider-value sg-body" for="slider">6.5</output>
         </label>
       </div>
+
+      <div class="sg-state-example">
+        <p class="sg-state-example__label sg-table-label">Variante aktivierbar: inaktiv</p>
+        <label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable">
+          <span class="sg-label">Wert</span>
+          <input
+            class="sg-interaction-element sg-slider sg-form-inactive-selectable"
+            type="range"
+            min="0"
+            max="10"
+            step="0.1"
+            value="2.0"
+            aria-label="Slider inaktiv auswählbar"
+          >
+          <output class="sg-slider-value sg-body" for="slider">2.0</output>
+        </label>
+      </div>
+
+      <div class="sg-state-example">
+        <p class="sg-state-example__label sg-table-label">Variante aktivierbar: aktiv</p>
+        <label class="sg-slider-row" data-component="slider" data-component-state="active">
+          <span class="sg-label">Wert</span>
+          <input
+            class="sg-interaction-element sg-slider sg-form-active"
+            type="range"
+            min="0"
+            max="10"
+            step="0.1"
+            value="6.5"
+            aria-label="Slider aktiv ausgewählt"
+          >
+          <output class="sg-slider-value sg-body" for="slider">6.5</output>
+          <button class="sg-pulldown-panel__remove" type="button" aria-label="Slider-Filter entfernen">×</button>
+        </label>
+      </div>
     </div>
   </section>
 

styleguide.css

@@ -462,6 +462,12 @@ section + section {
       color: var(--text-control-default);
     }
 
+    .sg-activatable-control {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--spacing-small);
+    }
+
     .sg-interaction-element {
       box-sizing: border-box;
       height: var(--interaction-height);
@@ -602,6 +608,7 @@ section + section {
     .sg-pulldown--inactive-selectable {
       background-color: var(--surface-control-inactive);
       color: var(--text-control-default);
+      opacity: var(--disabled-opacity);
     }
 
     .sg-pulldown--disabled {
@@ -918,6 +925,14 @@ section + section {
       color: var(--text-control-default);
     }
 
+    .sg-slider-row .sg-pulldown-panel__remove {
+      flex: 0 0 auto;
+    }
+
+    .sg-slider-row--inactive-selectable {
+      opacity: var(--disabled-opacity);
+    }
+
     @media (max-width: 48rem) {
       .sg-slider-row {
         flex-direction: column;
@@ -1248,6 +1263,7 @@ section + section {
     .sg-checkbox-field--inactive-selectable {
       color: var(--text-control-default);
       background: var(--surface-control-inactive);
+      opacity: var(--disabled-opacity);
     }
 
     .sg-checkbox-field--disabled {
@@ -1310,6 +1326,7 @@ section + section {
     .sg-radio-field--inactive-selectable {
       color: var(--text-control-default);
       background: var(--surface-radio-default);
+      opacity: var(--disabled-opacity);
     }
 
     .sg-radio-field--disabled {