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

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

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

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

@@ -105,6 +105,7 @@ export declare class SkfInput extends FormBase implements FormFieldBaseProps {
     private _passwordController;
     protected firstUpdated(): void;
     willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
+    valueChanged(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     /** @internal */
     _handleInput: () => void;

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;
@@ -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), console.log("updated internals", this.$input.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`
@@ -187,101 +191,104 @@ const p = class p extends b {
 		`;
   }
 };
-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/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({
@@ -73,47 +73,47 @@ const e = (s = class extends m {
 			>
 				${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/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

package/dist/components/logo/logo.component.js

@@ -1,20 +1,20 @@
 import { SkfElement as i } from "../../internal/components/skf-element.js";
-import n from "../../styles/component.styles.js";
-import { html as m } from "lit";
+import m from "../../styles/component.styles.js";
+import { html as n } from "lit";
 import { property as p } from "lit/decorators.js";
 import { classMap as a } from "lit/directives/class-map.js";
 import { styles as d } from "./logo.styles.js";
-var f = Object.defineProperty, v = (e, l, s, g) => {
+var g = Object.defineProperty, v = (e, l, s, y) => {
   for (var c = void 0, r = e.length - 1, h; r >= 0; r--)
     (h = e[r]) && (c = h(l, s, c) || c);
-  return c && f(l, s, c), c;
+  return c && g(l, s, c), c;
 };
 const o = class o extends i {
   constructor() {
     super(...arguments), this.title = "SKF logotype", this.color = "primary";
   }
   render() {
-    return m`
+    return n`
 			<svg
 				class=${a({
       logo: !0,
@@ -66,7 +66,7 @@ c0,5.8-4.3,6.1-9.1,6.1H1230.9z"
 		`;
   }
 };
-o.styles = [n, d];
+o.styles = [m, d];
 let t = o;
 v([
   p()

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

@@ -1,15 +1,15 @@
-import { SkfPopoverBase as n } from "../../internal/base-classes/popover/popover.base.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 l = Object.defineProperty, v = Object.getOwnPropertyDescriptor, h = (m, e, o, s) => {
-  for (var r = s > 1 ? void 0 : s ? v(e, o) : e, i = m.length - 1, p; i >= 0; i--)
-    (p = m[i]) && (r = (s ? p(e, o, r) : p(r)) || r);
-  return s && r && l(e, o, r), r;
+import { styles as v } from "./popover.styles.js";
+var w = Object.defineProperty, l = Object.getOwnPropertyDescriptor, n = (m, e, s, o) => {
+  for (var r = o > 1 ? void 0 : o ? l(e, s) : e, i = m.length - 1, p; i >= 0; i--)
+    (p = m[i]) && (r = (o ? p(e, s, r) : p(r)) || r);
+  return o && r && w(e, s, r), r;
 };
-const a = class a extends n {
+const a = class a extends h {
   constructor() {
-    super(), this.offset = 8, this.hideArrow = !1, this.arrow = !this.hideArrow, this.placement = "bottom-start", n.classMap = { popover: !0 };
+    super(), this.offset = 8, this.hideArrow = !1, this.arrow = !this.hideArrow, this.placement = "bottom-start", h.classMap = { popover: !0 };
   }
   hideArrowChanged() {
     this.arrow = !this.hideArrow;
@@ -21,15 +21,15 @@ const a = class a extends n {
     e.removeEventListener("mouseenter", this.open);
   }
 };
-a.styles = [n.styles, w];
+a.styles = [h.styles, v];
 let t = a;
-h([
+n([
   f({ type: Number })
 ], t.prototype, "offset", 2);
-h([
+n([
   f({ type: Boolean })
 ], t.prototype, "hideArrow", 2);
-h([
+n([
   d("hideArrow")
 ], t.prototype, "hideArrowChanged", 1);
 export {

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

@@ -1,9 +1,9 @@
-var f = (t) => {
+var h = (t) => {
   throw TypeError(t);
 };
-var h = (t, e, r) => e.has(t) || f("Cannot " + r);
-var d = (t, e, r) => (h(t, e, "read from private field"), r ? r.call(t) : e.get(t)), c = (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), y = (t, e, r, p) => (h(t, e, "write to private field"), p ? p.call(t, r) : e.set(t, r), r);
-import { SkfElement as v } from "../../internal/components/skf-element.js";
+var f = (t, e, r) => e.has(t) || h("Cannot " + r);
+var c = (t, e, r) => (f(t, e, "read from private field"), r ? r.call(t) : e.get(t)), d = (t, e, r) => e.has(t) ? h("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), v = (t, e, r, p) => (f(t, e, "write to private field"), p ? p.call(t, r) : e.set(t, r), r);
+import { SkfElement as y } from "../../internal/components/skf-element.js";
 import x from "../../styles/component.styles.js";
 import { html as b } from "lit";
 import { property as l } from "lit/decorators.js";
@@ -14,11 +14,11 @@ var N = Object.defineProperty, n = (t, e, r, p) => {
     (u = t[m]) && (s = u(e, r, s) || s);
   return s && N(e, r, s), s;
 }, o;
-const i = class i extends v {
+const i = class i extends y {
   constructor() {
     super();
-    c(this, o);
-    this.animated = !1, this.max = 1, this.value = 0, y(this, o, this.attachInternals()), d(this, o).role = "progressbar";
+    d(this, o);
+    this.animated = !1, this.max = 1, this.value = 0, v(this, o, this.attachInternals()), c(this, o).role = "progressbar";
   }
   render() {
     const r = this.value / this.max * 100;

package/dist/components/radio/radio.component.js

@@ -2,8 +2,8 @@ import "../icon/icon.js";
 import { FormBase as c } from "../../internal/components/formBase.js";
 import { watch as n } from "../../internal/helpers/watch.js";
 import { Asterisk as p } from "../../internal/templates/asterisk.js";
-import m from "../../styles/component.styles.js";
-import { html as v } from "lit";
+import v from "../../styles/component.styles.js";
+import { html as m } from "lit";
 import { property as r, state as f, query as y } from "lit/decorators.js";
 import { ifDefined as b } from "lit/directives/if-defined.js";
 import { live as _ } from "lit/directives/live.js";
@@ -76,7 +76,7 @@ const d = class d extends c {
       this.setValidity({});
   }
   render() {
-    return v`
+    return m`
 			<label id="root">
 				<input
 					?disabled=${this.disabled}
@@ -95,7 +95,7 @@ const d = class d extends c {
 		`;
   }
 };
-d.styles = [m, g];
+d.styles = [v, g];
 let t = d;
 i([
   r({ type: Boolean })