mtrl 0.9.4 → 0.9.6

package/dist/components/menu/features/opener.js

@@ -82,6 +82,8 @@ const withOpener = (config) => (component) => {
             openerElement.addEventListener("keydown", handleOpenerKeydown);
             openerElement.addEventListener("blur", handleOpenerBlur);
         }
+        if (config.listbox)
+            return;
         openerElement.setAttribute("aria-haspopup", "true");
         openerElement.setAttribute("aria-expanded", "false");
         let menuId = component.element.id;
@@ -256,13 +258,13 @@ const withOpener = (config) => (component) => {
         };
     }
     component.on("open", () => {
-        if (state.openerElement) {
+        if (state.openerElement && !config.listbox) {
             state.openerElement.setAttribute("aria-expanded", "true");
             setOpenerActive(true);
         }
     });
     component.on("close", (event) => {
-        if (state.openerElement) {
+        if (state.openerElement && !config.listbox) {
             state.openerElement.setAttribute("aria-expanded", "false");
             setOpenerActive(false);
             if (event.restoreFocus && !isTabNavigation) {

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

@@ -232,6 +232,15 @@ export interface MenuConfig {
      * @default false
      */
     manualOpen?: boolean;
+    /**
+     * Renders the menu as the listbox popup of a combobox (WAI-ARIA select-only
+     * combobox): the list is `role="listbox"` and each item `role="option"` with
+     * its own id, focus stays with the combobox, which owns the keyboard and
+     * points at the active option with `aria-activedescendant`, and the opener
+     * gets no ARIA from the menu. Pair it with `manualOpen`.
+     * @default false
+     */
+    listbox?: boolean;
     /**
      * When true, renders a compact menu with smaller items and tighter spacing.
      * Useful in dense UIs like toolbars and action bars where the standard
@@ -317,9 +326,11 @@ export interface MenuComponent {
     /**
      * Closes the menu
      * @param event - Optional event that triggered the close
+     * @param restoreFocus - Whether focus returns to the opener (default true)
+     * @param skipAnimation - Whether to close without the exit animation
      * @returns The menu component for chaining
      */
-    close: (event?: Event) => MenuComponent;
+    close: (event?: Event, restoreFocus?: boolean, skipAnimation?: boolean) => MenuComponent;
     /**
      * Toggles the menu's open state
      * @param event - Optional event that triggered the toggle

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

@@ -21,11 +21,9 @@ interface ComponentWithRadio {
     enableOption: (value: string) => void;
     disableOption: (value: string) => void;
     getClass: (name: string) => string;
-    events: {
-        on: (event: string, handler: Function) => void;
-        off: (event: string, handler: Function) => void;
-        emit?: (event: string, data: unknown) => void;
-    };
+    on: (event: string, handler: Function) => void;
+    off: (event: string, handler: Function) => void;
+    emit?: (event: string, data: unknown) => void;
 }
 /**
  * Enhances a radios component with API methods
@@ -33,5 +31,5 @@ interface ComponentWithRadio {
  * @returns {Function} Higher-order function that adds API methods to component
  * @internal This is an internal utility for the Radios component
  */
-export declare const withAPI: ({ disabled, lifecycle }: ApiOptions) => (component: ComponentWithRadio) => RadiosComponent;
+export declare const withAPI: ({ lifecycle }: ApiOptions) => (component: ComponentWithRadio) => RadiosComponent;
 export {};

package/dist/components/radios/api.js

@@ -1,24 +1,4 @@
-export const withAPI = ({ disabled, lifecycle }) => (component) => {
-    if (!component.events) {
-        component.events = {
-            on: (event, handler) => {
-                component.element.addEventListener(event, ((e) => handler(e.detail)));
-            },
-            off: (event, handler) => {
-                component.element.removeEventListener(event, handler);
-            },
-            emit: (event, data) => {
-                const customEvent = new CustomEvent(event, { detail: data });
-                component.element.dispatchEvent(customEvent);
-            },
-        };
-    }
-    else if (!component.events.emit) {
-        component.events.emit = (event, data) => {
-            const customEvent = new CustomEvent(event, { detail: data });
-            component.element.dispatchEvent(customEvent);
-        };
-    }
+export const withAPI = ({ lifecycle }) => (component) => {
     const radiosComponent = {
         element: component.element,
         radios: component.radios,
@@ -41,11 +21,11 @@ export const withAPI = ({ disabled, lifecycle }) => (component) => {
             return this;
         },
         enable() {
-            disabled.enable();
+            component.enable();
             return this;
         },
         disable() {
-            disabled.disable();
+            component.disable();
             return this;
         },
         enableOption(value) {
@@ -57,11 +37,11 @@ export const withAPI = ({ disabled, lifecycle }) => (component) => {
             return this;
         },
         on(event, handler) {
-            component.events.on(event, handler);
+            component.on(event, handler);
             return this;
         },
         off(event, handler) {
-            component.events.off(event, handler);
+            component.off(event, handler);
             return this;
         },
         destroy() {

package/dist/components/radios/radio.js

@@ -58,23 +58,11 @@ export const withRadio = (config) => (component) => {
                         radio.input.checked = false;
                     }
                 });
-                if (component.events && typeof component.events.emit === 'function') {
-                    component.events.emit('change', {
-                        value: option.value,
-                        originalEvent: e,
-                        option
-                    });
-                }
-                else if (typeof component.on === 'function') {
-                    const changeEvent = new CustomEvent('change', {
-                        detail: {
-                            value: option.value,
-                            originalEvent: e,
-                            option
-                        }
-                    });
-                    component.element.dispatchEvent(changeEvent);
-                }
+                component.emit?.('change', {
+                    value: option.value,
+                    originalEvent: e,
+                    option
+                });
             }
         };
         input.addEventListener('change', handleChange);
@@ -112,28 +100,15 @@ export const withRadio = (config) => (component) => {
     if (config.options && Array.isArray(config.options)) {
         config.options.forEach(option => addOption(option));
     }
-    if (!component.events) {
-        component.events = {
-            on: (event, handler) => {
-                component.element.addEventListener(event, (e) => handler(e.detail));
-            },
-            off: (event, handler) => {
-                component.element.removeEventListener(event, handler);
-            },
-            emit: (event, data) => {
-                const customEvent = new CustomEvent(event, { detail: data });
-                component.element.dispatchEvent(customEvent);
-            }
-        };
-    }
     return {
         ...component,
         radios,
         getValue: () => selectedValue,
         setValue: (value) => {
-            selectedValue = value;
+            const known = radios.some(radio => radio.config.value === value);
+            selectedValue = known ? value : '';
             radios.forEach(radio => {
-                radio.input.checked = radio.config.value === value;
+                radio.input.checked = known && radio.config.value === value;
             });
             return component;
         },

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

@@ -38,6 +38,7 @@ export const withStates = (config) => (component) => {
                 viewMode: currentViewMode,
             });
         }
+        config.onExpand?.();
     };
     const collapseToBar = () => {
         if (currentState === SEARCH_STATES.BAR) {
@@ -67,6 +68,7 @@ export const withStates = (config) => (component) => {
                 viewMode: currentViewMode,
             });
         }
+        config.onCollapse?.();
     };
     const setViewMode = (mode) => {
         if (mode === currentViewMode) {

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

@@ -207,7 +207,10 @@ export const withSuggestions = () => (component) => {
     };
     setTimeout(() => {
         setupKeyboardNavigation();
+        if (getSuggestions().length > 0)
+            renderSuggestions();
     }, 0);
+    component.on?.("expand", () => renderSuggestions());
     return {
         ...component,
         suggestions: {

package/dist/components/select/api.js

@@ -20,6 +20,8 @@ export const withAPI = (options) => (component) => ({
         return this;
     },
     open(interactionType = "mouse") {
+        if (component.textfield?.input?.disabled)
+            return this;
         if (component.menu && typeof component.menu.open === "function") {
             component.menu.open(undefined, interactionType);
         }

package/dist/components/select/features.js

@@ -75,6 +75,217 @@ const processMenuItems = (options) => {
         return menuItem;
     });
 };
+const setupCombobox = (component, menu, state, choose, prefix) => {
+    const input = component.textfield.input;
+    const field = component.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");
@@ -88,6 +299,7 @@ export const withMenu = (config) => (component) => {
         state.selectedOption = state.options.find((opt) => opt.id === config.value);
     }
     const menuItems = processMenuItems(state.options);
+    const listbox = !state.options.some((option) => option && option.hasSubmenu);
     const menu = createMenu({
         opener: component.textfield,
         items: menuItems,
@@ -100,56 +312,65 @@ 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);
         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");
-            if (component.emit) {
-                component.emit("open", {
-                    select: component,
-                    originalEvent: e,
-                    preventDefault: () => { },
-                    defaultPrevented: false,
-                });
-            }
         }
-        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, menu, state, choose, config.prefix || "mtrl");
+    }
+    if (!listbox)
+        component.textfield.element.addEventListener("keydown", (e) => {
+            if (component.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", {
+                select: component,
+                originalEvent: null,
+                preventDefault: () => { },
+                defaultPrevented: false,
+            });
+        }
         component.textfield.element.classList.add(`${config.prefix || "mtrl"}-select--open`);
         const PREFIX = config.prefix || "mtrl";
         component.textfield.element.classList.add(`${PREFIX}-textfield--focused`);

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

@@ -1,5 +1,6 @@
 import { SLIDER_EVENTS } from "../types.js";
 import { SLIDER_MEASUREMENTS } from "../constants.js";
+import { defaultConfig } from "../config.js";
 import { createHandlers } from "./handlers.js";
 export const withController = (config) => (component) => {
     if (!component.element) {
@@ -105,8 +106,16 @@ export const withController = (config) => (component) => {
                 secondValueBubble.style.transform = "translateX(-50%)";
             }
         }
-        if (handle) {
-            handle.setAttribute("aria-valuenow", String(state.value));
+        updateHandleAria(handle, state.value);
+        if (config.range && secondHandle && state.secondValue !== null) {
+            updateHandleAria(secondHandle, state.secondValue);
+        }
+    };
+    const updateHandleAria = (handleElement, value) => {
+        handleElement.setAttribute("aria-valuenow", String(value));
+        if (config.valueFormatter &&
+            config.valueFormatter !== defaultConfig.valueFormatter) {
+            handleElement.setAttribute("aria-valuetext", config.valueFormatter(value));
         }
     };
     const updateValueBubbles = () => {

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

@@ -18,9 +18,11 @@ export const withAPI = ({ lifecycle }) => (component) => ({
         if (tab.on && typeof tab.on === 'function') {
             tab.on('click', (event) => component.handleTabClick(event, tab));
         }
-        tab.element.addEventListener('click', (event) => {
-            component.handleTabClick(event, tab);
-        });
+        else {
+            tab.element.addEventListener('click', (event) => {
+                component.handleTabClick(event, tab);
+            });
+        }
         return tab;
     },
     add(tab) {
@@ -30,9 +32,11 @@ export const withAPI = ({ lifecycle }) => (component) => ({
         if (tab.on && typeof tab.on === 'function') {
             tab.on('click', (event) => component.handleTabClick(event, tab));
         }
-        tab.element.addEventListener('click', (event) => {
-            component.handleTabClick(event, tab);
-        });
+        else {
+            tab.element.addEventListener('click', (event) => {
+                component.handleTabClick(event, tab);
+            });
+        }
         return this;
     },
     getTabs() {
@@ -47,6 +51,8 @@ export const withAPI = ({ lifecycle }) => (component) => ({
             : tabOrValue;
         if (!targetTab)
             return this;
+        if (targetTab.element.disabled)
+            return this;
         component.tabs.forEach(tab => tab.deactivate());
         targetTab.activate();
         if (component.emit) {

package/dist/components/tabs/features.js

@@ -27,9 +27,7 @@ export const withTabsManagement = (config) => (component) => {
         if (isCancelable(event)) {
             event.preventDefault();
         }
-        if (tab.disabled &&
-            tab.disabled.isDisabled &&
-            tab.disabled.isDisabled()) {
+        if (tab.element.disabled) {
             return;
         }
         tabs.forEach((t) => t.deactivate());
@@ -50,7 +48,9 @@ export const withTabsManagement = (config) => (component) => {
         if (tab.on && typeof tab.on === "function") {
             tab.on("click", (event) => handleTabClick(event, tab));
         }
-        tab.element.addEventListener("click", (event) => handleTabClick(event, tab));
+        else {
+            tab.element.addEventListener("click", (event) => handleTabClick(event, tab));
+        }
     });
     return {
         ...component,
@@ -108,9 +108,7 @@ export const withIndicator = (config) => (component) => {
     scrollContainer.appendChild(indicator.element);
     const originalHandleTabClick = component.handleTabClick;
     component.handleTabClick = function (event, tab) {
-        if (tab.disabled &&
-            tab.disabled.isDisabled &&
-            tab.disabled.isDisabled()) {
+        if (tab.element.disabled) {
             return;
         }
         originalHandleTabClick.call(this, event, tab);