material 3.3.4 → 3.4.1

package/dist/components/dialog/features.js

@@ -1,9 +1,7 @@
-import { getOverlayConfig } from "./config.js";
 import createButton from "../button/index.js";
-import { createDivider } from "../divider/index.js";
 import { addClass, removeClass } from "../../core/dom/classes.js";
 import { setHTML } from "../../core/dom/html.js";
-import { activeElementOf, deepActiveElement, tabStops, wrapTab } from "../../core/dom/focus.js";
+import { deepActiveElement, tabStops, wrapTab } from "../../core/dom/focus.js";
 import { hideFromTopLayer, onModalEscape, onTopLayerClose, showInTopLayer } from "../../core/dom/layer.js";
 const DIALOG_EVENTS = {
     OPEN: "open",
@@ -18,17 +16,8 @@ export const withStructure = (config, getComponent) => (component) => {
     const uid = `${component.getClass("dialog")}-${++dialogCount}`;
     const titleId = `${uid}-title`;
     const contentId = `${uid}-content`;
-    const overlayConfig = getOverlayConfig();
-    const overlay = document.createElement(overlayConfig.tag || "div");
+    const overlay = document.createElement("div");
     overlay.classList.add(component.getClass("dialog__overlay"));
-    if (overlayConfig.attributes &&
-        typeof overlayConfig.attributes === "object") {
-        Object.entries(overlayConfig.attributes).forEach(([key, value]) => {
-            if (key && typeof key === "string" && value !== undefined) {
-                overlay.setAttribute(key, String(value));
-            }
-        });
-    }
     if (config.zIndex) {
         overlay.style.zIndex = String(config.zIndex);
     }
@@ -95,10 +84,8 @@ export const withStructure = (config, getComponent) => (component) => {
         return footer;
     };
     const createDividerElement = () => {
-        const divider = createDivider({
-            variant: "full-width",
-            class: component.getClass("dialog__divider"),
-        });
+        const divider = document.createElement("hr");
+        divider.classList.add(component.getClass("dialog__divider"));
         return divider;
     };
     const header = createHeader();
@@ -129,16 +116,16 @@ export const withStructure = (config, getComponent) => (component) => {
     let footerDivider = null;
     if (config.divider) {
         headerDivider = createDividerElement();
-        headerDivider.element.classList.add(component.getClass("dialog__header-divider"));
-        component.element.appendChild(headerDivider.element);
+        headerDivider.classList.add(component.getClass("dialog__header-divider"));
+        component.element.appendChild(headerDivider);
         if (footer) {
             footerDivider = createDividerElement();
-            footerDivider.element.classList.add(component.getClass("dialog__footer-divider"));
+            footerDivider.classList.add(component.getClass("dialog__footer-divider"));
         }
     }
     component.element.appendChild(content);
     if (footerDivider) {
-        component.element.appendChild(footerDivider.element);
+        component.element.appendChild(footerDivider);
     }
     if (footer) {
         component.element.appendChild(footer);
@@ -170,29 +157,25 @@ export const withDivider = () => (component) => {
         divider: {
             toggleDivider(show) {
                 if (show && !component.structure.headerDivider) {
-                    const headerDivider = createDivider({
-                        variant: "full-width",
-                        class: `${component.getClass("dialog__divider")} ${component.getClass("dialog__header-divider")}`,
-                    });
-                    component.element.insertBefore(headerDivider.element, component.structure.content);
+                    const headerDivider = document.createElement("hr");
+                    headerDivider.classList.add(component.getClass("dialog__divider"), component.getClass("dialog__header-divider"));
+                    component.element.insertBefore(headerDivider, component.structure.content);
                     component.structure.headerDivider = headerDivider;
                     if (component.structure.footer &&
                         !component.structure.footerDivider) {
-                        const footerDivider = createDivider({
-                            variant: "full-width",
-                            class: `${component.getClass("dialog__divider")} ${component.getClass("dialog__footer-divider")}`,
-                        });
-                        component.element.insertBefore(footerDivider.element, component.structure.footer);
+                        const footerDivider = document.createElement("hr");
+                        footerDivider.classList.add(component.getClass("dialog__divider"), component.getClass("dialog__footer-divider"));
+                        component.element.insertBefore(footerDivider, component.structure.footer);
                         component.structure.footerDivider = footerDivider;
                     }
                 }
                 else if (!show) {
                     if (component.structure.headerDivider) {
-                        component.structure.headerDivider.element.remove();
+                        component.structure.headerDivider.remove();
                         component.structure.headerDivider = null;
                     }
                     if (component.structure.footerDivider) {
-                        component.structure.footerDivider.element.remove();
+                        component.structure.footerDivider.remove();
                         component.structure.footerDivider = null;
                     }
                 }
@@ -251,39 +234,42 @@ export const withVisibility = (getComponent) => (component) => {
     let showTimer;
     let afterOpenTimer;
     let afterCloseTimer;
+    let afterOpenWaiting = false;
     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;
     const inerted = [];
     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 === activeElementOf(el)));
-    function handleTabKey(e) {
-        if (e.key !== "Tab")
+    let focusFrame;
+    let focusView;
+    let focusRequest = 0;
+    let focusPending = false;
+    const cancelFocusFrame = () => {
+        focusRequest += 1;
+        focusPending = false;
+        if (focusFrame !== undefined) {
+            focusView?.cancelAnimationFrame(focusFrame);
+            focusFrame = undefined;
+            focusView = undefined;
+        }
+    };
+    const emitAfterOpen = () => {
+        afterOpenWaiting = false;
+        if (!opened || typeof component.emit !== "function")
             return;
-        const elements = focusable();
-        if (elements.length === 0) {
-            e.preventDefault();
-            component.element.focus();
+        component.emit(DIALOG_EVENTS.AFTER_OPEN, { dialog: getComponent() });
+    };
+    const afterOpenDue = () => {
+        afterOpenTimer = undefined;
+        if (focusPending) {
+            afterOpenWaiting = true;
             return;
         }
-        const first = elements[0];
-        const last = elements[elements.length - 1];
-        const active = activeElementOf(component.element);
-        if (e.shiftKey && (active === first || !component.element.contains(active))) {
-            last.focus();
-            e.preventDefault();
-        }
-        else if (!e.shiftKey && active === last) {
-            first.focus();
-            e.preventDefault();
-        }
-    }
+        emitAfterOpen();
+    };
     const inertBackground = () => {
         if (component.config.modal === false)
             return;
@@ -313,20 +299,76 @@ export const withVisibility = (getComponent) => (component) => {
             scrollLock = null;
         }
     };
+    let containerPosition = null;
+    const unscopeScrim = () => {
+        removeClass(component.overlay, `${component.getClass("dialog__overlay")}--contained`);
+        if (containerPosition === null)
+            return;
+        component.structure.container.style.position = containerPosition;
+        containerPosition = null;
+    };
+    const scopeScrim = () => {
+        const container = component.structure.container;
+        if (top || container === document.body)
+            return;
+        if (getComputedStyle(container).position === "static") {
+            containerPosition ?? (containerPosition = container.style.position);
+            container.style.position = "relative";
+        }
+        addClass(component.overlay, `${component.getClass("dialog__overlay")}--contained`);
+        if (!container.clientHeight ||
+            container.clientWidth < component.element.offsetWidth ||
+            container.clientHeight < component.element.offsetHeight) {
+            unscopeScrim();
+        }
+    };
     const handleWrap = (e) => wrapTab(component.element, e);
+    const focusWhenVisible = (target) => {
+        const view = target.ownerDocument.defaultView;
+        if (!view || typeof view.requestAnimationFrame !== "function") {
+            target.focus();
+            focusPending = false;
+            if (afterOpenWaiting)
+                emitAfterOpen();
+            return;
+        }
+        cancelFocusFrame();
+        const request = focusRequest;
+        const settle = () => {
+            focusFrame = undefined;
+            if (request !== focusRequest)
+                return;
+            if (!opened || !target.isConnected) {
+                focusPending = false;
+                if (afterOpenWaiting)
+                    emitAfterOpen();
+                return;
+            }
+            if (view.getComputedStyle(target).visibility !== "hidden") {
+                target.focus();
+                focusPending = false;
+                if (afterOpenWaiting)
+                    emitAfterOpen();
+                return;
+            }
+            focusPending = true;
+            focusFrame = view.requestAnimationFrame(settle);
+            focusView = view;
+        };
+        settle();
+    };
     const trapFocus = () => {
         inertBackground();
         if (component.config.autofocus !== false) {
             const requested = component.element.querySelector("[autofocus]");
-            const target = requested || (top ? tabStops(component.element) : focusable())[0] || component.element;
-            target.focus();
+            const target = requested || tabStops(component.element)[0] || component.element;
+            focusWhenVisible(target);
         }
         if (component.config.trapFocus !== false) {
-            component.element.addEventListener("keydown", top ? handleWrap : handleTabKey);
+            component.element.addEventListener("keydown", handleWrap);
         }
     };
     const releaseFocus = () => {
-        component.element.removeEventListener("keydown", handleTabKey);
         component.element.removeEventListener("keydown", handleWrap);
         releaseBackground();
         if (previouslyFocusedElement) {
@@ -390,6 +432,7 @@ export const withVisibility = (getComponent) => (component) => {
             component.element.setAttribute("open", "");
         }
     };
+    scopeScrim();
     if (isOpen) {
         if (top)
             showModal();
@@ -417,6 +460,8 @@ export const withVisibility = (getComponent) => (component) => {
                 return;
             opened = true;
             clearTimeout(afterCloseTimer);
+            afterOpenWaiting = false;
+            focusPending = false;
             if (top) {
                 showModal();
                 void component.element.offsetWidth;
@@ -426,9 +471,7 @@ export const withVisibility = (getComponent) => (component) => {
                 component.emit(DIALOG_EVENTS.OPEN, { dialog: getComponent() });
                 if (!opened)
                     return;
-                afterOpenTimer = setTimeout(() => {
-                    component.emit(DIALOG_EVENTS.AFTER_OPEN, { dialog: getComponent() });
-                }, openDuration);
+                afterOpenTimer = setTimeout(afterOpenDue, openDuration);
                 return;
             }
             if (component.element.parentNode !== component.overlay) {
@@ -438,6 +481,7 @@ export const withVisibility = (getComponent) => (component) => {
                 const container = component.structure.container || document.body;
                 container.appendChild(component.overlay);
             }
+            scopeScrim();
             setupEvents();
             if (typeof component.emit === "function") {
                 component.emit(DIALOG_EVENTS.OPEN, { dialog: getComponent() });
@@ -449,9 +493,7 @@ export const withVisibility = (getComponent) => (component) => {
                 addClass(component.element, `${component.getClass("dialog")}--visible`);
                 trapFocus();
                 if (typeof component.emit === "function") {
-                    afterOpenTimer = setTimeout(() => {
-                        component.emit(DIALOG_EVENTS.AFTER_OPEN, { dialog: getComponent() });
-                    }, openDuration);
+                    afterOpenTimer = setTimeout(afterOpenDue, openDuration);
                 }
             }, 10);
         },
@@ -474,6 +516,8 @@ export const withVisibility = (getComponent) => (component) => {
             opened = false;
             clearTimeout(showTimer);
             clearTimeout(afterOpenTimer);
+            afterOpenWaiting = false;
+            cancelFocusFrame();
             const dialogVisibleClass = `${component.getClass("dialog")}--visible`;
             const overlayVisibleClass = `${component.getClass("dialog__overlay")}--visible`;
             removeClass(component.element, dialogVisibleClass);
@@ -491,6 +535,7 @@ export const withVisibility = (getComponent) => (component) => {
                 if (!top && component.overlay && component.overlay.parentNode) {
                     component.overlay.parentNode.removeChild(component.overlay);
                 }
+                unscopeScrim();
                 if (typeof component.emit === "function") {
                     component.emit(DIALOG_EVENTS.AFTER_CLOSE, { dialog: getComponent() });
                 }
@@ -515,7 +560,10 @@ export const withVisibility = (getComponent) => (component) => {
             clearTimeout(showTimer);
             clearTimeout(afterOpenTimer);
             clearTimeout(afterCloseTimer);
+            afterOpenWaiting = false;
+            cancelFocusFrame();
             cleanupEvents();
+            unscopeScrim();
         },
     };
     if (component && component.on) {

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

@@ -1,5 +1,4 @@
 import type { ButtonComponent } from "../button/types.js";
-import type { DividerComponent } from "../divider/types.js";
 import type { EventCallback } from "../../core/state/emitter.js";
 export type DialogSize = 'small' | 'medium' | 'large' | 'fullwidth' | 'fullscreen';
 export type DialogAnimation = 'scale' | 'slide-up' | 'slide-down' | 'fade';
@@ -51,8 +50,8 @@ export interface DialogStructure {
     header: HTMLElement;
     content: HTMLElement;
     footer: HTMLElement | null;
-    headerDivider: DividerComponent | null;
-    footerDivider: DividerComponent | null;
+    headerDivider: HTMLElement | null;
+    footerDivider: HTMLElement | null;
     container: HTMLElement;
 }
 export interface DialogButtonRecord {

package/dist/components/search/features/input.js

@@ -76,7 +76,7 @@ export const withInput = (config, getComponent) => (component) => {
         const input = component.structure?.input;
         if (input) {
             input.placeholder = text;
-            input.setAttribute("aria-label", text);
+            input.setAttribute("aria-label", config.ariaLabel || text);
         }
     };
     const getPlaceholder = () => {

package/dist/components/search/features/structure.js

@@ -77,7 +77,7 @@ export const withStructure = (config) => (component) => {
     const inputAttributes = {
         type: "text",
         placeholder,
-        "aria-label": placeholder,
+        "aria-label": config.ariaLabel || placeholder,
         role: "combobox",
         "aria-autocomplete": "list",
         "aria-expanded": String(isViewState),

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

@@ -45,6 +45,7 @@ export interface SearchConfig {
     variant?: SearchVariant;
     disabled?: boolean;
     placeholder?: string;
+    ariaLabel?: string;
     value?: string;
     name?: string;
     leadingIcon?: string;

package/dist/components/select/features.js

@@ -29,6 +29,8 @@ export const withTextField = (config) => (component) => {
     });
     textField.element.classList.add(`${config.prefix || "mtrl"}-select`);
     if (textField.input) {
+        if (config.ariaLabel)
+            textField.input.setAttribute("aria-label", config.ariaLabel);
         const input = textField.input;
         input.addEventListener("keydown", (e) => {
             const allowedKeys = [

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

@@ -21,6 +21,7 @@ export interface SelectConfig {
     variant?: SelectVariant | string;
     density?: "default" | "compact" | string;
     label?: string;
+    ariaLabel?: string;
     name?: string;
     required?: boolean;
     menu?: {

package/dist/components/slider/features/dom.js

@@ -16,10 +16,8 @@ export const withDom = (config) => (component) => {
     setStyles(container, {
         position: "relative",
     });
-    const label = config.label || "";
-    const handleLabel = config.range && label ? `${label} minimum` : label;
-    const secondHandleLabel = label ? `${label} maximum` : "";
-    const handleElement = (index, handleValue, name) => {
+    const label = config.ariaLabel || config.label || "";
+    const handleElement = (index, handleValue) => {
         const attributes = {
             role: "slider",
             "aria-valuemin": String(min),
@@ -31,9 +29,6 @@ export const withDom = (config) => (component) => {
             "data-value": String(handleValue),
             "data-handle-index": String(index),
         };
-        if (name) {
-            attributes["aria-label"] = name;
-        }
         const element = createElement({
             tag: "div",
             className: getClass("slider__handle"),
@@ -61,15 +56,38 @@ export const withDom = (config) => (component) => {
         });
         return element;
     };
-    const handle = handleElement(0, value, handleLabel);
+    const handle = handleElement(0, value);
     const valueBubble = bubbleElement(0, value);
     let secondHandle;
     let secondValueBubble;
     if (config.range) {
         const secondValue = config.secondValue !== undefined ? config.secondValue : max;
-        secondHandle = handleElement(1, secondValue, secondHandleLabel);
+        secondHandle = handleElement(1, secondValue);
         secondValueBubble = bubbleElement(1, secondValue);
     }
+    [handle, secondHandle].forEach((target, index) => {
+        if (!target)
+            return;
+        const endpoint = config.range ? index ? "maximum" : "minimum" : "";
+        if (label)
+            target.setAttribute("aria-label", endpoint ? `${label} ${endpoint}` : label);
+        if (config.ariaLabelledBy) {
+            let labelledBy = config.ariaLabelledBy;
+            if (endpoint) {
+                const suffix = createElement({
+                    tag: "span",
+                    text: endpoint,
+                    attributes: {
+                        id: `${getClass("slider")}-${Math.random().toString(36).slice(2, 9)}`,
+                        hidden: true,
+                    },
+                    container: target,
+                });
+                labelledBy += ` ${suffix.id}`;
+            }
+            target.setAttribute("aria-labelledby", labelledBy);
+        }
+    });
     const name = config.name;
     const formFields = name
         ? [

package/dist/components/tabs/tab.js

@@ -203,7 +203,8 @@ export const createTab = (config = {}) => {
             },
         };
         const announceBadge = () => {
-            const count = tab.badge?.isVisible() ? tab.badge.getContent() : "";
+            const count = tab.badge?.isVisible()
+                ? tab.badge.element.getAttribute("aria-label") || tab.badge.getContent() : "";
             const label = baseConfig.ariaLabel || button.getText();
             const name = [label, count].filter(Boolean).join(", ");
             if (name !== label) {

package/dist/components/text-field/config.js

@@ -1,10 +1,30 @@
 import { createComponentConfig, createElementConfig, } from "../../core/config/component.js";
 import { TEXT_FIELD_DEFAULTS } from "./constants.js";
+import { warnDev } from "../../core/utils/warn.js";
 export const defaultConfig = {
     type: TEXT_FIELD_DEFAULTS.TYPE,
     variant: TEXT_FIELD_DEFAULTS.VARIANT,
 };
-export const createBaseConfig = (config = {}) => createComponentConfig(defaultConfig, config, "text-field");
+export const createBaseConfig = (config = {}) => {
+    if ( /*#__PURE__*/(() => {
+        try {
+            return process.env.NODE_ENV !== "production";
+        }
+        catch {
+            return false;
+        }
+    })() && process.env.NODE_ENV !== "production") {
+        const KEY_LIST = "type variant density name label value placeholder required noAsterisk disabled readonly maxLength pattern autocomplete leadingIcon trailingIcon trailingIconLabel onTrailingClick supportingText error prefixText suffixText class prefix componentName className parent id title tabIndex style data role ariaLabel ariaDescribedBy ariaLabelledBy ariaHidden multiline";
+        const _complete = true;
+        const _sound = true;
+        const CONFIG_KEYS = KEY_LIST.split(" ");
+        for (const key of Object.keys(config)) {
+            if (!CONFIG_KEYS.includes(key))
+                warnDev("text-field", `unknown config key "${key}"`);
+        }
+    }
+    return createComponentConfig(defaultConfig, config, "text-field");
+};
 export const getElementConfig = (config) => createElementConfig(config, {
     tag: "div",
     className: config.class,

package/dist/components/text-field/types.d.ts

@@ -29,6 +29,7 @@ export interface TextFieldConfig {
     density?: TextFieldDensity | string;
     name?: string;
     label?: string;
+    ariaLabel?: string;
     value?: string;
     placeholder?: string;
     required?: boolean;

package/dist/core/compose/features/badge.js

@@ -34,7 +34,7 @@ export const withBadge = (config) => (component) => {
         const badgeClass = badge.getClass("badge");
         const shows = badge.element.classList.contains(`${badgeClass}--positioned`)
             && !badge.element.classList.contains(`${badgeClass}--invisible`)
-            && badge.getLabel() !== "";
+            && (badge.getLabel() !== "" || (badge.element.getAttribute("aria-label") ?? "") !== "");
         if (shows)
             addIdRef(target, "aria-describedby", badgeId);
         else

package/dist/core/compose/features/textinput.d.ts

@@ -10,6 +10,7 @@ export interface TextInputConfig {
     autocomplete?: string;
     value?: string;
     placeholder?: string;
+    ariaLabel?: string;
     readonly?: boolean;
 }
 export interface TextInputFeature {

package/dist/core/compose/features/textinput.js

@@ -13,6 +13,7 @@ export const withTextInput = (config = {}) => (component) => {
         autocomplete: config.autocomplete,
         value: isMultiline ? undefined : config.value || "",
         placeholder: config.placeholder || " ",
+        "aria-label": config.ariaLabel,
     };
     if (!isMultiline) {
         attributes.type = config.type || "text";

package/dist/core/dom/focus.js

@@ -10,8 +10,8 @@ export const deepActiveElement = () => {
 };
 const isTabStop = (element) => element.tabIndex !== undefined &&
     element.tabIndex >= 0 &&
-    !element.matches(":disabled, [inert] *, [inert]") &&
-    element.getClientRects().length > 0;
+    !element.matches(":disabled, [inert] *, [inert], [aria-hidden='true']") &&
+    (element.offsetWidth > 0 || element.getClientRects().length > 0);
 export const tabStops = (container) => {
     const found = [];
     const visit = (element) => {

package/dist/elements/css/dialog.css

@@ -1 +1 @@
-.mtrl-dialog__overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0);visibility:hidden;z-index:1000;display:flex;align-items:center;justify-content:center;overflow:auto;padding:24px;box-sizing:border-box;transition:background-color 150ms linear,visibility 0s linear 150ms}.mtrl-dialog__overlay--visible{background-color:color-mix(in srgb, var(--mtrl-sys-color-scrim) 32%, transparent);visibility:visible;transition:background-color 500ms linear,visibility 0s}.mtrl-dialog{position:relative;background-color:var(--mtrl-sys-color-surface-container-high);color:var(--mtrl-sys-color-on-surface);border-radius:var(--mtrl-sys-shape-corner-extra-large, 28px);max-width:560px;min-width:280px;width:100%;margin:auto;box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15);transform-origin:top center;transform:translateY(-50px) scaleY(0.35);opacity:0;pointer-events:none;transition:transform 150ms cubic-bezier(0.3, 0, 0.8, 0.15),opacity 50ms linear 100ms}.mtrl-dialog .mtrl-dialog__header,.mtrl-dialog .mtrl-dialog__content,.mtrl-dialog .mtrl-dialog__footer{opacity:0;transition:opacity 100ms linear}.mtrl-dialog--visible{transform:translateY(0) scaleY(1);opacity:1;pointer-events:auto;transition:transform 500ms cubic-bezier(0.3, 0, 0, 1),opacity 50ms linear}.mtrl-dialog--visible .mtrl-dialog__header,.mtrl-dialog--visible .mtrl-dialog__content{opacity:1;transition:opacity 250ms linear 50ms}.mtrl-dialog--visible .mtrl-dialog__footer{opacity:1;transition:opacity 300ms linear 150ms}.mtrl-dialog--small{width:80%;max-width:360px}.mtrl-dialog--medium{width:90%;max-width:560px}.mtrl-dialog--large{width:95%;max-width:560px}.mtrl-dialog--fullwidth{width:100%;max-width:none;margin:24px}.mtrl-dialog--fullscreen{width:100%;height:100%;max-width:none;max-height:none;margin:0;border-radius:0;transform-origin:center center;transform:translateY(24px)}.mtrl-dialog--fullscreen.mtrl-dialog--visible{transform:translateY(0)}.mtrl-dialog--slide-up{transform:translateY(24px) scaleY(0.35)}.mtrl-dialog--slide-up.mtrl-dialog--visible{transform:translateY(0) scaleY(1)}.mtrl-dialog--slide-down{transform:translateY(-24px) scaleY(0.35)}.mtrl-dialog--slide-down.mtrl-dialog--visible{transform:translateY(0) scaleY(1)}.mtrl-dialog--fade{transform:none}.mtrl-dialog--fade.mtrl-dialog--visible{transform:none}.mtrl-dialog--scale{transform-origin:center center;transform:scale(0.8)}.mtrl-dialog--scale.mtrl-dialog--visible{transform:scale(1)}dialog.mtrl-dialog{position:fixed;inset:0;height:fit-content;max-height:calc(100% - 48px);padding:0;border:0;overflow:visible;transition:transform 150ms cubic-bezier(0.3, 0, 0.8, 0.15),opacity 50ms linear 100ms,display 150ms allow-discrete,overlay 150ms allow-discrete}dialog.mtrl-dialog.mtrl-dialog--visible{transform:none;transition:transform 500ms cubic-bezier(0.3, 0, 0, 1),opacity 50ms linear}dialog.mtrl-dialog.mtrl-dialog--fullwidth{width:auto}dialog.mtrl-dialog.mtrl-dialog--fullscreen{height:100%;max-height:none}dialog.mtrl-dialog::backdrop{background-color:rgba(0,0,0,0);transition:background-color 150ms linear,display 150ms allow-discrete,overlay 150ms allow-discrete}dialog.mtrl-dialog.mtrl-dialog--visible::backdrop{background-color:color-mix(in srgb, var(--mtrl-sys-color-scrim) 32%, transparent);transition:background-color 500ms linear}.mtrl-dialog__icon{display:flex;align-items:center;justify-content:center;padding:24px 24px 0 24px;color:var(--mtrl-sys-color-secondary)}.mtrl-dialog__icon svg,.mtrl-dialog__icon .mtrl-dialog__icon-content{width:24px;height:24px}.mtrl-dialog__icon+.mtrl-dialog__header .mtrl-dialog__header-content{text-align:center}.mtrl-dialog__icon+.mtrl-dialog__header .mtrl-dialog__header-title{text-align:center}.mtrl-dialog__icon+.mtrl-dialog__header .mtrl-dialog__header-subtitle{text-align:center}.mtrl-dialog__header{display:flex;align-items:flex-start;justify-content:space-between;padding:24px 24px 16px 24px}.mtrl-dialog__icon+.mtrl-dialog__header{padding-top:16px}.mtrl-dialog__header-content{flex:1}.mtrl-dialog__header-title{margin:0;color:var(--mtrl-sys-color-on-surface);font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:24px;line-height:32px;letter-spacing:0;font-weight:400}.mtrl-dialog__header-subtitle{margin:4px 0 0 0;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-dialog__header-close{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:-8px -8px 0 0;padding:8px;background:rgba(0,0,0,0);border:none;border-radius:50%;cursor:pointer;color:var(--mtrl-sys-color-on-surface-variant);transition:background-color 100ms cubic-bezier(0.2, 0, 0, 1);position:relative}.mtrl-dialog__header-close:hover{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, transparent)}.mtrl-dialog__header-close:focus{outline:none;background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent)}.mtrl-dialog__header-close:focus-visible{outline:2px solid var(--mtrl-sys-color-primary);outline-offset:2px}.mtrl-dialog__header-close:active{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent)}.mtrl-dialog__header-close svg{width:24px;height:24px}.mtrl-dialog__header-close::after{content:"";position:absolute;width:48px;height:48px;top:50%;left:50%;transform:translate(-50%, -50%)}:where(.mtrl-rtl) .mtrl-dialog__header-close,:where(:host(.mtrl-rtl)) .mtrl-dialog__header-close,[dir=rtl] .mtrl-dialog__header-close:not(:where(.mtrl-ltr,.mtrl-ltr *)){margin:-8px 0 0 -8px}.mtrl-dialog__header:empty{display:none}.mtrl-dialog__header:not(:has(*))+.mtrl-dialog__content,.mtrl-dialog>.mtrl-dialog__content:first-child{padding-top:24px}.mtrl-dialog__content{padding:0 24px;color:var(--mtrl-sys-color-on-surface-variant);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;overflow:visible}.mtrl-dialog__content--scrollable{overflow-y:auto;max-height:60vh;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) rgba(0,0,0,.05)}.mtrl-dialog__content--scrollable::-webkit-scrollbar{width:8px}.mtrl-dialog__content--scrollable::-webkit-scrollbar-track{background:rgba(0,0,0,.05)}.mtrl-dialog__content--scrollable::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:4px}.mtrl-dialog__content p{margin:0 0 16px 0}.mtrl-dialog__content p:last-child{margin-bottom:0}.mtrl-dialog__content--emphasis{color:var(--mtrl-sys-color-on-surface)}.mtrl-dialog__content:last-child{padding-bottom:24px}.mtrl-dialog__footer{display:flex;align-items:center;justify-content:flex-end;padding:24px 24px 24px 24px;gap:8px}.mtrl-dialog__footer--left{justify-content:flex-start}.mtrl-dialog__footer--center{justify-content:center}.mtrl-dialog__footer--space-between{justify-content:space-between}.mtrl-dialog__footer--stacked{flex-direction:column-reverse;align-items:stretch;gap:8px}.mtrl-dialog--fullscreen{display:flex;flex-direction:column}.mtrl-dialog--fullscreen .mtrl-dialog__header{display:flex;align-items:center;min-height:56px;padding:0 24px;gap:8px}.mtrl-dialog--fullscreen .mtrl-dialog__header-close{order:-1;margin:0 0 0 -8px}:where(.mtrl-rtl) .mtrl-dialog--fullscreen .mtrl-dialog__header-close,:where(:host(.mtrl-rtl)) .mtrl-dialog--fullscreen .mtrl-dialog__header-close,[dir=rtl] .mtrl-dialog--fullscreen .mtrl-dialog__header-close:not(:where(.mtrl-ltr,.mtrl-ltr *)){margin:0 -8px 0 0}.mtrl-dialog--fullscreen .mtrl-dialog__header-title{font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:22px;line-height:28px;letter-spacing:0;font-weight:400;text-align:start}.mtrl-dialog--fullscreen .mtrl-dialog__content{flex:1;overflow-y:auto;padding:24px}.mtrl-dialog--fullscreen .mtrl-dialog__footer{min-height:56px;padding:0 24px;box-sizing:border-box}.mtrl-dialog__header-divider,.mtrl-dialog__footer-divider{margin:0;border:none;height:1px;background-color:var(--mtrl-sys-color-outline-variant)}@media(prefers-reduced-motion: reduce){.mtrl-dialog,.mtrl-dialog--visible,.mtrl-dialog__overlay,.mtrl-dialog__overlay--visible{transition:opacity 100ms linear}.mtrl-dialog,.mtrl-dialog--visible,.mtrl-dialog--scale,.mtrl-dialog--slide-up,.mtrl-dialog--slide-down,.mtrl-dialog--fullscreen{transform:none}}@media(forced-colors: active){.mtrl-dialog{border:2px solid CurrentColor}.mtrl-dialog__header-divider,.mtrl-dialog__footer-divider{background-color:CurrentColor}.mtrl-dialog__header-close:focus-visible{outline:2px solid CurrentColor}}@media(max-width: 600px){.mtrl-dialog{min-width:280px;width:calc(100% - 32px);max-width:100%;margin:16px;transform-origin:bottom center}.mtrl-dialog--fullscreen{width:100%;height:100%;margin:0;transform-origin:center center}.mtrl-dialog__overlay{padding:16px;align-items:flex-end}.mtrl-dialog__overlay.mtrl-dialog--fullscreen{padding:0}.mtrl-dialog__content--scrollable{max-height:50vh}.mtrl-dialog--slide-up{transform:translateY(24px)}.mtrl-dialog--slide-up.mtrl-dialog--visible{transform:translateY(0)}.mtrl-dialog__footer--responsive{flex-direction:column-reverse;align-items:stretch}}@media print{.mtrl-dialog__overlay{position:static;background:none;padding:0}.mtrl-dialog{box-shadow:none;border:1px solid #000;max-width:100%;transform:none;opacity:1}}
+.mtrl-dialog__overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0);visibility:hidden;z-index:1000;display:flex;align-items:center;justify-content:center;overflow:auto;padding:24px;box-sizing:border-box;transition:background-color 150ms linear,visibility 0s linear 150ms}.mtrl-dialog__overlay--contained{position:absolute}.mtrl-dialog__overlay--visible{background-color:color-mix(in srgb, var(--mtrl-sys-color-scrim) 32%, transparent);visibility:visible;transition:background-color 500ms linear,visibility 0s}.mtrl-dialog{position:relative;background-color:var(--mtrl-sys-color-surface-container-high);color:var(--mtrl-sys-color-on-surface);border-radius:var(--mtrl-sys-shape-corner-extra-large, 28px);max-width:560px;min-width:280px;width:100%;margin:auto;box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15);transform-origin:top center;transform:translateY(-50px) scaleY(0.35);opacity:0;pointer-events:none;transition:transform 150ms cubic-bezier(0.3, 0, 0.8, 0.15),opacity 50ms linear 100ms}.mtrl-dialog .mtrl-dialog__header,.mtrl-dialog .mtrl-dialog__content,.mtrl-dialog .mtrl-dialog__footer{opacity:0;transition:opacity 100ms linear}.mtrl-dialog--visible{transform:translateY(0) scaleY(1);opacity:1;pointer-events:auto;transition:transform 500ms cubic-bezier(0.3, 0, 0, 1),opacity 50ms linear}.mtrl-dialog--visible .mtrl-dialog__header,.mtrl-dialog--visible .mtrl-dialog__content{opacity:1;transition:opacity 250ms linear 50ms}.mtrl-dialog--visible .mtrl-dialog__footer{opacity:1;transition:opacity 300ms linear 150ms}.mtrl-dialog--small{width:80%;max-width:360px}.mtrl-dialog--medium{width:90%;max-width:560px}.mtrl-dialog--large{width:95%;max-width:560px}.mtrl-dialog--fullwidth{width:100%;max-width:none;margin:24px}.mtrl-dialog--fullscreen{width:100%;height:100%;max-width:none;max-height:none;margin:0;border-radius:0;transform-origin:center center;transform:translateY(24px)}.mtrl-dialog--fullscreen.mtrl-dialog--visible{transform:translateY(0)}.mtrl-dialog--slide-up{transform:translateY(24px) scaleY(0.35)}.mtrl-dialog--slide-up.mtrl-dialog--visible{transform:translateY(0) scaleY(1)}.mtrl-dialog--slide-down{transform:translateY(-24px) scaleY(0.35)}.mtrl-dialog--slide-down.mtrl-dialog--visible{transform:translateY(0) scaleY(1)}.mtrl-dialog--fade{transform:none}.mtrl-dialog--fade.mtrl-dialog--visible{transform:none}.mtrl-dialog--scale{transform-origin:center center;transform:scale(0.8)}.mtrl-dialog--scale.mtrl-dialog--visible{transform:scale(1)}dialog.mtrl-dialog{position:fixed;inset:0;height:fit-content;max-height:calc(100% - 48px);padding:0;border:0;overflow:visible;transition:transform 150ms cubic-bezier(0.3, 0, 0.8, 0.15),opacity 50ms linear 100ms,display 150ms allow-discrete,overlay 150ms allow-discrete}dialog.mtrl-dialog.mtrl-dialog--visible{transform:none;transition:transform 500ms cubic-bezier(0.3, 0, 0, 1),opacity 50ms linear}dialog.mtrl-dialog.mtrl-dialog--fullwidth{width:auto}dialog.mtrl-dialog.mtrl-dialog--fullscreen{height:100%;max-height:none}dialog.mtrl-dialog::backdrop{background-color:rgba(0,0,0,0);transition:background-color 150ms linear,display 150ms allow-discrete,overlay 150ms allow-discrete}dialog.mtrl-dialog.mtrl-dialog--visible::backdrop{background-color:color-mix(in srgb, var(--mtrl-sys-color-scrim) 32%, transparent);transition:background-color 500ms linear}.mtrl-dialog__icon{display:flex;align-items:center;justify-content:center;padding:24px 24px 0 24px;color:var(--mtrl-sys-color-secondary)}.mtrl-dialog__icon svg,.mtrl-dialog__icon .mtrl-dialog__icon-content{width:24px;height:24px}.mtrl-dialog__icon+.mtrl-dialog__header .mtrl-dialog__header-content{text-align:center}.mtrl-dialog__icon+.mtrl-dialog__header .mtrl-dialog__header-title{text-align:center}.mtrl-dialog__icon+.mtrl-dialog__header .mtrl-dialog__header-subtitle{text-align:center}.mtrl-dialog__header{display:flex;align-items:flex-start;justify-content:space-between;padding:24px 24px 16px 24px}.mtrl-dialog__icon+.mtrl-dialog__header{padding-top:16px}.mtrl-dialog__header-content{flex:1}.mtrl-dialog__header-title{margin:0;color:var(--mtrl-sys-color-on-surface);font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:24px;line-height:32px;letter-spacing:0;font-weight:400}.mtrl-dialog__header-subtitle{margin:4px 0 0 0;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-dialog__header-close{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:-8px -8px 0 0;padding:8px;background:rgba(0,0,0,0);border:none;border-radius:50%;cursor:pointer;color:var(--mtrl-sys-color-on-surface-variant);transition:background-color 100ms cubic-bezier(0.2, 0, 0, 1);position:relative}.mtrl-dialog__header-close:hover{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, transparent)}.mtrl-dialog__header-close:focus{outline:none;background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent)}.mtrl-dialog__header-close:focus-visible{outline:2px solid var(--mtrl-sys-color-primary);outline-offset:2px}.mtrl-dialog__header-close:active{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent)}.mtrl-dialog__header-close svg{width:24px;height:24px}.mtrl-dialog__header-close::after{content:"";position:absolute;width:48px;height:48px;top:50%;left:50%;transform:translate(-50%, -50%)}:where(.mtrl-rtl) .mtrl-dialog__header-close,:where(:host(.mtrl-rtl)) .mtrl-dialog__header-close,[dir=rtl] .mtrl-dialog__header-close:not(:where(.mtrl-ltr,.mtrl-ltr *)){margin:-8px 0 0 -8px}.mtrl-dialog__header:empty{display:none}.mtrl-dialog__header:not(:has(*))+.mtrl-dialog__content,.mtrl-dialog>.mtrl-dialog__content:first-child{padding-top:24px}.mtrl-dialog__content{padding:0 24px;color:var(--mtrl-sys-color-on-surface-variant);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;overflow:visible}.mtrl-dialog__content--scrollable{overflow-y:auto;max-height:60vh;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) rgba(0,0,0,.05)}.mtrl-dialog__content--scrollable::-webkit-scrollbar{width:8px}.mtrl-dialog__content--scrollable::-webkit-scrollbar-track{background:rgba(0,0,0,.05)}.mtrl-dialog__content--scrollable::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:4px}.mtrl-dialog__content p{margin:0 0 16px 0}.mtrl-dialog__content p:last-child{margin-bottom:0}.mtrl-dialog__content--emphasis{color:var(--mtrl-sys-color-on-surface)}.mtrl-dialog__content:last-child{padding-bottom:24px}.mtrl-dialog__footer{display:flex;align-items:center;justify-content:flex-end;padding:24px 24px 24px 24px;gap:8px}.mtrl-dialog__footer--left{justify-content:flex-start}.mtrl-dialog__footer--center{justify-content:center}.mtrl-dialog__footer--space-between{justify-content:space-between}.mtrl-dialog__footer--stacked{flex-direction:column-reverse;align-items:stretch;gap:8px}.mtrl-dialog--fullscreen{display:flex;flex-direction:column}.mtrl-dialog--fullscreen .mtrl-dialog__header{display:flex;align-items:center;min-height:56px;padding:0 24px;gap:8px}.mtrl-dialog--fullscreen .mtrl-dialog__header-close{order:-1;margin:0 0 0 -8px}:where(.mtrl-rtl) .mtrl-dialog--fullscreen .mtrl-dialog__header-close,:where(:host(.mtrl-rtl)) .mtrl-dialog--fullscreen .mtrl-dialog__header-close,[dir=rtl] .mtrl-dialog--fullscreen .mtrl-dialog__header-close:not(:where(.mtrl-ltr,.mtrl-ltr *)){margin:0 -8px 0 0}.mtrl-dialog--fullscreen .mtrl-dialog__header-title{font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:22px;line-height:28px;letter-spacing:0;font-weight:400;text-align:start}.mtrl-dialog--fullscreen .mtrl-dialog__content{flex:1;overflow-y:auto;padding:24px}.mtrl-dialog--fullscreen .mtrl-dialog__footer{min-height:56px;padding:0 24px;box-sizing:border-box}.mtrl-dialog__header-divider,.mtrl-dialog__footer-divider{margin:0;border:none;height:1px;background-color:var(--mtrl-sys-color-outline-variant)}@media(prefers-reduced-motion: reduce){.mtrl-dialog,.mtrl-dialog--visible,.mtrl-dialog__overlay,.mtrl-dialog__overlay--visible{transition:opacity 100ms linear}.mtrl-dialog,.mtrl-dialog--visible,.mtrl-dialog--scale,.mtrl-dialog--slide-up,.mtrl-dialog--slide-down,.mtrl-dialog--fullscreen{transform:none}}@media(forced-colors: active){.mtrl-dialog{border:2px solid CurrentColor}.mtrl-dialog__header-divider,.mtrl-dialog__footer-divider{background-color:CurrentColor}.mtrl-dialog__header-close:focus-visible{outline:2px solid CurrentColor}}@media(max-width: 600px){.mtrl-dialog{min-width:280px;width:calc(100% - 32px);max-width:100%;margin:16px;transform-origin:bottom center}.mtrl-dialog--fullscreen{width:100%;height:100%;margin:0;transform-origin:center center}.mtrl-dialog__overlay{padding:16px;align-items:flex-end}.mtrl-dialog__overlay.mtrl-dialog--fullscreen{padding:0}.mtrl-dialog__content--scrollable{max-height:50vh}.mtrl-dialog--slide-up{transform:translateY(24px)}.mtrl-dialog--slide-up.mtrl-dialog--visible{transform:translateY(0)}.mtrl-dialog__footer--responsive{flex-direction:column-reverse;align-items:stretch}}@media print{.mtrl-dialog__overlay{position:static;background:none;padding:0}.mtrl-dialog{box-shadow:none;border:1px solid #000;max-width:100%;transform:none;opacity:1}}

package/dist/elements/css/dialog.js

@@ -2,4 +2,4 @@ import "./ripple.js";
 import "./button.js";
 import "./divider.js";
 import { registerStyles } from "../styles.js";
-registerStyles({ "dialog": ".mtrl-dialog__overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0);visibility:hidden;z-index:1000;display:flex;align-items:center;justify-content:center;overflow:auto;padding:24px;box-sizing:border-box;transition:background-color 150ms linear,visibility 0s linear 150ms}.mtrl-dialog__overlay--visible{background-color:color-mix(in srgb, var(--mtrl-sys-color-scrim) 32%, transparent);visibility:visible;transition:background-color 500ms linear,visibility 0s}.mtrl-dialog{position:relative;background-color:var(--mtrl-sys-color-surface-container-high);color:var(--mtrl-sys-color-on-surface);border-radius:var(--mtrl-sys-shape-corner-extra-large, 28px);max-width:560px;min-width:280px;width:100%;margin:auto;box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15);transform-origin:top center;transform:translateY(-50px) scaleY(0.35);opacity:0;pointer-events:none;transition:transform 150ms cubic-bezier(0.3, 0, 0.8, 0.15),opacity 50ms linear 100ms}.mtrl-dialog .mtrl-dialog__header,.mtrl-dialog .mtrl-dialog__content,.mtrl-dialog .mtrl-dialog__footer{opacity:0;transition:opacity 100ms linear}.mtrl-dialog--visible{transform:translateY(0) scaleY(1);opacity:1;pointer-events:auto;transition:transform 500ms cubic-bezier(0.3, 0, 0, 1),opacity 50ms linear}.mtrl-dialog--visible .mtrl-dialog__header,.mtrl-dialog--visible .mtrl-dialog__content{opacity:1;transition:opacity 250ms linear 50ms}.mtrl-dialog--visible .mtrl-dialog__footer{opacity:1;transition:opacity 300ms linear 150ms}.mtrl-dialog--small{width:80%;max-width:360px}.mtrl-dialog--medium{width:90%;max-width:560px}.mtrl-dialog--large{width:95%;max-width:560px}.mtrl-dialog--fullwidth{width:100%;max-width:none;margin:24px}.mtrl-dialog--fullscreen{width:100%;height:100%;max-width:none;max-height:none;margin:0;border-radius:0;transform-origin:center center;transform:translateY(24px)}.mtrl-dialog--fullscreen.mtrl-dialog--visible{transform:translateY(0)}.mtrl-dialog--slide-up{transform:translateY(24px) scaleY(0.35)}.mtrl-dialog--slide-up.mtrl-dialog--visible{transform:translateY(0) scaleY(1)}.mtrl-dialog--slide-down{transform:translateY(-24px) scaleY(0.35)}.mtrl-dialog--slide-down.mtrl-dialog--visible{transform:translateY(0) scaleY(1)}.mtrl-dialog--fade{transform:none}.mtrl-dialog--fade.mtrl-dialog--visible{transform:none}.mtrl-dialog--scale{transform-origin:center center;transform:scale(0.8)}.mtrl-dialog--scale.mtrl-dialog--visible{transform:scale(1)}dialog.mtrl-dialog{position:fixed;inset:0;height:fit-content;max-height:calc(100% - 48px);padding:0;border:0;overflow:visible;transition:transform 150ms cubic-bezier(0.3, 0, 0.8, 0.15),opacity 50ms linear 100ms,display 150ms allow-discrete,overlay 150ms allow-discrete}dialog.mtrl-dialog.mtrl-dialog--visible{transform:none;transition:transform 500ms cubic-bezier(0.3, 0, 0, 1),opacity 50ms linear}dialog.mtrl-dialog.mtrl-dialog--fullwidth{width:auto}dialog.mtrl-dialog.mtrl-dialog--fullscreen{height:100%;max-height:none}dialog.mtrl-dialog::backdrop{background-color:rgba(0,0,0,0);transition:background-color 150ms linear,display 150ms allow-discrete,overlay 150ms allow-discrete}dialog.mtrl-dialog.mtrl-dialog--visible::backdrop{background-color:color-mix(in srgb, var(--mtrl-sys-color-scrim) 32%, transparent);transition:background-color 500ms linear}.mtrl-dialog__icon{display:flex;align-items:center;justify-content:center;padding:24px 24px 0 24px;color:var(--mtrl-sys-color-secondary)}.mtrl-dialog__icon svg,.mtrl-dialog__icon .mtrl-dialog__icon-content{width:24px;height:24px}.mtrl-dialog__icon+.mtrl-dialog__header .mtrl-dialog__header-content{text-align:center}.mtrl-dialog__icon+.mtrl-dialog__header .mtrl-dialog__header-title{text-align:center}.mtrl-dialog__icon+.mtrl-dialog__header .mtrl-dialog__header-subtitle{text-align:center}.mtrl-dialog__header{display:flex;align-items:flex-start;justify-content:space-between;padding:24px 24px 16px 24px}.mtrl-dialog__icon+.mtrl-dialog__header{padding-top:16px}.mtrl-dialog__header-content{flex:1}.mtrl-dialog__header-title{margin:0;color:var(--mtrl-sys-color-on-surface);font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:24px;line-height:32px;letter-spacing:0;font-weight:400}.mtrl-dialog__header-subtitle{margin:4px 0 0 0;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-dialog__header-close{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:-8px -8px 0 0;padding:8px;background:rgba(0,0,0,0);border:none;border-radius:50%;cursor:pointer;color:var(--mtrl-sys-color-on-surface-variant);transition:background-color 100ms cubic-bezier(0.2, 0, 0, 1);position:relative}.mtrl-dialog__header-close:hover{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, transparent)}.mtrl-dialog__header-close:focus{outline:none;background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent)}.mtrl-dialog__header-close:focus-visible{outline:2px solid var(--mtrl-sys-color-primary);outline-offset:2px}.mtrl-dialog__header-close:active{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent)}.mtrl-dialog__header-close svg{width:24px;height:24px}.mtrl-dialog__header-close::after{content:\"\";position:absolute;width:48px;height:48px;top:50%;left:50%;transform:translate(-50%, -50%)}:where(.mtrl-rtl) .mtrl-dialog__header-close,:where(:host(.mtrl-rtl)) .mtrl-dialog__header-close,[dir=rtl] .mtrl-dialog__header-close:not(:where(.mtrl-ltr,.mtrl-ltr *)){margin:-8px 0 0 -8px}.mtrl-dialog__header:empty{display:none}.mtrl-dialog__header:not(:has(*))+.mtrl-dialog__content,.mtrl-dialog>.mtrl-dialog__content:first-child{padding-top:24px}.mtrl-dialog__content{padding:0 24px;color:var(--mtrl-sys-color-on-surface-variant);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;overflow:visible}.mtrl-dialog__content--scrollable{overflow-y:auto;max-height:60vh;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) rgba(0,0,0,.05)}.mtrl-dialog__content--scrollable::-webkit-scrollbar{width:8px}.mtrl-dialog__content--scrollable::-webkit-scrollbar-track{background:rgba(0,0,0,.05)}.mtrl-dialog__content--scrollable::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:4px}.mtrl-dialog__content p{margin:0 0 16px 0}.mtrl-dialog__content p:last-child{margin-bottom:0}.mtrl-dialog__content--emphasis{color:var(--mtrl-sys-color-on-surface)}.mtrl-dialog__content:last-child{padding-bottom:24px}.mtrl-dialog__footer{display:flex;align-items:center;justify-content:flex-end;padding:24px 24px 24px 24px;gap:8px}.mtrl-dialog__footer--left{justify-content:flex-start}.mtrl-dialog__footer--center{justify-content:center}.mtrl-dialog__footer--space-between{justify-content:space-between}.mtrl-dialog__footer--stacked{flex-direction:column-reverse;align-items:stretch;gap:8px}.mtrl-dialog--fullscreen{display:flex;flex-direction:column}.mtrl-dialog--fullscreen .mtrl-dialog__header{display:flex;align-items:center;min-height:56px;padding:0 24px;gap:8px}.mtrl-dialog--fullscreen .mtrl-dialog__header-close{order:-1;margin:0 0 0 -8px}:where(.mtrl-rtl) .mtrl-dialog--fullscreen .mtrl-dialog__header-close,:where(:host(.mtrl-rtl)) .mtrl-dialog--fullscreen .mtrl-dialog__header-close,[dir=rtl] .mtrl-dialog--fullscreen .mtrl-dialog__header-close:not(:where(.mtrl-ltr,.mtrl-ltr *)){margin:0 -8px 0 0}.mtrl-dialog--fullscreen .mtrl-dialog__header-title{font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:22px;line-height:28px;letter-spacing:0;font-weight:400;text-align:start}.mtrl-dialog--fullscreen .mtrl-dialog__content{flex:1;overflow-y:auto;padding:24px}.mtrl-dialog--fullscreen .mtrl-dialog__footer{min-height:56px;padding:0 24px;box-sizing:border-box}.mtrl-dialog__header-divider,.mtrl-dialog__footer-divider{margin:0;border:none;height:1px;background-color:var(--mtrl-sys-color-outline-variant)}@media(prefers-reduced-motion: reduce){.mtrl-dialog,.mtrl-dialog--visible,.mtrl-dialog__overlay,.mtrl-dialog__overlay--visible{transition:opacity 100ms linear}.mtrl-dialog,.mtrl-dialog--visible,.mtrl-dialog--scale,.mtrl-dialog--slide-up,.mtrl-dialog--slide-down,.mtrl-dialog--fullscreen{transform:none}}@media(forced-colors: active){.mtrl-dialog{border:2px solid CurrentColor}.mtrl-dialog__header-divider,.mtrl-dialog__footer-divider{background-color:CurrentColor}.mtrl-dialog__header-close:focus-visible{outline:2px solid CurrentColor}}@media(max-width: 600px){.mtrl-dialog{min-width:280px;width:calc(100% - 32px);max-width:100%;margin:16px;transform-origin:bottom center}.mtrl-dialog--fullscreen{width:100%;height:100%;margin:0;transform-origin:center center}.mtrl-dialog__overlay{padding:16px;align-items:flex-end}.mtrl-dialog__overlay.mtrl-dialog--fullscreen{padding:0}.mtrl-dialog__content--scrollable{max-height:50vh}.mtrl-dialog--slide-up{transform:translateY(24px)}.mtrl-dialog--slide-up.mtrl-dialog--visible{transform:translateY(0)}.mtrl-dialog__footer--responsive{flex-direction:column-reverse;align-items:stretch}}@media print{.mtrl-dialog__overlay{position:static;background:none;padding:0}.mtrl-dialog{box-shadow:none;border:1px solid #000;max-width:100%;transform:none;opacity:1}}" });
+registerStyles({ "dialog": ".mtrl-dialog__overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0);visibility:hidden;z-index:1000;display:flex;align-items:center;justify-content:center;overflow:auto;padding:24px;box-sizing:border-box;transition:background-color 150ms linear,visibility 0s linear 150ms}.mtrl-dialog__overlay--contained{position:absolute}.mtrl-dialog__overlay--visible{background-color:color-mix(in srgb, var(--mtrl-sys-color-scrim) 32%, transparent);visibility:visible;transition:background-color 500ms linear,visibility 0s}.mtrl-dialog{position:relative;background-color:var(--mtrl-sys-color-surface-container-high);color:var(--mtrl-sys-color-on-surface);border-radius:var(--mtrl-sys-shape-corner-extra-large, 28px);max-width:560px;min-width:280px;width:100%;margin:auto;box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15);transform-origin:top center;transform:translateY(-50px) scaleY(0.35);opacity:0;pointer-events:none;transition:transform 150ms cubic-bezier(0.3, 0, 0.8, 0.15),opacity 50ms linear 100ms}.mtrl-dialog .mtrl-dialog__header,.mtrl-dialog .mtrl-dialog__content,.mtrl-dialog .mtrl-dialog__footer{opacity:0;transition:opacity 100ms linear}.mtrl-dialog--visible{transform:translateY(0) scaleY(1);opacity:1;pointer-events:auto;transition:transform 500ms cubic-bezier(0.3, 0, 0, 1),opacity 50ms linear}.mtrl-dialog--visible .mtrl-dialog__header,.mtrl-dialog--visible .mtrl-dialog__content{opacity:1;transition:opacity 250ms linear 50ms}.mtrl-dialog--visible .mtrl-dialog__footer{opacity:1;transition:opacity 300ms linear 150ms}.mtrl-dialog--small{width:80%;max-width:360px}.mtrl-dialog--medium{width:90%;max-width:560px}.mtrl-dialog--large{width:95%;max-width:560px}.mtrl-dialog--fullwidth{width:100%;max-width:none;margin:24px}.mtrl-dialog--fullscreen{width:100%;height:100%;max-width:none;max-height:none;margin:0;border-radius:0;transform-origin:center center;transform:translateY(24px)}.mtrl-dialog--fullscreen.mtrl-dialog--visible{transform:translateY(0)}.mtrl-dialog--slide-up{transform:translateY(24px) scaleY(0.35)}.mtrl-dialog--slide-up.mtrl-dialog--visible{transform:translateY(0) scaleY(1)}.mtrl-dialog--slide-down{transform:translateY(-24px) scaleY(0.35)}.mtrl-dialog--slide-down.mtrl-dialog--visible{transform:translateY(0) scaleY(1)}.mtrl-dialog--fade{transform:none}.mtrl-dialog--fade.mtrl-dialog--visible{transform:none}.mtrl-dialog--scale{transform-origin:center center;transform:scale(0.8)}.mtrl-dialog--scale.mtrl-dialog--visible{transform:scale(1)}dialog.mtrl-dialog{position:fixed;inset:0;height:fit-content;max-height:calc(100% - 48px);padding:0;border:0;overflow:visible;transition:transform 150ms cubic-bezier(0.3, 0, 0.8, 0.15),opacity 50ms linear 100ms,display 150ms allow-discrete,overlay 150ms allow-discrete}dialog.mtrl-dialog.mtrl-dialog--visible{transform:none;transition:transform 500ms cubic-bezier(0.3, 0, 0, 1),opacity 50ms linear}dialog.mtrl-dialog.mtrl-dialog--fullwidth{width:auto}dialog.mtrl-dialog.mtrl-dialog--fullscreen{height:100%;max-height:none}dialog.mtrl-dialog::backdrop{background-color:rgba(0,0,0,0);transition:background-color 150ms linear,display 150ms allow-discrete,overlay 150ms allow-discrete}dialog.mtrl-dialog.mtrl-dialog--visible::backdrop{background-color:color-mix(in srgb, var(--mtrl-sys-color-scrim) 32%, transparent);transition:background-color 500ms linear}.mtrl-dialog__icon{display:flex;align-items:center;justify-content:center;padding:24px 24px 0 24px;color:var(--mtrl-sys-color-secondary)}.mtrl-dialog__icon svg,.mtrl-dialog__icon .mtrl-dialog__icon-content{width:24px;height:24px}.mtrl-dialog__icon+.mtrl-dialog__header .mtrl-dialog__header-content{text-align:center}.mtrl-dialog__icon+.mtrl-dialog__header .mtrl-dialog__header-title{text-align:center}.mtrl-dialog__icon+.mtrl-dialog__header .mtrl-dialog__header-subtitle{text-align:center}.mtrl-dialog__header{display:flex;align-items:flex-start;justify-content:space-between;padding:24px 24px 16px 24px}.mtrl-dialog__icon+.mtrl-dialog__header{padding-top:16px}.mtrl-dialog__header-content{flex:1}.mtrl-dialog__header-title{margin:0;color:var(--mtrl-sys-color-on-surface);font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:24px;line-height:32px;letter-spacing:0;font-weight:400}.mtrl-dialog__header-subtitle{margin:4px 0 0 0;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-dialog__header-close{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:-8px -8px 0 0;padding:8px;background:rgba(0,0,0,0);border:none;border-radius:50%;cursor:pointer;color:var(--mtrl-sys-color-on-surface-variant);transition:background-color 100ms cubic-bezier(0.2, 0, 0, 1);position:relative}.mtrl-dialog__header-close:hover{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, transparent)}.mtrl-dialog__header-close:focus{outline:none;background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent)}.mtrl-dialog__header-close:focus-visible{outline:2px solid var(--mtrl-sys-color-primary);outline-offset:2px}.mtrl-dialog__header-close:active{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent)}.mtrl-dialog__header-close svg{width:24px;height:24px}.mtrl-dialog__header-close::after{content:\"\";position:absolute;width:48px;height:48px;top:50%;left:50%;transform:translate(-50%, -50%)}:where(.mtrl-rtl) .mtrl-dialog__header-close,:where(:host(.mtrl-rtl)) .mtrl-dialog__header-close,[dir=rtl] .mtrl-dialog__header-close:not(:where(.mtrl-ltr,.mtrl-ltr *)){margin:-8px 0 0 -8px}.mtrl-dialog__header:empty{display:none}.mtrl-dialog__header:not(:has(*))+.mtrl-dialog__content,.mtrl-dialog>.mtrl-dialog__content:first-child{padding-top:24px}.mtrl-dialog__content{padding:0 24px;color:var(--mtrl-sys-color-on-surface-variant);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;overflow:visible}.mtrl-dialog__content--scrollable{overflow-y:auto;max-height:60vh;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) rgba(0,0,0,.05)}.mtrl-dialog__content--scrollable::-webkit-scrollbar{width:8px}.mtrl-dialog__content--scrollable::-webkit-scrollbar-track{background:rgba(0,0,0,.05)}.mtrl-dialog__content--scrollable::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:4px}.mtrl-dialog__content p{margin:0 0 16px 0}.mtrl-dialog__content p:last-child{margin-bottom:0}.mtrl-dialog__content--emphasis{color:var(--mtrl-sys-color-on-surface)}.mtrl-dialog__content:last-child{padding-bottom:24px}.mtrl-dialog__footer{display:flex;align-items:center;justify-content:flex-end;padding:24px 24px 24px 24px;gap:8px}.mtrl-dialog__footer--left{justify-content:flex-start}.mtrl-dialog__footer--center{justify-content:center}.mtrl-dialog__footer--space-between{justify-content:space-between}.mtrl-dialog__footer--stacked{flex-direction:column-reverse;align-items:stretch;gap:8px}.mtrl-dialog--fullscreen{display:flex;flex-direction:column}.mtrl-dialog--fullscreen .mtrl-dialog__header{display:flex;align-items:center;min-height:56px;padding:0 24px;gap:8px}.mtrl-dialog--fullscreen .mtrl-dialog__header-close{order:-1;margin:0 0 0 -8px}:where(.mtrl-rtl) .mtrl-dialog--fullscreen .mtrl-dialog__header-close,:where(:host(.mtrl-rtl)) .mtrl-dialog--fullscreen .mtrl-dialog__header-close,[dir=rtl] .mtrl-dialog--fullscreen .mtrl-dialog__header-close:not(:where(.mtrl-ltr,.mtrl-ltr *)){margin:0 -8px 0 0}.mtrl-dialog--fullscreen .mtrl-dialog__header-title{font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:22px;line-height:28px;letter-spacing:0;font-weight:400;text-align:start}.mtrl-dialog--fullscreen .mtrl-dialog__content{flex:1;overflow-y:auto;padding:24px}.mtrl-dialog--fullscreen .mtrl-dialog__footer{min-height:56px;padding:0 24px;box-sizing:border-box}.mtrl-dialog__header-divider,.mtrl-dialog__footer-divider{margin:0;border:none;height:1px;background-color:var(--mtrl-sys-color-outline-variant)}@media(prefers-reduced-motion: reduce){.mtrl-dialog,.mtrl-dialog--visible,.mtrl-dialog__overlay,.mtrl-dialog__overlay--visible{transition:opacity 100ms linear}.mtrl-dialog,.mtrl-dialog--visible,.mtrl-dialog--scale,.mtrl-dialog--slide-up,.mtrl-dialog--slide-down,.mtrl-dialog--fullscreen{transform:none}}@media(forced-colors: active){.mtrl-dialog{border:2px solid CurrentColor}.mtrl-dialog__header-divider,.mtrl-dialog__footer-divider{background-color:CurrentColor}.mtrl-dialog__header-close:focus-visible{outline:2px solid CurrentColor}}@media(max-width: 600px){.mtrl-dialog{min-width:280px;width:calc(100% - 32px);max-width:100%;margin:16px;transform-origin:bottom center}.mtrl-dialog--fullscreen{width:100%;height:100%;margin:0;transform-origin:center center}.mtrl-dialog__overlay{padding:16px;align-items:flex-end}.mtrl-dialog__overlay.mtrl-dialog--fullscreen{padding:0}.mtrl-dialog__content--scrollable{max-height:50vh}.mtrl-dialog--slide-up{transform:translateY(24px)}.mtrl-dialog--slide-up.mtrl-dialog--visible{transform:translateY(0)}.mtrl-dialog__footer--responsive{flex-direction:column-reverse;align-items:stretch}}@media print{.mtrl-dialog__overlay{position:static;background:none;padding:0}.mtrl-dialog{box-shadow:none;border:1px solid #000;max-width:100%;transform:none;opacity:1}}" });