mtrl 0.9.5 → 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/supporting-text.d.ts

@@ -3,6 +3,7 @@ import { BaseComponent, ElementComponent } from "../../../core/compose/component
  * Extended element component with lifecycle
  */
 interface LifecycleElementComponent extends ElementComponent {
+    input?: HTMLInputElement | HTMLTextAreaElement;
     lifecycle?: {
         destroy: () => void;
     };

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

@@ -1,10 +1,32 @@
+const addIdRef = (element, attribute, id) => {
+    const ids = (element.getAttribute(attribute) || "").split(/\s+/).filter(Boolean);
+    if (!ids.includes(id))
+        element.setAttribute(attribute, [...ids, id].join(" "));
+};
+const removeIdRef = (element, attribute, id) => {
+    const ids = (element.getAttribute(attribute) || "").split(/\s+/).filter((ref) => ref && ref !== id);
+    if (ids.length)
+        element.setAttribute(attribute, ids.join(" "));
+    else
+        element.removeAttribute(attribute);
+};
 export const withSupportingText = (config) => (component) => {
     const PREFIX = config.prefix || "mtrl";
     const COMPONENT = config.componentName || "textfield";
     let supportingElement = null;
+    const supportingId = `${PREFIX}-${COMPONENT}-supporting-${Math.random().toString(36).slice(2, 9)}`;
+    const describe = (element) => {
+        if (!component.input)
+            return;
+        if (element)
+            addIdRef(component.input, "aria-describedby", supportingId);
+        else
+            removeIdRef(component.input, "aria-describedby", supportingId);
+    };
     const createSupportingElement = (text, isError = false) => {
         const element = document.createElement("div");
         element.className = `${PREFIX}-${COMPONENT}-helper`;
+        element.id = supportingId;
         element.textContent = text;
         if (isError) {
             element.classList.add(`${PREFIX}-${COMPONENT}-helper--error`);
@@ -15,6 +37,7 @@ export const withSupportingText = (config) => (component) => {
     if (config.supportingText) {
         supportingElement = createSupportingElement(config.supportingText, config.error);
         component.element.appendChild(supportingElement);
+        describe(supportingElement);
     }
     if ("lifecycle" in component && component.lifecycle?.destroy) {
         const originalDestroy = component.lifecycle.destroy;
@@ -43,6 +66,7 @@ export const withSupportingText = (config) => (component) => {
                 this.supportingTextElement = null;
                 component.element.classList.remove(`${PREFIX}-${COMPONENT}--error`);
             }
+            describe(supportingElement);
             return this;
         },
         removeSupportingText() {
@@ -51,6 +75,7 @@ export const withSupportingText = (config) => (component) => {
                 supportingElement = null;
                 this.supportingTextElement = null;
                 component.element.classList.remove(`${PREFIX}-${COMPONENT}--error`);
+                describe(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

@@ -159,6 +159,20 @@ export const withAPI = ({ lifecycle }) => (component) => {
     };
     const handleTargetMouseEnter = () => api.show();
     const handleTargetMouseLeave = () => api.hide();
+    const handleTooltipMouseEnter = () => {
+        if (isVisible && hideTimer !== null)
+            api.show(true);
+    };
+    const handleTooltipMouseLeave = () => {
+        if (isVisible)
+            api.hide();
+    };
+    component.element.addEventListener("mouseenter", handleTooltipMouseEnter);
+    component.element.addEventListener("mouseleave", handleTooltipMouseLeave);
+    const handleDocumentKeydown = (event) => {
+        if (event.key === "Escape" && isVisible)
+            api.hide(true);
+    };
     const handleTargetFocus = () => api.show();
     const handleTargetBlur = () => api.hide();
     const api = {
@@ -168,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();
             }
@@ -231,6 +251,7 @@ export const withAPI = ({ lifecycle }) => (component) => {
                 this.updatePosition();
                 window.addEventListener("resize", handleWindowResize);
                 window.addEventListener("scroll", handleWindowScroll);
+                document.addEventListener("keydown", handleDocumentKeydown);
             };
             if (immediate) {
                 showTooltip();
@@ -255,6 +276,7 @@ export const withAPI = ({ lifecycle }) => (component) => {
                 isVisible = false;
                 window.removeEventListener("resize", handleWindowResize);
                 window.removeEventListener("scroll", handleWindowScroll);
+                document.removeEventListener("keydown", handleDocumentKeydown);
             };
             if (immediate) {
                 hideTooltip();
@@ -292,6 +314,9 @@ export const withAPI = ({ lifecycle }) => (component) => {
             }
             window.removeEventListener("resize", handleWindowResize);
             window.removeEventListener("scroll", handleWindowScroll);
+            document.removeEventListener("keydown", handleDocumentKeydown);
+            component.element.removeEventListener("mouseenter", handleTooltipMouseEnter);
+            component.element.removeEventListener("mouseleave", handleTooltipMouseLeave);
             if (component.element.parentNode) {
                 component.element.parentNode.removeChild(component.element);
             }

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,