Issue #3400937 by jwilson3: Improve Webform checkbox and radio styles

css/components/webform.element.term_checkboxes.css

+/**
+ * @file
+ * Term checkboxes element styles.
+ */
+
+.webform-term-checkboxes-scroll .fieldset-wrapper {
+  overflow: auto;
+  max-height: 11.75rem;
+  padding: 0 .75rem;
+  border: 1px solid #e2e7e9;
+  border-radius: 0.25rem;
+}

rivet.info.yml

@@ -28,6 +28,7 @@ libraries-extend:
     - rivet/webform.element.horizontal_rule
 libraries-override:
   webform/webform.element.color: rivet/webform.element.color
+  webform/webform.element.term_checkboxes: rivet/webform.element.term_checkboxes
 
 core_version_requirement: ^10
 generator: 'starterkit_theme:10.1.2'

rivet.libraries.yml

@@ -159,6 +159,12 @@ webform.element.horizontal_rule:
     component:
       css/components/webform.element.horizontal_rule.css: {}
 
+webform.element.term_checkboxes:
+  version: VERSION
+  css:
+    component:
+      css/components/webform.element.term_checkboxes.css: {}
+
 webform.element.multiple:
   version: VERSION
   css:

templates/form/form-element--checkbox.html.twig

@@ -53,7 +53,7 @@
     'form-type-' ~ type|clean_class,
     'js-form-item-' ~ name|clean_class,
     'form-item-' ~ name|clean_class,
-    title_display not in ['after', 'before'] ? 'form-no-label',
+    title_display not in ['after', 'before'] ? 'form-no-label rvt-checkbox--sr-only-label',
     disabled == 'disabled' ? 'form-disabled',
     errors ? 'form-item--error',
   ]
@@ -65,9 +65,6 @@
   ]
 %}
 <div{{attributes.addClass(classes)}}>
-	{% if label_display in ['before', 'invisible'] %}
-		{{ label }}
-	{% endif %}
 	{% if prefix is not empty %}
 		<span class="field-prefix">{{ prefix }}</span>
 	{% endif %}
@@ -80,7 +77,7 @@
 	{% if suffix is not empty %}
 		<span class="field-suffix">{{ suffix }}</span>
 	{% endif %}
-	{% if label_display == 'after' %}
+	{% if label_display in ['before', 'after', 'invisible'] %}
 		{{ label }}
 	{% endif %}
 	{% if errors %}

templates/form/form-element-label--checkbox.html.twig

+{#
+/**
+ * @file
+ * Theme override for a form element label.
+ *
+ * Available variables:
+ * - title: The label's text.
+ * - title_display: Elements title_display setting.
+ * - required: An indicator for whether the associated form element is required.
+ * - attributes: A list of HTML attributes for the label.
+ *
+ * @see template_preprocess_form_element_label()
+ */
+#}
+{%
+  set classes = [
+    title_display == 'after' ? 'rvt-c-label--option',
+    required ? 'js-form-required',
+    required ? 'form-required',
+  ]
+%}
+{% if title is not empty or required -%}
+	<label{{attributes.addClass(classes)}}>{{ title }}</label>
+{%- endif %}
+

templates/form/radios.html.twig

@@ -10,7 +10,7 @@
  * @see template_preprocess_radios()
  */
 #}
-<ul{{ attributes.addClass('rvt-list-plain rvt-width-xl rvt-m-tb-xs') }}>
+<ul{{ attributes.addClass('rvt-list-plain rvt-width-xl rvt-m-tb-xxs') }}>
 {% for item in element|filter((v, k) => k|first != '#') %}
 <li>{{ item }}</li>
 {% endfor %}