mtrl 0.10.0-next.2 → 0.10.0

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

@@ -3,21 +3,33 @@ import type { NormalizedEvent } from "../../core/utils/mobile.js";
 /** Value returned by the API, including complete ranges and empty selections. */
 export type DatePickerValue = Date | [Date, Date] | null;
 /**
- * Calendar selections supply a start date and separate range end. API changes
- * supply getValue() (a tuple for a complete range), with no rangeEndDate field.
+ * The value as the selection mode shapes it (FLO-295): a range is a pair, a
+ * single date a date; an unknown mode, either.
  */
-export type DatePickerChangePayload = {
-    value: Date;
+export type DatePickerValueOf<M> = M extends "range" ? [Date, Date] | null : M extends "single" ? Date | null : DatePickerValue;
+/** What setValue and `value` take: a date, a range as a pair, or as { start, end } (FLO-289). */
+export type DatePickerInput = Date | string | [Date | string, Date | string] | {
+    start: Date | string;
+    end: Date | string;
+};
+/**
+ * One shape whatever committed the value (FLO-295): a range's `value` is the
+ * pair, and `rangeEndDate` its end, kept for compatibility (null otherwise).
+ * The docked calendar sent the start as the value and the end apart.
+ */
+export interface DatePickerChangePayload<V = DatePickerValue> {
+    value: V;
     rangeEndDate: Date | null;
     formattedValue: string;
-} | {
-    value: DatePickerValue;
-    rangeEndDate?: never;
-    formattedValue: string;
-};
+    /**
+     * The value as ISO 8601 text, the `value` of the `<m-datepicker>` element's
+     * `change`: a date (`2026-09-10`), a `start/end` interval, or "" (FLO-320)
+     */
+    iso: string;
+}
 /** Visibility events carry the committed value, including complete ranges. */
-export interface DatePickerVisibilityPayload {
-    value: DatePickerValue;
+export interface DatePickerVisibilityPayload<V = DatePickerValue> {
+    value: V;
 }
 /** Normalized touch-end event emitted by the interactive root. */
 export type DatePickerTapPayload = NormalizedEvent;
@@ -28,10 +40,10 @@ export interface DatePickerSwipePayload {
     deltaY: number;
 }
 /** Events emitted by the picker API, calendar selections and interactive root. */
-export interface DatePickerEvents {
-    change: (payload: DatePickerChangePayload) => void;
-    open: (payload: DatePickerVisibilityPayload) => void;
-    close: (payload: DatePickerVisibilityPayload) => void;
+export interface DatePickerEvents<V = DatePickerValue> {
+    change: (payload: DatePickerChangePayload<V>) => void;
+    open: (payload: DatePickerVisibilityPayload<V>) => void;
+    close: (payload: DatePickerVisibilityPayload<V>) => void;
     click: (payload: ForwardedEventPayload<MouseEvent, HTMLElement>) => void;
     keydown: (payload: ForwardedEventPayload<KeyboardEvent, HTMLElement>) => void;
     tap: (payload: DatePickerTapPayload) => void;
@@ -133,7 +145,13 @@ export interface DatePickerConfig {
      * Initial selected date(s)
      * Accepts a Date object, Date string, or two dates for range selection
      */
-    value?: Date | string | [Date | string, Date | string];
+    value?: DatePickerInput;
+    /** The value shows and cannot change: no typing, no calendar (FLO-289). */
+    readOnly?: boolean;
+    /** A date is required: on the input for forms, and checkValidity() (FLO-289). */
+    required?: boolean;
+    /** The supporting text under the field. Default: the date format (FLO-289). */
+    supportingText?: string;
     /**
      * Minimum selectable date
      */
@@ -243,7 +261,7 @@ export interface CalendarAPI {
  * DatePicker component interface
  * @category Components
  */
-export interface DatePickerComponent {
+export interface DatePickerComponent<V = DatePickerValue> {
     /** The datepicker's main DOM element */
     element: HTMLElement;
     /** The input field DOM element */
@@ -274,55 +292,70 @@ export interface DatePickerComponent {
      * Opens the datepicker dropdown/modal
      * @returns The datepicker component for chaining
      */
-    open: () => DatePickerComponent;
+    open: () => DatePickerComponent<V>;
     /**
      * Closes the datepicker dropdown/modal
      * @returns The datepicker component for chaining
      */
-    close: () => DatePickerComponent;
+    close: () => DatePickerComponent<V>;
     /**
      * Gets the selected date(s)
      * @returns Date object, array of two Date objects for range, or null if none selected
      */
-    getValue: () => Date | [Date, Date] | null;
+    getValue: () => V;
     /**
-     * Sets the selected date(s)
+     * Sets the selected date(s). Silent: only the user's choice emits `change`
      * @param value - Date, string, or array of dates for range selection
      * @returns The datepicker component for chaining
      */
-    setValue: (value: Date | string | [Date | string, Date | string]) => DatePickerComponent;
+    setValue: (value: DatePickerInput) => DatePickerComponent<V>;
+    /** Read-only: the value shows and cannot change (FLO-289) */
+    setReadOnly: (readOnly: boolean) => DatePickerComponent<V>;
+    /** Whether the picker is read-only */
+    isReadOnly: () => boolean;
+    /** Whether a date is required (FLO-289) */
+    setRequired: (required: boolean) => DatePickerComponent<V>;
+    /**
+     * False when a date is required and missing. A dialog variant's input is
+     * read-only, which forms do not validate.
+     */
+    checkValidity: () => boolean;
+    /** As checkValidity(), and shows the error on the field when false */
+    reportValidity: () => boolean;
+    /** The supporting text; empty or null shows the date format (FLO-289) */
+    setSupportingText: (text: string | null) => DatePickerComponent<V>;
     /**
      * Gets the formatted date string based on the selected date(s)
      * @returns Formatted date string or empty string if none selected
      */
     getFormattedValue: () => string;
     /**
-     * Clears the selected date(s)
+     * Clears the selected date(s). Silent
      * @returns The datepicker component for chaining
      */
-    clear: () => DatePickerComponent;
+    clear: () => DatePickerComponent<V>;
     /**
      * Enables the datepicker
      * @returns The datepicker component for chaining
      */
-    enable: () => DatePickerComponent;
+    enable: () => DatePickerComponent<V>;
     /**
      * Disables the datepicker
      * @returns The datepicker component for chaining
      */
-    disable: () => DatePickerComponent;
+    disable: () => DatePickerComponent<V>;
     /**
      * Sets the minimum selectable date
      * @param date - Date object or string
      * @returns The datepicker component for chaining
      */
-    setMinDate: (date: Date | string) => DatePickerComponent;
+    setMinDate: (date: Date | string) => DatePickerComponent<V>;
     /**
      * Sets the maximum selectable date
      * @param date - Date object or string
      * @returns The datepicker component for chaining
      */
-    setMaxDate: (date: Date | string) => DatePickerComponent;
+    setMaxDate: (date: Date | string) => DatePickerComponent<V>;
     /**
      * Destroys the datepicker component and cleans up resources
      */
@@ -333,14 +366,14 @@ export interface DatePickerComponent {
      * @param handler - Event handler function
      * @returns The datepicker component for chaining
      */
-    on: <K extends keyof DatePickerEvents>(event: K, handler: DatePickerEvents[K]) => DatePickerComponent;
+    on: <K extends keyof DatePickerEvents<V>>(event: K, handler: DatePickerEvents<V>[K]) => DatePickerComponent<V>;
     /**
      * Removes an event listener from the datepicker
      * @param event - Event name
      * @param handler - Event handler function
      * @returns The datepicker component for chaining
      */
-    off: <K extends keyof DatePickerEvents>(event: K, handler: DatePickerEvents[K]) => DatePickerComponent;
+    off: <K extends keyof DatePickerEvents<V>>(event: K, handler: DatePickerEvents<V>[K]) => DatePickerComponent<V>;
 }
 /** Internal calendar view model. Dates are local civil dates, without a time. */
 export interface DatePickerState {

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

@@ -77,3 +77,8 @@ export declare const addMonths: (date: Date, months: number) => Date;
  * @returns New date with years added
  */
 export declare const addYears: (date: Date, years: number) => Date;
+/**
+ * A value as ISO 8601 text, the `<m-datepicker>` element's value: a date
+ * (`2026-09-10`), a `start/end` interval, or "" (FLO-320).
+ */
+export declare const toIsoValue: (value: Date | [Date, Date] | null, end?: Date | null) => string;

package/dist/components/datepicker/utils.js

@@ -178,3 +178,5 @@ export const addMonths = (date, months) => {
 export const addYears = (date, years) => {
     return addMonths(date, years * 12);
 };
+const isoDate = (date) => (date ? formatDate(date, "YYYY-MM-DD") : "");
+export const toIsoValue = (value, end) => Array.isArray(value) ? `${isoDate(value[0])}/${isoDate(value[1])}` : value && end ? `${isoDate(value)}/${isoDate(end)}` : isoDate(value);

package/dist/components/dialog/api.js

@@ -1,4 +1,5 @@
 import { removeClass } from "../../core/dom/classes.js";
+import { hideFromTopLayer } from "../../core/dom/layer.js";
 export const withAPI = (options) => (component) => ({
     ...component,
     open() {
@@ -92,6 +93,7 @@ export const withAPI = (options) => (component) => ({
             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();
             }
@@ -100,6 +102,9 @@ export const withAPI = (options) => (component) => ({
         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

@@ -1,4 +1,5 @@
 import { createComponentConfig, createElementConfig } from "../../core/config/component.js";
+import { supportsTopLayer } from "../../core/dom/layer.js";
 export const defaultConfig = {
     size: 'medium',
     animation: 'scale',
@@ -12,7 +13,12 @@ export const defaultConfig = {
     divider: false,
     buttons: []
 };
-export const createBaseConfig = (config = {}) => createComponentConfig(defaultConfig, config, 'dialog');
+export const createBaseConfig = (config = {}) => {
+    const merged = createComponentConfig(defaultConfig, config, 'dialog');
+    if (merged.layer === 'top' && !supportsTopLayer('modal'))
+        merged.layer = undefined;
+    return merged;
+};
 export const getElementConfig = (config) => {
     const role = config.role ||
         (config.size === 'fullscreen' ? 'dialog' : 'alertdialog');
@@ -24,7 +30,7 @@ export const getElementConfig = (config) => {
         attributes['aria-modal'] = 'true';
     }
     return createElementConfig(config, {
-        tag: 'div',
+        tag: config.layer === 'top' ? 'dialog' : 'div',
         attributes,
         className: config.class
     });

package/dist/components/dialog/features.js

@@ -3,6 +3,8 @@ 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 { hideFromTopLayer, onTopLayerClose, showInTopLayer } from "../../core/dom/layer.js";
 const DIALOG_EVENTS = {
     OPEN: "open",
     CLOSE: "close",
@@ -141,9 +143,14 @@ export const withStructure = (config, getComponent) => (component) => {
     if (footer) {
         component.element.appendChild(footer);
     }
-    overlay.appendChild(component.element);
     const container = config.container || document.body;
-    container.appendChild(overlay);
+    if (config.layer === "top") {
+        container.appendChild(component.element);
+    }
+    else {
+        overlay.appendChild(component.element);
+        container.appendChild(overlay);
+    }
     return {
         ...component,
         overlay,
@@ -198,10 +205,11 @@ export const withDivider = () => (component) => {
     };
 };
 const addButton = (footer, buttonConfig, component, getComponent) => {
-    const { text, variant = "text", onClick, closeDialog = true, autofocus = false, attributes = {}, } = buttonConfig;
+    const { text, variant = "text", onClick, closeDialog = true, autofocus = false, attributes = {}, size, } = buttonConfig;
     const button = createButton({
         text,
         variant,
+        ...(size ? { size } : {}),
         ...attributes,
     });
     button.on("click", ({ originalEvent: event }) => {
@@ -239,6 +247,8 @@ export const withVisibility = (getComponent) => (component) => {
     const isOpen = component.config.open === true;
     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;
@@ -246,7 +256,7 @@ export const withVisibility = (getComponent) => (component) => {
     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 === document.activeElement));
+        (el.offsetWidth > 0 || el.offsetHeight > 0 || el === activeElementOf(el)));
     function handleTabKey(e) {
         if (e.key !== "Tab")
             return;
@@ -258,7 +268,7 @@ export const withVisibility = (getComponent) => (component) => {
         }
         const first = elements[0];
         const last = elements[elements.length - 1];
-        const active = document.activeElement;
+        const active = activeElementOf(component.element);
         if (e.shiftKey && (active === first || !component.element.contains(active))) {
             last.focus();
             e.preventDefault();
@@ -271,7 +281,7 @@ export const withVisibility = (getComponent) => (component) => {
     const inertBackground = () => {
         if (component.config.modal === false)
             return;
-        const parent = component.overlay.parentElement;
+        const parent = top ? null : component.overlay.parentElement;
         if (parent) {
             Array.from(parent.children).forEach((sibling) => {
                 if (sibling === component.overlay)
@@ -297,19 +307,21 @@ export const withVisibility = (getComponent) => (component) => {
             scrollLock = null;
         }
     };
+    const handleWrap = (e) => wrapTab(component.element, e);
     const trapFocus = () => {
         inertBackground();
         if (component.config.autofocus !== false) {
             const requested = component.element.querySelector("[autofocus]");
-            const target = requested || focusable()[0] || component.element;
+            const target = requested || (top ? tabStops(component.element) : focusable())[0] || component.element;
             target.focus();
         }
         if (component.config.trapFocus !== false) {
-            component.element.addEventListener("keydown", handleTabKey);
+            component.element.addEventListener("keydown", top ? handleWrap : handleTabKey);
         }
     };
     const releaseFocus = () => {
         component.element.removeEventListener("keydown", handleTabKey);
+        component.element.removeEventListener("keydown", handleWrap);
         releaseBackground();
         if (previouslyFocusedElement) {
             if (previouslyFocusedElement.isConnected)
@@ -319,33 +331,61 @@ export const withVisibility = (getComponent) => (component) => {
     };
     const setupEvents = () => {
         if (component.config.closeOnOverlayClick !== false) {
-            component.overlay.addEventListener("mousedown", handleOverlayMouseDown);
+            scrim.addEventListener("mousedown", handleOverlayMouseDown);
             document.addEventListener("mouseup", handleOverlayMouseUp);
         }
-        if (component.config.closeOnEscape !== false) {
+        if (top) {
+            component.element.addEventListener("cancel", handleCancel);
+        }
+        else if (component.config.closeOnEscape !== false) {
             document.addEventListener("keydown", handleEscKey);
         }
     };
     const cleanupEvents = () => {
-        component.overlay.removeEventListener("mousedown", handleOverlayMouseDown);
+        scrim.removeEventListener("mousedown", handleOverlayMouseDown);
         document.removeEventListener("mouseup", handleOverlayMouseUp);
         document.removeEventListener("keydown", handleEscKey);
+        component.element.removeEventListener("cancel", handleCancel);
+    };
+    const onScrim = (e) => {
+        if (!top)
+            return e.target === component.overlay;
+        if (e.composedPath()[0] !== scrim)
+            return false;
+        const box = scrim.getBoundingClientRect();
+        return e.clientX < box.left || e.clientX > box.right || e.clientY < box.top || e.clientY > box.bottom;
     };
     function handleOverlayMouseDown(e) {
-        mouseDownOnOverlay = e.target === component.overlay;
+        mouseDownOnOverlay = onScrim(e);
     }
     function handleOverlayMouseUp(e) {
-        if (mouseDownOnOverlay && e.target === component.overlay) {
+        if (mouseDownOnOverlay && onScrim(e)) {
             visibility.close();
         }
         mouseDownOnOverlay = false;
     }
+    function handleCancel(e) {
+        e.preventDefault();
+        if (component.config.closeOnEscape !== false && visibility.isOpen()) {
+            visibility.close();
+        }
+    }
+    const showModal = () => {
+        if (!component.element.isConnected) {
+            component.structure.container.appendChild(component.element);
+        }
+        if (!component.element.isConnected || !showInTopLayer(component.element, { kind: "modal" })) {
+            component.element.setAttribute("open", "");
+        }
+    };
     function handleEscKey(e) {
         if (e.key === "Escape" && visibility.isOpen()) {
             visibility.close();
         }
     }
     if (isOpen) {
+        if (top)
+            showModal();
         addClass(component.overlay, `${component.getClass("dialog__overlay")}--visible`);
         addClass(component.element, `${component.getClass("dialog")}--visible`);
         trapFocus();
@@ -355,7 +395,7 @@ export const withVisibility = (getComponent) => (component) => {
         open() {
             if (this.isOpen())
                 return;
-            previouslyFocusedElement = document.activeElement;
+            previouslyFocusedElement = deepActiveElement();
             const beforeOpenEvent = {
                 dialog: getComponent(),
                 defaultPrevented: false,
@@ -368,6 +408,18 @@ export const withVisibility = (getComponent) => (component) => {
             }
             if (beforeOpenEvent.defaultPrevented)
                 return;
+            if (top) {
+                showModal();
+                void component.element.offsetWidth;
+                addClass(component.element, `${component.getClass("dialog")}--visible`);
+                trapFocus();
+                setupEvents();
+                component.emit(DIALOG_EVENTS.OPEN, { dialog: getComponent() });
+                setTimeout(() => {
+                    component.emit(DIALOG_EVENTS.AFTER_OPEN, { dialog: getComponent() });
+                }, openDuration);
+                return;
+            }
             if (component.overlay && !component.overlay.parentNode) {
                 const container = component.structure.container || document.body;
                 container.appendChild(component.overlay);
@@ -403,13 +455,15 @@ export const withVisibility = (getComponent) => (component) => {
             const overlayVisibleClass = `${component.getClass("dialog__overlay")}--visible`;
             removeClass(component.element, dialogVisibleClass);
             removeClass(component.overlay, overlayVisibleClass);
+            if (top)
+                hideFromTopLayer(component.element);
             releaseFocus();
             cleanupEvents();
             if (typeof component.emit === "function") {
                 component.emit(DIALOG_EVENTS.CLOSE, { dialog: getComponent() });
             }
             setTimeout(() => {
-                if (component.overlay && component.overlay.parentNode) {
+                if (!top && component.overlay && component.overlay.parentNode) {
                     component.overlay.parentNode.removeChild(component.overlay);
                 }
                 if (typeof component.emit === "function") {
@@ -437,6 +491,12 @@ export const withVisibility = (getComponent) => (component) => {
             visibility.close();
         });
     }
+    if (top) {
+        onTopLayerClose(component.element, () => {
+            if (visibility.isOpen())
+                visibility.close();
+        });
+    }
     return {
         ...component,
         visibility,
@@ -598,23 +658,31 @@ export const withConfirm = () => (component) => {
             return new Promise((resolve) => {
                 const { title = "Confirm", message, confirmText = "Yes", cancelText = "No", confirmVariant = "filled", cancelVariant = "text", size = "small", } = options;
                 component.content.setTitle(title);
-                component.content.setContent(`<p>${message}</p>`);
+                const text = document.createElement("p");
+                text.textContent = message;
+                component.content.setContent(text.outerHTML);
                 component.size.setSize(size);
                 component._buttons.forEach((button) => button.instance.destroy());
                 component._buttons = [];
-                component.buttons.addButton({
-                    text: confirmText,
-                    variant: confirmVariant,
-                    onClick: () => {
-                        resolve(true);
-                    },
-                });
+                let settled = false;
+                const settle = (answer) => {
+                    if (settled)
+                        return;
+                    settled = true;
+                    component.off("close", onClose);
+                    resolve(answer);
+                };
+                const onClose = () => settle(false);
+                component.on("close", onClose);
                 component.buttons.addButton({
                     text: cancelText,
                     variant: cancelVariant,
-                    onClick: () => {
-                        resolve(false);
-                    },
+                    onClick: () => settle(false),
+                });
+                component.buttons.addButton({
+                    text: confirmText,
+                    variant: confirmVariant,
+                    onClick: () => settle(true),
                 });
                 component.visibility.open();
             });

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

@@ -151,6 +151,17 @@ export interface DialogConfig {
      * @default document.body
      */
     container?: HTMLElement;
+    /**
+     * `"top"` makes the dialog itself a `<dialog>` element, rendered in place in
+     * `container` (or `document.body`) and kept there when it closes, and opens
+     * it with `showModal()`: in the browser's top layer, above every z-index and
+     * outside any clipping ancestor, with the rest of the page inert. The scrim
+     * is its `::backdrop`, and the overlay element is not used. Escape reaches
+     * the dialog as its `cancel` event.
+     *
+     * Where the browser has no `showModal()`, the dialog behaves as without it.
+     */
+    layer?: "top";
     /**
      * Footer buttons configuration
      * Array of button objects to display in the footer
@@ -204,8 +215,9 @@ export interface DialogButton {
      */
     variant?: string;
     /**
-     * Button color
-     * @example "primary" | "error"
+     * Has no effect: the button has no colour option, and M3's dialog actions
+     * are text buttons in the dialog's own colours.
+     * @deprecated Since 0.10 (FLO-324); removed in 1.0.
      */
     color?: string;
     /**
@@ -322,6 +334,7 @@ export interface DialogFeatureComponent {
     config: DialogConfig & Record<string, unknown>;
     getClass: (name: string) => string;
     on: (event: string, handler: EventCallback) => unknown;
+    off: (event: string, handler: EventCallback) => unknown;
     emit: (event: string, data?: unknown) => unknown;
     _buttons?: DialogButtonRecord[];
 }

package/dist/components/divider/features.js

@@ -16,6 +16,7 @@ const applyLayout = (component, config) => {
         element.setAttribute('aria-orientation', 'vertical');
     const style = element.style;
     style.marginLeft = style.marginRight = style.marginTop = style.marginBottom = '';
+    style.marginInlineStart = style.marginInlineEnd = style.marginBlockStart = style.marginBlockEnd = '';
     const cross = horizontal ? 'height' : 'width';
     const main = horizontal ? 'width' : 'height';
     style[cross] = `${thickness}px`;
@@ -25,8 +26,8 @@ const applyLayout = (component, config) => {
         const insetEnd = config.insetEnd !== undefined
             ? config.insetEnd
             : (variant === 'middle-inset' ? DEFAULT_INSET : 0);
-        style[horizontal ? 'marginLeft' : 'marginTop'] = `${insetStart}px`;
-        style[horizontal ? 'marginRight' : 'marginBottom'] = `${insetEnd}px`;
+        style[horizontal ? 'marginInlineStart' : 'marginBlockStart'] = `${insetStart}px`;
+        style[horizontal ? 'marginInlineEnd' : 'marginBlockEnd'] = `${insetEnd}px`;
         style[main] = 'auto';
     }
 };

package/dist/components/drawer/config.js

@@ -1,5 +1,6 @@
 import { createComponentConfig, createElementConfig, } from "../../core/config/component.js";
 import { DRAWER_DEFAULTS } from "./constants.js";
+import { supportsTopLayer } from "../../core/dom/layer.js";
 export const defaultConfig = {
     variant: DRAWER_DEFAULTS.VARIANT,
     position: DRAWER_DEFAULTS.POSITION,
@@ -9,7 +10,13 @@ export const defaultConfig = {
     ripple: DRAWER_DEFAULTS.RIPPLE,
     items: [],
 };
-export const createBaseConfig = (config = {}) => createComponentConfig(defaultConfig, config, "drawer");
+export const createBaseConfig = (config = {}) => {
+    const merged = createComponentConfig(defaultConfig, config, "drawer");
+    if (merged.layer === "top" && (merged.variant !== "modal" || !supportsTopLayer("modal"))) {
+        merged.layer = undefined;
+    }
+    return merged;
+};
 export const getElementConfig = (config) => {
     const isModal = config.variant === "modal";
     const attributes = {};
@@ -23,7 +30,7 @@ export const getElementConfig = (config) => {
     attributes["aria-label"] = config.ariaLabel || config.headline || "Navigation";
     attributes.tabindex = "-1";
     return createElementConfig(config, {
-        tag: "aside",
+        tag: config.layer === "top" ? "dialog" : "aside",
         attributes,
         className: [
             config.dense ? `${config.prefix}-drawer--dense` : null,

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

@@ -1,6 +1,7 @@
 import { DRAWER_EVENTS } from "../constants.js";
 import { createRipple, } from "../../../core/compose/features/ripple.js";
 import { setHTML } from "../../../core/dom/html.js";
+import { activeElementOf } from "../../../core/dom/focus.js";
 const createItemElement = (item, getClass) => {
     const el = document.createElement("button");
     el.className = getClass("drawer__item");
@@ -91,6 +92,7 @@ export const withItems = (config) => (component) => {
                     setActive(item.id);
                     const selectEvent = {
                         id: item.id,
+                        value: item.id,
                         label: item.label || "",
                         index: parseInt(itemEl.dataset.navIndex || "0", 10),
                         originalEvent: e,
@@ -163,7 +165,7 @@ export const withItems = (config) => (component) => {
         const items = Array.from(itemsContainer.querySelectorAll(`.${component.getClass("drawer__item")}:not([disabled])`));
         if (!items.length)
             return;
-        const currentIndex = items.indexOf(document.activeElement);
+        const currentIndex = items.indexOf(activeElementOf(itemsContainer));
         let nextIndex = -1;
         switch (e.key) {
             case "ArrowDown":