refactor(tag): enabled keyboard focusability again

packages/components/src/components/tag/tag.scss

@@ -22,7 +22,8 @@
 	}
 
 	&:not([data-no-text="true"]) {
-		padding-inline: variables.$db-spacing-fixed-2xs;
+		--db-padding-inline-start: #{variables.$db-spacing-fixed-2xs};
+		padding-inline: var(--db-padding-inline-start) #{variables.$db-spacing-fixed-2xs};
 
 		&:has(.db-tab-remove-button) {
 			padding-inline-end: 0;
@@ -90,8 +91,29 @@
 			}
 		}
 
+		// Handle native radio and checkbox input elements, especially regarding focus-visible indicator
+		// TODO: Reevaluate whether we could use the standard HTML elements instead of our components
 		input {
-			display: none;
+			inline-size: calc(100% + 2px);
+			block-size: calc(100% + 2px);
+			position: absolute;
+			margin-inline-end: initial;
+			border: none;
+			border-radius: inherit;
+			transform: translateX(
+				calc(
+					(
+							var(
+									--db-padding-inline-start,
+									#{variables.$db-spacing-fixed-2xs}
+								) + #{variables.$db-border-height-sm}
+						) * -1
+				)
+			);
+
+			&:checked::before {
+				--db-icon: "";
+			}
 		}
 	}
 
@@ -103,6 +125,7 @@
 
 		&::after {
 			--db-icon-margin-start: 0;
+			--db-icon-font-size: 0;
 			content: "" !important;
 		}
 	}

packages/components/src/styles/_icon-passing.scss

@@ -14,10 +14,11 @@
 		a,
 		button,
 		label {
-			padding-inline-start: calc(
+			--db-padding-inline-start: calc(
 				#{$inline-start} + #{icons.$default-icon-margin-end} +
 					var(--db-base-font-size) * var(--db-base-line-height)
 			);
+			padding-inline-start: var(--db-padding-inline-start);
 		}
 	}
 }