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

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

@@ -3,8 +3,8 @@ 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 f, query as b } from "lit/decorators.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) => {
@@ -22,7 +22,7 @@ const u = class u extends m {
     };
   }
   set customInvalid(t) {
-    this.customError = t || "";
+    this.customError = t ?? "";
   }
   get customInvalid() {
     return this.customError;
@@ -77,7 +77,7 @@ const u = class u extends m {
   }
   render() {
     var t, s;
-    return p`
+    return v`
 			<div id="root">
 				<label>
 					<div class=${this.hideLabel ? "visually-hidden" : ""} id="label">
@@ -90,8 +90,8 @@ 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=${n((t = this.hint) != null && t.trim() ? "hint" : p)}
+							aria-errormessage=${n((s = this.hint) != null && s.trim() ? "hint" : p)}
 							aria-invalid=${!!this.invalid}
 							cols=${n(this.cols)}
 							maxlength=${n(this.maxLength)}
@@ -103,13 +103,13 @@ const u = class u extends m {
 						</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))}
 					>
-						${this.customInvalid ? this.customInvalid : this.hint}
+						${this.customInvalid ?? this.hint}
 					</skf-hint>
 				`}
 			</div>
@@ -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

@@ -8,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
  *

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

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

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

@@ -3,12 +3,12 @@ import 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";
-var y = Object.defineProperty, s = (l, n, i, g) => {
-  for (var t = void 0, r = l.length - 1, f; r >= 0; r--)
-    (f = l[r]) && (t = f(n, i, t) || t);
-  return t && y(n, i, t), t;
+var y = Object.defineProperty, r = (l, i, n, g) => {
+  for (var t = void 0, o = l.length - 1, f; o >= 0; o--)
+    (f = l[o]) && (t = f(i, n, t) || t);
+  return t && y(i, n, t), t;
 };
-const o = class o extends h {
+const s = class s extends h {
   constructor() {
     super(...arguments), this.debug = !1, this._handleSlotChange = () => {
       this._slottedChildren.length === 0 && this.remove();
@@ -21,15 +21,15 @@ const o = class o extends h {
     return m`<slot @slotchange=${this._handleSlotChange}></slot>`;
   }
 };
-o.styles = [d, u];
-let e = o;
-s([
+s.styles = [d, u];
+let e = s;
+r([
   p({ type: Boolean, reflect: !0 })
 ], e.prototype, "debug");
-s([
+r([
   a()
 ], e.prototype, "_slottedChildren");
-s([
+r([
   p({ type: Number, reflect: !0 })
 ], e.prototype, "topOffset");
 export {

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

@@ -1,16 +1,15 @@
 import { SkfPopoverBase } from '../../internal/base-classes/popover/popover.base.js';
 import type { CSSResultGroup } from 'lit';
 /**
- * The `<skf-tooltip>` is a component that displays a list of actions or options.
+ * The `<skf-tooltip>` is a component that displays a tooltip.
  *
  * @documentation See [zeroheight](https://zeroheight.com/****) for design principles
  *
- * @property {"top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end"} [placement='bottom-start'] - The placement of the dropdown
- * @property {boolean} [isOpen=false] - Whether the dropdown is open
- * @property {string} [anchor] - The id of the element the dropdown will be anchored to
+ * @attribute {"top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end"} [placement='bottom-start'] - The placement of the dropdown
+ * @attribute {string} [anchor] - The id of the element the dropdown will be anchored to
  *
- * @event open - Fired when the dropdown is opened
- * @event close - Fired when the dropdown is closed
+ * @event skf-opened - Fired when the dropdown is opened
+ * @event skf-closed - Fired when the dropdown is closed
  *
  * @slot - The tooltip popover content
  *

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

@@ -1,18 +1,18 @@
-import { styles as o } from "./tooltip.styles.js";
-import { SkfPopoverBase as s } from "../../internal/base-classes/popover/popover.base.js";
-const t = class t extends s {
+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 {
   constructor() {
-    super(), this.arrow = !0, this.offset = 8, this.placement = "top", s.classMap = { tooltip: !0 };
+    super(), this.arrow = !0, this.offset = 8, this.placement = "top", e.classMap = { tooltip: !0 };
   }
-  addEventListeners(e) {
-    e.addEventListener("mouseenter", this.open), e.addEventListener("mouseleave", this.close);
+  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 });
   }
-  removeEventListeners(e) {
-    e.removeEventListener("mouseenter", this.open), e.removeEventListener("mouseleave", this.close);
+  removeEventListeners(s) {
+    s.addEventListener("blur", this.close), s.addEventListener("focus", this.open), s.removeEventListener("mouseenter", this.open), s.removeEventListener("mouseleave", this.close);
   }
 };
-t.styles = [s.styles, o];
-let r = t;
+t.styles = [e.styles, n];
+let i = t;
 export {
-  r as SkfTooltip
+  i as SkfTooltip
 };