refactor: rename propagateFocus to delegateFocus for clarity and consistency

deleonio · deleonio · commit 5e6dde949cdb · 2026-03-24T19:37:18.000+01:00
diff --git a/packages/components/src/components/button/component.tsx b/packages/components/src/components/button/component.tsx
@@ -55,7 +55,7 @@ import { SpanFC } from '../../internal/functional-components/span/component';
 import type { AriaHasPopupPropType } from '../../schema/props/aria-has-popup';
 import { validateAccessAndShortKey } from '../../schema/validators/access-and-short-key';
 import clsx from '../../utils/clsx';
-import { propagateFocus } from '../../utils/element-focus';
+import { delegateFocus } from '../../utils/element-focus';
 import { dispatchDomEvent, KolEvent } from '../../utils/events';
 import { propagateResetEventToForm, propagateSubmitEventToForm } from '../form/controller';
 import { AssociatedInputController } from '../input-adapter-leanup/associated.controller';
@@ -77,7 +77,7 @@ export class KolButtonWc implements ButtonAPI {
 	 */
 	@Method()
 	public async focus(host: HTMLElement): Promise<void> {
-		await propagateFocus(host, this.buttonRef);
+		await delegateFocus(host, this.buttonRef);
 	}
 
 	private readonly hideTooltip = () => {
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 { propagateFocus } from '../../utils/element-focus';
+import { delegateFocus } from '../../utils/element-focus';
 import { ComboboxController } from './controller';
 
 /**
@@ -69,7 +69,7 @@ export class KolCombobox implements ComboboxAPI, FocusableElement {
 	 */
 	@Method()
 	public async focus() {
-		await propagateFocus(this.host, this.refInput);
+		await delegateFocus(this.host, this.refInput);
 	}
 
 	private toggleListbox = () => {
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 { propagateFocus } from '../../utils/element-focus';
+import { delegateFocus } 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() {
-		await propagateFocus(this.host, this.inputRef);
+		await delegateFocus(this.host, 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 { propagateFocus } from '../../utils/element-focus';
+import { delegateFocus } from '../../utils/element-focus';
 import { InputColorController } from './controller';
 
 /**
@@ -97,7 +97,7 @@ export class KolInputColor implements InputColorAPI, FocusableElement {
 	 */
 	@Method()
 	public async focus() {
-		await propagateFocus(this.host, this.refInputText);
+		await delegateFocus(this.host, 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 { propagateFocus } from '../../utils/element-focus';
+import { delegateFocus } 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() {
-		await propagateFocus(this.host, this.inputRef);
+		await delegateFocus(this.host, 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 { propagateFocus } from '../../utils/element-focus';
+import { delegateFocus } 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() {
-		await propagateFocus(this.host, this.inputRef);
+		await delegateFocus(this.host, 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 { propagateFocus } from '../../utils/element-focus';
+import { delegateFocus } from '../../utils/element-focus';
 import { InputFileController } from './controller';
 
 /**
@@ -71,7 +71,7 @@ export class KolInputFile implements InputFileAPI, FocusableElement {
 	 */
 	@Method()
 	public async focus() {
-		await propagateFocus(this.host, this.inputRef);
+		await delegateFocus(this.host, 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 { propagateFocus } from '../../utils/element-focus';
+import { delegateFocus } 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() {
-		await propagateFocus(this.host, this.inputRef);
+		await delegateFocus(this.host, 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 { propagateFocus } from '../../utils/element-focus';
+import { delegateFocus } 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() {
-		await propagateFocus(this.host, this.inputRef);
+		await delegateFocus(this.host, 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 { propagateFocus } from '../../utils/element-focus';
+import { delegateFocus } 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() {
-		await propagateFocus(this.host, this.getFocusableInput());
+		await delegateFocus(this.host, 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 { propagateFocus } from '../../utils/element-focus';
+import { delegateFocus } 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() {
-		await propagateFocus(this.host, this.refInputNumber);
+		await delegateFocus(this.host, this.refInputNumber);
 	}
 
 	private readonly catchInputNumberRef = (element?: HTMLInputElement) => {
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 { propagateFocus } from '../../utils/element-focus';
+import { delegateFocus } 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() {
-		await propagateFocus(this.host, this.inputRef);
+		await delegateFocus(this.host, this.inputRef);
 	}
 
 	/**
diff --git a/packages/components/src/components/link/component.tsx b/packages/components/src/components/link/component.tsx
@@ -52,7 +52,7 @@ import {
 	validateVariantClassName,
 } from '../../schema';
 import { validateTabIndex } from '../../schema/props/tab-index';
-import { propagateFocus } from '../../utils/element-focus';
+import { delegateFocus } from '../../utils/element-focus';
 import { dispatchDomEvent, KolEvent } from '../../utils/events';
 import type { UnsubscribeFunction } from './ariaCurrentService';
 import { onLocationChange } from './ariaCurrentService';
@@ -91,7 +91,7 @@ export class KolLinkWc implements InternalLinkAPI {
 	 */
 	@Method()
 	public async focus(host: HTMLElement): Promise<void> {
-		await propagateFocus(host, this.anchorRef);
+		await delegateFocus(host, this.anchorRef);
 	}
 
 	private readonly onClick = (event: Event) => {
diff --git a/packages/components/src/components/select/component.tsx b/packages/components/src/components/select/component.tsx
@@ -29,7 +29,7 @@ import KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../
 import KolInputContainerFc from '../../functional-component-wrappers/InputContainerStateWrapper/InputContainerStateWrapper';
 import KolSelectStateWrapperFc, { type SelectStateWrapperProps } from '../../functional-component-wrappers/SelectStateWrapper/SelectStateWrapper';
 import { nonce } from '../../utils/dev.utils';
-import { propagateFocus } from '../../utils/element-focus';
+import { delegateFocus } from '../../utils/element-focus';
 import { propagateSubmitEventToForm } from '../form/controller';
 import { SelectController } from './controller';
 
@@ -67,7 +67,7 @@ export class KolSelectWc implements SelectAPI {
 	 */
 	@Method()
 	public async focus(host: HTMLElement): Promise<void> {
-		await propagateFocus(host, this.selectRef);
+		await delegateFocus(host, this.selectRef);
 	}
 
 	private getFormFieldProps(): FormFieldStateWrapperProps {
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 { propagateFocus } from '../../utils/element-focus';
+import { delegateFocus } from '../../utils/element-focus';
 import { SingleSelectController } from './controller';
 
 /**
@@ -77,7 +77,7 @@ export class KolSingleSelect implements SingleSelectAPI, FocusableElement {
 	 */
 	@Method()
 	public async focus() {
-		await propagateFocus(this.host, this.refInput);
+		await delegateFocus(this.host, this.refInput);
 	}
 
 	private readonly catchRef = (ref?: HTMLInputElement) => {
diff --git a/packages/components/src/components/textarea/shadow.tsx b/packages/components/src/components/textarea/shadow.tsx
@@ -34,7 +34,7 @@ import KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../
 import KolInputContainerStateWrapperFc from '../../functional-component-wrappers/InputContainerStateWrapper/InputContainerStateWrapper';
 import KolTextAreaStateWrapperFc, { type TextAreaStateWrapperProps } from '../../functional-component-wrappers/TextAreaStateWrapper/TextAreaStateWrapper';
 import { nonce } from '../../utils/dev.utils';
-import { propagateFocus } from '../../utils/element-focus';
+import { delegateFocus } from '../../utils/element-focus';
 import { TextareaController } from './controller';
 
 /**
@@ -84,7 +84,7 @@ export class KolTextarea implements TextareaAPI, FocusableElement {
 	 */
 	@Method()
 	public async focus() {
-		await propagateFocus(this.host, this.textareaRef);
+		await delegateFocus(this.host, this.textareaRef);
 	}
 
 	private getFormFieldProps(): FormFieldStateWrapperProps {
diff --git a/packages/components/src/components/tree/shadow.tsx b/packages/components/src/components/tree/shadow.tsx
@@ -3,7 +3,7 @@ import { Component, Element, h, Method, Prop } from '@stencil/core';
 
 import { KolTreeWcTag } from '../../core/component-names';
 import type { FocusableElement, LabelPropType, TreeProps } from '../../schema';
-import { propagateFocus } from '../../utils/element-focus';
+import { delegateFocus } from '../../utils/element-focus';
 
 @Component({
 	tag: 'kol-tree',
@@ -26,7 +26,7 @@ export class KolTree implements TreeProps, FocusableElement {
 	 */
 	@Method()
 	public async focus() {
-		await propagateFocus(this.host, this.treeWcRef);
+		await delegateFocus(this.host, this.treeWcRef);
 	}
 
 	private readonly catchTreeRef = (ref?: HTMLKolTreeWcElement) => {
diff --git a/packages/components/src/utils/element-focus.ts b/packages/components/src/utils/element-focus.ts
@@ -1,12 +1,12 @@
 /**
- * Propagates focus to an element after component is ready and data-themed attribute is set.
+ * Delegates focus to an element after component is ready and data-themed attribute is set.
  * Ensures element is fully initialized, visible/styled before focus is applied.
  * Uses MutationObserver to wait for theming attribute on host element.
  *
  * @param host - The Stencil host element (must have componentOnReady method)
  * @param focusElement - The input element to focus
  */
-export async function propagateFocus(host: HTMLElement | undefined, focusElement?: HTMLElement): Promise<void> {
+export async function delegateFocus(host: HTMLElement | undefined, focusElement?: HTMLElement): Promise<void> {
 	if (!host?.hasAttribute('data-themed')) {
 		await new Promise<void>((resolve) => {
 			const observer = new MutationObserver(() => {
