material 1.0.3 → 3.0.0-next.0

package/dist/elements/define.js

@@ -0,0 +1,528 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+import { MOUNT, DISPOSE } from "./lifecycle.js";
+import { PREFIX } from "../core/config.js";
+import { applyStyles, DEFAULT_PREFIX, hasStyles, registerStyles } from "./styles.js";
+export { DEFAULT_PREFIX };
+export const SHADOW_BASE_STYLES = ["ripple"];
+export const BASE_HOST_STYLES = ":host{display:inline-block}:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}" +
+    "@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}";
+export const hostStyleText = (spec) => BASE_HOST_STYLES + (spec.hostStyles ?? "");
+const camel = (name) => name.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+const kebab = (name) => name.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+const read = (host, name, type) => {
+    const raw = host.getAttribute(name);
+    if (type === "boolean")
+        return raw !== null;
+    if (raw === null)
+        return null;
+    if (type === "number") {
+        const n = Number(raw);
+        return Number.isNaN(n) ? null : n;
+    }
+    return raw;
+};
+const write = (host, name, type, value) => {
+    if (type === "boolean")
+        host.toggleAttribute(name, value !== false && value !== null && value !== undefined);
+    else if (value === null || value === undefined)
+        host.removeAttribute(name);
+    else
+        host.setAttribute(name, String(value));
+};
+const CLASS_PREFIX = `${PREFIX}-`;
+const partNames = (node) => {
+    const names = [];
+    for (const name of Array.from(node.classList)) {
+        if (!name.startsWith(CLASS_PREFIX) || /--/.test(name))
+            continue;
+        const bem = name.slice(CLASS_PREFIX.length);
+        const at = bem.indexOf("__");
+        const part = at < 0 ? bem : bem.slice(at + 2);
+        if (!names.includes(part))
+            names.push(part);
+    }
+    return names;
+};
+const isDeclarativeTemplate = (node) => node.nodeType === 1 && node.localName === "template" && node.hasAttribute("shadowrootmode");
+const removeDeclarativeTemplates = (host) => {
+    for (const child of Array.from(host.children))
+        if (isDeclarativeTemplate(child))
+            child.remove();
+};
+const hasContent = (host) => Array.from(host.childNodes).some((node) => (node.nodeType === 1 && !isDeclarativeTemplate(node)) || (node.nodeType === 3 && (node.textContent ?? "").trim() !== ""));
+export const createElementClass = (spec) => {
+    var _MElement_instances, _MElement_pending, _MElement_restoreState, _MElement_silent, _MElement_dirty, _MElement_cleanup, _MElement_observer, _MElement_parts, _MElement_slot, _MElement_quietly, _MElement_upgradeProperties, _MElement_config, _MElement_build, _MElement_exposeParts, _MElement_teardown, _MElement_rebuild, _MElement_syncForm;
+    const backed = [...(spec.model ? [spec.model] : []), ...(spec.defaults ?? [])];
+    const backing = new Set(backed.map(kebab));
+    class MElement extends HTMLElement {
+        get dirty() {
+            return __classPrivateFieldGet(this, _MElement_dirty, "f");
+        }
+        constructor() {
+            super();
+            _MElement_instances.add(this);
+            this.component = null;
+            _MElement_pending.set(this, new Map());
+            _MElement_restoreState.set(this, null);
+            _MElement_silent.set(this, 0);
+            _MElement_dirty.set(this, false);
+            _MElement_cleanup.set(this, []);
+            _MElement_observer.set(this, null);
+            _MElement_parts.set(this, null);
+            _MElement_slot.set(this, null);
+            this.attachShadow({ mode: "open", delegatesFocus: true });
+            this.internals = spec.form && typeof this.attachInternals === "function" ? this.attachInternals() : null;
+            if (backed.length) {
+                for (const [event, eventSpec] of Object.entries(spec.events ?? {})) {
+                    if (eventSpec.state)
+                        continue;
+                    this.addEventListener(event, (e) => {
+                        if (e.target === this)
+                            __classPrivateFieldSet(this, _MElement_dirty, true, "f");
+                    });
+                }
+            }
+        }
+        [(_MElement_pending = new WeakMap(), _MElement_restoreState = new WeakMap(), _MElement_silent = new WeakMap(), _MElement_dirty = new WeakMap(), _MElement_cleanup = new WeakMap(), _MElement_observer = new WeakMap(), _MElement_parts = new WeakMap(), _MElement_slot = new WeakMap(), _MElement_instances = new WeakSet(), MOUNT)]() {
+            this.connectedCallback();
+            __classPrivateFieldGet(this, _MElement_instances, "m", _MElement_exposeParts).call(this, this.shadowRoot);
+        }
+        [DISPOSE]() {
+            __classPrivateFieldGet(this, _MElement_instances, "m", _MElement_teardown).call(this);
+        }
+        connectedCallback() {
+            removeDeclarativeTemplates(this);
+            __classPrivateFieldGet(this, _MElement_instances, "m", _MElement_upgradeProperties).call(this);
+            if (!this.component)
+                __classPrivateFieldGet(this, _MElement_instances, "m", _MElement_build).call(this);
+        }
+        disconnectedCallback() {
+            queueMicrotask(() => {
+                if (!this.isConnected)
+                    __classPrivateFieldGet(this, _MElement_instances, "m", _MElement_teardown).call(this);
+            });
+        }
+        attributeChangedCallback(name, previous, next) {
+            if (!this.component || previous === next)
+                return;
+            if (spec.slot && name === spec.slot.attribute) {
+                if (__classPrivateFieldGet(this, _MElement_slot, "f"))
+                    __classPrivateFieldGet(this, _MElement_slot, "f").textContent = next ?? "";
+                else if (next)
+                    __classPrivateFieldGet(this, _MElement_instances, "m", _MElement_rebuild).call(this, true);
+                return;
+            }
+            const attribute = spec.attributes?.[name];
+            if (!attribute)
+                return;
+            if (__classPrivateFieldGet(this, _MElement_dirty, "f") && backing.has(name))
+                return;
+            if (attribute.update) {
+                __classPrivateFieldGet(this, _MElement_instances, "m", _MElement_quietly).call(this, () => attribute.update?.(this.component, read(this, name, attribute.type), this));
+                __classPrivateFieldGet(this, _MElement_instances, "m", _MElement_syncForm).call(this);
+            }
+            else {
+                __classPrivateFieldGet(this, _MElement_instances, "m", _MElement_rebuild).call(this, true);
+            }
+        }
+        formResetCallback() {
+            __classPrivateFieldSet(this, _MElement_dirty, false, "f");
+            __classPrivateFieldGet(this, _MElement_pending, "f").clear();
+            __classPrivateFieldGet(this, _MElement_instances, "m", _MElement_rebuild).call(this, false);
+        }
+        formStateRestoreCallback(state) {
+            if (typeof state !== "string" || !spec.form?.restore)
+                return;
+            __classPrivateFieldSet(this, _MElement_dirty, true, "f");
+            if (!this.component) {
+                __classPrivateFieldSet(this, _MElement_restoreState, state, "f");
+                return;
+            }
+            __classPrivateFieldGet(this, _MElement_instances, "m", _MElement_quietly).call(this, () => spec.form?.restore?.(this.component, state));
+            __classPrivateFieldGet(this, _MElement_instances, "m", _MElement_syncForm).call(this);
+        }
+        formDisabledCallback(disabled) {
+            const form = spec.form;
+            if (this.component && form?.disable)
+                __classPrivateFieldGet(this, _MElement_instances, "m", _MElement_quietly).call(this, () => form.disable?.(this.component, disabled));
+        }
+        getProperty(name) {
+            const property = spec.properties?.[name];
+            if (!property)
+                return undefined;
+            return this.component ? property.get(this.component) : __classPrivateFieldGet(this, _MElement_pending, "f").get(name);
+        }
+        setProperty(name, value) {
+            const property = spec.properties?.[name];
+            if (!property)
+                return;
+            if (backed.includes(name))
+                __classPrivateFieldSet(this, _MElement_dirty, true, "f");
+            if (!this.component) {
+                __classPrivateFieldGet(this, _MElement_pending, "f").set(name, value);
+                return;
+            }
+            __classPrivateFieldGet(this, _MElement_instances, "m", _MElement_quietly).call(this, () => property.set(this.component, value));
+            __classPrivateFieldGet(this, _MElement_instances, "m", _MElement_syncForm).call(this);
+        }
+        callMethod(name, args) {
+            const component = this.component;
+            const method = component?.[name];
+            if (typeof method !== "function")
+                return undefined;
+            const before = backed.map((property) => this.getProperty(property));
+            const result = method.apply(component, args);
+            if (backed.some((property, i) => this.getProperty(property) !== before[i]))
+                __classPrivateFieldSet(this, _MElement_dirty, true, "f");
+            __classPrivateFieldGet(this, _MElement_instances, "m", _MElement_syncForm).call(this);
+            return result === component ? this : result;
+        }
+    }
+    _MElement_quietly = function _MElement_quietly(fn) {
+        var _a, _b;
+        __classPrivateFieldSet(this, _MElement_silent, (_a = __classPrivateFieldGet(this, _MElement_silent, "f"), _a++, _a), "f");
+        try {
+            fn();
+        }
+        finally {
+            __classPrivateFieldSet(this, _MElement_silent, (_b = __classPrivateFieldGet(this, _MElement_silent, "f"), _b--, _b), "f");
+        }
+    }, _MElement_upgradeProperties = function _MElement_upgradeProperties() {
+        const names = [
+            ...Object.keys(spec.attributes ?? {}).map(camel),
+            ...Object.keys(spec.properties ?? {}),
+            ...(spec.slot ? [camel(spec.slot.attribute)] : []),
+        ];
+        const self = this;
+        for (const name of names) {
+            if (Object.prototype.hasOwnProperty.call(this, name)) {
+                const value = self[name];
+                delete self[name];
+                self[name] = value;
+            }
+        }
+    }, _MElement_config = function _MElement_config() {
+        const config = {};
+        for (const [name, attribute] of Object.entries(spec.attributes ?? {})) {
+            if (!attribute.config)
+                continue;
+            const value = read(this, name, attribute.type);
+            if (value !== null && value !== false)
+                config[attribute.config] = value;
+        }
+        if (spec.slot) {
+            const text = this.getAttribute(spec.slot.attribute);
+            if (text || hasContent(this)) {
+                const slot = document.createElement("slot");
+                slot.textContent = text ?? "";
+                config[spec.slot.config] = slot;
+                __classPrivateFieldSet(this, _MElement_slot, slot, "f");
+            }
+        }
+        Object.assign(config, spec.config?.(this));
+        for (const [name, property] of Object.entries(spec.properties ?? {})) {
+            if (property.config && __classPrivateFieldGet(this, _MElement_pending, "f").has(name)) {
+                config[property.config] = __classPrivateFieldGet(this, _MElement_pending, "f").get(name);
+                __classPrivateFieldGet(this, _MElement_pending, "f").delete(name);
+            }
+        }
+        return config;
+    }, _MElement_build = function _MElement_build() {
+        const root = this.shadowRoot;
+        applyStyles(root, [`host:${spec.name}`, ...SHADOW_BASE_STYLES, ...spec.styles]);
+        const component = spec.create(__classPrivateFieldGet(this, _MElement_instances, "m", _MElement_config).call(this));
+        this.component = component;
+        if (__classPrivateFieldGet(this, _MElement_slot, "f") && !component.element.contains(__classPrivateFieldGet(this, _MElement_slot, "f")))
+            __classPrivateFieldSet(this, _MElement_slot, null, "f");
+        root.append(component.element);
+        __classPrivateFieldGet(this, _MElement_instances, "m", _MElement_exposeParts).call(this, root);
+        const events = component;
+        for (const [event, eventSpec] of Object.entries(spec.events ?? {})) {
+            const handler = (payload) => {
+                __classPrivateFieldGet(this, _MElement_instances, "m", _MElement_syncForm).call(this);
+                if (__classPrivateFieldGet(this, _MElement_silent, "f"))
+                    return;
+                const detail = eventSpec.detail ? eventSpec.detail(payload) : payload;
+                this.dispatchEvent(new CustomEvent(event, { detail, bubbles: true, composed: true }));
+            };
+            events.on?.(event, handler);
+            __classPrivateFieldGet(this, _MElement_cleanup, "f").push(() => events.off?.(event, handler));
+        }
+        for (const event of spec.form?.events ?? []) {
+            if (spec.events?.[event])
+                continue;
+            const handler = () => __classPrivateFieldGet(this, _MElement_instances, "m", _MElement_syncForm).call(this);
+            events.on?.(event, handler);
+            __classPrivateFieldGet(this, _MElement_cleanup, "f").push(() => events.off?.(event, handler));
+        }
+        for (const [name, value] of __classPrivateFieldGet(this, _MElement_pending, "f")) {
+            const property = spec.properties?.[name];
+            if (property)
+                __classPrivateFieldGet(this, _MElement_instances, "m", _MElement_quietly).call(this, () => property.set(component, value));
+        }
+        __classPrivateFieldGet(this, _MElement_pending, "f").clear();
+        if (__classPrivateFieldGet(this, _MElement_restoreState, "f") !== null) {
+            const state = __classPrivateFieldGet(this, _MElement_restoreState, "f");
+            __classPrivateFieldSet(this, _MElement_restoreState, null, "f");
+            __classPrivateFieldGet(this, _MElement_instances, "m", _MElement_quietly).call(this, () => spec.form?.restore?.(component, state));
+        }
+        if (spec.form?.activate) {
+            const onClick = (event) => {
+                if (event.composedPath()[0] === this)
+                    spec.form?.activate?.(component);
+            };
+            this.addEventListener("click", onClick);
+            __classPrivateFieldGet(this, _MElement_cleanup, "f").push(() => this.removeEventListener("click", onClick));
+        }
+        const cleanup = spec.setup?.(this, component);
+        if (cleanup)
+            __classPrivateFieldGet(this, _MElement_cleanup, "f").push(cleanup);
+        {
+            __classPrivateFieldSet(this, _MElement_observer, new MutationObserver(() => {
+                removeDeclarativeTemplates(this);
+                const observe = spec.observeChildren;
+                let updated = false;
+                const component = this.component;
+                if (typeof observe === "function" && component) {
+                    __classPrivateFieldGet(this, _MElement_instances, "m", _MElement_quietly).call(this, () => {
+                        updated = observe(this, component);
+                    });
+                }
+                if (updated) {
+                    __classPrivateFieldGet(this, _MElement_instances, "m", _MElement_syncForm).call(this);
+                    return;
+                }
+                if (observe || (spec.slot && !__classPrivateFieldGet(this, _MElement_slot, "f") && hasContent(this)))
+                    __classPrivateFieldGet(this, _MElement_instances, "m", _MElement_rebuild).call(this, true);
+            }), "f");
+            __classPrivateFieldGet(this, _MElement_observer, "f").observe(this, {
+                childList: true,
+                subtree: !!spec.observeChildren,
+                attributes: !!spec.observeChildren,
+                characterData: !!spec.observeChildren,
+            });
+        }
+        __classPrivateFieldGet(this, _MElement_instances, "m", _MElement_syncForm).call(this);
+    }, _MElement_exposeParts = function _MElement_exposeParts(root) {
+        const name = (node) => {
+            const names = partNames(node);
+            if (spec.slot && __classPrivateFieldGet(this, _MElement_slot, "f")?.parentElement === node && !names.includes(spec.slot.attribute)) {
+                names.push(spec.slot.attribute);
+            }
+            const value = names.join(" ");
+            if ((node.getAttribute("part") ?? "") === value)
+                return;
+            if (value)
+                node.setAttribute("part", value);
+            else
+                node.removeAttribute("part");
+        };
+        const nameAll = (node) => {
+            name(node);
+            for (const child of Array.from(node.querySelectorAll("*")))
+                name(child);
+        };
+        for (const child of Array.from(root.children))
+            nameAll(child);
+        __classPrivateFieldSet(this, _MElement_parts, __classPrivateFieldGet(this, _MElement_parts, "f") ?? new MutationObserver((records) => {
+            for (const record of records) {
+                for (const node of Array.from(record.addedNodes))
+                    if (node.nodeType === 1)
+                        nameAll(node);
+            }
+        }), "f");
+        __classPrivateFieldGet(this, _MElement_parts, "f").observe(root, { childList: true, subtree: true });
+    }, _MElement_teardown = function _MElement_teardown() {
+        const component = this.component;
+        const observer = __classPrivateFieldGet(this, _MElement_observer, "f");
+        const parts = __classPrivateFieldGet(this, _MElement_parts, "f");
+        __classPrivateFieldSet(this, _MElement_observer, null, "f");
+        __classPrivateFieldSet(this, _MElement_parts, null, "f");
+        let failure;
+        let failed = false;
+        const attempt = (cleanup) => {
+            try {
+                cleanup();
+            }
+            catch (error) {
+                if (!failed)
+                    failure = error;
+                failed = true;
+            }
+        };
+        attempt(() => observer?.disconnect());
+        attempt(() => parts?.disconnect());
+        for (const cleanup of __classPrivateFieldGet(this, _MElement_cleanup, "f").splice(0))
+            attempt(cleanup);
+        if (component) {
+            attempt(() => component.destroy());
+            attempt(() => component.element.remove());
+        }
+        this.component = null;
+        __classPrivateFieldSet(this, _MElement_slot, null, "f");
+        if (failed)
+            throw failure;
+    }, _MElement_rebuild = function _MElement_rebuild(keepState) {
+        if (this.component && keepState) {
+            for (const [name, property] of Object.entries(spec.properties ?? {})) {
+                if (!__classPrivateFieldGet(this, _MElement_dirty, "f") && backed.includes(name))
+                    continue;
+                __classPrivateFieldGet(this, _MElement_pending, "f").set(name, property.get(this.component));
+            }
+        }
+        __classPrivateFieldGet(this, _MElement_instances, "m", _MElement_teardown).call(this);
+        if (this.isConnected)
+            __classPrivateFieldGet(this, _MElement_instances, "m", _MElement_build).call(this);
+    }, _MElement_syncForm = function _MElement_syncForm() {
+        const form = spec.form;
+        const internals = this.internals;
+        if (!form || !internals || !this.component)
+            return;
+        const value = form.value(this.component, this);
+        if (form.state)
+            internals.setFormValue(value, form.state(this.component));
+        else
+            internals.setFormValue(value);
+        const control = form.control?.(this.component);
+        if (control) {
+            const validity = control.validity;
+            if (!(validity.valid && internals.validity.valid)) {
+                internals.setValidity(validity, control.validationMessage, control);
+            }
+        }
+    };
+    MElement.formAssociated = !!spec.form;
+    MElement.observedAttributes = [
+        ...Object.keys(spec.attributes ?? {}),
+        ...(spec.slot ? [spec.slot.attribute] : []),
+    ];
+    const proto = MElement.prototype;
+    for (const [name, attribute] of Object.entries(spec.attributes ?? {})) {
+        const property = camel(name);
+        if (property in proto || spec.properties?.[property])
+            continue;
+        Object.defineProperty(proto, property, {
+            configurable: true,
+            get() {
+                return read(this, name, attribute.type);
+            },
+            set(value) {
+                write(this, name, attribute.type, value);
+            },
+        });
+    }
+    if (spec.slot) {
+        const { attribute } = spec.slot;
+        const property = camel(attribute);
+        if (!(property in proto) && !spec.properties?.[property]) {
+            Object.defineProperty(proto, property, {
+                configurable: true,
+                get() {
+                    return this.getAttribute(attribute) ?? (this.textContent ?? "").trim();
+                },
+                set(value) {
+                    write(this, attribute, "string", value);
+                },
+            });
+        }
+    }
+    for (const name of Object.keys(spec.properties ?? {})) {
+        Object.defineProperty(proto, name, {
+            configurable: true,
+            get() {
+                return this.getProperty(name);
+            },
+            set(value) {
+                this.setProperty(name, value);
+            },
+        });
+    }
+    for (const name of spec.methods ?? []) {
+        Object.defineProperty(proto, name, {
+            configurable: true,
+            value(...args) {
+                return this.callMethod(name, args);
+            },
+        });
+    }
+    return MElement;
+};
+export const createDeclarationClass = (attributes) => {
+    const names = Object.keys(attributes).map(camel);
+    class Declaration extends HTMLElement {
+        connectedCallback() {
+            removeDeclarativeTemplates(this);
+            const self = this;
+            for (const name of names) {
+                if (Object.prototype.hasOwnProperty.call(this, name)) {
+                    const value = self[name];
+                    delete self[name];
+                    self[name] = value;
+                }
+            }
+        }
+    }
+    for (const [name, attribute] of Object.entries(attributes)) {
+        Object.defineProperty(Declaration.prototype, camel(name), {
+            configurable: true,
+            get() {
+                return read(this, name, attribute.type);
+            },
+            set(value) {
+                write(this, name, attribute.type, value);
+            },
+        });
+    }
+    return Declaration;
+};
+export const defineElement = (spec) => {
+    let element = null;
+    const getElement = () => (element ?? (element = createElementClass(spec)));
+    const registered = new Set();
+    let prepared = false;
+    return {
+        spec,
+        get element() {
+            return getElement();
+        },
+        define(options = {}) {
+            const tag = `${options.prefix ?? DEFAULT_PREFIX}-${spec.name}`;
+            if (!prepared) {
+                prepared = true;
+                registerStyles({ [`host:${spec.name}`]: hostStyleText(spec) });
+                const missing = [...SHADOW_BASE_STYLES, ...spec.styles].filter((name) => !hasStyles(name));
+                if (missing.length) {
+                    console.warn(`<${tag}> has no CSS for ${missing.join(", ")}: import "material/elements/css/${spec.name}" first.`);
+                }
+            }
+            const existing = customElements.get(tag);
+            if (existing) {
+                if (!registered.has(existing)) {
+                    console.warn(`<${tag}> is already defined by another script; keeping the first definition.`);
+                }
+                return tag;
+            }
+            const base = getElement();
+            const ctor = registered.size === 0 ? base : class extends base {
+            };
+            customElements.define(tag, ctor);
+            registered.add(ctor);
+            return tag;
+        },
+    };
+};

package/dist/elements/dialog.d.ts

@@ -0,0 +1,127 @@
+/**
+ * `<m-dialog>`: the dialog as a custom element. It is the factory's top-layer
+ * dialog (`layer: "top"`): a native `<dialog>` in the element's shadow root,
+ * shown with `showModal()`, so it sits above every z-index and outside any
+ * clipping ancestor, the page outside is inert, and the scrim is its
+ * `::backdrop`. Its regions are slots:
+ *
+ * - `headline`: the headline, which names the dialog (the `headline`
+ *   attribute is its fallback text); without one, `aria-label` names it;
+ * - the default slot: the supporting content, which describes it;
+ * - `actions`: the buttons, at the end.
+ *
+ * `open` shows it and reflects its state, as on `<dialog open>`: Escape, a
+ * click on the backdrop, the full-screen close button and `close()` remove
+ * it. `show()` and `close()` are its methods. `open` and `close` are
+ * dispatched as it opens and closes (not when the attribute is what changed),
+ * and `cancel` when Escape asks it to close, which `preventDefault()` refuses.
+ * `size` is the factory's (`small`, `medium`, `large`, `fullwidth`,
+ * `fullscreen`), and `fullscreen` the full-screen dialog whatever `size`
+ * says; a full-screen dialog has the close button, which `close-button`
+ * gives any size. `subtitle` is the text below the headline, `divider`
+ * draws the dividers above and below the content, and `footer-alignment`
+ * places the actions (`right`, `left`, `center`, `space-between`).
+ * `animation` is the factory's (`scale`, `slide-up`, `slide-down`, `fade`);
+ * the factory reads it once, so a change recreates the dialog.
+ * `no-close-on-scrim-click` and `no-close-on-escape` keep it open on a click
+ * on the backdrop and on Escape (the factory's `closeOnOverlayClick` and
+ * `closeOnEscape`); `cancel` is still dispatched on Escape.
+ *
+ * Parts: `dialog`, `header`, `header-content`, `header-title`, `content`, `footer`.
+ *
+ * @module elements
+ */
+import type { DialogComponent } from "../components/dialog/types.js";
+import { type DefineOptions, type ElementInstance } from "./define.js";
+/** The dialog with the `show()` the element names after `<dialog>`'s. */
+export interface DialogElementComponent extends DialogComponent {
+    show: () => DialogComponent;
+}
+declare const dialogSpec: {
+    name: string;
+    slots: readonly ["headline", "actions"];
+    create: (config: import("./define.js").Config) => DialogElementComponent;
+    styles: string[];
+    hostStyles: string;
+    attributes: {
+        open: {
+            type: "boolean";
+            update: (c: DialogElementComponent, v: import("./define.js").AttributeValue) => void;
+        };
+        headline: {
+            type: "string";
+            config: string;
+            update: (c: DialogElementComponent, v: import("./define.js").AttributeValue, host: HTMLElement) => void;
+        };
+        subtitle: {
+            type: "string";
+            config: string;
+            update: (c: DialogElementComponent, v: import("./define.js").AttributeValue) => void;
+        };
+        size: {
+            type: "string";
+            config: string;
+        };
+        animation: {
+            type: "string";
+            config: string;
+        };
+        fullscreen: {
+            type: "boolean";
+            config: string;
+        };
+        "close-button": {
+            type: "boolean";
+            config: string;
+        };
+        divider: {
+            type: "boolean";
+            config: string;
+        };
+        "footer-alignment": {
+            type: "string";
+            config: string;
+            update: (c: DialogElementComponent, v: import("./define.js").AttributeValue) => void;
+        };
+        "no-close-on-scrim-click": {
+            type: "boolean";
+            config: string;
+        };
+        "no-close-on-escape": {
+            type: "boolean";
+            config: string;
+        };
+        "aria-label": {
+            type: "string";
+            update: (c: DialogElementComponent, _v: import("./define.js").AttributeValue, host: HTMLElement) => void;
+        };
+    };
+    methods: readonly ["show", "close"];
+    events: {
+        open: {
+            detail: () => null;
+            state: true;
+        };
+        close: {
+            detail: () => null;
+            state: true;
+        };
+        cancel: {
+            detail: () => null;
+        };
+    };
+    setup: (host: import("./define.js").ElementHost<DialogElementComponent>, component: DialogElementComponent) => () => void;
+};
+export declare const dialogElement: import("./define.js").ElementDefinition<DialogElementComponent>;
+export type DialogSpec = typeof dialogSpec;
+/** `<m-dialog>` as a ref or a query returns it. */
+export type DialogElement = ElementInstance<DialogSpec, DialogElementComponent>;
+/** Registers `<m-dialog>` (or `<prefix-dialog>`). */
+export declare const defineDialog: (options?: DefineOptions) => string;
+declare global {
+    /** `document.querySelector("m-…")` and `createElement` return the element's type (the default prefix). */
+    interface HTMLElementTagNameMap {
+        "m-dialog": DialogElement;
+    }
+}
+export {};