mtrl 0.9.6 → 0.9.8

package/dist/components/textfield/features/prefix-text.js

@@ -1,35 +1,47 @@
 export const withPrefixText = (config) => (component) => {
-    if (!config.prefixText) {
-        return component;
-    }
     const PREFIX = config.prefix || 'mtrl';
-    const prefixElement = document.createElement('span');
-    prefixElement.className = `${PREFIX}-${config.componentName || 'textfield'}-prefix`;
-    prefixElement.textContent = config.prefixText;
-    component.element.appendChild(prefixElement);
-    component.element.classList.add(`${PREFIX}-${config.componentName || 'textfield'}--with-prefix`);
+    const NAME = config.componentName || 'textfield';
+    let slot = null;
+    const ensureSlot = () => {
+        if (slot && slot.parentNode)
+            return slot;
+        const element = document.createElement('span');
+        element.className = `${PREFIX}-${NAME}-prefix`;
+        component.element.appendChild(element);
+        component.element.classList.add(`${PREFIX}-${NAME}--with-prefix`);
+        slot = element;
+        return element;
+    };
+    const detachSlot = () => {
+        slot?.remove();
+        slot = null;
+        component.element.classList.remove(`${PREFIX}-${NAME}--with-prefix`);
+    };
+    const write = (element, value) => {
+        element.textContent = value;
+    };
+    if (config.prefixText) {
+        write(ensureSlot(), config.prefixText);
+    }
     if ('lifecycle' in component && component.lifecycle?.destroy) {
         const originalDestroy = component.lifecycle.destroy;
         component.lifecycle.destroy = () => {
-            prefixElement.remove();
+            slot?.remove();
+            slot = null;
             originalDestroy.call(component.lifecycle);
         };
     }
     return {
         ...component,
-        prefixTextElement: prefixElement,
+        prefixTextElement: slot,
         setPrefixText(text) {
-            prefixElement.textContent = text;
+            this.prefixTextElement = ensureSlot();
+            write(this.prefixTextElement, text);
             return this;
         },
         removePrefixText() {
-            if (prefixElement.parentNode) {
-                prefixElement.remove();
-                component.element.classList.remove(`${PREFIX}-${config.componentName || 'textfield'}--with-prefix`);
-                const labelEl = component.element.querySelector(`.${PREFIX}-${config.componentName || 'textfield'}-label`);
-                if (labelEl) {
-                    labelEl.style.left = '';
-                }
+            if (slot) {
+                detachSlot();
                 this.prefixTextElement = null;
             }
             return this;

package/dist/components/textfield/features/suffix-text.js

@@ -1,31 +1,47 @@
 export const withSuffixText = (config) => (component) => {
-    if (!config.suffixText) {
-        return component;
-    }
     const PREFIX = config.prefix || 'mtrl';
-    const suffixElement = document.createElement('span');
-    suffixElement.className = `${PREFIX}-${config.componentName || 'textfield'}-suffix`;
-    suffixElement.textContent = config.suffixText;
-    component.element.appendChild(suffixElement);
-    component.element.classList.add(`${PREFIX}-${config.componentName || 'textfield'}--with-suffix`);
+    const NAME = config.componentName || 'textfield';
+    let slot = null;
+    const ensureSlot = () => {
+        if (slot && slot.parentNode)
+            return slot;
+        const element = document.createElement('span');
+        element.className = `${PREFIX}-${NAME}-suffix`;
+        component.element.appendChild(element);
+        component.element.classList.add(`${PREFIX}-${NAME}--with-suffix`);
+        slot = element;
+        return element;
+    };
+    const detachSlot = () => {
+        slot?.remove();
+        slot = null;
+        component.element.classList.remove(`${PREFIX}-${NAME}--with-suffix`);
+    };
+    const write = (element, value) => {
+        element.textContent = value;
+    };
+    if (config.suffixText) {
+        write(ensureSlot(), config.suffixText);
+    }
     if ('lifecycle' in component && component.lifecycle?.destroy) {
         const originalDestroy = component.lifecycle.destroy;
         component.lifecycle.destroy = () => {
-            suffixElement.remove();
+            slot?.remove();
+            slot = null;
             originalDestroy.call(component.lifecycle);
         };
     }
     return {
         ...component,
-        suffixTextElement: suffixElement,
+        suffixTextElement: slot,
         setSuffixText(text) {
-            suffixElement.textContent = text;
+            this.suffixTextElement = ensureSlot();
+            write(this.suffixTextElement, text);
             return this;
         },
         removeSuffixText() {
-            if (suffixElement.parentNode) {
-                suffixElement.remove();
-                component.element.classList.remove(`${PREFIX}-${config.componentName || 'textfield'}--with-suffix`);
+            if (slot) {
+                detachSlot();
                 this.suffixTextElement = null;
             }
             return this;

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

@@ -1,37 +1,54 @@
+import { setHTML } from "../../../core/dom/html.js";
 export const withTrailingIcon = (config) => (component) => {
-    if (!config.trailingIcon) {
-        return component;
-    }
     const PREFIX = config.prefix || 'mtrl';
-    const iconElement = document.createElement('span');
-    iconElement.className = `${PREFIX}-${config.componentName || 'textfield'}-trailing-icon`;
-    iconElement.innerHTML = config.trailingIcon;
-    component.element.appendChild(iconElement);
-    component.element.classList.add(`${PREFIX}-${config.componentName || 'textfield'}--with-trailing-icon`);
-    if (component.input) {
-        component.input.classList.add(`${PREFIX}-${config.componentName || 'textfield'}-input--with-trailing-icon`);
+    const NAME = config.componentName || 'textfield';
+    let slot = null;
+    const ensureSlot = () => {
+        if (slot && slot.parentNode)
+            return slot;
+        const element = document.createElement('span');
+        element.className = `${PREFIX}-${NAME}-trailing-icon`;
+        component.element.appendChild(element);
+        component.element.classList.add(`${PREFIX}-${NAME}--with-trailing-icon`);
+        if (component.input) {
+            component.input.classList.add(`${PREFIX}-${NAME}-input--with-trailing-icon`);
+        }
+        slot = element;
+        return element;
+    };
+    const detachSlot = () => {
+        slot?.remove();
+        slot = null;
+        component.element.classList.remove(`${PREFIX}-${NAME}--with-trailing-icon`);
+        if (component.input) {
+            component.input.classList.remove(`${PREFIX}-${NAME}-input--with-trailing-icon`);
+        }
+    };
+    const write = (element, value) => {
+        setHTML(element, value);
+    };
+    if (config.trailingIcon) {
+        write(ensureSlot(), config.trailingIcon);
     }
     if ('lifecycle' in component && component.lifecycle?.destroy) {
         const originalDestroy = component.lifecycle.destroy;
         component.lifecycle.destroy = () => {
-            iconElement.remove();
+            slot?.remove();
+            slot = null;
             originalDestroy.call(component.lifecycle);
         };
     }
     return {
         ...component,
-        trailingIcon: iconElement,
+        trailingIcon: slot,
         setTrailingIcon(html) {
-            iconElement.innerHTML = html;
+            this.trailingIcon = ensureSlot();
+            write(this.trailingIcon, html);
             return this;
         },
         removeTrailingIcon() {
-            if (iconElement.parentNode) {
-                iconElement.remove();
-                component.element.classList.remove(`${PREFIX}-${config.componentName || 'textfield'}--with-trailing-icon`);
-                if (component.input) {
-                    component.input.classList.remove(`${PREFIX}-${config.componentName || 'textfield'}-input--with-trailing-icon`);
-                }
+            if (slot) {
+                detachSlot();
                 this.trailingIcon = null;
             }
             return this;

package/dist/components/timepicker/api.d.ts

@@ -21,5 +21,5 @@ interface ApiOptions {
  * @param options - API options with events and lifecycle methods
  * @returns TimePicker component API
  */
-export declare const createTimePickerAPI: (baseComponent: ElementComponent, modalElement: HTMLElement, dialogElement: HTMLElement, timeValue: TimeValue, config: TimePickerConfig, options: ApiOptions) => TimePickerComponent;
+export declare const createTimePickerAPI: (baseComponent: ElementComponent, modalElement: HTMLElement, dialogElement: HTMLElement, timeValue: TimeValue, config: TimePickerConfig, options: ApiOptions, formValue?: HTMLInputElement | null) => TimePickerComponent;
 export {};

package/dist/components/timepicker/api.js

@@ -1,9 +1,14 @@
 import { TIME_PICKER_TYPE, TIME_PICKER_ORIENTATION, TIME_FORMAT, TIME_PERIOD } from "./types.js";
 import { TIMEPICKER_EVENTS as EVENTS, TIMEPICKER_SELECTORS as SELECTORS } from "./constants.js";
-import { formatTime, padZero } from "./utils.js";
+import { formatTime, padZero, formatFormValue } from "./utils.js";
 import { renderTimePicker } from "./render.js";
 import { renderClockDial, getTimeValueFromClick } from "./clockdial.js";
-export const createTimePickerAPI = (baseComponent, modalElement, dialogElement, timeValue, config, options) => {
+import { setFormValue } from "../../core/dom/form-value.js";
+export const createTimePickerAPI = (baseComponent, modalElement, dialogElement, timeValue, config, options, formValue = null) => {
+    const render = () => {
+        renderTimePicker(dialogElement, timeValue, config);
+        setFormValue(formValue, formatFormValue(timeValue, config.showSeconds === true));
+    };
     let isOpen = !!config.isOpen;
     const handleKeydown = (event) => {
         if (event.key === 'Escape') {
@@ -33,7 +38,7 @@ export const createTimePickerAPI = (baseComponent, modalElement, dialogElement,
             isOpen = true;
             baseComponent.element.classList.add(`${config.prefix}-time-picker--open`);
             setTimeout(() => {
-                renderTimePicker(dialogElement, timeValue, config);
+                render();
             }, 50);
             options.events.emit(EVENTS.OPEN);
             if (config.onOpen) {
@@ -83,7 +88,7 @@ export const createTimePickerAPI = (baseComponent, modalElement, dialogElement,
                 timeValue.minutes = minutes;
                 timeValue.seconds = seconds;
                 timeValue.period = hours >= 12 ? TIME_PERIOD.PM : TIME_PERIOD.AM;
-                renderTimePicker(dialogElement, timeValue, config);
+                render();
                 options.events.emit(EVENTS.CHANGE, this.getValue());
                 if (config.onChange) {
                     config.onChange(this.getValue());
@@ -100,7 +105,7 @@ export const createTimePickerAPI = (baseComponent, modalElement, dialogElement,
             config.type = type;
             dialogElement.classList.remove(`${config.prefix}-time-picker-dialog--${TIME_PICKER_TYPE.DIAL}`, `${config.prefix}-time-picker-dialog--${TIME_PICKER_TYPE.INPUT}`);
             dialogElement.classList.add(`${config.prefix}-time-picker-dialog--${type}`);
-            renderTimePicker(dialogElement, timeValue, config);
+            render();
             return this;
         },
         getType() {
@@ -118,7 +123,7 @@ export const createTimePickerAPI = (baseComponent, modalElement, dialogElement,
             else {
                 timeValue.period = timeValue.hours >= 12 ? TIME_PERIOD.PM : TIME_PERIOD.AM;
             }
-            renderTimePicker(dialogElement, timeValue, config);
+            render();
             options.events.emit(EVENTS.CHANGE, this.getValue());
             return this;
         },
@@ -131,7 +136,7 @@ export const createTimePickerAPI = (baseComponent, modalElement, dialogElement,
             config.orientation = orientation;
             dialogElement.classList.remove(`${config.prefix}-time-picker-dialog--${TIME_PICKER_ORIENTATION.VERTICAL}`, `${config.prefix}-time-picker-dialog--${TIME_PICKER_ORIENTATION.HORIZONTAL}`);
             dialogElement.classList.add(`${config.prefix}-time-picker-dialog--${orientation}`);
-            renderTimePicker(dialogElement, timeValue, config);
+            render();
             return this;
         },
         getOrientation() {
@@ -144,7 +149,7 @@ export const createTimePickerAPI = (baseComponent, modalElement, dialogElement,
                 titleElement.textContent = title;
             }
             else {
-                renderTimePicker(dialogElement, timeValue, config);
+                render();
             }
             return this;
         },
@@ -197,7 +202,7 @@ export const createTimePickerAPI = (baseComponent, modalElement, dialogElement,
                 if (timeValue.hours >= 12) {
                     timeValue.hours -= 12;
                 }
-                renderTimePicker(dialogElement, timeValue, config);
+                render();
                 options.events.emit(EVENTS.CHANGE, timePickerAPI.getValue());
                 if (config.onChange) {
                     config.onChange(timePickerAPI.getValue());
@@ -210,7 +215,7 @@ export const createTimePickerAPI = (baseComponent, modalElement, dialogElement,
                 if (timeValue.hours < 12) {
                     timeValue.hours += 12;
                 }
-                renderTimePicker(dialogElement, timeValue, config);
+                render();
                 options.events.emit(EVENTS.CHANGE, timePickerAPI.getValue());
                 if (config.onChange) {
                     config.onChange(timePickerAPI.getValue());
@@ -372,7 +377,7 @@ export const createTimePickerAPI = (baseComponent, modalElement, dialogElement,
                 newSeconds = 59;
             timeValue.seconds = newSeconds;
         }
-        renderTimePicker(dialogElement, timeValue, config);
+        render();
         options.events.emit(EVENTS.CHANGE, timePickerAPI.getValue());
         if (config.onChange) {
             config.onChange(timePickerAPI.getValue());

package/dist/components/timepicker/render.js

@@ -2,8 +2,9 @@ import { TIME_PICKER_TYPE, TIME_FORMAT, TIME_PERIOD, } from "./types.js";
 import { TIMEPICKER_DIAL, TIMEPICKER_ICONS } from "./constants.js";
 import { padZero, convertTo12Hour } from "./utils.js";
 import { renderClockDial, getTimeValueFromClick } from "./clockdial.js";
+import { setHTML } from "../../core/dom/html.js";
 export const renderTimePicker = (container, timeValue, config, onTimeChange) => {
-    container.innerHTML = "";
+    container.replaceChildren();
     if (config.title) {
         const title = document.createElement("div");
         title.className = `${config.prefix}-time-picker-title`;
@@ -117,10 +118,9 @@ export const renderTimePicker = (container, timeValue, config, onTimeChange) =>
     toggleTypeButton.setAttribute("aria-label", config.type === TIME_PICKER_TYPE.DIAL
         ? "Switch to keyboard input"
         : "Switch to dial selector");
-    toggleTypeButton.innerHTML =
-        config.type === TIME_PICKER_TYPE.DIAL
-            ? config.keyboardIcon || TIMEPICKER_ICONS.KEYBOARD
-            : config.clockIcon || TIMEPICKER_ICONS.CLOCK;
+    setHTML(toggleTypeButton, config.type === TIME_PICKER_TYPE.DIAL
+        ? config.keyboardIcon || TIMEPICKER_ICONS.KEYBOARD
+        : config.clockIcon || TIMEPICKER_ICONS.CLOCK);
     actions.appendChild(toggleTypeButton);
     const actionButtons = document.createElement("div");
     actionButtons.className = `${config.prefix}-time-picker-action-buttons`;
@@ -150,16 +150,15 @@ export const renderTimePicker = (container, timeValue, config, onTimeChange) =>
     toggleTypeButton.addEventListener("click", () => {
         if (dialContainer.style.display === "none") {
             dialContainer.style.display = "block";
-            toggleTypeButton.innerHTML =
-                config.keyboardIcon || TIMEPICKER_ICONS.KEYBOARD;
+            setHTML(toggleTypeButton, config.keyboardIcon || TIMEPICKER_ICONS.KEYBOARD);
             toggleTypeButton.setAttribute("aria-label", "Switch to keyboard input");
             setTimeout(() => {
                 canvas.focus();
-                const hourElements = document.querySelectorAll(`.${config.prefix}-time-picker-hours`);
+                const hourElements = container.querySelectorAll(`.${config.prefix}-time-picker-hours`);
                 hourElements.forEach((el) => el.setAttribute("data-active", "true"));
-                const minuteElements = document.querySelectorAll(`.${config.prefix}-time-picker-minutes`);
+                const minuteElements = container.querySelectorAll(`.${config.prefix}-time-picker-minutes`);
                 minuteElements.forEach((el) => el.setAttribute("data-active", "false"));
-                const secondElements = document.querySelectorAll(`.${config.prefix}-time-picker-seconds`);
+                const secondElements = container.querySelectorAll(`.${config.prefix}-time-picker-seconds`);
                 secondElements.forEach((el) => el.setAttribute("data-active", "false"));
                 renderClockDial(canvas, timeValue, {
                     type: TIME_PICKER_TYPE.DIAL,
@@ -172,7 +171,7 @@ export const renderTimePicker = (container, timeValue, config, onTimeChange) =>
         }
         else {
             dialContainer.style.display = "none";
-            toggleTypeButton.innerHTML = config.clockIcon || TIMEPICKER_ICONS.CLOCK;
+            setHTML(toggleTypeButton, config.clockIcon || TIMEPICKER_ICONS.CLOCK);
             toggleTypeButton.setAttribute("aria-label", "Switch to dial selector");
             setTimeout(() => {
                 hoursInput.focus();
@@ -324,13 +323,13 @@ export const renderTimePicker = (container, timeValue, config, onTimeChange) =>
                         : timeValue.hours;
                 hoursInput.value = padZero(displayHours);
             }
-            document
+            container
                 .querySelectorAll(`.${config.prefix}-time-picker-period-am, .${config.prefix}-time-picker-period-pm`)
                 .forEach((el) => {
                 el.classList.remove(`${config.prefix}-time-picker-period--selected`);
                 el.setAttribute("aria-pressed", "false");
             });
-            const selectedPeriod = document.querySelector(`.${config.prefix}-time-picker-period-${period.toLowerCase()}`);
+            const selectedPeriod = container.querySelector(`.${config.prefix}-time-picker-period-${period.toLowerCase()}`);
             if (selectedPeriod) {
                 selectedPeriod.classList.add(`${config.prefix}-time-picker-period--selected`);
                 selectedPeriod.setAttribute("aria-pressed", "true");
@@ -350,18 +349,22 @@ export const renderTimePicker = (container, timeValue, config, onTimeChange) =>
         }
     };
     if (config.format === TIME_FORMAT.AMPM) {
-        const amPeriodElement = document.querySelector(`.${config.prefix}-time-picker-period-am`);
-        const pmPeriodElement = document.querySelector(`.${config.prefix}-time-picker-period-pm`);
-        if (amPeriodElement) {
-            amPeriodElement.addEventListener("click", () => {
-                handlePeriodChange(TIME_PERIOD.AM);
+        const amPeriodElement = container.querySelector(`.${config.prefix}-time-picker-period-am`);
+        const pmPeriodElement = container.querySelector(`.${config.prefix}-time-picker-period-pm`);
+        const activateOn = (element, period) => {
+            if (!element)
+                return;
+            element.addEventListener("click", () => handlePeriodChange(period));
+            element.addEventListener("keydown", (event) => {
+                const key = event.key;
+                if (key !== "Enter" && key !== " " && key !== "Spacebar")
+                    return;
+                event.preventDefault();
+                handlePeriodChange(period);
             });
-        }
-        if (pmPeriodElement) {
-            pmPeriodElement.addEventListener("click", () => {
-                handlePeriodChange(TIME_PERIOD.PM);
-            });
-        }
+        };
+        activateOn(amPeriodElement, TIME_PERIOD.AM);
+        activateOn(pmPeriodElement, TIME_PERIOD.PM);
     }
     if (config.type === TIME_PICKER_TYPE.DIAL ||
         dialContainer.style.display === "block") {

package/dist/components/timepicker/timepicker.js

@@ -7,7 +7,8 @@ import { createBaseConfig, getContainerConfig, getApiConfig } from "./config.js"
 import { TIMEPICKER_Z_INDEX as Z_INDEX } from "./constants.js";
 import { createTimePickerAPI } from "./api.js";
 import { renderTimePicker } from "./render.js";
-import { parseTime } from "./utils.js";
+import { parseTime, formatFormValue } from "./utils.js";
+import { createFormValue } from "../../core/dom/form-value.js";
 const createTimePicker = (config = {}) => {
     const baseConfig = createBaseConfig(config);
     try {
@@ -54,7 +55,8 @@ const createTimePicker = (config = {}) => {
             };
         }
         renderTimePicker(dialogElement, timeValue, baseConfig);
-        const timePicker = createTimePickerAPI(baseComponent, modalElement, dialogElement, timeValue, baseConfig, getApiConfig(baseComponent));
+        const formValue = createFormValue(baseComponent.element, baseConfig.name, formatFormValue(timeValue, baseConfig.showSeconds === true));
+        const timePicker = createTimePickerAPI(baseComponent, modalElement, dialogElement, timeValue, baseConfig, getApiConfig(baseComponent), formValue);
         if (baseConfig.isOpen) {
             setTimeout(() => timePicker.open(), 0);
         }

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

@@ -48,6 +48,13 @@ export interface TimePickerConfig {
      * @example '14:30'
      */
     value?: string;
+    /**
+     * Form field name. A time picker renders no form control of its own, so it
+     * submits nothing unless this is set; with it, a hidden input on the
+     * picker's element carries the current time as 24-hour `HH:mm` — or
+     * `HH:mm:ss` when `showSeconds` is on — whatever format the picker displays.
+     */
+    name?: string;
     /**
      * Type of time picker to display
      * @default TIME_PICKER_TYPE.DIAL

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

@@ -72,3 +72,17 @@ export declare const getTimeFromPosition: (centerX: number, centerY: number, cli
  * @returns {boolean} Whether the time is within constraints
  */
 export declare const isTimeWithinConstraints: (time: TimeValue, minTime?: string, maxTime?: string) => boolean;
+/**
+ * Formats a time for submission in a form: 24-hour `HH:mm`, or `HH:mm:ss`
+ * when the picker shows seconds.
+ *
+ * Separate from `formatTime` on purpose. What a form submits should not change
+ * because the picker happens to display 12-hour time, and `formatTime` appends
+ * seconds whenever the value carries them — which it always does, since the
+ * picker stores 0 when seconds are hidden.
+ *
+ * @param timeValue - Current time value, whose hours are 24-hour
+ * @param showSeconds - Whether the picker shows seconds
+ * @returns The value to submit
+ */
+export declare const formatFormValue: (timeValue: TimeValue, showSeconds: boolean) => string;

package/dist/components/timepicker/utils.js

@@ -129,3 +129,7 @@ export const isTimeWithinConstraints = (time, minTime, maxTime) => {
     }
     return true;
 };
+export const formatFormValue = (timeValue, showSeconds) => {
+    const base = `${padZero(timeValue.hours)}:${padZero(timeValue.minutes)}`;
+    return showSeconds ? `${base}:${padZero(timeValue.seconds ?? 0)}` : base;
+};

package/dist/components/tooltip/api.js

@@ -182,10 +182,16 @@ export const withAPI = ({ lifecycle }) => (component) => {
         getClass: component.getClass,
         setText(text) {
             const contentNode = document.createTextNode(text);
-            while (component.element.firstChild !== arrowElement) {
+            while (component.element.firstChild &&
+                component.element.firstChild !== arrowElement) {
                 component.element.removeChild(component.element.firstChild);
             }
-            component.element.insertBefore(contentNode, arrowElement);
+            if (arrowElement.parentNode === component.element) {
+                component.element.insertBefore(contentNode, arrowElement);
+            }
+            else {
+                component.element.appendChild(contentNode);
+            }
             if (isVisible) {
                 this.updatePosition();
             }

package/dist/components/top-app-bar/top-app-bar.js

@@ -1,5 +1,6 @@
 import { createBase, withElement, withEvents, withLifecycle, } from "../../core/compose/index.js";
 import { createConfig } from "./config.js";
+import { TOP_APP_BAR_DEFAULTS } from "./constants.js";
 export const createTopAppBar = (config = {}) => {
     const componentConfig = createConfig(config);
     const component = createBase(componentConfig);
@@ -25,7 +26,7 @@ export const createTopAppBar = (config = {}) => {
             (componentConfig.type === "medium" || componentConfig.type === "large")) {
             classes.push(`${component.getClass("top-app-bar")}--compressible`);
         }
-        return classes.filter(Boolean);
+        return classes.filter((name) => Boolean(name));
     };
     const enhancedComponent = withElement({
         tag: componentConfig.tag,
@@ -61,7 +62,7 @@ export const createTopAppBar = (config = {}) => {
     let isScrolled = false;
     if (componentConfig.scrollable) {
         const handleScroll = () => {
-            const shouldBeScrolled = window.scrollY > componentConfig.scrollThreshold;
+            const shouldBeScrolled = window.scrollY > (componentConfig.scrollThreshold ?? TOP_APP_BAR_DEFAULTS.SCROLL_THRESHOLD);
             if (isScrolled !== shouldBeScrolled) {
                 isScrolled = shouldBeScrolled;
                 if (isScrolled) {

package/dist/core/compose/component.d.ts

@@ -22,7 +22,7 @@ export interface TouchState {
 export interface BaseConfig {
     componentName?: string;
     prefix?: string;
-    parent?: HTMLElement | string;
+    parent?: HTMLElement | string | null;
 }
 /**
  * Base component interface with prefix utilities

package/dist/core/compose/component.js

@@ -102,7 +102,7 @@ export const withElement = (options = {}) => (component) => {
             ...(Array.isArray(options.className)
                 ? options.className
                 : [options.className]),
-        ].filter(Boolean),
+        ].filter((name) => Boolean(name)),
         attributes: options.attributes || {},
         id: options.id,
         name: options.name,

package/dist/core/compose/features/icon.js

@@ -1,3 +1,4 @@
+import { setHTML } from "../../dom/html.js";
 const createIcon = (element, config = {}) => {
     let iconElement = null;
     const PREFIX = config.prefix || "mtrl";
@@ -12,7 +13,7 @@ const createIcon = (element, config = {}) => {
         if (config.iconSize) {
             iconEl.classList.add(`${PREFIX}-icon--${config.iconSize}`);
         }
-        iconEl.innerHTML = html;
+        setHTML(iconEl, html);
         return iconEl;
     };
     return {
@@ -38,7 +39,7 @@ const createIcon = (element, config = {}) => {
                 }
             }
             else if (iconElement && html) {
-                iconElement.innerHTML = html;
+                setHTML(iconElement, html);
             }
             return this;
         },

package/dist/core/compose/features/lifecycle.js

@@ -28,6 +28,13 @@ export const withLifecycle = () => (component) => {
     const destroyElement = component.destroy?.bind(component);
     const emitter = createEmitter();
     resources.add(() => emitter.clear());
+    const unmount = () => {
+        if (mounted) {
+            mounted = false;
+            emitter.emit('unmount');
+            emitter.clear();
+        }
+    };
     const lifecycle = {
         onMount: (handler) => emitter.on('mount', handler),
         onUnmount: (handler) => emitter.on('unmount', handler),
@@ -37,21 +44,13 @@ export const withLifecycle = () => (component) => {
                 emitter.emit('mount');
             }
         },
-        unmount: () => {
-            if (mounted) {
-                mounted = false;
-                emitter.emit('unmount');
-                emitter.clear();
-            }
-        },
+        unmount,
         isMounted: () => mounted,
-        destroy() {
+        destroy: () => {
             if (destroyed)
                 return;
             destroyed = true;
-            if (mounted) {
-                this.unmount();
-            }
+            unmount();
             emitter.clear();
             resources.destroy();
             if (hasEvents(component)) {

package/dist/core/compose/features/track.js

@@ -1,3 +1,4 @@
+import { setHTML } from "../../dom/html.js";
 const DEFAULT_ICON = `
 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
   <polyline points="20 6 9 17 4 12"></polyline>
@@ -11,7 +12,7 @@ export const withTrack = (config) => (component) => {
     if (config.icon !== 'none') {
         const icon = document.createElement('span');
         icon.className = `${config.prefix}-${config.componentName}-thumb-icon`;
-        icon.innerHTML = config.icon || DEFAULT_ICON;
+        setHTML(icon, config.icon || DEFAULT_ICON);
         thumb.appendChild(icon);
     }
     component.element.appendChild(track);

package/dist/core/config/component.d.ts

@@ -86,7 +86,7 @@ export declare const processClassNames: (classNames: string | string[] | null) =
 export declare const createElementConfig: (config: BaseComponentConfig, options: {
     tag: string;
     attributes?: Record<string, unknown>;
-    className?: string | string[] | null;
+    className?: string | (string | null | undefined)[] | null;
     html?: string;
     text?: string;
     forwardEvents?: Record<string, EventCondition>;

package/dist/core/config/component.js

@@ -44,7 +44,7 @@ export const createElementConfig = (config, options) => {
     const combinedClassNames = [
         ...(Array.isArray(configClasses) ? configClasses : [configClasses]),
         ...(Array.isArray(optionsClasses) ? optionsClasses : [optionsClasses]),
-    ].filter(Boolean);
+    ].filter((name) => Boolean(name));
     const elementAttributes = options.attributes || {};
     return {
         tag: options.tag,