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

package/dist/components/tag/tag.d.ts

@@ -1,5 +1,5 @@
-import { SkfTag } from './tag.component';
-export * from './tag.component';
+import { SkfTag } from './tag.component.js';
+export * from './tag.component.js';
 export default SkfTag;
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/tag/tag.styles.js

@@ -1,66 +1,79 @@
 import { css as r } from "lit";
 const s = r`
-	/* stylelint-disable selector-class-pattern */
 	@layer components {
-		.tag {
-			align-items: center;
-			background-color: var(--_skf-tag-bg-color, var(--skf-bg-color-neutral-1));
-			block-size: var(--_skf-tag-height, var(--skf-size-32));
-			border: var(--skf-border-width-sm) solid
-				var(--_skf-tag-border-color, var(--skf-border-color-primary));
-			border-radius: var(--_skf-tag-border-radius, var(--skf-border-radius-md));
-			color: var(--_skf-tag-text-color, var(--skf-text-color-primary));
-			display: inline-flex;
-			font-size: var(--_skf-tag-font-size, var(--skf-font-size-50));
-			gap: var(--skf-spacing-25);
-			max-inline-size: 48ch;
-			padding-inline: var(--skf-spacing-50);
-		}
+		@layer base {
+			:host {
+				display: inline-flex;
+			}
 
-		.tag--color-alert {
-			--_skf-tag-bg-color: var(--skf-severity-bg-color-alert);
-			--_skf-tag-border-color: var(--skf-severity-fg-color-alert);
-		}
+			#root {
+				--_skf-tag-bg-color: var(--skf-bg-color-neutral-1);
+				--_skf-tag-border-color: var(--skf-border-color-primary);
+				--_skf-tag-border-radius: var(--skf-border-radius-md);
+				--_skf-tag-font-size: var(--skf-font-size-50);
+				--_skf-tag-height: var(--skf-size-32);
+				--_skf-tag-text-color: var(--skf-text-color-primary);
 
-		.tag--color-error {
-			--_skf-tag-bg-color: var(--skf-severity-bg-color-error);
-			--_skf-tag-border-color: var(--skf-severity-fg-color-error);
-		}
+				align-items: center;
+				background-color: var(--_skf-tag-bg-color);
+				block-size: var(--_skf-tag-height);
+				border: var(--skf-border-width-sm) solid var(--_skf-tag-border-color);
+				border-radius: var(--_skf-tag-border-radius);
+				color: var(--_skf-tag-text-color);
+				display: flex;
+				font-size: var(--_skf-tag-font-size);
+				gap: var(--skf-spacing-25);
+				max-inline-size: 48ch;
+				padding-inline: var(--skf-spacing-50);
+			}
 
-		.tag--color-info {
-			--_skf-tag-bg-color: var(--skf-severity-bg-color-info);
-			--_skf-tag-border-color: var(--skf-severity-fg-color-info);
-		}
+			slot {
+				display: block;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
 
-		.tag--color-success {
-			--_skf-tag-bg-color: var(--skf-severity-bg-color-success);
-			--_skf-tag-border-color: var(--skf-severity-fg-color-success);
-		}
+			button {
+				display: flex;
 
-		.tag--color-warning {
-			--_skf-tag-bg-color: var(--skf-severity-bg-color-warning);
-			--_skf-tag-border-color: var(--skf-severity-fg-color-warning);
+				&:focus-visible {
+					border-radius: var(--skf-border-radius-sm);
+					outline: var(--skf-border-width-md) solid var(--skf-interactive-border-color-focus);
+				}
+			}
 		}
 
-		.tag--small {
-			--_skf-tag-border-radius: 0.25rem; /* token needed */
-			--_skf-tag-font-size: var(--skf-font-size-25);
-			--_skf-tag-height: var(--skf-size-24);
-		}
+		@layer mods {
+			:host(:state(alert)) #root {
+				--_skf-tag-bg-color: var(--skf-severity-bg-color-alert);
+				--_skf-tag-border-color: var(--skf-severity-fg-color-alert);
+			}
 
-		.tag__slot {
-			display: block;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-		}
+			:host(:state(error)) #root {
+				--_skf-tag-bg-color: var(--skf-severity-bg-color-error);
+				--_skf-tag-border-color: var(--skf-severity-fg-color-error);
+			}
 
-		.tag__btn {
-			display: flex;
+			:host(:state(info)) #root {
+				--_skf-tag-bg-color: var(--skf-severity-bg-color-info);
+				--_skf-tag-border-color: var(--skf-severity-fg-color-info);
+			}
+
+			:host(:state(success)) #root {
+				--_skf-tag-bg-color: var(--skf-severity-bg-color-success);
+				--_skf-tag-border-color: var(--skf-severity-fg-color-success);
+			}
+
+			:host(:state(warning)) #root {
+				--_skf-tag-bg-color: var(--skf-severity-bg-color-warning);
+				--_skf-tag-border-color: var(--skf-severity-fg-color-warning);
+			}
 
-			&:focus-visible {
-				border-radius: var(--skf-border-radius-sm);
-				outline: var(--skf-border-width-md) solid var(--skf-interactive-border-color-focus);
+			:host(:state(sm)) #root {
+				--_skf-tag-border-radius: 0.25rem; /* token needed */
+				--_skf-tag-font-size: var(--skf-font-size-25);
+				--_skf-tag-height: var(--skf-size-24);
 			}
 		}
 	}

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

@@ -1,6 +1,7 @@
 import '../icon/icon.js';
 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 CSSResultGroup } from 'lit';
 interface SkfTextAreaProps extends Omit<FormFieldBaseProps, 'type'> {
@@ -14,8 +15,8 @@ interface SkfTextAreaProps extends Omit<FormFieldBaseProps, 'type'> {
  *
  * @documentation See [zeroheight](https://zeroheight.com/853e936c9/p/143f9d-text-area) for design principles.
  *
- * @attribute {boolean} disabled - If true, sets disabled state
- * @attribute {boolean} required - If true, value is required or must be checked for the form to be submittable
+ * @attribute {boolean} [disabled=false] - If true, sets disabled state
+ * @attribute {boolean} [required=false] - If true, value is required or must be checked for the form to be submittable
  *
  * @event change - Fires when the value of the input changes
  * @event invalid - Fires when the input is invalid
@@ -26,6 +27,7 @@ interface SkfTextAreaProps extends Omit<FormFieldBaseProps, 'type'> {
  */
 export declare class SkfTextArea extends FormBase implements SkfTextAreaProps {
     static styles: CSSResultGroup;
+    /** @internal */
     private customError;
     /** If defined, sets the cols of the textarea */
     cols?: number;
@@ -33,9 +35,9 @@ export declare class SkfTextArea extends FormBase implements SkfTextAreaProps {
     set customInvalid(value: string | undefined);
     get customInvalid(): string | undefined;
     /** If true, outputs helping hints in console */
-    debug?: boolean;
+    debug: boolean;
     /** If true, hides the label visually */
-    hideLabel?: boolean;
+    hideLabel: boolean;
     /** If defined, displays informational text below the field */
     hint?: string;
     /** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */
@@ -49,18 +51,15 @@ export declare class SkfTextArea extends FormBase implements SkfTextAreaProps {
     /** If defined, displays placeholder text */
     placeholder?: string;
     /** If true, makes the element not mutable, meaning the user can not edit the control */
-    readonly?: boolean;
+    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
-     * @type {"success" | "info" | "warning" | "alert"}
-     */
-    severity?: SkfTextAreaProps['severity'];
+    /** If defined, displays provided severity state */
+    severity?: FormFieldSeverity;
     /** If true, displays valid state after interaction */
-    showValid?: boolean;
+    showValid: boolean;
     /** Size of the Textarea */
     size?: 'sm' | 'md';
     /** Sets validation start */

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

@@ -1,27 +1,29 @@
+import "../icon/icon.js";
 import { FormBase as m } from "../../internal/components/formBase.js";
 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 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) => {
-  for (var l = a > 1 ? void 0 : a ? E(t, s) : t, o = h.length - 1, d; o >= 0; o--)
-    (d = h[o]) && (l = (a ? d(t, s, l) : d(l)) || l);
-  return a && l && $(t, s, l), l;
+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 u = class u extends m {
+const d = class d extends m {
   constructor() {
-    super(...arguments), this.size = "md", this.validateOn = "change", this.value = "", this.invalid = !1, this._resetValue = (t) => {
+    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;
-      t.stopPropagation(), this.value = ((s = this.getAttribute("value")) == null ? void 0 : s.trim()) ?? "", this._internals.setFormValue(this.value), this.$input.focus();
+      i.stopPropagation(), this.value = ((s = this.getAttribute("value")) == null ? void 0 : s.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(t) {
-    this.customError = t || "";
+  set customInvalid(i) {
+    this.customError = i ?? "";
   }
   get customInvalid() {
     return this.customError;
@@ -29,12 +31,12 @@ const u = class u 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", (t) => {
-      this.pristine = !1, this.invalid = !0, this.customErrorDisplay && t.preventDefault();
+    }), this.addEventListener("invalid", (i) => {
+      this.pristine = !1, this.invalid = !0, this.customErrorDisplay && i.preventDefault();
     }), this.addEventListener("reset", this._resetValue), this.validateInput();
   }
-  willUpdate(t) {
-    if (t.has("invalid"))
+  willUpdate(i) {
+    if (i.has("invalid"))
       if (this.invalid) {
         this.setAttribute("invalid", ""), this.showValid || this.removeAttribute("valid");
         const s = this._internals.validationMessage;
@@ -42,11 +44,11 @@ const u = class u extends m {
       } else
         this.removeAttribute("invalid"), !this.pristine && this.showValid && this.setAttribute("valid", "true"), this.hint = this.getAttribute("hint") ?? "";
   }
-  attributeChangedCallback(t, s, a) {
-    if (super.attributeChangedCallback(t, s, a), t === "value" && this._internals.setFormValue(a), t === "custom-invalid")
+  attributeChangedCallback(i, s, a) {
+    if (super.attributeChangedCallback(i, s, a), i === "value" && this._internals.setFormValue(a), i === "custom-invalid")
       if (typeof a == "string") {
-        const o = this.withFallback(a);
-        this.pristine = !1, this._internals.setValidity({ customError: !0 }, o), this.invalid = !0, this.hint = o, this.checkValidity();
+        const n = this.withFallback(a);
+        this.pristine = !1, this._internals.setValidity({ customError: !0 }, n), this.invalid = !0, this.hint = n, this.checkValidity();
       } else
         this._internals.setValidity({}), this.validateInput();
   }
@@ -65,22 +67,22 @@ const u = class u extends m {
           `Add custom message on ${this.localName} using attribute: ${l.toUpperCase()}="Your custom message"`
         ), s[a]) {
           this.validationError = a.toString();
-          const o = this.hasAttribute(l) ? this.getAttribute(l) : this.$input.validationMessage;
+          const n = this.hasAttribute(l) ? this.getAttribute(l) : this.$input.validationMessage;
           this._internals.setValidity(
             { [this.validationError]: !0, customError: this._internals.validity.customError },
-            this.withFallback(o)
+            this.withFallback(n)
           ), this.invalid && this.customErrorDisplay && this.checkValidity();
         }
       }
     }
   }
   render() {
-    var t, s;
-    return p`
+    var i, s;
+    return v`
 			<div id="root">
 				<label>
 					<div class=${this.hideLabel ? "visually-hidden" : ""} id="label">
-						<slot>${this.label}</slot> ${this.required ? c(this.requiredLabel) : null}
+						<slot>${this.label}</slot> ${this.required ? y(this.requiredLabel) : null}
 					</div>
 					<div id="input">
 						<textarea
@@ -89,97 +91,94 @@ const u = class u extends m {
 							?required=${this.required}
 							.value=${this.value}
 							@input=${this._handleInput}
-							aria-describedby=${n((t = this.hint) != null && t.trim() ? "hint" : v)}
-							aria-errormessage=${n((s = this.hint) != null && s.trim() ? "hint" : v)}
+							aria-describedby=${o((i = this.hint) != null && i.trim() ? "hint" : u)}
+							aria-errormessage=${o((s = this.hint) != null && s.trim() ? "hint" : u)}
 							aria-invalid=${!!this.invalid}
-							cols=${n(this.cols)}
-							maxlength=${n(this.maxLength)}
-							minlength=${n(this.minLength)}
-							name=${n(this.name)}
-							placeholder=${n(this.placeholder)}
-							rows=${n(this.rows)}
+							cols=${o(this.cols)}
+							maxlength=${o(this.maxLength)}
+							minlength=${o(this.minLength)}
+							name=${o(this.name)}
+							placeholder=${o(this.placeholder)}
+							rows=${o(this.rows)}
 						>
 						</textarea>
 					</div>
 				</label>
-				${this.hint && p`
+				${this.hint && v`
 					<skf-hint
 						aria-live=${this.invalid ? "assertive" : "polite"}
 						id="hint"
-						severity=${n(_(this.severity, this.invalid))}
+						severity=${o(c(this.invalid, this.severity))}
 					>
-						${this.customInvalid ? this.customInvalid : this.hint}
+						${this.customInvalid ?? this.hint}
 					</skf-hint>
 				`}
 			</div>
 		`;
   }
 };
-u.styles = [y, g];
-let i = u;
+d.styles = [f, $];
+let t = d;
 e([
   r({ type: Number })
-], i.prototype, "cols", 2);
+], t.prototype, "cols", 2);
 e([
   r({ attribute: "custom-invalid", reflect: !0 })
-], i.prototype, "customInvalid", 1);
+], t.prototype, "customInvalid", 1);
 e([
   r({ type: Boolean })
-], i.prototype, "debug", 2);
+], t.prototype, "debug", 2);
 e([
   r({ type: Boolean, attribute: "hide-label" })
-], i.prototype, "hideLabel", 2);
+], t.prototype, "hideLabel", 2);
 e([
   r()
-], i.prototype, "hint", 2);
+], t.prototype, "hint", 2);
 e([
   r()
-], i.prototype, "label", 2);
+], t.prototype, "label", 2);
 e([
   r()
-], i.prototype, "name", 2);
+], t.prototype, "name", 2);
 e([
   r({ type: Number, attribute: "maxlength" })
-], i.prototype, "maxLength", 2);
+], t.prototype, "maxLength", 2);
 e([
   r({ type: Number, attribute: "minlength" })
-], i.prototype, "minLength", 2);
+], t.prototype, "minLength", 2);
 e([
   r()
-], i.prototype, "placeholder", 2);
+], t.prototype, "placeholder", 2);
 e([
   r({ type: Boolean })
-], i.prototype, "readonly", 2);
+], t.prototype, "readonly", 2);
 e([
   r({ attribute: "required-label" })
-], i.prototype, "requiredLabel", 2);
+], t.prototype, "requiredLabel", 2);
 e([
   r({ type: Number })
-], i.prototype, "rows", 2);
+], t.prototype, "rows", 2);
 e([
   r()
-], i.prototype, "severity", 2);
+], t.prototype, "severity", 2);
 e([
   r({ type: Boolean, attribute: "show-valid" })
-], i.prototype, "showValid", 2);
+], t.prototype, "showValid", 2);
 e([
   r({ reflect: !0 })
-], i.prototype, "size", 2);
+], t.prototype, "size", 2);
 e([
-  r({ type: String, attribute: "validate-on" })
-], i.prototype, "validateOn", 2);
+  r({ attribute: "validate-on" })
+], t.prototype, "validateOn", 2);
 e([
   r()
-], i.prototype, "value", 2);
+], t.prototype, "value", 2);
 e([
   b()
-], i.prototype, "invalid", 2);
+], t.prototype, "invalid", 2);
 e([
-  f("textarea")
-], i.prototype, "$input", 2);
-function _(h, t) {
-  return t ? "error" : h;
-}
+  g("textarea")
+], t.prototype, "$input", 2);
 export {
-  i as SkfTextArea
+  t as SkfTextArea
 };

package/dist/components/{toast-item → toast}/toast-item.component.js

@@ -1,18 +1,18 @@
-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) => {
+import { SkfAlert as h } from "../alert/alert.component.js";
+import { MOTION_DURATIONS as m } from "@skf-design-system/ui-assets";
+import { property as p } from "lit/decorators.js";
+import u from "./toast-item.styles.js";
+var d = Object.defineProperty, f = (a, t, e, l) => {
   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 {
+const n = class n extends h {
   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._closeableInitialState || (this.persistent = !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._closeableInitialState || (this.persistent = this._closeableInitialState, this._currentTimeoutId = setTimeout(this._removeToast, this._timeleft));
     }, this._removeToast = () => {
       const e = this.parentAnimationDiv.animate(
         [
@@ -20,17 +20,17 @@ const n = class n extends l {
           { gridTemplateRows: "0fr", opacity: 0 }
         ],
         {
-          duration: h.normal,
+          duration: m.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;
+    }, this.originEl = null, this._parentAnimationDiv = this.parentElement, this._currentTimeoutId = null, this._timeleft = 0, this._timeoutStarted = 0, this._closeableInitialState = !!this.persistent;
   }
   firstUpdated() {
-    this.addEventListener("skf-alert-close", this._removeToast), this.closeable || (this.addEventListener("mouseenter", this._handleMouseEnter), this.addEventListener("mouseout", this._handleMouseLeave)), this._animateIn();
+    this.addEventListener("skf-alert-close", this._removeToast), this.persistent || (this.addEventListener("mouseenter", this._handleMouseEnter), this.addEventListener("mouseout", this._handleMouseLeave)), this._animateIn();
   }
   _animateIn() {
     const t = this.parentAnimationDiv;
@@ -41,12 +41,12 @@ const n = class n extends l {
         { gridTemplateRows: "1fr", opacity: 1 }
       ],
       {
-        duration: h.slow,
+        duration: m.slow,
         fill: "forwards"
       }
     );
     e.onfinish = () => {
-      this.timer > 0 && !this.closeable && (this._timeoutStarted = Date.now(), this._currentTimeoutId = setTimeout(this._removeToast, this.timer * 1e3));
+      this.timer > 0 && !this.persistent && (this._timeoutStarted = Date.now(), this._currentTimeoutId = setTimeout(this._removeToast, this.timer * 1e3));
     };
   }
   get parentAnimationDiv() {
@@ -55,10 +55,10 @@ const n = class n extends l {
     return t;
   }
 };
-n.styles = [l.styles, p];
+n.styles = [h.styles, u];
 let s = n;
 f([
-  u({ type: Number, reflect: !0 })
+  p({ type: Number, reflect: !0 })
 ], s.prototype, "timer");
 export {
   s as SkfToastItem

package/dist/components/{toast-item → toast}/toast-item.d.ts

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

package/dist/components/{toast-item → toast}/toast-item.js

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

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

@@ -0,0 +1,18 @@
+import { css as o } from "lit";
+const a = o`
+	@layer components {
+		:host {
+			overflow: hidden; /* Enable mask transition */
+			padding-block-end: 3px; /* Make room for box-shadow */
+		}
+
+		.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));
+		}
+	}
+`;
+export {
+  a as default
+};

package/dist/components/{toast-wrapper → toast}/toast-wrapper.component.js

@@ -1,5 +1,5 @@
 import { SkfElement as h } from "../../internal/components/skf-element.js";
-import d from "../../styles/component.styles.js";
+import { componentStyles as d } from "../../styles/component.styles.js";
 import { html as m } from "lit";
 import { property as p, queryAssignedElements as a } from "lit/decorators.js";
 import { styles as u } from "./toast-wrapper.styles.js";

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

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

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

@@ -1,4 +1,5 @@
 import { SkfElement } from '../../internal/components/skf-element';
+import type { Icon, Severity } from '../../internal/types.js';
 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.
@@ -7,7 +8,7 @@ import { type CSSResultGroup } from 'lit';
  * 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.
+ * A simple toast component that displays a message to the user. Invoke a toast message by appending a <skf-toast> tag to the DOM. Position in DOM is irrelevant. A transient toast will disappear after a set amount of time. Once toast is dismissed it will be removed from the DOM.
  *
  * @documentation See [zeroheight](https://zeroheight.com/853e936c9/p/98e432-toast) for design principles
  *
@@ -17,12 +18,15 @@ import { type CSSResultGroup } from 'lit';
  */
 export declare class SkfToast extends SkfElement {
     static styles: CSSResultGroup;
+    /** @internal */
     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';
+    /** If defined, displays leading icon */
+    icon?: Icon;
+    /** If true, renders with an close button and sets aria-role to `status` */
+    persistent: boolean;
+    /** If defined, gives the supplied appearance */
+    severity: Severity;
     /** Time in seconds before the toast disappears. */
     timer: number;
     /** offsets where toasts emerge vertically */