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

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

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

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

@@ -33,17 +33,13 @@ const o = a`
 		}
 
 		@layer mods {
-			:host([invert]) {
-				#root {
-					--_skf-loader-color: var(--skf-bg-color-neutral-1);
-				}
+			:host(:state(invert)) #root {
+				--_skf-loader-color: var(--skf-bg-color-neutral-1);
 			}
 
-			:host([size='sm']) {
-				#root {
-					--_skf-loader-gap: var(--skf-spacing-25);
-					--_skf-loader-size: var(--skf-size-4);
-				}
+			:host(:state(sm)) #root {
+				--_skf-loader-gap: var(--skf-spacing-25);
+				--_skf-loader-size: var(--skf-size-4);
 			}
 		}
 	}

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

@@ -9,5 +9,5 @@ import { type CSSResultGroup } from 'lit';
  */
 export declare class SkfMenuItem extends SkfLink {
     static styles: CSSResultGroup;
-    constructor();
+    connectedCallback(): void;
 }

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

@@ -1,13 +1,13 @@
-import { SkfLink as s } from "../link/link.component.js";
+import { SkfLink as t } from "../link/link.component.js";
 import "lit";
-import { styles as e } from "./menu-item.styles.js";
-const t = class t extends s {
-  constructor() {
-    super(), this.role = "menuitem", s.classMap = { "menu-item": !0 };
+import { styles as l } from "./menu-item.styles.js";
+const s = class s extends t {
+  connectedCallback() {
+    super.connectedCallback(), this.role = "menuitem";
   }
 };
-t.styles = [s.styles, e];
-let r = t;
+s.styles = [t.styles, l];
+let e = s;
 export {
-  r as SkfMenuItem
+  e as SkfMenuItem
 };

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

@@ -1,9 +1,12 @@
-import { css as e } from "lit";
-const s = e`
+import { css as o } from "lit";
+const e = o`
 	@layer components {
-		.menu-item {
+		:host {
+			display: block;
+		}
+
+		#root {
 			block-size: var(--skf-size-44);
-			display: flex;
 			padding-inline: var(--skf-spacing-75);
 
 			@media screen and (any-hover: hover) {
@@ -15,5 +18,5 @@ const s = e`
 	}
 `;
 export {
-  s as styles
+  e as styles
 };

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

@@ -10,9 +10,13 @@ import { type CSSResultGroup } from 'lit';
  * @tagname skf-nav-item
  */
 export declare class SkfNavItem extends SkfElement {
+    #private;
     static styles: CSSResultGroup;
     href: string;
     icon?: Icon;
+    vertical: boolean;
     connectedCallback(): void;
+    /** @internal */
+    _handleStateChange(): void;
     render(): import("lit").TemplateResult<1>;
 }

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

@@ -1,38 +1,57 @@
-import "../link/link.js";
-import { SkfElement as m } from "../../internal/components/skf-element.js";
-import { componentStyles as c } from "../../styles/component.styles.js";
-import { html as h } from "lit";
-import { property as f } from "lit/decorators.js";
-import { ifDefined as u } from "lit/directives/if-defined.js";
-import { styles as a } from "./nav-item.styles.js";
-var d = Object.defineProperty, p = (i, s, n, y) => {
-  for (var r = void 0, t = i.length - 1, l; t >= 0; t--)
-    (l = i[t]) && (r = l(s, n, r) || r);
-  return r && d(s, n, r), r;
+var y = (t) => {
+  throw TypeError(t);
 };
-const o = class o extends m {
+var u = (t, e, r) => e.has(t) || y("Cannot " + r);
+var h = (t, e, r) => (u(t, e, "read from private field"), r ? r.call(t) : e.get(t)), f = (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), m = (t, e, r, s) => (u(t, e, "write to private field"), s ? s.call(t, r) : e.set(t, r), r);
+import "../link/link.js";
+import { SkfElement as d } 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 b } from "../../styles/component.styles.js";
+import { html as O } from "lit";
+import { property as _, state as P } from "lit/decorators.js";
+import { ifDefined as S } from "lit/directives/if-defined.js";
+import { styles as w } from "./nav-item.styles.js";
+var D = Object.defineProperty, j = Object.getOwnPropertyDescriptor, l = (t, e, r, s) => {
+  for (var o = s > 1 ? void 0 : s ? j(e, r) : e, a = t.length - 1, c; a >= 0; a--)
+    (c = t[a]) && (o = (s ? c(e, r, o) : c(o)) || o);
+  return s && o && D(e, r, o), o;
+}, n, p;
+const v = class v extends d {
   constructor() {
-    super(...arguments), this.href = "#";
+    super(...arguments);
+    f(this, n);
+    f(this, p);
+    m(this, n, this.attachInternals()), m(this, p, h(this, n).states), this.href = "", this.vertical = !1;
   }
   connectedCallback() {
-    super.connectedCallback(), this.role = "menuitem";
+    super.connectedCallback(), this.role = "listitem";
+  }
+  _handleStateChange() {
+    g(h(this, p), "vertical").set(this.vertical);
   }
   render() {
-    return h`
-			<skf-link color="inverse" href=${this.href} icon=${u(this.icon)}>
+    return O`
+			<skf-link color="inverse" href=${this.href} icon=${S(this.icon)}>
 				<slot></slot>
 			</skf-link>
 		`;
   }
 };
-o.styles = [c, a];
-let e = o;
-p([
-  f({ reflect: !0 })
-], e.prototype, "href");
-p([
-  f()
-], e.prototype, "icon");
+n = new WeakMap(), p = new WeakMap(), v.styles = [b, w];
+let i = v;
+l([
+  _({ type: String })
+], i.prototype, "href", 2);
+l([
+  _({ type: String })
+], i.prototype, "icon", 2);
+l([
+  P()
+], i.prototype, "vertical", 2);
+l([
+  C("vertical")
+], i.prototype, "_handleStateChange", 1);
 export {
-  e as SkfNavItem
+  i as SkfNavItem
 };

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

@@ -1,36 +1,40 @@
 import { css as t } from "lit";
 const s = t`
 	@layer components {
-		skf-link::part(root) {
-			block-size: var(--skf-header-height);
-			display: flex;
-			padding-inline: var(--skf-spacing-100);
-			position: relative;
-		}
+		@layer base {
+			skf-link::part(root) {
+				block-size: var(--skf-header-height);
+				display: flex;
+				padding-inline: var(--skf-spacing-100);
+				position: relative;
+			}
 
-		skf-link::part(root)::after {
-			content: '';
-			position: absolute;
-			transition: translate calc(var(--skf-motion-duration-fast) * 1ms)
-				var(--skf-motion-easing-ease-in);
-		}
+			skf-link::part(root)::after {
+				content: '';
+				position: absolute;
+				transition: translate calc(var(--skf-motion-duration-fast) * 1ms)
+					var(--skf-motion-easing-ease-in);
+			}
 
-		skf-link::part(root):hover::after {
-			--_skf-nav-link-translate: 0;
-		}
+			skf-link::part(root):hover::after {
+				--_skf-nav-link-translate: 0;
+			}
 
-		:host-context(skf-nav:not([vertical])) skf-link::part(root)::after {
-			border-bottom: var(--skf-size-4) solid var(--skf-border-color-inverse);
-			inset-block-end: 0;
-			inset-inline: 0;
-			translate: 0 var(--_skf-nav-link-translate, 100%);
+			:host(:not(:state(vertical))) skf-link::part(root)::after {
+				border-bottom: var(--skf-size-4) solid var(--skf-border-color-inverse);
+				inset-block-end: 0;
+				inset-inline: 0;
+				translate: 0 var(--_skf-nav-link-translate, 100%);
+			}
 		}
 
-		:host-context(skf-nav[vertical]) skf-link::part(root)::after {
-			border-left: var(--skf-size-4) solid var(--skf-border-color-inverse);
-			inset-block: 0;
-			inset-inline-start: 0;
-			translate: var(--_skf-nav-link-translate, -100%) 0;
+		@layer mods {
+			:host(:state(vertical)) skf-link::part(root)::after {
+				border-left: var(--skf-size-4) solid var(--skf-border-color-inverse);
+				inset-block: 0;
+				inset-inline-start: 0;
+				translate: var(--_skf-nav-link-translate, -100%) 0;
+			}
 		}
 	}
 `;

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

@@ -10,8 +10,14 @@ import { type CSSResultGroup } from 'lit';
  * @tagname skf-nav
  */
 export declare class SkfNav extends SkfElement {
+    #private;
     static styles: CSSResultGroup;
+    /** If true, the navigation will be displayed vertically */
     vertical: boolean;
+    /** @internal */
+    private _items;
     connectedCallback(): void;
+    /** @internal */
+    _handleStateChange(): void;
     render(): import("lit").TemplateResult<1>;
 }

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

@@ -1,34 +1,55 @@
-import { SkfElement as s } from "../../internal/components/skf-element.js";
-import { componentStyles as m } from "../../styles/component.styles.js";
-import { html as p } from "lit";
-import { property as c } from "lit/decorators.js";
-import { ifDefined as f } from "lit/directives/if-defined.js";
-import { styles as u } from "./nav.styles.js";
-var v = Object.defineProperty, d = (i, a, l, h) => {
-  for (var e = void 0, r = i.length - 1, n; r >= 0; r--)
-    (n = i[r]) && (e = n(a, l, e) || e);
-  return e && v(a, l, e), e;
+var u = (t) => {
+  throw TypeError(t);
 };
-const o = class o extends s {
+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";
+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 _ {
   constructor() {
-    super(...arguments), this.vertical = !1;
+    super(...arguments);
+    m(this, o);
+    m(this, l);
+    h(this, o, this.attachInternals()), h(this, l, c(this, o).states), this.vertical = !1;
   }
   connectedCallback() {
-    super.connectedCallback(), this.ariaLabel = this.ariaLabel ?? "Main navigation", this.role = "nav";
+    super.connectedCallback(), this.ariaLabel = this.ariaLabel ?? "Main navigation", this.role = "navigation";
+  }
+  _handleStateChange() {
+    d(c(this, l), "vertical").set(this.vertical), this._items.forEach((r) => {
+      r.vertical = this.vertical;
+    });
   }
   render() {
-    return p`
-			<ul aria-orientation=${f(this.vertical ? "vertical" : void 0)} role="menubar">
+    return C`
+			<ul aria-orientation=${w(this.vertical ? "vertical" : void 0)}>
 				<slot></slot>
 			</ul>
 		`;
   }
 };
-o.styles = [m, u];
-let t = o;
-d([
-  c({ type: Boolean, reflect: !0 })
-], t.prototype, "vertical");
+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([
+  b("vertical")
+], a.prototype, "_handleStateChange", 1);
 export {
-  t as SkfNav
+  a as SkfNav
 };

package/dist/components/nav/nav.styles.js

@@ -1,17 +1,23 @@
 import { css as t } from "lit";
-const e = t`
-	:host(:not([vertical])) {
-		width: fit-content;
-	}
+const o = t`
+	@layer components {
+		@layer base {
+			:host(:not(:state(vertical))) {
+				width: fit-content;
+			}
 
-	ul {
-		display: flex;
+			ul {
+				display: flex;
+			}
+		}
 
-		:host([vertical]) & {
-			flex-direction: column;
+		@layer mods {
+			:host(:state(vertical)) ul {
+				flex-direction: column;
+			}
 		}
 	}
 `;
 export {
-  e as styles
+  o as styles
 };

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

@@ -28,5 +28,9 @@ 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,35 +1,43 @@
-import { SkfPopoverBase as h } from "../../internal/base-classes/popover/popover.base.js";
-import { watch as f } from "../../internal/helpers/watch.js";
-import { property as d } from "lit/decorators.js";
+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 { styles as w } from "./popover.styles.js";
-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;
+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;
 };
-const n = class n extends h {
+const a = class a extends p {
   constructor() {
-    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 };
+    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 };
   }
   hideArrowChanged() {
     this.arrow = !this.hideArrow;
   }
   /** @internal */
-  addEventListeners(r) {
-    r.addEventListener(this.triggerEvent, this.open.bind(this), { signal: this.signal });
+  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 });
   }
 };
-n.styles = [h.styles, w];
-let e = n;
-a([
-  d({ type: Number })
-], e.prototype, "offset", 2);
-a([
-  d({ type: Boolean })
-], e.prototype, "hideArrow", 2);
-a([
-  f("hideArrow")
-], e.prototype, "hideArrowChanged", 1);
+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);
 export {
-  e as SkfPopover
+  i as SkfPopover
 };

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

@@ -18,5 +18,7 @@ export declare class SkfProgress extends SkfElement {
     /** Specifies how much of the task that has been completed */
     value: number;
     connectedCallback(): void;
+    /** @internal */
+    _handleStateChange(): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/components/progress/progress.component.js

@@ -1,43 +1,52 @@
-var u = (t) => {
+var v = (t) => {
   throw TypeError(t);
 };
-var d = (t, e, r) => e.has(t) || u("Cannot " + r);
-var h = (t, e, r) => (d(t, e, "read from private field"), r ? r.call(t) : e.get(t)), f = (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), v = (t, e, r, l) => (d(t, e, "write to private field"), l ? l.call(t, r) : e.set(t, r), r);
-import { SkfElement as y } from "../../internal/components/skf-element.js";
-import { componentStyles as b } from "../../styles/component.styles.js";
-import { html as x } from "lit";
-import { property as n } from "lit/decorators.js";
-import { styles as C } from "./progress.styles.js";
-var _ = Object.defineProperty, m = (t, e, r, l) => {
-  for (var s = void 0, p = t.length - 1, c; p >= 0; p--)
-    (c = t[p]) && (s = c(e, r, s) || s);
-  return s && _(e, r, s), s;
-}, a;
-const i = class i extends y {
+var y = (t, e, r) => e.has(t) || v("Cannot " + r);
+var c = (t, e, r) => (y(t, e, "read from private field"), r ? r.call(t) : e.get(t)), u = (t, e, r) => e.has(t) ? v("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), d = (t, e, r, a) => (y(t, e, "write to private field"), a ? a.call(t, r) : e.set(t, r), r);
+import { SkfElement as b } from "../../internal/components/skf-element.js";
+import { stateMap as _ } from "../../internal/helpers/stateMap.js";
+import { watch as x } from "../../internal/helpers/watch.js";
+import { componentStyles as C } from "../../styles/component.styles.js";
+import { html as O } from "lit";
+import { property as f } from "lit/decorators.js";
+import { styles as g } from "./progress.styles.js";
+var w = Object.defineProperty, j = Object.getOwnPropertyDescriptor, n = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? j(e, r) : e, l = t.length - 1, h; l >= 0; l--)
+    (h = t[l]) && (s = (a ? h(e, r, s) : h(s)) || s);
+  return a && s && w(e, r, s), s;
+}, i, p;
+const m = class m extends b {
   constructor() {
     super(...arguments);
-    f(this, a);
-    v(this, a, this.attachInternals()), this.animated = !1, this.max = 1, this.value = 0;
+    u(this, i);
+    u(this, p);
+    d(this, i, this.attachInternals()), d(this, p, c(this, i).states), this.animated = !1, this.max = 1, this.value = 0;
   }
   connectedCallback() {
-    super.connectedCallback(), h(this, a).role = "progressbar";
+    super.connectedCallback(), this.role = "progressbar";
+  }
+  _handleStateChange() {
+    _(c(this, p), "animated").set(this.animated);
   }
   render() {
     const r = this.value / this.max * 100;
-    return x`<div id="root" style="--_skf-progress-value: ${r}%"></div>`;
+    return O`<div id="root" style="--_skf-progress-value: ${r}%"></div>`;
   }
 };
-a = new WeakMap(), i.styles = [b, C], i.formAssociated = !0;
-let o = i;
-m([
-  n({ type: Boolean, reflect: !0 })
-], o.prototype, "animated");
-m([
-  n({ type: Number })
-], o.prototype, "max");
-m([
-  n({ type: Number })
-], o.prototype, "value");
+i = new WeakMap(), p = new WeakMap(), m.styles = [C, g], m.formAssociated = !0;
+let o = m;
+n([
+  f({ type: Boolean })
+], o.prototype, "animated", 2);
+n([
+  f({ type: Number })
+], o.prototype, "max", 2);
+n([
+  f({ type: Number })
+], o.prototype, "value", 2);
+n([
+  x("animated")
+], o.prototype, "_handleStateChange", 1);
 export {
   o as SkfProgress
 };