@limetech/lime-elements 37.55.6 → 37.55.7

package/dist/esm/limel-dialog.entry.js

@@ -1,879 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-6156b4fd.js';
-import { d as dispatchResizeEvent } from './dispatch-resize-event-cd1d230c.js';
 import { c as createRandomString } from './random-string-812b1c35.js';
-import { _ as __extends, a as __assign, M as MDCFoundation, c as __values, b as MDCComponent } from './component-8b6ce3e9.js';
-import { m as matches, c as closest } from './ponyfill-30263d5e.js';
-import { M as MDCRipple } from './component-f972b8db.js';
-import { A as AnimationFrame } from './animationframe-b52af02d.js';
-import { i as isEqual } from './isEqual-90c6e6fc.js';
-import './_baseIsEqual-f751b77f.js';
-import './eq-c1c7f528.js';
-import './isObject-c74e273c.js';
-import './_getNative-93d6bfe9.js';
-import './isArray-80298bc7.js';
-import './isObjectLike-38996507.js';
-import './isArrayLike-385e0f31.js';
 
-/**
- * @license
- * Copyright 2016 Google Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-function createFocusTrapInstance(surfaceEl, focusTrapFactory, initialFocusEl) {
-    return focusTrapFactory(surfaceEl, { initialFocusEl: initialFocusEl });
-}
-function isScrollable(el) {
-    return el ? el.scrollHeight > el.offsetHeight : false;
-}
-/**
- * For scrollable content, returns true if the content has not been scrolled
- * (that is, the scroll content is as the "top"). This is used in full-screen
- * dialogs, where the scroll divider is expected only to appear once the
- * content has been scrolled "underneath" the header bar.
- */
-function isScrollAtTop(el) {
-    return el ? el.scrollTop === 0 : false;
-}
-/**
- * For scrollable content, returns true if the content has been scrolled all the
- * way to the bottom. This is used in full-screen dialogs, where the footer
- * scroll divider is expected only to appear when the content is "cut-off" by
- * the footer bar.
- */
-function isScrollAtBottom(el) {
-    return el ? Math.ceil(el.scrollHeight - el.scrollTop) === el.clientHeight :
-        false;
-}
-function areTopsMisaligned(els) {
-    var tops = new Set();
-    [].forEach.call(els, function (el) { return tops.add(el.offsetTop); });
-    return tops.size > 1;
-}
-
-/**
- * @license
- * Copyright 2020 Google Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-var FOCUS_SENTINEL_CLASS = 'mdc-dom-focus-sentinel';
-/**
- * Utility to trap focus in a given root element, e.g. for modal components such
- * as dialogs. The root should have at least one focusable child element,
- * for setting initial focus when trapping focus.
- * Also tracks the previously focused element, and restores focus to that
- * element when releasing focus.
- */
-var FocusTrap = /** @class */ (function () {
-    function FocusTrap(root, options) {
-        if (options === void 0) { options = {}; }
-        this.root = root;
-        this.options = options;
-        // Previously focused element before trapping focus.
-        this.elFocusedBeforeTrapFocus = null;
-    }
-    /**
-     * Traps focus in `root`. Also focuses on either `initialFocusEl` if set;
-     * otherwises sets initial focus to the first focusable child element.
-     */
-    FocusTrap.prototype.trapFocus = function () {
-        var focusableEls = this.getFocusableElements(this.root);
-        if (focusableEls.length === 0) {
-            throw new Error('FocusTrap: Element must have at least one focusable child.');
-        }
-        this.elFocusedBeforeTrapFocus =
-            document.activeElement instanceof HTMLElement ? document.activeElement :
-                null;
-        this.wrapTabFocus(this.root);
-        if (!this.options.skipInitialFocus) {
-            this.focusInitialElement(focusableEls, this.options.initialFocusEl);
-        }
-    };
-    /**
-     * Releases focus from `root`. Also restores focus to the previously focused
-     * element.
-     */
-    FocusTrap.prototype.releaseFocus = function () {
-        [].slice.call(this.root.querySelectorAll("." + FOCUS_SENTINEL_CLASS))
-            .forEach(function (sentinelEl) {
-            sentinelEl.parentElement.removeChild(sentinelEl);
-        });
-        if (!this.options.skipRestoreFocus && this.elFocusedBeforeTrapFocus) {
-            this.elFocusedBeforeTrapFocus.focus();
-        }
-    };
-    /**
-     * Wraps tab focus within `el` by adding two hidden sentinel divs which are
-     * used to mark the beginning and the end of the tabbable region. When
-     * focused, these sentinel elements redirect focus to the first/last
-     * children elements of the tabbable region, ensuring that focus is trapped
-     * within that region.
-     */
-    FocusTrap.prototype.wrapTabFocus = function (el) {
-        var _this = this;
-        var sentinelStart = this.createSentinel();
-        var sentinelEnd = this.createSentinel();
-        sentinelStart.addEventListener('focus', function () {
-            var focusableEls = _this.getFocusableElements(el);
-            if (focusableEls.length > 0) {
-                focusableEls[focusableEls.length - 1].focus();
-            }
-        });
-        sentinelEnd.addEventListener('focus', function () {
-            var focusableEls = _this.getFocusableElements(el);
-            if (focusableEls.length > 0) {
-                focusableEls[0].focus();
-            }
-        });
-        el.insertBefore(sentinelStart, el.children[0]);
-        el.appendChild(sentinelEnd);
-    };
-    /**
-     * Focuses on `initialFocusEl` if defined and a child of the root element.
-     * Otherwise, focuses on the first focusable child element of the root.
-     */
-    FocusTrap.prototype.focusInitialElement = function (focusableEls, initialFocusEl) {
-        var focusIndex = 0;
-        if (initialFocusEl) {
-            focusIndex = Math.max(focusableEls.indexOf(initialFocusEl), 0);
-        }
-        focusableEls[focusIndex].focus();
-    };
-    FocusTrap.prototype.getFocusableElements = function (root) {
-        var focusableEls = [].slice.call(root.querySelectorAll('[autofocus], [tabindex], a, input, textarea, select, button'));
-        return focusableEls.filter(function (el) {
-            var isDisabledOrHidden = el.getAttribute('aria-disabled') === 'true' ||
-                el.getAttribute('disabled') != null ||
-                el.getAttribute('hidden') != null ||
-                el.getAttribute('aria-hidden') === 'true';
-            var isTabbableAndVisible = el.tabIndex >= 0 &&
-                el.getBoundingClientRect().width > 0 &&
-                !el.classList.contains(FOCUS_SENTINEL_CLASS) && !isDisabledOrHidden;
-            var isProgrammaticallyHidden = false;
-            if (isTabbableAndVisible) {
-                var style = getComputedStyle(el);
-                isProgrammaticallyHidden =
-                    style.display === 'none' || style.visibility === 'hidden';
-            }
-            return isTabbableAndVisible && !isProgrammaticallyHidden;
-        });
-    };
-    FocusTrap.prototype.createSentinel = function () {
-        var sentinel = document.createElement('div');
-        sentinel.setAttribute('tabindex', '0');
-        // Don't announce in screen readers.
-        sentinel.setAttribute('aria-hidden', 'true');
-        sentinel.classList.add(FOCUS_SENTINEL_CLASS);
-        return sentinel;
-    };
-    return FocusTrap;
-}());
-
-/**
- * @license
- * Copyright 2016 Google Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-var cssClasses = {
-    CLOSING: 'mdc-dialog--closing',
-    OPEN: 'mdc-dialog--open',
-    OPENING: 'mdc-dialog--opening',
-    SCROLLABLE: 'mdc-dialog--scrollable',
-    SCROLL_LOCK: 'mdc-dialog-scroll-lock',
-    STACKED: 'mdc-dialog--stacked',
-    FULLSCREEN: 'mdc-dialog--fullscreen',
-    // Class for showing a scroll divider on full-screen dialog header element.
-    // Should only be displayed on scrollable content, when the dialog content is
-    // scrolled "underneath" the header.
-    SCROLL_DIVIDER_HEADER: 'mdc-dialog-scroll-divider-header',
-    // Class for showing a scroll divider on a full-screen dialog footer element.
-    // Should only be displayed on scrolalble content, when the dialog content is
-    // obscured "underneath" the footer.
-    SCROLL_DIVIDER_FOOTER: 'mdc-dialog-scroll-divider-footer',
-    // The "surface scrim" is a scrim covering only the surface of a dialog. This
-    // is used in situations where a confirmation dialog is shown over an already
-    // opened full-screen dialog. On larger screen-sizes, the full-screen dialog
-    // is sized as a modal and so in these situations we display a "surface scrim"
-    // to prevent a "double scrim" (where the scrim from the secondary
-    // confirmation dialog would overlap with the scrim from the full-screen
-    // dialog).
-    SURFACE_SCRIM_SHOWN: 'mdc-dialog__surface-scrim--shown',
-    // "Showing" animating class for the surface-scrim.
-    SURFACE_SCRIM_SHOWING: 'mdc-dialog__surface-scrim--showing',
-    // "Hiding" animating class for the surface-scrim.
-    SURFACE_SCRIM_HIDING: 'mdc-dialog__surface-scrim--hiding',
-    // Class to hide a dialog's scrim (used in conjunction with a surface-scrim).
-    // Note that we only hide the original scrim rather than removing it entirely
-    // to prevent interactions with the content behind this scrim, and to capture
-    // scrim clicks.
-    SCRIM_HIDDEN: 'mdc-dialog__scrim--hidden',
-};
-var strings$1 = {
-    ACTION_ATTRIBUTE: 'data-mdc-dialog-action',
-    BUTTON_DEFAULT_ATTRIBUTE: 'data-mdc-dialog-button-default',
-    BUTTON_SELECTOR: '.mdc-dialog__button',
-    CLOSED_EVENT: 'MDCDialog:closed',
-    CLOSE_ACTION: 'close',
-    CLOSING_EVENT: 'MDCDialog:closing',
-    CONTAINER_SELECTOR: '.mdc-dialog__container',
-    CONTENT_SELECTOR: '.mdc-dialog__content',
-    DESTROY_ACTION: 'destroy',
-    INITIAL_FOCUS_ATTRIBUTE: 'data-mdc-dialog-initial-focus',
-    OPENED_EVENT: 'MDCDialog:opened',
-    OPENING_EVENT: 'MDCDialog:opening',
-    SCRIM_SELECTOR: '.mdc-dialog__scrim',
-    SUPPRESS_DEFAULT_PRESS_SELECTOR: [
-        'textarea',
-        '.mdc-menu .mdc-list-item',
-        '.mdc-menu .mdc-deprecated-list-item',
-    ].join(', '),
-    SURFACE_SELECTOR: '.mdc-dialog__surface',
-};
-var numbers = {
-    DIALOG_ANIMATION_CLOSE_TIME_MS: 75,
-    DIALOG_ANIMATION_OPEN_TIME_MS: 150,
-};
-
-/**
- * @license
- * Copyright 2017 Google Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-var AnimationKeys;
-(function (AnimationKeys) {
-    AnimationKeys["POLL_SCROLL_POS"] = "poll_scroll_position";
-    AnimationKeys["POLL_LAYOUT_CHANGE"] = "poll_layout_change";
-})(AnimationKeys || (AnimationKeys = {}));
-var MDCDialogFoundation = /** @class */ (function (_super) {
-    __extends(MDCDialogFoundation, _super);
-    function MDCDialogFoundation(adapter) {
-        var _this = _super.call(this, __assign(__assign({}, MDCDialogFoundation.defaultAdapter), adapter)) || this;
-        _this.dialogOpen = false;
-        _this.isFullscreen = false;
-        _this.animationFrame = 0;
-        _this.animationTimer = 0;
-        _this.escapeKeyAction = strings$1.CLOSE_ACTION;
-        _this.scrimClickAction = strings$1.CLOSE_ACTION;
-        _this.autoStackButtons = true;
-        _this.areButtonsStacked = false;
-        _this.suppressDefaultPressSelector = strings$1.SUPPRESS_DEFAULT_PRESS_SELECTOR;
-        _this.animFrame = new AnimationFrame();
-        _this.contentScrollHandler = function () {
-            _this.handleScrollEvent();
-        };
-        _this.windowResizeHandler = function () {
-            _this.layout();
-        };
-        _this.windowOrientationChangeHandler = function () {
-            _this.layout();
-        };
-        return _this;
-    }
-    Object.defineProperty(MDCDialogFoundation, "cssClasses", {
-        get: function () {
-            return cssClasses;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MDCDialogFoundation, "strings", {
-        get: function () {
-            return strings$1;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MDCDialogFoundation, "numbers", {
-        get: function () {
-            return numbers;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MDCDialogFoundation, "defaultAdapter", {
-        get: function () {
-            return {
-                addBodyClass: function () { return undefined; },
-                addClass: function () { return undefined; },
-                areButtonsStacked: function () { return false; },
-                clickDefaultButton: function () { return undefined; },
-                eventTargetMatches: function () { return false; },
-                getActionFromEvent: function () { return ''; },
-                getInitialFocusEl: function () { return null; },
-                hasClass: function () { return false; },
-                isContentScrollable: function () { return false; },
-                notifyClosed: function () { return undefined; },
-                notifyClosing: function () { return undefined; },
-                notifyOpened: function () { return undefined; },
-                notifyOpening: function () { return undefined; },
-                releaseFocus: function () { return undefined; },
-                removeBodyClass: function () { return undefined; },
-                removeClass: function () { return undefined; },
-                reverseButtons: function () { return undefined; },
-                trapFocus: function () { return undefined; },
-                registerContentEventHandler: function () { return undefined; },
-                deregisterContentEventHandler: function () { return undefined; },
-                isScrollableContentAtTop: function () { return false; },
-                isScrollableContentAtBottom: function () { return false; },
-                registerWindowEventHandler: function () { return undefined; },
-                deregisterWindowEventHandler: function () { return undefined; },
-            };
-        },
-        enumerable: false,
-        configurable: true
-    });
-    MDCDialogFoundation.prototype.init = function () {
-        if (this.adapter.hasClass(cssClasses.STACKED)) {
-            this.setAutoStackButtons(false);
-        }
-        this.isFullscreen = this.adapter.hasClass(cssClasses.FULLSCREEN);
-    };
-    MDCDialogFoundation.prototype.destroy = function () {
-        if (this.animationTimer) {
-            clearTimeout(this.animationTimer);
-            this.handleAnimationTimerEnd();
-        }
-        if (this.isFullscreen) {
-            this.adapter.deregisterContentEventHandler('scroll', this.contentScrollHandler);
-        }
-        this.animFrame.cancelAll();
-        this.adapter.deregisterWindowEventHandler('resize', this.windowResizeHandler);
-        this.adapter.deregisterWindowEventHandler('orientationchange', this.windowOrientationChangeHandler);
-    };
-    MDCDialogFoundation.prototype.open = function (dialogOptions) {
-        var _this = this;
-        this.dialogOpen = true;
-        this.adapter.notifyOpening();
-        this.adapter.addClass(cssClasses.OPENING);
-        if (this.isFullscreen) {
-            // A scroll event listener is registered even if the dialog is not
-            // scrollable on open, since the window resize event, or orientation
-            // change may make the dialog scrollable after it is opened.
-            this.adapter.registerContentEventHandler('scroll', this.contentScrollHandler);
-        }
-        if (dialogOptions && dialogOptions.isAboveFullscreenDialog) {
-            this.adapter.addClass(cssClasses.SCRIM_HIDDEN);
-        }
-        this.adapter.registerWindowEventHandler('resize', this.windowResizeHandler);
-        this.adapter.registerWindowEventHandler('orientationchange', this.windowOrientationChangeHandler);
-        // Wait a frame once display is no longer "none", to establish basis for
-        // animation
-        this.runNextAnimationFrame(function () {
-            _this.adapter.addClass(cssClasses.OPEN);
-            _this.adapter.addBodyClass(cssClasses.SCROLL_LOCK);
-            _this.layout();
-            _this.animationTimer = setTimeout(function () {
-                _this.handleAnimationTimerEnd();
-                _this.adapter.trapFocus(_this.adapter.getInitialFocusEl());
-                _this.adapter.notifyOpened();
-            }, numbers.DIALOG_ANIMATION_OPEN_TIME_MS);
-        });
-    };
-    MDCDialogFoundation.prototype.close = function (action) {
-        var _this = this;
-        if (action === void 0) { action = ''; }
-        if (!this.dialogOpen) {
-            // Avoid redundant close calls (and events), e.g. from keydown on elements
-            // that inherently emit click
-            return;
-        }
-        this.dialogOpen = false;
-        this.adapter.notifyClosing(action);
-        this.adapter.addClass(cssClasses.CLOSING);
-        this.adapter.removeClass(cssClasses.OPEN);
-        this.adapter.removeBodyClass(cssClasses.SCROLL_LOCK);
-        if (this.isFullscreen) {
-            this.adapter.deregisterContentEventHandler('scroll', this.contentScrollHandler);
-        }
-        this.adapter.deregisterWindowEventHandler('resize', this.windowResizeHandler);
-        this.adapter.deregisterWindowEventHandler('orientationchange', this.windowOrientationChangeHandler);
-        cancelAnimationFrame(this.animationFrame);
-        this.animationFrame = 0;
-        clearTimeout(this.animationTimer);
-        this.animationTimer = setTimeout(function () {
-            _this.adapter.releaseFocus();
-            _this.handleAnimationTimerEnd();
-            _this.adapter.notifyClosed(action);
-        }, numbers.DIALOG_ANIMATION_CLOSE_TIME_MS);
-    };
-    /**
-     * Used only in instances of showing a secondary dialog over a full-screen
-     * dialog. Shows the "surface scrim" displayed over the full-screen dialog.
-     */
-    MDCDialogFoundation.prototype.showSurfaceScrim = function () {
-        var _this = this;
-        this.adapter.addClass(cssClasses.SURFACE_SCRIM_SHOWING);
-        this.runNextAnimationFrame(function () {
-            _this.adapter.addClass(cssClasses.SURFACE_SCRIM_SHOWN);
-        });
-    };
-    /**
-     * Used only in instances of showing a secondary dialog over a full-screen
-     * dialog. Hides the "surface scrim" displayed over the full-screen dialog.
-     */
-    MDCDialogFoundation.prototype.hideSurfaceScrim = function () {
-        this.adapter.removeClass(cssClasses.SURFACE_SCRIM_SHOWN);
-        this.adapter.addClass(cssClasses.SURFACE_SCRIM_HIDING);
-    };
-    /**
-     * Handles `transitionend` event triggered when surface scrim animation is
-     * finished.
-     */
-    MDCDialogFoundation.prototype.handleSurfaceScrimTransitionEnd = function () {
-        this.adapter.removeClass(cssClasses.SURFACE_SCRIM_HIDING);
-        this.adapter.removeClass(cssClasses.SURFACE_SCRIM_SHOWING);
-    };
-    MDCDialogFoundation.prototype.isOpen = function () {
-        return this.dialogOpen;
-    };
-    MDCDialogFoundation.prototype.getEscapeKeyAction = function () {
-        return this.escapeKeyAction;
-    };
-    MDCDialogFoundation.prototype.setEscapeKeyAction = function (action) {
-        this.escapeKeyAction = action;
-    };
-    MDCDialogFoundation.prototype.getScrimClickAction = function () {
-        return this.scrimClickAction;
-    };
-    MDCDialogFoundation.prototype.setScrimClickAction = function (action) {
-        this.scrimClickAction = action;
-    };
-    MDCDialogFoundation.prototype.getAutoStackButtons = function () {
-        return this.autoStackButtons;
-    };
-    MDCDialogFoundation.prototype.setAutoStackButtons = function (autoStack) {
-        this.autoStackButtons = autoStack;
-    };
-    MDCDialogFoundation.prototype.getSuppressDefaultPressSelector = function () {
-        return this.suppressDefaultPressSelector;
-    };
-    MDCDialogFoundation.prototype.setSuppressDefaultPressSelector = function (selector) {
-        this.suppressDefaultPressSelector = selector;
-    };
-    MDCDialogFoundation.prototype.layout = function () {
-        var _this = this;
-        this.animFrame.request(AnimationKeys.POLL_LAYOUT_CHANGE, function () {
-            _this.layoutInternal();
-        });
-    };
-    /** Handles click on the dialog root element. */
-    MDCDialogFoundation.prototype.handleClick = function (evt) {
-        var isScrim = this.adapter.eventTargetMatches(evt.target, strings$1.SCRIM_SELECTOR);
-        // Check for scrim click first since it doesn't require querying ancestors.
-        if (isScrim && this.scrimClickAction !== '') {
-            this.close(this.scrimClickAction);
-        }
-        else {
-            var action = this.adapter.getActionFromEvent(evt);
-            if (action) {
-                this.close(action);
-            }
-        }
-    };
-    /** Handles keydown on the dialog root element. */
-    MDCDialogFoundation.prototype.handleKeydown = function (evt) {
-        var isEnter = evt.key === 'Enter' || evt.keyCode === 13;
-        if (!isEnter) {
-            return;
-        }
-        var action = this.adapter.getActionFromEvent(evt);
-        if (action) {
-            // Action button callback is handled in `handleClick`,
-            // since space/enter keydowns on buttons trigger click events.
-            return;
-        }
-        // `composedPath` is used here, when available, to account for use cases
-        // where a target meant to suppress the default press behaviour
-        // may exist in a shadow root.
-        // For example, a textarea inside a web component:
-        // <mwc-dialog>
-        //   <horizontal-layout>
-        //     #shadow-root (open)
-        //       <mwc-textarea>
-        //         #shadow-root (open)
-        //           <textarea></textarea>
-        //       </mwc-textarea>
-        //   </horizontal-layout>
-        // </mwc-dialog>
-        var target = evt.composedPath ? evt.composedPath()[0] : evt.target;
-        var isDefault = this.suppressDefaultPressSelector ?
-            !this.adapter.eventTargetMatches(target, this.suppressDefaultPressSelector) :
-            true;
-        if (isEnter && isDefault) {
-            this.adapter.clickDefaultButton();
-        }
-    };
-    /** Handles keydown on the document. */
-    MDCDialogFoundation.prototype.handleDocumentKeydown = function (evt) {
-        var isEscape = evt.key === 'Escape' || evt.keyCode === 27;
-        if (isEscape && this.escapeKeyAction !== '') {
-            this.close(this.escapeKeyAction);
-        }
-    };
-    /**
-     * Handles scroll event on the dialog's content element -- showing a scroll
-     * divider on the header or footer based on the scroll position. This handler
-     * should only be registered on full-screen dialogs with scrollable content.
-     */
-    MDCDialogFoundation.prototype.handleScrollEvent = function () {
-        var _this = this;
-        // Since scroll events can fire at a high rate, we throttle these events by
-        // using requestAnimationFrame.
-        this.animFrame.request(AnimationKeys.POLL_SCROLL_POS, function () {
-            _this.toggleScrollDividerHeader();
-            _this.toggleScrollDividerFooter();
-        });
-    };
-    MDCDialogFoundation.prototype.layoutInternal = function () {
-        if (this.autoStackButtons) {
-            this.detectStackedButtons();
-        }
-        this.toggleScrollableClasses();
-    };
-    MDCDialogFoundation.prototype.handleAnimationTimerEnd = function () {
-        this.animationTimer = 0;
-        this.adapter.removeClass(cssClasses.OPENING);
-        this.adapter.removeClass(cssClasses.CLOSING);
-    };
-    /**
-     * Runs the given logic on the next animation frame, using setTimeout to
-     * factor in Firefox reflow behavior.
-     */
-    MDCDialogFoundation.prototype.runNextAnimationFrame = function (callback) {
-        var _this = this;
-        cancelAnimationFrame(this.animationFrame);
-        this.animationFrame = requestAnimationFrame(function () {
-            _this.animationFrame = 0;
-            clearTimeout(_this.animationTimer);
-            _this.animationTimer = setTimeout(callback, 0);
-        });
-    };
-    MDCDialogFoundation.prototype.detectStackedButtons = function () {
-        // Remove the class first to let us measure the buttons' natural positions.
-        this.adapter.removeClass(cssClasses.STACKED);
-        var areButtonsStacked = this.adapter.areButtonsStacked();
-        if (areButtonsStacked) {
-            this.adapter.addClass(cssClasses.STACKED);
-        }
-        if (areButtonsStacked !== this.areButtonsStacked) {
-            this.adapter.reverseButtons();
-            this.areButtonsStacked = areButtonsStacked;
-        }
-    };
-    MDCDialogFoundation.prototype.toggleScrollableClasses = function () {
-        // Remove the class first to let us measure the natural height of the
-        // content.
-        this.adapter.removeClass(cssClasses.SCROLLABLE);
-        if (this.adapter.isContentScrollable()) {
-            this.adapter.addClass(cssClasses.SCROLLABLE);
-            if (this.isFullscreen) {
-                // If dialog is full-screen and scrollable, check if a scroll divider
-                // should be shown.
-                this.toggleScrollDividerHeader();
-                this.toggleScrollDividerFooter();
-            }
-        }
-    };
-    MDCDialogFoundation.prototype.toggleScrollDividerHeader = function () {
-        if (!this.adapter.isScrollableContentAtTop()) {
-            this.adapter.addClass(cssClasses.SCROLL_DIVIDER_HEADER);
-        }
-        else if (this.adapter.hasClass(cssClasses.SCROLL_DIVIDER_HEADER)) {
-            this.adapter.removeClass(cssClasses.SCROLL_DIVIDER_HEADER);
-        }
-    };
-    MDCDialogFoundation.prototype.toggleScrollDividerFooter = function () {
-        if (!this.adapter.isScrollableContentAtBottom()) {
-            this.adapter.addClass(cssClasses.SCROLL_DIVIDER_FOOTER);
-        }
-        else if (this.adapter.hasClass(cssClasses.SCROLL_DIVIDER_FOOTER)) {
-            this.adapter.removeClass(cssClasses.SCROLL_DIVIDER_FOOTER);
-        }
-    };
-    return MDCDialogFoundation;
-}(MDCFoundation));
-
-/**
- * @license
- * Copyright 2017 Google Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-var strings = MDCDialogFoundation.strings;
-var MDCDialog = /** @class */ (function (_super) {
-    __extends(MDCDialog, _super);
-    function MDCDialog() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Object.defineProperty(MDCDialog.prototype, "isOpen", {
-        get: function () {
-            return this.foundation.isOpen();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MDCDialog.prototype, "escapeKeyAction", {
-        get: function () {
-            return this.foundation.getEscapeKeyAction();
-        },
-        set: function (action) {
-            this.foundation.setEscapeKeyAction(action);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MDCDialog.prototype, "scrimClickAction", {
-        get: function () {
-            return this.foundation.getScrimClickAction();
-        },
-        set: function (action) {
-            this.foundation.setScrimClickAction(action);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MDCDialog.prototype, "autoStackButtons", {
-        get: function () {
-            return this.foundation.getAutoStackButtons();
-        },
-        set: function (autoStack) {
-            this.foundation.setAutoStackButtons(autoStack);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    MDCDialog.attachTo = function (root) {
-        return new MDCDialog(root);
-    };
-    MDCDialog.prototype.initialize = function (focusTrapFactory) {
-        var e_1, _a;
-        if (focusTrapFactory === void 0) { focusTrapFactory = function (el, focusOptions) {
-            return new FocusTrap(el, focusOptions);
-        }; }
-        var container = this.root.querySelector(strings.CONTAINER_SELECTOR);
-        if (!container) {
-            throw new Error("Dialog component requires a " + strings.CONTAINER_SELECTOR + " container element");
-        }
-        this.container = container;
-        this.content =
-            this.root.querySelector(strings.CONTENT_SELECTOR);
-        this.buttons = [].slice.call(this.root.querySelectorAll(strings.BUTTON_SELECTOR));
-        this.defaultButton = this.root.querySelector("[" + strings.BUTTON_DEFAULT_ATTRIBUTE + "]");
-        this.focusTrapFactory = focusTrapFactory;
-        this.buttonRipples = [];
-        try {
-            for (var _b = __values(this.buttons), _c = _b.next(); !_c.done; _c = _b.next()) {
-                var buttonEl = _c.value;
-                this.buttonRipples.push(new MDCRipple(buttonEl));
-            }
-        }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-        finally {
-            try {
-                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-            }
-            finally { if (e_1) throw e_1.error; }
-        }
-    };
-    MDCDialog.prototype.initialSyncWithDOM = function () {
-        var _this = this;
-        this.focusTrap = createFocusTrapInstance(this.container, this.focusTrapFactory, this.getInitialFocusEl() || undefined);
-        this.handleClick = this.foundation.handleClick.bind(this.foundation);
-        this.handleKeydown = this.foundation.handleKeydown.bind(this.foundation);
-        this.handleDocumentKeydown =
-            this.foundation.handleDocumentKeydown.bind(this.foundation);
-        // this.handleLayout = this.layout.bind(this);
-        this.handleOpening = function () {
-            document.addEventListener('keydown', _this.handleDocumentKeydown);
-        };
-        this.handleClosing = function () {
-            document.removeEventListener('keydown', _this.handleDocumentKeydown);
-        };
-        this.listen('click', this.handleClick);
-        this.listen('keydown', this.handleKeydown);
-        this.listen(strings.OPENING_EVENT, this.handleOpening);
-        this.listen(strings.CLOSING_EVENT, this.handleClosing);
-    };
-    MDCDialog.prototype.destroy = function () {
-        this.unlisten('click', this.handleClick);
-        this.unlisten('keydown', this.handleKeydown);
-        this.unlisten(strings.OPENING_EVENT, this.handleOpening);
-        this.unlisten(strings.CLOSING_EVENT, this.handleClosing);
-        this.handleClosing();
-        this.buttonRipples.forEach(function (ripple) {
-            ripple.destroy();
-        });
-        _super.prototype.destroy.call(this);
-    };
-    MDCDialog.prototype.layout = function () {
-        this.foundation.layout();
-    };
-    MDCDialog.prototype.open = function () {
-        this.foundation.open();
-    };
-    MDCDialog.prototype.close = function (action) {
-        if (action === void 0) { action = ''; }
-        this.foundation.close(action);
-    };
-    MDCDialog.prototype.getDefaultFoundation = function () {
-        var _this = this;
-        // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
-        // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
-        var adapter = {
-            addBodyClass: function (className) { return document.body.classList.add(className); },
-            addClass: function (className) { return _this.root.classList.add(className); },
-            areButtonsStacked: function () { return areTopsMisaligned(_this.buttons); },
-            clickDefaultButton: function () {
-                if (_this.defaultButton && !_this.defaultButton.disabled) {
-                    _this.defaultButton.click();
-                }
-            },
-            eventTargetMatches: function (target, selector) {
-                return target ? matches(target, selector) : false;
-            },
-            getActionFromEvent: function (evt) {
-                if (!evt.target) {
-                    return '';
-                }
-                var element = closest(evt.target, "[" + strings.ACTION_ATTRIBUTE + "]");
-                return element && element.getAttribute(strings.ACTION_ATTRIBUTE);
-            },
-            getInitialFocusEl: function () { return _this.getInitialFocusEl(); },
-            hasClass: function (className) { return _this.root.classList.contains(className); },
-            isContentScrollable: function () { return isScrollable(_this.content); },
-            notifyClosed: function (action) { return _this.emit(strings.CLOSED_EVENT, action ? { action: action } : {}); },
-            notifyClosing: function (action) { return _this.emit(strings.CLOSING_EVENT, action ? { action: action } : {}); },
-            notifyOpened: function () { return _this.emit(strings.OPENED_EVENT, {}); },
-            notifyOpening: function () { return _this.emit(strings.OPENING_EVENT, {}); },
-            releaseFocus: function () {
-                _this.focusTrap.releaseFocus();
-            },
-            removeBodyClass: function (className) { return document.body.classList.remove(className); },
-            removeClass: function (className) { return _this.root.classList.remove(className); },
-            reverseButtons: function () {
-                _this.buttons.reverse();
-                _this.buttons.forEach(function (button) {
-                    button.parentElement.appendChild(button);
-                });
-            },
-            trapFocus: function () {
-                _this.focusTrap.trapFocus();
-            },
-            registerContentEventHandler: function (evt, handler) {
-                if (_this.content instanceof HTMLElement) {
-                    _this.content.addEventListener(evt, handler);
-                }
-            },
-            deregisterContentEventHandler: function (evt, handler) {
-                if (_this.content instanceof HTMLElement) {
-                    _this.content.removeEventListener(evt, handler);
-                }
-            },
-            isScrollableContentAtTop: function () {
-                return isScrollAtTop(_this.content);
-            },
-            isScrollableContentAtBottom: function () {
-                return isScrollAtBottom(_this.content);
-            },
-            registerWindowEventHandler: function (evt, handler) {
-                window.addEventListener(evt, handler);
-            },
-            deregisterWindowEventHandler: function (evt, handler) {
-                window.removeEventListener(evt, handler);
-            },
-        };
-        return new MDCDialogFoundation(adapter);
-    };
-    MDCDialog.prototype.getInitialFocusEl = function () {
-        return this.root.querySelector("[" + strings.INITIAL_FOCUS_ATTRIBUTE + "]");
-    };
-    return MDCDialog;
-}(MDCComponent));
-
-const dialogCss = "@charset \"UTF-8\";:host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}:host{--dialog-background-color:var(--lime-elevated-surface-background-color);--header-heading-color:var(--dialog-heading-title-color);--header-subheading-color:var(--dialog-heading-subtitle-color);--header-supporting-text-color:var(--dialog-heading-supporting-text-color);--header-icon-color:var(--dialog-heading-icon-color);--header-icon-background-color:var(--dialog-heading-icon-background-color)}.mdc-dialog .mdc-dialog__surface{background-color:#fff;background-color:var(--mdc-theme-surface, #fff)}.mdc-dialog .mdc-dialog__scrim{background-color:rgba(0, 0, 0, 0.32)}.mdc-dialog .mdc-dialog__surface-scrim{background-color:rgba(0, 0, 0, 0.32)}.mdc-dialog .mdc-dialog__title{color:rgba(0, 0, 0, 0.87)}.mdc-dialog .mdc-dialog__content{color:rgba(0, 0, 0, 0.6)}.mdc-dialog .mdc-dialog__close{color:#000;color:var(--mdc-theme-on-surface, #000)}.mdc-dialog .mdc-dialog__close .mdc-icon-button__ripple::before,.mdc-dialog .mdc-dialog__close .mdc-icon-button__ripple::after{background-color:#000;background-color:var(--mdc-ripple-color, var(--mdc-theme-on-surface, #000))}.mdc-dialog .mdc-dialog__close:hover .mdc-icon-button__ripple::before,.mdc-dialog .mdc-dialog__close.mdc-ripple-surface--hover .mdc-icon-button__ripple::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-dialog .mdc-dialog__close.mdc-ripple-upgraded--background-focused .mdc-icon-button__ripple::before,.mdc-dialog .mdc-dialog__close:not(.mdc-ripple-upgraded):focus .mdc-icon-button__ripple::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-dialog .mdc-dialog__close:not(.mdc-ripple-upgraded) .mdc-icon-button__ripple::after{transition:opacity 150ms linear}.mdc-dialog .mdc-dialog__close:not(.mdc-ripple-upgraded):active .mdc-icon-button__ripple::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-dialog .mdc-dialog__close.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-dialog.mdc-dialog--scrollable .mdc-dialog__title,.mdc-dialog.mdc-dialog--scrollable .mdc-dialog__actions,.mdc-dialog.mdc-dialog--scrollable.mdc-dialog-scroll-divider-footer .mdc-dialog__actions{border-color:rgba(0, 0, 0, 0.12)}.mdc-dialog.mdc-dialog--scrollable .mdc-dialog__title{border-bottom:1px solid rgba(0, 0, 0, 0.12);margin-bottom:0}.mdc-dialog.mdc-dialog-scroll-divider-header.mdc-dialog--fullscreen .mdc-dialog__header{box-shadow:0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)}.mdc-dialog .mdc-dialog__surface{border-radius:4px;border-radius:var(--mdc-shape-medium, 4px)}.mdc-dialog__surface{box-shadow:0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)}.mdc-dialog__title{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-headline6-font-family, var(--mdc-typography-font-family, inherit));font-size:0.875rem;font-size:var(--mdc-typography-headline6-font-size, 0.875rem);line-height:0.875rem;line-height:var(--mdc-typography-headline6-line-height, 0.875rem);font-weight:500;font-weight:var(--mdc-typography-headline6-font-weight, 500);letter-spacing:0.0125em;letter-spacing:var(--mdc-typography-headline6-letter-spacing, 0.0125em);text-decoration:inherit;text-decoration:var(--mdc-typography-headline6-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline6-text-transform, inherit)}.mdc-dialog__content{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, inherit));font-size:0.8125rem;font-size:var(--mdc-typography-body1-font-size, 0.8125rem);line-height:1.5rem;line-height:var(--mdc-typography-body1-line-height, 1.5rem);font-weight:400;font-weight:var(--mdc-typography-body1-font-weight, 400);letter-spacing:0.03125em;letter-spacing:var(--mdc-typography-body1-letter-spacing, 0.03125em);text-decoration:inherit;text-decoration:var(--mdc-typography-body1-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-body1-text-transform, inherit)}.mdc-dialog__title-icon{}.mdc-elevation-overlay{position:absolute;border-radius:inherit;pointer-events:none;opacity:0;opacity:var(--mdc-elevation-overlay-opacity, 0);transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);background-color:#fff;background-color:var(--mdc-elevation-overlay-color, #fff)}.mdc-dialog,.mdc-dialog__scrim{position:fixed;top:0;left:0;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:100%}.mdc-dialog{display:none;z-index:7;z-index:var(--mdc-dialog-z-index, 7)}.mdc-dialog .mdc-dialog__content{padding:20px 24px 20px 24px}.mdc-dialog .mdc-dialog__surface{min-width:280px}@media (max-width: 592px){.mdc-dialog .mdc-dialog__surface{max-width:calc(100vw - 32px)}}@media (min-width: 592px){.mdc-dialog .mdc-dialog__surface{max-width:560px}}.mdc-dialog .mdc-dialog__surface{max-height:calc(100% - 32px)}@media all and (-ms-high-contrast: none), (-ms-high-contrast: active){.mdc-dialog .mdc-dialog__container{}}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{max-width:none}@media (max-width: 960px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{max-height:560px;width:560px}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close{right:-12px}}@media (max-width: 720px) and (max-width: 672px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{width:calc(100vw - 112px)}}@media (max-width: 720px) and (min-width: 672px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{width:560px}}@media (max-width: 720px) and (max-height: 720px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{max-height:calc(100vh - 160px)}}@media (max-width: 720px) and (min-height: 720px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{max-height:560px}}@media (max-width: 720px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close{right:-12px}}@media (max-width: 720px) and (max-height: 400px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{height:100%;max-height:100vh;max-width:100vw;width:100vw;border-radius:0}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close{order:-1;left:-12px}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__header{padding:0 16px 9px;justify-content:flex-start}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__title{margin-left:calc(16px - 2 * 12px)}}@media (max-width: 600px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{height:100%;max-height:100vh;max-width:100vw;width:100vw;border-radius:0}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close{order:-1;left:-12px}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__header{padding:0 16px 9px;justify-content:flex-start}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__title{margin-left:calc(16px - 2 * 12px)}}@media (min-width: 960px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{width:calc(100vw - 400px)}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close{right:-12px}}.mdc-dialog.mdc-dialog__scrim--hidden .mdc-dialog__scrim{opacity:0}.mdc-dialog__scrim{opacity:0;z-index:-1}.mdc-dialog__container{display:flex;flex-direction:row;align-items:center;justify-content:space-around;box-sizing:border-box;height:100%;transform:scale(0.8);opacity:0;pointer-events:none}.mdc-dialog__surface{position:relative;display:flex;flex-direction:column;flex-grow:0;flex-shrink:0;box-sizing:border-box;max-width:100%;max-height:100%;pointer-events:auto;overflow-y:auto}.mdc-dialog__surface .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}[dir=rtl] .mdc-dialog__surface,.mdc-dialog__surface[dir=rtl]{text-align:right;}@media screen and (forced-colors: active), (-ms-high-contrast: active){.mdc-dialog__surface{outline:2px solid windowText}}.mdc-dialog__surface::before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:2px solid transparent;border-radius:inherit;content:\"\";pointer-events:none}@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none){.mdc-dialog__surface::before{content:none}}.mdc-dialog__title{display:block;margin-top:0;position:relative;flex-shrink:0;box-sizing:border-box;margin:0 0 1px;padding:0 24px 9px}.mdc-dialog__title::before{display:inline-block;width:0;height:40px;content:\"\";vertical-align:0}[dir=rtl] .mdc-dialog__title,.mdc-dialog__title[dir=rtl]{text-align:right;}.mdc-dialog--scrollable .mdc-dialog__title{margin-bottom:1px;padding-bottom:15px}.mdc-dialog--fullscreen .mdc-dialog__header{align-items:baseline;border-bottom:1px solid transparent;display:inline-flex;justify-content:space-between;padding:0 24px 9px;z-index:1}.mdc-dialog--fullscreen .mdc-dialog__header .mdc-dialog__close{right:-12px}.mdc-dialog--fullscreen .mdc-dialog__title{margin-bottom:0;padding:0;border-bottom:0}.mdc-dialog--fullscreen.mdc-dialog--scrollable .mdc-dialog__title{border-bottom:0;margin-bottom:0}.mdc-dialog--fullscreen .mdc-dialog__close{top:5px}.mdc-dialog--fullscreen.mdc-dialog--scrollable .mdc-dialog__actions{border-top:1px solid transparent}.mdc-dialog__content{flex-grow:1;box-sizing:border-box;margin:0;overflow:auto;-webkit-overflow-scrolling:touch}.mdc-dialog__content>:first-child{margin-top:0}.mdc-dialog__content>:last-child{margin-bottom:0}.mdc-dialog__title+.mdc-dialog__content,.mdc-dialog__header+.mdc-dialog__content{padding-top:0}.mdc-dialog--scrollable .mdc-dialog__title+.mdc-dialog__content{padding-top:8px;padding-bottom:8px}.mdc-dialog__content .mdc-deprecated-list:first-child:last-child{padding:6px 0 0}.mdc-dialog--scrollable .mdc-dialog__content .mdc-deprecated-list:first-child:last-child{padding:0}.mdc-dialog__actions{display:flex;position:relative;flex-shrink:0;flex-wrap:wrap;align-items:center;justify-content:flex-end;box-sizing:border-box;min-height:52px;margin:0;padding:8px;border-top:1px solid transparent}.mdc-dialog--stacked .mdc-dialog__actions{flex-direction:column;align-items:flex-end}.mdc-dialog__button{margin-left:8px;margin-right:0;max-width:100%;text-align:right}[dir=rtl] .mdc-dialog__button,.mdc-dialog__button[dir=rtl]{margin-left:0;margin-right:8px;}.mdc-dialog__button:first-child{margin-left:0;margin-right:0}[dir=rtl] .mdc-dialog__button:first-child,.mdc-dialog__button:first-child[dir=rtl]{margin-left:0;margin-right:0;}[dir=rtl] .mdc-dialog__button,.mdc-dialog__button[dir=rtl]{text-align:left;}.mdc-dialog--stacked .mdc-dialog__button:not(:first-child){margin-top:12px}.mdc-dialog--open,.mdc-dialog--opening,.mdc-dialog--closing{display:flex}.mdc-dialog--opening .mdc-dialog__scrim{transition:opacity 150ms linear}.mdc-dialog--opening .mdc-dialog__container{transition:opacity 75ms linear, transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1)}.mdc-dialog--closing .mdc-dialog__scrim,.mdc-dialog--closing .mdc-dialog__container{transition:opacity 75ms linear}.mdc-dialog--closing .mdc-dialog__container{transform:none}.mdc-dialog--open .mdc-dialog__scrim{opacity:1}.mdc-dialog--open .mdc-dialog__container{transform:none;opacity:1}.mdc-dialog--open.mdc-dialog__surface-scrim--shown .mdc-dialog__surface-scrim{opacity:1;z-index:1}.mdc-dialog--open.mdc-dialog__surface-scrim--hiding .mdc-dialog__surface-scrim{transition:opacity 75ms linear}.mdc-dialog--open.mdc-dialog__surface-scrim--showing .mdc-dialog__surface-scrim{transition:opacity 150ms linear}.mdc-dialog__surface-scrim{display:none;opacity:0;position:absolute;width:100%;height:100%}.mdc-dialog__surface-scrim--shown .mdc-dialog__surface-scrim,.mdc-dialog__surface-scrim--showing .mdc-dialog__surface-scrim,.mdc-dialog__surface-scrim--hiding .mdc-dialog__surface-scrim{display:block}.mdc-dialog-scroll-lock{overflow:hidden}.mdc-dialog__content{font-family:inherit}.mdc-dialog{z-index:var(--dialog-z-index, 7);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}@media (max-width: 16032px){.mdc-dialog .mdc-dialog__surface{max-width:calc(100vw - 32px)}}@media (min-width: 16032px){.mdc-dialog .mdc-dialog__surface{max-width:16000px}}@media (max-height: 16032px){.mdc-dialog.full-screen .mdc-dialog__surface{max-height:calc(100% - 32px)}}@media (min-height: 16032px){.mdc-dialog.full-screen .mdc-dialog__surface{max-height:16000px}}@media all and (-ms-high-contrast: none), (-ms-high-contrast: active){.mdc-dialog.full-screen .mdc-dialog__container{}}@media (-ms-high-contrast: none) and (min-height: 16032px), (-ms-high-contrast: active) and (min-height: 16032px){.mdc-dialog.full-screen .mdc-dialog__container{align-items:stretch;height:auto}}.mdc-dialog.full-screen .mdc-dialog__container{height:100%;width:100%}.mdc-dialog.full-screen .mdc-dialog__container .mdc-dialog__surface{height:100%;width:100%}.mdc-dialog .mdc-dialog__scrim{background-color:rgba(var(--color-black), 0.4)}.mdc-dialog .mdc-dialog__container{height:100%;width:var(--dialog-width, auto)}.mdc-dialog .mdc-dialog__surface{width:var(--dialog-width, auto);height:var(--dialog-height, auto);background-color:var(--dialog-background-color);box-shadow:var(--shadow-depth-64);max-width:var(--dialog-max-width, calc(100vw - 2rem));max-height:var(--dialog-max-height, calc(100% - 2rem));border-radius:var(--dialog-border-radius, 0.25rem)}.mdc-dialog .mdc-dialog__content{--limel-top-edge-fade-height:var(--dialog-padding-top-bottom, 1.5rem);--limel-bottom-edge-fade-height:var(\n      --dialog-padding-top-bottom,\n      1.5rem\n  );--limel-overflow-mask-vertical:linear-gradient(\n      to bottom,\n      transparent 0%,\n      black calc(0% + var(--limel-top-edge-fade-height, 1rem)),\n      black calc(100% - var(--limel-bottom-edge-fade-height, 1rem)),\n      transparent 100%\n  );-webkit-mask-image:var(--limel-overflow-mask-vertical);mask-image:var(--limel-overflow-mask-vertical);padding-top:var(--limel-top-edge-fade-height, 1rem);padding-bottom:var(--limel-bottom-edge-fade-height, 1rem);color:var(--mdc-theme-on-surface);padding-left:var(--dialog-padding-left-right, min(1.25rem, 3vw));padding-right:var(--dialog-padding-left-right, min(1.25rem, 3vw))}#initialFocusElement{position:absolute;opacity:0;pointer-events:none;z-index:-1}slot[name=header]{display:none}slot[name=button]{display:flex;gap:0.5rem;width:100%;justify-content:flex-end}@media screen and (max-width: 760px){slot[name=button]{flex-direction:column-reverse}.mdc-dialog__actions{padding:min(1.5rem, 3vw);padding-top:1rem}}";
+const dialogCss = "@charset \"UTF-8\";\n/**\n * Note! This file is exported to `dist/scss/` in the published\n * node module, for consumer projects to import.\n * That means this file cannot import from any file that isn't\n * also exported, keeping the same relative path.\n *\n * Or, just don't import anything, that works too.\n */\n/**\n* This can be used on a trigger element that opens a dropdown menu or a popover.\n*/\n/**\n * This mixin will mask out the content that is close to\n * the edges of a scrollable area.\n * - If the scrollable content has `overflow-y`, use `vertically`\n * as an argument for `$direction`.\n - If the scrollable content has `overflow-x`, use `horizontally`\n * as an argument for `$direction`.\n *\n * For the visual effect to work smoothly, we need to make sure that\n * the size of the fade-out edge effect is the same as the\n * internal paddings of the scrollable area. Otherwise, content of a\n * scrollable area that does not have a padding will fade out before\n * any scrolling has been done.\n * This is why this mixin already adds paddings, which automatically\n * default to the size of the fade-out effect.\n * This size defaults to `1rem`, but to override the size use\n * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`\n * when `vertically` argument is set, and use\n * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`\n * when `horizontally` argument is set.\n * Of course you can also programmatically increase and decrease the\n * size of these variables for each edge, based on the amount of\n * scrolling that has been done by the user. In this case, make sure\n * to add a custom padding where the mixin is used, to override\n * the paddings that are automatically added by the mixin in the\n * compiled CSS code.\n */\n/**\n* This mixin will add an animated underline to the bottom of an `a` elements.\n* Note that you may need to add `all: unset;` –depending on your use case–\n* before using this mixin.\n*/\n/**\n* This mixin creates a cross-browser font stack.\n* - `sans-serif` can be used for the UI of the components.\n* - `monospace` can be used for code.\n*\n* ⚠️ If we change the font stacks, we need to update\n* 1. the consumer documentation in `README.md`, and\n* 2. the CSS variables of `--kompendium-example-font-family`\n* in the `<style>` tag of `index.html`.\n*/\n/**\n * @prop --dialog-width: Width of the dialog.\n * @prop --dialog-max-width: Max width of the dialog.\n * @prop --dialog-height: Height of the dialog.\n * @prop --dialog-max-height: Max height of the dialog.\n * @prop --dialog-padding-top-bottom: Padding on top and bottom of dialog content. Affects the height of fade-out effects on top and bottom edges when the content is scrollable and has overflowed out of the content area. Defaults to `1.5rem`. Note that if you use this variable and set it to numbers smaller than 1rem, you will loose the fade-out effects on the edges. If you have set these paddings to `0`, losing the fade out effects should be however fine for your use case! Because in such a case your intention is to handle the `overflow` internally in the component that is displayed in the dialog's content.\n * @prop --dialog-padding-left-right: Padding on the sides of dialog content. Defaults to `1.25rem`.\n * @prop --dialog-heading-title-color: Color of the title.\n * @prop --dialog-heading-subtitle-color: Color of the subtitle.\n * @prop --dialog-heading-supporting-text-color: Color of the supporting text.\n * @prop --dialog-heading-icon-color: Color of the icon.\n * @prop --dialog-heading-icon-background-color: Background color of the icon when displayed as a badge.\n */\n:host(limel-dialog) {\n  --limel-dialog-border-radius: 0.75rem;\n  --header-heading-color: var(--dialog-heading-title-color);\n  --header-subheading-color: var(--dialog-heading-subtitle-color);\n  --header-supporting-text-color: var(--dialog-heading-supporting-text-color);\n  --header-icon-color: var(--dialog-heading-icon-color);\n  --header-icon-background-color: var(--dialog-heading-icon-background-color);\n}\n\n* {\n  box-sizing: border-box;\n}\n\ndialog {\n  border: none;\n  outline: none;\n  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);\n  border-radius: var(--limel-dialog-border-radius);\n  width: var(--dialog-width, fit-content);\n  height: var(--dialog-height, fit-content);\n  max-width: var(--dialog-max-width, calc(100vw - 1rem));\n  max-height: var(--dialog-max-height, calc(100% - 1rem));\n  background-color: transparent;\n  box-shadow: var(--shadow-depth-8), var(--shadow-depth-64);\n}\ndialog.fullscreen {\n  --dialog-width: 100%;\n  --dialog-height: 100%;\n  width: 100%;\n  height: 100%;\n}\n\n.surface {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  border-radius: var(--limel-dialog-border-radius);\n  background-color: var(--lime-elevated-surface-background-color);\n}\n\n.content {\n  flex-grow: 1;\n  overflow-y: auto;\n  --limel-top-edge-fade-height: var(--dialog-padding-top-bottom, 1.5rem);\n  --limel-bottom-edge-fade-height: var(--dialog-padding-top-bottom, 1.5rem);\n  --limel-overflow-mask-vertical: linear-gradient(\n      to bottom,\n      transparent 0%,\n      black calc(0% + var(--limel-top-edge-fade-height, 1rem)),\n      black calc(100% - var(--limel-bottom-edge-fade-height, 1rem)),\n      transparent 100%\n  );\n  -webkit-mask-image: var(--limel-overflow-mask-vertical);\n  mask-image: var(--limel-overflow-mask-vertical);\n  padding-top: var(--limel-top-edge-fade-height, 1rem);\n  padding-bottom: var(--limel-bottom-edge-fade-height, 1rem);\n  color: var(--mdc-theme-on-surface);\n  padding-left: var(--dialog-padding-left-right, min(1.25rem, 3vw));\n  padding-right: var(--dialog-padding-left-right, min(1.25rem, 3vw));\n}\n\nlimel-header,\n.actions {\n  flex-shrink: 0;\n}\n\n.actions {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  min-height: 52px;\n  margin: 0px;\n  padding: 8px;\n  border-top: 1px solid transparent;\n}\n\nslot[name=header] {\n  display: none;\n}\n\nslot[name=button] {\n  display: flex;\n  gap: 0.5rem;\n  width: 100%;\n  justify-content: flex-end;\n}\n\n@media screen and (max-width: 760px) {\n  slot[name=button] {\n    flex-direction: column-reverse;\n  }\n  .mdc-dialog__actions {\n    padding: min(1.5rem, 3vw);\n    padding-top: 1rem;\n  }\n}\ndialog {\n  --limel-dialog-display-speed: 0.2s;\n  transition: opacity 0.2s ease, display var(--limel-dialog-display-speed) ease, transform var(--limel-dialog-display-speed) ease;\n  transition-behavior: allow-discrete;\n  opacity: 0;\n  transform: translate3d(0, 1rem, 0);\n}\ndialog::backdrop {\n  transition: background-color 0.6s ease;\n  transition-behavior: allow-discrete;\n  background-color: rgb(var(--color-black), 0);\n}\ndialog[open] {\n  --limel-dialog-display-speed: 0.4s;\n  opacity: 1;\n  transform: translate3d(0, 0, 0) scale(1);\n}\n@starting-style {\n  dialog[open] {\n    opacity: 0;\n    transform: translate3d(0, -1rem, 0) scale(0.9);\n  }\n}\ndialog[open]::backdrop {\n  transition-delay: var(--limel-dialog-display-speed);\n  background-color: rgb(var(--color-black), 0.4);\n}\n@starting-style {\n  dialog[open]::backdrop {\n    background-color: rgb(var(--color-black), 0);\n  }\n}\n\ndialog {\n  position: fixed;\n  inset: 0;\n}";
 
 const Dialog = class {
   constructor(hostRef) {
@@ -881,6 +9,13 @@ const Dialog = class {
     this.close = createEvent(this, "close", 7);
     this.closing = createEvent(this, "closing", 7);
     this.showFooter = true;
+    this.handleCancel = (event) => {
+      if (!this.closingActions.escapeKey && event.cancelable) {
+        event.preventDefault();
+        return;
+      }
+      this.closeDialog();
+    };
     this.heading = undefined;
     this.fullscreen = false;
     this.open = false;
@@ -888,9 +23,6 @@ const Dialog = class {
       escapeKey: true,
       scrimClick: true,
     };
-    this.handleMdcOpened = this.handleMdcOpened.bind(this);
-    this.handleMdcClosed = this.handleMdcClosed.bind(this);
-    this.handleMdcClosing = this.handleMdcClosing.bind(this);
   }
   connectedCallback() {
     this.initialize();
@@ -903,67 +35,63 @@ const Dialog = class {
     this.initialize();
   }
   initialize() {
-    const element = this.host.shadowRoot.querySelector('.mdc-dialog');
-    if (!element) {
+    if (!this.dialog) {
       return;
     }
-    this.mdcDialog = new MDCDialog(element);
     if (this.open) {
-      this.mdcDialog.open();
+      this.dialog.showModal();
     }
-    this.mdcDialog.listen('MDCDialog:opened', this.handleMdcOpened);
-    this.mdcDialog.listen('MDCDialog:closed', this.handleMdcClosed);
-    this.mdcDialog.listen('MDCDialog:closing', this.handleMdcClosing);
-    this.setClosingActions();
   }
-  disconnectedCallback() {
-    this.mdcDialog.unlisten('MDCDialog:opened', this.handleMdcOpened);
-    this.mdcDialog.unlisten('MDCDialog:closed', this.handleMdcClosed);
-    this.mdcDialog.unlisten('MDCDialog:closing', this.handleMdcClosing);
-    this.mdcDialog.destroy();
+  handleClick(event) {
+    if (!this.closingActions.scrimClick) {
+      return;
+    }
+    const rect = this.dialog.getBoundingClientRect();
+    const clickedInDialog = rect.top <= event.clientY &&
+      event.clientY <= rect.top + rect.height &&
+      rect.left <= event.clientX &&
+      event.clientX <= rect.left + rect.width;
+    if (!clickedInDialog) {
+      this.closeDialog();
+    }
+  }
+  closeDialog() {
+    if (!this.open) {
+      return;
+    }
+    const event = this.closing.emit();
+    if (event.defaultPrevented) {
+      return;
+    }
+    this.close.emit();
+    this.open = false;
   }
   render() {
-    return (h("div", { class: {
-        'mdc-dialog': true,
-        'full-screen': !!this.fullscreen,
-      }, role: "alertdialog", "aria-modal": "true", "aria-labelledby": 'limel-dialog-title-' + this.id, "aria-describedby": 'limel-dialog-content-' + this.id }, h("input", { hidden: true, id: "initialFocusEl" }), h("div", { class: "mdc-dialog__container" }, h("div", { class: "mdc-dialog__surface" }, h("input", { type: "button", id: "initialFocusElement" }), this.renderHeading(), h("div", { class: "mdc-dialog__content", id: 'limel-dialog-content-' + this.id }, h("slot", null)), this.renderFooter())), h("div", { class: "mdc-dialog__scrim" })));
+    return (h("dialog", Object.assign({ class: {
+        fullscreen: !!this.fullscreen,
+      } }, this.getDialogAttributes(this.open, this.id), { onCancel: this.handleCancel }), h("div", { class: "surface" }, this.renderHeading(), h("div", { class: "content", id: 'limel-dialog-content-' + this.id }, h("slot", null)), this.renderFooter())));
   }
   watchHandler(newValue, oldValue) {
     if (oldValue === newValue) {
       return;
     }
-    if (!this.mdcDialog) {
-      return;
-    }
     if (newValue) {
-      this.mdcDialog.open();
+      this.dialog.showModal();
     }
     else {
-      this.mdcDialog.close();
+      this.dialog.close();
     }
   }
-  closingActionsChanged(newValue, oldValue) {
-    if (isEqual(newValue, oldValue)) {
-      return;
+  getDialogAttributes(isOpen, id) {
+    if (isOpen) {
+      return {
+        role: 'alertdialog',
+        'aria-modal': 'true',
+        'aria-labelledby': 'limel-dialog-title-' + id,
+        'aria-describedby': 'limel-dialog-content-' + id,
+      };
     }
-    this.setClosingActions();
-  }
-  handleMdcOpened() {
-    // When the opening-animation has completed, dispatch a
-    // resize-event so that any content that depends on
-    // javascript for layout has a chance to update to the
-    // final layout of the dialog. /Ads
-    const waitForUiToRender = 100;
-    setTimeout(dispatchResizeEvent, waitForUiToRender);
-  }
-  handleMdcClosed() {
-    if (this.open) {
-      this.close.emit();
-    }
-    this.open = false;
-  }
-  handleMdcClosing() {
-    this.closing.emit();
+    return {};
   }
   isBadgeHeading(heading) {
     return typeof heading === 'object' && !!heading.title && !!heading.icon;
@@ -980,23 +108,15 @@ const Dialog = class {
   }
   renderFooter() {
     if (this.showFooter) {
-      return (h("footer", { class: "mdc-dialog__actions" }, h("slot", { name: "button" })));
+      return (h("footer", { class: "actions" }, h("slot", { name: "button" })));
     }
   }
-  setClosingActions() {
-    this.mdcDialog.scrimClickAction = '';
-    if (this.closingActions.scrimClick) {
-      this.mdcDialog.scrimClickAction = 'close';
-    }
-    this.mdcDialog.escapeKeyAction = '';
-    if (this.closingActions.escapeKey) {
-      this.mdcDialog.escapeKeyAction = 'close';
-    }
+  get dialog() {
+    return this.host.shadowRoot.querySelector('dialog');
   }
   get host() { return getElement(this); }
   static get watchers() { return {
-    "open": ["watchHandler"],
-    "closingActions": ["closingActionsChanged"]
+    "open": ["watchHandler"]
   }; }
 };
 Dialog.style = dialogCss;