@skf-design-system/ui-components 1.0.2-beta.5 → 1.0.2-beta.7

package/dist/components/tag/tag.component.js

@@ -1,39 +1,41 @@
-var y = (e) => {
+var k = (e) => {
   throw TypeError(e);
 };
-var k = (e, o, t) => o.has(e) || y("Cannot " + t);
-var m = (e, o, t) => (k(e, o, "read from private field"), t ? t.call(e) : o.get(e)), d = (e, o, t) => o.has(e) ? y("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(e) : o.set(e, t), v = (e, o, t, i) => (k(e, o, "write to private field"), i ? i.call(e, t) : o.set(e, t), t);
+var C = (e, o, t) => o.has(e) || k("Cannot " + t);
+var m = (e, o, t) => (C(e, o, "read from private field"), t ? t.call(e) : o.get(e)), d = (e, o, t) => o.has(e) ? k("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(e) : o.set(e, t), f = (e, o, t, s) => (C(e, o, "write to private field"), s ? s.call(e, t) : o.set(e, t), t);
 import "../icon/icon.js";
-import { SkfElement as _ } from "../../internal/components/skf-element.js";
-import { stateMap as g } from "../../internal/helpers/stateMap.js";
-import { watch as w } from "../../internal/helpers/watch.js";
-import { componentStyles as $ } from "../../styles/component.styles.js";
-import { nothing as C, html as f } from "lit";
-import { property as c, query as R } from "lit/decorators.js";
-import { ifDefined as D } from "lit/directives/if-defined.js";
-import { styles as E } from "./tag.styles.js";
-var P = Object.defineProperty, z = Object.getOwnPropertyDescriptor, r = (e, o, t, i) => {
-  for (var s = i > 1 ? void 0 : i ? z(o, t) : o, l = e.length - 1, p; l >= 0; l--)
-    (p = e[l]) && (s = (i ? p(o, t, s) : p(s)) || s);
-  return i && s && P(o, t, s), s;
+import { SkfElement as g } from "../../internal/components/skf-element.js";
+import { stateMap as w } from "../../internal/helpers/stateMap.js";
+import { watch as $ } from "../../internal/helpers/watch.js";
+import { componentStyles as R } from "../../styles/component.styles.js";
+import { LocalizeController as z } from "../../utilities/localize.js";
+import { nothing as b, html as u } from "lit";
+import { property as l, query as D } from "lit/decorators.js";
+import { ifDefined as E } from "lit/directives/if-defined.js";
+import { styles as P } from "./tag.styles.js";
+var S = Object.defineProperty, B = Object.getOwnPropertyDescriptor, r = (e, o, t, s) => {
+  for (var i = s > 1 ? void 0 : s ? B(o, t) : o, a = e.length - 1, v; a >= 0; a--)
+    (v = e[a]) && (i = (s ? v(o, t, i) : v(i)) || i);
+  return s && i && S(o, t, i), i;
 };
-const b = {
+const _ = {
   size: ["sm", "md"],
   color: ["error", "info", "success", "warning"]
 };
-var a, h;
-const u = class u extends _ {
+var c, h, p;
+const y = class y extends g {
   constructor() {
     super(...arguments);
-    d(this, a);
+    d(this, c);
     d(this, h);
-    v(this, a, this.attachInternals()), v(this, h, m(this, a).states), this.size = "md", this.removable = !1, this._handleKeyDown = (t) => {
+    d(this, p);
+    f(this, c, new z(this)), f(this, h, this.attachInternals()), f(this, p, m(this, h).states), this.size = "md", this.lang = "en", this.removable = !1, this._handleKeyDown = (t) => {
       (t.key === "Enter" || t.key === " ") && this.$removeButton.click();
     }, this._handleRemove = (t) => {
       this._onRemove && this._onRemove(t);
     }, this._handleClick = (t) => {
-      var l;
-      t.stopPropagation(), t.composedPath()[0].localName === "button" ? this.remove() : (l = this.onClick) == null || l.call(this, t);
+      var a;
+      t.stopPropagation(), t.composedPath()[0].localName === "button" ? this.remove() : (a = this.onClick) == null || a.call(this, t);
     };
   }
   set onClick(t) {
@@ -54,51 +56,58 @@ const u = class u extends _ {
   disconnectedCallback() {
     super.disconnectedCallback(), this.removeEventListener("click", this._handleClick);
   }
-  attributeChangedCallback(t, i, s) {
-    super.attributeChangedCallback(t, i, s), t === "removable" && s !== null ? this.addEventListener("keydown", this._handleKeyDown) : this.removeEventListener("keydown", this._handleKeyDown);
+  attributeChangedCallback(t, s, i) {
+    super.attributeChangedCallback(t, s, i), t === "removable" && i !== null ? this.addEventListener("keydown", this._handleKeyDown) : this.removeEventListener("keydown", this._handleKeyDown);
   }
-  _handleStateChange(t, i, s) {
-    g(m(this, h), b[t]).set(s);
+  _handleStateChange(t, s, i) {
+    w(m(this, p), _[t]).set(i);
   }
   render() {
-    return f`
+    return u`
 			<div id="root">
-				${this.icon ? f`<skf-icon color=${D(this.color)} name=${this.icon} size="sm"></skf-icon>` : C}
+				${this.icon ? u`<skf-icon color=${E(this.color)} name=${this.icon} size="sm"></skf-icon>` : b}
 				<slot></slot>
-				${this.removable ? f`
-							<button @click=${this._handleRemove} type="button">
+				${this.removable ? u`
+							<button
+								@click=${this._handleRemove}
+								aria-label=${m(this, c).term("close")}
+								type="button"
+							>
 								<skf-icon name="close" size="xs"></skf-icon>
 							</button>
-						` : C}
+						` : b}
 			</div>
 		`;
   }
 };
-a = new WeakMap(), h = new WeakMap(), u.styles = [$, E];
-let n = u;
+c = new WeakMap(), h = new WeakMap(), p = new WeakMap(), y.styles = [R, P];
+let n = y;
 r([
-  c({ type: String })
+  l({ type: String })
 ], n.prototype, "size", 2);
 r([
-  c({ type: String })
+  l({ type: String })
 ], n.prototype, "icon", 2);
 r([
-  c({ type: String })
+  l({ type: String })
 ], n.prototype, "color", 2);
 r([
-  c({ attribute: !1 })
+  l({ type: String })
+], n.prototype, "lang", 2);
+r([
+  l({ attribute: !1 })
 ], n.prototype, "onClick", 1);
 r([
-  c({ attribute: !1 })
+  l({ attribute: !1 })
 ], n.prototype, "onRemove", 1);
 r([
-  c({ type: Boolean })
+  l({ type: Boolean })
 ], n.prototype, "removable", 2);
 r([
-  R("button")
+  D("button")
 ], n.prototype, "$removeButton", 2);
 r([
-  w(Object.keys(b))
+  $(Object.keys(_))
 ], n.prototype, "_handleStateChange", 1);
 export {
   n as SkfTag

package/dist/components/textarea/textarea.component.d.ts

@@ -3,6 +3,7 @@ import { FormBase } from '../../internal/components/formBase.js';
 import '../../internal/components/hint/hint.js';
 import type { FormFieldSeverity } from '../../internal/types.js';
 import type { FormFieldBaseProps } from '../../internal/types/formField.js';
+import { type Language } from '../../utilities/localize.js';
 import { type CSSResultGroup } from 'lit';
 interface SkfTextAreaProps extends Omit<FormFieldBaseProps, 'type'> {
     cols?: number;
@@ -26,6 +27,7 @@ interface SkfTextAreaProps extends Omit<FormFieldBaseProps, 'type'> {
  * @tagname skf-textarea
  */
 export declare class SkfTextArea extends FormBase implements SkfTextAreaProps {
+    #private;
     static styles: CSSResultGroup;
     /** @internal */
     private customError;
@@ -42,6 +44,8 @@ export declare class SkfTextArea extends FormBase implements SkfTextAreaProps {
     hint?: string;
     /** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */
     label?: string;
+    /** Sets the internal language of the component */
+    lang: Language;
     /** If defined, adds name to the input-element */
     name?: string;
     /** If defined, sets the maximum character length to accept for this input */
@@ -52,8 +56,6 @@ export declare class SkfTextArea extends FormBase implements SkfTextAreaProps {
     placeholder?: string;
     /** If true, makes the element not mutable, meaning the user can not edit the control */
     readonly: boolean;
-    /** If defined, renders an alternative A11y text for the asterisk */
-    requiredLabel?: string;
     /** If defined, sets the rows of the textarea */
     rows?: number;
     /** If defined, displays provided severity state */

package/dist/components/textarea/textarea.component.js

@@ -1,29 +1,37 @@
+var m = (r) => {
+  throw TypeError(r);
+};
+var c = (r, a, t) => a.has(r) || m("Cannot " + t);
+var y = (r, a, t) => (c(r, a, "read from private field"), t ? t.call(r) : a.get(r)), f = (r, a, t) => a.has(r) ? m("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(r) : a.set(r, t), b = (r, a, t, i) => (c(r, a, "write to private field"), i ? i.call(r, t) : a.set(r, t), t);
 import "../icon/icon.js";
-import { FormBase as m } from "../../internal/components/formBase.js";
+import { FormBase as $ } from "../../internal/components/formBase.js";
 import "../../internal/components/hint/hint.js";
-import { hintSeverity as c } from "../../internal/helpers/hintSeverity.js";
-import { Asterisk as y } from "../../internal/templates/asterisk.js";
-import { componentStyles as f } from "../../styles/component.styles.js";
-import { nothing as u, html as v } from "lit";
-import { property as r, state as b, query as g } from "lit/decorators.js";
-import { ifDefined as o } from "lit/directives/if-defined.js";
-import $ from "./textarea.styles.js";
-var E = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, e = (p, i, s, a) => {
-  for (var l = a > 1 ? void 0 : a ? _(i, s) : i, n = p.length - 1, h; n >= 0; n--)
-    (h = p[n]) && (l = (a ? h(i, s, l) : h(l)) || l);
-  return a && l && E(i, s, l), l;
-};
-const d = class d extends m {
+import { hintSeverity as E } from "../../internal/helpers/hintSeverity.js";
+import { Asterisk as _ } from "../../internal/templates/asterisk.js";
+import { componentStyles as V } from "../../styles/component.styles.js";
+import { LocalizeController as w } from "../../utilities/localize.js";
+import { nothing as u, html as g } from "lit";
+import { property as o, state as x, query as I } from "lit/decorators.js";
+import { ifDefined as h } from "lit/directives/if-defined.js";
+import L from "./textarea.styles.js";
+var A = Object.defineProperty, O = Object.getOwnPropertyDescriptor, s = (r, a, t, i) => {
+  for (var l = i > 1 ? void 0 : i ? O(a, t) : a, n = r.length - 1, d; n >= 0; n--)
+    (d = r[n]) && (l = (i ? d(a, t, l) : d(l)) || l);
+  return i && l && A(a, t, l), l;
+}, p;
+const v = class v extends $ {
   constructor() {
-    super(...arguments), this.debug = !1, this.hideLabel = !1, this.readonly = !1, this.showValid = !1, this.size = "md", this.validateOn = "change", this.value = "", this.invalid = !1, this._resetValue = (i) => {
-      var s;
-      i.stopPropagation(), this.value = ((s = this.getAttribute("value")) == null ? void 0 : s.trim()) ?? "", this._internals.setFormValue(this.value), this.$input.focus();
+    super(...arguments);
+    f(this, p);
+    b(this, p, new w(this)), this.debug = !1, this.hideLabel = !1, this.lang = "en", this.readonly = !1, this.showValid = !1, this.size = "md", this.validateOn = "change", this.value = "", this.invalid = !1, this._resetValue = (t) => {
+      var i;
+      t.stopPropagation(), this.value = ((i = this.getAttribute("value")) == null ? void 0 : i.trim()) ?? "", this._internals.setFormValue(this.value), this.$input.focus();
     }, this._handleInput = () => {
       this.value = this.$input.value || "", this.validateOn === "input" && (this.pristine = !1, this.validateInput());
     };
   }
-  set customInvalid(i) {
-    this.customError = i ?? "";
+  set customInvalid(t) {
+    this.customError = t ?? "";
   }
   get customInvalid() {
     return this.customError;
@@ -31,58 +39,58 @@ const d = class d extends m {
   firstUpdated() {
     this.$input.addEventListener("change", () => {
       this.validateOn === "change" && (this.validateOn = "input", this.pristine = !1), this._internals.setFormValue(this.$input.value || ""), this.emitEvent("change"), this.validateInput();
-    }), this.addEventListener("invalid", (i) => {
-      this.pristine = !1, this.invalid = !0, this.customErrorDisplay && i.preventDefault();
+    }), this.addEventListener("invalid", (t) => {
+      this.pristine = !1, this.invalid = !0, this.customErrorDisplay && t.preventDefault();
     }), this.addEventListener("reset", this._resetValue), this.validateInput();
   }
-  willUpdate(i) {
-    if (i.has("invalid"))
+  willUpdate(t) {
+    if (t.has("invalid"))
       if (this.invalid) {
         this.setAttribute("invalid", ""), this.showValid || this.removeAttribute("valid");
-        const s = this._internals.validationMessage;
-        this.hint = s !== "" ? this._internals.validationMessage : "unspecified error", this.checkValidity();
+        const i = this._internals.validationMessage;
+        this.hint = i !== "" ? this._internals.validationMessage : "unspecified error", this.checkValidity();
       } else
         this.removeAttribute("invalid"), !this.pristine && this.showValid && this.setAttribute("valid", "true"), this.hint = this.getAttribute("hint") ?? "";
   }
-  attributeChangedCallback(i, s, a) {
-    if (super.attributeChangedCallback(i, s, a), i === "value" && this._internals.setFormValue(a), i === "custom-invalid")
-      if (typeof a == "string") {
-        const n = this.withFallback(a);
-        this.pristine = !1, this._internals.setValidity({ customError: !0 }, n), this.invalid = !0, this.hint = n, this.checkValidity();
+  attributeChangedCallback(t, i, l) {
+    if (super.attributeChangedCallback(t, i, l), t === "value" && this._internals.setFormValue(l), t === "custom-invalid")
+      if (typeof l == "string") {
+        const d = this.withFallback(l);
+        this.pristine = !1, this._internals.setValidity({ customError: !0 }, d), this.invalid = !0, this.hint = d, this.checkValidity();
       } else
         this._internals.setValidity({}), this.validateInput();
   }
   /** @internal */
   validateInput() {
     if (this._internals.validity.customError) return;
-    const s = this.$input.validity;
-    if (this.invalid = !1, s.valid)
+    const i = this.$input.validity;
+    if (this.invalid = !1, i.valid)
       this._internals.setValidity({ customError: this._internals.validity.customError });
     else {
-      this.invalid = !this.pristine && !s.valid;
-      let a;
-      for (a in s) {
-        const l = `data-${a.toString()}`;
-        if (s[a] && !this.hasAttribute(l) && this.debug && console.log(
-          `Add custom message on ${this.localName} using attribute: ${l.toUpperCase()}="Your custom message"`
-        ), s[a]) {
-          this.validationError = a.toString();
-          const n = this.hasAttribute(l) ? this.getAttribute(l) : this.$input.validationMessage;
+      this.invalid = !this.pristine && !i.valid;
+      let l;
+      for (l in i) {
+        const n = `data-${l.toString()}`;
+        if (i[l] && !this.hasAttribute(n) && this.debug && console.log(
+          `Add custom message on ${this.localName} using attribute: ${n.toUpperCase()}="Your custom message"`
+        ), i[l]) {
+          this.validationError = l.toString();
+          const d = this.hasAttribute(n) ? this.getAttribute(n) : this.$input.validationMessage;
           this._internals.setValidity(
             { [this.validationError]: !0, customError: this._internals.validity.customError },
-            this.withFallback(n)
+            this.withFallback(d)
           ), this.invalid && this.customErrorDisplay && this.checkValidity();
         }
       }
     }
   }
   render() {
-    var i, s;
-    return v`
+    var t, i;
+    return g`
 			<div id="root">
 				<label>
 					<div class=${this.hideLabel ? "visually-hidden" : ""} id="label">
-						<slot>${this.label}</slot> ${this.required ? y(this.requiredLabel) : null}
+						<slot>${this.label}</slot> ${this.required ? _(y(this, p).term("required")) : u}
 					</div>
 					<div id="input">
 						<textarea
@@ -91,24 +99,25 @@ const d = class d extends m {
 							?required=${this.required}
 							.value=${this.value}
 							@input=${this._handleInput}
-							aria-describedby=${o((i = this.hint) != null && i.trim() ? "hint" : u)}
-							aria-errormessage=${o((s = this.hint) != null && s.trim() ? "hint" : u)}
+							aria-describedby=${h((t = this.hint) != null && t.trim() ? "hint" : u)}
+							aria-errormessage=${h((i = this.hint) != null && i.trim() ? "hint" : u)}
 							aria-invalid=${!!this.invalid}
-							cols=${o(this.cols)}
-							maxlength=${o(this.maxLength)}
-							minlength=${o(this.minLength)}
-							name=${o(this.name)}
-							placeholder=${o(this.placeholder)}
-							rows=${o(this.rows)}
+							cols=${h(this.cols)}
+							maxlength=${h(this.maxLength)}
+							minlength=${h(this.minLength)}
+							name=${h(this.name)}
+							placeholder=${h(this.placeholder)}
+							rows=${h(this.rows)}
 						>
 						</textarea>
 					</div>
 				</label>
-				${this.hint && v`
+				${this.hint && g`
 					<skf-hint
+						?disabled=${this.disabled}
 						aria-live=${this.invalid ? "assertive" : "polite"}
 						id="hint"
-						severity=${o(c(this.invalid, this.severity))}
+						severity=${h(E(this.invalid, this.severity))}
 					>
 						${this.customInvalid ?? this.hint}
 					</skf-hint>
@@ -117,68 +126,68 @@ const d = class d extends m {
 		`;
   }
 };
-d.styles = [f, $];
-let t = d;
-e([
-  r({ type: Number })
-], t.prototype, "cols", 2);
-e([
-  r({ attribute: "custom-invalid", reflect: !0 })
-], t.prototype, "customInvalid", 1);
-e([
-  r({ type: Boolean })
-], t.prototype, "debug", 2);
-e([
-  r({ type: Boolean, attribute: "hide-label" })
-], t.prototype, "hideLabel", 2);
-e([
-  r()
-], t.prototype, "hint", 2);
-e([
-  r()
-], t.prototype, "label", 2);
-e([
-  r()
-], t.prototype, "name", 2);
-e([
-  r({ type: Number, attribute: "maxlength" })
-], t.prototype, "maxLength", 2);
-e([
-  r({ type: Number, attribute: "minlength" })
-], t.prototype, "minLength", 2);
-e([
-  r()
-], t.prototype, "placeholder", 2);
-e([
-  r({ type: Boolean })
-], t.prototype, "readonly", 2);
-e([
-  r({ attribute: "required-label" })
-], t.prototype, "requiredLabel", 2);
-e([
-  r({ type: Number })
-], t.prototype, "rows", 2);
-e([
-  r()
-], t.prototype, "severity", 2);
-e([
-  r({ type: Boolean, attribute: "show-valid" })
-], t.prototype, "showValid", 2);
-e([
-  r({ reflect: !0 })
-], t.prototype, "size", 2);
-e([
-  r({ attribute: "validate-on" })
-], t.prototype, "validateOn", 2);
-e([
-  r()
-], t.prototype, "value", 2);
-e([
-  b()
-], t.prototype, "invalid", 2);
-e([
-  g("textarea")
-], t.prototype, "$input", 2);
+p = new WeakMap(), v.styles = [V, L];
+let e = v;
+s([
+  o({ type: Number })
+], e.prototype, "cols", 2);
+s([
+  o({ attribute: "custom-invalid", reflect: !0 })
+], e.prototype, "customInvalid", 1);
+s([
+  o({ type: Boolean })
+], e.prototype, "debug", 2);
+s([
+  o({ type: Boolean, attribute: "hide-label" })
+], e.prototype, "hideLabel", 2);
+s([
+  o()
+], e.prototype, "hint", 2);
+s([
+  o()
+], e.prototype, "label", 2);
+s([
+  o({ type: String })
+], e.prototype, "lang", 2);
+s([
+  o()
+], e.prototype, "name", 2);
+s([
+  o({ type: Number, attribute: "maxlength" })
+], e.prototype, "maxLength", 2);
+s([
+  o({ type: Number, attribute: "minlength" })
+], e.prototype, "minLength", 2);
+s([
+  o()
+], e.prototype, "placeholder", 2);
+s([
+  o({ type: Boolean })
+], e.prototype, "readonly", 2);
+s([
+  o({ type: Number })
+], e.prototype, "rows", 2);
+s([
+  o()
+], e.prototype, "severity", 2);
+s([
+  o({ type: Boolean, attribute: "show-valid" })
+], e.prototype, "showValid", 2);
+s([
+  o({ reflect: !0 })
+], e.prototype, "size", 2);
+s([
+  o({ attribute: "validate-on" })
+], e.prototype, "validateOn", 2);
+s([
+  o()
+], e.prototype, "value", 2);
+s([
+  x()
+], e.prototype, "invalid", 2);
+s([
+  I("textarea")
+], e.prototype, "$input", 2);
 export {
-  t as SkfTextArea
+  e as SkfTextArea
 };

package/dist/components/toast/toast-item.styles.js

@@ -1,18 +1,21 @@
 import { css as o } from "lit";
-const a = o`
+const e = o`
 	@layer components {
-		:host {
-			overflow: hidden; /* Enable mask transition */
-			padding-block-end: 3px; /* Make room for box-shadow */
-		}
+		@layer overrides {
+			:host {
+				overflow: hidden; /* Enable mask transition */
+				padding-block-end: 3px; /* Make room for box-shadow */
+			}
+
+			#root {
+				--_skf-alert-bg-color: var(--skf-bg-color-neutral-1);
 
-		.toast-item {
-			background-color: var(--skf-bg-color-neutral-1);
-			border-inline-start: var(--skf-size-8) solid
-				var(--_skf-alert-border-color, var(--skf-border-color-primary));
+				/* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+				border-inline-start: var(--skf-size-8) solid var(--_skf-alert-border-color);
+			}
 		}
 	}
 `;
 export {
-  a as default
+  e as default
 };

package/dist/components/toast/toast.component.js

@@ -1,25 +1,25 @@
 import { SkfElement as l } from "../../internal/components/skf-element.js";
 import { html as f } from "lit";
-import { property as i, queryAssignedNodes as d } from "lit/decorators.js";
-import { SkfToastSingleton as y } from "./toast.singleton.js";
+import { property as i, queryAssignedNodes as y } from "lit/decorators.js";
+import { SkfToastSingleton as d } from "./toast.singleton.js";
 import { styles as a } from "./toast.styles.js";
-var u = Object.defineProperty, e = (n, o, h, g) => {
-  for (var s = void 0, r = n.length - 1, m; r >= 0; r--)
-    (m = n[r]) && (s = m(o, h, s) || s);
-  return s && u(o, h, s), s;
+var u = Object.defineProperty, e = (n, r, m, g) => {
+  for (var s = void 0, o = n.length - 1, h; o >= 0; o--)
+    (h = n[o]) && (s = h(r, m, s) || s);
+  return s && u(r, m, s), s;
 };
 const p = class p extends l {
   constructor() {
     super(), this.debug = !1, this.persistent = !1, this.severity = "info", this.timer = 5, this._singleton = void 0;
   }
   firstUpdated() {
-    this._singleton = new y(this.getRootNode()), this._singleton.addData({
+    this._singleton = new d(), this._singleton.addData({
       debug: this.debug,
       icon: this.icon,
       originEl: this,
       persistent: this.persistent,
       severity: this.severity,
-      text: this._slottedText.map((o) => o.textContent).join(),
+      text: this._slottedText.map((r) => r.textContent).join(),
       timer: this.timer = this.timer && this.timer < 5 ? 5 : this.timer,
       topOffset: this.topOffset
     });
@@ -49,7 +49,7 @@ e([
   i({ type: Number })
 ], t.prototype, "topOffset");
 e([
-  d()
+  y()
 ], t.prototype, "_slottedText");
 export {
   t as SkfToast

package/dist/components/toast/toast.singleton.d.ts

@@ -10,7 +10,7 @@ export declare class SkfToastSingleton {
     data: ToastData[];
     root: Document;
     usePopover: boolean;
-    constructor(root: Document);
+    constructor();
     hasToasts(): boolean;
     popToast(): ToastData | undefined;
     getData(): ToastData[];

package/dist/components/toast/toast.singleton.js

@@ -1,8 +1,8 @@
 import "./toast-item.js";
 import "./toast-wrapper.js";
 class s {
-  constructor(e) {
-    if (this.data = [], this.root = e, this.usePopover = !0, this.root.nodeType !== Node.DOCUMENT_NODE)
+  constructor() {
+    if (this.data = [], this.root = globalThis.document, this.usePopover = !0, this.root.nodeType !== Node.DOCUMENT_NODE)
       throw new Error("Root node must be a document node");
     return s.instance || (s.instance = this), s.instance;
   }
@@ -15,31 +15,31 @@ class s {
   getData() {
     return this.data;
   }
-  setData(e) {
-    this.data = e;
+  setData(o) {
+    this.data = o;
   }
-  addData(e) {
-    this.data = [...this.data, e], this.udpateUI();
+  addData(o) {
+    this.data = [...this.data, o], this.udpateUI();
   }
   udpateUI() {
-    const e = c(this.root, this.usePopover);
-    this.usePopover && e.showPopover(), u();
+    const o = c(this.root, this.usePopover);
+    this.usePopover && o.showPopover(), u();
     function u() {
-      const n = new s(document);
-      for (; n.hasToasts(); ) {
-        const t = n.popToast();
+      const i = new s();
+      for (; i.hasToasts(); ) {
+        const t = i.popToast();
         if (!t) return;
-        t.debug && (e.debug = !0);
-        const o = document.createElement("skf-toast-item");
-        o.className = "toast-item", o.timer = t.timer, o.severity = t.severity, o.icon = t.icon, t.persistent && o.setAttribute("persistent", "true"), o.originEl = t.originEl, o.innerText = String(t.text);
+        t.debug && (o.debug = !0);
+        const e = document.createElement("skf-toast-item");
+        e.className = "toast-item", e.timer = t.timer, e.severity = t.severity, e.icon = t.icon, t.persistent && e.setAttribute("persistent", "true"), e.originEl = t.originEl, e.innerText = String(t.text);
         const a = document.createElement("div");
-        a.classList.add("toast-item-wrapper"), a.appendChild(o), e.prepend(a);
+        a.classList.add("toast-item-wrapper"), a.appendChild(e), o.prepend(a);
       }
     }
-    function c(n, t) {
+    function c(i, t) {
       var p;
-      const a = ((p = new s(document).getData()[0]) == null ? void 0 : p.topOffset) ?? null, i = n.querySelector("body");
-      let r = i == null ? void 0 : i.querySelector("skf-toast-wrapper");
+      const a = ((p = new s().getData()[0]) == null ? void 0 : p.topOffset) ?? null, n = i.querySelector("body");
+      let r = n == null ? void 0 : n.querySelector("skf-toast-wrapper");
       if (!r) {
         if (r = document.createElement("skf-toast-wrapper"), !r) throw new Error("Could not create toast wrapper element");
         t && r.setAttribute("popover", "auto"), a && r.setAttribute("top-offset", a.toString()), document.body.appendChild(r);