mtrl 0.10.0-next.1 → 0.10.0-next.3

package/README.md

@@ -136,23 +136,44 @@ Button progress and card actions load on demand; enable code splitting in your b
 
 ## Web components and frameworks (experimental)
 
-From `0.10.0-next.1` (`npm install mtrl@next`), components also ship as custom elements, with thin adapters for React, Vue, Svelte and Solid. Button, switch and tabs are available so far; more follow through 0.10.x. The API may still change.
+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">
   import 'mtrl/elements/css';            // the elements' styles
   import { defineAll } from 'mtrl/elements';
-  defineAll();                           // registers <m-button>, <m-switch>, <m-tabs>, <m-tab>
+  defineAll();                           // registers every element (<m-button>, <m-switch>, …)
 </script>
 
-<m-switch name="wifi" checked>Wi-Fi</m-switch>
+<form>
+  <m-textfield name="email" type="email" label="Email" required></m-textfield>
+  <m-radios name="plan" value="free" aria-label="Plan">
+    <m-radio value="free">Free</m-radio>
+    <m-radio value="pro">Pro</m-radio>
+  </m-radios>
+  <m-switch name="news" checked>Newsletter</m-switch>
+  <m-button type="submit">Sign up</m-button>
+</form>
+
 <m-tabs value="songs">
   <m-tab value="songs">Songs</m-tab>
   <m-tab value="albums">Albums</m-tab>
 </m-tabs>
 ```
 
-The page still loads mtrl's base styles and a theme (see [Styles](#styles)); the elements render in shadow DOM and pick up the theme's tokens. Attributes are defaults and properties the live state, as on native controls; form controls take part in forms, reset and validation.
+The page still loads mtrl's base styles and a theme (see [Styles](#styles)); the elements render in shadow DOM and pick up the theme's tokens. Attributes are defaults and properties the live state, as on native controls: a `checked` or `value` attribute sets the state until the user or a script changes it, and `form.reset()` goes back to it. Form controls take part in forms (their host's `name`), reset, validation and back-navigation restore.
 
 | Framework | Import | Two-way binding |
 |-----------|--------|-----------------|
@@ -161,7 +182,7 @@ The page still loads mtrl's base styles and a theme (see [Styles](#styles)); the
 | Svelte 5 | `import { Switch } from 'mtrl/svelte'` | `bind:checked` |
 | Solid | `import { Switch } from 'mtrl/solid'` | `checked` + `onChange` |
 
-Each framework is an optional peer dependency; mtrl installs none of them. All adapters render on the server and hydrate.
+Each framework is an optional peer dependency; mtrl installs none of them. All adapters render on the server and hydrate. Angular apps use the elements directly, with `CUSTOM_ELEMENTS_SCHEMA`.
 
 ## Building your own components
 

package/dist/README.md

@@ -136,23 +136,44 @@ Button progress and card actions load on demand; enable code splitting in your b
 
 ## Web components and frameworks (experimental)
 
-From `0.10.0-next.1` (`npm install mtrl@next`), components also ship as custom elements, with thin adapters for React, Vue, Svelte and Solid. Button, switch and tabs are available so far; more follow through 0.10.x. The API may still change.
+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">
   import 'mtrl/elements/css';            // the elements' styles
   import { defineAll } from 'mtrl/elements';
-  defineAll();                           // registers <m-button>, <m-switch>, <m-tabs>, <m-tab>
+  defineAll();                           // registers every element (<m-button>, <m-switch>, …)
 </script>
 
-<m-switch name="wifi" checked>Wi-Fi</m-switch>
+<form>
+  <m-textfield name="email" type="email" label="Email" required></m-textfield>
+  <m-radios name="plan" value="free" aria-label="Plan">
+    <m-radio value="free">Free</m-radio>
+    <m-radio value="pro">Pro</m-radio>
+  </m-radios>
+  <m-switch name="news" checked>Newsletter</m-switch>
+  <m-button type="submit">Sign up</m-button>
+</form>
+
 <m-tabs value="songs">
   <m-tab value="songs">Songs</m-tab>
   <m-tab value="albums">Albums</m-tab>
 </m-tabs>
 ```
 
-The page still loads mtrl's base styles and a theme (see [Styles](#styles)); the elements render in shadow DOM and pick up the theme's tokens. Attributes are defaults and properties the live state, as on native controls; form controls take part in forms, reset and validation.
+The page still loads mtrl's base styles and a theme (see [Styles](#styles)); the elements render in shadow DOM and pick up the theme's tokens. Attributes are defaults and properties the live state, as on native controls: a `checked` or `value` attribute sets the state until the user or a script changes it, and `form.reset()` goes back to it. Form controls take part in forms (their host's `name`), reset, validation and back-navigation restore.
 
 | Framework | Import | Two-way binding |
 |-----------|--------|-----------------|
@@ -161,7 +182,7 @@ The page still loads mtrl's base styles and a theme (see [Styles](#styles)); the
 | Svelte 5 | `import { Switch } from 'mtrl/svelte'` | `bind:checked` |
 | Solid | `import { Switch } from 'mtrl/solid'` | `checked` + `onChange` |
 
-Each framework is an optional peer dependency; mtrl installs none of them. All adapters render on the server and hydrate.
+Each framework is an optional peer dependency; mtrl installs none of them. All adapters render on the server and hydrate. Angular apps use the elements directly, with `CUSTOM_ELEMENTS_SCHEMA`.
 
 ## Building your own components
 

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/constants.d.ts

@@ -101,4 +101,5 @@ export declare const DATEPICKER_ICONS: {
     readonly edit: "<svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"m3 17.25 11.06-11.06 3.75 3.75L6.75 21H3v-3.75ZM20.71 7.04l-1.83 1.83-3.75-3.75 1.83-1.83a1 1 0 0 1 1.41 0l2.34 2.34a1 1 0 0 1 0 1.41Z\"/></svg>";
     readonly previous: "<svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"m15.4 7.4-1.4-1.4-6 6 6 6 1.4-1.4-4.6-4.6Z\"/></svg>";
     readonly next: "<svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"m8.6 7.4 1.4-1.4 6 6-6 6-1.4-1.4 4.6-4.6Z\"/></svg>";
+    readonly close: "<svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12Z\"/></svg>";
 };

package/dist/components/datepicker/constants.js

@@ -53,4 +53,5 @@ export const DATEPICKER_ICONS = {
     edit: '<svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" aria-hidden="true"><path d="m3 17.25 11.06-11.06 3.75 3.75L6.75 21H3v-3.75ZM20.71 7.04l-1.83 1.83-3.75-3.75 1.83-1.83a1 1 0 0 1 1.41 0l2.34 2.34a1 1 0 0 1 0 1.41Z"/></svg>',
     previous: '<svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" aria-hidden="true"><path d="m15.4 7.4-1.4-1.4-6 6 6 6 1.4-1.4-4.6-4.6Z"/></svg>',
     next: '<svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" aria-hidden="true"><path d="m8.6 7.4 1.4-1.4 6 6-6 6-1.4-1.4 4.6-4.6Z"/></svg>',
+    close: '<svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" aria-hidden="true"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12Z"/></svg>',
 };

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";
@@ -33,10 +34,10 @@ const createDatePicker = (config = {}) => {
     const today = parseDate(new Date());
     const state = {
         id, prefix: PREFIX, label: settings.label || "Select date", selectedDate: null, rangeEndDate: null,
-        currentView: ["month", "year"].includes(settings.initialView ?? "") ? settings.initialView : "day",
+        currentView: settings.variant !== "fullscreen" && ["month", "year"].includes(settings.initialView ?? "") ? settings.initialView : "day",
         currentMonth: today.getMonth(), currentYear: today.getFullYear(), focusedDate: today,
         minDate: parseDate(settings.minDate ?? null), maxDate: parseDate(settings.maxDate ?? null),
-        dateFormat: settings.dateFormat || "MM/DD/YYYY", variant: settings.variant === "modal" || settings.variant === "modal-input" ? settings.variant : "docked",
+        dateFormat: settings.dateFormat || "MM/DD/YYYY", variant: settings.variant === "modal" || settings.variant === "modal-input" || settings.variant === "fullscreen" ? settings.variant : "docked",
         selectionMode: settings.selectionMode === "range" ? "range" : "single", inputMode: settings.variant === "modal-input",
         specialDates: (settings.specialDates ?? []).map(item => ({ ...item })),
         isAllowed: date => (!state.minDate || date >= state.minDate) && (!state.maxDate || date <= state.maxDate) && !state.specialDates.some(item => { const special = parseDate(item.date); return item.disabled && special && isSameDay(date, special); }),
@@ -73,6 +74,8 @@ const createDatePicker = (config = {}) => {
     dialog.id = `${id}-dialog`;
     dialog.className = cls("calendar");
     dialog.classList.add(base.getClass(`datepicker--${modal ? "modal" : "docked"}`));
+    if (state.variant === "fullscreen")
+        dialog.classList.add(base.getClass("datepicker--fullscreen"));
     dialog.setAttribute("aria-modal", String(modal));
     if (settings.animate)
         dialog.classList.add(base.getClass("datepicker--animate"));
@@ -105,11 +108,66 @@ const createDatePicker = (config = {}) => {
         const element = track();
         if (element?.clientWidth)
             element.scrollLeft = (rtl(element) ? -1 : 1) * element.clientWidth;
+        const years = dialog.querySelector(`.${cls("years")}`);
+        const year = years?.querySelector('[aria-pressed="true"]');
+        if (years && year)
+            years.scrollTop = year.offsetTop - (years.clientHeight - year.offsetHeight) / 2;
+    };
+    const monthIndex = (date) => date.getFullYear() * 12 + date.getMonth();
+    const fromIndex = (index) => new Date(Math.floor(index / 12), index % 12, 1);
+    const list = () => dialog.querySelector(`.${cls("list")}`);
+    const limits = () => [state.minDate ? monthIndex(state.minDate) : -Infinity, state.maxDate ? monthIndex(state.maxDate) : Infinity];
+    let shiftBy = null;
+    const ensureWindow = () => {
+        if (state.variant !== "fullscreen")
+            return;
+        const focus = state.currentYear * 12 + state.currentMonth;
+        const start = state.listStart ? monthIndex(state.listStart) : NaN;
+        if (start <= focus && focus < start + (state.listLength ?? 0))
+            return;
+        const [min, max] = limits();
+        const first = Math.max(min, focus - 12), last = Math.min(max, focus + 12);
+        state.listStart = fromIndex(first);
+        state.listLength = last - first + 1;
+    };
+    const extend = (element) => {
+        const [min, max] = limits();
+        const start = monthIndex(state.listStart), end = start + state.listLength - 1;
+        const margin = element.clientHeight;
+        if (element.scrollTop < margin && start > min) {
+            const first = Math.max(min, start - 12);
+            state.listStart = fromIndex(first);
+            state.listLength = end - first + 1;
+            shiftBy = element.scrollHeight;
+        }
+        else if (element.scrollHeight - element.scrollTop - element.clientHeight < margin && end < max) {
+            state.listLength = Math.min(max, end + 12) - start + 1;
+        }
+        else
+            return;
+        const focused = activeElementOf(dialog);
+        const active = focused instanceof HTMLElement ? focused.dataset.date : undefined;
+        render();
+        if (active)
+            dialog.querySelector(`[data-date="${active}"]`)?.focus({ preventScroll: true });
+    };
+    const reveal = () => {
+        const element = list();
+        const section = element?.querySelector(`[data-month-key="${state.currentYear}-${state.currentMonth}"]`);
+        if (element && section)
+            element.scrollTop = section.offsetTop;
     };
     const render = (focus = false, action) => {
         if (!opened || destroyed)
             return;
+        ensureWindow();
+        const previous = list();
+        const kept = previous && { top: previous.scrollTop, height: previous.scrollHeight };
         dialog.replaceChildren(renderCalendar(state), announcement);
+        const current = list();
+        if (current && kept)
+            current.scrollTop = kept.top + (shiftBy === null ? 0 : current.scrollHeight - kept.height);
+        shiftBy = null;
         centre();
         announcement.textContent = new Date(state.currentYear, state.currentMonth, 1).toLocaleDateString("en-US", { month: "long", year: "numeric" });
         if (action)
@@ -150,6 +208,7 @@ const createDatePicker = (config = {}) => {
         opened = true;
         resetDraft();
         state.inputMode = state.variant === "modal-input";
+        state.listStart = undefined;
         let initial = committed ?? today;
         if (state.minDate && initial < state.minDate)
             initial = state.minDate;
@@ -158,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();
@@ -169,6 +229,7 @@ const createDatePicker = (config = {}) => {
         if (modal)
             unlock = lockScroll(doc);
         centre();
+        reveal();
         trigger.setAttribute("aria-expanded", "true");
         focusCurrent();
         base.emit("open", { value: getValue() });
@@ -256,7 +317,7 @@ const createDatePicker = (config = {}) => {
             render(true);
     };
     const navigate = (amount) => {
-        const count = state.currentView === "day" ? amount : state.currentView === "month" ? amount * 12 : amount * 12 * 21;
+        const count = state.currentView === "day" ? amount : amount * 12;
         const anchor = new Date(state.currentYear, state.currentMonth, 1);
         anchor.setDate(Math.min(state.focusedDate.getDate(), new Date(state.currentYear, state.currentMonth + 1, 0).getDate()));
         setDisplayDate(addMonths(anchor, count));
@@ -349,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();
             }
@@ -363,10 +425,11 @@ const createDatePicker = (config = {}) => {
         if (target?.dataset.date) {
             const date = parseDate(target.dataset.date);
             let next;
+            const ahead = rtl(dialog) ? -1 : 1;
             if (event.key === "ArrowLeft")
-                next = addDays(date, -1);
+                next = addDays(date, -ahead);
             else if (event.key === "ArrowRight")
-                next = addDays(date, 1);
+                next = addDays(date, ahead);
             else if (event.key === "ArrowUp")
                 next = addDays(date, -7);
             else if (event.key === "ArrowDown")
@@ -395,7 +458,8 @@ const createDatePicker = (config = {}) => {
         else if (target?.hasAttribute('data-month') || target?.hasAttribute('data-year')) {
             const buttons = Array.from(dialog.querySelectorAll('[data-month], [data-year]'));
             let index = buttons.indexOf(target);
-            const delta = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -3, ArrowDown: 3 }[event.key];
+            const ahead = rtl(dialog) ? -1 : 1;
+            const delta = { ArrowLeft: -ahead, ArrowRight: ahead, ArrowUp: -3, ArrowDown: 3 }[event.key];
             if (event.key === "Home")
                 index = 0;
             else if (event.key === "End")
@@ -425,11 +489,16 @@ 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);
     };
     const onScroll = (event) => {
+        if (event.type === "scroll" && event.target instanceof HTMLElement && event.target === list()) {
+            extend(event.target);
+            return;
+        }
         if (!(event.target instanceof HTMLElement) || event.target !== track())
             return;
         if (event.type === "scrollend") {