fix: update focus methods to use Promise.resolve for consistency

deleonio · deleonio · commit c5c35b3efa56 · 2026-03-26T11:47:02.000+01:00
diff --git a/packages/components/src/components/accordion/shadow.tsx b/packages/components/src/components/accordion/shadow.tsx
@@ -54,7 +54,7 @@ export class KolAccordion implements AccordionAPI, FocusableElement {
 	 */
 	@Method()
 	public async focus(): Promise<void> {
-		return delegateFocus(this.host!, async () => this.buttonWcRef?.focus?.());
+		return delegateFocus(this.host!, () => Promise.resolve(this.buttonWcRef?.focus?.()));
 	}
 
 	private handleOnClick = (event: MouseEvent) => {
diff --git a/packages/components/src/components/badge/shadow.tsx b/packages/components/src/components/badge/shadow.tsx
@@ -58,7 +58,7 @@ export class KolBadge implements BadgeAPI, FocusableElement {
 	 */
 	@Method()
 	public async focus(): Promise<void> {
-		return delegateFocus(this.host!, async () => this.smartButtonRef?.focus?.());
+		return delegateFocus(this.host!, () => Promise.resolve(this.smartButtonRef?.focus?.()));
 	}
 
 	public render(): JSX.Element {
diff --git a/packages/components/src/components/button-link/shadow.tsx b/packages/components/src/components/button-link/shadow.tsx
@@ -63,7 +63,7 @@ export class KolButtonLink implements ButtonLinkProps, FocusableElement {
 	 */
 	@Method()
 	public async focus(): Promise<void> {
-		return delegateFocus(this.host!, async () => this.buttonWcRef?.focus?.());
+		return delegateFocus(this.host!, () => Promise.resolve(this.buttonWcRef?.focus?.()));
 	}
 
 	public render(): JSX.Element {
diff --git a/packages/components/src/components/button/component.tsx b/packages/components/src/components/button/component.tsx
@@ -80,12 +80,12 @@ export class KolButtonWc implements ButtonAPI {
 		return setFocus(this.buttonRef!);
 	}
 
-	private readonly setButtonRef = (ref: HTMLButtonElement | null) => {
-		this.buttonRef = ref || undefined;
+	private readonly setButtonRef = (ref?: HTMLButtonElement) => {
+		this.buttonRef = ref;
 	};
 
-	private readonly setTooltipRef = (ref: HTMLKolTooltipWcElement | null) => {
-		this.tooltipRef = ref || undefined;
+	private readonly setTooltipRef = (ref?: HTMLKolTooltipWcElement) => {
+		this.tooltipRef = ref;
 	};
 
 	private readonly hideTooltip = () => {
diff --git a/packages/components/src/components/button/shadow.tsx b/packages/components/src/components/button/shadow.tsx
@@ -37,8 +37,8 @@ export class KolButton implements ButtonProps, FocusableElement {
 	@Element() private readonly host?: HTMLKolButtonElement;
 	private buttonWcRef?: HTMLKolButtonWcElement;
 
-	private readonly setButtonWcRef = (ref: HTMLKolButtonWcElement | null) => {
-		this.buttonWcRef = ref || undefined;
+	private readonly setButtonWcRef = (ref?: HTMLKolButtonWcElement) => {
+		this.buttonWcRef = ref;
 	};
 
 	/**
@@ -55,7 +55,7 @@ export class KolButton implements ButtonProps, FocusableElement {
 	 */
 	@Method()
 	public async focus(): Promise<void> {
-		return delegateFocus(this.host!, async () => this.buttonWcRef?.focus?.());
+		return delegateFocus(this.host!, () => Promise.resolve(this.buttonWcRef?.focus?.()));
 	}
 
 	public render(): JSX.Element {
diff --git a/packages/components/src/components/combobox/shadow.tsx b/packages/components/src/components/combobox/shadow.tsx
@@ -35,7 +35,7 @@ import type {
 import type { EventDetail } from '../../schema/interfaces/EventDetail';
 import clsx from '../../utils/clsx';
 import { nonce } from '../../utils/dev.utils';
-import { delegateFocus } from '../../utils/element-focus';
+import { delegateFocus, setFocus } from '../../utils/element-focus';
 import { ComboboxController } from './controller';
 
 /**
@@ -69,7 +69,7 @@ export class KolCombobox implements ComboboxAPI, FocusableElement {
 	 */
 	@Method()
 	public async focus() {
-		return delegateFocus(this.host!, async () => this.refInput?.focus?.());
+		return delegateFocus(this.host!, () => setFocus(this.refInput!));
 	}
 
 	private toggleListbox = () => {
diff --git a/packages/components/src/components/details/shadow.tsx b/packages/components/src/components/details/shadow.tsx
@@ -40,7 +40,7 @@ export class KolDetails implements DetailsAPI, FocusableElement {
 	 */
 	@Method()
 	public async focus(): Promise<void> {
-		return delegateFocus(this.host!, async () => this.buttonWcRef?.focus?.());
+		return delegateFocus(this.host!, () => Promise.resolve(this.buttonWcRef?.focus?.()));
 	}
 
 	private toggleTimeout?: ReturnType<typeof setTimeout>;
diff --git a/packages/components/src/components/input-checkbox/shadow.tsx b/packages/components/src/components/input-checkbox/shadow.tsx
@@ -27,7 +27,7 @@ import type {
 } from '../../schema';
 
 import { nonce } from '../../utils/dev.utils';
-import { delegateFocus } from '../../utils/element-focus';
+import { delegateFocus, setFocus } from '../../utils/element-focus';
 import { InputCheckboxController } from './controller';
 
 import KolCheckboxStateWrapperFc, { type CheckboxStateWrapperProps } from '../../functional-component-wrappers/CheckboxStateWrapper/CheckboxStateWrapper';
@@ -76,7 +76,7 @@ export class KolInputCheckbox implements InputCheckboxAPI, FocusableElement {
 	 */
 	@Method()
 	public async focus() {
-		return delegateFocus(this.host!, async () => this.inputRef?.focus?.());
+		return delegateFocus(this.host!, () => setFocus(this.inputRef!));
 	}
 
 	private getFormFieldProps(): FormFieldStateWrapperProps {
diff --git a/packages/components/src/components/input-color/shadow.tsx b/packages/components/src/components/input-color/shadow.tsx
@@ -26,7 +26,7 @@ import KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../
 import KolInputContainerFc from '../../functional-component-wrappers/InputContainerStateWrapper/InputContainerStateWrapper';
 import KolInputStateWrapperFc, { type InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper/InputStateWrapper';
 import { nonce } from '../../utils/dev.utils';
-import { delegateFocus } from '../../utils/element-focus';
+import { delegateFocus, setFocus } from '../../utils/element-focus';
 import { InputColorController } from './controller';
 
 /**
@@ -97,7 +97,7 @@ export class KolInputColor implements InputColorAPI, FocusableElement {
 	 */
 	@Method()
 	public async focus() {
-		return delegateFocus(this.host!, async () => this.refInputText?.focus?.());
+		return delegateFocus(this.host!, () => setFocus(this.refInputText!));
 	}
 
 	private get hasSuggestions(): boolean {
diff --git a/packages/components/src/components/input-date/shadow.tsx b/packages/components/src/components/input-date/shadow.tsx
@@ -34,7 +34,7 @@ import KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../
 import KolInputContainerFc from '../../functional-component-wrappers/InputContainerStateWrapper/InputContainerStateWrapper';
 import KolInputStateWrapperFc, { type InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper/InputStateWrapper';
 import { nonce } from '../../utils/dev.utils';
-import { delegateFocus } from '../../utils/element-focus';
+import { delegateFocus, setFocus } from '../../utils/element-focus';
 import { propagateSubmitEventToForm } from '../form/controller';
 import { InputDateController } from './controller';
 
@@ -74,7 +74,7 @@ export class KolInputDate implements InputDateAPI, FocusableElement {
 	 */
 	@Method()
 	public async focus() {
-		return delegateFocus(this.host!, async () => this.inputRef?.focus?.());
+		return delegateFocus(this.host!, () => setFocus(this.inputRef!));
 	}
 
 	/**
diff --git a/packages/components/src/components/input-email/shadow.tsx b/packages/components/src/components/input-email/shadow.tsx
@@ -34,7 +34,7 @@ import KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../
 import KolInputContainerFc from '../../functional-component-wrappers/InputContainerStateWrapper/InputContainerStateWrapper';
 import KolInputStateWrapperFc, { type InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper/InputStateWrapper';
 import { nonce } from '../../utils/dev.utils';
-import { delegateFocus } from '../../utils/element-focus';
+import { delegateFocus, setFocus } from '../../utils/element-focus';
 import { propagateSubmitEventToForm } from '../form/controller';
 import { InputEmailController } from './controller';
 
@@ -72,7 +72,7 @@ export class KolInputEmail implements InputEmailAPI, FocusableElement {
 	 */
 	@Method()
 	public async focus() {
-		return delegateFocus(this.host!, async () => this.inputRef?.focus?.());
+		return delegateFocus(this.host!, () => setFocus(this.inputRef!));
 	}
 
 	private readonly onKeyDown = (event: KeyboardEvent) => {
diff --git a/packages/components/src/components/input-file/shadow.tsx b/packages/components/src/components/input-file/shadow.tsx
@@ -31,7 +31,7 @@ import KolInputContainerFc from '../../functional-component-wrappers/InputContai
 import KolInputStateWrapperFc, { type InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper/InputStateWrapper';
 import { translate } from '../../i18n';
 import { nonce } from '../../utils/dev.utils';
-import { delegateFocus } from '../../utils/element-focus';
+import { delegateFocus, setFocus } from '../../utils/element-focus';
 import { InputFileController } from './controller';
 
 /**
@@ -71,7 +71,7 @@ export class KolInputFile implements InputFileAPI, FocusableElement {
 	 */
 	@Method()
 	public async focus() {
-		return delegateFocus(this.host!, async () => this.inputRef?.focus?.());
+		return delegateFocus(this.host!, () => setFocus(this.inputRef!));
 	}
 
 	/**
diff --git a/packages/components/src/components/input-number/shadow.tsx b/packages/components/src/components/input-number/shadow.tsx
@@ -33,7 +33,7 @@ import KolInputContainerFc from '../../functional-component-wrappers/InputContai
 import KolInputStateWrapperFc, { type InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper/InputStateWrapper';
 import { IconFC } from '../../internal/functional-components/icon/component';
 import { nonce } from '../../utils/dev.utils';
-import { delegateFocus } from '../../utils/element-focus';
+import { delegateFocus, setFocus } from '../../utils/element-focus';
 import { propagateSubmitEventToForm } from '../form/controller';
 import { InputNumberController } from './controller';
 
@@ -71,7 +71,7 @@ export class KolInputNumber implements InputNumberAPI, FocusableElement {
 	 */
 	@Method()
 	public async focus() {
-		return delegateFocus(this.host!, async () => this.inputRef?.focus?.());
+		return delegateFocus(this.host!, () => setFocus(this.inputRef!));
 	}
 
 	private setInitialValueType(value?: number | NumberString | null) {
diff --git a/packages/components/src/components/input-password/shadow.tsx b/packages/components/src/components/input-password/shadow.tsx
@@ -36,7 +36,7 @@ import KolIconButtonFc from '../../functional-components/IconButton';
 import { translate } from '../../i18n';
 import type { PasswordVariantPropType } from '../../schema/props/variant/password-variant';
 import { nonce } from '../../utils/dev.utils';
-import { delegateFocus } from '../../utils/element-focus';
+import { delegateFocus, setFocus } from '../../utils/element-focus';
 import { propagateSubmitEventToForm } from '../form/controller';
 import { InputPasswordController } from './controller';
 
@@ -77,7 +77,7 @@ export class KolInputPassword implements InputPasswordAPI, FocusableElement {
 	 */
 	@Method()
 	public async focus() {
-		return delegateFocus(this.host!, async () => this.inputRef?.focus?.());
+		return delegateFocus(this.host!, () => setFocus(this.inputRef!));
 	}
 
 	private readonly onKeyDown = (event: KeyboardEvent) => {
diff --git a/packages/components/src/components/input-radio/shadow.tsx b/packages/components/src/components/input-radio/shadow.tsx
@@ -24,7 +24,7 @@ import type {
 } from '../../schema';
 
 import { nonce } from '../../utils/dev.utils';
-import { delegateFocus } from '../../utils/element-focus';
+import { delegateFocus, setFocus } from '../../utils/element-focus';
 import { propagateSubmitEventToForm } from '../form/controller';
 import { InputRadioController } from './controller';
 
@@ -78,7 +78,7 @@ export class KolInputRadio implements InputRadioAPI, FocusableElement {
 	 */
 	@Method()
 	public async focus() {
-		return delegateFocus(this.host!, async () => this.getFocusableInput()?.focus?.());
+		return delegateFocus(this.host!, () => setFocus(this.getFocusableInput()!));
 	}
 
 	private getFocusableInput(): HTMLInputElement | undefined {
diff --git a/packages/components/src/components/input-range/shadow.tsx b/packages/components/src/components/input-range/shadow.tsx
@@ -29,7 +29,7 @@ import KolInputContainerFc from '../../functional-component-wrappers/InputContai
 import KolInputStateWrapperFc, { type InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper/InputStateWrapper';
 import KolSuggestionsFc from '../../functional-components/Suggestions';
 import { nonce } from '../../utils/dev.utils';
-import { delegateFocus } from '../../utils/element-focus';
+import { delegateFocus, setFocus } from '../../utils/element-focus';
 import { propagateSubmitEventToForm } from '../form/controller';
 import { InputRangeController } from './controller';
 
@@ -55,7 +55,7 @@ export class KolInputRange implements InputRangeAPI, FocusableElement {
 	 */
 	@Method()
 	public async focus() {
-		return delegateFocus(this.host!, async () => this.refInputNumber?.focus?.());
+		return delegateFocus(this.host!, () => setFocus(this.refInputNumber!));
 	}
 
 	private readonly setInputNumberRef = (element: HTMLInputElement | null) => {
diff --git a/packages/components/src/components/input-text/shadow.tsx b/packages/components/src/components/input-text/shadow.tsx
@@ -36,7 +36,7 @@ import KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../
 import KolInputContainerFc from '../../functional-component-wrappers/InputContainerStateWrapper/InputContainerStateWrapper';
 import KolInputStateWrapperFc, { type InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper/InputStateWrapper';
 import { nonce } from '../../utils/dev.utils';
-import { delegateFocus } from '../../utils/element-focus';
+import { delegateFocus, setFocus } from '../../utils/element-focus';
 import { propagateSubmitEventToForm } from '../form/controller';
 import { InputTextController } from './controller';
 
@@ -111,7 +111,7 @@ export class KolInputText implements InputTextAPI, FocusableElement {
 	 */
 	@Method()
 	public async focus() {
-		return delegateFocus(this.host!, async () => this.inputRef?.focus?.());
+		return delegateFocus(this.host!, () => setFocus(this.inputRef!));
 	}
 
 	/**
diff --git a/packages/components/src/components/link-button/shadow.tsx b/packages/components/src/components/link-button/shadow.tsx
@@ -46,7 +46,7 @@ export class KolLinkButton implements LinkButtonProps, FocusableElement {
 	 */
 	@Method()
 	public async focus(): Promise<void> {
-		return delegateFocus(this.host!, async () => this.linkWcRef?.focus?.());
+		return delegateFocus(this.host!, () => Promise.resolve(this.linkWcRef?.focus?.()));
 	}
 
 	public render(): JSX.Element {
diff --git a/packages/components/src/components/link/component.tsx b/packages/components/src/components/link/component.tsx
@@ -78,12 +78,12 @@ export class KolLinkWc implements InternalLinkAPI {
 
 	private readonly translateOpenLinkInTab = translate('kol-open-link-in-tab');
 
-	private readonly setAnchorRef = (ref: HTMLAnchorElement | null) => {
-		this.anchorRef = ref || undefined;
+	private readonly setAnchorRef = (ref?: HTMLAnchorElement) => {
+		this.anchorRef = ref;
 	};
 
-	private readonly setTooltipRef = (ref: HTMLKolTooltipWcElement | null) => {
-		this.tooltipRef = ref || undefined;
+	private readonly setTooltipRef = (ref?: HTMLKolTooltipWcElement) => {
+		this.tooltipRef = ref;
 	};
 
 	private readonly hideTooltip = () => {
diff --git a/packages/components/src/components/link/shadow.tsx b/packages/components/src/components/link/shadow.tsx
@@ -42,7 +42,7 @@ export class KolLink implements LinkProps, FocusableElement {
 	 */
 	@Method()
 	public async focus(): Promise<void> {
-		return delegateFocus(this.host!, async () => this.linkWcRef?.focus?.());
+		return delegateFocus(this.host!, () => Promise.resolve(this.linkWcRef?.focus?.()));
 	}
 
 	public render(): JSX.Element {
diff --git a/packages/components/src/components/popover-button/component.tsx b/packages/components/src/components/popover-button/component.tsx
@@ -44,12 +44,12 @@ export class KolPopoverButtonWc implements PopoverButtonProps {
 	private popoverElement?: HTMLDivElement;
 	private readonly popoverId = `popover-${nonce()}`;
 
-	private setPopoverElementRef = (element?: HTMLDivElement): void => {
+	private readonly setPopoverElementRef = (element?: HTMLDivElement) => {
 		this.popoverElement = element;
 		this.popoverCtrl.setPopoverElementRef(element);
 	};
 
-	private setButtonElementRef = (element?: HTMLKolButtonWcElement): void => {
+	private readonly setButtonElementRef = (element?: HTMLKolButtonWcElement) => {
 		this.refButton = element;
 		if (element) {
 			this.popoverCtrl.setTriggerElement(element as HTMLElement);
diff --git a/packages/components/src/components/popover-button/shadow.tsx b/packages/components/src/components/popover-button/shadow.tsx
@@ -65,7 +65,7 @@ export class KolPopoverButton implements PopoverButtonProps, FocusableElement {
 	 */
 	@Method()
 	public async focus(): Promise<void> {
-		return delegateFocus(this.host!, async () => this.ref?.focus?.());
+		return delegateFocus(this.host!, () => Promise.resolve(this.ref?.focus?.()));
 	}
 
 	public render(): JSX.Element {
diff --git a/packages/components/src/components/select/component.tsx b/packages/components/src/components/select/component.tsx
@@ -45,8 +45,8 @@ export class KolSelectWc implements SelectAPI {
 	@Element() private readonly host?: HTMLKolSelectWcElement;
 	private selectRef?: HTMLSelectElement;
 
-	private readonly setSelectRef = (ref: HTMLSelectElement | null) => {
-		this.selectRef = ref || undefined;
+	private readonly setSelectRef = (ref?: HTMLSelectElement) => {
+		this.selectRef = ref;
 	};
 
 	/**
diff --git a/packages/components/src/components/select/shadow.tsx b/packages/components/src/components/select/shadow.tsx
@@ -52,7 +52,7 @@ export class KolSelect implements SelectProps, FocusableElement {
 	 */
 	@Method()
 	public async focus(): Promise<void> {
-		return delegateFocus(this.host!, async () => this.selectWcRef?.focus?.());
+		return delegateFocus(this.host!, () => Promise.resolve(this.selectWcRef?.focus?.()));
 	}
 
 	public render(): JSX.Element {
diff --git a/packages/components/src/components/single-select/shadow.tsx b/packages/components/src/components/single-select/shadow.tsx
@@ -38,7 +38,7 @@ import { IconFC } from '../../internal/functional-components/icon/component';
 import type { EventDetail } from '../../schema/interfaces/EventDetail';
 import clsx from '../../utils/clsx';
 import { nonce } from '../../utils/dev.utils';
-import { delegateFocus } from '../../utils/element-focus';
+import { delegateFocus, setFocus } from '../../utils/element-focus';
 import { SingleSelectController } from './controller';
 
 /**
@@ -77,7 +77,7 @@ export class KolSingleSelect implements SingleSelectAPI, FocusableElement {
 	 */
 	@Method()
 	public async focus() {
-		return delegateFocus(this.host!, async () => this.refInput?.focus?.());
+		return delegateFocus(this.host!, () => setFocus(this.refInput!));
 	}
 
 	private readonly setRefInput = (ref: HTMLInputElement | null) => {
diff --git a/packages/components/src/components/skip-nav/shadow.tsx b/packages/components/src/components/skip-nav/shadow.tsx
@@ -44,7 +44,7 @@ export class KolSkipNav implements SkipNavAPI {
 	 */
 	@Method()
 	public async focus(): Promise<void> {
-		return delegateFocus(this.host!, async () => this.firstLinkRef?.focus?.());
+		return delegateFocus(this.host!, () => Promise.resolve(this.firstLinkRef?.focus?.()));
 	}
 
 	/**
diff --git a/packages/components/src/components/split-button/shadow.tsx b/packages/components/src/components/split-button/shadow.tsx
@@ -63,7 +63,7 @@ export class KolSplitButton implements SplitButtonProps /*, SplitButtonAPI*/ {
 	 */
 	@Method()
 	public async focus(): Promise<void> {
-		return delegateFocus(this.host!, async () => this.primaryButtonWcRef?.focus?.());
+		return delegateFocus(this.host!, () => Promise.resolve(this.primaryButtonWcRef?.focus?.()));
 	}
 
 	private readonly clickButtonHandler = {
diff --git a/packages/components/src/components/tabs/shadow.tsx b/packages/components/src/components/tabs/shadow.tsx
@@ -163,7 +163,7 @@ export class KolTabs implements TabsAPI, FocusableElement {
 	 */
 	@Method()
 	public async focus(): Promise<void> {
-		return delegateFocus(this.host!, async () => this.currentTabButtonRef?.focus?.());
+		return delegateFocus(this.host!, () => Promise.resolve(this.currentTabButtonRef?.focus?.()));
 	}
 
 	private readonly setCurrentTabButtonRef = (ref: HTMLKolButtonWcElement | null) => {
diff --git a/packages/components/src/components/textarea/shadow.tsx b/packages/components/src/components/textarea/shadow.tsx
diff --git a/packages/components/src/components/toolbar/shadow.tsx b/packages/components/src/components/toolbar/shadow.tsx
diff --git a/packages/components/src/components/tree/shadow.tsx b/packages/components/src/components/tree/shadow.tsx

Original file line number	Diff line number	Diff line change
`@@ -54,7 +54,7 @@ export class KolAccordion implements AccordionAPI, FocusableElement {`
`54`	`54`	`*/`
`55`	`55`	`@Method()`
`56`	`56`	`public async focus(): Promise<void> {`
`57`		`- return delegateFocus(this.host!, async () => this.buttonWcRef?.focus?.());`
	`57`	`+ return delegateFocus(this.host!, () => Promise.resolve(this.buttonWcRef?.focus?.()));`
`58`	`58`	`}`
`59`	`59`
`60`	`60`	`private handleOnClick = (event: MouseEvent) => {`
Original file line number	Diff line number	Diff line change
`@@ -58,7 +58,7 @@ export class KolBadge implements BadgeAPI, FocusableElement {`
`58`	`58`	`*/`
`59`	`59`	`@Method()`
`60`	`60`	`public async focus(): Promise<void> {`
`61`		`- return delegateFocus(this.host!, async () => this.smartButtonRef?.focus?.());`
	`61`	`+ return delegateFocus(this.host!, () => Promise.resolve(this.smartButtonRef?.focus?.()));`
`62`	`62`	`}`
`63`	`63`
`64`	`64`	`public render(): JSX.Element {`
Original file line number	Diff line number	Diff line change
`@@ -63,7 +63,7 @@ export class KolButtonLink implements ButtonLinkProps, FocusableElement {`
`63`	`63`	`*/`
`64`	`64`	`@Method()`
`65`	`65`	`public async focus(): Promise<void> {`
`66`		`- return delegateFocus(this.host!, async () => this.buttonWcRef?.focus?.());`
	`66`	`+ return delegateFocus(this.host!, () => Promise.resolve(this.buttonWcRef?.focus?.()));`
`67`	`67`	`}`
`68`	`68`
`69`	`69`	`public render(): JSX.Element {`
Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,7 @@ export class KolDetails implements DetailsAPI, FocusableElement {`
`40`	`40`	`*/`
`41`	`41`	`@Method()`
`42`	`42`	`public async focus(): Promise<void> {`
`43`		`- return delegateFocus(this.host!, async () => this.buttonWcRef?.focus?.());`
	`43`	`+ return delegateFocus(this.host!, () => Promise.resolve(this.buttonWcRef?.focus?.()));`
`44`	`44`	`}`
`45`	`45`
`46`	`46`	`private toggleTimeout?: ReturnType<typeof setTimeout>;`