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

package/dist/components/input/input.component.js

@@ -2,22 +2,23 @@ import "../icon/icon.js";
 import { FormBase as b } from "../../internal/components/formBase.js";
 import "../../internal/components/hint/hint.js";
 import { hintSeverity as v } from "../../internal/helpers/hintSeverity.js";
-import { Asterisk as y } from "../../internal/templates/asterisk.js";
-import f from "../../styles/component.styles.js";
-import { html as h, nothing as d } from "lit";
-import { property as e, state as c, query as _, queryAssignedNodes as $ } from "lit/decorators.js";
+import { watch as y } from "../../internal/helpers/watch.js";
+import { Asterisk as f } from "../../internal/templates/asterisk.js";
+import _ from "../../styles/component.styles.js";
+import { html as h, nothing as u } from "lit";
+import { property as i, state as c, query as $, queryAssignedNodes as g } from "lit/decorators.js";
 import { ifDefined as n } from "lit/directives/if-defined.js";
-import { live as g } from "lit/directives/live.js";
-import { InputNumberController as w, InputPasswordController as E } from "./input.controllers.js";
+import { live as w } from "lit/directives/live.js";
+import { InputNumberController as E, InputPasswordController as C } from "./input.controllers.js";
 import A from "./input.styles.js";
-var C = Object.defineProperty, S = Object.getOwnPropertyDescriptor, i = (m, s, r, a) => {
-  for (var o = a > 1 ? void 0 : a ? S(s, r) : s, l = m.length - 1, u; l >= 0; l--)
-    (u = m[l]) && (o = (a ? u(s, r, o) : u(o)) || o);
-  return a && o && C(s, r, o), o;
+var S = Object.defineProperty, L = Object.getOwnPropertyDescriptor, e = (m, s, r, a) => {
+  for (var o = a > 1 ? void 0 : a ? L(s, r) : s, l = m.length - 1, d; l >= 0; l--)
+    (d = m[l]) && (o = (a ? d(s, r, o) : d(o)) || o);
+  return a && o && S(s, r, o), o;
 };
 const p = class p extends b {
   constructor() {
-    super(...arguments), this.buttonAriaLabelClear = "Clear input", this.buttonAriaLabelHide = "Hide password", this.buttonAriaLabelShow = "Show password", this.inputmode = "text", this.size = "md", this.type = "text", this.validateOn = "change", this.value = "", this.invalid = !1, this._buttonDown = !1, this._numberController = new w(this), this._passwordController = new E(this), this._handleInput = () => {
+    super(...arguments), this.buttonAriaLabelClear = "Clear input", this.buttonAriaLabelHide = "Hide password", this.buttonAriaLabelShow = "Show password", this.inputmode = "text", this.size = "md", this.type = "text", this.validateOn = "change", this.value = "", this.invalid = !1, this._buttonDown = !1, this._numberController = new E(this), this._passwordController = new C(this), this._handleInput = () => {
       this.value = this.$input.value || "", this.validateOn === "input" && (this._pristine = !1, this.validateInput());
     }, this._resetValue = (s) => {
       var r;
@@ -70,7 +71,7 @@ const p = class p extends b {
     };
   }
   set customInvalid(s) {
-    this.customError = s || "";
+    this.customError = s ?? "";
   }
   get customInvalid() {
     return this.customError;
@@ -91,6 +92,9 @@ const p = class p extends b {
       } else
         this.removeAttribute("invalid"), !this._pristine && this.showValid && this.setAttribute("valid", "true"), this.hint = this.getAttribute("hint") ?? "";
   }
+  valueChanged() {
+    this._internals.setFormValue(this.value), this.validateInput();
+  }
   attributeChangedCallback(s, r, a) {
     if (super.attributeChangedCallback(s, r, a), s === "value" && this._internals.setFormValue(a), s === "custom-invalid")
       if (typeof a == "string") {
@@ -131,10 +135,10 @@ const p = class p extends b {
 				<label>
 					<div class=${this.hideLabel ? "visually-hidden" : ""} ?hidden=${s} id="label">
 						<slot>${this.label}</slot>
-						${this.required ? y(this.requiredLabel) : null}
+						${this.required ? f(this.requiredLabel) : null}
 					</div>
 					<div id="input">
-						${this.type === "search" ? h`<skf-icon class="skf-icon-host" name="search" size="sm"></skf-icon>` : d}
+						${this.type === "search" ? h`<skf-icon class="skf-icon-host" name="search" size="sm"></skf-icon>` : u}
 						<div
 							data-leading=${n(this.leading)}
 							data-trailing=${n(this.trailing)}
@@ -144,12 +148,12 @@ const p = class p extends b {
 								?disabled=${this.disabled}
 								?readonly=${this.readonly}
 								?required=${this.required}
-								.value=${g(this.value)}
+								.value=${w(this.value)}
 								@blur=${this._onBlur}
 								@input=${this._handleInput}
 								autocomplete=${this.autocomplete}
-								aria-describedby=${n((o = this.hint) != null && o.trim() ? "hint" : d)}
-								aria-errormessage=${n((l = this.hint) != null && l.trim() ? "hint" : d)}
+								aria-describedby=${n((o = this.hint) != null && o.trim() ? "hint" : u)}
+								aria-errormessage=${n((l = this.hint) != null && l.trim() ? "hint" : u)}
 								aria-invalid=${!!this.invalid}
 								autocomplete="off"
 								data-testid="field-input"
@@ -170,9 +174,9 @@ const p = class p extends b {
 									<div id="action">
 										${this._renderNumberButton("inc")} ${this._renderNumberButton("dec")}
 									</div>
-								` : d}
-						${this.type === "password" ? this._renderPasswordButton() : d}
-						${this.type === "search" && this.value.length > 0 ? this._renderSearchButton() : d}
+								` : u}
+						${this.type === "password" ? this._renderPasswordButton() : u}
+						${this.type === "search" && this.value.length > 0 ? this._renderSearchButton() : u}
 					</div>
 				</label>
 				${this.hint && h`
@@ -180,108 +184,111 @@ const p = class p extends b {
 						aria-live=${this.invalid ? "assertive" : "polite"}
 						id="hint"
 						severity=${n(v(this.severity, this.invalid))}
-						>${this.customInvalid ? this.customInvalid : this.hint}
+						>${this.customInvalid ?? this.hint}
 					</skf-hint>
 				`}
 			</div>
 		`;
   }
 };
-p.styles = [f, A];
+p.styles = [_, A];
 let t = p;
-i([
-  e({ type: String })
+e([
+  i({ type: String })
 ], t.prototype, "autocomplete", 2);
-i([
-  e({ attribute: "button-aria-label-clear" })
+e([
+  i({ attribute: "button-aria-label-clear" })
 ], t.prototype, "buttonAriaLabelClear", 2);
-i([
-  e({ attribute: "button-aria-label-hide" })
+e([
+  i({ attribute: "button-aria-label-hide" })
 ], t.prototype, "buttonAriaLabelHide", 2);
-i([
-  e({ attribute: "button-aria-label-show" })
+e([
+  i({ attribute: "button-aria-label-show" })
 ], t.prototype, "buttonAriaLabelShow", 2);
-i([
-  e({ attribute: "custom-invalid", reflect: !0 })
+e([
+  i({ attribute: "custom-invalid", reflect: !0 })
 ], t.prototype, "customInvalid", 1);
-i([
-  e({ type: Boolean })
+e([
+  i({ type: Boolean })
 ], t.prototype, "debug", 2);
-i([
-  e({ type: Boolean, attribute: "hide-label" })
+e([
+  i({ type: Boolean, attribute: "hide-label" })
 ], t.prototype, "hideLabel", 2);
-i([
-  e()
+e([
+  i()
 ], t.prototype, "hint", 2);
-i([
-  e({ type: String })
+e([
+  i({ type: String })
 ], t.prototype, "inputmode", 2);
-i([
-  e()
+e([
+  i()
 ], t.prototype, "label", 2);
-i([
-  e()
+e([
+  i()
 ], t.prototype, "leading", 2);
-i([
-  e()
+e([
+  i()
 ], t.prototype, "max", 2);
-i([
-  e({ type: Number, attribute: "maxlength" })
+e([
+  i({ type: Number, attribute: "maxlength" })
 ], t.prototype, "maxLength", 2);
-i([
-  e()
+e([
+  i()
 ], t.prototype, "min", 2);
-i([
-  e({ type: Number, attribute: "minlength" })
+e([
+  i({ type: Number, attribute: "minlength" })
 ], t.prototype, "minLength", 2);
-i([
-  e()
+e([
+  i({ reflect: !0 })
 ], t.prototype, "name", 2);
-i([
-  e()
+e([
+  i()
 ], t.prototype, "pattern", 2);
-i([
-  e()
+e([
+  i()
 ], t.prototype, "placeholder", 2);
-i([
-  e({ type: Boolean })
+e([
+  i({ type: Boolean })
 ], t.prototype, "readonly", 2);
-i([
-  e({ attribute: "required-label" })
+e([
+  i({ attribute: "required-label" })
 ], t.prototype, "requiredLabel", 2);
-i([
-  e({ reflect: !0 })
+e([
+  i({ reflect: !0 })
 ], t.prototype, "severity", 2);
-i([
-  e({ type: Boolean, attribute: "show-valid" })
+e([
+  i({ type: Boolean, attribute: "show-valid" })
 ], t.prototype, "showValid", 2);
-i([
-  e({ reflect: !0 })
+e([
+  i({ reflect: !0 })
 ], t.prototype, "size", 2);
-i([
-  e()
+e([
+  i()
 ], t.prototype, "trailing", 2);
-i([
-  e()
+e([
+  i()
 ], t.prototype, "type", 2);
-i([
-  e({ type: String, attribute: "validate-on" })
+e([
+  i({ type: String, attribute: "validate-on" })
 ], t.prototype, "validateOn", 2);
-i([
-  e()
+e([
+  i({ reflect: !0 })
 ], t.prototype, "value", 2);
-i([
+e([
   c()
 ], t.prototype, "invalid", 2);
-i([
+e([
   c()
 ], t.prototype, "_buttonDown", 2);
-i([
-  _("input")
+e([
+  $("input")
 ], t.prototype, "$input", 2);
-i([
-  $({ flatten: !0 })
+e([
+  g({ flatten: !0 })
 ], t.prototype, "_defaultSlot", 2);
+e([
+  y("value", { waitUntilFirstUpdate: !0, afterUpdate: !0 })
+], t.prototype, "valueChanged", 1);
 export {
   t as SkfInput
 };

package/dist/components/input/input.controllers.d.ts

@@ -1,17 +1,31 @@
 import type { Icon } from '@skf-design-system/ui-assets';
-import type { ReactiveController } from 'lit';
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
 import type { SkfInput } from './input.component.js';
-type InputControllerHost = SkfInput;
+/**
+ * Workaround for storybook helper not being able to import types
+ * E.g type ControllerHost = SkfInput;
+ */
+interface ControllerHostProps {
+    $input?: HTMLInputElement;
+    _internals: ElementInternals;
+    value: string;
+    validateInput: () => void;
+    buttonAriaLabelShow: string;
+    buttonAriaLabelHide: string;
+    _handleInput: () => void;
+    _manageRequired: () => void;
+    _setFormValue: (value: string) => void;
+}
 /**
  * Number
  */
 export type IncrementDecrement = 'inc' | 'dec';
 export declare class InputNumberController implements ReactiveController {
-    host: InputControllerHost;
+    host?: ReactiveControllerHost & Partial<ControllerHostProps>;
     private _longPressId?;
     private _repeaterId?;
     private _inputElement?;
-    constructor(host: InputControllerHost);
+    constructor(host: ReactiveControllerHost);
     hostUpdated(): void;
     handleActionBtnClick: (_: Event, type: IncrementDecrement) => void;
     handleActionBtnLongPressStart: (e: Event) => void;
@@ -21,12 +35,12 @@ export declare class InputNumberController implements ReactiveController {
  * password
  */
 export declare class InputPasswordController implements ReactiveController {
-    host: InputControllerHost;
+    host?: ReactiveControllerHost & Partial<ControllerHostProps>;
     _inputElement?: HTMLInputElement;
     _icon: Extract<Icon, 'visibility' | 'visibilityOff'>;
     _buttonAriaLabel: string;
     _type: Extract<SkfInput['type'], 'password' | 'text'>;
-    constructor(host: InputControllerHost);
+    constructor(host: ReactiveControllerHost);
     hostUpdated(): void;
     handleFieldLoaded: () => void;
     toggleVisibility: () => void;

package/dist/components/input/input.controllers.js

@@ -1,9 +1,9 @@
 class l {
   constructor(t) {
     this.handleActionBtnClick = (i, s) => {
-      var n;
+      var h, n;
       const e = this._inputElement;
-      e && (s === "inc" ? e.stepUp() : e.stepDown(), this.host.value = ((n = this._inputElement) == null ? void 0 : n.value) ?? "", this.host._internals.setFormValue(this.host.value), this.host.validateInput());
+      !e || !this.host || (s === "inc" ? e.stepUp() : e.stepDown(), this.host.value = ((h = this._inputElement) == null ? void 0 : h.value) ?? "", (n = this.host._internals) == null || n.setFormValue(this.host.value), this.host.validateInput && this.host.validateInput());
     }, this.handleActionBtnLongPressStart = (i) => {
       const s = i.target.getAttribute("aria-label") === "Increment" ? "inc" : "dec";
       this._longPressId = setTimeout(() => {
@@ -13,25 +13,29 @@ class l {
       }, 400);
     }, this.handleActionBtnLongPressEnd = () => {
       clearTimeout(this._longPressId), clearInterval(this._repeaterId);
-    }, this.host = t, t.addController(this);
+    }, (this.host = t).addController(this);
   }
   hostUpdated() {
-    this._inputElement = this.host.$input;
+    var t;
+    this._inputElement = (t = this.host) == null ? void 0 : t.$input;
   }
 }
-class o {
+class a {
   constructor(t) {
     this._icon = "visibility", this._type = "password", this.handleFieldLoaded = () => {
-      this._inputElement && (this.host.value = this._inputElement.value, this.host._handleInput());
+      var i;
+      !this._inputElement || !((i = this.host) != null && i._handleInput) || (this.host.value = this._inputElement.value, this.host._handleInput());
     }, this.toggleVisibility = () => {
-      this._inputElement && (this.host._handleInput(), this._type === "text" ? (this._buttonAriaLabel = this.host.buttonAriaLabelShow, this._icon = "visibility", this._type = "password") : (this._buttonAriaLabel = this.host.buttonAriaLabelHide, this._icon = "visibilityOff", this._type = "text"), this.host.requestUpdate(), this._inputElement.value = this.host.value);
-    }, this.host = t, t.addController(this), this._buttonAriaLabel = this.host.buttonAriaLabelShow;
+      var i;
+      !this._inputElement || !((i = this.host) != null && i._handleInput) || (this.host._handleInput(), this._type === "text" ? (this._buttonAriaLabel = this.host.buttonAriaLabelShow ?? "", this._icon = "visibility", this._type = "password") : (this._buttonAriaLabel = this.host.buttonAriaLabelHide ?? "", this._icon = "visibilityOff", this._type = "text"), this.host.requestUpdate(), this._inputElement.value = this.host.value ?? "");
+    }, (this.host = t).addController(this), this._buttonAriaLabel = this.host.buttonAriaLabelShow ?? "";
   }
   hostUpdated() {
-    this._inputElement = this.host.$input;
+    var t;
+    this._inputElement = (t = this.host) == null ? void 0 : t.$input;
   }
 }
 export {
   l as InputNumberController,
-  o as InputPasswordController
+  a as InputPasswordController
 };

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

@@ -1,18 +1,18 @@
 import "../icon/icon.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 y from "./link.styles.js";
+import { SkfElement as d } from "../../internal/components/skf-element.js";
+import u 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 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;
+import { html as f, literal as m } from "lit/static-html.js";
+var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, o = (h, t, i, l) => {
+  for (var n = l > 1 ? void 0 : l ? g(t, i) : t, p = h.length - 1, a; p >= 0; p--)
+    (a = h[p]) && (n = (l ? a(t, i, n) : a(n)) || n);
+  return l && n && v(t, i, n), n;
 }, s;
-const e = (s = class extends m {
+const e = (s = class extends d {
   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 e = (s = class extends m {
   set onClick(t) {
     if (!t) return;
     this._onClick = t;
-    const o = (l) => {
+    const i = (l) => {
       t(l, this.href ?? this.route);
     };
-    this._assertValidOnClick(t), this.removeEventListener("click", o), this.addEventListener("click", o);
+    this._assertValidOnClick(t), this.removeEventListener("click", i), this.addEventListener("click", i);
   }
   get onClick() {
     return this._onClick;
@@ -52,9 +52,9 @@ const e = (s = class extends m {
 		`;
   }
   render() {
-    const t = this.as === "a", o = t ? d`a` : d`button`;
+    const t = this.as === "a", i = t ? m`a` : m`button`;
     return f`
-			<${o}
+			<${i}
 				?disabled=${c(t ? void 0 : this.disabled)}
 				@click=${this._preprocessOnClick}
 				class=${k({
@@ -67,53 +67,54 @@ const e = (s = class extends m {
     })}
         		download=${c(t ? this.download : void 0)}
 				href=${c(t ? this.href : void 0)}
+				part="root"
 				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>
-			</${o}>
+			</${i}>
 		`;
   }
-}, s.styles = [y, u], s.classMap = {}, s);
-i([
+}, s.styles = [u, y], s.classMap = {}, s);
+o([
   r({ type: String, reflect: !0 })
 ], e.prototype, "as", 2);
-i([
+o([
   r({ type: String, reflect: !0 })
 ], e.prototype, "color", 2);
-i([
+o([
   r({ type: Boolean, reflect: !0 })
 ], e.prototype, "disabled", 2);
-i([
+o([
   r({ type: String })
 ], e.prototype, "download", 2);
-i([
+o([
   r({ type: String })
 ], e.prototype, "href", 2);
-i([
+o([
   r({ type: String })
 ], e.prototype, "icon", 2);
-i([
+o([
   r({ attribute: "icon-placement", reflect: !0 })
 ], e.prototype, "iconPlacement", 2);
-i([
+o([
   r()
 ], e.prototype, "rel", 2);
-i([
+o([
   r({ reflect: !0 })
 ], e.prototype, "route", 2);
-i([
+o([
   r({ type: Boolean, reflect: !0 })
 ], e.prototype, "stretch", 2);
-i([
+o([
   r()
 ], e.prototype, "target", 2);
-i([
+o([
   r()
 ], e.prototype, "type", 2);
-i([
+o([
   r({ attribute: !1 })
 ], e.prototype, "onClick", 1);
 let E = e;

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

@@ -1,53 +1,57 @@
 import { css as r } from "lit";
-const o = r`
+const i = r`
 	/* stylelint-disable selector-class-pattern */
 	@layer components {
+		:host {
+			contain: layout;
+			display: inline;
+		}
+
 		.link {
 			align-items: center;
-			color: var(--state-color, var(--color));
+			color: var(--_skf-link-state-color, var(--_skf-link-color));
 			display: inline-flex;
-			flex-direction: var(--flex-direction, rows);
 			font-weight: var(--skf-font-weight-bold);
-			gap: var(--skf-spacing-50);
-			justify-content: flex-start;
+			gap: 0 var(--skf-spacing-25);
+			vertical-align: top;
 
 			&:is(a) {
 				text-decoration: none;
 			}
 
 			&:disabled {
-				--state-color: var(--color-disabled);
+				--_skf-link-state-color: var(--_skf-link-color-disabled);
 			}
 
 			&:hover {
-				--state-color: var(--color-hover);
+				--_skf-link-state-color: var(--_skf-link-color-hover);
 			}
 
 			&:focus-visible {
 				border-radius: var(--skf-border-radius-sm);
-				outline: var(--skf-border-width-md) solid var(--outline-color);
+				outline: var(--skf-border-width-md) solid var(--_skf-link-outline-color);
 				outline-offset: var(--skf-size-2);
 			}
 		}
 
 		.link--color-primary {
-			--color: var(--skf-interactive-text-color-primary);
-			--color-active: var(--skf-interactive-text-color-primary-active);
-			--color-disabled: var(--skf-interactive-text-color-disabled);
-			--color-hover: var(--skf-interactive-text-color-primary-hover);
-			--outline-color: var(--skf-interactive-text-color-primary);
+			--_skf-link-color: var(--skf-interactive-text-color-primary);
+			--_skf-link-color-active: var(--skf-interactive-text-color-primary-active);
+			--_skf-link-color-disabled: var(--skf-interactive-text-color-disabled);
+			--_skf-link-color-hover: var(--skf-interactive-text-color-primary-hover);
+			--_skf-link-outline-color: var(--skf-interactive-text-color-primary);
 		}
 
 		.link--color-inverse {
-			--color: var(--skf-interactive-text-color-inverse);
-			--color-active: var(--skf-interactive-text-color-inverse-active);
-			--color-disabled: var(--skf-interactive-text-color-disabled);
-			--color-hover: var(--skf-interactive-text-color-inverse-hover);
-			--outline-color: var(--skf-interactive-text-color-inverse);
+			--_skf-link-color: var(--skf-interactive-text-color-inverse);
+			--_skf-link-color-active: var(--skf-interactive-text-color-inverse-active);
+			--_skf-link-color-disabled: var(--skf-interactive-text-color-disabled);
+			--_skf-link-color-hover: var(--skf-interactive-text-color-inverse-hover);
+			--_skf-link-outline-color: var(--skf-interactive-text-color-inverse);
 		}
 
 		.link--icon-right {
-			--flex-direction: row-reverse;
+			flex-direction: row-reverse;
 		}
 
 		.link--stretch {
@@ -56,5 +60,5 @@ const o = r`
 	}
 `;
 export {
-  o as default
+  i as default
 };

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

@@ -1,24 +1,24 @@
-var v = (e) => {
-  throw TypeError(e);
+var v = (r) => {
+  throw TypeError(r);
 };
-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);
+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);
 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 p } from "lit/decorators.js";
+import { property as n } from "lit/decorators.js";
 import { classMap as g } from "lit/directives/class-map.js";
 import z from "./loader.styles.js";
-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;
+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;
 }, s;
-const c = class c extends y {
+const d = class d extends y {
   constructor() {
     super();
     h(this, s);
-    this.ariaLabel = "Loading...", this.invert = !1, this.size = "md", u(this, s, this.attachInternals()), n(this, s).role = "progressbar", n(this, s).ariaLive = "polite";
+    this.ariaLabel = "Loading...", this.invert = !1, this.size = "md", u(this, s, this.attachInternals()), p(this, s).role = "progressbar", p(this, s).ariaLive = "polite";
   }
   render() {
     return b`
@@ -36,16 +36,16 @@ const c = class c extends y {
 		`;
   }
 };
-s = new WeakMap(), c.styles = [_, z];
-let l = c;
-d([
-  p({ reflect: !0, attribute: "aria-label" })
+s = new WeakMap(), d.styles = [_, z];
+let l = d;
+c([
+  n({ reflect: !0, attribute: "aria-label" })
 ], l.prototype, "ariaLabel");
-d([
-  p({ type: Boolean })
+c([
+  n({ type: Boolean })
 ], l.prototype, "invert");
-d([
-  p({ type: String, reflect: !0 })
+c([
+  n({ type: String, reflect: !0 })
 ], l.prototype, "size");
 export {
   l as SkfLoader