refactor: enhanced clickable area on the inline-end (#839)

Author: mfranzke

source/_patterns/01-elements/_form-elements.scss

@@ -134,3 +134,18 @@
 		padding: to-rem($pxValue: 6) to-rem($pxValue: 10);
 	}
 }
+
+// enhance the clickable area for checkbox and radio elements
+%form-element-enhanced-clickable-area {
+	&:has(+ label) {
+		&::after {
+			content: "";
+			width: calc(
+				var(--db-form-element-dimensions) + #{to-rem($pxValue: 4)}
+			);
+			height: var(--db-form-element-dimensions);
+			transform: translateX(#{to-rem($pxValue: 4)});
+			position: absolute;
+		}
+	}
+}

source/_patterns/01-elements/checkbox/checkbox.scss

@@ -5,6 +5,13 @@
 @import "../form-elements";
 
 .elm-checkbox {
+	--db-form-element-dimensions: var(
+		--db-checkbox-dimensions,
+		#{to-rem($pxValue: 24)}
+	);
+
+	@extend %form-element-enhanced-clickable-area;
+
 	@include icon("\00A0", 24, "outline", $partial: $partial);
 	align-content: center;
 
@@ -15,9 +22,9 @@
 	color: $checkbox---color;
 
 	display: inline-flex;
-	height: to-rem($pxValue: 24);
+	height: var(--db-form-element-dimensions);
 	justify-content: center;
-	width: to-rem($pxValue: 24);
+	width: var(--db-form-element-dimensions);
 
 	&[type="checkbox"] {
 		vertical-align: top;
@@ -67,6 +74,6 @@
 	& + label {
 		@extend %form-label;
 
-		margin-left: $db-spacing-xs;
+		padding-inline-start: $db-spacing-xs;
 	}
 }

source/_patterns/01-elements/radio/radio.scss

@@ -5,6 +5,13 @@
 @import "../form-elements";
 
 .elm-radio {
+	--db-form-element-dimensions: var(
+		--db-radio-dimensions,
+		#{to-em($pxValue: 20)}
+	);
+
+	@extend %form-element-enhanced-clickable-area;
+
 	appearance: none;
 
 	background-color: rgba(255, 255, 255, 0.1);
@@ -15,11 +22,11 @@
 	display: inline-block;
 
 	font-size: to-rem($pxValue: 16);
-	height: to-em($pxValue: 20);
+	height: var(--db-form-element-dimensions);
 
 	transition: border-width 0.5s ease;
 
-	width: to-em($pxValue: 20);
+	width: var(--db-form-element-dimensions);
 
 	&[type="radio"] {
 		vertical-align: sub;
@@ -56,7 +63,7 @@
 	& + label {
 		@extend %form-label;
 
-		margin-left: $db-spacing-xs;
+		padding-inline-start: $db-spacing-xs;
 	}
 
 	&:disabled {