material 3.4.0 → 3.4.2

package/README.md

@@ -94,10 +94,10 @@ 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.4 kB |
-| Everything the root exports (`export * from 'material'`), without code splitting | 127.4 kB |
+| Everything the root exports (`export * from 'material'`), without code splitting | 127.3 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 |
+| `material/styles`, the full stylesheet | 63.6 kB |
 <!-- /sizes -->
 
 `material` publishes ESM only, so bundlers drop what you do not import. Each component's page on [md3.io/components](https://md3.io/components/) gives its size.

package/dist/components/button-group/button-group.js

@@ -81,14 +81,17 @@ const createButtonGroup = (config = {}) => {
             let growth = 0;
             const apply = [];
             const compress = (i, side) => {
-                const limit = Math.min(share, BUTTON_GROUP_COMPRESSION_LIMIT, widths[i]);
+                const facing = padding(i, side);
+                const room = facing > 0
+                    ? Math.min(facing, BUTTON_GROUP_COMPRESSION_LIMIT)
+                    : BUTTON_GROUP_COMPRESSION_LIMIT;
+                const limit = Math.min(share, room, widths[i]);
                 if (limit <= 0)
                     return;
                 const el = buttons[i].element;
                 const to = widths[i] - limit;
                 el.style.minWidth = `${to}px`;
                 el.style.width = `${widths[i]}px`;
-                const facing = padding(i, side);
                 apply.push(() => {
                     el.style.width = `${to}px`;
                     if (facing > 0)

package/dist/components/dialog/api.js

@@ -1,113 +1,113 @@
 import { removeClass } from "../../core/dom/classes.js";
 import { hideFromTopLayer } from "../../core/dom/layer.js";
-export const withAPI = (options) => (component) => ({
-    ...component,
-    open() {
-        options.visibility.open();
-        return this;
-    },
-    close() {
-        options.visibility.close();
-        return this;
-    },
-    toggle(open) {
-        options.visibility.toggle(open);
-        return this;
-    },
-    isOpen() {
-        return options.visibility.isOpen();
-    },
-    setTitle(title) {
-        options.content.setTitle(title);
-        return this;
-    },
-    getTitle() {
-        return options.content.getTitle();
-    },
-    setSubtitle(subtitle) {
-        options.content.setSubtitle(subtitle);
-        return this;
-    },
-    getSubtitle() {
-        return options.content.getSubtitle();
-    },
-    setContent(content) {
-        options.content.setContent(content);
-        return this;
-    },
-    getContent() {
-        return options.content.getContent();
-    },
-    addButton(button) {
-        options.buttons.addButton(button);
-        return this;
-    },
-    removeButton(indexOrText) {
-        options.buttons.removeButton(indexOrText);
-        return this;
-    },
-    getButtons() {
-        return options.buttons.getButtons();
-    },
-    setFooterAlignment(alignment) {
-        options.buttons.setFooterAlignment(alignment);
-        return this;
-    },
-    toggleDivider(show) {
-        options.divider.toggleDivider(show);
-        return this;
-    },
-    hasDivider() {
-        return options.divider.hasDivider();
-    },
-    setSize(size) {
-        options.size.setSize(size);
-        return this;
-    },
-    on(event, handler) {
-        options.events.on(event, handler);
-        return this;
-    },
-    off(event, handler) {
-        options.events.off(event, handler);
-        return this;
-    },
-    getHeaderElement() {
-        return options.content.getHeaderElement();
-    },
-    getContentElement() {
-        return options.content.getContentElement();
-    },
-    getFooterElement() {
-        return options.content.getFooterElement();
-    },
-    confirm(options) {
-        if (component.confirm) {
+export const withAPI = (component) => {
+    const options = component;
+    return {
+        ...component,
+        open() {
+            options.visibility.open();
+            return this;
+        },
+        close() {
+            options.visibility.close();
+            return this;
+        },
+        toggle(open) {
+            options.visibility.toggle(open);
+            return this;
+        },
+        isOpen() {
+            return options.visibility.isOpen();
+        },
+        setTitle(title) {
+            options.content.setTitle(title);
+            return this;
+        },
+        getTitle() {
+            return options.content.getTitle();
+        },
+        setSubtitle(subtitle) {
+            options.content.setSubtitle(subtitle);
+            return this;
+        },
+        getSubtitle() {
+            return options.content.getSubtitle();
+        },
+        setContent(content) {
+            options.content.setContent(content);
+            return this;
+        },
+        getContent() {
+            return options.content.getContent();
+        },
+        addButton(button) {
+            options.buttons.addButton(button);
+            return this;
+        },
+        removeButton(indexOrText) {
+            options.buttons.removeButton(indexOrText);
+            return this;
+        },
+        getButtons() {
+            return options.buttons.getButtons();
+        },
+        setFooterAlignment(alignment) {
+            options.buttons.setFooterAlignment(alignment);
+            return this;
+        },
+        toggleDivider(show) {
+            options.divider.toggleDivider(show);
+            return this;
+        },
+        hasDivider() {
+            return options.divider.hasDivider();
+        },
+        setSize(size) {
+            options.size.setSize(size);
+            return this;
+        },
+        on(event, handler) {
+            options.on(event, handler);
+            return this;
+        },
+        off(event, handler) {
+            options.off(event, handler);
+            return this;
+        },
+        getHeaderElement() {
+            return options.content.getHeaderElement();
+        },
+        getContentElement() {
+            return options.content.getContentElement();
+        },
+        getFooterElement() {
+            return options.content.getFooterElement();
+        },
+        confirm(options) {
             return component.confirm(options || { message: "Are you sure?" });
-        }
-        return Promise.resolve(false);
-    },
-    destroy() {
-        const wasOpen = this.isOpen();
-        options.visibility.cancel();
-        if (wasOpen) {
-            const dialogVisibleClass = `${component.getClass("dialog")}--visible`;
-            const overlayVisibleClass = `${component.getClass("dialog__overlay")}--visible`;
-            removeClass(component.element, dialogVisibleClass);
-            removeClass(component.overlay, overlayVisibleClass);
-            hideFromTopLayer(component.element);
-            if (options.focus && options.focus.releaseFocus) {
-                options.focus.releaseFocus();
+        },
+        destroy() {
+            const wasOpen = this.isOpen();
+            options.visibility.cancel();
+            if (wasOpen) {
+                const dialogVisibleClass = `${component.getClass("dialog")}--visible`;
+                const overlayVisibleClass = `${component.getClass("dialog__overlay")}--visible`;
+                removeClass(component.element, dialogVisibleClass);
+                removeClass(component.overlay, overlayVisibleClass);
+                hideFromTopLayer(component.element);
+                if (options.focus && options.focus.releaseFocus) {
+                    options.focus.releaseFocus();
+                }
             }
-        }
-        options.lifecycle.destroy();
-        if (component.overlay && component.overlay.parentNode) {
-            component.overlay.parentNode.removeChild(component.overlay);
-        }
-        if (component.element.parentNode !== component.overlay) {
-            component.element.remove();
-        }
-    },
-    element: component.element,
-    overlay: component.overlay,
-});
+            options.lifecycle.destroy();
+            if (component.overlay && component.overlay.parentNode) {
+                component.overlay.parentNode.removeChild(component.overlay);
+            }
+            if (component.element.parentNode !== component.overlay) {
+                component.element.remove();
+            }
+        },
+        element: component.element,
+        overlay: component.overlay,
+    };
+};

package/dist/components/dialog/config.js

@@ -35,56 +35,4 @@ export const getElementConfig = (config) => {
         className: config.class
     });
 };
-export const getOverlayConfig = () => {
-    return {
-        tag: 'div',
-        attributes: {},
-        className: ''
-    };
-};
-export const getApiConfig = (comp) => ({
-    visibility: {
-        open: () => comp.visibility.open(),
-        close: () => comp.visibility.close(),
-        toggle: (visible) => comp.visibility.toggle(visible),
-        isOpen: () => comp.visibility.isOpen(),
-        cancel: () => comp.visibility.cancel()
-    },
-    content: {
-        setTitle: (title) => comp.content.setTitle(title),
-        getTitle: () => comp.content.getTitle(),
-        setSubtitle: (subtitle) => comp.content.setSubtitle(subtitle),
-        getSubtitle: () => comp.content.getSubtitle(),
-        setContent: (content) => comp.content.setContent(content),
-        getContent: () => comp.content.getContent(),
-        getHeaderElement: () => comp.content.getHeaderElement(),
-        getContentElement: () => comp.content.getContentElement(),
-        getFooterElement: () => comp.content.getFooterElement()
-    },
-    buttons: {
-        addButton: (button) => comp.buttons.addButton(button),
-        removeButton: (indexOrText) => comp.buttons.removeButton(indexOrText),
-        getButtons: () => comp.buttons.getButtons(),
-        setFooterAlignment: (alignment) => comp.buttons.setFooterAlignment(alignment)
-    },
-    focus: {
-        trapFocus: () => comp.focus.trapFocus(),
-        releaseFocus: () => comp.focus.releaseFocus()
-    },
-    size: {
-        setSize: (size) => comp.size.setSize(size)
-    },
-    divider: {
-        toggleDivider: (show) => comp.divider.toggleDivider(show),
-        hasDivider: () => comp.divider.hasDivider()
-    },
-    events: {
-        on: (event, handler) => comp.on(event, handler),
-        off: (event, handler) => comp.off(event, handler),
-        trigger: (event, data) => comp.emit(event, data)
-    },
-    lifecycle: {
-        destroy: () => comp.lifecycle.destroy()
-    }
-});
 export default defaultConfig;

package/dist/components/dialog/dialog.js

@@ -3,11 +3,11 @@ import { createBase, withElement } from "../../core/compose/component.js";
 import { withEvents, withLifecycle } from "../../core/compose/features/index.js";
 import { withStructure, withVisibility, withContent, withButtons, withSize, withConfirm, withDivider } from "./features.js";
 import { withAPI } from "./api.js";
-import { createBaseConfig, getElementConfig, getApiConfig } from "./config.js";
+import { createBaseConfig, getElementConfig } from "./config.js";
 const createDialog = (config = {}) => {
     const baseConfig = createBaseConfig(config);
     try {
-        const dialog = pipe(createBase, withEvents(), withElement(getElementConfig(baseConfig)), withStructure(baseConfig, () => dialog), withVisibility(() => dialog), withContent(), withButtons(() => dialog), withSize(), withDivider(), withConfirm(), withLifecycle(), comp => withAPI(getApiConfig(comp))(comp))(baseConfig);
+        const dialog = pipe(createBase, withEvents(), withElement(getElementConfig(baseConfig)), withStructure(baseConfig, () => dialog), withVisibility(() => dialog), withContent(), withButtons(() => dialog), withSize(), withDivider(), withConfirm(), withLifecycle(), withAPI)(baseConfig);
         if (baseConfig.on) {
             Object.entries(baseConfig.on).forEach(([event, handler]) => {
                 if (typeof handler === 'function') {

package/dist/components/dialog/features.js

@@ -1,9 +1,7 @@
-import { getOverlayConfig } from "./config.js";
 import createButton from "../button/index.js";
-import { createDivider } from "../divider/index.js";
 import { addClass, removeClass } from "../../core/dom/classes.js";
 import { setHTML } from "../../core/dom/html.js";
-import { activeElementOf, deepActiveElement, tabStops, wrapTab } from "../../core/dom/focus.js";
+import { deepActiveElement, tabStops, wrapTab } from "../../core/dom/focus.js";
 import { hideFromTopLayer, onModalEscape, onTopLayerClose, showInTopLayer } from "../../core/dom/layer.js";
 const DIALOG_EVENTS = {
     OPEN: "open",
@@ -18,17 +16,8 @@ export const withStructure = (config, getComponent) => (component) => {
     const uid = `${component.getClass("dialog")}-${++dialogCount}`;
     const titleId = `${uid}-title`;
     const contentId = `${uid}-content`;
-    const overlayConfig = getOverlayConfig();
-    const overlay = document.createElement(overlayConfig.tag || "div");
+    const overlay = document.createElement("div");
     overlay.classList.add(component.getClass("dialog__overlay"));
-    if (overlayConfig.attributes &&
-        typeof overlayConfig.attributes === "object") {
-        Object.entries(overlayConfig.attributes).forEach(([key, value]) => {
-            if (key && typeof key === "string" && value !== undefined) {
-                overlay.setAttribute(key, String(value));
-            }
-        });
-    }
     if (config.zIndex) {
         overlay.style.zIndex = String(config.zIndex);
     }
@@ -95,10 +84,8 @@ export const withStructure = (config, getComponent) => (component) => {
         return footer;
     };
     const createDividerElement = () => {
-        const divider = createDivider({
-            variant: "full-width",
-            class: component.getClass("dialog__divider"),
-        });
+        const divider = document.createElement("hr");
+        divider.classList.add(component.getClass("dialog__divider"));
         return divider;
     };
     const header = createHeader();
@@ -129,16 +116,16 @@ export const withStructure = (config, getComponent) => (component) => {
     let footerDivider = null;
     if (config.divider) {
         headerDivider = createDividerElement();
-        headerDivider.element.classList.add(component.getClass("dialog__header-divider"));
-        component.element.appendChild(headerDivider.element);
+        headerDivider.classList.add(component.getClass("dialog__header-divider"));
+        component.element.appendChild(headerDivider);
         if (footer) {
             footerDivider = createDividerElement();
-            footerDivider.element.classList.add(component.getClass("dialog__footer-divider"));
+            footerDivider.classList.add(component.getClass("dialog__footer-divider"));
         }
     }
     component.element.appendChild(content);
     if (footerDivider) {
-        component.element.appendChild(footerDivider.element);
+        component.element.appendChild(footerDivider);
     }
     if (footer) {
         component.element.appendChild(footer);
@@ -170,29 +157,25 @@ export const withDivider = () => (component) => {
         divider: {
             toggleDivider(show) {
                 if (show && !component.structure.headerDivider) {
-                    const headerDivider = createDivider({
-                        variant: "full-width",
-                        class: `${component.getClass("dialog__divider")} ${component.getClass("dialog__header-divider")}`,
-                    });
-                    component.element.insertBefore(headerDivider.element, component.structure.content);
+                    const headerDivider = document.createElement("hr");
+                    headerDivider.classList.add(component.getClass("dialog__divider"), component.getClass("dialog__header-divider"));
+                    component.element.insertBefore(headerDivider, component.structure.content);
                     component.structure.headerDivider = headerDivider;
                     if (component.structure.footer &&
                         !component.structure.footerDivider) {
-                        const footerDivider = createDivider({
-                            variant: "full-width",
-                            class: `${component.getClass("dialog__divider")} ${component.getClass("dialog__footer-divider")}`,
-                        });
-                        component.element.insertBefore(footerDivider.element, component.structure.footer);
+                        const footerDivider = document.createElement("hr");
+                        footerDivider.classList.add(component.getClass("dialog__divider"), component.getClass("dialog__footer-divider"));
+                        component.element.insertBefore(footerDivider, component.structure.footer);
                         component.structure.footerDivider = footerDivider;
                     }
                 }
                 else if (!show) {
                     if (component.structure.headerDivider) {
-                        component.structure.headerDivider.element.remove();
+                        component.structure.headerDivider.remove();
                         component.structure.headerDivider = null;
                     }
                     if (component.structure.footerDivider) {
-                        component.structure.footerDivider.element.remove();
+                        component.structure.footerDivider.remove();
                         component.structure.footerDivider = null;
                     }
                 }
@@ -251,39 +234,42 @@ export const withVisibility = (getComponent) => (component) => {
     let showTimer;
     let afterOpenTimer;
     let afterCloseTimer;
+    let afterOpenWaiting = false;
     const openDuration = component.config.animationDuration ?? 500;
     const closeDuration = component.config.animationDuration ?? 150;
     const top = component.config.layer === "top";
     const scrim = top ? component.element : component.overlay;
-    const focusableElements = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
     let previouslyFocusedElement = null;
     let mouseDownOnOverlay = false;
     const inerted = [];
     let scrollLock = null;
-    const focusable = () => Array.from(component.element.querySelectorAll(focusableElements)).filter((el) => !el.hasAttribute("disabled") &&
-        el.getAttribute("aria-hidden") !== "true" &&
-        (el.offsetWidth > 0 || el.offsetHeight > 0 || el === activeElementOf(el)));
-    function handleTabKey(e) {
-        if (e.key !== "Tab")
+    let focusFrame;
+    let focusView;
+    let focusRequest = 0;
+    let focusPending = false;
+    const cancelFocusFrame = () => {
+        focusRequest += 1;
+        focusPending = false;
+        if (focusFrame !== undefined) {
+            focusView?.cancelAnimationFrame(focusFrame);
+            focusFrame = undefined;
+            focusView = undefined;
+        }
+    };
+    const emitAfterOpen = () => {
+        afterOpenWaiting = false;
+        if (!opened || typeof component.emit !== "function")
             return;
-        const elements = focusable();
-        if (elements.length === 0) {
-            e.preventDefault();
-            component.element.focus();
+        component.emit(DIALOG_EVENTS.AFTER_OPEN, { dialog: getComponent() });
+    };
+    const afterOpenDue = () => {
+        afterOpenTimer = undefined;
+        if (focusPending) {
+            afterOpenWaiting = true;
             return;
         }
-        const first = elements[0];
-        const last = elements[elements.length - 1];
-        const active = activeElementOf(component.element);
-        if (e.shiftKey && (active === first || !component.element.contains(active))) {
-            last.focus();
-            e.preventDefault();
-        }
-        else if (!e.shiftKey && active === last) {
-            first.focus();
-            e.preventDefault();
-        }
-    }
+        emitAfterOpen();
+    };
     const inertBackground = () => {
         if (component.config.modal === false)
             return;
@@ -313,20 +299,76 @@ export const withVisibility = (getComponent) => (component) => {
             scrollLock = null;
         }
     };
+    let containerPosition = null;
+    const unscopeScrim = () => {
+        removeClass(component.overlay, `${component.getClass("dialog__overlay")}--contained`);
+        if (containerPosition === null)
+            return;
+        component.structure.container.style.position = containerPosition;
+        containerPosition = null;
+    };
+    const scopeScrim = () => {
+        const container = component.structure.container;
+        if (top || container === document.body)
+            return;
+        if (getComputedStyle(container).position === "static") {
+            containerPosition ?? (containerPosition = container.style.position);
+            container.style.position = "relative";
+        }
+        addClass(component.overlay, `${component.getClass("dialog__overlay")}--contained`);
+        if (!container.clientHeight ||
+            container.clientWidth < component.element.offsetWidth ||
+            container.clientHeight < component.element.offsetHeight) {
+            unscopeScrim();
+        }
+    };
     const handleWrap = (e) => wrapTab(component.element, e);
+    const focusWhenVisible = (target) => {
+        const view = target.ownerDocument.defaultView;
+        if (!view || typeof view.requestAnimationFrame !== "function") {
+            target.focus();
+            focusPending = false;
+            if (afterOpenWaiting)
+                emitAfterOpen();
+            return;
+        }
+        cancelFocusFrame();
+        const request = focusRequest;
+        const settle = () => {
+            focusFrame = undefined;
+            if (request !== focusRequest)
+                return;
+            if (!opened || !target.isConnected) {
+                focusPending = false;
+                if (afterOpenWaiting)
+                    emitAfterOpen();
+                return;
+            }
+            if (view.getComputedStyle(target).visibility !== "hidden") {
+                target.focus();
+                focusPending = false;
+                if (afterOpenWaiting)
+                    emitAfterOpen();
+                return;
+            }
+            focusPending = true;
+            focusFrame = view.requestAnimationFrame(settle);
+            focusView = view;
+        };
+        settle();
+    };
     const trapFocus = () => {
         inertBackground();
         if (component.config.autofocus !== false) {
             const requested = component.element.querySelector("[autofocus]");
-            const target = requested || (top ? tabStops(component.element) : focusable())[0] || component.element;
-            target.focus();
+            const target = requested || tabStops(component.element)[0] || component.element;
+            focusWhenVisible(target);
         }
         if (component.config.trapFocus !== false) {
-            component.element.addEventListener("keydown", top ? handleWrap : handleTabKey);
+            component.element.addEventListener("keydown", handleWrap);
         }
     };
     const releaseFocus = () => {
-        component.element.removeEventListener("keydown", handleTabKey);
         component.element.removeEventListener("keydown", handleWrap);
         releaseBackground();
         if (previouslyFocusedElement) {
@@ -390,6 +432,7 @@ export const withVisibility = (getComponent) => (component) => {
             component.element.setAttribute("open", "");
         }
     };
+    scopeScrim();
     if (isOpen) {
         if (top)
             showModal();
@@ -417,6 +460,8 @@ export const withVisibility = (getComponent) => (component) => {
                 return;
             opened = true;
             clearTimeout(afterCloseTimer);
+            afterOpenWaiting = false;
+            focusPending = false;
             if (top) {
                 showModal();
                 void component.element.offsetWidth;
@@ -426,9 +471,7 @@ export const withVisibility = (getComponent) => (component) => {
                 component.emit(DIALOG_EVENTS.OPEN, { dialog: getComponent() });
                 if (!opened)
                     return;
-                afterOpenTimer = setTimeout(() => {
-                    component.emit(DIALOG_EVENTS.AFTER_OPEN, { dialog: getComponent() });
-                }, openDuration);
+                afterOpenTimer = setTimeout(afterOpenDue, openDuration);
                 return;
             }
             if (component.element.parentNode !== component.overlay) {
@@ -438,6 +481,7 @@ export const withVisibility = (getComponent) => (component) => {
                 const container = component.structure.container || document.body;
                 container.appendChild(component.overlay);
             }
+            scopeScrim();
             setupEvents();
             if (typeof component.emit === "function") {
                 component.emit(DIALOG_EVENTS.OPEN, { dialog: getComponent() });
@@ -449,9 +493,7 @@ export const withVisibility = (getComponent) => (component) => {
                 addClass(component.element, `${component.getClass("dialog")}--visible`);
                 trapFocus();
                 if (typeof component.emit === "function") {
-                    afterOpenTimer = setTimeout(() => {
-                        component.emit(DIALOG_EVENTS.AFTER_OPEN, { dialog: getComponent() });
-                    }, openDuration);
+                    afterOpenTimer = setTimeout(afterOpenDue, openDuration);
                 }
             }, 10);
         },
@@ -474,6 +516,8 @@ export const withVisibility = (getComponent) => (component) => {
             opened = false;
             clearTimeout(showTimer);
             clearTimeout(afterOpenTimer);
+            afterOpenWaiting = false;
+            cancelFocusFrame();
             const dialogVisibleClass = `${component.getClass("dialog")}--visible`;
             const overlayVisibleClass = `${component.getClass("dialog__overlay")}--visible`;
             removeClass(component.element, dialogVisibleClass);
@@ -491,6 +535,7 @@ export const withVisibility = (getComponent) => (component) => {
                 if (!top && component.overlay && component.overlay.parentNode) {
                     component.overlay.parentNode.removeChild(component.overlay);
                 }
+                unscopeScrim();
                 if (typeof component.emit === "function") {
                     component.emit(DIALOG_EVENTS.AFTER_CLOSE, { dialog: getComponent() });
                 }
@@ -515,7 +560,10 @@ export const withVisibility = (getComponent) => (component) => {
             clearTimeout(showTimer);
             clearTimeout(afterOpenTimer);
             clearTimeout(afterCloseTimer);
+            afterOpenWaiting = false;
+            cancelFocusFrame();
             cleanupEvents();
+            unscopeScrim();
         },
     };
     if (component && component.on) {