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

package/dist/components/dialog/dialog.component.js

@@ -1,8 +1,8 @@
-var _ = (t) => {
-  throw TypeError(t);
+var _ = (o) => {
+  throw TypeError(o);
 };
-var w = (t, e, o) => e.has(t) || _("Cannot " + o);
-var f = (t, e, o) => (w(t, e, "read from private field"), o ? o.call(t) : e.get(t)), g = (t, e, o) => e.has(t) ? _("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, o), h = (t, e, o, a) => (w(t, e, "write to private field"), a ? a.call(t, o) : e.set(t, o), o);
+var w = (o, e, t) => e.has(o) || _("Cannot " + t);
+var f = (o, e, t) => (w(o, e, "read from private field"), t ? t.call(o) : e.get(o)), g = (o, e, t) => e.has(o) ? _("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(o) : e.set(o, t), h = (o, e, t, a) => (w(o, e, "write to private field"), a ? a.call(o, t) : e.set(o, t), t);
 import "../button/button.js";
 import "../heading/heading.js";
 import "../icon/icon.js";
@@ -13,10 +13,10 @@ import { html as b, nothing as k } from "lit";
 import { property as c, state as m, query as P, queryAssignedElements as M } from "lit/decorators.js";
 import { classMap as $ } from "lit/directives/class-map.js";
 import { styles as O } from "./dialog.styles.js";
-var A = Object.defineProperty, E = Object.getOwnPropertyDescriptor, i = (t, e, o, a) => {
-  for (var n = a > 1 ? void 0 : a ? E(e, o) : e, l = t.length - 1, r; l >= 0; l--)
-    (r = t[l]) && (n = (a ? r(e, o, n) : r(n)) || n);
-  return a && n && A(e, o, n), n;
+var A = Object.defineProperty, E = Object.getOwnPropertyDescriptor, i = (o, e, t, a) => {
+  for (var n = a > 1 ? void 0 : a ? E(e, t) : e, l = o.length - 1, r; l >= 0; l--)
+    (r = o[l]) && (n = (a ? r(e, t, n) : r(n)) || n);
+  return a && n && A(e, t, n), n;
 }, p, u, d;
 const y = class y extends v {
   constructor() {
@@ -24,19 +24,19 @@ const y = class y extends v {
     g(this, p);
     g(this, u);
     g(this, d);
-    h(this, p, 0), h(this, u, 20), h(this, d, !1), this.fullscreen = !1, this.noCloseButton = !1, this.noPadding = !1, this.onClose = null, this.modal = !0, this.renderFoot = !1, this.show = async () => await this.showModal(), this._handleBackdropClick = (o) => {
-      this._isModal || o.target !== this.$dialog || this.close();
-    }, this._handleClose = (o) => {
-      console.log("Handle close reached"), this.onClose && this.onClose(o), this.close();
+    h(this, p, 0), h(this, u, 20), h(this, d, !1), this.fullscreen = !1, this.noCloseButton = !1, this.noPadding = !1, this.onClose = null, this.modal = !0, this.renderFoot = !1, this.show = async () => await this.showModal(), this._handleBackdropClick = (t) => {
+      this._isModal || t.target !== this.$dialog || this.close();
+    }, this._handleClose = (t) => {
+      console.log("Handle close reached"), this.onClose && this.onClose(t), this.close();
     }, this.showModal = async () => await (async () => (console.log("%cmodal ->", "color: red", this.modal), this.$dialog.showModal(), await this._transition().entry(), this.emit("skf-dialog-open"), !0))(), this.close = async () => (console.log("close reached"), f(this, d) ? void 0 : (h(this, d, !0), await (async () => (this.emit("skf-dialog-close"), await this._transition().exit(), this.$dialog.close(), this.open = !1, h(this, d, !1), !0))()));
   }
   firstUpdated() {
-    this.$dialog.addEventListener("close", (o) => {
-      o.stopPropagation(), console.log("close event detected 1", o), this.emit("close");
+    this.$dialog.addEventListener("close", (t) => {
+      t.stopPropagation(), console.log("close event detected 1", t), this.emit("close");
     });
   }
   handleOpenChange() {
-    var o;
+    var t;
     switch (!0) {
       case (this.open === !0 && !!this.modal):
         this.showModal();
@@ -48,11 +48,11 @@ const y = class y extends v {
         this.close();
         break;
     }
-    this.open && (this.renderFoot = !!((o = this.footerEls) != null && o.length));
+    this.open && (this.renderFoot = !!((t = this.footerEls) != null && t.length));
   }
   /** @internal */
   _transition() {
-    const o = this.fullscreen ? {} : {
+    const t = this.fullscreen ? {} : {
       translate: `${String(f(this, p))} ${String(f(this, u))}px`
     };
     return { entry: () => new Promise((l) => {
@@ -60,7 +60,7 @@ const y = class y extends v {
         [
           {
             opacity: 0,
-            ...o
+            ...t
           },
           { opacity: 1, translate: "0 0" }
         ],
@@ -83,7 +83,7 @@ const y = class y extends v {
           { opacity: 1, translate: "0 0" },
           {
             opacity: 0,
-            ...o
+            ...t
           }
         ],
         {
@@ -119,9 +119,7 @@ const y = class y extends v {
     })}
 			>
 				<div class="dialog__head">
-					<h2 class="dialog__heading">
-						<slot name="heading"></slot>
-					</h2>
+					<h2 class="dialog__heading">${this.heading}</h2>
 					${this.noCloseButton ? k : b`
 								<button
 									@click=${this._handleClose}
@@ -137,7 +135,7 @@ const y = class y extends v {
 					<slot
 						class=${$({
       dialog__foot: !0,
-      "dialog__foot-hidden": !this.renderFoot
+      "dialog__foot--hidden": !this.renderFoot
     })}
 						name="footer"
 					></slot>

package/dist/components/divider/divider.component.js

@@ -1,20 +1,20 @@
-var h = (r) => {
+var v = (r) => {
   throw TypeError(r);
 };
-var m = (r, e, t) => e.has(r) || h("Cannot " + t);
-var c = (r, e, t) => (m(r, e, "read from private field"), t ? t.call(r) : e.get(r)), f = (r, e, t) => e.has(r) ? h("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(r) : e.set(r, t), y = (r, e, t, a) => (m(r, e, "write to private field"), a ? a.call(r, t) : e.set(r, t), t);
+var m = (r, e, t) => e.has(r) || v("Cannot " + t);
+var c = (r, e, t) => (m(r, e, "read from private field"), t ? t.call(r) : e.get(r)), f = (r, e, t) => e.has(r) ? v("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(r) : e.set(r, t), y = (r, e, t, a) => (m(r, e, "write to private field"), a ? a.call(r, t) : e.set(r, t), t);
 import { SkfElement as u } from "../../internal/components/skf-element.js";
 import b from "../../styles/component.styles.js";
 import { html as C } from "lit";
 import { property as n } from "lit/decorators.js";
 import { classMap as _ } from "lit/directives/class-map.js";
 import { styles as x } from "./divider.styles.js";
-var B = Object.defineProperty, p = (r, e, t, a) => {
-  for (var o = void 0, l = r.length - 1, v; l >= 0; l--)
-    (v = r[l]) && (o = v(e, t, o) || o);
+var B = Object.defineProperty, d = (r, e, t, a) => {
+  for (var o = void 0, l = r.length - 1, h; l >= 0; l--)
+    (h = r[l]) && (o = h(e, t, o) || o);
   return o && B(e, t, o), o;
 }, i;
-const d = class d extends u {
+const p = class p extends u {
   constructor() {
     super();
     f(this, i);
@@ -38,15 +38,15 @@ const d = class d extends u {
 		`;
   }
 };
-i = new WeakMap(), d.styles = [b, x];
-let s = d;
-p([
+i = new WeakMap(), p.styles = [b, x];
+let s = p;
+d([
   n({ reflect: !0 })
 ], s.prototype, "color");
-p([
+d([
   n({ type: Boolean })
 ], s.prototype, "decorative");
-p([
+d([
   n({ type: Boolean, reflect: !0 })
 ], s.prototype, "vertical");
 export {

package/dist/components/heading/heading.component.js

@@ -1,15 +1,15 @@
-import { SkfElement as n } from "../../internal/components/skf-element.js";
+import { SkfElement as f } from "../../internal/components/skf-element.js";
 import u from "../../styles/component.styles.js";
 import "lit";
-import { property as a } from "lit/decorators.js";
+import { property as n } from "lit/decorators.js";
 import { html as y, unsafeStatic as l } from "lit/static-html.js";
 import c from "./heading.styles.js";
-var h = Object.defineProperty, f = (o, p, i, d) => {
-  for (var t = void 0, s = o.length - 1, m; s >= 0; s--)
-    (m = o[s]) && (t = m(p, i, t) || t);
-  return t && h(p, i, t), t;
+var d = Object.defineProperty, a = (o, p, i, h) => {
+  for (var t = void 0, e = o.length - 1, m; e >= 0; e--)
+    (m = o[e]) && (t = m(p, i, t) || t);
+  return t && d(p, i, t), t;
 };
-const e = class e extends n {
+const s = class s extends f {
   constructor() {
     super(...arguments), this.as = "h1";
   }
@@ -21,13 +21,13 @@ const e = class e extends n {
 		`;
   }
 };
-e.styles = [u, c];
-let r = e;
-f([
-  a({ reflect: !0 })
+s.styles = [u, c];
+let r = s;
+a([
+  n({ reflect: !0 })
 ], r.prototype, "as");
-f([
-  a({ attribute: "styled-as" })
+a([
+  n({ attribute: "styled-as" })
 ], r.prototype, "styledAs");
 export {
   r as SkfHeading

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

@@ -10,7 +10,6 @@ import { type CSSResultGroup } from 'lit';
  */
 export declare class SkfIcon extends SkfElement {
     static styles: CSSResultGroup;
-    private _rootId;
     /**
      * Sets the color of the icon
      * @type { "primary" | "inverse" | "emphasised" | "secondary" | "success" | "info" | "warning" | "error" | "alert" }
@@ -27,8 +26,6 @@ export declare class SkfIcon extends SkfElement {
      * Size of the icon
      * @type { "xs" | "sm" | "md" | "lg" }
      */
-    size?: IconSize;
-    private renderDecorativeIcon;
-    private renderInformativeIcon;
+    size: IconSize;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/components/icon/icon.component.js

@@ -1,42 +1,51 @@
 import { SkfElement as f } from "../../internal/components/skf-element.js";
 import { ICONS as d } from "@skf-design-system/ui-assets";
-import h from "../../styles/component.styles.js";
-import { html as l } from "lit";
+import u from "../../styles/component.styles.js";
+import { html as c } from "lit";
 import { property as t } from "lit/decorators.js";
-import { ifDefined as c } from "lit/directives/if-defined.js";
-import { when as v } from "lit/directives/when.js";
-import u from "./icon.styles.js";
-var y = Object.defineProperty, o = (m, n, p, I) => {
-  for (var r = void 0, i = m.length - 1, a; i >= 0; i--)
-    (a = m[i]) && (r = a(n, p, r) || r);
-  return r && y(n, p, r), r;
+import { classMap as h } from "lit/directives/class-map.js";
+import { ifDefined as s } from "lit/directives/if-defined.js";
+import y from "./icon.styles.js";
+var $ = Object.defineProperty, o = (m, p, n, b) => {
+  for (var e = void 0, i = m.length - 1, a; i >= 0; i--)
+    (a = m[i]) && (e = a(p, n, e) || e);
+  return e && $(p, n, e), e;
 };
-const s = class s extends f {
+const l = class l extends f {
   constructor() {
-    super(...arguments), this._rootId = "root", this.color = "primary", this.size = "md", this.renderDecorativeIcon = () => l`
-		<div aria-hidden="true" id=${this._rootId}>${d[this.name]}</div>
-	`, this.renderInformativeIcon = () => l`
-		<div aria-label=${c(this.label)} id=${this._rootId} role="img">${d[this.name]}</div>
-	`;
+    super(...arguments), this.color = "primary", this.size = "md";
   }
   render() {
-    return v(!!this.label, this.renderInformativeIcon, this.renderDecorativeIcon);
+    return c`
+			<div
+				aria-hidden=${s(this.label ? void 0 : "true")}
+				aria-label=${s(this.label)}
+				class=${h({
+      icon: !0,
+      [`icon--color-${this.color}`]: !0,
+      [`icon--size-${this.size}`]: !0
+    })}
+				role=${s(this.label ? "img" : void 0)}
+			>
+				${d[this.name]}
+			</div>
+		`;
   }
 };
-s.styles = [h, u];
-let e = s;
+l.styles = [u, y];
+let r = l;
 o([
   t({ reflect: !0 })
-], e.prototype, "color");
+], r.prototype, "color");
 o([
   t()
-], e.prototype, "label");
+], r.prototype, "label");
 o([
   t()
-], e.prototype, "name");
+], r.prototype, "name");
 o([
   t({ reflect: !0 })
-], e.prototype, "size");
+], r.prototype, "size");
 export {
-  e as SkfIcon
+  r as SkfIcon
 };

package/dist/components/icon/icon.styles.js

@@ -1,78 +1,84 @@
 import { css as o } from "lit";
-const r = o`
+const i = o`
+	/* stylelint-disable selector-class-pattern */
 	@layer components {
 		:host {
 			display: inline-flex;
 		}
 
-		#root {
-			--_skf-icon-size: var(--skf-icon-size-md);
+		:host-context(.skf-icon-host) {
+			color: inherit;
+		}
 
+		.icon {
 			block-size: var(--_skf-icon-size);
-			color: var(--_skf-icon-color, var(--skf-icon-color-primary));
 			display: inline-flex;
 			flex-shrink: 0; /* Prevents shrink when flex-child */
 			inline-size: var(--_skf-icon-size);
 			pointer-events: none;
 			user-select: none;
 
-			:host-context(.skf-icon-host) & {
-				color: inherit;
+			:not(:host-context(.skf-icon-host)) & {
+				color: var(--_skf-icon-color, var(--skf-icon-color-primary));
 			}
+		}
 
-			/**
-			 * Colors
-			 */
-			:host([color='secondary']) & {
-				--_skf-icon-color: var(--skf-icon-color-secondary);
-			}
+		/**
+		 * Colors
+		 */
+		.icon--color-secondary {
+			--_skf-icon-color: var(--skf-icon-color-secondary);
+		}
 
-			:host([color='inverse']) & {
-				--_skf-icon-color: var(--skf-icon-color-inverse);
-			}
+		.icon--color-inverse {
+			--_skf-icon-color: var(--skf-icon-color-inverse);
+		}
 
-			:host([color='emphasised']) & {
-				--_skf-icon-color: var(--skf-icon-color-emphasised);
-			}
+		.icon--color-emphasised {
+			--_skf-icon-color: var(--skf-icon-color-emphasised);
+		}
 
-			/* Severity */
-			:host([color='alert']) & {
-				--_skf-icon-color: var(--skf-severity-fg-color-alert);
-			}
+		/* Severity */
+		.icon--color-alert {
+			--_skf-icon-color: var(--skf-severity-fg-color-alert);
+		}
 
-			:host([color='error']) & {
-				--_skf-icon-color: var(--skf-severity-fg-color-error);
-			}
+		.icon--color-error {
+			--_skf-icon-color: var(--skf-severity-fg-color-error);
+		}
 
-			:host([color='info']) & {
-				--_skf-icon-color: var(--skf-severity-fg-color-info);
-			}
+		.icon--color-info {
+			--_skf-icon-color: var(--skf-severity-fg-color-info);
+		}
 
-			:host([color='success']) & {
-				--_skf-icon-color: var(--skf-severity-fg-color-success);
-			}
+		.icon--color-success {
+			--_skf-icon-color: var(--skf-severity-fg-color-success);
+		}
 
-			:host([color='warning']) & {
-				--_skf-icon-color: var(--skf-severity-fg-color-warning);
-			}
+		.icon--color-warning {
+			--_skf-icon-color: var(--skf-severity-fg-color-warning);
+		}
 
-			/**
-			 * Sizes
-			 */
-			:host([size='xs']) & {
-				--_skf-icon-size: var(--skf-icon-size-xs);
-			}
+		/**
+		 * Sizes
+		 */
+		.icon--size-xs {
+			--_skf-icon-size: var(--skf-icon-size-xs);
+		}
 
-			:host([size='sm']) & {
-				--_skf-icon-size: var(--skf-icon-size-sm);
-			}
+		.icon--size-sm {
+			--_skf-icon-size: var(--skf-icon-size-sm);
+		}
 
-			:host([size='lg']) & {
-				--_skf-icon-size: var(--skf-icon-size-lg);
-			}
+		.icon--size-md {
+			--_skf-icon-size: var(--skf-icon-size-md);
+		}
+
+		.icon--size-lg {
+			--_skf-icon-size: var(--skf-icon-size-lg);
 		}
 	}
 `;
 export {
-  r as default
+  i as default
 };

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

@@ -15,6 +15,7 @@ import { type CSSResultGroup } from 'lit';
  */
 export declare class SkfLink extends SkfElement {
     static styles: CSSResultGroup;
+    static classMap: {};
     private _onClick?;
     /** Defines the semantic element to render */
     as: 'button' | 'a';

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

@@ -1,18 +1,18 @@
 import "../icon/icon.js";
-import y from "./link.styles.js";
-import { SkfElement as d } from "../../internal/components/skf-element.js";
-import u from "../../styles/component.styles.js";
+import u from "./link.styles.js";
+import { SkfElement as m } from "../../internal/components/skf-element.js";
+import y from "../../styles/component.styles.js";
 import "lit";
 import { property as r } from "lit/decorators.js";
 import { classMap as k } from "lit/directives/class-map.js";
-import { ifDefined as n } from "lit/directives/if-defined.js";
-import { html as f, literal as m } from "lit/static-html.js";
-var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, o = (h, t, i, c) => {
-  for (var s = c > 1 ? void 0 : c ? g(t, i) : t, l = h.length - 1, p; l >= 0; l--)
-    (p = h[l]) && (s = (c ? p(t, i, s) : p(s)) || s);
-  return c && s && v(t, i, s), s;
-};
-const a = class a extends d {
+import { ifDefined as c } from "lit/directives/if-defined.js";
+import { html as f, literal as d } from "lit/static-html.js";
+var g = Object.defineProperty, b = Object.getOwnPropertyDescriptor, i = (h, t, o, l) => {
+  for (var n = l > 1 ? void 0 : l ? b(t, o) : t, p = h.length - 1, a; p >= 0; p--)
+    (a = h[p]) && (n = (l ? a(t, o, n) : a(n)) || n);
+  return l && n && g(t, o, n), n;
+}, s;
+const e = (s = class extends m {
   constructor() {
     super(...arguments), this.as = "a", this.color = "primary", this.iconPlacement = "left", this.stretch = !1, this.type = "button", this._preprocessOnClick = (t) => {
       this.as === "a" && this.onClick && t.preventDefault(), t.stopPropagation(), this.emit("click");
@@ -21,10 +21,10 @@ const a = class a extends d {
   set onClick(t) {
     if (!t) return;
     this._onClick = t;
-    const i = (c) => {
-      t(c, this.href ?? this.route);
+    const o = (l) => {
+      t(l, this.href ?? this.route);
     };
-    this._assertValidOnClick(t), this.removeEventListener("click", i), this.addEventListener("click", i);
+    this._assertValidOnClick(t), this.removeEventListener("click", o), this.addEventListener("click", o);
   }
   get onClick() {
     return this._onClick;
@@ -48,75 +48,75 @@ const a = class a extends d {
       inverse: "inverse"
     });
     return f`
-			<skf-icon color=${t[this.color]} name=${n(this.icon)} size="sm"></skf-icon>
+			<skf-icon color=${t[this.color]} name=${c(this.icon)} size="sm"></skf-icon>
 		`;
   }
   render() {
-    const t = this.as === "a", i = t ? m`a` : m`button`;
+    const t = this.as === "a", o = t ? d`a` : d`button`;
     return f`
-			<${i}
-				?disabled=${n(t ? void 0 : this.disabled)}
+			<${o}
+				?disabled=${c(t ? void 0 : this.disabled)}
 				@click=${this._preprocessOnClick}
 				class=${k({
       link: !0,
       "link--color-inverse": this.color === "inverse",
       "link--color-primary": this.color === "primary",
       "link--icon-right": this.iconPlacement === "right",
-      "link--stretch": this.stretch
+      "link--stretch": this.stretch,
+      ...s.classMap
     })}
-        		download=${n(t ? this.download : void 0)}
-				href=${n(t ? this.href : void 0)}
-				rel=${n(t ? this.rel : void 0)}
-				target=${n(t ? this.target : void 0)}
-				type=${n(t ? void 0 : this.type)}
+        		download=${c(t ? this.download : void 0)}
+				href=${c(t ? this.href : void 0)}
+				rel=${c(t ? this.rel : void 0)}
+				target=${c(t ? this.target : void 0)}
+				type=${c(t ? void 0 : this.type)}
 			>
 				${this.icon && this._renderIcon()}
 				<slot>Default link text</slot>
-			</${i}>
+			</${o}>
 		`;
   }
-};
-a.styles = [u, y];
-let e = a;
-o([
+}, s.styles = [y, u], s.classMap = {}, s);
+i([
   r({ type: String, reflect: !0 })
 ], e.prototype, "as", 2);
-o([
+i([
   r({ type: String, reflect: !0 })
 ], e.prototype, "color", 2);
-o([
+i([
   r({ type: Boolean, reflect: !0 })
 ], e.prototype, "disabled", 2);
-o([
+i([
   r({ type: String })
 ], e.prototype, "download", 2);
-o([
+i([
   r({ type: String })
 ], e.prototype, "href", 2);
-o([
+i([
   r({ type: String })
 ], e.prototype, "icon", 2);
-o([
+i([
   r({ attribute: "icon-placement", reflect: !0 })
 ], e.prototype, "iconPlacement", 2);
-o([
+i([
   r()
 ], e.prototype, "rel", 2);
-o([
+i([
   r({ reflect: !0 })
 ], e.prototype, "route", 2);
-o([
+i([
   r({ type: Boolean, reflect: !0 })
 ], e.prototype, "stretch", 2);
-o([
+i([
   r()
 ], e.prototype, "target", 2);
-o([
+i([
   r()
 ], e.prototype, "type", 2);
-o([
+i([
   r({ attribute: !1 })
 ], e.prototype, "onClick", 1);
+let E = e;
 export {
-  e as SkfLink
+  E as SkfLink
 };

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

@@ -1,24 +1,24 @@
-var v = (r) => {
-  throw TypeError(r);
+var v = (e) => {
+  throw TypeError(e);
 };
-var f = (r, e, t) => e.has(r) || v("Cannot " + t);
-var p = (r, e, t) => (f(r, e, "read from private field"), t ? t.call(r) : e.get(r)), h = (r, e, t) => e.has(r) ? v("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(r) : e.set(r, t), u = (r, e, t, a) => (f(r, e, "write to private field"), a ? a.call(r, t) : e.set(r, t), t);
+var f = (e, r, t) => r.has(e) || v("Cannot " + t);
+var n = (e, r, t) => (f(e, r, "read from private field"), t ? t.call(e) : r.get(e)), h = (e, r, t) => r.has(e) ? v("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(e) : r.set(e, t), u = (e, r, t, a) => (f(e, r, "write to private field"), a ? a.call(e, t) : r.set(e, t), t);
 import { SkfElement as y } from "../../internal/components/skf-element.js";
 import _ from "../../styles/component.styles.js";
 import { html as b } from "lit";
-import { property as n } from "lit/decorators.js";
+import { property as p } from "lit/decorators.js";
 import { classMap as g } from "lit/directives/class-map.js";
 import z from "./loader.styles.js";
-var x = Object.defineProperty, c = (r, e, t, a) => {
-  for (var i = void 0, o = r.length - 1, m; o >= 0; o--)
-    (m = r[o]) && (i = m(e, t, i) || i);
-  return i && x(e, t, i), i;
+var x = Object.defineProperty, d = (e, r, t, a) => {
+  for (var i = void 0, o = e.length - 1, m; o >= 0; o--)
+    (m = e[o]) && (i = m(r, t, i) || i);
+  return i && x(r, t, i), i;
 }, s;
-const d = class d extends y {
+const c = class c extends y {
   constructor() {
     super();
     h(this, s);
-    this.ariaLabel = "Loading...", this.invert = !1, this.size = "md", u(this, s, this.attachInternals()), p(this, s).role = "progressbar", p(this, s).ariaLive = "polite";
+    this.ariaLabel = "Loading...", this.invert = !1, this.size = "md", u(this, s, this.attachInternals()), n(this, s).role = "progressbar", n(this, s).ariaLive = "polite";
   }
   render() {
     return b`
@@ -36,16 +36,16 @@ const d = class d extends y {
 		`;
   }
 };
-s = new WeakMap(), d.styles = [_, z];
-let l = d;
-c([
-  n({ reflect: !0, attribute: "aria-label" })
+s = new WeakMap(), c.styles = [_, z];
+let l = c;
+d([
+  p({ reflect: !0, attribute: "aria-label" })
 ], l.prototype, "ariaLabel");
-c([
-  n({ type: Boolean })
+d([
+  p({ type: Boolean })
 ], l.prototype, "invert");
-c([
-  n({ type: String, reflect: !0 })
+d([
+  p({ type: String, reflect: !0 })
 ], l.prototype, "size");
 export {
   l as SkfLoader