@skf-design-system/ui-components 1.0.0-alpha.37 → 1.0.0-alpha.39

package/dist/components/link/link.component.js

@@ -1,114 +1,126 @@
-var u = (e) => {
+var g = (e) => {
   throw TypeError(e);
 };
-var b = (e, i, t) => i.has(e) || u("Cannot " + t);
-var d = (e, i, t) => (b(e, i, "read from private field"), t ? t.call(e) : i.get(e)), f = (e, i, t) => i.has(e) ? u("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(e) : i.set(e, t), y = (e, i, t, o) => (b(e, i, "write to private field"), o ? o.call(e, t) : i.set(e, t), t);
+var _ = (e, i, t) => i.has(e) || g("Cannot " + t);
+var c = (e, i, t) => (_(e, i, "read from private field"), t ? t.call(e) : i.get(e)), f = (e, i, t) => i.has(e) ? g("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(e) : i.set(e, t), y = (e, i, t, h) => (_(e, i, "write to private field"), h ? h.call(e, t) : i.set(e, t), t);
 import "../icon/icon.js";
-import { SkfElement as C } from "../../internal/components/skf-element.js";
+import { SkfElement as w } from "../../internal/components/skf-element.js";
 import { stateMap as k } from "../../internal/helpers/stateMap.js";
-import { watch as v } from "../../internal/helpers/watch.js";
+import { watch as b } from "../../internal/helpers/watch.js";
 import { componentStyles as S } from "../../styles/component.styles.js";
-import { nothing as g } from "lit";
-import { property as n } from "lit/decorators.js";
-import { ifDefined as x } from "lit/directives/if-defined.js";
-import { html as _ } from "lit/static-html.js";
-import { styles as A } from "./link.styles.js";
-var D = Object.defineProperty, E = Object.getOwnPropertyDescriptor, s = (e, i, t, o) => {
-  for (var h = o > 1 ? void 0 : o ? E(i, t) : i, p = e.length - 1, c; p >= 0; p--)
-    (c = e[p]) && (h = (o ? c(i, t, h) : c(h)) || h);
-  return o && h && D(i, t, h), h;
+import { nothing as m } from "lit";
+import { property as s } from "lit/decorators.js";
+import { ifDefined as D } from "lit/directives/if-defined.js";
+import { html as v } from "lit/static-html.js";
+import { styles as x } from "./link.styles.js";
+var A = Object.defineProperty, E = Object.getOwnPropertyDescriptor, r = (e, i, t, h) => {
+  for (var n = h > 1 ? void 0 : h ? E(i, t) : i, p = e.length - 1, d; p >= 0; p--)
+    (d = e[p]) && (n = (h ? d(i, t, n) : d(n)) || n);
+  return h && n && A(i, t, n), n;
 };
-const w = {
+const C = {
   color: ["inverse", "primary"],
   stretch: "stretch"
 };
 var a, l;
-const m = class m extends C {
+const u = class u extends w {
   constructor() {
     super(...arguments);
     f(this, a);
     f(this, l);
-    y(this, a, this.attachInternals()), y(this, l, d(this, a).states), this.as = "link", this.color = "primary", this.disabled = !1, this.download = !1, this.iconRight = !1, this.stretch = !1, this._handleClick = () => {
-      var t;
-      if (!(this.as === "button" && this.disabled) && (this.emit("skf-link-click", { detail: { href: this.href, route: this.route } }), this.as === "link" && !this.route && ((t = this.href) != null && t.trim())))
+    y(this, a, this.attachInternals()), y(this, l, c(this, a).states), this.as = "link", this.color = "primary", this.disabled = !1, this.download = !1, this.iconRight = !1, this.stretch = !1, this._handleClick = () => {
+      if (!(this.as === "button" && this.disabled) && (this.emit("skf-link-click", { detail: { href: this.href, route: this.route } }), this.as === "link" && !this.route && this.href?.trim()))
         if (this.target)
           window.open(this.href, this.target);
         else if (this.download) {
-          const o = document.createElement("a");
-          o.href = this.href, o.download = this.href, document.body.appendChild(o), o.click(), document.body.removeChild(o);
+          const t = document.createElement("a");
+          t.href = this.href, t.download = this.href, document.body.appendChild(t), t.click(), document.body.removeChild(t);
         } else
           window.location.href = this.href;
     };
   }
   connectedCallback() {
-    super.connectedCallback(), this.ariaDisabled = this.as === "button" && this.disabled ? "true" : null, this.role = this.as;
-    const t = this.hasAttribute("tabindex") ? Number(this.getAttribute("tabindex")) : 0;
-    this.ariaDisabled !== "true" && (this.tabIndex = t), this.addEventListener("keydown", (o) => {
-      (o.key === "Enter" || o.key === " ") && this._handleClick();
+    super.connectedCallback(), this.role = this.as, this.addEventListener("keydown", (t) => {
+      (t.key === "Enter" || t.key === " ") && this._handleClick();
     }), this.addEventListener("click", this._handleClick);
   }
   _handleAsChange() {
     this.as === "button" ? this.setAttribute("type", "button") : this.removeAttribute("type");
   }
-  _handleStateChange(t, o, h) {
-    k(d(this, l), w[t]).set(h);
+  _handleDisabledChange() {
+    this.ariaDisabled = this.as === "button" && this.disabled ? "true" : null;
+    const t = this.hasAttribute("tabindex") ? Number(this.getAttribute("tabindex")) : 0;
+    this.ariaDisabled !== "true" && (this.tabIndex = t);
+  }
+  _handleStateChange(t, h, n) {
+    k(c(this, l), C[t]).set(n);
   }
   /** @internal */
   _renderIcon() {
-    const t = this.color === "inverse" ? "inverse" : "emphasised";
-    return _`<skf-icon color=${t} name=${x(this.icon)} size="sm"></skf-icon>`;
+    const t = this.color === "inverse" ? "inverse" : "emphasized";
+    return v`
+			<skf-icon
+				color=${t}
+				data-color=${this.disabled ? "custom" : m}
+				name=${D(this.icon)}
+				size="sm"
+			></skf-icon>
+		`;
   }
   render() {
-    return _`
+    return v`
 			<div id="root" part="root">
-				${this.icon && !this.iconRight ? this._renderIcon() : g}
+				${this.icon && !this.iconRight ? this._renderIcon() : m}
 				<slot></slot>
-				${this.icon && this.iconRight ? this._renderIcon() : g}
+				${this.icon && this.iconRight ? this._renderIcon() : m}
 			</div>
 		`;
   }
 };
-a = new WeakMap(), l = new WeakMap(), m.styles = [S, A];
-let r = m;
-s([
-  n({ type: String })
-], r.prototype, "as", 2);
-s([
-  n({ type: String })
-], r.prototype, "color", 2);
-s([
-  n({ type: Boolean })
-], r.prototype, "disabled", 2);
-s([
-  n({ type: Boolean })
-], r.prototype, "download", 2);
-s([
-  n({ type: String })
-], r.prototype, "href", 2);
-s([
-  n({ type: String })
-], r.prototype, "icon", 2);
-s([
-  n({ type: Boolean, attribute: "icon-right" })
-], r.prototype, "iconRight", 2);
-s([
-  n({ type: String })
-], r.prototype, "rel", 2);
-s([
-  n({ type: String })
-], r.prototype, "route", 2);
-s([
-  n({ type: Boolean })
-], r.prototype, "stretch", 2);
-s([
-  n({ type: String })
-], r.prototype, "target", 2);
-s([
-  v("as")
-], r.prototype, "_handleAsChange", 1);
-s([
-  v(Object.keys(w))
-], r.prototype, "_handleStateChange", 1);
+a = new WeakMap(), l = new WeakMap(), u.styles = [S, x];
+let o = u;
+r([
+  s({ type: String })
+], o.prototype, "as", 2);
+r([
+  s({ type: String })
+], o.prototype, "color", 2);
+r([
+  s({ type: Boolean })
+], o.prototype, "disabled", 2);
+r([
+  s({ type: Boolean })
+], o.prototype, "download", 2);
+r([
+  s({ type: String })
+], o.prototype, "href", 2);
+r([
+  s({ type: String })
+], o.prototype, "icon", 2);
+r([
+  s({ type: Boolean, attribute: "icon-right" })
+], o.prototype, "iconRight", 2);
+r([
+  s({ type: String })
+], o.prototype, "rel", 2);
+r([
+  s({ type: String })
+], o.prototype, "route", 2);
+r([
+  s({ type: Boolean })
+], o.prototype, "stretch", 2);
+r([
+  s({ type: String })
+], o.prototype, "target", 2);
+r([
+  b("as")
+], o.prototype, "_handleAsChange", 1);
+r([
+  b("disabled")
+], o.prototype, "_handleDisabledChange", 1);
+r([
+  b(Object.keys(C))
+], o.prototype, "_handleStateChange", 1);
 export {
-  r as SkfLink
+  o as SkfLink
 };

package/dist/components/link/link.styles.js

@@ -35,11 +35,15 @@ const e = o`
 				}
 			}
 
-			:host(:disabled) #root {
-				--_skf-link-color: var(--_skf-link-color-disabled);
+			:host([aria-disabled]) {
+				#root {
+					--_skf-link-color: var(--_skf-link-color-disabled);
+
+					cursor: not-allowed;
+				}
 			}
 
-			:host(:hover) #root {
+			:host(:not([aria-disabled]):hover) #root {
 				--_skf-link-color: var(--_skf-link-color-hover);
 			}
 		}

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

@@ -11,8 +11,6 @@ type Size = 'md' | 'sm';
 export declare class SkfLoader extends SkfElement {
     #private;
     static styles: CSSResultGroup;
-    /** Defines the aria-label */
-    ariaLabel: string;
     /** If true, inverts the color (to be used on colored backgrounds) */
     invert: boolean;
     /** Defines the size of the loader */

package/dist/components/loader/loader.component.js

@@ -1,37 +1,37 @@
-var y = (t) => {
+var f = (t) => {
   throw TypeError(t);
 };
-var b = (t, e, r) => e.has(t) || y("Cannot " + r);
-var m = (t, e, r) => (b(t, e, "read from private field"), r ? r.call(t) : e.get(t)), v = (t, e, r) => e.has(t) ? y("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), h = (t, e, r, i) => (b(t, e, "write to private field"), i ? i.call(t, r) : e.set(t, r), r);
-import { SkfElement as _ } from "../../internal/components/skf-element.js";
+var y = (t, e, r) => e.has(t) || f("Cannot " + r);
+var c = (t, e, r) => (y(t, e, "read from private field"), r ? r.call(t) : e.get(t)), m = (t, e, r) => e.has(t) ? f("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), v = (t, e, r, i) => (y(t, e, "write to private field"), i ? i.call(t, r) : e.set(t, r), r);
+import { SkfElement as b } from "../../internal/components/skf-element.js";
 import { stateMap as g } from "../../internal/helpers/stateMap.js";
 import { watch as C } from "../../internal/helpers/watch.js";
 import { componentStyles as O } from "../../styles/component.styles.js";
 import { html as P } from "lit";
-import { property as d } from "lit/decorators.js";
-import { styles as S } from "./loader.styles.js";
-var j = Object.defineProperty, w = Object.getOwnPropertyDescriptor, l = (t, e, r, i) => {
-  for (var s = i > 1 ? void 0 : i ? w(e, r) : e, n = t.length - 1, c; n >= 0; n--)
-    (c = t[n]) && (s = (i ? c(e, r, s) : c(s)) || s);
-  return i && s && j(e, r, s), s;
+import { property as _ } from "lit/decorators.js";
+import { styles as j } from "./loader.styles.js";
+var w = Object.defineProperty, z = Object.getOwnPropertyDescriptor, h = (t, e, r, i) => {
+  for (var s = i > 1 ? void 0 : i ? z(e, r) : e, n = t.length - 1, l; n >= 0; n--)
+    (l = t[n]) && (s = (i ? l(e, r, s) : l(s)) || s);
+  return i && s && w(e, r, s), s;
 };
 const u = {
   invert: "invert",
   size: ["md", "sm"]
 };
-var o, p;
-const f = class f extends _ {
+var a, p;
+const d = class d extends b {
   constructor() {
     super(...arguments);
-    v(this, o);
-    v(this, p);
-    h(this, o, this.attachInternals()), h(this, p, m(this, o).states), this.ariaLabel = "Loading...", this.invert = !1, this.size = "md";
+    m(this, a);
+    m(this, p);
+    v(this, a, this.attachInternals()), v(this, p, c(this, a).states), this.invert = !1, this.size = "md";
   }
   connectedCallback() {
     super.connectedCallback(), this.role = "progressbar", this.ariaLive = "polite";
   }
   _handleStateChange(r, i, s) {
-    g(m(this, p), u[r]).set(s);
+    g(c(this, p), u[r]).set(s);
   }
   render() {
     return P`
@@ -43,20 +43,17 @@ const f = class f extends _ {
 		`;
   }
 };
-o = new WeakMap(), p = new WeakMap(), f.styles = [O, S];
-let a = f;
-l([
-  d({ type: String, attribute: "aria-label" })
-], a.prototype, "ariaLabel", 2);
-l([
-  d({ type: Boolean })
-], a.prototype, "invert", 2);
-l([
-  d({ type: String })
-], a.prototype, "size", 2);
-l([
+a = new WeakMap(), p = new WeakMap(), d.styles = [O, j];
+let o = d;
+h([
+  _({ type: Boolean })
+], o.prototype, "invert", 2);
+h([
+  _({ type: String })
+], o.prototype, "size", 2);
+h([
   C(Object.keys(u))
-], a.prototype, "_handleStateChange", 1);
+], o.prototype, "_handleStateChange", 1);
 export {
-  a as SkfLoader
+  o as SkfLoader
 };

package/dist/components/loader/loader.styles.js

@@ -7,7 +7,7 @@ const o = a`
 			}
 
 			#root {
-				--_skf-loader-color: var(--skf-bg-color-emphasised);
+				--_skf-loader-color: var(--skf-bg-color-emphasized);
 				--_skf-loader-gap: var(--skf-spacing-50);
 				--_skf-loader-size: var(--skf-size-12);
 

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

@@ -1,5 +1,5 @@
 import { css as o } from "lit";
-const e = o`
+const r = o`
 	@layer components {
 		:host {
 			display: block;
@@ -7,16 +7,17 @@ const e = o`
 
 		#root {
 			block-size: var(--skf-size-44);
+			display: flex;
 			padding-inline: var(--skf-spacing-75);
+		}
+	}
 
-			@media screen and (any-hover: hover) {
-				&:hover {
-					background-color: var(--skf-color-blue-lighest);
-				}
-			}
+	@layer states {
+		:host(:not([aria-disabled]):hover) #root {
+			background-color: var(--skf-color-blue-lightest);
 		}
 	}
 `;
 export {
-  e as styles
+  r as styles
 };

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

@@ -11,16 +11,19 @@ import type { CSSResultGroup } from 'lit';
  * @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 menu
  * @attribute {string} anchor - The id of the element the menu will be anchored to
  *
+ * @property {(void) => void} open() - Method that opens the menu
+ * @property {(void) => void} close() - Method that closes the menu
+ *
  * @event {CustomEvent} skf-opened - Fired when the menu is opened
  * @event {CustomEvent} skf-closed - Fired when the menu is closed
  *
- * @slot - The menu popover content
+ * @slot - The menu content
  *
  * @tagname skf-menu
  */
 export declare class SkfMenu extends SkfPopoverBase {
     static styles: CSSResultGroup;
-    constructor();
+    connectedCallback(): void;
     /** @internal */
     addEventListeners($element: HTMLElement | Element): void;
 }

package/dist/components/menu/menu.component.js

@@ -1,16 +1,16 @@
 import { SkfPopoverBase as t } from "../../internal/base-classes/popover/popover.base.js";
-import { styles as r } from "./menu.styles.js";
-const s = class s extends t {
-  constructor() {
-    super(), this.placement = "bottom-start", this.role = "menu", this.triggerEvent = "click", this.variant = "menu", t.classMap = { menu: !0 };
+import { styles as a } from "./menu.styles.js";
+const e = class e extends t {
+  connectedCallback() {
+    super.connectedCallback(), this.placement = "bottom-start", this.role = "menu", this.triggerEvent = "click", this.variant = "menu", t.classMap = { menu: !0 };
   }
   /** @internal */
   addEventListeners(i) {
-    i.addEventListener(this.triggerEvent, this.open.bind(this), { signal: this.signal });
+    i.addEventListener(this.triggerEvent, this.open, { signal: this.signal });
   }
 };
-s.styles = [t.styles, r];
-let e = s;
+e.styles = [t.styles, a];
+let s = e;
 export {
-  e as SkfMenu
+  s as SkfMenu
 };

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

@@ -1,4 +1,5 @@
 import { SkfElement } from '../../internal/components/skf-element';
+import { type Language } from '../../utilities/localize.js';
 import { type CSSResultGroup } from 'lit';
 /**
  * The `<skf-nav>` is a component that displays a list of <nav-items>.
@@ -12,6 +13,8 @@ import { type CSSResultGroup } from 'lit';
 export declare class SkfNav extends SkfElement {
     #private;
     static styles: CSSResultGroup;
+    /** Sets the internal language of the component */
+    lang: Language;
     /** If true, the navigation will be displayed vertically */
     vertical: boolean;
     /** @internal */

package/dist/components/nav/nav.component.js

@@ -1,55 +1,60 @@
 var u = (t) => {
   throw TypeError(t);
 };
-var y = (t, e, r) => e.has(t) || u("Cannot " + r);
-var c = (t, e, r) => (y(t, e, "read from private field"), r ? r.call(t) : e.get(t)), m = (t, e, r) => e.has(t) ? u("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), h = (t, e, r, i) => (y(t, e, "write to private field"), i ? i.call(t, r) : e.set(t, r), r);
-import { SkfElement as _ } from "../../internal/components/skf-element.js";
-import { stateMap as d } from "../../internal/helpers/stateMap.js";
+var g = (t, e, r) => e.has(t) || u("Cannot " + r);
+var p = (t, e, r) => (g(t, e, "read from private field"), r ? r.call(t) : e.get(t)), c = (t, e, r) => e.has(t) ? u("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), m = (t, e, r, i) => (g(t, e, "write to private field"), i ? i.call(t, r) : e.set(t, r), r);
+import { SkfElement as d } from "../../internal/components/skf-element.js";
+import { stateMap as C } from "../../internal/helpers/stateMap.js";
 import { watch as b } from "../../internal/helpers/watch.js";
-import { componentStyles as g } from "../../styles/component.styles.js";
-import { html as C } from "lit";
-import { property as O, queryAssignedElements as P } from "lit/decorators.js";
-import { ifDefined as w } from "lit/directives/if-defined.js";
-import { styles as D } from "./nav.styles.js";
-var E = Object.defineProperty, j = Object.getOwnPropertyDescriptor, f = (t, e, r, i) => {
-  for (var s = i > 1 ? void 0 : i ? j(e, r) : e, n = t.length - 1, p; n >= 0; n--)
-    (p = t[n]) && (s = (i ? p(e, r, s) : p(s)) || s);
-  return i && s && E(e, r, s), s;
-}, o, l;
-const v = class v extends _ {
+import { componentStyles as w } from "../../styles/component.styles.js";
+import { LocalizeController as O } from "../../utilities/localize.js";
+import { html as P } from "lit";
+import { property as _, queryAssignedElements as D } from "lit/decorators.js";
+import { ifDefined as E } from "lit/directives/if-defined.js";
+import { styles as S } from "./nav.styles.js";
+var j = Object.defineProperty, x = Object.getOwnPropertyDescriptor, h = (t, e, r, i) => {
+  for (var o = i > 1 ? void 0 : i ? x(e, r) : e, f = t.length - 1, v; f >= 0; f--)
+    (v = t[f]) && (o = (i ? v(e, r, o) : v(o)) || o);
+  return i && o && j(e, r, o), o;
+}, a, l, n;
+const y = class y extends d {
   constructor() {
     super(...arguments);
-    m(this, o);
-    m(this, l);
-    h(this, o, this.attachInternals()), h(this, l, c(this, o).states), this.vertical = !1;
+    c(this, a);
+    c(this, l);
+    c(this, n);
+    m(this, a, new O(this)), m(this, l, this.attachInternals()), m(this, n, p(this, l).states), this.lang = "en", this.vertical = !1;
   }
   connectedCallback() {
-    super.connectedCallback(), this.ariaLabel = this.ariaLabel ?? "Main navigation", this.role = "navigation";
+    super.connectedCallback(), this.ariaLabel = p(this, a).term("mainNavigation"), this.role = "navigation";
   }
   _handleStateChange() {
-    d(c(this, l), "vertical").set(this.vertical), this._items.forEach((r) => {
+    C(p(this, n), "vertical").set(this.vertical), this._items.forEach((r) => {
       r.vertical = this.vertical;
     });
   }
   render() {
-    return C`
-			<ul aria-orientation=${w(this.vertical ? "vertical" : void 0)}>
+    return P`
+			<ul aria-orientation=${E(this.vertical ? "vertical" : void 0)}>
 				<slot></slot>
 			</ul>
 		`;
   }
 };
-o = new WeakMap(), l = new WeakMap(), v.styles = [g, D];
-let a = v;
-f([
-  O({ type: Boolean })
-], a.prototype, "vertical", 2);
-f([
-  P({ selector: "skf-nav-item" })
-], a.prototype, "_items", 2);
-f([
+a = new WeakMap(), l = new WeakMap(), n = new WeakMap(), y.styles = [w, S];
+let s = y;
+h([
+  _({ type: String })
+], s.prototype, "lang", 2);
+h([
+  _({ type: Boolean })
+], s.prototype, "vertical", 2);
+h([
+  D({ selector: "skf-nav-item" })
+], s.prototype, "_items", 2);
+h([
   b("vertical")
-], a.prototype, "_handleStateChange", 1);
+], s.prototype, "_handleStateChange", 1);
 export {
-  a as SkfNav
+  s as SkfNav
 };

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

@@ -9,10 +9,13 @@ import type { CSSResultGroup } from 'lit';
  * See [zeroheight](https://zeroheight.com/853e936c9/p/983e5d-popover) for design principles
  *
  * @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 popover
- * @attribute {string} anchor - The id of the element the menu will be anchored to
+ * @attribute {string} anchor - The id of the element the popover will be anchored to
  *
- * @event {CustomEvent} skf-opened - Fired when the menu is opened
- * @event {CustomEvent} skf-closed - Fired when the menu is closed
+ * @property {(void) => void} open() - Method that opens the popover
+ * @property {(void) => void} close() - Method that closes the popover
+ *
+ * @event {CustomEvent} skf-opened - Fired when the popover is opened
+ * @event {CustomEvent} skf-closed - Fired when the popover is closed
  *
  * @slot - The popover content
  *
@@ -28,9 +31,5 @@ export declare class SkfPopover extends SkfPopoverBase {
     /** @internal */
     hideArrowChanged(): void;
     /** @internal */
-    openExtended(): void;
-    /** @internal */
     addEventListeners($element: HTMLElement | Element): void;
-    /** @internal */
-    _checkClickOutside: (e: Event) => void;
 }

package/dist/components/popover/popover.component.js

@@ -1,43 +1,35 @@
-import { SkfPopoverBase as p } from "../../internal/base-classes/popover/popover.base.js";
-import { watch as l } from "../../internal/helpers/watch.js";
-import { property as c } from "lit/decorators.js";
+import { SkfPopoverBase as h } from "../../internal/base-classes/popover/popover.base.js";
+import { watch as d } from "../../internal/helpers/watch.js";
+import { property as f } from "lit/decorators.js";
 import { styles as w } from "./popover.styles.js";
-var f = Object.defineProperty, v = Object.getOwnPropertyDescriptor, n = (d, t, r, s) => {
-  for (var e = s > 1 ? void 0 : s ? v(t, r) : t, o = d.length - 1, h; o >= 0; o--)
-    (h = d[o]) && (e = (s ? h(t, r, e) : h(e)) || e);
-  return s && e && f(t, r, e), e;
+var c = Object.defineProperty, m = Object.getOwnPropertyDescriptor, a = (l, r, o, s) => {
+  for (var t = s > 1 ? void 0 : s ? m(r, o) : r, i = l.length - 1, p; i >= 0; i--)
+    (p = l[i]) && (t = (s ? p(r, o, t) : p(t)) || t);
+  return s && t && c(r, o, t), t;
 };
-const a = class a extends p {
+const n = class n extends h {
   constructor() {
-    super(), this.offset = 8, this.hideArrow = !1, this._checkClickOutside = (t) => {
-      this.isOpen && !this.contains(t.target) && this.close();
-    }, this.arrow = !this.hideArrow, this.placement = "bottom-start", this.triggerEvent = "click", this.variant = "popup", p.classMap = { popover: !0 };
+    super(), this.offset = 8, this.hideArrow = !1, this.arrow = !this.hideArrow, this.placement = "bottom-start", this.triggerEvent = "click", this.variant = "popup", h.classMap = { popover: !0 };
   }
   hideArrowChanged() {
     this.arrow = !this.hideArrow;
   }
   /** @internal */
-  openExtended() {
-    window.top && window.self !== window.top && window.top.addEventListener("click", this._checkClickOutside, {
-      signal: this.signal
-    });
-  }
-  /** @internal */
-  addEventListeners(t) {
-    t.addEventListener(this.triggerEvent, this.open.bind(this), { signal: this.signal });
+  addEventListeners(r) {
+    r.addEventListener(this.triggerEvent, this.open, { signal: this.signal });
   }
 };
-a.styles = [p.styles, w];
-let i = a;
-n([
-  c({ type: Number })
-], i.prototype, "offset", 2);
-n([
-  c({ type: Boolean })
-], i.prototype, "hideArrow", 2);
-n([
-  l("hideArrow")
-], i.prototype, "hideArrowChanged", 1);
+n.styles = [h.styles, w];
+let e = n;
+a([
+  f({ type: Number })
+], e.prototype, "offset", 2);
+a([
+  f({ type: Boolean })
+], e.prototype, "hideArrow", 2);
+a([
+  d("hideArrow")
+], e.prototype, "hideArrowChanged", 1);
 export {
-  i as SkfPopover
+  e as SkfPopover
 };

package/dist/components/progress/progress.styles.js

@@ -1,5 +1,5 @@
 import { css as r } from "lit";
-const s = r`
+const a = r`
 	@layer components {
 		@layer base {
 			#root {
@@ -11,7 +11,7 @@ const s = r`
 				overflow: hidden;
 
 				&::after {
-					background-color: var(--skf-bg-color-emphasised);
+					background-color: var(--skf-bg-color-emphasized);
 					block-size: inherit;
 					border-radius: inherit;
 					content: '';
@@ -51,5 +51,5 @@ const s = r`
 	}
 `;
 export {
-  s as styles
+  a as styles
 };