mtrl 0.9.5 → 0.9.6

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

@@ -120,6 +120,7 @@ export const withProgress = (config) => (component) => {
         if (loading && !isLoading) {
             originalText = readLabel() ?? "";
             isLoading = true;
+            component.element.setAttribute("aria-busy", "true");
             await component.showProgress();
             if (component.disabled?.disable) {
                 component.disabled.disable();
@@ -129,6 +130,7 @@ export const withProgress = (config) => (component) => {
         }
         else if (!loading && isLoading) {
             isLoading = false;
+            component.element.removeAttribute("aria-busy");
             await component.hideProgress();
             if (component.disabled?.enable) {
                 component.disabled.enable();

package/dist/components/dialog/config.js

@@ -10,7 +10,6 @@ export const defaultConfig = {
     autofocus: true,
     trapFocus: true,
     divider: false,
-    animationDuration: 150,
     buttons: []
 };
 export const createBaseConfig = (config = {}) => createComponentConfig(defaultConfig, config, 'dialog');

package/dist/components/dialog/features.js

@@ -236,7 +236,8 @@ const addButton = (footer, buttonConfig, component) => {
 };
 export const withVisibility = () => (component) => {
     const isOpen = component.config.open === true;
-    const animationDuration = component.config.animationDuration || 150;
+    const openDuration = component.config.animationDuration ?? 500;
+    const closeDuration = component.config.animationDuration ?? 150;
     const focusableElements = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
     let previouslyFocusedElement = null;
     let mouseDownOnOverlay = false;
@@ -370,8 +371,8 @@ export const withVisibility = () => (component) => {
                 const container = component.structure.container || document.body;
                 container.appendChild(component.overlay);
             }
-            addClass(component.overlay, `${component.getClass("dialog-overlay")}--visible`);
             setTimeout(() => {
+                addClass(component.overlay, `${component.getClass("dialog-overlay")}--visible`);
                 addClass(component.element, `${component.getClass("dialog")}--visible`);
                 trapFocus();
                 setupEvents();
@@ -379,7 +380,7 @@ export const withVisibility = () => (component) => {
                     component.emit(DIALOG_EVENTS.OPEN, { dialog: component });
                     setTimeout(() => {
                         component.emit(DIALOG_EVENTS.AFTER_OPEN, { dialog: component });
-                    }, animationDuration);
+                    }, openDuration);
                 }
             }, 10);
         },
@@ -414,7 +415,7 @@ export const withVisibility = () => (component) => {
                 if (typeof component.emit === "function") {
                     component.emit(DIALOG_EVENTS.AFTER_CLOSE, { dialog: component });
                 }
-            }, animationDuration);
+            }, closeDuration);
         },
         toggle(open) {
             if (open === undefined) {

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

@@ -164,8 +164,9 @@ export interface DialogConfig {
      */
     zIndex?: number;
     /**
-     * Duration of open/close animations in milliseconds
-     * @default 150
+     * How long `afteropen` and `afterclose` wait after opening and closing, in
+     * milliseconds, and when a closed dialog leaves the DOM. By default they
+     * follow the stylesheet: 450 after opening, 200 after closing.
      */
     animationDuration?: number;
     /**

package/dist/components/menu/config.js

@@ -26,8 +26,8 @@ export const getElementConfig = (config) => {
         styles.maxHeight = config.maxHeight;
     }
     const attributes = {
-        role: "menu",
-        tabindex: "-1",
+        role: config.listbox ? "presentation" : "menu",
+        ...(config.listbox ? {} : { tabindex: "-1" }),
         "aria-hidden": (!config.visible).toString(),
         style: Object.entries(styles)
             .map(([key, value]) => `${key}: ${value}`)

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

@@ -6,6 +6,11 @@ const withController = (config) => (component) => {
         return component;
     }
     const tasks = createMenuTasks();
+    const listbox = config.listbox === true;
+    const optionIdPrefix = `${component.getClass("menu")}-${Math.random().toString(36).slice(2, 9)}`;
+    if (listbox) {
+        component.element.addEventListener("mousedown", (e) => e.preventDefault());
+    }
     const state = {
         visible: config.visible || false,
         items: config.items || [],
@@ -51,8 +56,14 @@ const withController = (config) => (component) => {
         const itemElement = document.createElement("li");
         const itemClass = `${component.getClass("menu-item")}`;
         itemElement.className = itemClass;
-        itemElement.setAttribute("role", "menuitem");
-        itemElement.setAttribute("tabindex", "-1");
+        if (listbox) {
+            itemElement.setAttribute("role", "option");
+            itemElement.id = `${optionIdPrefix}-option-${index}`;
+        }
+        else {
+            itemElement.setAttribute("role", "menuitem");
+            itemElement.setAttribute("tabindex", "-1");
+        }
         itemElement.setAttribute("data-id", item.id);
         itemElement.setAttribute("data-index", index.toString());
         if (item.disabled) {
@@ -144,7 +155,9 @@ const withController = (config) => (component) => {
     const renderMenuItems = () => {
         const menuList = document.createElement("ul");
         menuList.className = `${component.getClass("menu-list")}`;
-        menuList.setAttribute("role", "menu");
+        menuList.setAttribute("role", listbox ? "listbox" : "menu");
+        if (listbox)
+            menuList.id = `${optionIdPrefix}-listbox`;
         let target = menuList;
         const startGroup = () => {
             const group = document.createElement("li");
@@ -256,31 +269,32 @@ const withController = (config) => (component) => {
             component.element.style.opacity = "";
             void component.element.getBoundingClientRect();
             component.element.classList.add(`${component.getClass("menu--visible")}`);
-            tasks.setTimeout(() => {
-                if (component.keyboard && component.keyboard.handleInitialFocus) {
-                    component.keyboard.handleInitialFocus(component.element, interactionType);
-                }
-                else {
-                    const items = Array.from(component.element.querySelectorAll(`.${component.getClass("menu-item")}`));
-                    items.forEach((item) => {
-                        item.tabIndex = -1;
-                    });
-                    if (items.length > 0)
-                        items[0].tabIndex = 0;
-                    if (interactionType === "keyboard" && items.length > 0) {
-                        items[0].focus();
+            if (!listbox)
+                tasks.setTimeout(() => {
+                    if (component.keyboard && component.keyboard.handleInitialFocus) {
+                        component.keyboard.handleInitialFocus(component.element, interactionType);
                     }
                     else {
-                        component.element.tabIndex = -1;
-                        component.element.focus();
+                        const items = Array.from(component.element.querySelectorAll(`.${component.getClass("menu-item")}`));
+                        items.forEach((item) => {
+                            item.tabIndex = -1;
+                        });
+                        if (items.length > 0)
+                            items[0].tabIndex = 0;
+                        if (interactionType === "keyboard" && items.length > 0) {
+                            items[0].focus();
+                        }
+                        else {
+                            component.element.tabIndex = -1;
+                            component.element.focus();
+                        }
                     }
-                }
-            }, 100);
+                }, 100);
             tasks.setTimeout(() => {
                 if (config.closeOnClickOutside && state.visible) {
                     document.addEventListener("click", handleDocumentClick);
                 }
-                if (config.closeOnEscape) {
+                if (config.closeOnEscape && !listbox) {
                     document.addEventListener("keydown", handleDocumentKeydown);
                 }
                 window.addEventListener("resize", handleWindowResize, {
@@ -432,7 +446,7 @@ const withController = (config) => (component) => {
     };
     const initMenu = () => {
         renderMenuItems();
-        if (component.keyboard && component.keyboard.setupKeyboardHandlers) {
+        if (!listbox && component.keyboard && component.keyboard.setupKeyboardHandlers) {
             component.keyboard.setupKeyboardHandlers(component.element, state, {
                 closeMenu,
                 closeSubmenu: component.submenu ? component.submenu.closeSubmenu : null,
@@ -454,7 +468,7 @@ const withController = (config) => (component) => {
             if (config.closeOnClickOutside) {
                 document.addEventListener("click", handleDocumentClick);
             }
-            if (config.closeOnEscape) {
+            if (config.closeOnEscape && !listbox) {
                 document.addEventListener("keydown", handleDocumentKeydown);
             }
             window.addEventListener("resize", handleWindowResize);

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/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,47 +312,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);
         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, 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", {

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

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

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

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