Fix input-radio hitbox

packages/components/src/components/input-radio/shadow.tsx

@@ -28,7 +28,7 @@ import { propagateSubmitEventToForm } from '../form/controller';
 
 import KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper';
 import KolFieldControlStateWrapperFc, { type FieldControlStateWrapperProps } from '../../functional-component-wrappers/FieldControlStateWrapper';
-import KolInputStateWrapperFc, { type InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper';
+import KolRadioStateWrapperFc, { type RadioStateWrapperProps } from '../../functional-component-wrappers/RadioStateWrapper';
 
 /**
  * @slot - Die Legende/Überschrift der Radiobuttons.
@@ -107,40 +107,34 @@ export class KolInputRadio implements InputRadioAPI, FocusableElement {
 		return obj;
 	}
 
-	private getInputProps(option: RadioOption<StencilUnknown>, id: string, index: number, selected: boolean): InputStateWrapperProps {
-		const obj: InputStateWrapperProps = {
+	private getInputProps(option: RadioOption<StencilUnknown>, id: string, index: number, selected: boolean): RadioStateWrapperProps {
+		return {
 			state: this.state,
-			id: id,
-			ref: this.state._value === option.value ? this.catchRef : undefined,
-			class: clsx('kol-input-radio', {
-				['kol-input-radio--disabled']: Boolean(this.state._disabled || option.disabled),
-			}),
-			'aria-label': this.state._hideLabel && typeof option.label === 'string' ? option.label : undefined,
-			type: 'radio',
-			name: this.state._name || this.state._id,
-			value: `-${index}`,
-			checked: selected,
-
-			...this.controller.onFacade,
-			onChange: this.onChange,
-			onClick: undefined, // onClick is not needed since onChange already triggers the correct event
-			onInput: this.onInput,
-			onKeyDown: this.onKeyDown.bind(this),
-			onFocus: (event: Event) => {
-				this.controller.onFacade.onFocus(event);
-				this.inputHasFocus = true;
-			},
-			onBlur: (event: Event) => {
-				this.controller.onFacade.onBlur(event);
-				this.inputHasFocus = false;
+			inputProps: {
+				id: id,
+				ref: this.state._value === option.value ? this.catchRef : undefined,
+				'aria-label': this.state._hideLabel && typeof option.label === 'string' ? option.label : undefined,
+				type: 'radio',
+				name: this.state._name || this.state._id,
+				value: `-${index}`,
+				checked: selected,
+				disabled: option.disabled,
+
+				...this.controller.onFacade,
+				onChange: this.onChange,
+				onClick: undefined, // onClick is not needed since onChange already triggers the correct event
+				onInput: this.onInput,
+				onKeyDown: this.onKeyDown.bind(this),
+				onFocus: (event: Event) => {
+					this.controller.onFacade.onFocus(event);
+					this.inputHasFocus = true;
+				},
+				onBlur: (event: Event) => {
+					this.controller.onFacade.onBlur(event);
+					this.inputHasFocus = false;
+				},
 			},
 		};
-
-		if (option.disabled) {
-			obj.disabled = true;
-		}
-
-		return obj;
 	}
 
 	private renderOption(option: RadioOption<StencilUnknown>, index: number): JSX.Element {
@@ -149,7 +143,7 @@ export class KolInputRadio implements InputRadioAPI, FocusableElement {
 
 		return (
 			<KolFieldControlStateWrapperFc key={customId} {...this.getOptionProps(option, customId)}>
-				<KolInputStateWrapperFc {...this.getInputProps(option, customId, index, selected)} />
+				<KolRadioStateWrapperFc {...this.getInputProps(option, customId, index, selected)} />
 			</KolFieldControlStateWrapperFc>
 		);
 	}

packages/components/src/components/input-radio/style.scss

@@ -37,40 +37,54 @@
 	}
 
 	.kol-input-radio {
-		appearance: none;
-		border-width: var(--border-width);
-		border-style: solid;
-		border-radius: 100%;
-		cursor: pointer;
 		display: flex;
-		height: var(--input-size);
-		margin: 0;
-		min-height: var(--input-size);
-		min-width: var(--input-size);
-		padding: 0;
-		width: var(--input-size);
+		position: relative;
+		cursor: pointer;
+		justify-content: center;
+		align-items: center;
+		width: var(--a11y-min-size);
+		height: var(--a11y-min-size);
 
-		&:before {
+		&__input {
+			appearance: none;
+			border-width: var(--border-width);
+			border-style: solid;
 			border-radius: 100%;
-			content: '';
-			margin: auto;
-			height: calc(var(--input-size) / 2);
-			width: calc(var(--input-size) / 2);
-		}
+			cursor: pointer;
+			display: flex;
+			height: var(--input-size);
+			margin: 0;
+			min-height: var(--input-size);
+			min-width: var(--input-size);
+			padding: 0;
+			width: var(--input-size);
 
-		&:checked {
 			&:before {
-				background-color: #000;
+				border-radius: 100%;
+				content: '';
+				margin: auto;
+				height: calc(var(--input-size) / 2);
+				width: calc(var(--input-size) / 2);
+			}
+
+			&:checked {
+				&:before {
+					background-color: #000;
 
-				@media (forced-colors: active) {
-					/* Give it a visible background in forced colors mode */
-					background-color: selectedItem !important;
+					@media (forced-colors: active) {
+						/* Give it a visible background in forced colors mode */
+						background-color: selectedItem !important;
+					}
 				}
 			}
+
+			&:disabled {
+				opacity: 0.5;
+				cursor: not-allowed;
+			}
 		}
 
-		&:disabled {
-			opacity: 0.5;
+		&--disabled {
 			cursor: not-allowed;
 		}
 	}