@skf-design-system/ui-components 1.0.2-beta.5 → 1.0.2-beta.6

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

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

package/dist/components/tabs/tab.component.d.ts

@@ -20,7 +20,7 @@ export declare class SkfTab extends SkfElement {
     panel: string;
     selected: boolean;
     variant: SkfTabs['variant'];
-    constructor();
+    connectedCallback(): void;
     /** @internal */
     handleSelectedChange(): void;
     /** @internal */

package/dist/components/tabs/tab.component.js

@@ -1,24 +1,27 @@
-import { SkfElement as n } from "../../internal/components/skf-element.js";
+import { SkfElement as d } from "../../internal/components/skf-element.js";
 import { watch as h } from "../../internal/helpers/watch.js";
 import { componentStyles as m } from "../../styles/component.styles.js";
 import { html as f } from "lit";
-import { property as v, state as d } from "lit/decorators.js";
+import { property as v, state as n } from "lit/decorators.js";
 import { classMap as b } from "lit/directives/class-map.js";
-import { styles as _ } from "./tab.styles.js";
-var u = Object.defineProperty, y = Object.getOwnPropertyDescriptor, a = (c, s, l, r) => {
-  for (var e = r > 1 ? void 0 : r ? y(s, l) : s, i = c.length - 1, o; i >= 0; i--)
-    (o = c[i]) && (e = (r ? o(s, l, e) : o(e)) || e);
-  return r && e && u(s, l, e), e;
+import { styles as u } from "./tab.styles.js";
+var _ = Object.defineProperty, y = Object.getOwnPropertyDescriptor, a = (p, s, l, r) => {
+  for (var e = r > 1 ? void 0 : r ? y(s, l) : s, i = p.length - 1, o; i >= 0; i--)
+    (o = p[i]) && (e = (r ? o(s, l, e) : o(e)) || e);
+  return r && e && _(s, l, e), e;
 };
-const p = class p extends n {
+const c = class c extends d {
   constructor() {
-    super(), this.panel = "", this.selected = !1, this.variant = "expanded", this._handleClick = () => {
+    super(...arguments), this.panel = "", this.selected = !1, this.variant = "expanded", this._handleClick = () => {
       this.emit("skf-tab-select", {
         detail: {
           tab: this
         }
       });
-    }, this.role = "tab", this.addEventListener("click", this._handleClick);
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.role = "tab", this.addEventListener("click", this._handleClick);
   }
   handleSelectedChange() {
     this.ariaSelected = this.selected ? "true" : "false", this.tabIndex = this.selected ? 0 : -1;
@@ -38,16 +41,16 @@ const p = class p extends n {
 		`;
   }
 };
-p.styles = [m, _];
-let t = p;
+c.styles = [m, u];
+let t = c;
 a([
   v({ reflect: !0 })
 ], t.prototype, "panel", 2);
 a([
-  d()
+  n()
 ], t.prototype, "selected", 2);
 a([
-  d()
+  n()
 ], t.prototype, "variant", 2);
 a([
   h("selected")

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-item.styles.js

@@ -1,18 +1,21 @@
 import { css as o } from "lit";
-const a = o`
+const e = o`
 	@layer components {
-		:host {
-			overflow: hidden; /* Enable mask transition */
-			padding-block-end: 3px; /* Make room for box-shadow */
-		}
+		@layer overrides {
+			:host {
+				overflow: hidden; /* Enable mask transition */
+				padding-block-end: 3px; /* Make room for box-shadow */
+			}
+
+			#root {
+				--_skf-alert-bg-color: var(--skf-bg-color-neutral-1);
 
-		.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));
+				/* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+				border-inline-start: var(--skf-size-8) solid var(--_skf-alert-border-color);
+			}
 		}
 	}
 `;
 export {
-  a as default
+  e as default
 };

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

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();
+    connectedCallback(): void;
     openExtended(): void;
     closeExtended(): void;
     addEventListeners($element: HTMLElement | Element): void;

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

@@ -1,8 +1,11 @@
-import { styles as n } from "./tooltip.styles.js";
+import { styles as a } from "./tooltip.styles.js";
 import { SkfPopoverBase as t } from "../../internal/base-classes/popover/popover.base.js";
-const i = class i extends t {
+const e = class e extends t {
   constructor() {
-    super(), this.role = "tooltip", this.arrow = !0, this.offset = 8, this.placement = "top", this.variant = "tooltip", t.classMap = { tooltip: !0 };
+    super(), this.arrow = !0, this.offset = 8, this.placement = "top", this.variant = "tooltip", t.classMap = { tooltip: !0 };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.role = "tooltip";
   }
   openExtended() {
     var s;
@@ -13,11 +16,11 @@ const i = class i extends t {
     (s = this.$anchor) == null || s.removeAttribute("aria-describedby");
   }
   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 });
+    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 });
   }
 };
-i.styles = [t.styles, n];
-let e = i;
+e.styles = [t.styles, a];
+let i = e;
 export {
-  e as SkfTooltip
+  i as SkfTooltip
 };