mtrl 0.9.6 → 0.9.8

package/dist/components/select/features.js

@@ -75,9 +75,9 @@ const processMenuItems = (options) => {
         return menuItem;
     });
 };
-const setupCombobox = (component, menu, state, choose, prefix) => {
-    const input = component.textfield.input;
-    const field = component.textfield.element;
+const setupCombobox = (component, textfield, menu, state, choose, prefix) => {
+    const input = textfield.input;
+    const field = textfield.element;
     const activeClass = `${prefix}-menu-item--active`;
     const TYPEAHEAD_DELAY = 500;
     const PAGE = 10;
@@ -291,12 +291,13 @@ export const withMenu = (config) => (component) => {
         console.warn("Cannot add menu: textfield not found");
         return component;
     }
+    const textfield = component.textfield;
     const state = {
         options: config.options || [],
         selectedOption: null,
     };
     if (config.value) {
-        state.selectedOption = state.options.find((opt) => opt.id === config.value);
+        state.selectedOption = state.options.find((opt) => opt.id === config.value) ?? null;
     }
     const menuItems = processMenuItems(state.options);
     const listbox = !state.options.some((option) => option && option.hasSubmenu);
@@ -317,7 +318,7 @@ export const withMenu = (config) => (component) => {
     });
     const choose = (option, originalEvent) => {
         state.selectedOption = option;
-        component.textfield.setValue(option.text);
+        textfield.setValue(option.text);
         menu.setSelected(option.id);
         if (component.emit) {
             const changeEvent = {
@@ -346,11 +347,11 @@ export const withMenu = (config) => (component) => {
         choose(option, event.originalEvent);
     });
     if (listbox) {
-        setupCombobox(component, menu, state, choose, config.prefix || "mtrl");
+        setupCombobox(component, textfield, menu, state, choose, config.prefix || "mtrl");
     }
     if (!listbox)
-        component.textfield.element.addEventListener("keydown", (e) => {
-            if (component.textfield.input.disabled)
+        textfield.element.addEventListener("keydown", (e) => {
+            if (textfield.input.disabled)
                 return;
             if ((e.key === "Enter" || e.key === " " || e.key === "ArrowDown") &&
                 !menu.isOpen()) {
@@ -371,29 +372,29 @@ export const withMenu = (config) => (component) => {
                 defaultPrevented: false,
             });
         }
-        component.textfield.element.classList.add(`${config.prefix || "mtrl"}-select--open`);
+        textfield.element.classList.add(`${config.prefix || "mtrl"}-select--open`);
         const PREFIX = config.prefix || "mtrl";
-        component.textfield.element.classList.add(`${PREFIX}-textfield--focused`);
-        if (component.textfield.element.classList.contains(`${PREFIX}-textfield--filled`)) {
-            component.textfield.element.classList.add(`${PREFIX}-textfield--filled-focused`);
+        textfield.element.classList.add(`${PREFIX}-textfield--focused`);
+        if (textfield.element.classList.contains(`${PREFIX}-textfield--filled`)) {
+            textfield.element.classList.add(`${PREFIX}-textfield--filled-focused`);
         }
     });
     menu.on("close", (event) => {
-        component.textfield.element.classList.remove(`${config.prefix || "mtrl"}-select--open`);
+        textfield.element.classList.remove(`${config.prefix || "mtrl"}-select--open`);
         setTimeout(() => {
             const PREFIX = config.prefix || "mtrl";
-            const isFocused = document.activeElement === component.textfield.input ||
-                component.textfield.element.contains(document.activeElement);
+            const isFocused = document.activeElement === textfield.input ||
+                textfield.element.contains(document.activeElement);
             if (isFocused) {
-                component.textfield.element.classList.add(`${PREFIX}-textfield--focused`);
-                if (component.textfield.element.classList.contains(`${PREFIX}-textfield--filled`)) {
-                    component.textfield.element.classList.add(`${PREFIX}-textfield--filled-focused`);
+                textfield.element.classList.add(`${PREFIX}-textfield--focused`);
+                if (textfield.element.classList.contains(`${PREFIX}-textfield--filled`)) {
+                    textfield.element.classList.add(`${PREFIX}-textfield--filled-focused`);
                 }
             }
             else {
-                component.textfield.element.classList.remove(`${PREFIX}-textfield--focused`);
-                if (component.textfield.element.classList.contains(`${PREFIX}-textfield--filled`)) {
-                    component.textfield.element.classList.remove(`${PREFIX}-textfield--filled-focused`);
+                textfield.element.classList.remove(`${PREFIX}-textfield--focused`);
+                if (textfield.element.classList.contains(`${PREFIX}-textfield--filled`)) {
+                    textfield.element.classList.remove(`${PREFIX}-textfield--filled-focused`);
                 }
             }
         }, 10);
@@ -422,21 +423,21 @@ export const withMenu = (config) => (component) => {
             setValue: (value) => {
                 if (value === null || value === undefined || value === "") {
                     state.selectedOption = null;
-                    component.textfield.setValue("");
+                    textfield.setValue("");
                     menu.setSelected(null);
                     return component;
                 }
                 const option = state.options.find((opt) => "id" in opt && opt.id === value);
                 if (option && "text" in option) {
                     state.selectedOption = option;
-                    component.textfield.setValue(option.text);
+                    textfield.setValue(option.text);
                     menu.setSelected(option.id);
                 }
                 return component;
             },
             clear: () => {
                 state.selectedOption = null;
-                component.textfield.setValue("");
+                textfield.setValue("");
                 menu.setSelected(null);
                 return component;
             },
@@ -447,10 +448,11 @@ export const withMenu = (config) => (component) => {
                 state.options = options;
                 const menuItems = processMenuItems(options);
                 menu.setItems(menuItems);
-                if (state.selectedOption &&
-                    !options.find((opt) => "id" in opt && opt.id === state.selectedOption.id)) {
+                const selected = state.selectedOption;
+                if (selected &&
+                    !options.find((opt) => "id" in opt && opt.id === selected.id)) {
                     state.selectedOption = null;
-                    component.textfield.setValue("");
+                    textfield.setValue("");
                 }
                 return component;
             },

package/dist/components/side-sheet/features/structure.js

@@ -1,4 +1,5 @@
 import { SIDE_SHEET_CLASSES, SIDE_SHEET_VARIANTS } from "../constants.js";
+import { setHTML } from "../../../core/dom/html.js";
 const CLOSE_ICON = `<svg viewBox="0 -960 960 960" width="24" height="24" fill="currentColor" aria-hidden="true"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>`;
 export const withStructure = (config) => (component) => {
     const { element, getClass } = component;
@@ -42,7 +43,7 @@ export const withStructure = (config) => (component) => {
             closeButton = document.createElement("button");
             closeButton.type = "button";
             closeButton.className = getClass(SIDE_SHEET_CLASSES.CLOSE);
-            closeButton.innerHTML = CLOSE_ICON;
+            setHTML(closeButton, CLOSE_ICON);
             closeButton.setAttribute("aria-label", "Close");
             header.appendChild(closeButton);
         }
@@ -53,7 +54,7 @@ export const withStructure = (config) => (component) => {
     if (config.content instanceof HTMLElement)
         content.appendChild(config.content);
     else if (typeof config.content === "string")
-        content.innerHTML = config.content;
+        setHTML(content, config.content);
     container.appendChild(content);
     element.appendChild(container);
     (config.container || document.body).appendChild(element);
@@ -66,11 +67,11 @@ export const withStructure = (config) => (component) => {
             closeButton,
             content,
             setContent(next) {
-                content.innerHTML = "";
+                content.replaceChildren();
                 if (next instanceof HTMLElement)
                     content.appendChild(next);
                 else
-                    content.innerHTML = next;
+                    setHTML(content, next);
             },
             setTitle(next) {
                 if (title) {

package/dist/components/slider/features/controller.js

@@ -2,6 +2,7 @@ import { SLIDER_EVENTS } from "../types.js";
 import { SLIDER_MEASUREMENTS } from "../constants.js";
 import { defaultConfig } from "../config.js";
 import { createHandlers } from "./handlers.js";
+import { setFormValue } from "../../../core/dom/form-value.js";
 export const withController = (config) => (component) => {
     if (!component.element) {
         console.warn("Cannot initialize slider controller: missing element");
@@ -143,6 +144,12 @@ export const withController = (config) => (component) => {
         try {
             updateHandlePositions();
             updateValueBubbles();
+            if (component.formFields) {
+                setFormValue(component.formFields[0], String(state.value));
+                if (state.secondValue !== null) {
+                    setFormValue(component.formFields[1], String(state.secondValue));
+                }
+            }
             if (component.renderTracks) {
                 component.renderTracks(state);
             }

package/dist/components/slider/features/dom.d.ts

@@ -13,6 +13,7 @@ export declare const withDom: (config: SliderConfig) => <T extends ElementCompon
     valueBubble: HTMLElement;
     secondHandle?: HTMLElement;
     secondValueBubble?: HTMLElement;
+    formFields: (HTMLInputElement | null)[] | null;
     getContainer: () => HTMLElement;
     getHandle: () => HTMLElement;
     getValueBubble: () => HTMLElement;

package/dist/components/slider/features/dom.js

@@ -1,5 +1,6 @@
 import { createElement } from "../../../core/dom/create.js";
 import { setStyles } from "../../../core/dom/utils.js";
+import { createFormValue } from "../../../core/dom/form-value.js";
 export const withDom = (config) => (component) => {
     const getClass = (className) => component.getClass(className);
     const min = config.min || 0;
@@ -97,6 +98,15 @@ export const withDom = (config) => (component) => {
             left: `${secondValuePercent}%`,
         });
     }
+    const name = config.name;
+    const formFields = name
+        ? [
+            createFormValue(component.element, name, String(value), isDisabled),
+            config.range
+                ? createFormValue(component.element, `${name}-end`, String(config.secondValue ?? max), isDisabled)
+                : null,
+        ]
+        : null;
     return {
         ...component,
         container,
@@ -104,6 +114,7 @@ export const withDom = (config) => (component) => {
         valueBubble,
         secondHandle,
         secondValueBubble,
+        formFields,
         getContainer: () => container,
         getHandle: () => handle,
         getValueBubble: () => valueBubble,

package/dist/components/slider/features/handlers.js

@@ -51,11 +51,16 @@ export const createHandlers = (config, state, uiRenderer, eventHelpers) => {
             secondHandle.classList.remove(`${state.component.getClass("slider-handle")}--focused`);
         try {
             const focusClass = state.component.getClass("slider-handle--focused");
-            document.querySelectorAll(`.${focusClass}`).forEach((el) => {
+            state.component.element
+                .querySelectorAll(`.${focusClass}`)
+                .forEach((el) => {
                 el.classList.remove(focusClass);
             });
-            if (document.activeElement?.classList.contains(state.component.getClass("slider-handle"))) {
-                document.activeElement.blur();
+            const active = document.activeElement;
+            if (active &&
+                state.component.element.contains(active) &&
+                active.classList.contains(state.component.getClass("slider-handle"))) {
+                active.blur();
             }
         }
         catch (error) {

package/dist/components/slider/features/states.js

@@ -10,6 +10,12 @@ export const withStates = (config) => (component) => {
             disableComponent();
         }, 0);
     }
+    const setFieldsDisabled = (disabled) => {
+        for (const field of component.formFields ?? []) {
+            if (field)
+                field.disabled = disabled;
+        }
+    };
     function disableComponent() {
         component.element.classList.add(`${component.getClass("slider")}--disabled`);
         component.element.setAttribute("aria-disabled", "true");
@@ -21,6 +27,7 @@ export const withStates = (config) => (component) => {
             secondHandle.tabIndex = -1;
             secondHandle.setAttribute("aria-disabled", "true");
         }
+        setFieldsDisabled(true);
         if (component.renderTracks) {
             component.renderTracks();
         }
@@ -36,6 +43,7 @@ export const withStates = (config) => (component) => {
             secondHandle.tabIndex = 0;
             secondHandle.setAttribute("aria-disabled", "false");
         }
+        setFieldsDisabled(false);
         if (component.renderTracks) {
             component.renderTracks();
         }

package/dist/components/slider/types.d.ts

@@ -26,6 +26,13 @@ export interface SliderConfig extends BaseComponentConfig {
     step?: number;
     /** Whether the slider is disabled */
     disabled?: boolean;
+    /**
+     * Form field name. A slider renders no form control of its own, so it
+     * submits nothing unless this is set; with it, a hidden input inside the
+     * slider carries the current value. A range slider submits two fields,
+     * `name` and `name-end`. A disabled slider submits neither.
+     */
+    name?: string;
     /** Color variant of the slider *
      * A stylesheet can override the drawn colours per slider with the custom
      * properties `--<prefix>-slider-color` and `--<prefix>-slider-on-color`,

package/dist/components/switch/config.d.ts

@@ -1,4 +1,4 @@
-import { SwitchConfig, BaseComponent, ApiOptions } from "./types.js";
+import { SwitchConfig, ApiComponent, ApiOptions } from "./types.js";
 /**
  * Default configuration for the Switch component
  */
@@ -38,8 +38,8 @@ export declare const getElementConfig: (config: SwitchConfig) => {
 };
 /**
  * Creates API configuration for the Switch component
- * @param {BaseComponent} comp - Component with disabled, lifecycle, and checkable features
+ * @param {ApiComponent} comp - Component with disabled, lifecycle, and checkable features
  * @returns {ApiOptions} API configuration object
  */
-export declare const getApiConfig: (comp: BaseComponent) => ApiOptions;
+export declare const getApiConfig: (comp: ApiComponent) => ApiOptions;
 export default defaultConfig;

package/dist/components/switch/config.js

@@ -13,17 +13,17 @@ export const getElementConfig = (config) => createElementConfig(config, {
 });
 export const getApiConfig = (comp) => ({
     disabled: {
-        enable: comp.disabled?.enable,
-        disable: comp.disabled?.disable,
+        enable: comp.disabled.enable,
+        disable: comp.disabled.disable,
     },
     lifecycle: {
-        destroy: comp.lifecycle?.destroy,
+        destroy: comp.lifecycle.destroy,
     },
     checkable: {
-        check: comp.checkable?.check,
-        uncheck: comp.checkable?.uncheck,
-        toggle: comp.checkable?.toggle,
-        isChecked: comp.checkable?.isChecked,
+        check: comp.checkable.check,
+        uncheck: comp.checkable.uncheck,
+        toggle: comp.checkable.toggle,
+        isChecked: comp.checkable.isChecked,
     },
 });
 export default defaultConfig;

package/dist/components/switch/features.js

@@ -2,9 +2,9 @@ import { withTrack as withTrackCore, } from "../../core/compose/features/index.j
 const ensureSwitchStructure = (component, prefix, componentName) => {
     const PREFIX = prefix || "mtrl";
     const COMPONENT = componentName || "switch";
-    let container = component.element.querySelector(`.${PREFIX}-${COMPONENT}-container`);
-    if (!container) {
-        container = document.createElement("div");
+    const existingContainer = component.element.querySelector(`.${PREFIX}-${COMPONENT}-container`);
+    if (!existingContainer) {
+        const container = document.createElement("div");
         container.className = `${PREFIX}-${COMPONENT}-container`;
         const input = component.element.querySelector(`.${PREFIX}-${COMPONENT}-input`);
         const track = component.element.querySelector(`.${PREFIX}-${COMPONENT}-track`);
@@ -32,9 +32,9 @@ const ensureSwitchStructure = (component, prefix, componentName) => {
         if (label) {
             contentWrapper.appendChild(label);
         }
-        container.insertBefore(contentWrapper, container.firstChild);
+        existingContainer.insertBefore(contentWrapper, existingContainer.firstChild);
     }
-    return { container, contentWrapper };
+    return { container: existingContainer, contentWrapper };
 };
 export const withSupportingText = (config) => (component) => {
     const PREFIX = config.prefix || "mtrl";

package/dist/components/switch/types.d.ts

@@ -130,3 +130,13 @@ export interface BaseComponent {
     setSupportingText?: (text: string, isError?: boolean) => void;
     removeSupportingText?: () => void;
 }
+/**
+ * Component as it reaches the API step of the pipeline.
+ *
+ * `BaseComponent` marks the feature controllers optional because a component
+ * part-way through the pipeline has not got them yet. By the time
+ * `getApiConfig` runs, withCheckable, withDisabled and withLifecycle have all
+ * been applied, so they are there.
+ * @internal
+ */
+export type ApiComponent = BaseComponent & Required<Pick<BaseComponent, "checkable" | "disabled" | "lifecycle">>;

package/dist/components/tabs/features.d.ts

@@ -125,5 +125,6 @@ export interface IndicatorComponent {
  */
 export declare const withIndicator: <T extends IndicatorFeatureConfig>(config: T) => <C extends ComponentBase & {
     tabs: TabComponent[];
+    handleTabClick: (event: unknown, tab: TabComponent) => void;
 }>(component: C) => C & IndicatorComponent;
 export {};

package/dist/components/tabs/scroll-indicators.js

@@ -1,3 +1,4 @@
+import { setHTML } from "../../core/dom/html.js";
 export const addScrollIndicators = (tabs, config = {}) => {
     const { enabled = true, showButtons = false, appearance = 'fade' } = config;
     if (!enabled)
@@ -17,11 +18,11 @@ export const addScrollIndicators = (tabs, config = {}) => {
         const leftButton = document.createElement('button');
         leftButton.className = `${tabs.getClass('tabs')}-scroll-button ${tabs.getClass('tabs')}-scroll-button--left`;
         leftButton.setAttribute('aria-label', 'Scroll tabs left');
-        leftButton.innerHTML = '<svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>';
+        setHTML(leftButton, '<svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>');
         const rightButton = document.createElement('button');
         rightButton.className = `${tabs.getClass('tabs')}-scroll-button ${tabs.getClass('tabs')}-scroll-button--right`;
         rightButton.setAttribute('aria-label', 'Scroll tabs right');
-        rightButton.innerHTML = '<svg viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>';
+        setHTML(rightButton, '<svg viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>');
         tabs.element.appendChild(leftButton);
         tabs.element.appendChild(rightButton);
         leftButton.addEventListener('click', () => {

package/dist/components/tabs/tab.d.ts

@@ -1,7 +1,2 @@
 import { TabConfig, TabComponent } from "./types.js";
-/**
- * Creates a new Tab component following MD3 guidelines
- * @param {TabConfig} config - Tab configuration object
- * @returns {TabComponent} Tab component instance
- */
 export declare const createTab: (config?: TabConfig) => TabComponent;

package/dist/components/tabs/tab.js

@@ -5,6 +5,15 @@ import { TAB_LAYOUT } from "./constants.js";
 import { createTabConfig } from "./config.js";
 import createButton from "../button/index.js";
 import createBadge from "../badge/index.js";
+function linkPanel(element, value) {
+    const panelId = `tabpanel-${value}`;
+    if (typeof document !== "undefined" && document.getElementById(panelId)) {
+        element.setAttribute("aria-controls", panelId);
+    }
+    else {
+        element.removeAttribute("aria-controls");
+    }
+}
 export const createTab = (config = {}) => {
     const baseConfig = createTabConfig(config);
     try {
@@ -31,7 +40,7 @@ export const createTab = (config = {}) => {
         baseComponent.element.setAttribute("aria-selected", baseConfig.state === "active" ? "true" : "false");
         if (baseConfig.value) {
             baseComponent.element.setAttribute("id", `tab-${baseConfig.value}`);
-            baseComponent.element.setAttribute("aria-controls", `tabpanel-${baseConfig.value}`);
+            linkPanel(baseComponent.element, baseConfig.value);
         }
         if (baseConfig.state === "active") {
             baseComponent.element.classList.add(`${baseComponent.getClass("tab")}--active`);
@@ -53,7 +62,7 @@ export const createTab = (config = {}) => {
                 baseComponent.off(event, handler);
                 return this;
             },
-            badge: null,
+            badge: undefined,
             getValue() {
                 return button.getValue();
             },
@@ -61,7 +70,7 @@ export const createTab = (config = {}) => {
                 const safeValue = value || "";
                 button.setValue(safeValue);
                 this.element.setAttribute("id", `tab-${safeValue}`);
-                this.element.setAttribute("aria-controls", `tabpanel-${safeValue}`);
+                linkPanel(this.element, safeValue);
                 return this;
             },
             activate() {

package/dist/components/tabs/utils.js

@@ -3,7 +3,7 @@ export function getActiveTab(component) {
         return component.getActiveTab();
     }
     if (Array.isArray(component.tabs)) {
-        return component.tabs.find((tab) => tab.isActive && tab.isActive());
+        return component.tabs.find((tab) => tab.isActive && tab.isActive()) ?? null;
     }
     return null;
 }
@@ -15,8 +15,11 @@ export function updateTabPanels(component) {
         return;
     const activeValue = activeTab.getValue();
     const tabPanels = document.querySelectorAll(`[role="tabpanel"]`);
+    const linked = new Set();
     tabPanels.forEach((panel) => {
         const forTab = panel.getAttribute("aria-labelledby")?.replace("tab-", "");
+        if (forTab)
+            linked.add(forTab);
         if (forTab === activeValue) {
             panel.removeAttribute("hidden");
             panel.setAttribute("tabindex", "0");
@@ -26,6 +29,23 @@ export function updateTabPanels(component) {
             panel.setAttribute("tabindex", "-1");
         }
     });
+    const allTabs = typeof component.getTabs === "function"
+        ? component.getTabs()
+        : component.tabs ?? [];
+    {
+        for (const tab of allTabs) {
+            if (typeof tab?.getValue !== "function" || !tab.element)
+                continue;
+            const value = tab.getValue();
+            const panelId = `tabpanel-${value}`;
+            if (linked.has(value) && document.getElementById(panelId)) {
+                tab.element.setAttribute("aria-controls", panelId);
+            }
+            else {
+                tab.element.removeAttribute("aria-controls");
+            }
+        }
+    }
 }
 export function syncTabStops(component) {
     if (typeof component.getTabs !== "function")

package/dist/components/textfield/api.js

@@ -45,7 +45,9 @@ export const withAPI = ({ disabled, lifecycle }) => (component) => ({
     getLabel() {
         return component.label?.getText() || "";
     },
-    leadingIcon: component.leadingIcon || null,
+    get leadingIcon() {
+        return component.leadingIcon ?? null;
+    },
     setLeadingIcon(html) {
         if (component.setLeadingIcon) {
             component.setLeadingIcon(html);
@@ -64,7 +66,9 @@ export const withAPI = ({ disabled, lifecycle }) => (component) => ({
         }
         return this;
     },
-    trailingIcon: component.trailingIcon || null,
+    get trailingIcon() {
+        return component.trailingIcon ?? null;
+    },
     setTrailingIcon(html) {
         if (component.setTrailingIcon) {
             component.setTrailingIcon(html);
@@ -96,7 +100,9 @@ export const withAPI = ({ disabled, lifecycle }) => (component) => ({
         }
         return this;
     },
-    prefixTextElement: component.prefixTextElement || null,
+    get prefixTextElement() {
+        return component.prefixTextElement ?? null;
+    },
     setPrefixText(text) {
         if (component.setPrefixText) {
             component.setPrefixText(text);
@@ -115,7 +121,9 @@ export const withAPI = ({ disabled, lifecycle }) => (component) => ({
         }
         return this;
     },
-    suffixTextElement: component.suffixTextElement || null,
+    get suffixTextElement() {
+        return component.suffixTextElement ?? null;
+    },
     setSuffixText(text) {
         if (component.setSuffixText) {
             component.setSuffixText(text);

package/dist/components/textfield/features/leading-icon.js

@@ -1,52 +1,51 @@
+import { setHTML } from "../../../core/dom/html.js";
 export const withLeadingIcon = (config) => (component) => {
-    if (!config.leadingIcon) {
-        return component;
-    }
     const PREFIX = config.prefix || 'mtrl';
-    const iconElement = document.createElement('span');
-    iconElement.className = `${PREFIX}-${config.componentName || 'textfield'}-leading-icon`;
-    iconElement.innerHTML = config.leadingIcon;
-    component.element.appendChild(iconElement);
-    component.element.classList.add(`${PREFIX}-${config.componentName || 'textfield'}--with-leading-icon`);
-    if (component.input) {
-        component.input.classList.add(`${PREFIX}-${config.componentName || 'textfield'}-input--with-leading-icon`);
+    const NAME = config.componentName || 'textfield';
+    let iconElement = null;
+    const ensureIcon = () => {
+        if (iconElement && iconElement.parentNode)
+            return iconElement;
+        const element = document.createElement('span');
+        element.className = `${PREFIX}-${NAME}-leading-icon`;
+        component.element.appendChild(element);
+        component.element.classList.add(`${PREFIX}-${NAME}--with-leading-icon`);
+        if (component.input) {
+            component.input.classList.add(`${PREFIX}-${NAME}-input--with-leading-icon`);
+        }
+        iconElement = element;
+        return element;
+    };
+    const detachIcon = () => {
+        iconElement?.remove();
+        iconElement = null;
+        component.element.classList.remove(`${PREFIX}-${NAME}--with-leading-icon`);
+        if (component.input) {
+            component.input.classList.remove(`${PREFIX}-${NAME}-input--with-leading-icon`);
+        }
+    };
+    if (config.leadingIcon) {
+        setHTML(ensureIcon(), config.leadingIcon);
     }
     if ('lifecycle' in component && component.lifecycle?.destroy) {
         const originalDestroy = component.lifecycle.destroy;
         component.lifecycle.destroy = () => {
-            clearTimeout(initialPosition);
-            iconElement.remove();
+            iconElement?.remove();
+            iconElement = null;
             originalDestroy.call(component.lifecycle);
         };
     }
-    const initialPosition = setTimeout(() => {
-        const labelEl = component.element.querySelector(`.${PREFIX}-${config.componentName || 'textfield'}-label`);
-        if (labelEl) {
-            if (!component.element.classList.contains(`${PREFIX}-${config.componentName || 'textfield'}--with-prefix`)) {
-                labelEl.style.left = '44px';
-            }
-        }
-    }, 10);
     return {
         ...component,
         leadingIcon: iconElement,
         setLeadingIcon(html) {
-            iconElement.innerHTML = html;
+            this.leadingIcon = ensureIcon();
+            setHTML(this.leadingIcon, html);
             return this;
         },
         removeLeadingIcon() {
-            if (iconElement.parentNode) {
-                iconElement.remove();
-                component.element.classList.remove(`${PREFIX}-${config.componentName || 'textfield'}--with-leading-icon`);
-                if (component.input) {
-                    component.input.classList.remove(`${PREFIX}-${config.componentName || 'textfield'}-input--with-leading-icon`);
-                }
-                if (!component.element.classList.contains(`${PREFIX}-${config.componentName || 'textfield'}--with-prefix`)) {
-                    const labelEl = component.element.querySelector(`.${PREFIX}-${config.componentName || 'textfield'}-label`);
-                    if (labelEl) {
-                        labelEl.style.left = '';
-                    }
-                }
+            if (iconElement) {
+                detachIcon();
                 this.leadingIcon = null;
             }
             return this;