@skf-design-system/ui-components 1.0.2-beta.0 → 1.0.2-beta.1

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,28 +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 { nothing as p, html 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;
@@ -30,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;
@@ -43,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();
   }
@@ -66,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;
+    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
@@ -90,15 +91,15 @@ 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" : p)}
-							aria-errormessage=${n((s = this.hint) != null && s.trim() ? "hint" : p)}
+							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>
@@ -107,7 +108,7 @@ const u = class u extends m {
 					<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.hint}
 					</skf-hint>
@@ -116,71 +117,68 @@ const u = class u extends m {
 		`;
   }
 };
-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.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-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,5 +1,5 @@
-import type { SkfAlert } from '../alert/alert.component.js';
 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.
@@ -18,14 +18,15 @@ import { type CSSResultGroup } from 'lit';
  */
 export declare class SkfToast extends SkfElement {
     static styles: CSSResultGroup;
+    /** @internal */
     private _singleton?;
     debug: boolean;
     /** If defined, displays leading icon */
-    icon?: SkfAlert['icon'];
+    icon?: Icon;
     /** If true, renders with an close button and sets aria-role to `status` */
-    persistent: SkfAlert['persistent'];
+    persistent: boolean;
     /** If defined, gives the supplied appearance */
-    severity: SkfAlert['severity'];
+    severity: Severity;
     /** Time in seconds before the toast disappears. */
     timer: number;
     /** offsets where toasts emerge vertically */

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

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

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

@@ -1,11 +1,11 @@
-import '../toast-item/toast-item.js';
-import '../toast-wrapper/toast-wrapper.js';
-import type { SkfToast } from '../toast/toast.component.js';
+import './toast-item.js';
+import './toast-wrapper.js';
+import type { SkfToast } from './toast.component.js';
 interface ToastData extends Pick<SkfToast, 'debug' | 'icon' | 'persistent' | 'severity' | 'timer' | 'topOffset'> {
     originEl: SkfToast;
     text: string;
 }
-export declare class Singleton {
+export declare class SkfToastSingleton {
     private static instance?;
     data: ToastData[];
     root: Document;

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

@@ -1,10 +1,10 @@
-import "../toast-item/toast-item.js";
-import "../toast-wrapper/toast-wrapper.js";
-class r {
+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)
       throw new Error("Root node must be a document node");
-    return r.instance || (r.instance = this), r.instance;
+    return s.instance || (s.instance = this), s.instance;
   }
   hasToasts() {
     return this.data.length > 0;
@@ -25,7 +25,7 @@ class r {
     const e = c(this.root, this.usePopover);
     this.usePopover && e.showPopover(), u();
     function u() {
-      const n = new r(document);
+      const n = new s(document);
       for (; n.hasToasts(); ) {
         const t = n.popToast();
         if (!t) return;
@@ -38,16 +38,16 @@ class r {
     }
     function c(n, t) {
       var p;
-      const a = ((p = new r(document).getData()[0]) == null ? void 0 : p.topOffset) ?? null, i = n.querySelector("body");
-      let s = i == null ? void 0 : i.querySelector("skf-toast-wrapper");
-      if (!s) {
-        if (s = document.createElement("skf-toast-wrapper"), !s) throw new Error("Could not create toast wrapper element");
-        t && s.setAttribute("popover", "auto"), a && s.setAttribute("top-offset", a.toString()), document.body.appendChild(s);
+      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");
+      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);
       }
-      return s;
+      return r;
     }
   }
 }
 export {
-  r as Singleton
+  s as SkfToastSingleton
 };

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

@@ -18,6 +18,7 @@ import type { CSSResultGroup } from 'lit';
 export declare class SkfTooltip extends SkfPopoverBase {
     static styles: CSSResultGroup;
     constructor();
+    openExtended(): void;
+    closeExtended(): void;
     addEventListeners($element: HTMLElement | Element): void;
-    removeEventListeners($element: HTMLElement | Element): void;
 }

package/dist/components/tooltip/tooltip.component.js

@@ -1,18 +1,23 @@
 import { styles as n } from "./tooltip.styles.js";
-import { SkfPopoverBase as e } from "../../internal/base-classes/popover/popover.base.js";
-const t = class t extends e {
+import { SkfPopoverBase as t } from "../../internal/base-classes/popover/popover.base.js";
+const i = class i extends t {
   constructor() {
-    super(), this.arrow = !0, this.offset = 8, this.placement = "top", e.classMap = { tooltip: !0 };
+    super(), this.role = "tooltip", this.arrow = !0, this.offset = 8, this.placement = "top", this.variant = "tooltip", t.classMap = { tooltip: !0 };
   }
-  addEventListeners(s) {
-    s.addEventListener("blur", this.close, { signal: this.signal }), s.addEventListener("focus", this.open, { signal: this.signal }), s.addEventListener("mouseenter", this.open, { signal: this.signal }), s.addEventListener("mouseleave", this.close, { signal: this.signal });
+  openExtended() {
+    var s;
+    (s = this.$anchor) == null || s.setAttribute("aria-describedby", this.id);
+  }
+  closeExtended() {
+    var s;
+    (s = this.$anchor) == null || s.removeAttribute("aria-describedby");
   }
-  removeEventListeners(s) {
-    s.addEventListener("blur", this.close), s.addEventListener("focus", this.open), s.removeEventListener("mouseenter", this.open), s.removeEventListener("mouseleave", this.close);
+  addEventListeners(s) {
+    s.addEventListener("blur", this.close.bind(this), { signal: this.signal }), s.addEventListener("focus", this.open.bind(this), { signal: this.signal }), s.addEventListener("mouseenter", this.open.bind(this), { signal: this.signal }), s.addEventListener("mouseleave", this.close.bind(this), { signal: this.signal });
   }
 };
-t.styles = [e.styles, n];
-let i = t;
+i.styles = [t.styles, n];
+let e = i;
 export {
-  i as SkfTooltip
+  e as SkfTooltip
 };