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

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 {