nve-designsystem 0.3.2 → 0.3.4

package/chunks/{chunk.7OLWOZOB.js → chunk.2NJFRWZV.js}

@@ -1,4 +1,4 @@
-import { S as e } from "./chunk.7HOIOSC7.js";
+import { S as e } from "./chunk.R2T2D3TO.js";
 var r = e;
 e.define("sl-spinner");
 export {

package/chunks/{chunk.KWPBDQ6I.js → chunk.2RCF7SLU.js}

@@ -1,4 +1,4 @@
-import { _ as c, a as m } from "./chunk.5THGRZAA.js";
+import { _ as c, a as m } from "./chunk.NLWS5DN7.js";
 var a = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakSet(), l = /* @__PURE__ */ new WeakMap(), y = class {
   constructor(e, i) {
     this.handleFormData = (t) => {

package/chunks/{chunk.LHI6QEL2.js → chunk.3EPZX5HE.js}

@@ -1,4 +1,4 @@
-import { _ as s, a } from "./chunk.5THGRZAA.js";
+import { _ as s, a } from "./chunk.NLWS5DN7.js";
 var u = /* @__PURE__ */ new Map(), f = /* @__PURE__ */ new WeakMap();
 function c(t) {
   return t ?? { keyframes: [], options: { duration: 0 } };

package/chunks/{chunk.JA7IPEW3.js → chunk.4K24TN3D.js}

@@ -1,12 +1,12 @@
 import { a as b } from "./chunk.LXDTFLWU.js";
-import { d as F, c as A, b as a, S as E } from "./chunk.5THGRZAA.js";
+import { d as F, c as A, b as a, S as E } from "./chunk.NLWS5DN7.js";
 import { l as _, u as w } from "./chunk.RWUUFNUL.js";
 import { i as D, k as x } from "./lit-element.js";
-import { S } from "./chunk.XJILXOW4.js";
-import { s as h, g as n, b as d, a as p, w as k } from "./chunk.LHI6QEL2.js";
+import { S } from "./chunk.AYP3HPB7.js";
+import { s as h, g as n, b as d, a as p, w as k } from "./chunk.3EPZX5HE.js";
 import { H as L } from "./chunk.NYIIDP5N.js";
 import { L as z } from "./chunk.WLV3FVBR.js";
-import { w as T } from "./chunk.2FB5TK5H.js";
+import { w as T } from "./chunk.CCJUT23E.js";
 import { R as H } from "./class-map.js";
 import { t as C } from "./if-defined.js";
 import { n as m } from "./property.js";

package/chunks/{chunk.L4XM7VSU.js → chunk.6HLGYC3C.js}

@@ -1,11 +1,11 @@
 import { i as n, k as l } from "./lit-element.js";
 import { d as h } from "./chunk.GI7VDIWX.js";
 import { f as d } from "./chunk.SI4ACBFK.js";
-import { F as u } from "./chunk.KWPBDQ6I.js";
+import { F as u } from "./chunk.2RCF7SLU.js";
 import { H as p } from "./chunk.NYIIDP5N.js";
-import { S as m } from "./chunk.ALSPWWWG.js";
-import { w as a } from "./chunk.2FB5TK5H.js";
-import { c as b, b as t, S as k } from "./chunk.5THGRZAA.js";
+import { S as m } from "./chunk.O7VCMB7W.js";
+import { w as a } from "./chunk.CCJUT23E.js";
+import { c as b, b as t, S as k } from "./chunk.NLWS5DN7.js";
 import { R as s } from "./class-map.js";
 import { t as f } from "./if-defined.js";
 import { F as c } from "./live.js";

package/chunks/{chunk.C2BA3SSZ.js → chunk.7DDYEY2M.js}

@@ -1,4 +1,4 @@
-import { S as p } from "./chunk.62L7S2LE.js";
+import { S as p } from "./chunk.H24ENZMO.js";
 var a = p;
 p.define("sl-popup");
 export {

package/chunks/{chunk.XGGOIW4X.js → chunk.7EHPR4EM.js}

@@ -1,5 +1,5 @@
 import { i as a, k as u } from "./lit-element.js";
-import { c, b as d, S as m } from "./chunk.5THGRZAA.js";
+import { c, b as d, S as m } from "./chunk.NLWS5DN7.js";
 import { e as h } from "./query.js";
 var f = a`
   :host {

package/chunks/{chunk.XJILXOW4.js → chunk.AYP3HPB7.js}

@@ -1,6 +1,6 @@
 import { i as a } from "./lit-element.js";
-import { S as l } from "./chunk.ALSPWWWG.js";
-import { c, b as i, S as u } from "./chunk.5THGRZAA.js";
+import { S as l } from "./chunk.O7VCMB7W.js";
+import { c, b as i, S as u } from "./chunk.NLWS5DN7.js";
 import { R as d } from "./class-map.js";
 import { e as n, k as b } from "./static.js";
 import { t as e } from "./if-defined.js";

package/chunks/{chunk.2FB5TK5H.js → chunk.CCJUT23E.js}

@@ -1,4 +1,4 @@
-import { a as u } from "./chunk.5THGRZAA.js";
+import { a as u } from "./chunk.NLWS5DN7.js";
 function w(t, c) {
   const l = u({
     waitUntilFirstUpdate: !1

package/chunks/{chunk.EIGIU6GJ.js → chunk.CKUHGEST.js}

@@ -1,8 +1,8 @@
 import { b as l } from "./chunk.MAQXLKQ7.js";
 import { i as a } from "./lit-element.js";
 import { H as r } from "./chunk.NYIIDP5N.js";
-import { w as u } from "./chunk.2FB5TK5H.js";
-import { c as n, b as e, S as h } from "./chunk.5THGRZAA.js";
+import { w as u } from "./chunk.CCJUT23E.js";
+import { c as n, b as e, S as h } from "./chunk.NLWS5DN7.js";
 import { R as d } from "./class-map.js";
 import { k as p } from "./static.js";
 import { t as b } from "./if-defined.js";

package/chunks/{chunk.N6VGRU7O.js → chunk.DQ4DJ4AJ.js}

@@ -1,12 +1,12 @@
 import { i as S, D as g, k as c } from "./lit-element.js";
 import { r as k } from "./directive-helpers.js";
 import { i as _, t as C, e as w, R as $ } from "./class-map.js";
-import { S as A } from "./chunk.62L7S2LE.js";
-import { S as L } from "./chunk.7HOIOSC7.js";
+import { S as A } from "./chunk.H24ENZMO.js";
+import { S as L } from "./chunk.R2T2D3TO.js";
 import { H as E, g as M } from "./chunk.NYIIDP5N.js";
-import { S as R } from "./chunk.ALSPWWWG.js";
-import { w as b } from "./chunk.2FB5TK5H.js";
-import { c as T, b as l, S as P } from "./chunk.5THGRZAA.js";
+import { S as R } from "./chunk.O7VCMB7W.js";
+import { w as b } from "./chunk.CCJUT23E.js";
+import { c as T, b as l, S as P } from "./chunk.NLWS5DN7.js";
 import { n as d } from "./property.js";
 import { e as y } from "./query.js";
 var D = S`

package/chunks/{chunk.MVKF2MV6.js → chunk.DZGTLMEZ.js}

@@ -1,8 +1,8 @@
 import { i as r, k as c } from "./lit-element.js";
 import { L as p } from "./chunk.WLV3FVBR.js";
-import { S as d } from "./chunk.ALSPWWWG.js";
-import { w as a } from "./chunk.2FB5TK5H.js";
-import { c as h, b as t, S as u } from "./chunk.5THGRZAA.js";
+import { S as d } from "./chunk.O7VCMB7W.js";
+import { w as a } from "./chunk.CCJUT23E.js";
+import { c as h, b as t, S as u } from "./chunk.NLWS5DN7.js";
 import { R as f } from "./class-map.js";
 import { n } from "./property.js";
 import { r as i } from "./state.js";

package/chunks/{chunk.62L7S2LE.js → chunk.H24ENZMO.js}

@@ -1,5 +1,5 @@
 import { i as $t, k as yt } from "./lit-element.js";
-import { c as Dt, b as x, S as Nt, _ as Mt, a as _t } from "./chunk.5THGRZAA.js";
+import { c as Dt, b as x, S as Nt, _ as Mt, a as _t } from "./chunk.NLWS5DN7.js";
 import { R as bt } from "./class-map.js";
 import { n as E } from "./property.js";
 import { e as At } from "./query.js";
@@ -1033,7 +1033,7 @@ var v = class extends Nt {
       const t = this.getRootNode();
       this.anchorEl = t.getElementById(this.anchor);
     } else this.anchor instanceof Element || ve(this.anchor) ? this.anchorEl = this.anchor : this.anchorEl = this.querySelector('[slot="anchor"]');
-    this.anchorEl instanceof HTMLSlotElement && (this.anchorEl = this.anchorEl.assignedElements({ flatten: !0 })[0]), this.anchorEl && this.start();
+    this.anchorEl instanceof HTMLSlotElement && (this.anchorEl = this.anchorEl.assignedElements({ flatten: !0 })[0]), this.anchorEl && this.active && this.start();
   }
   start() {
     this.anchorEl && (this.cleanup = me(this.anchorEl, this.popup, () => {

package/chunks/{chunk.4V3LPB2X.js → chunk.IHZEMJ7S.js}

@@ -1,7 +1,7 @@
 import { i as a, k as t } from "./lit-element.js";
-import { S as l } from "./chunk.ALSPWWWG.js";
-import { w as r } from "./chunk.2FB5TK5H.js";
-import { c as d, b as i, S as n } from "./chunk.5THGRZAA.js";
+import { S as l } from "./chunk.O7VCMB7W.js";
+import { w as r } from "./chunk.CCJUT23E.js";
+import { c as d, b as i, S as n } from "./chunk.NLWS5DN7.js";
 import { R as c } from "./class-map.js";
 import { n as o } from "./property.js";
 import { r as s } from "./state.js";

package/chunks/{chunk.6OYGZP33.js → chunk.ITPUUJXW.js}

@@ -1,12 +1,12 @@
 import { i as f, k as c } from "./lit-element.js";
 import { f as _ } from "./chunk.SI4ACBFK.js";
-import { F as C, c as R, a as x, v as V } from "./chunk.KWPBDQ6I.js";
-import { c as g, b as l, S as b } from "./chunk.5THGRZAA.js";
+import { c as g, b as l, S as b } from "./chunk.NLWS5DN7.js";
 import { n as r } from "./property.js";
 import { r as p } from "./state.js";
 import { e as m } from "./query.js";
+import { F as C, c as R, a as x, v as V } from "./chunk.2RCF7SLU.js";
 import { H as k } from "./chunk.NYIIDP5N.js";
-import { w as v } from "./chunk.2FB5TK5H.js";
+import { w as v } from "./chunk.CCJUT23E.js";
 import { R as w } from "./class-map.js";
 var A = f`
   :host {

package/chunks/{chunk.VVYY25KM.js → chunk.IZD4DHXL.js}

@@ -1,9 +1,9 @@
 import { i as y, k as f } from "./lit-element.js";
-import { S as g } from "./chunk.62L7S2LE.js";
-import { s as m, p as l, a as h, g as d, b as c, w as u } from "./chunk.LHI6QEL2.js";
+import { S as g } from "./chunk.H24ENZMO.js";
+import { s as m, p as l, a as h, g as d, b as c, w as u } from "./chunk.3EPZX5HE.js";
 import { L as v } from "./chunk.WLV3FVBR.js";
-import { w as p } from "./chunk.2FB5TK5H.js";
-import { c as w, b as o, S as b } from "./chunk.5THGRZAA.js";
+import { w as p } from "./chunk.CCJUT23E.js";
+import { c as w, b as o, S as b } from "./chunk.NLWS5DN7.js";
 import { R as k } from "./class-map.js";
 import { n as i } from "./property.js";
 import { e as n } from "./query.js";

package/chunks/{chunk.FZZ6EDTG.js → chunk.KSOMZJI5.js}

@@ -1,5 +1,5 @@
 import { i as o, k as s } from "./lit-element.js";
-import { c as r, b as t, S as a } from "./chunk.5THGRZAA.js";
+import { c as r, b as t, S as a } from "./chunk.NLWS5DN7.js";
 import { R as n } from "./class-map.js";
 import { n as i } from "./property.js";
 var l = o`

package/chunks/chunk.NLWS5DN7.js

@@ -0,0 +1,118 @@
+import { i as y, h as b } from "./lit-element.js";
+import { n as d } from "./property.js";
+var v = Object.defineProperty, P = Object.defineProperties, O = Object.getOwnPropertyDescriptor, g = Object.getOwnPropertyDescriptors, h = Object.getOwnPropertySymbols, m = Object.prototype.hasOwnProperty, E = Object.prototype.propertyIsEnumerable, c = (r, e) => (e = Symbol[r]) ? e : Symbol.for("Symbol." + r), p = (r, e, t) => e in r ? v(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, S = (r, e) => {
+  for (var t in e || (e = {}))
+    m.call(e, t) && p(r, t, e[t]);
+  if (h)
+    for (var t of h(e))
+      E.call(e, t) && p(r, t, e[t]);
+  return r;
+}, $ = (r, e) => P(r, g(e)), u = (r, e, t, s) => {
+  for (var i = s > 1 ? void 0 : s ? O(e, t) : e, a = r.length - 1, n; a >= 0; a--)
+    (n = r[a]) && (i = (s ? n(e, t, i) : n(i)) || i);
+  return s && i && v(e, t, i), i;
+}, _ = (r, e, t) => {
+  if (!e.has(r))
+    throw TypeError("Cannot " + t);
+}, x = (r, e, t) => (_(r, e, "read from private field"), e.get(r)), C = (r, e, t) => {
+  if (e.has(r))
+    throw TypeError("Cannot add the same private member more than once");
+  e instanceof WeakSet ? e.add(r) : e.set(r, t);
+}, j = (r, e, t, s) => (_(r, e, "write to private field"), e.set(r, t), t), R = function(r, e) {
+  this[0] = r, this[1] = e;
+}, A = (r) => {
+  var e = r[c("asyncIterator")], t = !1, s, i = {};
+  return e == null ? (e = r[c("iterator")](), s = (a) => i[a] = (n) => e[a](n)) : (e = e.call(r), s = (a) => i[a] = (n) => {
+    if (t) {
+      if (t = !1, a === "throw")
+        throw n;
+      return n;
+    }
+    return t = !0, {
+      done: !1,
+      value: new R(new Promise((w) => {
+        var f = e[a](n);
+        if (!(f instanceof Object))
+          throw TypeError("Object expected");
+        w(f);
+      }), 1)
+    };
+  }), i[c("iterator")] = () => i, s("next"), "throw" in e ? s("throw") : i.throw = (a) => {
+    throw a;
+  }, "return" in e && s("return"), i;
+}, T = y`
+  :host {
+    box-sizing: border-box;
+  }
+
+  :host *,
+  :host *::before,
+  :host *::after {
+    box-sizing: inherit;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+`, o, l = class extends b {
+  constructor() {
+    super(), C(this, o, !1), this.initialReflectedProperties = /* @__PURE__ */ new Map(), Object.entries(this.constructor.dependencies).forEach(([r, e]) => {
+      this.constructor.define(r, e);
+    });
+  }
+  emit(r, e) {
+    const t = new CustomEvent(r, S({
+      bubbles: !0,
+      cancelable: !1,
+      composed: !0,
+      detail: {}
+    }, e));
+    return this.dispatchEvent(t), t;
+  }
+  /* eslint-enable */
+  static define(r, e = this, t = {}) {
+    const s = customElements.get(r);
+    if (!s) {
+      try {
+        customElements.define(r, e, t);
+      } catch {
+        customElements.define(r, class extends e {
+        }, t);
+      }
+      return;
+    }
+    let i = " (unknown version)", a = i;
+    "version" in e && e.version && (i = " v" + e.version), "version" in s && s.version && (a = " v" + s.version), !(i && a && i === a) && console.warn(
+      `Attempted to register <${r}>${i}, but <${r}>${a} has already been registered.`
+    );
+  }
+  attributeChangedCallback(r, e, t) {
+    x(this, o) || (this.constructor.elementProperties.forEach(
+      (s, i) => {
+        s.reflect && this[i] != null && this.initialReflectedProperties.set(i, this[i]);
+      }
+    ), j(this, o, !0)), super.attributeChangedCallback(r, e, t);
+  }
+  willUpdate(r) {
+    super.willUpdate(r), this.initialReflectedProperties.forEach((e, t) => {
+      r.has(t) && this[t] == null && (this[t] = e);
+    });
+  }
+};
+o = /* @__PURE__ */ new WeakMap();
+l.version = "2.17.1";
+l.dependencies = {};
+u([
+  d()
+], l.prototype, "dir", 2);
+u([
+  d()
+], l.prototype, "lang", 2);
+export {
+  l as S,
+  $ as _,
+  S as a,
+  u as b,
+  T as c,
+  A as d
+};

package/chunks/{chunk.4SGTRSOV.js → chunk.NZL6FC7F.js}

@@ -1,14 +1,15 @@
-import { S as u } from "./chunk.XJILXOW4.js";
-import { s as h, a as i, g as l, b as n, w as c } from "./chunk.LHI6QEL2.js";
-import { H as m } from "./chunk.NYIIDP5N.js";
+import { S as w } from "./chunk.AYP3HPB7.js";
+import { s as u, a as s, g as l, b as d, w as c } from "./chunk.3EPZX5HE.js";
+import { H as g } from "./chunk.NYIIDP5N.js";
 import { L as f } from "./chunk.WLV3FVBR.js";
-import { i as v, k as d } from "./lit-element.js";
-import { w as p } from "./chunk.2FB5TK5H.js";
-import { c as b, b as t, S as g } from "./chunk.5THGRZAA.js";
-import { R as y } from "./class-map.js";
-import { n as s } from "./property.js";
-import { e as _ } from "./query.js";
-var w = v`
+import { i as _, k as n } from "./lit-element.js";
+import { w as p } from "./chunk.CCJUT23E.js";
+import { c as b, b as a, S as y } from "./chunk.NLWS5DN7.js";
+import { R as h } from "./class-map.js";
+import { n as i } from "./property.js";
+import { r as T } from "./state.js";
+import { e as m } from "./query.js";
+var C = _`
   :host {
     display: contents;
 
@@ -30,6 +31,7 @@ var w = v`
     line-height: 1.6;
     color: var(--sl-color-neutral-700);
     margin: inherit;
+    overflow: hidden;
   }
 
   .alert:not(.alert--has-icon) .alert__icon,
@@ -45,6 +47,10 @@ var w = v`
     padding-inline-start: var(--sl-spacing-large);
   }
 
+  .alert--has-countdown {
+    border-bottom: none;
+  }
+
   .alert--primary {
     border-top-color: var(--sl-color-primary-600);
   }
@@ -99,31 +105,92 @@ var w = v`
     font-size: var(--sl-font-size-medium);
     padding-inline-end: var(--sl-spacing-medium);
   }
-`, a = Object.assign(document.createElement("div"), { className: "sl-toast-stack" }), e = class extends g {
+
+  .alert__countdown {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: calc(var(--sl-panel-border-width) * 3);
+    background-color: var(--sl-panel-border-color);
+    display: flex;
+  }
+
+  .alert__countdown--ltr {
+    justify-content: flex-end;
+  }
+
+  .alert__countdown .alert__countdown-elapsed {
+    height: 100%;
+    width: 0;
+  }
+
+  .alert--primary .alert__countdown-elapsed {
+    background-color: var(--sl-color-primary-600);
+  }
+
+  .alert--success .alert__countdown-elapsed {
+    background-color: var(--sl-color-success-600);
+  }
+
+  .alert--neutral .alert__countdown-elapsed {
+    background-color: var(--sl-color-neutral-600);
+  }
+
+  .alert--warning .alert__countdown-elapsed {
+    background-color: var(--sl-color-warning-600);
+  }
+
+  .alert--danger .alert__countdown-elapsed {
+    background-color: var(--sl-color-danger-600);
+  }
+
+  .alert__timer {
+    display: none;
+  }
+`, r = Object.assign(document.createElement("div"), { className: "sl-toast-stack" }), e = class extends y {
   constructor() {
-    super(...arguments), this.hasSlotController = new m(this, "icon", "suffix"), this.localize = new f(this), this.open = !1, this.closable = !1, this.variant = "primary", this.duration = 1 / 0;
+    super(...arguments), this.hasSlotController = new g(this, "icon", "suffix"), this.localize = new f(this), this.open = !1, this.closable = !1, this.variant = "primary", this.duration = 1 / 0, this.remainingTime = this.duration;
   }
   firstUpdated() {
     this.base.hidden = !this.open;
   }
   restartAutoHide() {
-    clearTimeout(this.autoHideTimeout), this.open && this.duration < 1 / 0 && (this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration));
+    this.handleCountdownChange(), clearTimeout(this.autoHideTimeout), clearInterval(this.remainingTimeInterval), this.open && this.duration < 1 / 0 && (this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration), this.remainingTime = this.duration, this.remainingTimeInterval = window.setInterval(() => {
+      this.remainingTime -= 100;
+    }, 100));
+  }
+  pauseAutoHide() {
+    var t;
+    (t = this.countdownAnimation) == null || t.pause(), clearTimeout(this.autoHideTimeout), clearInterval(this.remainingTimeInterval);
+  }
+  resumeAutoHide() {
+    var t;
+    this.duration < 1 / 0 && (this.autoHideTimeout = window.setTimeout(() => this.hide(), this.remainingTime), this.remainingTimeInterval = window.setInterval(() => {
+      this.remainingTime -= 100;
+    }, 100), (t = this.countdownAnimation) == null || t.play());
+  }
+  handleCountdownChange() {
+    if (this.open && this.duration < 1 / 0 && this.countdown) {
+      const { countdownElement: t } = this, o = "100%", v = "0";
+      this.countdownAnimation = t.animate([{ width: o }, { width: v }], {
+        duration: this.duration,
+        easing: "linear"
+      });
+    }
   }
   handleCloseClick() {
     this.hide();
   }
-  handleMouseMove() {
-    this.restartAutoHide();
-  }
   async handleOpenChange() {
     if (this.open) {
-      this.emit("sl-show"), this.duration < 1 / 0 && this.restartAutoHide(), await i(this.base), this.base.hidden = !1;
-      const { keyframes: r, options: o } = l(this, "alert.show", { dir: this.localize.dir() });
-      await n(this.base, r, o), this.emit("sl-after-show");
+      this.emit("sl-show"), this.duration < 1 / 0 && this.restartAutoHide(), await s(this.base), this.base.hidden = !1;
+      const { keyframes: t, options: o } = l(this, "alert.show", { dir: this.localize.dir() });
+      await d(this.base, t, o), this.emit("sl-after-show");
     } else {
-      this.emit("sl-hide"), clearTimeout(this.autoHideTimeout), await i(this.base);
-      const { keyframes: r, options: o } = l(this, "alert.hide", { dir: this.localize.dir() });
-      await n(this.base, r, o), this.base.hidden = !0, this.emit("sl-after-hide");
+      this.emit("sl-hide"), clearTimeout(this.autoHideTimeout), clearInterval(this.remainingTimeInterval), await s(this.base);
+      const { keyframes: t, options: o } = l(this, "alert.hide", { dir: this.localize.dir() });
+      await d(this.base, t, o), this.base.hidden = !0, this.emit("sl-after-hide");
     }
   }
   handleDurationChange() {
@@ -145,26 +212,27 @@ var w = v`
    * calling this method again. The returned promise will resolve after the alert is hidden.
    */
   async toast() {
-    return new Promise((r) => {
-      a.parentElement === null && document.body.append(a), a.appendChild(this), requestAnimationFrame(() => {
+    return new Promise((t) => {
+      this.handleCountdownChange(), r.parentElement === null && document.body.append(r), r.appendChild(this), requestAnimationFrame(() => {
         this.clientWidth, this.show();
       }), this.addEventListener(
         "sl-after-hide",
         () => {
-          a.removeChild(this), r(), a.querySelector("sl-alert") === null && a.remove();
+          r.removeChild(this), t(), r.querySelector("sl-alert") === null && r.remove();
         },
         { once: !0 }
       );
     });
   }
   render() {
-    return d`
+    return n`
       <div
         part="base"
-        class=${y({
+        class=${h({
       alert: !0,
       "alert--open": this.open,
       "alert--closable": this.closable,
+      "alert--has-countdown": !!this.countdown,
       "alert--has-icon": this.hasSlotController.test("icon"),
       "alert--primary": this.variant === "primary",
       "alert--success": this.variant === "success",
@@ -174,7 +242,8 @@ var w = v`
     })}
         role="alert"
         aria-hidden=${this.open ? "false" : "true"}
-        @mousemove=${this.handleMouseMove}
+        @mouseenter=${this.pauseAutoHide}
+        @mouseleave=${this.resumeAutoHide}
       >
         <div part="icon" class="alert__icon">
           <slot name="icon"></slot>
@@ -184,7 +253,7 @@ var w = v`
           <slot></slot>
         </div>
 
-        ${this.closable ? d`
+        ${this.closable ? n`
               <sl-icon-button
                 part="close-button"
                 exportparts="base:close-button__base"
@@ -195,49 +264,71 @@ var w = v`
                 @click=${this.handleCloseClick}
               ></sl-icon-button>
             ` : ""}
+
+        <div role="timer" class="alert__timer">${this.remainingTime}</div>
+
+        ${this.countdown ? n`
+              <div
+                class=${h({
+      alert__countdown: !0,
+      "alert__countdown--ltr": this.countdown === "ltr"
+    })}
+              >
+                <div class="alert__countdown-elapsed"></div>
+              </div>
+            ` : ""}
       </div>
     `;
   }
 };
-e.styles = [b, w];
-e.dependencies = { "sl-icon-button": u };
-t([
-  _('[part~="base"]')
+e.styles = [b, C];
+e.dependencies = { "sl-icon-button": w };
+a([
+  m('[part~="base"]')
 ], e.prototype, "base", 2);
-t([
-  s({ type: Boolean, reflect: !0 })
+a([
+  m(".alert__countdown-elapsed")
+], e.prototype, "countdownElement", 2);
+a([
+  i({ type: Boolean, reflect: !0 })
 ], e.prototype, "open", 2);
-t([
-  s({ type: Boolean, reflect: !0 })
+a([
+  i({ type: Boolean, reflect: !0 })
 ], e.prototype, "closable", 2);
-t([
-  s({ reflect: !0 })
+a([
+  i({ reflect: !0 })
 ], e.prototype, "variant", 2);
-t([
-  s({ type: Number })
+a([
+  i({ type: Number })
 ], e.prototype, "duration", 2);
-t([
+a([
+  i({ type: String, reflect: !0 })
+], e.prototype, "countdown", 2);
+a([
+  T()
+], e.prototype, "remainingTime", 2);
+a([
   p("open", { waitUntilFirstUpdate: !0 })
 ], e.prototype, "handleOpenChange", 1);
-t([
+a([
   p("duration")
 ], e.prototype, "handleDurationChange", 1);
-h("alert.show", {
+u("alert.show", {
   keyframes: [
     { opacity: 0, scale: 0.8 },
     { opacity: 1, scale: 1 }
   ],
   options: { duration: 250, easing: "ease" }
 });
-h("alert.hide", {
+u("alert.hide", {
   keyframes: [
     { opacity: 1, scale: 1 },
     { opacity: 0, scale: 0.8 }
   ],
   options: { duration: 250, easing: "ease" }
 });
-var D = e;
+var B = e;
 e.define("sl-alert");
 export {
-  D as a
+  B as a
 };