SingleSelect: Fix prop/state synchronization

Refs: #7557

Author: sdvg

packages/components/src/components/single-select/shadow.tsx

@@ -50,7 +50,7 @@ export class KolSingleSelect implements SingleSelectAPI {
 	@Method()
 	// eslint-disable-next-line @typescript-eslint/require-await
 	public async getValue(): Promise<StencilUnknown | undefined> {
-		return this.state._value;
+		return this._value;
 	}
 
 	@Method()
@@ -80,9 +80,14 @@ export class KolSingleSelect implements SingleSelectAPI {
 		}
 	};
 
+	/**
+	 * If there are options and the current input value doesn't match any option's label,
+	 * resets the input value to match the label of the currently selected option.
+	 * Closes the dropdown and resets the opened state.
+	 */
 	private onBlur() {
 		if (Array.isArray(this.state._options) && this.state._options.length > 0 && !this.state._options.some((option) => option.label === this._inputValue)) {
-			this._inputValue = this.state._options.find((option) => (option as Option<string>).value === this.state._value)?.label as string;
+			this._inputValue = this.state._options.find((option) => (option as Option<string>).value === this._value)?.label as string;
 			this._filteredOptions = [...this.state._options];
 		}
 		this._isOpen = false;
@@ -110,7 +115,7 @@ export class KolSingleSelect implements SingleSelectAPI {
 		this.controller.onFacade.onChange(new CustomEvent('change', { bubbles: true, detail: { name: this.state._name, value: option.value } }), option.value);
 		this._filteredOptions = [...this.state._options];
 
-		this.controller.setFormAssociatedValue(this.state._value);
+		this.controller.setFormAssociatedValue(this._value);
 	}
 
 	private onInput(event: Event) {
@@ -281,7 +286,7 @@ export class KolSingleSelect implements SingleSelectAPI {
 												}}
 												tabIndex={-1}
 												role="option"
-												aria-selected={this.state._value === (option as Option<string>).value ? 'true' : undefined}
+												aria-selected={this._value === (option as Option<string>).value ? 'true' : undefined}
 												onClick={(event: Event) => {
 													this.selectOption(option as Option<string>);
 													this.refInput?.focus();
@@ -313,7 +318,7 @@ export class KolSingleSelect implements SingleSelectAPI {
 													name="options"
 													id={`option-radio-${index}`}
 													value={(option as Option<string>).value}
-													checked={this.state._value === (option as Option<string>).value || index === this._focusedOptionIndex}
+													checked={this._value === (option as Option<string>).value || index === this._focusedOptionIndex}
 												/>
 
 												<label htmlFor={`option-radio-${index}`} class="radio-label">
@@ -571,7 +576,6 @@ export class KolSingleSelect implements SingleSelectAPI {
 		_id: `id-${nonce()}`,
 		_label: '', // ⚠ required
 		_options: [],
-		_value: '',
 		_hideClearButton: false,
 	};