mtrl 0.9.5 → 0.9.8

package/dist/components/navigation-rail/navigation-rail.js

@@ -6,6 +6,7 @@ import { createEmitter } from "../../core/state/emitter.js";
 import { mountRailRipple } from "./ripple.js";
 import { createBaseConfig } from "./config.js";
 import { safeUrl } from "../../core/utils/url.js";
+import { setHTML } from "../../core/dom/html.js";
 const copyItems = (items) => {
     const ids = new Set();
     let selected = false;
@@ -94,7 +95,7 @@ export default function createNavigationRail(config = {}) {
             else
                 element.removeAttribute('aria-current');
             const icon = element.querySelector(`.${cls('__icon')}`);
-            icon.innerHTML = item.active && item.activeIcon ? item.activeIcon : item.icon;
+            setHTML(icon, item.active && item.activeIcon ? item.activeIcon : item.icon);
         }
     };
     const render = () => {
@@ -163,7 +164,7 @@ export default function createNavigationRail(config = {}) {
         toggle?.setAttribute('aria-expanded', String(expanded));
         toggle?.setAttribute('aria-label', (expanded ? options.collapseLabel : options.expandLabel));
         if (toggle)
-            toggle.innerHTML = (expanded ? options.collapseIcon : options.expandIcon);
+            setHTML(toggle, (expanded ? options.collapseIcon : options.expandIcon));
         if (dialog) {
             if (expanded)
                 showModal();

package/dist/components/progress/features/canvas.js

@@ -78,7 +78,6 @@ export const withCanvas = (config) => (component) => {
             return false;
         context = { canvas, ctx, width: 0, height: 0, pixelRatio: view?.devicePixelRatio || 1 };
         measure();
-        component.ctx = ctx;
         return true;
     };
     const currentAmplitude = () => {
@@ -293,7 +292,6 @@ export const withCanvas = (config) => (component) => {
     return {
         ...component,
         canvas,
-        ctx: context?.ctx,
         draw,
         resize,
     };

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

@@ -1,4 +1,5 @@
 import { SEARCH_STATES, SEARCH_VIEW_MODES, SEARCH_CLASSES, SEARCH_ICONS, } from "../constants.js";
+import { setHTML } from "../../../core/dom/html.js";
 export const withStates = (config) => (component) => {
     let currentState = config.initialState || SEARCH_STATES.BAR;
     let currentViewMode = config.viewMode || SEARCH_VIEW_MODES.DOCKED;
@@ -16,7 +17,7 @@ export const withStates = (config) => (component) => {
         element.classList.remove(getClass(SEARCH_CLASSES.STATE_BAR));
         element.classList.add(getClass(SEARCH_CLASSES.STATE_VIEW));
         if (structure?.leadingIcon) {
-            structure.leadingIcon.innerHTML = SEARCH_ICONS.BACK;
+            setHTML(structure.leadingIcon, SEARCH_ICONS.BACK);
             structure.leadingIcon.setAttribute("aria-label", "Go back");
         }
         if (structure?.divider && !element.contains(structure.divider)) {
@@ -50,8 +51,7 @@ export const withStates = (config) => (component) => {
         element.classList.remove(getClass(SEARCH_CLASSES.STATE_VIEW));
         element.classList.add(getClass(SEARCH_CLASSES.STATE_BAR));
         if (structure?.leadingIcon) {
-            structure.leadingIcon.innerHTML =
-                config.leadingIcon || SEARCH_ICONS.SEARCH;
+            setHTML(structure.leadingIcon, config.leadingIcon || SEARCH_ICONS.SEARCH);
             structure.leadingIcon.setAttribute("aria-label", "Search");
         }
         if (structure?.divider && element.contains(structure.divider)) {

package/dist/components/search/features/structure.js

@@ -62,6 +62,9 @@ export const withStructure = (config) => (component) => {
     if (value) {
         inputAttributes.value = value;
     }
+    if (config.name) {
+        inputAttributes.name = config.name;
+    }
     if (isDisabled) {
         inputAttributes.disabled = "disabled";
     }

package/dist/components/search/features/suggestions.js

@@ -83,7 +83,7 @@ export const withSuggestions = () => (component) => {
             return;
         const suggestions = getSuggestions();
         const query = component.input?.getValue?.() || "";
-        suggestionsList.innerHTML = "";
+        suggestionsList.replaceChildren();
         if (suggestions.length === 0) {
             return;
         }
@@ -112,7 +112,7 @@ export const withSuggestions = () => (component) => {
     const clearRenderedSuggestions = () => {
         const suggestionsList = component.structure?.suggestionsList;
         if (suggestionsList) {
-            suggestionsList.innerHTML = "";
+            suggestionsList.replaceChildren();
         }
         highlightedIndex = -1;
     };

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

@@ -74,6 +74,12 @@ export interface SearchConfig {
     placeholder?: string;
     /** Initial input value */
     value?: string;
+    /**
+     * Form field name. Set on the text input itself, so the search takes part
+     * in a surrounding form and its value appears in `FormData`. Without it the
+     * search submits nothing.
+     */
+    name?: string;
     /** Custom leading icon HTML (replaces default search icon) */
     leadingIcon?: string;
     /** Trailing content items (icons, avatar) */

package/dist/components/segmented-button/config.d.ts

@@ -10,7 +10,10 @@ export declare const DEFAULT_CONFIG: SegmentedButtonConfig;
  * @returns {SegmentedButtonConfig} Complete configuration with defaults applied
  * @internal
  */
-export declare const createBaseConfig: (config?: SegmentedButtonConfig) => SegmentedButtonConfig;
+export declare const createBaseConfig: (config?: SegmentedButtonConfig) => SegmentedButtonConfig & {
+    componentName: string;
+    prefix: string;
+};
 /**
  * Generates element configuration for the Segmented Button container
  * @param {SegmentedButtonConfig} config - Segmented Button configuration

package/dist/components/segmented-button/config.js

@@ -24,7 +24,7 @@ export const getContainerConfig = (config) => {
             density !== Density.DEFAULT
                 ? `${config.prefix}-segmented-button--${density}`
                 : null,
-        ],
+        ].filter((name) => Boolean(name)),
         interactive: true,
     };
 };

package/dist/components/segmented-button/segment.d.ts

@@ -1,4 +1,4 @@
-import { SegmentConfig, Segment } from "./types.js";
+import { SegmentConfig, Segment, SegmentedButtonConfig } from "./types.js";
 /**
  * Creates a segment for the segmented button using the button component
  *
@@ -16,7 +16,4 @@ import { SegmentConfig, Segment } from "./types.js";
  * @returns {Segment} Segment object
  * @internal
  */
-export declare const createSegment: (config: SegmentConfig, container: HTMLElement, prefix: string, groupDisabled?: boolean, options?: {
-    ripple: boolean;
-    rippleConfig: {};
-}) => Segment;
+export declare const createSegment: (config: SegmentConfig, container: HTMLElement, prefix: string, groupDisabled?: boolean, options?: Pick<SegmentedButtonConfig, "ripple" | "rippleConfig">) => Segment;

package/dist/components/segmented-button/segment.js

@@ -1,12 +1,16 @@
 import createButton from "../button/index.js";
 import { DEFAULT_CHECKMARK_ICON } from "./constants.js";
+import { setHTML } from "../../core/dom/html.js";
 const createCheckmarkElement = (prefix, icon) => {
     const checkmark = document.createElement("span");
     checkmark.className = `${prefix}-segment-checkmark`;
-    checkmark.innerHTML = icon || DEFAULT_CHECKMARK_ICON;
+    setHTML(checkmark, icon || DEFAULT_CHECKMARK_ICON);
     return checkmark;
 };
-export const createSegment = (config, container, prefix, groupDisabled = false, options = { ripple: true, rippleConfig: {} }) => {
+export const createSegment = (config, container, prefix, groupDisabled = false, options = {
+    ripple: true,
+    rippleConfig: {},
+}) => {
     const isDisabled = groupDisabled || config.disabled;
     const originalIcon = config.icon;
     const hasText = Boolean(config.text);
@@ -53,7 +57,7 @@ export const createSegment = (config, container, prefix, groupDisabled = false,
         button.element.setAttribute("aria-pressed", selected ? "true" : "false");
         if (isIconOnly) {
         }
-        else if (hasIcon && hasText) {
+        else if (originalIcon && hasText) {
             if (selected) {
                 button.setIcon(checkmarkIcon);
             }

package/dist/components/select/features.js

@@ -75,19 +75,232 @@ const processMenuItems = (options) => {
         return menuItem;
     });
 };
+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;
+    input.setAttribute("role", "combobox");
+    input.setAttribute("aria-haspopup", "listbox");
+    input.setAttribute("aria-expanded", "false");
+    let active = null;
+    let pending = "selected";
+    let buffer = "";
+    let bufferTimer = null;
+    const options = () => Array.from(menu.element.querySelectorAll('[role="option"]'));
+    const enabled = () => options().filter((option) => option.getAttribute("aria-disabled") !== "true");
+    const optionFor = (element) => element
+        ? state.options.find((option) => String(option.id) === element.getAttribute("data-id"))
+        : undefined;
+    const setActive = (element) => {
+        active = element;
+        options().forEach((option) => option.classList.toggle(activeClass, option === element));
+        if (element) {
+            input.setAttribute("aria-activedescendant", element.id);
+            element.scrollIntoView?.({ block: "nearest" });
+        }
+        else {
+            input.removeAttribute("aria-activedescendant");
+        }
+    };
+    const placeActive = () => {
+        const list = enabled();
+        if (!list.length)
+            return setActive(null);
+        if (pending === "first")
+            return setActive(list[0]);
+        if (pending === "last")
+            return setActive(list[list.length - 1]);
+        const selectedId = state.selectedOption ? String(state.selectedOption.id) : null;
+        setActive(list.find((option) => option.getAttribute("data-id") === selectedId) ?? list[0]);
+    };
+    const open = (start, event) => {
+        pending = start;
+        menu.open(event, "keyboard");
+    };
+    const close = (event) => {
+        menu.close(event, false);
+    };
+    const commit = (event) => {
+        const option = optionFor(active);
+        if (option)
+            choose(option, event);
+        close(event);
+    };
+    const move = (index) => {
+        const list = enabled();
+        if (!list.length)
+            return;
+        setActive(list[Math.max(0, Math.min(index, list.length - 1))]);
+    };
+    const typeahead = (key) => {
+        if (bufferTimer)
+            clearTimeout(bufferTimer);
+        bufferTimer = setTimeout(() => {
+            buffer = "";
+            bufferTimer = null;
+        }, TYPEAHEAD_DELAY);
+        buffer += key.toLowerCase();
+        const list = enabled();
+        const start = active ? list.indexOf(active) + (buffer.length === 1 ? 1 : 0) : 0;
+        const ordered = [...list.slice(start), ...list.slice(0, start)];
+        const match = ordered.find((option) => (option.textContent || "").trim().toLowerCase().startsWith(buffer));
+        if (match)
+            setActive(match);
+        return !!match;
+    };
+    menu.on("open", () => {
+        input.setAttribute("aria-expanded", "true");
+        const connect = () => {
+            const list = menu.element.querySelector('[role="listbox"]');
+            if (list?.id)
+                input.setAttribute("aria-controls", list.id);
+            placeActive();
+        };
+        if (options().length)
+            connect();
+        else
+            setTimeout(connect, 0);
+    });
+    menu.on("close", () => {
+        input.setAttribute("aria-expanded", "false");
+        input.removeAttribute("aria-controls");
+        setActive(null);
+        pending = "selected";
+    });
+    input.addEventListener("keydown", (e) => {
+        if (input.disabled)
+            return;
+        const isOpen = menu.isOpen();
+        const list = enabled();
+        const index = active ? list.indexOf(active) : -1;
+        if (e.altKey && e.key === "ArrowDown") {
+            e.preventDefault();
+            if (!isOpen)
+                open("selected", e);
+            return;
+        }
+        if (e.altKey && e.key === "ArrowUp") {
+            e.preventDefault();
+            if (isOpen)
+                commit(e);
+            return;
+        }
+        switch (e.key) {
+            case "ArrowDown":
+                e.preventDefault();
+                if (!isOpen)
+                    open("selected", e);
+                else
+                    move(index + 1);
+                return;
+            case "ArrowUp":
+                e.preventDefault();
+                if (!isOpen)
+                    open("selected", e);
+                else
+                    move(index - 1);
+                return;
+            case "Home":
+                e.preventDefault();
+                if (!isOpen)
+                    open("first", e);
+                else
+                    move(0);
+                return;
+            case "End":
+                e.preventDefault();
+                if (!isOpen)
+                    open("last", e);
+                else
+                    move(list.length - 1);
+                return;
+            case "PageDown":
+                if (!isOpen)
+                    return;
+                e.preventDefault();
+                move(index + PAGE);
+                return;
+            case "PageUp":
+                if (!isOpen)
+                    return;
+                e.preventDefault();
+                move(index - PAGE);
+                return;
+            case "Enter":
+                e.preventDefault();
+                if (isOpen)
+                    commit(e);
+                else
+                    open("selected", e);
+                return;
+            case "Escape":
+                if (!isOpen)
+                    return;
+                e.preventDefault();
+                close(e);
+                return;
+            case "Tab":
+                if (isOpen)
+                    commit(e);
+                return;
+            default:
+                break;
+        }
+        if (e.key === " " && !buffer) {
+            e.preventDefault();
+            if (isOpen)
+                commit(e);
+            else
+                open("selected", e);
+            return;
+        }
+        if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+            e.preventDefault();
+            if (!isOpen) {
+                open("selected", e);
+                setTimeout(() => typeahead(e.key), 0);
+            }
+            else {
+                typeahead(e.key);
+            }
+        }
+    });
+    field.addEventListener("mousedown", (e) => {
+        if (input.disabled || menu.element.contains(e.target) || e.target === input)
+            return;
+        e.preventDefault();
+        input.focus();
+    });
+    field.addEventListener("click", (e) => {
+        if (input.disabled || menu.element.contains(e.target))
+            return;
+        if (menu.isOpen())
+            close(e);
+        else
+            open("selected", e);
+    });
+    input.addEventListener("blur", (e) => {
+        if (menu.isOpen() && !field.contains(e.relatedTarget))
+            close(e);
+    });
+};
 export const withMenu = (config) => (component) => {
     if (!component.textfield) {
         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);
     const menu = createMenu({
         opener: component.textfield,
         items: menuItems,
@@ -100,47 +313,56 @@ export const withMenu = (config) => (component) => {
         closeOnResize: true,
         offset: 0,
         container: component.element,
+        ...(listbox ? { manualOpen: true, listbox: true, closeOnEscape: false } : {}),
         ...(config.menu ?? {}),
     });
-    menu.on("select", (event) => {
-        if (!event.item || event.item.hasSubmenu) {
-            return;
-        }
-        const option = event.item.data;
-        if (!isSelectOption(option)) {
-            console.warn("Invalid menu selection: missing required data properties");
-            return;
-        }
+    const choose = (option, originalEvent) => {
         state.selectedOption = option;
-        component.textfield.setValue(option.text);
+        textfield.setValue(option.text);
         menu.setSelected(option.id);
         if (component.emit) {
-            component.emit("change", {
+            const changeEvent = {
                 select: component,
                 value: option.id,
                 text: option.text,
                 option,
-                originalEvent: event.originalEvent,
+                originalEvent,
                 preventDefault: () => {
-                    event.defaultPrevented = true;
+                    changeEvent.defaultPrevented = true;
                 },
                 defaultPrevented: false,
-            });
+            };
+            component.emit("change", changeEvent);
         }
-    });
-    component.textfield.element.addEventListener("keydown", (e) => {
-        if (component.textfield.input.disabled)
+    };
+    menu.on("select", (event) => {
+        if (!event.item || event.item.hasSubmenu) {
             return;
-        if ((e.key === "Enter" || e.key === " " || e.key === "ArrowDown") &&
-            !menu.isOpen()) {
-            e.preventDefault();
-            menu.open(e, "keyboard");
         }
-        else if (e.key === "Escape" && menu.isOpen()) {
-            e.preventDefault();
-            menu.close(e);
+        const option = event.item.data;
+        if (!isSelectOption(option)) {
+            console.warn("Invalid menu selection: missing required data properties");
+            return;
         }
+        choose(option, event.originalEvent);
     });
+    if (listbox) {
+        setupCombobox(component, textfield, menu, state, choose, config.prefix || "mtrl");
+    }
+    if (!listbox)
+        textfield.element.addEventListener("keydown", (e) => {
+            if (textfield.input.disabled)
+                return;
+            if ((e.key === "Enter" || e.key === " " || e.key === "ArrowDown") &&
+                !menu.isOpen()) {
+                e.preventDefault();
+                menu.open(e, "keyboard");
+            }
+            else if (e.key === "Escape" && menu.isOpen()) {
+                e.preventDefault();
+                menu.close(e);
+            }
+        });
     menu.on("open", () => {
         if (component.emit) {
             component.emit("open", {
@@ -150,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);
@@ -201,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;
             },
@@ -226,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;