Fix single-select options validation and toolbar focus delegation

single-select: Use state._options (parsed by controller) for validation
and restore original else-branch for updateInputValue to avoid erasing
user input when _value is null.

toolbar: Call firstEnabledItem.focus() (the Stencil @method) instead of
setFocus() which calls the native HTMLElement focus and doesn't delegate
to the inner button. Both HTMLKolButtonWcElement and HTMLKolLinkWcElement
expose focus(): Promise<void> so no any-cast is needed.

https://claude.ai/code/session_01BRnViGPGv2XXH7kaE3EDCZ

Author: claude

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

@@ -711,9 +711,20 @@ export class KolSingleSelect implements SingleSelectAPI, FocusableElement {
 	public validateOptions(value?: OptionsPropType): void {
 		this.controller.validateOptions(value);
 		this._filteredOptions = value;
-		this.updateInputValue(this._value);
+		// When a selected value is no longer in the updated options, clear it.
+		// Use state._options which is guaranteed to be a parsed array after the controller call.
+		if (this._value !== null && Array.isArray(this.state._options)) {
+			const valueStillValid = this.state._options.some((option) => option.value === this._value && !option.disabled);
+			if (!valueStillValid) {
+				this._value = null;
+				this._inputValue = '';
+				this.controller.setFormAssociatedValue(null);
+			}
+		}
 		if (this._isOpen) {
 			this.setFilteredOptionsByQuery(this._inputValue);
+		} else {
+			this.updateInputValue(this._value);
 		}
 	}
 

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

@@ -8,7 +8,7 @@ import { KeyboardKey } from '../../schema/enums';
 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,7 @@ export class KolToolbar implements ToolbarAPI, FocusableElement {
 	public async focus(): Promise<void> {
 		const firstEnabledItem = this.indexToElement.get(this.currentIndex);
 		if (firstEnabledItem) {
-			return delegateFocus(this.host!, () => setFocus(firstEnabledItem));
+			return delegateFocus(this.host!, () => firstEnabledItem.focus());
 		}
 	}