@skf-design-system/ui-components 1.0.0-alpha.27 → 1.0.0-alpha.28

package/dist/components/tab-group/tab-group.component.js

@@ -0,0 +1,98 @@
+import "../card/card.js";
+import { SkfElement as c } from "../../internal/components/skf-element.js";
+import b from "../../styles/component.styles.js";
+import { html as f } from "lit";
+import { property as o, queryAssignedElements as p } from "lit/decorators.js";
+import { classMap as u } from "lit/directives/class-map.js";
+import { styles as y } from "./tab-group.styles.js";
+var g = Object.defineProperty, i = (h, t, s, r) => {
+  for (var e = void 0, n = h.length - 1, d; n >= 0; n--)
+    (d = h[n]) && (e = d(t, s, e) || e);
+  return e && g(t, s, e), e;
+};
+const l = class l extends c {
+  constructor() {
+    super(...arguments), this.defaultSelected = 0, this.noBorder = !1, this.noPadding = !1, this.stretch = !1, this.variant = "expanded", this._handleKeyDown = (t) => {
+      if (["ArrowLeft", "ArrowRight"].includes(t.key)) {
+        const s = this._getKeyDownNextTab(t.key);
+        s.focus({ preventScroll: !0 }), this._selectTab(s);
+      }
+    }, this._handleTabSelected = (t) => {
+      const s = t.detail.tab;
+      this._selectTab(s);
+    }, this._selectTab = (t) => {
+      this.tabs.forEach((s) => {
+        const r = this.panels.find((e) => e.name === s.panel);
+        s.selected = s === t, r && (r.active = s === t);
+      });
+    }, this._syncTabsAndPanels = () => {
+      this.tabs.forEach((t, s) => {
+        const r = (s + 1).toString();
+        t.id = t.id ? t.id : `skf-tab-${r}`, t.selected = this.defaultSelected === s;
+        const e = this.panels.find((n) => n.name === t.panel);
+        e && (e.id = e.id ? e.id : `skf-tab-panel-${r}`, t.setAttribute("aria-controls", e.id), e.setAttribute("aria-labelledby", t.id), e.active = t.selected);
+      });
+    };
+  }
+  firstUpdated() {
+    this.addEventListener("skf-tab-select", this._handleTabSelected), this._syncTabsAndPanels();
+  }
+  updated(t) {
+    t.has("variant") && this.tabs.forEach((s) => {
+      s.variant = this.variant;
+    });
+  }
+  /** @internal */
+  _getKeyDownNextTab(t) {
+    const e = (this.tabs.findIndex((d) => d.selected) + (t === "ArrowRight" ? 1 : -1)) % this.tabs.length;
+    return this.tabs[e < 0 ? this.tabs.length - 1 : e];
+  }
+  render() {
+    return f`
+			<div
+				@keydown=${this._handleKeyDown}
+				class=${u({
+      "tab-group": !0,
+      "tab-group--compressed": this.variant === "compressed",
+      "tab-group--expanded": this.variant === "expanded",
+      "tab-group--no-border": this.noBorder,
+      "tab-group--no-padding": this.noPadding,
+      "tab-group--stretch": this.stretch
+    })}
+			>
+				<div class="tab-group__tabs" role="tablist">
+					<slot name="tabs"></slot>
+				</div>
+				<div class="tab-group__body">
+					<slot></slot>
+				</div>
+			</div>
+		`;
+  }
+};
+l.styles = [b, y];
+let a = l;
+i([
+  o({ type: Number, attribute: "default-selected" })
+], a.prototype, "defaultSelected");
+i([
+  o({ type: Boolean, attribute: "no-border" })
+], a.prototype, "noBorder");
+i([
+  o({ type: Boolean, attribute: "no-padding" })
+], a.prototype, "noPadding");
+i([
+  o({ type: Boolean })
+], a.prototype, "stretch");
+i([
+  o({ reflect: !0 })
+], a.prototype, "variant");
+i([
+  p({ slot: "tabs" })
+], a.prototype, "tabs");
+i([
+  p()
+], a.prototype, "panels");
+export {
+  a as SkfTabGroup
+};

package/dist/components/tab-group/tab-group.d.ts

@@ -0,0 +1,8 @@
+import { SkfTabGroup } from './tab-group.component';
+export * from './tab-group.component';
+export default SkfTabGroup;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-tab-group': SkfTabGroup;
+    }
+}

package/dist/components/tab-group/tab-group.js

@@ -0,0 +1,6 @@
+import { SkfTabGroup as f } from "./tab-group.component.js";
+f.define("skf-tab-group");
+export {
+  f as SkfTabGroup,
+  f as default
+};

package/dist/components/tab-group/tab-group.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/components/tab-group/tab-group.styles.js

@@ -0,0 +1,75 @@
+import { css as r } from "lit";
+const a = r`
+	/* stylelint-disable selector-class-pattern */
+	@layer components {
+		:host {
+			contain: layout;
+		}
+
+		:host([stretch]) {
+			block-size: 100%;
+		}
+
+		/**
+		 * Root
+		 */
+		.tab-group {
+			background-color: var(--skf-bg-color-neutral-1);
+		}
+
+		.tab-group--expanded {
+			border: var(
+				--_skf-tab-group-border,
+				var(--skf-border-width-sm) solid var(--skf-border-color-tertiary)
+			);
+			border-end-end-radius: var(--skf-border-radius-sm);
+			border-end-start-radius: var(--skf-border-radius-sm);
+			box-shadow: var(--skf-shadow-md);
+
+			::slotted(skf-tab) {
+				flex: 1;
+			}
+		}
+
+		.tab-group--no-border {
+			--_skf-tab-group-border: none;
+		}
+
+		.tab-group--stretch {
+			block-size: inherit;
+			display: flex;
+			flex-direction: column;
+		}
+
+		/**
+		 * Tabs
+		 */
+		.tab-group__tabs {
+			display: flex;
+
+			.tab-group--compressed & {
+				gap: var(--skf-spacing-100);
+			}
+		}
+
+		/**
+		 * Body
+		 */
+		.tab-group__body {
+			padding-block: var(--_skf-tab-group-body-padding-block, var(--skf-spacing-100) 0);
+
+			.tab-group--stretch & {
+				overflow-y: auto;
+			}
+
+			.tab-group--expanded:not(.tab-group--no-padding) & {
+				--_skf-tab-group-body-padding-block: var(--skf-spacing-100);
+
+				padding-inline: var(--skf-spacing-100);
+			}
+		}
+	}
+`;
+export {
+  a as styles
+};

package/dist/components/tab-panel/tab-panel.component.d.ts

@@ -0,0 +1,19 @@
+import { SkfElement } from '@internal/components/skf-element';
+import { type CSSResultGroup } from 'lit';
+/**
+ * The `<skf-tab-panel>` is a component that displays a list of actions or options.
+ *
+ * @slot - The tab panel's content
+ *
+ * @tagname skf-tab-panel
+ */
+export declare class SkfTabPanel extends SkfElement {
+    static styles: CSSResultGroup;
+    /** The tab panel's name. */
+    name: string;
+    active: boolean;
+    constructor();
+    /** @internal */
+    handleActiveChanged(): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/tab-panel/tab-panel.component.js

@@ -0,0 +1,36 @@
+import { SkfElement as c } from "../../internal/components/skf-element.js";
+import { watch as h } from "../../internal/helpers/watch.js";
+import l from "../../styles/component.styles.js";
+import { html as v } from "lit";
+import { property as f, state as d } from "lit/decorators.js";
+import { styles as y } from "./tab-panel.styles.js";
+var u = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, a = (n, r, s, o) => {
+  for (var t = o > 1 ? void 0 : o ? _(r, s) : r, i = n.length - 1, p; i >= 0; i--)
+    (p = n[i]) && (t = (o ? p(r, s, t) : p(t)) || t);
+  return o && t && u(r, s, t), t;
+};
+const m = class m extends c {
+  constructor() {
+    super(), this.name = "", this.active = !1, this.role = "tabpanel";
+  }
+  handleActiveChanged() {
+    this.ariaHidden = this.active ? "false" : "true", this.tabIndex = this.active ? 0 : -1;
+  }
+  render() {
+    return v`<slot></slot>`;
+  }
+};
+m.styles = [l, y];
+let e = m;
+a([
+  f()
+], e.prototype, "name", 2);
+a([
+  d()
+], e.prototype, "active", 2);
+a([
+  h("active")
+], e.prototype, "handleActiveChanged", 1);
+export {
+  e as SkfTabPanel
+};

package/dist/components/tab-panel/tab-panel.d.ts

@@ -0,0 +1,8 @@
+import { SkfTabPanel } from './tab-panel.component';
+export * from './tab-panel.component';
+export default SkfTabPanel;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-tab-panel': SkfTabPanel;
+    }
+}

package/dist/components/tab-panel/tab-panel.js

@@ -0,0 +1,6 @@
+import { SkfTabPanel as a } from "./tab-panel.component.js";
+a.define("skf-tab-panel");
+export {
+  a as SkfTabPanel,
+  a as default
+};

package/dist/components/tab-panel/tab-panel.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/components/tab-panel/tab-panel.styles.js

@@ -0,0 +1,13 @@
+import { css as i } from "lit";
+const s = i`
+	:host {
+		content-visibility: hidden;
+	}
+
+	:host([aria-hidden='false']) {
+		content-visibility: visible;
+	}
+`;
+export {
+  s as styles
+};

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

@@ -4,7 +4,7 @@ import "../../internal/components/hint/hint.js";
 import { Asterisk as c } from "../../internal/templates/asterisk.js";
 import y from "../../styles/component.styles.js";
 import { html as p, nothing as v } from "lit";
-import { property as r, state as f, query as b } from "lit/decorators.js";
+import { property as r, state as b, query as f } from "lit/decorators.js";
 import { ifDefined as n } from "lit/directives/if-defined.js";
 import g from "./textarea.styles.js";
 var $ = Object.defineProperty, E = Object.getOwnPropertyDescriptor, e = (h, t, s, a) => {
@@ -46,7 +46,7 @@ const u = class u extends m {
   attributeChangedCallback(t, s, a) {
     if (super.attributeChangedCallback(t, s, a), t === "value" && this._internals.setFormValue(a), t === "custom-invalid")
       if (typeof a == "string") {
-        const o = String(a).trim();
+        const o = this.withFallback(a);
         this.pristine = !1, this._internals.setValidity({ customError: !0 }, o), this.invalid = !0, this.hint = o, this.checkValidity();
       } else
         this._internals.setValidity({}), this.validateInput();
@@ -69,7 +69,7 @@ const u = class u extends m {
           const o = this.hasAttribute(l) ? this.getAttribute(l) : this.$input.validationMessage;
           this._internals.setValidity(
             { [this.validationError]: !0, customError: this._internals.validity.customError },
-            o ?? ""
+            this.withFallback(o)
           ), this.invalid && this.customErrorDisplay && this.checkValidity();
         }
       }
@@ -173,10 +173,10 @@ e([
   r()
 ], i.prototype, "value", 2);
 e([
-  f()
+  b()
 ], i.prototype, "invalid", 2);
 e([
-  b("textarea")
+  f("textarea")
 ], i.prototype, "$input", 2);
 function _(h, t) {
   return t ? "error" : h;

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

@@ -0,0 +1,35 @@
+import { SkfElement } from '@internal/components/skf-element';
+import { type CSSResultGroup } from 'lit';
+/**
+ * SkfToast is the only component a user (developer) interacts with to create a toast notification. Once rendered it will invoke a singleton instance to manage the toast notifications.
+ * The singleton instance will create a new toast notification (using SkfAlert) and append it to SkfToastWrapper (or append SkfToastWrapper if it doesn't exist yet) and mount that to the DOM.
+ * Once a toast notification is created, it will be removed after a set amount of time (if not set as a closeable SkfToast) together with the original SkfToast.
+ * Once the queue in the singleton is empty, the SkfToastWrapper will be removed from the DOM.
+ */
+/**
+ * A simple toast component that displays a message to the user. Use by appending a <skf-toast> tag to the DOM. Position in DOM is irrelevant.
+ *
+ * @documentation See [zeroheight](https://zeroheight.com/853e936c9/p/98e432-toast) for design principles
+ *
+ * @slot - The component's placeholder content
+ *
+ * @tagname skf-toast
+ */
+export declare class SkfToast extends SkfElement {
+    static styles: CSSResultGroup;
+    private _singleton?;
+    /** If provided, adds a close button to the toast and will not disapear until user actively dismisses it. */
+    closeable: boolean;
+    debug: boolean;
+    /** Severity of the toast. */
+    severity: 'info' | 'success' | 'warning' | 'error';
+    /** Time in seconds before the toast disappears. */
+    timer: number;
+    /** offsets where toasts emerge vertically */
+    topOffset?: number;
+    /** @internal */
+    _slottedText: Node[];
+    constructor();
+    firstUpdated(): void;
+    render(): import("lit").TemplateResult<1>;
+}

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

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

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

@@ -0,0 +1,8 @@
+import { SkfToast } from './toast.component';
+export * from './toast.component';
+export default SkfToast;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-toast': SkfToast;
+    }
+}

package/dist/components/toast/toast.js

@@ -0,0 +1,6 @@
+import { SkfToast as t } from "./toast.component.js";
+t.define("skf-toast");
+export {
+  t as SkfToast,
+  t as default
+};

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

@@ -0,0 +1,26 @@
+import '@components/toast-item/toast-item.js';
+import '@components/toast-wrapper/toast-wrapper.js';
+import type { SkfToast } from '@components/toast/toast.component.js';
+interface ToastData {
+    text: string;
+    timer: number;
+    closeable: boolean;
+    topOffset?: number;
+    originEl: SkfToast;
+    severity: 'info' | 'success' | 'warning' | 'error';
+    debug: boolean;
+}
+export declare class Singleton {
+    private static instance?;
+    data: ToastData[];
+    root: Document;
+    usePopover: boolean;
+    constructor(root: Document);
+    hasToasts(): boolean;
+    popToast(): ToastData | undefined;
+    getData(): ToastData[];
+    setData(data: ToastData[]): void;
+    addData(data: ToastData): void;
+    udpateUI(): void;
+}
+export {};

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

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

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

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,9 @@
+import { css as s } from "lit";
+const t = s`
+	:host {
+		display: none;
+	}
+`;
+export {
+  t as styles
+};

package/dist/components/toast-item/toast-item.component.d.ts

@@ -0,0 +1,21 @@
+import { SkfAlert } from '@components/alert/alert.component.js';
+export declare class SkfToastItem extends SkfAlert {
+    static styles: import("lit").CSSResultGroup[];
+    protected _closeableInitialState: boolean;
+    protected _parentAnimationDiv: HTMLDivElement | null;
+    /** If not cloaseable, timeout id for the toast */
+    private _currentTimeoutId;
+    /** If not closseable, time left on the timer when the mouse enters the toast */
+    private _timeleft;
+    /** If not closseable, time when the timeout started */
+    private _timeoutStarted;
+    originEl: HTMLElement | null;
+    timer: number;
+    constructor();
+    firstUpdated(): void;
+    _animateIn(): void;
+    _handleMouseEnter: () => void;
+    _handleMouseLeave: () => void;
+    _removeToast: () => void;
+    get parentAnimationDiv(): HTMLDivElement;
+}

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

@@ -0,0 +1,65 @@
+import { SkfAlert as l } from "../alert/alert.component.js";
+import { MOTION_DURATIONS as h } from "@skf-design-system/ui-assets";
+import { property as u } from "lit/decorators.js";
+import p from "./toast-item.styles.js";
+var d = Object.defineProperty, f = (a, t, e, m) => {
+  for (var i = void 0, r = a.length - 1, o; r >= 0; r--)
+    (o = a[r]) && (i = o(t, e, i) || i);
+  return i && d(t, e, i), i;
+};
+const n = class n extends l {
+  constructor() {
+    super(), this.timer = 0, this._handleMouseEnter = () => {
+      this._closeableInitialState || (this.closeable = !0, this._timeleft = this.timer * 1e3 - (Date.now() - this._timeoutStarted), this._currentTimeoutId && clearTimeout(this._currentTimeoutId));
+    }, this._handleMouseLeave = () => {
+      this._closeableInitialState || (this.closeable = this._closeableInitialState, this._currentTimeoutId = setTimeout(this._removeToast, this._timeleft));
+    }, this._removeToast = () => {
+      const e = this.parentAnimationDiv.animate(
+        [
+          { gridTemplateRows: "1fr", opacity: 1 },
+          { gridTemplateRows: "0fr", opacity: 0 }
+        ],
+        {
+          duration: h.normal,
+          fill: "forwards"
+        }
+      );
+      e.onfinish = () => {
+        this.originEl && this.originEl.remove(), this.parentAnimationDiv.remove();
+      };
+    }, this.originEl = null, this._parentAnimationDiv = this.parentElement, this._currentTimeoutId = null, this._timeleft = 0, this._timeoutStarted = 0, this._closeableInitialState = !!this.closeable;
+  }
+  firstUpdated() {
+    this.addEventListener("skf-alert-close", this._removeToast), this.closeable || (this.addEventListener("mouseenter", this._handleMouseEnter), this.addEventListener("mouseout", this._handleMouseLeave)), this._animateIn();
+  }
+  _animateIn() {
+    const t = this.parentAnimationDiv;
+    "vibrate" in navigator && navigator.vibrate(500);
+    const e = t.animate(
+      [
+        { gridTemplateRows: "0fr", opacity: 0 },
+        { gridTemplateRows: "1fr", opacity: 1 }
+      ],
+      {
+        duration: h.slow,
+        fill: "forwards"
+      }
+    );
+    e.onfinish = () => {
+      this.timer > 0 && !this.closeable && (this._timeoutStarted = Date.now(), this._currentTimeoutId = setTimeout(this._removeToast, this.timer * 1e3));
+    };
+  }
+  get parentAnimationDiv() {
+    const t = this.parentElement;
+    if (!t) throw new Error("Parent animation div not found");
+    return t;
+  }
+};
+n.styles = [l.styles, p];
+let s = n;
+f([
+  u({ type: Number, reflect: !0 })
+], s.prototype, "timer");
+export {
+  s as SkfToastItem
+};

package/dist/components/toast-item/toast-item.d.ts

@@ -0,0 +1,6 @@
+import { SkfToastItem } from './toast-item.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-toast-item': SkfToastItem;
+    }
+}

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

@@ -0,0 +1,2 @@
+import { SkfToastItem as t } from "./toast-item.component.js";
+t.define("skf-toast-item");

package/dist/components/toast-item/toast-item.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

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

@@ -0,0 +1,16 @@
+import { css as r } from "lit";
+const s = r`
+	:host {
+		overflow: hidden;
+		padding-block-end: 3px;
+	}
+
+	#root {
+		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));
+	}
+`;
+export {
+  s as default
+};

package/dist/components/toast-wrapper/toast-wrapper.component.d.ts

@@ -0,0 +1,24 @@
+import type { SkfAlert } from '@components/alert/alert.component.js';
+import { SkfElement } from '@internal/components/skf-element';
+import { type CSSResultGroup } from 'lit';
+/**
+ * The `<skf-toast-wrapper>` is a component without UI that positions where the toast shows up on the screen. The toast-wrapper is used internally by the toast component.
+ *
+ * @documentation See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/6229d63d9fe16020a60657e5) for design principles
+ *
+ * @slot - The alert components that the toast creates will render here.
+ *
+ * @tagname skf-toast-wrapper
+ */
+export declare class SkfToastWrapper extends SkfElement {
+    static styles: CSSResultGroup;
+    debug: boolean;
+    /** @internal */
+    _slottedChildren: SkfAlert[];
+    /** @internal */
+    topOffset?: number;
+    firstUpdated(): void;
+    /** @internal */
+    _handleSlotChange: () => void;
+    render(): import("lit").TemplateResult<1>;
+}