mtrl 0.10.0-next.2 → 0.10.0-next.3

package/README.md

@@ -136,23 +136,19 @@ Button progress and card actions load on demand; enable code splitting in your b
 
 ## Web components and frameworks (experimental)
 
-From the 0.10.0 prereleases (`npm install mtrl@next`), components also ship as custom elements, with thin adapters for React, Vue, Svelte and Solid. The API may still change.
-
-| Element | Framework component (Vue: `M` prefix, e.g. `MTextfield`) | Kind |
-|---------|---------------------|------|
-| `<m-button>` | `Button` | action, submits or resets its form |
-| `<m-icon-button>` | `IconButton` | action or toggle (`selected`) |
-| `<m-fab>`, `<m-extended-fab>` | `Fab`, `ExtendedFab` | action |
-| `<m-checkbox>` | `Checkbox` | form control (`checked`, `indeterminate`) |
-| `<m-switch>` | `Switch` | form control (`checked`) |
-| `<m-radios>` with `<m-radio>` | `Radios`, `Radio` | form control (`value`) |
-| `<m-slider>` | `Slider` | form control (`value`, `secondValue` with `range`) |
-| `<m-textfield>` | `Textfield` | form control (`value`) |
-| `<m-tabs>` with `<m-tab>` | `Tabs`, `Tab` | selection (`value`) |
-| `<m-progress>`, `<m-loading-indicator>` | `Progress`, `LoadingIndicator` | indicator |
-| `<m-badge>`, `<m-divider>` | `Badge`, `Divider` | display |
-
-More components follow through 0.10.x; the others are available as factories today.
+From the 0.10.0 prereleases (`npm install mtrl@next`), every component also ships as a custom element, with thin adapters for React, Vue, Svelte and Solid. The API may still change before 1.0.
+
+| Kind | Elements | Framework components (Vue: `M` prefix, e.g. `MDialog`) |
+|------|----------|--------------------------------------------------------|
+| Actions | `<m-button>`, `<m-icon-button>`, `<m-fab>`, `<m-extended-fab>`, `<m-split-button>`, `<m-button-group>` + `<m-button-group-item>` | `Button`, `IconButton`, `Fab`, `ExtendedFab`, `SplitButton`, `ButtonGroup`, `ButtonGroupItem` |
+| Form controls | `<m-checkbox>`, `<m-switch>`, `<m-radios>` + `<m-radio>`, `<m-slider>`, `<m-textfield>`, `<m-select>` + `<m-select-option>`, `<m-search>` + `<m-search-suggestion>`, `<m-datepicker>`, `<m-timepicker>` | `Checkbox`, `Switch`, `Radios`, `Radio`, `Slider`, `Textfield`, `Select`, `SelectOption`, `Search`, `SearchSuggestion`, `Datepicker`, `Timepicker` |
+| Selection | `<m-chips>` + `<m-chip>`, `<m-tabs>` + `<m-tab>`, `<m-list>` + `<m-list-item>` | `Chips`, `Chip`, `Tabs`, `Tab`, `List`, `ListItem` |
+| Navigation | `<m-navigation-rail>` + `<m-navigation-rail-item>`, `<m-drawer>` + `<m-drawer-item>`, `<m-top-app-bar>`, `<m-bottom-app-bar>` | `NavigationRail`, `NavigationRailItem`, `Drawer`, `DrawerItem`, `TopAppBar`, `BottomAppBar` |
+| Overlays (top layer) | `<m-menu>` + `<m-menu-item>`, `<m-dialog>`, `<m-bottom-sheet>`, `<m-side-sheet>`, `<m-tooltip>`, `<m-snackbar>` | `Menu`, `MenuItem`, `Dialog`, `BottomSheet`, `SideSheet`, `Tooltip`, `Snackbar` |
+| Containment | `<m-card>`, `<m-carousel>` + `<m-carousel-item>` | `Card`, `Carousel`, `CarouselItem` |
+| Indicators | `<m-progress>`, `<m-loading-indicator>`, `<m-badge>`, `<m-divider>` | `Progress`, `LoadingIndicator`, `Badge`, `Divider` |
+
+Overlays open in the browser's top layer (`showModal()` or `popover`) from inside their own shadow root, so they keep their styles, trap focus and make the page inert where M3 says so. Form controls are form-associated: `name`, the form value, reset, validation, `<label for>` and back-navigation restore work as on native controls.
 
 ```html
 <script type="module">

package/dist/README.md

@@ -136,23 +136,19 @@ Button progress and card actions load on demand; enable code splitting in your b
 
 ## Web components and frameworks (experimental)
 
-From the 0.10.0 prereleases (`npm install mtrl@next`), components also ship as custom elements, with thin adapters for React, Vue, Svelte and Solid. The API may still change.
-
-| Element | Framework component (Vue: `M` prefix, e.g. `MTextfield`) | Kind |
-|---------|---------------------|------|
-| `<m-button>` | `Button` | action, submits or resets its form |
-| `<m-icon-button>` | `IconButton` | action or toggle (`selected`) |
-| `<m-fab>`, `<m-extended-fab>` | `Fab`, `ExtendedFab` | action |
-| `<m-checkbox>` | `Checkbox` | form control (`checked`, `indeterminate`) |
-| `<m-switch>` | `Switch` | form control (`checked`) |
-| `<m-radios>` with `<m-radio>` | `Radios`, `Radio` | form control (`value`) |
-| `<m-slider>` | `Slider` | form control (`value`, `secondValue` with `range`) |
-| `<m-textfield>` | `Textfield` | form control (`value`) |
-| `<m-tabs>` with `<m-tab>` | `Tabs`, `Tab` | selection (`value`) |
-| `<m-progress>`, `<m-loading-indicator>` | `Progress`, `LoadingIndicator` | indicator |
-| `<m-badge>`, `<m-divider>` | `Badge`, `Divider` | display |
-
-More components follow through 0.10.x; the others are available as factories today.
+From the 0.10.0 prereleases (`npm install mtrl@next`), every component also ships as a custom element, with thin adapters for React, Vue, Svelte and Solid. The API may still change before 1.0.
+
+| Kind | Elements | Framework components (Vue: `M` prefix, e.g. `MDialog`) |
+|------|----------|--------------------------------------------------------|
+| Actions | `<m-button>`, `<m-icon-button>`, `<m-fab>`, `<m-extended-fab>`, `<m-split-button>`, `<m-button-group>` + `<m-button-group-item>` | `Button`, `IconButton`, `Fab`, `ExtendedFab`, `SplitButton`, `ButtonGroup`, `ButtonGroupItem` |
+| Form controls | `<m-checkbox>`, `<m-switch>`, `<m-radios>` + `<m-radio>`, `<m-slider>`, `<m-textfield>`, `<m-select>` + `<m-select-option>`, `<m-search>` + `<m-search-suggestion>`, `<m-datepicker>`, `<m-timepicker>` | `Checkbox`, `Switch`, `Radios`, `Radio`, `Slider`, `Textfield`, `Select`, `SelectOption`, `Search`, `SearchSuggestion`, `Datepicker`, `Timepicker` |
+| Selection | `<m-chips>` + `<m-chip>`, `<m-tabs>` + `<m-tab>`, `<m-list>` + `<m-list-item>` | `Chips`, `Chip`, `Tabs`, `Tab`, `List`, `ListItem` |
+| Navigation | `<m-navigation-rail>` + `<m-navigation-rail-item>`, `<m-drawer>` + `<m-drawer-item>`, `<m-top-app-bar>`, `<m-bottom-app-bar>` | `NavigationRail`, `NavigationRailItem`, `Drawer`, `DrawerItem`, `TopAppBar`, `BottomAppBar` |
+| Overlays (top layer) | `<m-menu>` + `<m-menu-item>`, `<m-dialog>`, `<m-bottom-sheet>`, `<m-side-sheet>`, `<m-tooltip>`, `<m-snackbar>` | `Menu`, `MenuItem`, `Dialog`, `BottomSheet`, `SideSheet`, `Tooltip`, `Snackbar` |
+| Containment | `<m-card>`, `<m-carousel>` + `<m-carousel-item>` | `Card`, `Carousel`, `CarouselItem` |
+| Indicators | `<m-progress>`, `<m-loading-indicator>`, `<m-badge>`, `<m-divider>` | `Progress`, `LoadingIndicator`, `Badge`, `Divider` |
+
+Overlays open in the browser's top layer (`showModal()` or `popover`) from inside their own shadow root, so they keep their styles, trap focus and make the page inert where M3 says so. Form controls are form-associated: `name`, the form value, reset, validation, `<label for>` and back-navigation restore work as on native controls.
 
 ```html
 <script type="module">

package/dist/components/bottom-sheet/config.js

@@ -1,17 +1,24 @@
 import { createComponentConfig, createElementConfig, } from "../../core/config/component.js";
-import { BOTTOM_SHEET_DEFAULTS, BOTTOM_SHEET_STATES, } from "./constants.js";
+import { BOTTOM_SHEET_DEFAULTS, BOTTOM_SHEET_STATES, BOTTOM_SHEET_VARIANTS, } from "./constants.js";
+import { supportsTopLayer } from "../../core/dom/layer.js";
 export const defaultConfig = {
     variant: BOTTOM_SHEET_DEFAULTS.VARIANT,
     dragHandle: BOTTOM_SHEET_DEFAULTS.DRAG_HANDLE,
-    peekHeight: BOTTOM_SHEET_DEFAULTS.PEEK_HEIGHT,
     maxWidth: BOTTOM_SHEET_DEFAULTS.MAX_WIDTH,
     initialState: BOTTOM_SHEET_STATES.HIDDEN,
     closeOnScrimClick: BOTTOM_SHEET_DEFAULTS.CLOSE_ON_SCRIM_CLICK,
     closeOnEscape: BOTTOM_SHEET_DEFAULTS.CLOSE_ON_ESCAPE,
 };
-export const createBaseConfig = (config = {}) => createComponentConfig(defaultConfig, config, "bottom-sheet");
+export const createBaseConfig = (config = {}) => {
+    const merged = createComponentConfig(defaultConfig, config, "bottom-sheet");
+    if (merged.layer === "top" &&
+        (merged.variant !== BOTTOM_SHEET_VARIANTS.MODAL || !supportsTopLayer("modal"))) {
+        merged.layer = undefined;
+    }
+    return merged;
+};
 export const getElementConfig = (config) => createElementConfig(config, {
-    tag: "div",
+    tag: config.layer === "top" ? "dialog" : "div",
     className: [config.class].filter(Boolean),
     attributes: {
         "aria-hidden": "true",

package/dist/components/bottom-sheet/constants.d.ts

@@ -25,8 +25,6 @@ export declare const BOTTOM_SHEET_STATES: {
  */
 export declare const BOTTOM_SHEET_DEFAULTS: {
     readonly VARIANT: "modal";
-    /** BottomSheetDefaults.SheetPeekHeight */
-    readonly PEEK_HEIGHT: 56;
     /** BottomSheetDefaults.SheetMaxWidth; wider viewports centre the sheet */
     readonly MAX_WIDTH: 640;
     /** A drag handle is part of the anatomy, so it is on unless asked otherwise */

package/dist/components/bottom-sheet/constants.js

@@ -9,7 +9,6 @@ export const BOTTOM_SHEET_STATES = {
 };
 export const BOTTOM_SHEET_DEFAULTS = {
     VARIANT: BOTTOM_SHEET_VARIANTS.MODAL,
-    PEEK_HEIGHT: 56,
     MAX_WIDTH: 640,
     DRAG_HANDLE: true,
     CLOSE_ON_SCRIM_CLICK: true,

package/dist/components/bottom-sheet/features/state.js

@@ -1,8 +1,11 @@
 import { BOTTOM_SHEET_CLASSES, BOTTOM_SHEET_EVENTS, BOTTOM_SHEET_STATES, BOTTOM_SHEET_VARIANTS, } from "../constants.js";
+import { deepActiveElement, wrapTab } from "../../../core/dom/focus.js";
+import { hideFromTopLayer, onTopLayerClose, showInTopLayer, } from "../../../core/dom/layer.js";
 export const withState = (config) => (component) => {
     const { element, getClass, structure } = component;
     const root = getClass(BOTTOM_SHEET_CLASSES.ROOT);
     const isModal = config.variant === BOTTOM_SHEET_VARIANTS.MODAL;
+    const top = config.layer === "top";
     let state = config.initialState ?? BOTTOM_SHEET_STATES.HIDDEN;
     let previouslyFocused = null;
     const applyState = (next) => {
@@ -35,12 +38,27 @@ export const withState = (config) => (component) => {
         if (config.closeOnScrimClick)
             close();
     };
+    const handleBackdropClick = (event) => {
+        if (event.target === element)
+            handleScrimClick();
+    };
+    const handleTab = (event) => wrapTab(element, event);
+    const handleCancel = (event) => {
+        event.preventDefault();
+        if (config.closeOnEscape)
+            close();
+    };
     function open(to = BOTTOM_SHEET_STATES.PARTIAL) {
         if (state === to)
             return;
         const wasHidden = state === BOTTOM_SHEET_STATES.HIDDEN;
         if (wasHidden && isModal) {
-            previouslyFocused = document.activeElement;
+            previouslyFocused = deepActiveElement();
+        }
+        if (wasHidden && top) {
+            if (!showInTopLayer(element, { kind: "modal" }))
+                element.setAttribute("open", "");
+            void element.offsetWidth;
         }
         setState(to);
         if (wasHidden) {
@@ -53,6 +71,8 @@ export const withState = (config) => (component) => {
         if (state === BOTTOM_SHEET_STATES.HIDDEN)
             return;
         setState(BOTTOM_SHEET_STATES.HIDDEN);
+        if (top)
+            hideFromTopLayer(element);
         if (isModal && previouslyFocused?.isConnected) {
             previouslyFocused.focus();
             previouslyFocused = null;
@@ -60,8 +80,19 @@ export const withState = (config) => (component) => {
         component.emit(BOTTOM_SHEET_EVENTS.CLOSE);
     }
     applyState(state);
-    if (config.closeOnEscape)
+    let stopCloses = null;
+    if (top) {
+        element.addEventListener("cancel", handleCancel);
+        element.addEventListener("click", handleBackdropClick);
+        element.addEventListener("keydown", handleTab);
+        stopCloses = onTopLayerClose(element, close);
+        if (state !== BOTTOM_SHEET_STATES.HIDDEN && element.isConnected) {
+            showInTopLayer(element, { kind: "modal" });
+        }
+    }
+    else if (config.closeOnEscape) {
         document.addEventListener("keydown", handleKeydown);
+    }
     structure.scrim?.addEventListener("click", handleScrimClick);
     return {
         ...component,
@@ -76,6 +107,12 @@ export const withState = (config) => (component) => {
             release: () => {
                 document.removeEventListener("keydown", handleKeydown);
                 structure.scrim?.removeEventListener("click", handleScrimClick);
+                element.removeEventListener("cancel", handleCancel);
+                element.removeEventListener("click", handleBackdropClick);
+                element.removeEventListener("keydown", handleTab);
+                stopCloses?.();
+                if (top)
+                    hideFromTopLayer(element);
             },
         },
     };

package/dist/components/bottom-sheet/features/structure.js

@@ -1,4 +1,5 @@
 import { BOTTOM_SHEET_CLASSES, BOTTOM_SHEET_VARIANTS } from "../constants.js";
+import { PREFIX } from "../../../core/config.js";
 import { setHTML } from "../../../core/dom/html.js";
 export const withStructure = (config) => (component) => {
     const { element, getClass } = component;
@@ -6,7 +7,7 @@ export const withStructure = (config) => (component) => {
     element.classList.add(getClass(BOTTOM_SHEET_CLASSES.ROOT));
     element.classList.add(`${getClass(BOTTOM_SHEET_CLASSES.ROOT)}--${config.variant}`);
     let scrim = null;
-    if (isModal) {
+    if (isModal && config.layer !== "top") {
         scrim = document.createElement("div");
         scrim.className = getClass(BOTTOM_SHEET_CLASSES.SCRIM);
         element.appendChild(scrim);
@@ -20,6 +21,9 @@ export const withStructure = (config) => (component) => {
     if (config.maxWidth) {
         container.style.maxWidth = `${config.maxWidth}px`;
     }
+    if (config.peekHeight) {
+        container.style.setProperty(`--${PREFIX}-bottom-sheet-peek-height`, `${config.peekHeight}px`);
+    }
     let handle = null;
     if (config.dragHandle) {
         handle = document.createElement("div");

package/dist/components/bottom-sheet/types.d.ts

@@ -44,8 +44,9 @@ export interface BottomSheetConfig {
      */
     dragHandle?: boolean;
     /**
-     * Height of the partially expanded state, in pixels.
-     * @default 56
+     * Height of the partially expanded state, in pixels: a sheet with more
+     * content shows this much of it until it is expanded. Unset, the partial
+     * sheet shows its content up to half the screen.
      */
     peekHeight?: number;
     /**
@@ -72,6 +73,18 @@ export interface BottomSheetConfig {
     closeOnEscape?: boolean;
     /** Where to mount the sheet. Defaults to `document.body` */
     container?: HTMLElement;
+    /**
+     * `"top"` makes a modal sheet's root a `<dialog>` element, rendered in
+     * `container` like any sheet, 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 Escape reaches the sheet as the dialog's `cancel` event. The sheet
+     * slides as without it.
+     *
+     * A standard sheet stays in the page, and where the browser has no
+     * `showModal()` the sheet behaves as without it.
+     */
+    layer?: "top";
     /** Handlers registered at creation, equivalent to calling `on` for each */
     on?: BottomSheetEventHandlers;
     /** Extra classes for the root element */

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

@@ -1,6 +1,7 @@
 import { getCleanup } from "../../../core/compose/cleanup.js";
 import createChip from "../chip/chip.js";
 import { CHIPS_EVENTS } from "../constants.js";
+import { activeElementOf } from "../../../core/dom/focus.js";
 export const withController = (config) => (component) => {
     const eventListeners = {
         change: [],
@@ -157,7 +158,7 @@ export const withController = (config) => (component) => {
             : component.chipInstances.indexOf(chipOrIndex);
         if (index >= 0 && index < component.chipInstances.length) {
             const chip = component.chipInstances[index];
-            const hadFocus = chip.element.contains(document.activeElement);
+            const hadFocus = chip.element.contains(activeElementOf(chip.element));
             dispatchEvent(CHIPS_EVENTS.REMOVE, chip);
             chip.element.removeEventListener("keydown", handleKeyboardNavigation);
             chip.destroy();

package/dist/components/datepicker/datepicker.js

@@ -3,6 +3,7 @@ import { createBase, withElement } from "../../core/compose/component.js";
 import { withEvents, withDisabled, withLifecycle } from "../../core/compose/features/index.js";
 import { createElement } from "../../core/dom/create.js";
 import { setHTML } from "../../core/dom/html.js";
+import { activeElementOf, deepActiveElement } from "../../core/dom/focus.js";
 import { DATEPICKER_ICONS } from "./constants.js";
 import { PREFIX } from "../../core/config.js";
 import { createBaseConfig, getContainerConfig } from "./config.js";
@@ -144,7 +145,8 @@ const createDatePicker = (config = {}) => {
         }
         else
             return;
-        const active = doc.activeElement instanceof HTMLElement ? doc.activeElement.dataset.date : undefined;
+        const focused = activeElementOf(dialog);
+        const active = focused instanceof HTMLElement ? focused.dataset.date : undefined;
         render();
         if (active)
             dialog.querySelector(`[data-date="${active}"]`)?.focus({ preventScroll: true });
@@ -215,7 +217,8 @@ const createDatePicker = (config = {}) => {
         if (!navigationRequested)
             setDisplayDate(initial);
         navigationRequested = false;
-        returnFocus = doc.activeElement instanceof HTMLElement && doc.activeElement !== doc.body ? doc.activeElement : trigger;
+        const opener = deepActiveElement();
+        returnFocus = opener instanceof HTMLElement && opener !== doc.body ? opener : trigger;
         render();
         if (modal && typeof dialog.showModal === "function" && dialog.isConnected)
             dialog.showModal();
@@ -407,11 +410,12 @@ const createDatePicker = (config = {}) => {
         if (event.key === "Tab" && modal) {
             const elements = Array.from(dialog.querySelectorAll('button:not(:disabled):not([tabindex="-1"]), input:not(:disabled)'));
             const first = elements[0], last = elements.at(-1);
-            if (event.shiftKey && doc.activeElement === first) {
+            const focused = activeElementOf(dialog);
+            if (event.shiftKey && focused === first) {
                 event.preventDefault();
                 last?.focus();
             }
-            else if (!event.shiftKey && doc.activeElement === last) {
+            else if (!event.shiftKey && focused === last) {
                 event.preventDefault();
                 first?.focus();
             }
@@ -485,7 +489,8 @@ const createDatePicker = (config = {}) => {
         const page = Math.round(Math.abs(element.scrollLeft) / element.clientWidth) - 1;
         if (!page)
             return;
-        const active = doc.activeElement instanceof HTMLElement && dialog.contains(doc.activeElement) ? doc.activeElement : null;
+        const focused = activeElementOf(dialog);
+        const active = focused instanceof HTMLElement && dialog.contains(focused) ? focused : null;
         navigate(page);
         render(!!active?.dataset.date, active?.dataset.action);
     };

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,
@@ -239,6 +246,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 +255,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 +267,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 +280,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 +306,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 +330,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 +394,7 @@ export const withVisibility = (getComponent) => (component) => {
         open() {
             if (this.isOpen())
                 return;
-            previouslyFocusedElement = document.activeElement;
+            previouslyFocusedElement = deepActiveElement();
             const beforeOpenEvent = {
                 dialog: getComponent(),
                 defaultPrevented: false,
@@ -368,6 +407,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 +454,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 +490,12 @@ export const withVisibility = (getComponent) => (component) => {
             visibility.close();
         });
     }
+    if (top) {
+        onTopLayerClose(component.element, () => {
+            if (visibility.isOpen())
+                visibility.close();
+        });
+    }
     return {
         ...component,
         visibility,

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