mtrl 0.9.5 → 0.9.8

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/switch.js

@@ -7,7 +7,7 @@ import { createBaseConfig, getElementConfig, getApiConfig } from "./config.js";
 const createSwitch = (config = {}) => {
     const baseConfig = createBaseConfig(config);
     try {
-        const switchComponent = pipe(createBase, withEvents(), withElement(getElementConfig(baseConfig)), withTextLabel(baseConfig), withInput(baseConfig), withTrack(baseConfig), withSupportingText(baseConfig), withCheckable(baseConfig), withDisabled(baseConfig), withLifecycle(), (comp) => withAPI(getApiConfig(comp))(comp))(baseConfig);
+        const switchComponent = pipe(createBase, withEvents(), withElement(getElementConfig(baseConfig)), withInput(baseConfig), withTextLabel(baseConfig), withTrack(baseConfig), withSupportingText(baseConfig), withCheckable(baseConfig), withDisabled(baseConfig), withLifecycle(), (comp) => withAPI(getApiConfig(comp))(comp))(baseConfig);
         return switchComponent;
     }
     catch (error) {

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/tabs.js

@@ -5,7 +5,7 @@ import { withAPI, getApiConfig } from "./api.js";
 import { withTabsManagement, withScrollable, withDivider, withIndicator } from "./features.js";
 import { createTabsConfig, getTabsElementConfig } from "./config.js";
 import { addTabStateStyles } from "./state.js";
-import { setupKeyboardNavigation } from "./utils.js";
+import { setupKeyboardNavigation, syncTabStops } from "./utils.js";
 const createTabs = (config = {}) => {
     const baseConfig = createTabsConfig(config);
     addTabStateStyles();
@@ -18,6 +18,15 @@ const createTabs = (config = {}) => {
             });
         }
         setupKeyboardNavigation(component);
+        component.on('change', () => syncTabStops(component));
+        for (const method of ['addTab', 'add', 'removeTab', 'setActiveTab']) {
+            const original = component[method];
+            component[method] = (...args) => {
+                const result = original.apply(component, args);
+                syncTabStops(component);
+                return result;
+            };
+        }
         return component;
     }
     catch (error) {

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

@@ -8,6 +8,7 @@ interface TabsHost {
     getTabs?: () => TabComponent[];
     getActiveTab?: () => TabComponent | null;
     setActiveTab?: (tabOrValue: TabComponent | string) => unknown;
+    handleTabClick?: (event: unknown, tab: TabComponent) => void;
 }
 /**
  * Gets the active tab from a component
@@ -20,6 +21,13 @@ export declare function getActiveTab(component: TabsHost): TabComponent | null;
  * @param component - Component with tabs
  */
 export declare function updateTabPanels(component: TabsHost): void;
+/**
+ * Gives the tablist a single tab stop: the active tab, or the first enabled
+ * one when none is active. Every other tab takes tabindex -1 and is reached
+ * with the arrow keys (WAI-ARIA tabs pattern).
+ * @param component - Tabs component
+ */
+export declare function syncTabStops(component: TabsHost): void;
 /**
  * Sets up keyboard navigation for tabs
  * @param component - Tabs component

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,42 +29,84 @@ 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")
+        return;
+    const tabs = component.getTabs();
+    const enabled = tabs.filter((tab) => !tab.element.disabled);
+    const active = getActiveTab(component);
+    const stop = active && enabled.includes(active) ? active : enabled[0];
+    tabs.forEach((tab) => tab.element.setAttribute("tabindex", tab === stop ? "0" : "-1"));
 }
 export function setupKeyboardNavigation(component) {
     if (!component.element)
         return;
-    component.element.addEventListener("keydown", (event) => {
-        if (event.target !== event.currentTarget)
+    const tablist = component.element;
+    syncTabStops(component);
+    tablist.addEventListener("keydown", (event) => {
+        const tabElement = event.target?.closest?.('[role="tab"]');
+        if (!tabElement || !tablist.contains(tabElement))
             return;
-        if (typeof component.getTabs !== "function" ||
-            typeof component.setActiveTab !== "function")
+        if (typeof component.getTabs !== "function")
             return;
-        const tabs = component.getTabs();
-        const currentTab = getActiveTab(component);
-        const currentIndex = currentTab ? tabs.indexOf(currentTab) : -1;
-        let newIndex = currentIndex;
+        const tabs = component
+            .getTabs()
+            .filter((tab) => !tab.element.disabled);
+        const currentIndex = tabs.findIndex((tab) => tab.element === tabElement);
+        if (currentIndex === -1)
+            return;
+        const rtl = getComputedStyle(tablist).direction === "rtl";
+        const last = tabs.length - 1;
+        let newIndex;
         switch (event.key) {
             case "ArrowRight":
-            case "ArrowDown":
-                newIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;
+                newIndex = rtl
+                    ? (currentIndex > 0 ? currentIndex - 1 : last)
+                    : (currentIndex < last ? currentIndex + 1 : 0);
                 break;
             case "ArrowLeft":
-            case "ArrowUp":
-                newIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;
+                newIndex = rtl
+                    ? (currentIndex < last ? currentIndex + 1 : 0)
+                    : (currentIndex > 0 ? currentIndex - 1 : last);
                 break;
             case "Home":
                 newIndex = 0;
                 break;
             case "End":
-                newIndex = tabs.length - 1;
+                newIndex = last;
                 break;
             default:
                 return;
         }
-        if (newIndex !== currentIndex && tabs[newIndex]) {
-            event.preventDefault();
-            tabs[newIndex].element.focus();
-            component.setActiveTab(tabs[newIndex]);
+        event.preventDefault();
+        const target = tabs[newIndex];
+        if (target === tabs[currentIndex])
+            return;
+        target.element.focus();
+        if (typeof component.handleTabClick === "function") {
+            component.handleTabClick(null, target);
+        }
+        else if (typeof component.setActiveTab === "function") {
+            component.setActiveTab(target);
         }
+        syncTabStops(component);
     });
 }

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/error.d.ts

@@ -20,6 +20,7 @@ export interface ErrorConfig {
  * Component with supporting text capabilities (if available)
  */
 interface ComponentWithSupportingText extends ElementComponent {
+    input?: HTMLInputElement | HTMLTextAreaElement;
     setSupportingText?: (text: string, isError?: boolean) => void;
     removeSupportingText?: () => void;
     supportingTextElement?: HTMLElement | null;

package/dist/components/textfield/features/error.js

@@ -3,15 +3,25 @@ export const withError = (config) => (component) => {
     const COMPONENT = config.componentName || "textfield";
     let errorState = config.error || false;
     let displacedText = null;
+    const markInvalid = (invalid) => {
+        if (!component.input)
+            return;
+        if (invalid)
+            component.input.setAttribute("aria-invalid", "true");
+        else
+            component.input.removeAttribute("aria-invalid");
+    };
     if (errorState) {
         component.element.classList.add(`${PREFIX}-${COMPONENT}--error`);
     }
+    markInvalid(errorState);
     return {
         ...component,
         errorState,
         setError(error, message) {
             errorState = error;
             component.element.classList.toggle(`${PREFIX}-${COMPONENT}--error`, error);
+            markInvalid(error);
             if (message !== undefined && component.setSupportingText) {
                 if (message) {
                     if (error && displacedText === null) {

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;