@skf-design-system/ui-components 1.0.0-alpha.35 → 1.0.0-alpha.36

package/dist/components/select/select-option.component.d.ts

@@ -20,6 +20,7 @@ export interface SelectOptionEvent {
  * @tagname skf-select-option
  */
 export declare class SkfSelectOption extends SkfElement {
+    #private;
     static styles: CSSResultGroup;
     static shadowRootOptions: {
         delegatesFocus: boolean;
@@ -53,16 +54,19 @@ export declare class SkfSelectOption extends SkfElement {
     /** Returns or sets the tags value. If value is omitted, defaults to the tags text. */
     set value(optionValue: string);
     get value(): string;
+    small: boolean;
     /** @internal */
     private _assignedNodes?;
     constructor();
     updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    /** @internal */
+    _handleStateChange(): void;
     /**
      * @internal
      * This internal setter is to change selected state without emitting events triggering other side effects,
      * e.g deselecting previous selected in a single select. Is used by skf-select in single select mode.
      */
-    set setSelectedDiscrete(value: boolean);
+    set setSelectedDiscrete(isSelected: boolean);
     /**
      * @internal
      * Returns the slotted content as a string. If no slotted content, returns an empty string.

package/dist/components/select/select-option.component.js

@@ -1,22 +1,30 @@
-import "../icon/icon.js";
-import { SkfElement as u } from "../../internal/components/skf-element.js";
-import { componentStyles as f } from "../../styles/component.styles.js";
-import { LitElement as m, html as d } from "lit";
-import { property as l, queryAssignedNodes as _ } from "lit/decorators.js";
-import { ifDefined as p } from "lit/directives/if-defined.js";
-import { styles as y } from "./select-option.styles.js";
-var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (h, t, s, i) => {
-  for (var r = i > 1 ? void 0 : i ? b(t, s) : t, a = h.length - 1, c; a >= 0; a--)
-    (c = h[a]) && (r = (i ? c(t, s, r) : c(r)) || r);
-  return i && r && v(t, s, r), r;
+var y = (e) => {
+  throw TypeError(e);
 };
-const n = class n extends u {
+var v = (e, s, t) => s.has(e) || y("Cannot " + t);
+var u = (e, s, t) => (v(e, s, "read from private field"), t ? t.call(e) : s.get(e)), m = (e, s, t) => s.has(e) ? y("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t), f = (e, s, t, i) => (v(e, s, "write to private field"), i ? i.call(e, t) : s.set(e, t), t);
+import "../icon/icon.js";
+import { SkfElement as C } from "../../internal/components/skf-element.js";
+import { stateMap as x } from "../../internal/helpers/stateMap.js";
+import { watch as g } from "../../internal/helpers/watch.js";
+import { componentStyles as N } from "../../styles/component.styles.js";
+import { LitElement as T, html as _ } from "lit";
+import { property as a, state as $, queryAssignedNodes as O } from "lit/decorators.js";
+import { ifDefined as b } from "lit/directives/if-defined.js";
+import { styles as E } from "./select-option.styles.js";
+var w = Object.defineProperty, D = Object.getOwnPropertyDescriptor, l = (e, s, t, i) => {
+  for (var r = i > 1 ? void 0 : i ? D(s, t) : s, d = e.length - 1, p; d >= 0; d--)
+    (p = e[d]) && (r = (i ? p(s, t, r) : p(r)) || r);
+  return i && r && w(s, t, r), r;
+}, n, h;
+const c = class c extends C {
   constructor() {
-    super(), this._shortcutUpdate = !1, this.disabled = !1, this.selected = !1, this._handleClick = (s) => {
-      s.stopPropagation(), this.selected = !this.selected;
-    };
-    const t = this.attachInternals();
-    t.role = "option", this._parent = this.closest("skf-select"), this._shortcutUpdate = !1;
+    super();
+    m(this, n);
+    m(this, h);
+    f(this, n, this.attachInternals()), f(this, h, u(this, n).states), this._shortcutUpdate = !1, this.disabled = !1, this.selected = !1, this.small = !1, this._handleClick = (t) => {
+      t.stopPropagation(), this.selected = !this.selected;
+    }, this.role = "option", this._parent = this.closest("skf-select"), this._shortcutUpdate = !1;
   }
   set text(t) {
     this.textContent = t.trim();
@@ -40,6 +48,9 @@ const n = class n extends u {
       }
     });
   }
+  _handleStateChange() {
+    x(u(this, h), "small").set(this.small);
+  }
   /**
    * @internal
    * This internal setter is to change selected state without emitting events triggering other side effects,
@@ -60,14 +71,14 @@ const n = class n extends u {
   /** @internal */
   get _slotContainsOnlyText() {
     return this._assignedNodes ? [...this._assignedNodes].every(
-      (s) => {
-        var i;
-        return s.nodeType === Node.TEXT_NODE && ((i = s.textContent) == null ? void 0 : i.trim()) !== "";
+      (i) => {
+        var r;
+        return i.nodeType === Node.TEXT_NODE && ((r = i.textContent) == null ? void 0 : r.trim()) !== "";
       }
     ) : "";
   }
   render() {
-    return d`
+    return _`
 			<button
 				?disabled=${this.disabled}
 				@click=${this._handleClick}
@@ -78,46 +89,52 @@ const n = class n extends u {
 				<slot>${this.text}</slot>
 				<div id="adornments">
 					<slot name="icon">
-						${this.icon && d`
+						${this.icon && _`
 							<skf-icon
-								color=${p(this.iconColor)}
-								data-color=${p((this.disabled || !this.iconColor) && "custom")}
+								color=${b(this.iconColor)}
+								data-color=${b((this.disabled || !this.iconColor) && "custom")}
 								name=${this.icon}
 							></skf-icon>
 						`}
 					</slot>
-					${this.shortLabel && d`<div id="short-label">${this.shortLabel}</div>`}
+					${this.shortLabel && _`<div id="short-label">${this.shortLabel}</div>`}
 				</div>
 			</button>
 		`;
   }
 };
-n.styles = [f, y], n.shadowRootOptions = { ...m.shadowRootOptions, delegatesFocus: !0 };
-let e = n;
-o([
-  l({ type: Boolean, reflect: !0 })
-], e.prototype, "disabled", 2);
-o([
-  l({ reflect: !0 })
-], e.prototype, "icon", 2);
-o([
-  l({ reflect: !0, attribute: "icon-color" })
-], e.prototype, "iconColor", 2);
-o([
-  l({ type: Boolean, reflect: !0 })
-], e.prototype, "selected", 2);
-o([
-  l({ reflect: !0, attribute: "short-label" })
-], e.prototype, "shortLabel", 2);
-o([
-  l({ attribute: !1 })
-], e.prototype, "text", 1);
-o([
-  l({ reflect: !0 })
-], e.prototype, "value", 1);
-o([
-  _({ flatten: !0 })
-], e.prototype, "_assignedNodes", 2);
+n = new WeakMap(), h = new WeakMap(), c.styles = [N, E], c.shadowRootOptions = { ...T.shadowRootOptions, delegatesFocus: !0 };
+let o = c;
+l([
+  a({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled", 2);
+l([
+  a({ reflect: !0 })
+], o.prototype, "icon", 2);
+l([
+  a({ reflect: !0, attribute: "icon-color" })
+], o.prototype, "iconColor", 2);
+l([
+  a({ type: Boolean, reflect: !0 })
+], o.prototype, "selected", 2);
+l([
+  a({ reflect: !0, attribute: "short-label" })
+], o.prototype, "shortLabel", 2);
+l([
+  a({ attribute: !1 })
+], o.prototype, "text", 1);
+l([
+  a({ reflect: !0 })
+], o.prototype, "value", 1);
+l([
+  $()
+], o.prototype, "small", 2);
+l([
+  O({ flatten: !0 })
+], o.prototype, "_assignedNodes", 2);
+l([
+  g("small")
+], o.prototype, "_handleStateChange", 1);
 export {
-  e as SkfSelectOption
+  o as SkfSelectOption
 };

package/dist/components/select/select-option.styles.js

@@ -1,50 +1,62 @@
 import { css as e } from "lit";
 const o = e`
 	@layer components {
-		button {
-			align-items: center;
-			background-color: var(--_skf-select-option-bg, var(--skf-interactive-bg-color-secondary));
-			block-size: var(--_skf-select-option-height, var(--skf-size-44));
-			color: var(--_skf-select-option-color, inherit);
-			display: flex;
-			gap: var(--skf-spacing-50);
-			padding-inline: var(--skf-spacing-50);
-			width: 100%;
-
-			&:disabled {
-				--_skf-select-option-color: var(--skf-interactive-text-color-disabled);
+		@layer base {
+			button {
+				--_skf-select-option-bg: var(--skf-interactive-bg-color-secondary);
+				--_skf-select-option-color: inherit;
+				--_skf-select-option-height: var(--skf-size-44);
+
+				align-items: center;
+				background-color: var(--_skf-select-option-bg);
+				block-size: var(--_skf-select-option-height);
+				color: var(--_skf-select-option-color);
+				display: flex;
+				gap: var(--skf-spacing-50);
+				padding-inline: var(--skf-spacing-50);
+				width: 100%;
 			}
 
-			&:is(:hover, :focus):not(:disabled) {
-				--_skf-select-option-bg: var(--skf-interactive-bg-color-secondary-hover);
+			#icon-check {
+				opacity: 0;
+
+				:host([selected]) & {
+					opacity: 1;
+				}
 			}
 
-			&:active:not(:disabled) {
-				--_skf-select-option-bg: var(--skf-interactive-bg-color-secondary-active);
+			#adornments {
+				align-items: inherit;
+				display: inherit;
+				gap: inherit;
+				margin-inline-start: auto;
 			}
 
-			:host-context(skf-select[size='sm']) & {
-				--_skf-select-option-height: var(--skf-size-32);
+			#short-label {
+				color: var(--skf-text-color-tertiary);
 			}
 		}
 
-		#icon-check {
-			opacity: 0;
+		@layer states {
+			button {
+				&:disabled {
+					--_skf-select-option-color: var(--skf-interactive-text-color-disabled);
+				}
 
-			:host([selected]) & {
-				opacity: 1;
-			}
-		}
+				&:is(:hover, :focus):not(:disabled) {
+					--_skf-select-option-bg: var(--skf-interactive-bg-color-secondary-hover);
+				}
 
-		#adornments {
-			align-items: inherit;
-			display: inherit;
-			gap: inherit;
-			margin-inline-start: auto;
+				&:active:not(:disabled) {
+					--_skf-select-option-bg: var(--skf-interactive-bg-color-secondary-active);
+				}
+			}
 		}
 
-		#short-label {
-			color: var(--skf-text-color-tertiary);
+		@layer mods {
+			:host(:state(small)) button {
+				--_skf-select-option-height: var(--skf-size-32);
+			}
 		}
 	}
 `;

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

@@ -1,10 +1,11 @@
+import { SkfSelectOptionGroup } from '../select/select-option-group.component.js';
 import '../tag/tag.js';
 import { FormBase } from '../../internal/components/formBase.js';
 import '../../internal/components/hint/hint.js';
 import { PopoverController } from '../../internal/controllers/popover.controller.js';
 import type { FormFieldSeverity } from '../../internal/types.js';
 import { type CSSResultGroup } from 'lit';
-import type { SelectOptionEvent, SkfSelectOption } from './select-option.component.js';
+import { SkfSelectOption, type SelectOptionEvent } from './select-option.component.js';
 import { DeveloperFeedbackController, GlobalClickController, KeyboardNavigationController } from './select.controllers.js';
 /**
  * TODO: abstract the popover logic to a separate component/helper/partial, and use it in both select and in input[datalist], combobox etc
@@ -92,6 +93,8 @@ export declare class SkfSelect extends FormBase {
     /** @internal */
     $popover: HTMLDivElement;
     /** @internal */
+    _slottedItems: SkfSelectOption[] | SkfSelectOptionGroup[];
+    /** @internal */
     protected globalClickController: GlobalClickController;
     /** @internal */
     protected keyboardNavController: KeyboardNavigationController;
@@ -102,6 +105,7 @@ export declare class SkfSelect extends FormBase {
     constructor();
     willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
     firstUpdated(): void;
+    _handleSizeUpdate(): void;
     handleExpandedChange(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     disconnectedCallback(): void;

package/dist/components/select/select.component.js

@@ -1,28 +1,30 @@
+import { SkfSelectOptionGroup as v } from "./select-option-group.component.js";
 import "../tag/tag.js";
-import { computePosition as v, flip as f, shift as _, offset as g } from "@floating-ui/dom";
-import { FormBase as b } from "../../internal/components/formBase.js";
+import { computePosition as _, flip as g, shift as b, offset as y } from "@floating-ui/dom";
+import { FormBase as O } from "../../internal/components/formBase.js";
 import "../../internal/components/hint/hint.js";
-import { PopoverController as y } from "../../internal/controllers/popover.controller.js";
-import { findMatchingTags as O } from "../../internal/helpers/findMatchingTags.js";
-import { hintSeverity as x } from "../../internal/helpers/hintSeverity.js";
-import { raiseError as w } from "../../internal/helpers/raiseError.js";
-import { watch as $ } from "../../internal/helpers/watch.js";
+import { PopoverController as x } from "../../internal/controllers/popover.controller.js";
+import { findMatchingTags as w } from "../../internal/helpers/findMatchingTags.js";
+import { hintSeverity as S } from "../../internal/helpers/hintSeverity.js";
+import { raiseError as $ } from "../../internal/helpers/raiseError.js";
+import { watch as f } from "../../internal/helpers/watch.js";
 import { Asterisk as V } from "../../internal/templates/asterisk.js";
-import { componentStyles as S } from "../../styles/component.styles.js";
-import { nothing as C, html as n } from "lit";
-import { property as o, state as h, query as p } from "lit/decorators.js";
-import { classMap as E } from "lit/directives/class-map.js";
+import { componentStyles as C } from "../../styles/component.styles.js";
+import { nothing as E, html as n } from "lit";
+import { property as o, state as h, query as p, queryAssignedElements as L } from "lit/decorators.js";
+import { classMap as k } from "lit/directives/class-map.js";
 import { ifDefined as m } from "lit/directives/if-defined.js";
-import { GlobalClickController as L, KeyboardNavigationController as k, DeveloperFeedbackController as A } from "./select.controllers.js";
-import { styles as P } from "./select.styles.js";
-var T = Object.defineProperty, D = Object.getOwnPropertyDescriptor, s = (u, t, e, l) => {
-  for (var r = l > 1 ? void 0 : l ? D(t, e) : t, a = u.length - 1, d; a >= 0; a--)
+import { SkfSelectOption as A } from "./select-option.component.js";
+import { GlobalClickController as P, KeyboardNavigationController as T, DeveloperFeedbackController as D } from "./select.controllers.js";
+import { styles as F } from "./select.styles.js";
+var U = Object.defineProperty, M = Object.getOwnPropertyDescriptor, s = (u, t, e, l) => {
+  for (var r = l > 1 ? void 0 : l ? M(t, e) : t, a = u.length - 1, d; a >= 0; a--)
     (d = u[a]) && (r = (l ? d(t, e, r) : d(r)) || r);
-  return l && r && T(t, e, r), r;
+  return l && r && U(t, e, r), r;
 };
-const c = class c extends b {
+const c = class c extends O {
   constructor() {
-    super(), this.selectDelay = 200, this._optionsList = [], this.buttonLabel = "Select an option", this.hideLabel = !1, this.hideTags = !1, this.multiple = !1, this.showValid = !1, this.size = "md", this._expanded = !1, this._invalid = !1, this.globalClickController = new L(this), this.keyboardNavController = new k(this), this.developerFeedbackController = new A(this), this.popoverController = new y(this), this._handleOptionSelected = (t) => {
+    super(), this.selectDelay = 200, this._optionsList = [], this.buttonLabel = "Select an option", this.hideLabel = !1, this.hideTags = !1, this.multiple = !1, this.showValid = !1, this.size = "md", this._expanded = !1, this._invalid = !1, this.globalClickController = new P(this), this.keyboardNavController = new T(this), this.developerFeedbackController = new D(this), this.popoverController = new x(this), this._handleOptionSelected = (t) => {
       this._pristine = !1;
       const e = this._selectedOptions.length > 0;
       this.setFormValue(e ? this.selectedValues.join(",") : null), this._updateState(t);
@@ -33,9 +35,9 @@ const c = class c extends b {
         this.$popover.style.setProperty("--select-width", `${String(this.offsetWidth)}px`);
       }, 50);
     }, this.reposition = async () => {
-      const { x: t, y: e } = await v(this.$anchor, this.$popover, {
+      const { x: t, y: e } = await _(this.$anchor, this.$popover, {
         placement: "bottom",
-        middleware: [f(), _({ padding: 5 }), g(2)],
+        middleware: [g(), b({ padding: 5 }), y(2)],
         strategy: "fixed"
       });
       Object.assign(this.$popover.style, {
@@ -68,7 +70,7 @@ const c = class c extends b {
         (e || l !== t) && l.removeAttribute("selected");
       });
     }, this._handleSlotChange = () => {
-      this._collectSlotOptionTags(), this._validateInput();
+      this._handleSizeUpdate(), this._collectSlotOptionTags(), this._validateInput();
     }, this._computeVisibleValue = () => {
       var t, e;
       return (t = this.$selectedValue) == null || t.classList.add("contains-meta-info"), this._selectedOptions.length > 1 ? `(${String(this._selectedOptions.length)} items selected)` : this.value ? ((e = this.$selectedValue) == null || e.classList.remove("contains-meta-info"), this.value) : this.buttonLabel;
@@ -89,8 +91,12 @@ const c = class c extends b {
     return this._selectedOptions.map((t) => t.textContent ?? "");
   }
   set value(t) {
-    const e = t.split(",").map((l) => l.trim());
-    this._selectedOptions = this._optionsList.filter((l) => e.includes(l.value.trim()));
+    let e = [];
+    this.multiple ? e = t.split(",").map((l) => l.toLowerCase().trim()) : e = [t.toLowerCase().trim()], this._selectedOptions = this._optionsList.filter(
+      (l) => e.includes(l.value.toLowerCase().trim())
+    ), this._optionsList.forEach((l) => {
+      l.selected && (l.setSelectedDiscrete = !1);
+    }), this._selectedOptions.forEach((l) => l.setSelectedDiscrete = !0), this._setValue();
   }
   get value() {
     return this._selectedOptions.length ? this._selectedOptions.length === 1 ? this._selectedOptions[0].value.trim() : this._selectedOptions.map((t) => t.value.trim()).join(",") : "";
@@ -123,6 +129,11 @@ const c = class c extends b {
     var t;
     this.addEventListener("skf-select-option-select", this._handleOptionSelected), (t = this._internals.form) == null || t.addEventListener("reset", this._handleReset), this.onUpdateComplete(), this._validateInput();
   }
+  _handleSizeUpdate() {
+    this._slottedItems.forEach((t) => {
+      (t instanceof A || t instanceof v) && (t.small = this.size === "sm");
+    });
+  }
   handleExpandedChange() {
     this._expanded ? (this.$popover.togglePopover(this._expanded), this.popoverController.start()) : (this.$popover.togglePopover(this._expanded), this.popoverController.stop().catch((t) => {
       console.error(t);
@@ -159,7 +170,7 @@ const c = class c extends b {
   /** @internal */
   /** Filter out elements other than skf-select-option and store in this._optionsList */
   _collectSlotOptionTags() {
-    this._optionsList = O(this, "skf-select-option"), this._selectedOptions = this._optionsList.filter((t) => t.selected), w({
+    this._optionsList = w(this, "skf-select-option"), this._selectedOptions = this._optionsList.filter((t) => t.selected), $({
       assert: this._optionsList.length > 0,
       reason: "no-children",
       replaceStrings: [this.localName, "skf-select-option"]
@@ -204,7 +215,7 @@ const c = class c extends b {
 					>
 						<span
 							id="selected-value"
-							class=${E({ "selected-value": !0, "contains-meta-info": !this.value })}>
+							class=${k({ "selected-value": !0, "contains-meta-info": !this.value })}>
 							${this._computeVisibleValue()}
 						</span>
 						<skf-icon class="arrow" data-color="custom" name="chevronDown"></skf-icon>
@@ -229,12 +240,13 @@ const c = class c extends b {
 										`
     )}
 								</div>
-							` : C}
+							` : E}
 				${this.hint && n`
 						<skf-hint
+							?disabled=${this.disabled}
 							aria-live=${this._invalid ? "assertive" : "polite"}
 							id="hint"
-							severity=${m(x(this._invalid, this.severity))}
+							severity=${m(S(this._invalid, this.severity))}
 						>
 							${this.customInvalid ?? this.hint}
 						</skf-hint>
@@ -244,7 +256,7 @@ const c = class c extends b {
 		`;
   }
 };
-c.styles = [S, P];
+c.styles = [C, F];
 let i = c;
 s([
   o({ type: String, reflect: !0, attribute: "button-label" })
@@ -316,7 +328,13 @@ s([
   p("#select-dropdown")
 ], i.prototype, "$popover", 2);
 s([
-  $("_expanded", { afterUpdate: !0 })
+  L()
+], i.prototype, "_slottedItems", 2);
+s([
+  f("size", { waitUntilFirstUpdate: !0 })
+], i.prototype, "_handleSizeUpdate", 1);
+s([
+  f("_expanded", { afterUpdate: !0 })
 ], i.prototype, "handleExpandedChange", 1);
 export {
   i as SkfSelect

package/dist/components/select/select.controllers.js

@@ -104,7 +104,8 @@ class b {
       reason: "attribute-mismatch",
       replaceStrings: [t, "min or max", "together with multiple"]
     }), a({
-      assert: (this.host.hideTags && this.host.multiple) ?? !this.host.hideTags,
+      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+      assert: this.host.hideTags && this.host.multiple || !this.host.hideTags,
       reason: "attribute-mismatch",
       replaceStrings: [t, "hide-tags", "together with multiple"]
     });

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

@@ -3,9 +3,9 @@ import { FormBase as m } 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 { componentStyles as b } 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 { property as r, state as f, 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) => {
@@ -106,6 +106,7 @@ const d = class d extends m {
 				</label>
 				${this.hint && v`
 					<skf-hint
+						?disabled=${this.disabled}
 						aria-live=${this.invalid ? "assertive" : "polite"}
 						id="hint"
 						severity=${o(c(this.invalid, this.severity))}
@@ -117,7 +118,7 @@ const d = class d extends m {
 		`;
   }
 };
-d.styles = [f, $];
+d.styles = [b, $];
 let t = d;
 e([
   r({ type: Number })
@@ -174,7 +175,7 @@ e([
   r()
 ], t.prototype, "value", 2);
 e([
-  b()
+  f()
 ], t.prototype, "invalid", 2);
 e([
   g("textarea")

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);