material 3.3.3 → 3.4.0

package/README.md

@@ -93,8 +93,8 @@ What a bundler keeps, minified and gzipped (kB is 1,000 bytes), measured from th
 |--------|-----:|
 | `createButton` from `material`, with code splitting: the initial chunks (the progress indicator loads on demand) | 7.6 kB |
 | `createButton`, without code splitting (the progress indicator included) | 13.9 kB |
-| `createButton`, `createTextField` and `createCheckbox`, without code splitting | 20.2 kB |
-| Everything the root exports (`export * from 'material'`), without code splitting | 126.7 kB |
+| `createButton`, `createTextField` and `createCheckbox`, without code splitting | 20.4 kB |
+| Everything the root exports (`export * from 'material'`), without code splitting | 127.4 kB |
 | `material/styles/base` | 2.9 kB |
 | `material/styles/base` and `material/styles/button` | 5.2 kB |
 | `material/styles`, the full stylesheet | 63.7 kB |

package/dist/components/badge/api.js

@@ -1,4 +1,4 @@
-import { isBadgeOverflow, isEmptyBadgeLabel } from "./config.js";
+import { isBadgeOverflow, isEmptyBadgeLabel, smallBadgeLabel } from "./config.js";
 import { formatBadgeLabel } from "./config.js";
 const VARIANT_SMALL = "small";
 const ALL_COLORS = [
@@ -21,10 +21,12 @@ export const withAPI = ({ visibility, lifecycle }) => (component) => {
             component.config.label = label;
             if (component.config.variant === VARIANT_SMALL) {
                 component.element.textContent = "";
+                component.element.setAttribute("aria-label", smallBadgeLabel(label));
                 return badgeComponent;
             }
             const formattedLabel = formatBadgeLabel(label, component.config.max);
             component.element.textContent = formattedLabel;
+            component.element.removeAttribute("aria-label");
             component.element.classList.remove(`${component.getClass("badge")}--overflow`);
             if (isBadgeOverflow(label, component.config.max)) {
                 component.element.classList.add(`${component.getClass("badge")}--overflow`);
@@ -81,14 +83,14 @@ export const withAPI = ({ visibility, lifecycle }) => (component) => {
             });
             component.element.classList.add(`${component.getClass("badge")}--${variant}`);
             component.config.variant = variant;
+            component.element.removeAttribute("aria-hidden");
+            component.element.setAttribute("role", "status");
             if (variant === VARIANT_SMALL) {
                 component.element.textContent = "";
-                component.element.removeAttribute("role");
-                component.element.setAttribute("aria-hidden", "true");
+                component.element.setAttribute("aria-label", smallBadgeLabel(component.config.label));
             }
             else {
-                component.element.removeAttribute("aria-hidden");
-                component.element.setAttribute("role", "status");
+                component.element.removeAttribute("aria-label");
                 if (component.config.label !== undefined) {
                     badgeComponent.setLabel(component.config.label);
                 }

package/dist/components/badge/config.js

@@ -7,22 +7,10 @@ export const defaultConfig = {
     label: "",
     visible: true,
 };
+export const smallBadgeLabel = (label) => typeof label === "string" && isNaN(+label)
+    ? label.trim() : "New notification";
 export const createBaseConfig = (config = {}) => createComponentConfig(defaultConfig, config, "badge");
-export const getElementConfig = (config) => {
-    const attributes = {};
-    if (config.variant !== "small") {
-        attributes.role = "status";
-    }
-    const formattedLabel = config.variant === "small"
-        ? ""
-        : formatBadgeLabel(config.label || "", config.max);
-    return createElementConfig(config, {
-        tag: "span",
-        attributes,
-        className: config.class,
-        text: formattedLabel,
-    });
-};
+export const getElementConfig = (config) => createElementConfig(config, { tag: "span" });
 export const getApiConfig = (comp) => ({
     visibility: {
         show: () => comp.visibility.show(),

package/dist/components/badge/features.js

@@ -1,4 +1,4 @@
-import { formatBadgeLabel, isBadgeOverflow, isEmptyBadgeLabel } from "./config.js";
+import { formatBadgeLabel, isBadgeOverflow, isEmptyBadgeLabel, smallBadgeLabel } from "./config.js";
 const VARIANT_SMALL = 'small';
 const VARIANT_LARGE = 'large';
 const COLOR_ERROR = 'error';
@@ -38,16 +38,14 @@ export const withVisibility = () => (component) => {
 export const withVariant = (config) => (component) => {
     const variant = config.variant || VARIANT_LARGE;
     component.element.classList.add(`${component.getClass('badge')}--${variant}`);
+    component.element.setAttribute('role', 'status');
     if (variant === VARIANT_SMALL) {
-        component.element.textContent = '';
-        component.element.setAttribute('aria-hidden', 'true');
+        component.element.setAttribute('aria-label', smallBadgeLabel(config.label));
+        component.element.removeAttribute('aria-hidden');
     }
     else {
-        component.element.setAttribute('role', 'status');
-        if (config.label !== undefined && config.label !== '') {
-            const formattedLabel = formatBadgeLabel(config.label, config.max);
-            component.element.textContent = formattedLabel;
-        }
+        component.element.removeAttribute('aria-label');
+        component.element.textContent = formatBadgeLabel(config.label ?? '', config.max);
     }
     return component;
 };
@@ -70,8 +68,6 @@ export const withMax = (config) => (component) => {
     }
     component.config.max = config.max;
     if (config.label !== undefined) {
-        const formattedLabel = formatBadgeLabel(config.label, config.max);
-        component.element.textContent = formattedLabel;
         if (isBadgeOverflow(config.label, config.max)) {
             component.element.classList.add(`${component.getClass('badge')}--overflow`);
         }

package/dist/components/chips/chip/chip.js

@@ -90,6 +90,7 @@ const createChip = (config = {}) => {
         root.classList.toggle(base.getClass("chip--avatar"), !!avatar);
         action.disabled = disabled;
         if (oneActionCell) {
+            root.setAttribute("aria-label", label.textContent ?? "");
             if (selectable)
                 root.setAttribute("aria-selected", String(selected));
             root.setAttribute("aria-disabled", String(disabled));
@@ -114,6 +115,8 @@ const createChip = (config = {}) => {
             if (!options.cell)
                 root.setAttribute("aria-label", text);
         }
+        if (options.ariaLabel)
+            (oneActionCell ? root : action).setAttribute("aria-label", options.ariaLabel);
     };
     let made = false;
     const animateChanges = () => {

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

@@ -4,6 +4,7 @@ export type ChipType = "assist" | "filter" | "input" | "suggestion";
 export interface ChipConfig {
     type?: ChipType;
     label?: string;
+    ariaLabel?: string;
     value?: string;
     disabled?: boolean;
     selected?: boolean;

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

@@ -45,23 +45,11 @@ const withController = (config, getComponent) => (component) => {
             return eventData;
         },
     };
-    const getOpenerElement = () => {
-        if (component.opener && typeof component.opener.getOpener === "function") {
-            return component.opener.getOpener();
-        }
-        const { opener } = config;
-        if (typeof opener === "string") {
-            const element = document.querySelector(opener);
-            if (!element) {
-                console.warn(`Menu opener not found: ${opener}`);
-                return null;
-            }
-            return element;
-        }
-        if (typeof opener === "object" && opener !== null && "element" in opener) {
-            return opener.element;
-        }
-        return opener;
+    const getOpenerElement = () => getComponent().getOpener() ?? null;
+    const reposition = () => {
+        const opener = getOpenerElement();
+        if (opener)
+            component.position?.positionMenu(opener);
     };
     const createMenuItem = (item, index) => {
         const itemElement = document.createElement("li");
@@ -287,10 +275,7 @@ const withController = (config, getComponent) => (component) => {
         if (topLayer)
             showInTopLayer(component.element, { kind: "popover-manual" });
         showTimer = tasks.setTimeout(() => {
-            const openerElement = getOpenerElement();
-            if (openerElement && component.position) {
-                component.position.positionMenu(openerElement);
-            }
+            reposition();
             component.element.setAttribute("aria-hidden", "false");
             component.element.style.transform = "";
             component.element.style.opacity = "";
@@ -298,24 +283,7 @@ const withController = (config, getComponent) => (component) => {
             component.element.classList.add(`${component.getClass("menu--visible")}`);
             if (!listbox)
                 focusTimer = 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();
-                        }
-                        else {
-                            component.element.tabIndex = -1;
-                            component.element.focus();
-                        }
-                    }
+                    component.keyboard?.handleInitialFocus(component.element, interactionType);
                 }, 100);
             window.addEventListener("resize", handleWindowResize, {
                 passive: true,
@@ -406,26 +374,18 @@ const withController = (config, getComponent) => (component) => {
                 }
             }
             else if (isTargetInsideSubmenu) {
-                if (component.keyboard && component.keyboard.handleMenuKeydown) {
-                    component.keyboard.handleMenuKeydown(e, state, {
-                        closeMenu,
-                        findItemById,
-                        ...submenuActions,
-                    });
-                }
-                else if (e.key === "Escape") {
-                    e.preventDefault();
-                    closeMenu(e, true);
-                }
+                component.keyboard?.handleMenuKeydown(e, state, {
+                    closeMenu,
+                    findItemById,
+                    ...submenuActions,
+                });
             }
             else {
-                if (component.keyboard && component.keyboard.handleMenuKeydown) {
-                    component.keyboard.handleMenuKeydown(e, state, {
-                        closeMenu,
-                        findItemById,
-                        ...submenuActions,
-                    });
-                }
+                component.keyboard?.handleMenuKeydown(e, state, {
+                    closeMenu,
+                    findItemById,
+                    ...submenuActions,
+                });
             }
         }
     };
@@ -435,10 +395,7 @@ const withController = (config, getComponent) => (component) => {
                 closeMenu(undefined, true);
             }
             else {
-                const openerElement = getOpenerElement();
-                if (openerElement && component.position) {
-                    component.position.positionMenu(openerElement);
-                }
+                reposition();
             }
         }
     };
@@ -447,19 +404,13 @@ const withController = (config, getComponent) => (component) => {
             return;
         if (state.visible) {
             tasks.requestAnimationFrame(() => {
-                const openerElement = getOpenerElement();
-                if (openerElement && component.position) {
-                    component.position.positionMenu(openerElement);
-                }
+                reposition();
             });
         }
     };
     const initMenu = () => {
         if (state.visible) {
-            const openerElement = getOpenerElement();
-            if (openerElement && component.position) {
-                component.position.positionMenu(openerElement);
-            }
+            reposition();
             component.element.classList.add(`${component.getClass("menu--visible")}`);
             if (config.closeOnClickOutside) {
                 document.addEventListener("click", handleDocumentClick);
@@ -493,8 +444,8 @@ const withController = (config, getComponent) => (component) => {
         });
     });
     renderMenuItems();
-    if (!listbox && component.keyboard && component.keyboard.setupKeyboardHandlers) {
-        component.keyboard.setupKeyboardHandlers(component.element, state, {
+    if (!listbox) {
+        component.keyboard?.setupKeyboardHandlers(component.element, state, {
             closeMenu,
             findItemById,
             ...submenuActions,
@@ -550,10 +501,7 @@ const withController = (config, getComponent) => (component) => {
             setPosition: (position) => {
                 state.position = position;
                 if (state.visible) {
-                    const openerElement = getOpenerElement();
-                    if (openerElement && component.position) {
-                        component.position.positionMenu(openerElement);
-                    }
+                    reposition();
                 }
                 return component;
             },

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

@@ -2,16 +2,7 @@ import { createMenuTasks } from "./tasks.js";
 import { focusWithin } from "./layer.js";
 const withOpener = (config) => (component) => {
     const tasks = createMenuTasks();
-    let isTabNavigation = false;
-    let tabTimeout = null;
-    const handleTabKey = (e) => {
-        isTabNavigation = e.key === "Tab";
-        tasks.clearTimeout(tabTimeout);
-        tabTimeout = tasks.setTimeout(() => {
-            isTabNavigation = false;
-        }, 100);
-    };
-    document.addEventListener("keydown", handleTabKey);
+    const isTabNavigationActive = () => component.keyboard?.isTabNavigationActive?.() ?? false;
     const state = {
         openerElement: null,
         openerComponent: null,
@@ -203,7 +194,7 @@ const withOpener = (config) => (component) => {
         if (!component.menu || !component.menu.isOpen())
             return;
         const relatedTarget = e.relatedTarget;
-        if (isTabNavigation) {
+        if (isTabNavigationActive()) {
             tasks.setTimeout(() => {
                 if (component.menu && component.menu.isOpen()) {
                     component.menu.close(e, false);
@@ -228,8 +219,6 @@ const withOpener = (config) => (component) => {
     };
     const cleanup = () => {
         tasks.cancelAll();
-        tabTimeout = null;
-        isTabNavigation = false;
         if (state.openerElement) {
             if (!config.manualOpen) {
                 state.openerElement.removeEventListener("click", handleOpenerClick);
@@ -254,7 +243,6 @@ const withOpener = (config) => (component) => {
             if (tasks.destroyed)
                 return;
             tasks.destroy();
-            document.removeEventListener("keydown", handleTabKey);
             cleanup();
             originalDestroy.call(component.lifecycle);
         };
@@ -269,7 +257,7 @@ const withOpener = (config) => (component) => {
         if (state.openerElement && !config.listbox) {
             state.openerElement.setAttribute("aria-expanded", "false");
             setOpenerActive(false);
-            if (event.restoreFocus && !isTabNavigation) {
+            if (event.restoreFocus && !isTabNavigationActive()) {
                 restoreFocusToOpener();
             }
         }

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

@@ -165,6 +165,7 @@ export interface MenuFeatureHost {
         removeKeyboardHandlers: (element: HTMLElement) => void;
         handleMenuKeydown: (e: KeyboardEvent, state: KeyboardMenuState, actions: KeyboardActions) => void;
         handleInitialFocus: (menuElement: HTMLElement, interactionType: "keyboard" | "mouse") => void;
+        isTabNavigationActive: () => boolean;
     };
     submenu?: {
         handleSubmenuClick: (item: MenuItem, index: number, itemElement: HTMLElement) => void;

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

@@ -76,7 +76,7 @@ export const withInput = (config, getComponent) => (component) => {
         const input = component.structure?.input;
         if (input) {
             input.placeholder = text;
-            input.setAttribute("aria-label", text);
+            input.setAttribute("aria-label", config.ariaLabel || text);
         }
     };
     const getPlaceholder = () => {

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

@@ -77,7 +77,7 @@ export const withStructure = (config) => (component) => {
     const inputAttributes = {
         type: "text",
         placeholder,
-        "aria-label": placeholder,
+        "aria-label": config.ariaLabel || placeholder,
         role: "combobox",
         "aria-autocomplete": "list",
         "aria-expanded": String(isViewState),

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

@@ -45,6 +45,7 @@ export interface SearchConfig {
     variant?: SearchVariant;
     disabled?: boolean;
     placeholder?: string;
+    ariaLabel?: string;
     value?: string;
     name?: string;
     leadingIcon?: string;

package/dist/components/select/features.js

@@ -29,6 +29,8 @@ export const withTextField = (config) => (component) => {
     });
     textField.element.classList.add(`${config.prefix || "mtrl"}-select`);
     if (textField.input) {
+        if (config.ariaLabel)
+            textField.input.setAttribute("aria-label", config.ariaLabel);
         const input = textField.input;
         input.addEventListener("keydown", (e) => {
             const allowedKeys = [

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

@@ -21,6 +21,7 @@ export interface SelectConfig {
     variant?: SelectVariant | string;
     density?: "default" | "compact" | string;
     label?: string;
+    ariaLabel?: string;
     name?: string;
     required?: boolean;
     menu?: {

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

@@ -16,10 +16,8 @@ export const withDom = (config) => (component) => {
     setStyles(container, {
         position: "relative",
     });
-    const label = config.label || "";
-    const handleLabel = config.range && label ? `${label} minimum` : label;
-    const secondHandleLabel = label ? `${label} maximum` : "";
-    const handleElement = (index, handleValue, name) => {
+    const label = config.ariaLabel || config.label || "";
+    const handleElement = (index, handleValue) => {
         const attributes = {
             role: "slider",
             "aria-valuemin": String(min),
@@ -31,9 +29,6 @@ export const withDom = (config) => (component) => {
             "data-value": String(handleValue),
             "data-handle-index": String(index),
         };
-        if (name) {
-            attributes["aria-label"] = name;
-        }
         const element = createElement({
             tag: "div",
             className: getClass("slider__handle"),
@@ -61,15 +56,38 @@ export const withDom = (config) => (component) => {
         });
         return element;
     };
-    const handle = handleElement(0, value, handleLabel);
+    const handle = handleElement(0, value);
     const valueBubble = bubbleElement(0, value);
     let secondHandle;
     let secondValueBubble;
     if (config.range) {
         const secondValue = config.secondValue !== undefined ? config.secondValue : max;
-        secondHandle = handleElement(1, secondValue, secondHandleLabel);
+        secondHandle = handleElement(1, secondValue);
         secondValueBubble = bubbleElement(1, secondValue);
     }
+    [handle, secondHandle].forEach((target, index) => {
+        if (!target)
+            return;
+        const endpoint = config.range ? index ? "maximum" : "minimum" : "";
+        if (label)
+            target.setAttribute("aria-label", endpoint ? `${label} ${endpoint}` : label);
+        if (config.ariaLabelledBy) {
+            let labelledBy = config.ariaLabelledBy;
+            if (endpoint) {
+                const suffix = createElement({
+                    tag: "span",
+                    text: endpoint,
+                    attributes: {
+                        id: `${getClass("slider")}-${Math.random().toString(36).slice(2, 9)}`,
+                        hidden: true,
+                    },
+                    container: target,
+                });
+                labelledBy += ` ${suffix.id}`;
+            }
+            target.setAttribute("aria-labelledby", labelledBy);
+        }
+    });
     const name = config.name;
     const formFields = name
         ? [

package/dist/components/split-button/features/menu-on-demand.js

@@ -0,0 +1,141 @@
+export const createOnDemandMenu = (settings, items) => {
+    let menu = null;
+    let loading = false;
+    let destroyed = false;
+    let opened = false;
+    let asked = [undefined, undefined];
+    let current = items;
+    let selected;
+    let position = settings.position ?? "bottom-end";
+    let opener = settings.opener;
+    const openerElement = typeof settings.opener === "string"
+        ? null
+        : settings.opener.element ?? settings.opener;
+    const placeholder = document.createElement("div");
+    placeholder.id = `menu-${Date.now()}-${Math.floor(Math.random() * 1000)}`;
+    openerElement?.setAttribute("aria-controls", placeholder.id);
+    const listeners = new Map();
+    const notify = (event, payload) => {
+        for (const listener of listeners.get(event) ?? [])
+            listener(payload);
+    };
+    const attach = (created) => {
+        menu = created;
+        if (selected !== undefined)
+            created.setSelected(selected);
+        if (position !== settings.position)
+            created.setPosition(position);
+        if (opener !== settings.opener)
+            created.setOpener(opener);
+        if (opened)
+            created.open(asked[0], asked[1]);
+        for (const [event, set] of listeners)
+            for (const listener of set)
+                created.on(event, listener);
+        listeners.clear();
+    };
+    const load = () => {
+        if (menu || loading || destroyed)
+            return;
+        loading = true;
+        import("../../menu/index.js").then(({ default: createMenu }) => {
+            loading = false;
+            if (destroyed)
+                return;
+            attach(createMenu({ ...settings, items: current }));
+        }, (error) => {
+            loading = false;
+            console.error("Split button menu failed to load:", error);
+        });
+    };
+    const api = {
+        get element() {
+            return menu?.element ?? placeholder;
+        },
+        open(event, interactionType) {
+            if (menu) {
+                menu.open(event, interactionType);
+                return api;
+            }
+            if (!opened) {
+                opened = true;
+                notify("open", { menu: api, originalEvent: event });
+            }
+            asked = [event, interactionType];
+            load();
+            return api;
+        },
+        close(event, restoreFocus = true, skipAnimation = false) {
+            if (menu) {
+                menu.close(event, restoreFocus, skipAnimation);
+                return api;
+            }
+            if (opened) {
+                opened = false;
+                notify("close", { menu: api, originalEvent: event });
+            }
+            return api;
+        },
+        toggle(event) {
+            if (api.isOpen())
+                api.close(event);
+            else
+                api.open(event);
+            return api;
+        },
+        isOpen: () => (menu ? menu.isOpen() : opened),
+        setItems(items) {
+            current = items;
+            menu?.setItems(items);
+            return api;
+        },
+        getItems: () => (menu ? menu.getItems() : current),
+        setOpener(value) {
+            if (menu)
+                menu.setOpener(value);
+            else
+                opener = value;
+            return api;
+        },
+        getOpener: () => (menu ? menu.getOpener() : opener),
+        setPosition(value) {
+            if (menu)
+                menu.setPosition(value);
+            else
+                position = value;
+            return api;
+        },
+        getPosition: () => (menu ? menu.getPosition() : position),
+        setSelected(value) {
+            if (menu)
+                menu.setSelected(value);
+            else
+                selected = value;
+            return api;
+        },
+        getSelected: () => (menu ? menu.getSelected() : (selected ?? null)),
+        on(event, handler) {
+            if (menu)
+                menu.on(event, handler);
+            else {
+                const set = listeners.get(event) ?? new Set();
+                set.add(handler);
+                listeners.set(event, set);
+            }
+            return api;
+        },
+        off(event, handler) {
+            if (menu)
+                menu.off(event, handler);
+            else
+                listeners.get(event)?.delete(handler);
+            return api;
+        },
+        destroy() {
+            destroyed = true;
+            listeners.clear();
+            menu?.destroy();
+        },
+    };
+    return api;
+};

package/dist/components/split-button/features/menu.js

@@ -1,15 +1,14 @@
-import createMenu from "../../menu/index.js";
 import { MENU } from "../../menu/inner.js";
 import { SPLIT_BUTTON_DEFAULTS } from "../constants.js";
-export const makeMenu = (config, trailing, items) => createMenu({
+import { createOnDemandMenu } from "./menu-on-demand.js";
+export const makeMenu = (config, trailing, items) => createOnDemandMenu({
     opener: trailing,
-    items,
     position: "bottom-end",
     offset: SPLIT_BUTTON_DEFAULTS.MENU_OFFSET,
     manualOpen: true,
     ...(config.layer ? { layer: config.layer } : {}),
     prefix: config.prefix,
-});
+}, items);
 export const withMenu = (config) => (component) => {
     if (!config.items || config.items.length === 0)
         return component;

package/dist/components/tabs/tab.js

@@ -203,7 +203,8 @@ export const createTab = (config = {}) => {
             },
         };
         const announceBadge = () => {
-            const count = tab.badge?.isVisible() ? tab.badge.getContent() : "";
+            const count = tab.badge?.isVisible()
+                ? tab.badge.element.getAttribute("aria-label") || tab.badge.getContent() : "";
             const label = baseConfig.ariaLabel || button.getText();
             const name = [label, count].filter(Boolean).join(", ");
             if (name !== label) {