mtrl 0.9.5 → 0.9.8

package/dist/components/datepicker/datepicker.js

@@ -2,7 +2,7 @@ import { PREFIX } from "../../core/config.js";
 import { pipe } from "../../core/compose/index.js";
 import { createBase, withElement } from "../../core/compose/component.js";
 import { withEvents, withDisabled, withLifecycle, } from "../../core/compose/features/index.js";
-import { withAPI } from "./api.js";
+import { withAPI, isReadyForApi } from "./api.js";
 import { createBaseConfig, getContainerConfig, getInputConfig, getCalendarConfig, getApiConfig, } from "./config.js";
 import { formatDate, parseDate } from "./utils.js";
 import { renderCalendar } from "./render.js";
@@ -45,7 +45,7 @@ const createDatePicker = (config = {}) => {
             updateCalendar() {
                 if (!this.isOpen || !this.calendarElement)
                     return;
-                this.calendarElement.innerHTML = "";
+                this.calendarElement.replaceChildren();
                 const calendar = renderCalendar(this, (...[event, data]) => {
                     switch (event) {
                         case "dateSelected":
@@ -234,6 +234,9 @@ const createDatePicker = (config = {}) => {
             }
         };
         document.addEventListener("click", state.outsideClickHandler);
+        if (!isReadyForApi(state)) {
+            throw new Error("DatePicker input or outside-click handler is missing");
+        }
         return withAPI(state, getApiConfig(component))(component);
     }
     catch (error) {

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

@@ -349,6 +349,20 @@ export interface DatePickerState {
     nextYear(): void;
     render(): void;
 }
+/**
+ * State as it reaches the API step.
+ *
+ * `DatePickerState` marks these loose because the state object is built before
+ * the DOM is. By the time `withAPI` runs, the factory has created the input
+ * (throwing if it is not one) and installed the outside-click handler, so both
+ * are there — and the public `input` is declared non-optional.
+ * @category Components
+ * @internal
+ */
+export type DatePickerApiState = DatePickerState & {
+    input: HTMLInputElement;
+    outsideClickHandler: EventListener;
+};
 /**
  * Events the calendar renderer emits, each with its payload
  * @internal

package/dist/components/datepicker/utils.js

@@ -75,13 +75,13 @@ export const isDateInRange = (date, startDate, endDate) => {
 export const generateCalendarDates = (year, month, selectedDate = null, rangeEndDate = null, minDate = null, maxDate = null) => {
     const today = new Date();
     today.setHours(0, 0, 0, 0);
+    const outOfRange = (date) => Boolean((minDate && date < minDate) || (maxDate && date > maxDate));
     const result = [];
     const firstDay = getFirstDayOfMonth(year, month);
     const daysInPrevMonth = getDaysInMonth(year, month - 1);
     for (let i = firstDay - 1; i >= 0; i--) {
         const date = new Date(year, month - 1, daysInPrevMonth - i);
-        const isDisabled = (minDate && date < minDate) ||
-            (maxDate && date > maxDate);
+        const isDisabled = outOfRange(date);
         result.push({
             date,
             day: date.getDate(),
@@ -95,8 +95,7 @@ export const generateCalendarDates = (year, month, selectedDate = null, rangeEnd
     for (let i = 1; i <= daysInMonth; i++) {
         const date = new Date(year, month, i);
         const isSelected = selectedDate ? isSameDay(date, selectedDate) : false;
-        const isDisabled = (minDate && date < minDate) ||
-            (maxDate && date > maxDate);
+        const isDisabled = outOfRange(date);
         const calendarDate = {
             date,
             day: i,
@@ -117,8 +116,7 @@ export const generateCalendarDates = (year, month, selectedDate = null, rangeEnd
     const remainingDays = totalDaysNeeded - result.length;
     for (let i = 1; i <= remainingDays; i++) {
         const date = new Date(year, month + 1, i);
-        const isDisabled = (minDate && date < minDate) ||
-            (maxDate && date > maxDate);
+        const isDisabled = outOfRange(date);
         result.push({
             date,
             day: i,

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

@@ -2,6 +2,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";
 const DIALOG_EVENTS = {
     OPEN: "open",
     CLOSE: "close",
@@ -53,12 +54,12 @@ export const withStructure = (config) => (component) => {
             const closeButton = document.createElement("button");
             closeButton.classList.add(component.getClass("dialog-header-close"));
             closeButton.setAttribute("aria-label", "Close dialog");
-            closeButton.innerHTML = `
+            setHTML(closeButton, `
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <line x1="18" y1="6" x2="6" y2="18"></line>
           <line x1="6" y1="6" x2="18" y2="18"></line>
         </svg>
-      `;
+      `);
             closeButton.addEventListener("click", (e) => {
                 e.preventDefault();
                 e.stopPropagation();
@@ -75,7 +76,7 @@ export const withStructure = (config) => (component) => {
         content.classList.add(component.getClass("dialog-content"));
         content.id = contentId;
         if (config.content) {
-            content.innerHTML = config.content;
+            setHTML(content, config.content);
         }
         return content;
     };
@@ -236,7 +237,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 +372,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 +381,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 +416,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) {
@@ -487,7 +489,7 @@ export const withContent = () => (component) => {
                 return subtitleElement ? subtitleElement.textContent || "" : "";
             },
             setContent(content) {
-                contentElement.innerHTML = content;
+                setHTML(contentElement, content);
             },
             getContent() {
                 return contentElement.innerHTML;

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/drawer/features/items.js

@@ -1,5 +1,6 @@
 import { DRAWER_EVENTS } from "../constants.js";
 import { createRipple, } from "../../../core/compose/features/ripple.js";
+import { setHTML } from "../../../core/dom/html.js";
 const createItemElement = (item, getClass) => {
     const el = document.createElement("button");
     el.className = getClass("drawer__item");
@@ -18,7 +19,7 @@ const createItemElement = (item, getClass) => {
     if (item.icon) {
         const iconEl = document.createElement("span");
         iconEl.className = getClass("drawer__item-icon");
-        iconEl.innerHTML = item.icon;
+        setHTML(iconEl, item.icon);
         iconEl.setAttribute("aria-hidden", "true");
         el.appendChild(iconEl);
     }
@@ -70,7 +71,7 @@ export const withItems = (config) => (component) => {
         if (!itemsContainer)
             return;
         unmountRipples();
-        itemsContainer.innerHTML = "";
+        itemsContainer.replaceChildren();
         let navIndex = 0;
         currentItems.forEach((item) => {
             const type = item.type || "item";

package/dist/components/list/features/renderer.js

@@ -1,4 +1,5 @@
 import { LIST_CLASSES, LIST_EVENTS } from "../constants.js";
+import { setHTML } from "../../../core/dom/html.js";
 export const withRenderer = (config) => component => {
     if (!component.element) {
         console.warn('Cannot initialize list renderer: missing element');
@@ -24,9 +25,9 @@ export const withRenderer = (config) => component => {
         return element;
     }
     const renderAllItems = () => {
-        listContainer.innerHTML = '';
+        listContainer.replaceChildren();
         if (!items || items.length === 0) {
-            listContainer.innerHTML = '<div class="mtrl-list-empty">No items</div>';
+            setHTML(listContainer, '<div class="mtrl-list-empty">No items</div>');
             return;
         }
         const fragment = document.createDocumentFragment();
@@ -84,7 +85,7 @@ export const withRenderer = (config) => component => {
     if (component.lifecycle?.destroy) {
         const originalDestroy = component.lifecycle.destroy;
         component.lifecycle.destroy = () => {
-            listContainer.innerHTML = '';
+            listContainer.replaceChildren();
             originalDestroy();
         };
     }

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

@@ -15,7 +15,7 @@ interface ApiOptions {
         getItems: () => MenuContent[];
         setPosition: (position: MenuPosition) => void;
         getPosition: () => MenuPosition;
-        setSelected: (itemId: string) => void;
+        setSelected: (itemId: string | null) => void;
         getSelected: () => string | null;
     };
     opener: {

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

@@ -1,11 +1,17 @@
 import { createMenuTasks } from "./tasks.js";
 import { menuOpened, menuClosed } from "./registry.js";
+import { setHTML } from "../../../core/dom/html.js";
 const withController = (config) => (component) => {
     if (!component.element) {
         console.warn("Cannot initialize menu controller: missing element");
         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 +57,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) {
@@ -79,7 +91,7 @@ const withController = (config) => (component) => {
         if (item.icon) {
             const iconElement = document.createElement("span");
             iconElement.className = `${component.getClass("menu-item-icon")}`;
-            iconElement.innerHTML = item.icon;
+            setHTML(iconElement, item.icon);
             contentContainer.appendChild(iconElement);
         }
         const textElement = document.createElement("span");
@@ -144,7 +156,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");
@@ -170,7 +184,7 @@ const withController = (config) => (component) => {
                 target.appendChild(createMenuItem(item, index));
             }
         });
-        component.element.innerHTML = "";
+        component.element.replaceChildren();
         component.element.appendChild(menuList);
     };
     const findItemById = (id) => {
@@ -179,7 +193,7 @@ const withController = (config) => (component) => {
                 return item;
             }
             if ("submenu" in item && Array.isArray(item.submenu)) {
-                for (const subItem of item.submenu) {
+                for (const subItem of item.submenu ?? []) {
                     if ("id" in subItem && subItem.id === id) {
                         return subItem;
                     }
@@ -256,31 +270,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 +447,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 +469,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/keyboard.js

@@ -39,10 +39,12 @@ export const createKeyboardNavigation = (component) => {
         if (!parentId)
             return null;
         const level = parseInt(menuElement.getAttribute("data-level") || "1", 10);
+        const owner = component.element.id;
+        const ownerFilter = owner ? `[data-owner="${owner}"]` : "";
         const scope = level <= 1
             ? component.element
-            : document.querySelector(`.${component.getClass("menu--submenu")}[data-level="${level - 1}"]`);
-        return ((scope ?? document).querySelector(`.${component.getClass("menu-item")}[data-id="${parentId}"]`) ?? null);
+            : document.querySelector(`.${component.getClass("menu--submenu")}${ownerFilter}[data-level="${level - 1}"]`);
+        return ((scope ?? component.element).querySelector(`.${component.getClass("menu-item")}[data-id="${parentId}"]`) ?? null);
     };
     const menuItems = (menuElement) => Array.from(menuElement.querySelectorAll(`.${component.getClass("menu-item")}`));
     const resetTypeahead = () => {
@@ -173,10 +175,10 @@ export const createKeyboardNavigation = (component) => {
                     if (focusedItemIndex >= 0 &&
                         items[focusedItemIndex].classList.contains(`${component.getClass("menu-item--submenu")}`)) {
                         const itemElement = items[focusedItemIndex];
-                        const itemIndex = parseInt(itemElement.getAttribute("data-index"), 10);
+                        const itemIndex = parseInt(itemElement.getAttribute("data-index") ?? "0", 10);
                         const parentMenu = itemElement.closest(`.${component.getClass("menu--submenu")}`);
                         const parentItemId = parentMenu?.getAttribute("data-parent-item");
-                        const parentItem = actions.findItemById(parentItemId);
+                        const parentItem = parentItemId ? actions.findItemById(parentItemId) : null;
                         if (parentItem && parentItem.submenu) {
                             const itemData = parentItem.submenu[itemIndex];
                             actions.handleNestedSubmenuClick(itemData, itemIndex, itemElement);
@@ -187,7 +189,7 @@ export const createKeyboardNavigation = (component) => {
                     if (focusedItemIndex >= 0 &&
                         items[focusedItemIndex].classList.contains(`${component.getClass("menu-item--submenu")}`)) {
                         const itemElement = items[focusedItemIndex];
-                        const itemIndex = parseInt(itemElement.getAttribute("data-index"), 10);
+                        const itemIndex = parseInt(itemElement.getAttribute("data-index") ?? "0", 10);
                         const itemData = state.items[itemIndex];
                         actions.handleSubmenuClick(itemData, itemIndex, itemElement);
                     }

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;
@@ -126,23 +128,27 @@ const withOpener = (config) => (component) => {
     const restoreFocusToOpener = () => {
         if (!state.openerElement)
             return;
-        if (state.openerComponent &&
-            typeof state.openerComponent.focus === "function") {
+        const openerComponent = state.openerComponent;
+        if (openerComponent && typeof openerComponent.focus === "function") {
             tasks.requestAnimationFrame(() => {
-                state.openerComponent.focus();
+                openerComponent.focus();
             });
             return;
         }
-        if (state.openerComponent &&
-            "input" in state.openerComponent &&
-            state.openerComponent.input instanceof HTMLElement) {
+        if (openerComponent &&
+            "input" in openerComponent &&
+            openerComponent.input instanceof HTMLElement) {
+            const input = openerComponent.input;
             tasks.requestAnimationFrame(() => {
-                state.openerComponent.input.focus();
+                input.focus();
             });
             return;
         }
+        const openerElement = state.openerElement;
+        if (!openerElement)
+            return;
         tasks.requestAnimationFrame(() => {
-            state.openerElement.focus();
+            openerElement.focus();
         });
     };
     const handleOpenerClick = (e) => {
@@ -243,7 +249,8 @@ const withOpener = (config) => (component) => {
         state.activeClass = "";
     };
     const { element, component: openerComponent } = resolveOpener(config.opener);
-    setupOpenerEvents({ element, component: openerComponent });
+    if (element)
+        setupOpenerEvents({ element, component: openerComponent });
     if (component.lifecycle) {
         const originalDestroy = component.lifecycle.destroy || (() => { });
         component.lifecycle.destroy = () => {
@@ -256,13 +263,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) {
@@ -276,7 +283,7 @@ const withOpener = (config) => (component) => {
             setOpener(opener) {
                 const resolved = resolveOpener(opener);
                 if (resolved.element) {
-                    setupOpenerEvents(resolved);
+                    setupOpenerEvents({ element: resolved.element, component: resolved.component });
                 }
                 return component;
             },

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

@@ -248,7 +248,7 @@ export const createPositioner = (component, config) => {
     const positionMenu = (openerElement) => {
         if (!openerElement || !component.element)
             return;
-        positionElement(component.element, openerElement, config.position, false);
+        positionElement(component.element, openerElement, config.position ?? "bottom-start", false);
     };
     const positionSubmenu = (submenuElement, parentItemElement, level = 1) => {
         if (!submenuElement || !parentItemElement)

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

@@ -145,7 +145,7 @@ const withSubmenu = (config) => (component) => {
         const currentLevel = itemElement.closest(`.${component.getClass("menu--submenu")}`)
             ? parseInt(itemElement
                 .closest(`.${component.getClass("menu--submenu")}`)
-                .getAttribute("data-level") || "0", 10) + 1
+                ?.getAttribute("data-level") || "0", 10) + 1
             : 1;
         closeSubmenu(currentLevel);
         const existingSubmenuIndex = state.activeSubmenus.findIndex((s) => s.menuItem === itemElement && s.isOpening);
@@ -165,6 +165,12 @@ const withSubmenu = (config) => (component) => {
         submenuElement.setAttribute("tabindex", "-1");
         submenuElement.setAttribute("data-level", currentLevel.toString());
         submenuElement.setAttribute("data-parent-item", item.id);
+        let ownerId = component.element.id;
+        if (!ownerId) {
+            ownerId = `menu-${Date.now()}-${Math.floor(Math.random() * 1000)}`;
+            component.element.id = ownerId;
+        }
+        submenuElement.setAttribute("data-owner", ownerId);
         submenuElement.style.zIndex = `${1000 + currentLevel * 10}`;
         const submenuList = document.createElement("ul");
         submenuList.className = `${component.getClass("menu-list")}`;

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
@@ -369,7 +380,7 @@ export interface MenuComponent {
      * @param itemId - ID of the menu item to mark as selected
      * @returns The menu component for chaining
      */
-    setSelected: (itemId: string) => MenuComponent;
+    setSelected: (itemId: string | null) => MenuComponent;
     /**
      * Gets the currently selected menu item's ID
      * @returns ID of the selected menu item or null if none is selected

package/dist/components/navigation/nav-item.js

@@ -1,12 +1,13 @@
 import { NAV_CLASSES } from "./constants.js";
+import { setHTML } from "../../core/dom/html.js";
 export const createExpandIcon = (prefix) => {
     const icon = document.createElement('span');
     icon.className = `${prefix}-${NAV_CLASSES.EXPAND_ICON}`;
-    icon.innerHTML = `
+    setHTML(icon, `
     <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
       <polyline points="9 18 15 12 9 6"></polyline>
     </svg>
-  `;
+  `);
     return icon;
 };
 export const createNestedContainer = (items, prefix, createItem) => {
@@ -56,7 +57,7 @@ export const createNavItem = (config, container, prefix) => {
     if (config.icon) {
         const icon = document.createElement('span');
         icon.className = `${prefix}-${NAV_CLASSES.ICON}`;
-        icon.innerHTML = config.icon;
+        setHTML(icon, config.icon);
         itemElement.appendChild(icon);
     }
     if (config.label) {

package/dist/components/navigation/system/mobile.js

@@ -1,4 +1,5 @@
 import { hasTouchSupport, normalizeEvent, TOUCH_CONFIG, TOUCH_TARGETS } from "../../../core/utils/mobile.js";
+import { setHTML } from "../../../core/dom/html.js";
 export const createOverlay = (state, mobileConfig, hideDrawer) => {
     if (state.overlayElement)
         return state.overlayElement;
@@ -19,12 +20,12 @@ export const createCloseButton = (state, mobileConfig, hideDrawer) => {
     state.closeButtonElement = document.createElement('button');
     state.closeButtonElement.className = mobileConfig.closeButtonClass;
     state.closeButtonElement.setAttribute('aria-label', 'Close navigation');
-    state.closeButtonElement.innerHTML = `
+    setHTML(state.closeButtonElement, `
     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
       <line x1="18" y1="6" x2="6" y2="18"></line>
       <line x1="6" y1="6" x2="18" y2="18"></line>
     </svg>
-  `;
+  `);
     state.closeButtonElement.addEventListener('click', () => {
         hideDrawer();
     });