mtrl 0.8.0-next.38 → 0.8.0-next.39

package/dist/components/drawer/config.js

@@ -19,9 +19,8 @@ export const getElementConfig = (config) => {
     else {
         attributes.role = "navigation";
     }
-    if (config.ariaLabel) {
-        attributes["aria-label"] = config.ariaLabel;
-    }
+    attributes["aria-label"] = config.ariaLabel || config.headline || "Navigation";
+    attributes.tabindex = "-1";
     return createElementConfig(config, {
         tag: "aside",
         attributes,

package/dist/components/drawer/features/headline.js

@@ -8,12 +8,15 @@ export const withHeadline = (config) => (component) => {
     }
     const setHeadline = (text) => {
         headlineText = text;
+        if (!config.ariaLabel)
+            component.element.setAttribute("aria-label", text || "Navigation");
         if (text) {
             if (!headlineElement) {
                 headlineElement = document.createElement("div");
                 headlineElement.className = component.getClass("drawer__headline");
             }
             headlineElement.textContent = text;
+            component.element.querySelector(`.${component.getClass("drawer__sheet")}`)?.prepend(headlineElement);
         }
         else if (headlineElement && headlineElement.parentNode) {
             headlineElement.parentNode.removeChild(headlineElement);

package/dist/components/drawer/features/items.js

@@ -2,8 +2,8 @@ import { DRAWER_EVENTS } from "../constants.js";
 const createItemElement = (item, getClass) => {
     const el = document.createElement("button");
     el.className = getClass("drawer__item");
-    el.setAttribute("role", "tab");
-    el.setAttribute("tabindex", "-1");
+    el.type = "button";
+    el.setAttribute("tabindex", item.disabled ? "-1" : "0");
     if (item.id) {
         el.dataset.id = item.id;
     }
@@ -18,6 +18,7 @@ const createItemElement = (item, getClass) => {
         const iconEl = document.createElement("span");
         iconEl.className = getClass("drawer__item-icon");
         iconEl.innerHTML = item.icon;
+        iconEl.setAttribute("aria-hidden", "true");
         el.appendChild(iconEl);
     }
     if (item.label) {
@@ -34,11 +35,7 @@ const createItemElement = (item, getClass) => {
     }
     if (item.active) {
         el.classList.add(`${getClass("drawer__item")}--active`);
-        el.setAttribute("aria-selected", "true");
-        el.setAttribute("tabindex", "0");
-    }
-    else {
-        el.setAttribute("aria-selected", "false");
+        el.setAttribute("aria-current", "page");
     }
     return el;
 };
@@ -58,7 +55,7 @@ export const withItems = (config) => (component) => {
     let currentItems = config.items || [];
     let activeId = null;
     let itemsContainer = null;
-    const initialActive = currentItems.find((item) => item.type !== "divider" && item.type !== "section" && item.active);
+    const initialActive = currentItems.find((item) => item.type !== "divider" && item.type !== "section" && item.active && !item.disabled);
     if (initialActive?.id) {
         activeId = initialActive.id;
     }
@@ -77,7 +74,7 @@ export const withItems = (config) => (component) => {
                 itemsContainer.appendChild(createSectionElement(item, component.getClass));
                 return;
             }
-            const itemEl = createItemElement(item, component.getClass);
+            const itemEl = createItemElement({ ...item, active: !!activeId && item.id === activeId }, component.getClass);
             itemEl.dataset.navIndex = String(navIndex);
             navIndex++;
             itemEl.addEventListener("click", (e) => {
@@ -97,39 +94,23 @@ export const withItems = (config) => (component) => {
             });
             itemsContainer.appendChild(itemEl);
         });
-        if (!activeId) {
-            const firstItem = itemsContainer.querySelector(`.${component.getClass("drawer__item")}`);
-            if (firstItem) {
-                firstItem.setAttribute("tabindex", "0");
-            }
-        }
     };
     const setActive = (id) => {
         if (!itemsContainer)
             return;
         const activeClass = `${component.getClass("drawer__item")}--active`;
-        const allItems = itemsContainer.querySelectorAll(`.${component.getClass("drawer__item")}`);
-        allItems.forEach((el) => {
-            el.classList.remove(activeClass);
-            el.setAttribute("aria-selected", "false");
-            el.setAttribute("tabindex", "-1");
+        const allItems = [...itemsContainer.querySelectorAll(`.${component.getClass("drawer__item")}`)];
+        const target = allItems.find(element => element.dataset.id === id && !element.hasAttribute("disabled"));
+        if (id && !target)
+            return;
+        allItems.forEach(element => {
+            element.classList.toggle(activeClass, element === target);
+            if (element === target)
+                element.setAttribute("aria-current", "page");
+            else
+                element.removeAttribute("aria-current");
         });
-        if (!id) {
-            activeId = null;
-            const firstItem = itemsContainer.querySelector(`.${component.getClass("drawer__item")}`);
-            if (firstItem) {
-                firstItem.setAttribute("tabindex", "0");
-            }
-        }
-        else {
-            const targetItem = itemsContainer.querySelector(`[data-id="${id}"]`);
-            if (targetItem) {
-                targetItem.classList.add(activeClass);
-                targetItem.setAttribute("aria-selected", "true");
-                targetItem.setAttribute("tabindex", "0");
-                activeId = id;
-            }
-        }
+        activeId = target ? id : null;
         currentItems = currentItems.map((item) => ({
             ...item,
             active: item.id === id,
@@ -138,7 +119,7 @@ export const withItems = (config) => (component) => {
     const getActive = () => activeId;
     const setItems = (items) => {
         currentItems = items;
-        const active = items.find((item) => item.type !== "divider" && item.type !== "section" && item.active);
+        const active = items.find((item) => item.type !== "divider" && item.type !== "section" && item.active && !item.disabled);
         activeId = active?.id || null;
         renderItems();
     };
@@ -146,7 +127,7 @@ export const withItems = (config) => (component) => {
     const setBadge = (id, badge) => {
         if (!itemsContainer)
             return;
-        const itemEl = itemsContainer.querySelector(`[data-id="${id}"]`);
+        const itemEl = [...itemsContainer.querySelectorAll("[data-id]")].find(element => element.dataset.id === id);
         if (!itemEl)
             return;
         let badgeEl = itemEl.querySelector(`.${component.getClass("drawer__item-badge")}`);
@@ -199,15 +180,11 @@ export const withItems = (config) => (component) => {
                 return;
         }
         if (nextIndex >= 0 && nextIndex < items.length) {
-            items.forEach((item) => item.setAttribute("tabindex", "-1"));
-            items[nextIndex].setAttribute("tabindex", "0");
             items[nextIndex].focus();
         }
     };
     itemsContainer = document.createElement("div");
     itemsContainer.className = component.getClass("drawer__items");
-    itemsContainer.setAttribute("role", "tablist");
-    itemsContainer.setAttribute("aria-orientation", "vertical");
     itemsContainer.addEventListener("keydown", handleKeydown);
     renderItems();
     return {

package/dist/components/drawer/features/state.d.ts

@@ -1,18 +1,10 @@
 import { DrawerConfig } from "../types.js";
-/**
- * Component shape expected by withState
- */
 interface StateBaseComponent {
     element: HTMLElement;
     getClass: (name: string) => string;
     emit: (event: string, data?: unknown) => void;
     [key: string]: unknown;
 }
-/**
- * Adds open/close state management, scrim, and keyboard dismiss to the drawer
- *
- * @param config - Drawer configuration
- * @returns Component enhancer function
- */
+/** Standard drawers remain in the page; modal drawers own focus and background interaction. */
 export declare const withState: (config: DrawerConfig) => (component: StateBaseComponent) => StateBaseComponent;
 export {};

package/dist/components/drawer/features/state.js

@@ -1,95 +1,170 @@
 import { DRAWER_EVENTS } from "../constants.js";
+const modals = new WeakMap();
+function updateBackground(doc, state) {
+    state.inerted.forEach(element => element.removeAttribute("inert"));
+    state.inerted = [];
+    let branch = state.roots.at(-1);
+    while (branch?.parentElement) {
+        for (const sibling of branch.parentElement.children) {
+            if (sibling !== branch && !sibling.hasAttribute("inert")) {
+                sibling.setAttribute("inert", "");
+                state.inerted.push(sibling);
+            }
+        }
+        branch = branch.parentElement;
+        if (branch === doc.body)
+            break;
+    }
+}
+function acquireModal(root) {
+    const doc = root.ownerDocument;
+    let state = modals.get(doc);
+    if (!state) {
+        state = { roots: [], inerted: [], overflow: doc.body.style.overflow, priority: doc.body.style.getPropertyPriority("overflow") };
+        modals.set(doc, state);
+        doc.body.style.setProperty("overflow", "hidden");
+    }
+    if (!state.roots.includes(root))
+        state.roots.push(root);
+    updateBackground(doc, state);
+}
+function releaseModal(root) {
+    const doc = root.ownerDocument;
+    const state = modals.get(doc);
+    if (!state || !state.roots.includes(root))
+        return;
+    state.roots = state.roots.filter(element => element !== root);
+    updateBackground(doc, state);
+    if (!state.roots.length) {
+        doc.body.style.setProperty("overflow", state.overflow, state.priority);
+        modals.delete(doc);
+    }
+}
 export const withState = (config) => (component) => {
+    const root = component.element;
+    const doc = root.ownerDocument;
     const isModal = config.variant === "modal";
     const dismissible = config.dismissible !== false;
     let isOpen = config.open === true;
-    let scrimElement = null;
-    if (isModal) {
-        scrimElement = document.createElement("div");
+    let destroyed = false;
+    let frame = null;
+    let previousFocus = null;
+    const scrimElement = isModal ? doc.createElement("div") : null;
+    if (scrimElement) {
         scrimElement.className = component.getClass("drawer__scrim");
-        if (dismissible) {
-            scrimElement.addEventListener("click", () => {
-                close();
-            });
-        }
+        scrimElement.setAttribute("aria-hidden", "true");
+        if (dismissible)
+            scrimElement.addEventListener("click", close);
     }
-    const handleKeydown = (e) => {
-        if (e.key === "Escape" && isOpen && isModal && dismissible) {
-            e.preventDefault();
-            close();
-        }
+    const cancelFocus = () => {
+        if (frame !== null)
+            cancelAnimationFrame(frame);
+        frame = null;
     };
-    if (isModal) {
-        document.addEventListener("keydown", handleKeydown);
-    }
-    function open() {
-        if (isOpen)
+    const focusable = () => [...root.querySelectorAll('button, a[href], input, select, textarea, [tabindex]')].filter(element => {
+        const style = doc.defaultView.getComputedStyle(element);
+        return element.tabIndex >= 0 && !element.matches(':disabled, [aria-disabled="true"]') && !element.closest('[inert], [hidden]') && style.display !== 'none' && style.visibility !== 'hidden';
+    });
+    const focusInside = () => {
+        const items = focusable();
+        (items.find(element => element.getAttribute("aria-current") === "page") || items[0] || root).focus();
+    };
+    const isTopModal = () => modals.get(doc)?.roots.at(-1) === root;
+    function handleKeydown(event) {
+        if (!isOpen || !isTopModal() || event.defaultPrevented)
             return;
-        isOpen = true;
-        component.element.classList.add(`${component.getClass("drawer")}--open`);
-        if (isModal && scrimElement) {
-            scrimElement.classList.add(`${component.getClass("drawer__scrim")}--visible`);
-            document.body.style.overflow = "hidden";
+        if (event.key === "Escape" && dismissible) {
+            event.preventDefault();
+            close();
         }
-        requestAnimationFrame(() => {
-            const firstItem = component.element.querySelector(`.${component.getClass("drawer__item")}[tabindex="0"]`);
-            if (firstItem) {
-                firstItem.focus();
+        else if (event.key === "Tab") {
+            const items = focusable();
+            const first = items[0], last = items.at(-1);
+            if (!first) {
+                event.preventDefault();
+                root.focus();
+            }
+            else if (event.shiftKey && (doc.activeElement === first || doc.activeElement === root || !root.contains(doc.activeElement))) {
+                event.preventDefault();
+                last.focus();
             }
-            else {
-                component.element.focus();
+            else if (!event.shiftKey && (doc.activeElement === last || doc.activeElement === root || !root.contains(doc.activeElement))) {
+                event.preventDefault();
+                first.focus();
             }
+        }
+    }
+    function handleFocus(event) {
+        if (isOpen && isTopModal() && !root.contains(event.target))
+            focusInside();
+    }
+    const synchronize = () => {
+        root.classList.toggle(`${component.getClass("drawer")}--open`, isOpen);
+        root.toggleAttribute("inert", !isOpen);
+        root.setAttribute("aria-hidden", String(!isOpen));
+        scrimElement?.classList.toggle(`${component.getClass("drawer__scrim")}--visible`, isOpen);
+    };
+    const activate = () => {
+        if (!isModal)
+            return;
+        previousFocus = doc.activeElement;
+        if (root.isConnected)
+            acquireModal(root);
+        doc.addEventListener("keydown", handleKeydown);
+        doc.addEventListener("focusin", handleFocus);
+        frame = requestAnimationFrame(() => {
+            frame = null;
+            if (destroyed || !isOpen || !root.isConnected)
+                return;
+            acquireModal(root);
+            if (isTopModal())
+                focusInside();
         });
+    };
+    const deactivate = () => {
+        cancelFocus();
+        doc.removeEventListener("keydown", handleKeydown);
+        doc.removeEventListener("focusin", handleFocus);
+        const restore = isTopModal();
+        releaseModal(root);
+        if (restore && previousFocus?.isConnected && !previousFocus.closest('[inert]'))
+            previousFocus.focus();
+        previousFocus = null;
+    };
+    function open() {
+        if (destroyed || isOpen)
+            return;
+        isOpen = true;
+        synchronize();
+        activate();
         component.emit(DRAWER_EVENTS.OPEN);
-        if (config.onOpen) {
-            config.onOpen();
-        }
+        config.onOpen?.();
     }
     function close() {
-        if (!isOpen)
+        if (destroyed || !isOpen)
             return;
         isOpen = false;
-        component.element.classList.remove(`${component.getClass("drawer")}--open`);
-        if (isModal && scrimElement) {
-            scrimElement.classList.remove(`${component.getClass("drawer__scrim")}--visible`);
-            document.body.style.overflow = "";
-        }
+        deactivate();
+        synchronize();
         component.emit(DRAWER_EVENTS.CLOSE);
-        if (config.onClose) {
-            config.onClose();
-        }
-    }
-    function toggle() {
-        if (isOpen) {
-            close();
-        }
-        else {
-            open();
-        }
-    }
-    if (isOpen) {
-        component.element.classList.add(`${component.getClass("drawer")}--open`);
-        if (isModal && scrimElement) {
-            scrimElement.classList.add(`${component.getClass("drawer__scrim")}--visible`);
-        }
+        config.onClose?.();
     }
+    synchronize();
+    if (isOpen)
+        activate();
     return {
         ...component,
         scrimElement,
-        drawerState: {
-            open,
-            close,
-            toggle,
-            isOpen: () => isOpen,
-        },
+        drawerState: { open, close, toggle: () => isOpen ? close() : open(), isOpen: () => isOpen },
         _stateCleanup: () => {
-            if (isModal) {
-                document.removeEventListener("keydown", handleKeydown);
-                if (scrimElement && scrimElement.parentNode) {
-                    scrimElement.parentNode.removeChild(scrimElement);
-                }
-                document.body.style.overflow = "";
-            }
+            if (destroyed)
+                return;
+            destroyed = true;
+            isOpen = false;
+            deactivate();
+            synchronize();
+            scrimElement?.removeEventListener("click", close);
+            scrimElement?.remove();
         },
     };
 };