@limetech/lime-elements 37.55.4 → 37.55.5

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

@@ -1,572 +1,141 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-6156b4fd.js';
 import { t as translate } from './translations-8927471e.js';
-import { _ as __extends, a as __assign, M as MDCFoundation, b as MDCComponent } from './component-8b6ce3e9.js';
-import { c as closest } from './ponyfill-30263d5e.js';
+import { c as createRandomString } from './random-string-812b1c35.js';
 
 /**
- * @license
- * Copyright 2018 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.
+ * Container to keep track of all snackbar elements that gets added to the page.
+ * When an element gets added or removed, the container will emit a
+ * `changeOffset` event on all elements in the container, letting them know
+ * the new offset to where they should position themselves.
  */
-var cssClasses = {
-    CLOSING: 'mdc-snackbar--closing',
-    OPEN: 'mdc-snackbar--open',
-    OPENING: 'mdc-snackbar--opening',
-};
-var strings = {
-    ACTION_SELECTOR: '.mdc-snackbar__action',
-    ARIA_LIVE_LABEL_TEXT_ATTR: 'data-mdc-snackbar-label-text',
-    CLOSED_EVENT: 'MDCSnackbar:closed',
-    CLOSING_EVENT: 'MDCSnackbar:closing',
-    DISMISS_SELECTOR: '.mdc-snackbar__dismiss',
-    LABEL_SELECTOR: '.mdc-snackbar__label',
-    OPENED_EVENT: 'MDCSnackbar:opened',
-    OPENING_EVENT: 'MDCSnackbar:opening',
-    REASON_ACTION: 'action',
-    REASON_DISMISS: 'dismiss',
-    SURFACE_SELECTOR: '.mdc-snackbar__surface',
-};
-var numbers = {
-    DEFAULT_AUTO_DISMISS_TIMEOUT_MS: 5000,
-    INDETERMINATE: -1,
-    MAX_AUTO_DISMISS_TIMEOUT_MS: 10000,
-    MIN_AUTO_DISMISS_TIMEOUT_MS: 4000,
-    // These variables need to be kept in sync with the values in _variables.scss.
-    SNACKBAR_ANIMATION_CLOSE_TIME_MS: 75,
-    SNACKBAR_ANIMATION_OPEN_TIME_MS: 150,
-    /**
-     * Number of milliseconds to wait between temporarily clearing the label text
-     * in the DOM and subsequently restoring it. This is necessary to force IE 11
-     * to pick up the `aria-live` content change and announce it to the user.
-     */
-    ARIA_LIVE_DELAY_MS: 1000,
-};
-
-/**
- * @license
- * Copyright 2018 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 ARIA_LIVE_DELAY_MS = numbers.ARIA_LIVE_DELAY_MS;
-var ARIA_LIVE_LABEL_TEXT_ATTR = strings.ARIA_LIVE_LABEL_TEXT_ATTR;
-function announce(ariaEl, labelEl) {
-    if (labelEl === void 0) { labelEl = ariaEl; }
-    var priority = ariaEl.getAttribute('aria-live');
-    // Trim text to ignore ` ` (see below).
-    // textContent is only null if the node is a document, DOCTYPE, or notation.
-    var labelText = labelEl.textContent.trim();
-    if (!labelText || !priority) {
-        return;
-    }
-    // Temporarily disable `aria-live` to prevent JAWS+Firefox from announcing the message twice.
-    ariaEl.setAttribute('aria-live', 'off');
-    // Temporarily clear `textContent` to force a DOM mutation event that will be detected by screen readers.
-    // `aria-live` elements are only announced when the element's `textContent` *changes*, so snackbars
-    // sent to the browser in the initial HTML response won't be read unless we clear the element's `textContent` first.
-    // Similarly, displaying the same snackbar message twice in a row doesn't trigger a DOM mutation event,
-    // so screen readers won't announce the second message unless we first clear `textContent`.
-    //
-    // We have to clear the label text two different ways to make it work in all browsers and screen readers:
-    //
-    //   1. `textContent = ''` is required for IE11 + JAWS
-    //   2. `innerHTML = ' '` is required for Chrome + JAWS and NVDA
-    //
-    // All other browser/screen reader combinations support both methods.
-    //
-    // The wrapper `<span>` visually hides the space character so that it doesn't cause jank when added/removed.
-    // N.B.: Setting `position: absolute`, `opacity: 0`, or `height: 0` prevents Chrome from detecting the DOM change.
-    //
-    // This technique has been tested in:
-    //
-    //   * JAWS 2019:
-    //       - Chrome 70
-    //       - Firefox 60 (ESR)
-    //       - IE 11
-    //   * NVDA 2018:
-    //       - Chrome 70
-    //       - Firefox 60 (ESR)
-    //       - IE 11
-    //   * ChromeVox 53
-    labelEl.textContent = '';
-    labelEl.innerHTML = '<span style="display: inline-block; width: 0; height: 1px;">&nbsp;</span>';
-    // Prevent visual jank by temporarily displaying the label text in the ::before pseudo-element.
-    // CSS generated content is normally announced by screen readers
-    // (except in IE 11; see https://tink.uk/accessibility-support-for-css-generated-content/);
-    // however, `aria-live` is turned off, so this DOM update will be ignored by screen readers.
-    labelEl.setAttribute(ARIA_LIVE_LABEL_TEXT_ATTR, labelText);
-    setTimeout(function () {
-        // Allow screen readers to announce changes to the DOM again.
-        ariaEl.setAttribute('aria-live', priority);
-        // Remove the message from the ::before pseudo-element.
-        labelEl.removeAttribute(ARIA_LIVE_LABEL_TEXT_ATTR);
-        // Restore the original label text, which will be announced by screen readers.
-        labelEl.textContent = labelText;
-    }, ARIA_LIVE_DELAY_MS);
-}
-
-/**
- * @license
- * Copyright 2018 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 OPENING = cssClasses.OPENING, OPEN = cssClasses.OPEN, CLOSING = cssClasses.CLOSING;
-var REASON_ACTION = strings.REASON_ACTION, REASON_DISMISS = strings.REASON_DISMISS;
-var MDCSnackbarFoundation = /** @class */ (function (_super) {
-    __extends(MDCSnackbarFoundation, _super);
-    function MDCSnackbarFoundation(adapter) {
-        var _this = _super.call(this, __assign(__assign({}, MDCSnackbarFoundation.defaultAdapter), adapter)) || this;
-        _this.opened = false;
-        _this.animationFrame = 0;
-        _this.animationTimer = 0;
-        _this.autoDismissTimer = 0;
-        _this.autoDismissTimeoutMs = numbers.DEFAULT_AUTO_DISMISS_TIMEOUT_MS;
-        _this.closeOnEscape = true;
-        return _this;
-    }
-    Object.defineProperty(MDCSnackbarFoundation, "cssClasses", {
-        get: function () {
-            return cssClasses;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MDCSnackbarFoundation, "strings", {
-        get: function () {
-            return strings;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MDCSnackbarFoundation, "numbers", {
-        get: function () {
-            return numbers;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MDCSnackbarFoundation, "defaultAdapter", {
-        get: function () {
-            return {
-                addClass: function () { return undefined; },
-                announce: function () { return undefined; },
-                notifyClosed: function () { return undefined; },
-                notifyClosing: function () { return undefined; },
-                notifyOpened: function () { return undefined; },
-                notifyOpening: function () { return undefined; },
-                removeClass: function () { return undefined; },
-            };
-        },
-        enumerable: false,
-        configurable: true
-    });
-    MDCSnackbarFoundation.prototype.destroy = function () {
-        this.clearAutoDismissTimer();
-        cancelAnimationFrame(this.animationFrame);
-        this.animationFrame = 0;
-        clearTimeout(this.animationTimer);
-        this.animationTimer = 0;
-        this.adapter.removeClass(OPENING);
-        this.adapter.removeClass(OPEN);
-        this.adapter.removeClass(CLOSING);
-    };
-    MDCSnackbarFoundation.prototype.open = function () {
-        var _this = this;
-        this.clearAutoDismissTimer();
-        this.opened = true;
-        this.adapter.notifyOpening();
-        this.adapter.removeClass(CLOSING);
-        this.adapter.addClass(OPENING);
-        this.adapter.announce();
-        // Wait a frame once display is no longer "none", to establish basis for animation
-        this.runNextAnimationFrame(function () {
-            _this.adapter.addClass(OPEN);
-            _this.animationTimer = setTimeout(function () {
-                var timeoutMs = _this.getTimeoutMs();
-                _this.handleAnimationTimerEnd();
-                _this.adapter.notifyOpened();
-                if (timeoutMs !== numbers.INDETERMINATE) {
-                    _this.autoDismissTimer = setTimeout(function () {
-                        _this.close(REASON_DISMISS);
-                    }, timeoutMs);
-                }
-            }, numbers.SNACKBAR_ANIMATION_OPEN_TIME_MS);
-        });
-    };
-    /**
-     * @param reason Why the snackbar was closed. Value will be passed to CLOSING_EVENT and CLOSED_EVENT via the
-     *     `event.detail.reason` property. Standard values are REASON_ACTION and REASON_DISMISS, but custom
-     *     client-specific values may also be used if desired.
-     */
-    MDCSnackbarFoundation.prototype.close = function (reason) {
-        var _this = this;
-        if (reason === void 0) { reason = ''; }
-        if (!this.opened) {
-            // Avoid redundant close calls (and events), e.g. repeated interactions as the snackbar is animating closed
-            return;
-        }
-        cancelAnimationFrame(this.animationFrame);
-        this.animationFrame = 0;
-        this.clearAutoDismissTimer();
-        this.opened = false;
-        this.adapter.notifyClosing(reason);
-        this.adapter.addClass(cssClasses.CLOSING);
-        this.adapter.removeClass(cssClasses.OPEN);
-        this.adapter.removeClass(cssClasses.OPENING);
-        clearTimeout(this.animationTimer);
-        this.animationTimer = setTimeout(function () {
-            _this.handleAnimationTimerEnd();
-            _this.adapter.notifyClosed(reason);
-        }, numbers.SNACKBAR_ANIMATION_CLOSE_TIME_MS);
-    };
-    MDCSnackbarFoundation.prototype.isOpen = function () {
-        return this.opened;
-    };
-    MDCSnackbarFoundation.prototype.getTimeoutMs = function () {
-        return this.autoDismissTimeoutMs;
-    };
-    MDCSnackbarFoundation.prototype.setTimeoutMs = function (timeoutMs) {
-        // Use shorter variable names to make the code more readable
-        var minValue = numbers.MIN_AUTO_DISMISS_TIMEOUT_MS;
-        var maxValue = numbers.MAX_AUTO_DISMISS_TIMEOUT_MS;
-        var indeterminateValue = numbers.INDETERMINATE;
-        if (timeoutMs === numbers.INDETERMINATE || (timeoutMs <= maxValue && timeoutMs >= minValue)) {
-            this.autoDismissTimeoutMs = timeoutMs;
-        }
-        else {
-            throw new Error("\n        timeoutMs must be an integer in the range " + minValue + "\u2013" + maxValue + "\n        (or " + indeterminateValue + " to disable), but got '" + timeoutMs + "'");
-        }
-    };
-    MDCSnackbarFoundation.prototype.getCloseOnEscape = function () {
-        return this.closeOnEscape;
-    };
-    MDCSnackbarFoundation.prototype.setCloseOnEscape = function (closeOnEscape) {
-        this.closeOnEscape = closeOnEscape;
-    };
-    MDCSnackbarFoundation.prototype.handleKeyDown = function (evt) {
-        var isEscapeKey = evt.key === 'Escape' || evt.keyCode === 27;
-        if (isEscapeKey && this.getCloseOnEscape()) {
-            this.close(REASON_DISMISS);
-        }
-    };
-    MDCSnackbarFoundation.prototype.handleActionButtonClick = function (_evt) {
-        this.close(REASON_ACTION);
-    };
-    MDCSnackbarFoundation.prototype.handleActionIconClick = function (_evt) {
-        this.close(REASON_DISMISS);
-    };
-    MDCSnackbarFoundation.prototype.clearAutoDismissTimer = function () {
-        clearTimeout(this.autoDismissTimer);
-        this.autoDismissTimer = 0;
-    };
-    MDCSnackbarFoundation.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.
-     */
-    MDCSnackbarFoundation.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);
-        });
-    };
-    return MDCSnackbarFoundation;
-}(MDCFoundation));
-
-/**
- * @license
- * Copyright 2018 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 SURFACE_SELECTOR = strings.SURFACE_SELECTOR, LABEL_SELECTOR = strings.LABEL_SELECTOR, ACTION_SELECTOR = strings.ACTION_SELECTOR, DISMISS_SELECTOR = strings.DISMISS_SELECTOR, OPENING_EVENT = strings.OPENING_EVENT, OPENED_EVENT = strings.OPENED_EVENT, CLOSING_EVENT = strings.CLOSING_EVENT, CLOSED_EVENT = strings.CLOSED_EVENT;
-var MDCSnackbar = /** @class */ (function (_super) {
-    __extends(MDCSnackbar, _super);
-    function MDCSnackbar() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    MDCSnackbar.attachTo = function (root) {
-        return new MDCSnackbar(root);
-    };
-    MDCSnackbar.prototype.initialize = function (announcerFactory) {
-        if (announcerFactory === void 0) { announcerFactory = function () { return announce; }; }
-        this.announce = announcerFactory();
-    };
-    MDCSnackbar.prototype.initialSyncWithDOM = function () {
-        var _this = this;
-        this.surfaceEl = this.root.querySelector(SURFACE_SELECTOR);
-        this.labelEl = this.root.querySelector(LABEL_SELECTOR);
-        this.actionEl = this.root.querySelector(ACTION_SELECTOR);
-        this.handleKeyDown = function (evt) {
-            _this.foundation.handleKeyDown(evt);
-        };
-        this.handleSurfaceClick = function (evt) {
-            var target = evt.target;
-            if (_this.isActionButton(target)) {
-                _this.foundation.handleActionButtonClick(evt);
-            }
-            else if (_this.isActionIcon(target)) {
-                _this.foundation.handleActionIconClick(evt);
-            }
-        };
-        this.registerKeyDownHandler(this.handleKeyDown);
-        this.registerSurfaceClickHandler(this.handleSurfaceClick);
-    };
-    MDCSnackbar.prototype.destroy = function () {
-        _super.prototype.destroy.call(this);
-        this.deregisterKeyDownHandler(this.handleKeyDown);
-        this.deregisterSurfaceClickHandler(this.handleSurfaceClick);
-    };
-    MDCSnackbar.prototype.open = function () {
-        this.foundation.open();
-    };
-    /**
-     * @param reason Why the snackbar was closed. Value will be passed to CLOSING_EVENT and CLOSED_EVENT via the
-     *     `event.detail.reason` property. Standard values are REASON_ACTION and REASON_DISMISS, but custom
-     *     client-specific values may also be used if desired.
-     */
-    MDCSnackbar.prototype.close = function (reason) {
-        if (reason === void 0) { reason = ''; }
-        this.foundation.close(reason);
-    };
-    MDCSnackbar.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 = {
-            addClass: function (className) {
-                _this.root.classList.add(className);
-            },
-            announce: function () {
-                _this.announce(_this.labelEl);
-            },
-            notifyClosed: function (reason) { return _this.emit(CLOSED_EVENT, reason ? { reason: reason } : {}); },
-            notifyClosing: function (reason) { return _this.emit(CLOSING_EVENT, reason ? { reason: reason } : {}); },
-            notifyOpened: function () { return _this.emit(OPENED_EVENT, {}); },
-            notifyOpening: function () { return _this.emit(OPENING_EVENT, {}); },
-            removeClass: function (className) { return _this.root.classList.remove(className); },
-        };
-        return new MDCSnackbarFoundation(adapter);
-    };
-    Object.defineProperty(MDCSnackbar.prototype, "timeoutMs", {
-        get: function () {
-            return this.foundation.getTimeoutMs();
-        },
-        set: function (timeoutMs) {
-            this.foundation.setTimeoutMs(timeoutMs);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MDCSnackbar.prototype, "closeOnEscape", {
-        get: function () {
-            return this.foundation.getCloseOnEscape();
-        },
-        set: function (closeOnEscape) {
-            this.foundation.setCloseOnEscape(closeOnEscape);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MDCSnackbar.prototype, "isOpen", {
-        get: function () {
-            return this.foundation.isOpen();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MDCSnackbar.prototype, "labelText", {
-        get: function () {
-            // This property only returns null if the node is a document, DOCTYPE,
-            // or notation. On Element nodes, it always returns a string.
-            return this.labelEl.textContent;
-        },
-        set: function (labelText) {
-            this.labelEl.textContent = labelText;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MDCSnackbar.prototype, "actionButtonText", {
-        get: function () {
-            return this.actionEl.textContent;
-        },
-        set: function (actionButtonText) {
-            this.actionEl.textContent = actionButtonText;
-        },
-        enumerable: false,
-        configurable: true
+class SnackbarContainer {
+  constructor() {
+    this.snackbarElements = [];
+  }
+  /**
+   * Add a new element to the container
+   *
+   * @param snackbar - element to add
+   */
+  add(snackbar) {
+    const popover = this.getPopover(snackbar);
+    // Stencil does not seem to recognise the existance of showPopover
+    // @ts-ignore
+    popover === null || popover === void 0 ? void 0 : popover.showPopover();
+    this.snackbarElements = [snackbar, ...this.snackbarElements];
+    this.emitOffsets();
+  }
+  /**
+   * Remove an element from the container
+   *
+   * @param snackbar - element to remove
+   */
+  remove(snackbar) {
+    const popover = this.getPopover(snackbar);
+    // Stencil does not seem to recognise the existance of hidePopover
+    // @ts-ignore
+    popover === null || popover === void 0 ? void 0 : popover.hidePopover();
+    this.snackbarElements = this.snackbarElements.filter((item) => item !== snackbar);
+    this.emitOffsets();
+  }
+  emitOffsets() {
+    let offset = 0;
+    this.snackbarElements.forEach((snackbar) => {
+      snackbar.dispatchEvent(new CustomEvent('changeOffset', {
+        detail: offset,
+      }));
+      offset += this.getPopover(snackbar).getBoundingClientRect().height;
     });
-    MDCSnackbar.prototype.registerKeyDownHandler = function (handler) {
-        this.listen('keydown', handler);
-    };
-    MDCSnackbar.prototype.deregisterKeyDownHandler = function (handler) {
-        this.unlisten('keydown', handler);
-    };
-    MDCSnackbar.prototype.registerSurfaceClickHandler = function (handler) {
-        this.surfaceEl.addEventListener('click', handler);
-    };
-    MDCSnackbar.prototype.deregisterSurfaceClickHandler = function (handler) {
-        this.surfaceEl.removeEventListener('click', handler);
-    };
-    MDCSnackbar.prototype.isActionButton = function (target) {
-        return Boolean(closest(target, ACTION_SELECTOR));
-    };
-    MDCSnackbar.prototype.isActionIcon = function (target) {
-        return Boolean(closest(target, DISMISS_SELECTOR));
-    };
-    return MDCSnackbar;
-}(MDCComponent));
+  }
+  getPopover(snackbar) {
+    return snackbar.shadowRoot.querySelector('[popover]');
+  }
+}
 
-const snackbarCss = "*{box-sizing:border-box}.mdc-snackbar{top:var(--snackbar-top, auto);right:var(--snackbar-right, 0);bottom:var(--snackbar-bottom, 0);left:var(--snackbar-left, 0);display:none;position:fixed;z-index:8;padding:0.75rem;align-items:center;justify-content:center}.mdc-snackbar--opening,.mdc-snackbar--open,.mdc-snackbar--closing{display:flex}.mdc-snackbar--open .mdc-snackbar__label,.mdc-snackbar--open .mdc-snackbar__actions{visibility:visible}.mdc-snackbar--open .mdc-snackbar__surface{transform:scale(1);opacity:1}.mdc-snackbar__surface{transition:opacity 0.2s cubic-bezier(0, 0, 0.2, 1), transform 0.2s cubic-bezier(0, 0, 0.2, 1);padding:0.5rem;display:flex;align-items:center;justify-content:flex-start;gap:0.25rem;min-height:3.25rem;min-width:unset;max-width:42rem;transform:scale(0.8);opacity:0;border-radius:0.75rem;background-color:rgb(var(--contrast-1400));box-shadow:var(--shadow-depth-8), var(--shadow-depth-16)}.mdc-snackbar__label{visibility:hidden;color:rgb(var(--contrast-100));-webkit-font-smoothing:antialiased;font-size:0.8125rem;font-weight:400;padding:0 0.25rem;width:100%;flex-grow:1}.mdc-snackbar__actions{visibility:hidden;display:flex;flex-shrink:0;align-items:center;box-sizing:border-box;gap:0.5rem}.dismiss,.mdc-snackbar__actions{--lime-elevated-surface-background-color:rgb(\n      var(--contrast-1300)\n  )}.dismiss{--mdc-theme-on-surface:rgb(var(--contrast-100));--icon-background-color:var(--lime-elevated-surface-background-color);--fill-color:var(--mdc-theme-primary);--track-color:rgb(var(--contrast-800), 0.2);position:absolute;top:-0.9rem;left:-0.9rem;transform:scale(0.8);display:flex;align-items:center;justify-content:center}.dismiss limel-icon-button.mdc-snackbar__dismiss{transform:scale(0.8);margin:0;padding:0}.dismiss svg{position:absolute;transform:rotate(90deg);fill:transparent;stroke-dasharray:100;stroke-linecap:round}.mdc-snackbar--open .dismiss svg{animation:timeout var(--snackbar-timeout) linear forwards}@keyframes timeout{0%{stroke-width:4;stroke-dashoffset:0;opacity:1}100%{stroke-width:1;stroke-dashoffset:-100;opacity:0.7}}";
+const snackbarCss = "*{box-sizing:border-box}aside{background:none;border:none;inset:unset;overflow:visible;padding:0.5rem 0.5rem 0 0.5rem;right:0;width:var(--limel-snackbar-width, 21rem);top:calc(var(--snackbar-distance-to-top-edge) + env(safe-area-inset-top, 0));transition:opacity var(--limel-snackbar-opacity-transition-speed, 0.2s) ease, top var(--limel-snackbar-top-transition-speed, 0.46s) cubic-bezier(1, 0.09, 0, 0.89), transform var(--limel-snackbar-top-transition-speed, 0.46s) ease;transform:translate3d(0, 0, 0);opacity:1}aside.is-closing{transform:translate3d(2rem, 0, 0);opacity:0;--limel-snackbar-top-transition-speed:0.2s;--limel-snackbar-opacity-transition-speed:0.2s}.surface{overflow:hidden;padding:0.5rem;display:flex;align-items:center;justify-content:flex-start;gap:0.25rem;min-height:3.25rem;border-radius:0.75rem;background-color:rgb(var(--contrast-1400));box-shadow:var(--shadow-depth-8), var(--shadow-depth-16)}.label{color:rgb(var(--contrast-100));-webkit-font-smoothing:antialiased;font-size:0.8125rem;font-weight:400;padding:0 0.25rem;width:100%;flex-grow:1}.actions{display:flex;flex-shrink:0;align-items:center;box-sizing:border-box;gap:0.5rem}.dismiss,.actions{--lime-elevated-surface-background-color:rgb(\n      var(--contrast-1300)\n  )}.dismiss{--mdc-theme-on-surface:rgb(var(--contrast-100));--icon-background-color:var(--lime-elevated-surface-background-color);--fill-color:var(--mdc-theme-primary);--track-color:rgb(var(--contrast-800), 0.2);transition:opacity 0.1s ease, transform 0.1s ease;position:absolute;top:-0.375rem;left:-0.375rem;transform:scale(0.7);display:flex;align-items:center;justify-content:center}.dismiss svg{position:absolute;transform:rotate(90deg);fill:transparent;stroke-dasharray:100;stroke-linecap:round}aside:popover-open .dismiss svg{animation:timeout var(--snackbar-timeout) linear forwards}.dismiss .is-closing{transform:scale(0.5);opacity:0}.dismiss-button{transform:scale(0.8);margin:0;padding:0}@keyframes timeout{0%{stroke-width:4;stroke-dashoffset:0;opacity:1}100%{stroke-width:1;stroke-dashoffset:-100;opacity:0.7}}";
 
+const container = new SnackbarContainer();
+const hideAnimationDuration = 300;
 const Snackbar = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.action = createEvent(this, "action", 7);
     this.hide = createEvent(this, "hide", 7);
+    this.close = () => {
+      if (!this.open) {
+        return false;
+      }
+      this.closing = true;
+      if (this.timeoutId) {
+        clearTimeout(this.timeoutId);
+        this.timeoutId = undefined;
+      }
+      setTimeout(() => {
+        this.open = false;
+        container.remove(this.host);
+        this.hide.emit();
+        this.offset = 0;
+      }, hideAnimationDuration);
+    };
+    this.handleClickAction = () => {
+      this.action.emit();
+    };
     this.message = undefined;
     this.timeout = 5000;
     this.actionText = undefined;
     this.dismissible = true;
     this.multiline = undefined;
     this.language = 'en';
-    this.handleMdcClosing = this.handleMdcClosing.bind(this);
-  }
-  connectedCallback() {
-    this.initialize();
-  }
-  componentDidLoad() {
-    this.initialize();
+    this.offset = 0;
+    this.open = false;
+    this.closing = true;
+    this.snackbarId = createRandomString();
   }
-  initialize() {
-    const element = this.host.shadowRoot.querySelector('.mdc-snackbar');
-    if (!element) {
-      return;
-    }
-    this.mdcSnackbar = new MDCSnackbar(element);
-    this.mdcSnackbar.listen('MDCSnackbar:closing', this.handleMdcClosing);
-  }
-  disconnectedCallback() {
-    this.mdcSnackbar.unlisten('MDCSnackbar:closing', this.handleMdcClosing);
-    this.mdcSnackbar.destroy();
+  onChangeIndex(event) {
+    event.stopPropagation();
+    this.offset = event.detail;
   }
   /**
    * Show the snackbar
    */
   async show() {
+    if (this.open) {
+      return;
+    }
+    this.open = true;
+    this.closing = false;
+    container.add(this.host);
     if (this.timeout) {
-      this.mdcSnackbar.timeoutMs = this.timeout;
+      this.timeoutId = window.setTimeout(this.close, Math.max(this.timeout - hideAnimationDuration, 0));
     }
-    this.mdcSnackbar.labelText = this.message;
-    this.mdcSnackbar.open();
   }
   render() {
-    return (h("aside", { class: `
-                    mdc-snackbar
-                    ${this.multiline ? 'mdc-snackbar--stacked' : ''}
-                `, style: {
+    return (h("aside", { popover: "manual", style: {
         '--snackbar-timeout': `${this.timeout}ms`,
-      } }, h("div", { class: "mdc-snackbar__surface", role: "status", "aria-relevant": "additions" }, h("div", { class: "mdc-snackbar__label", "aria-atomic": "false" }), this.renderActions(this.actionText), this.renderDismissButton(this.dismissible))));
-  }
-  handleMdcClosing(event) {
-    if (event.detail.reason === 'action') {
-      this.action.emit();
-    }
-    else {
-      this.hide.emit();
-    }
+        '--snackbar-distance-to-top-edge': `${this.offset}px`,
+      }, class: {
+        open: this.open,
+        'is-closing': this.closing,
+      }, id: this.snackbarId, role: this.open ? 'status' : undefined, "aria-relevant": this.open ? 'additions' : undefined }, h("div", { class: "surface", "aria-atomic": "false" }, h("div", { class: "label" }, this.message), this.renderActions(this.actionText), this.renderDismissButton(this.dismissible))));
   }
   renderActions(actionText) {
     if (!actionText) {
       return;
     }
-    return (h("div", { class: "mdc-snackbar__actions", "aria-atomic": "true" }, this.renderActionButton(actionText)));
+    return (h("div", { class: "actions", "aria-atomic": "true" }, this.renderActionButton(actionText)));
   }
   renderActionButton(actionText) {
     if (!actionText) {
       return;
     }
-    return (h("limel-button", { class: "mdc-button mdc-snackbar__action", label: actionText }));
+    return (h("limel-button", { label: actionText, onClick: this.handleClickAction }));
   }
   renderDismissButton(dismissible) {
     if (!dismissible) {
       return;
     }
     const label = translate.get('snackbar.dismiss', this.language);
-    return (h("div", { class: "dismiss" }, this.renderTimeoutVisualization(), h("limel-icon-button", { class: "mdc-icon-button mdc-snackbar__dismiss", icon: "multiply", label: label })));
+    return (h("div", { class: "dismiss" }, this.renderTimeoutVisualization(), h("limel-icon-button", { class: "dismiss-button", icon: "multiply", label: label, onClick: this.close, "aria-controls": this.snackbarId })));
   }
   renderTimeoutVisualization() {
     return (h("svg", { width: "36", height: "36", viewBox: "0 0 36 36" }, h("circle", { r: "18", cx: "18", cy: "18", fill: "var(--track-color)" }), h("path", { class: "track", d: "M 18,18 m -16,0 a 16,16 0 1,0 32,0 a 16,16 0 1,0 -32,0", stroke: "var(--fill-color)" })));