fix: single-select validation and improve test coverage

packages/components/playwright.config.ts

@@ -38,6 +38,6 @@ export default defineConfig({
 		url: TEST_URL,
 		reuseExistingServer: false,
 		/* The builtin Stencil server sometimes fails to serve some assets which leads to intermittent test failures. Use a more stable server (without watcher) for CI: */
-		...(process.env.CI ? { command: `stencil build --dev && mv dist/kolibri dist/build && npx serve dist -p ${TEST_PORT} -L` } : {}),
+		command: `stencil build --dev && mv dist/kolibri dist/build && npx serve dist -p ${TEST_PORT} -L`,
 	},
 });

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

@@ -349,6 +349,7 @@ export class KolSingleSelect implements SingleSelectAPI, FocusableElement {
 								_variant="ghost"
 								_disabled={isDisabled}
 								class="kol-single-select__delete"
+								data-testid="single-select-delete"
 								hidden={isDisabled}
 								_on={{
 									onClick: (event: MouseEvent) => {
@@ -440,8 +441,6 @@ export class KolSingleSelect implements SingleSelectAPI, FocusableElement {
 		);
 	}
 
-
-
 	@Listen('keydown')
 	public handleKeyDown(event: KeyboardEvent) {
 		const handleEvent = (isOpen?: boolean, callback?: () => void): void => {
@@ -712,6 +711,15 @@ export class KolSingleSelect implements SingleSelectAPI, FocusableElement {
 	public validateOptions(value?: OptionsPropType): void {
 		this.controller.validateOptions(value);
 		this._filteredOptions = value;
+		// Check if current value is still valid in the new options
+		if (this._value !== null && Array.isArray(value)) {
+			const valueExists = value.some((option) => option.value === this._value);
+			if (!valueExists) {
+				this._value = null;
+				this._inputValue = '';
+				this.controller.setFormAssociatedValue(null);
+			}
+		}
 		if (this._isOpen) {
 			this.setFilteredOptionsByQuery(this._inputValue);
 		} else {
@@ -794,6 +802,13 @@ export class KolSingleSelect implements SingleSelectAPI, FocusableElement {
 		if (!Array.isArray(this._options)) {
 			return;
 		}
+
+		// Normalize undefined to null
+		if (value === undefined) {
+			value = null;
+			this._value = null;
+		}
+
 		if (this.isSelectionCleared && value === null) {
 			this._inputValue = '';
 			this._filteredOptions = [...this.state._options];

packages/components/src/components/toolbar/shadow.tsx

@@ -8,7 +8,7 @@
 import type { OrientationPropType } from '../../schema/props/orientation';
 import { validateOrientation } from '../../schema/props/orientation';
 import { delegateClick, setClick } from '../../utils/element-click';
-import { delegateFocus, setFocus } from '../../utils/element-focus';
+import { delegateFocus } from '../../utils/element-focus';
 
 @Component({
 	tag: 'kol-toolbar',
@@ -36,7 +36,9 @@
 	public async focus(): Promise<void> {
 		const firstEnabledItem = this.indexToElement.get(this.currentIndex);
 		if (firstEnabledItem) {
-			return delegateFocus(this.host!, () => setFocus(firstEnabledItem));
+			return delegateFocus(this.host!, async () => {
+				await (firstEnabledItem as any).focus?.();
+			});
 		}
 	}