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

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

@@ -5,46 +5,46 @@ 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 s, state as p, query as _, queryAssignedNodes as $ } from "lit/decorators.js";
-import { ifDefined as a } from "lit/directives/if-defined.js";
+import { property as e, state as c, query as _, queryAssignedNodes as $ } 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 C from "./input.styles.js";
-var S = Object.defineProperty, L = Object.getOwnPropertyDescriptor, i = (c, e, r, n) => {
-  for (var o = n > 1 ? void 0 : n ? L(e, r) : e, l = c.length - 1, u; l >= 0; l--)
-    (u = c[l]) && (o = (n ? u(e, r, o) : u(o)) || o);
-  return n && o && S(e, r, o), o;
+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;
 };
-const m = class m extends b {
+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 = () => {
       this.value = this.$input.value || "", this.validateOn === "input" && (this._pristine = !1, this.validateInput());
-    }, this._resetValue = (e) => {
+    }, this._resetValue = (s) => {
       var r;
-      e.stopPropagation(), this.value = ((r = this.getAttribute("value")) == null ? void 0 : r.trim()) ?? "", this._internals.setFormValue(this.value), this.$input.focus();
-    }, this._handlePressStart = (e) => {
-      this._buttonDown = !0, this.type === "number" && this._numberController.handleActionBtnLongPressStart(e);
+      s.stopPropagation(), this.value = ((r = this.getAttribute("value")) == null ? void 0 : r.trim()) ?? "", this._internals.setFormValue(this.value), this.$input.focus();
+    }, this._handlePressStart = (s) => {
+      this._buttonDown = !0, this.type === "number" && this._numberController.handleActionBtnLongPressStart(s);
     }, this._handlePressEnd = () => {
       this._buttonDown = !1, this.type === "number" && this._numberController.handleActionBtnLongPressEnd();
-    }, this._renderNumberButton = (e) => h`
+    }, this._renderNumberButton = (s) => h`
 		<button
 			?disabled=${this.disabled}
 			@click=${(r) => {
-      this._numberController.handleActionBtnClick(r, e);
+      this._numberController.handleActionBtnClick(r, s);
     }}
 			@mousedown=${this._handlePressStart}
 			@mouseup=${this._handlePressEnd}
 			@mouseleave=${this._handlePressEnd}
-			aria-label="${e === "inc" ? "Increment" : "Decrement"}"
+			aria-label="${s === "inc" ? "Increment" : "Decrement"}"
 			class="number skf-icon-host"
 			type="button"
 		>
-			<skf-icon name="${e === "inc" ? "chevronUp" : "chevronDown"}" size="sm"></skf-icon>
+			<skf-icon name="${s === "inc" ? "chevronUp" : "chevronDown"}" size="sm"></skf-icon>
 		</button>
 	`, this._renderPasswordButton = () => h`
 		<button
 			@click=${this._passwordController.toggleVisibility}
-			aria-label=${a(this._passwordController._buttonAriaLabel)}
+			aria-label=${n(this._passwordController._buttonAriaLabel)}
 			class="password skf-icon-host"
 			type="button"
 			@mousedown="${this._handlePressStart}"
@@ -59,7 +59,7 @@ const m = class m extends b {
 			@mousedown=${this._handlePressStart}
 			@mouseup=${this._handlePressEnd}
 			@mouseleave=${this._handlePressEnd}
-			aria-label=${a(this.buttonAriaLabelClear)}
+			aria-label=${n(this.buttonAriaLabelClear)}
 			class="search skf-icon-host"
 			type="button"
 		>
@@ -67,13 +67,10 @@ const m = class m extends b {
 		</button>
 	`, this._onBlur = () => {
       this._buttonDown && this.$input.focus();
-    }, this._handleSlotChange = () => {
-      var e, r;
-      console.log("slot change"), this._noLabel = (this._defaultSlot.length === 0 || !((r = (e = this._defaultSlot[0]) == null ? void 0 : e.textContent) != null && r.trim())) && !this.label;
     };
   }
-  set customInvalid(e) {
-    this.customError = e || "";
+  set customInvalid(s) {
+    this.customError = s || "";
   }
   get customInvalid() {
     return this.customError;
@@ -81,12 +78,12 @@ const m = class m extends b {
   firstUpdated() {
     this.$input.addEventListener("change", () => {
       this.validateOn === "change" && (this.validateOn = "input", this._pristine = !1), this._internals.setFormValue(this.$input.value || ""), this.emitEvent("change"), this.validateInput();
-    }), this.addEventListener("invalid", (e) => {
-      this._pristine = !1, this.invalid = !0, this.customErrorDisplay && e.preventDefault();
-    }), this.addEventListener("reset", this._resetValue), this._handleSlotChange(), this.validateInput();
+    }), this.addEventListener("invalid", (s) => {
+      this._pristine = !1, this.invalid = !0, this.customErrorDisplay && s.preventDefault();
+    }), this.addEventListener("reset", this._resetValue), this.validateInput();
   }
-  willUpdate(e) {
-    if (e.has("invalid"))
+  willUpdate(s) {
+    if (s.has("invalid"))
       if (this.invalid) {
         this.setAttribute("invalid", ""), this.showValid || this.removeAttribute("valid");
         const r = this._internals.validationMessage;
@@ -94,10 +91,10 @@ const m = class m extends b {
       } else
         this.removeAttribute("invalid"), !this._pristine && this.showValid && this.setAttribute("valid", "true"), this.hint = this.getAttribute("hint") ?? "";
   }
-  attributeChangedCallback(e, r, n) {
-    if (super.attributeChangedCallback(e, r, n), e === "value" && this._internals.setFormValue(n), e === "custom-invalid")
-      if (typeof n == "string") {
-        const l = String(n).trim();
+  attributeChangedCallback(s, r, a) {
+    if (super.attributeChangedCallback(s, r, a), s === "value" && this._internals.setFormValue(a), s === "custom-invalid")
+      if (typeof a == "string") {
+        const l = this.withFallback(a);
         this._pristine = !1, this._internals.setValidity({ customError: !0 }, l), this.invalid = !0, this.hint = l, this.checkValidity();
       } else
         this._internals.setValidity({}), this.validateInput();
@@ -110,36 +107,37 @@ const m = class m extends b {
       this._internals.setValidity({ customError: this._internals.validity.customError });
     else {
       this.invalid = !this._pristine && !r.valid;
-      let n;
-      for (n in r) {
-        const o = `data-${n.toString()}`;
-        if (r[n] && !this.hasAttribute(o) && this.debug && console.log(
+      let a;
+      for (a in r) {
+        const o = `data-${a.toString()}`;
+        if (r[a] && !this.hasAttribute(o) && this.debug && console.log(
           `Add custom message on ${this.localName} using attribute: ${o.toUpperCase()}="Your custom message"`
-        ), r[n]) {
-          this.validationError = n.toString();
+        ), r[a]) {
+          this.validationError = a.toString();
           const l = this.hasAttribute(o) ? this.getAttribute(o) : this.$input.validationMessage;
           this._internals.setValidity(
             { [this.validationError]: !0, customError: this._internals.validity.customError },
-            l ?? ""
+            this.withFallback(l)
           ), this.invalid && this.customErrorDisplay && this.checkValidity();
         }
       }
     }
   }
   render() {
-    var e, r;
+    var r, a, o, l;
+    const s = (this._defaultSlot.length === 0 || !((a = (r = this._defaultSlot[0]) == null ? void 0 : r.textContent) != null && a.trim())) && !this.label;
     return h`
 			<div id="root">
 				<label>
-					<div class=${this.hideLabel ? "visually-hidden" : ""} ?hidden=${this._noLabel} id="label">
-						<slot @slotchange=${this._handleSlotChange}>${this.label}</slot>
+					<div class=${this.hideLabel ? "visually-hidden" : ""} ?hidden=${s} id="label">
+						<slot>${this.label}</slot>
 						${this.required ? y(this.requiredLabel) : null}
 					</div>
 					<div id="input">
 						${this.type === "search" ? h`<skf-icon class="skf-icon-host" name="search" size="sm"></skf-icon>` : d}
 						<div
-							data-leading=${a(this.leading)}
-							data-trailing=${a(this.trailing)}
+							data-leading=${n(this.leading)}
+							data-trailing=${n(this.trailing)}
 							id="affix"
 						>
 							<input
@@ -149,20 +147,21 @@ const m = class m extends b {
 								.value=${g(this.value)}
 								@blur=${this._onBlur}
 								@input=${this._handleInput}
-								aria-describedby=${a((e = this.hint) != null && e.trim() ? "hint" : d)}
-								aria-errormessage=${a((r = this.hint) != null && r.trim() ? "hint" : d)}
+								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-invalid=${!!this.invalid}
 								autocomplete="off"
 								data-testid="field-input"
-								inputmode=${a(this.inputMode)}
-								max=${a(this.max)}
-								maxlength=${a(this.maxLength)}
-								min=${a(this.min)}
-								minlength=${a(this.minLength)}
-								name=${a(this.name)}
-								pattern=${a(this.pattern)}
-								placeholder=${a(this.placeholder)}
-								type=${a(
+								inputmode=${n(this.inputMode)}
+								max=${n(this.max)}
+								maxlength=${n(this.maxLength)}
+								min=${n(this.min)}
+								minlength=${n(this.minLength)}
+								name=${n(this.name)}
+								pattern=${n(this.pattern)}
+								placeholder=${n(this.placeholder)}
+								type=${n(
       this.type === "password" ? this._passwordController._type : this.type
     )}
 							/>
@@ -180,7 +179,7 @@ const m = class m extends b {
 					<skf-hint
 						aria-live=${this.invalid ? "assertive" : "polite"}
 						id="hint"
-						severity=${a(v(this.severity, this.invalid))}
+						severity=${n(v(this.severity, this.invalid))}
 						>${this.customInvalid ? this.customInvalid : this.hint}
 					</skf-hint>
 				`}
@@ -188,94 +187,94 @@ const m = class m extends b {
 		`;
   }
 };
-m.styles = [f, C];
-let t = m;
+p.styles = [f, A];
+let t = p;
 i([
-  s({ attribute: "button-aria-label-clear" })
+  e({ type: String })
+], t.prototype, "autocomplete", 2);
+i([
+  e({ attribute: "button-aria-label-clear" })
 ], t.prototype, "buttonAriaLabelClear", 2);
 i([
-  s({ attribute: "button-aria-label-hide" })
+  e({ attribute: "button-aria-label-hide" })
 ], t.prototype, "buttonAriaLabelHide", 2);
 i([
-  s({ attribute: "button-aria-label-show" })
+  e({ attribute: "button-aria-label-show" })
 ], t.prototype, "buttonAriaLabelShow", 2);
 i([
-  s({ attribute: "custom-invalid", reflect: !0 })
+  e({ attribute: "custom-invalid", reflect: !0 })
 ], t.prototype, "customInvalid", 1);
 i([
-  s({ type: Boolean })
+  e({ type: Boolean })
 ], t.prototype, "debug", 2);
 i([
-  s({ type: Boolean, attribute: "hide-label" })
+  e({ type: Boolean, attribute: "hide-label" })
 ], t.prototype, "hideLabel", 2);
 i([
-  s()
+  e()
 ], t.prototype, "hint", 2);
 i([
-  s({ type: String })
+  e({ type: String })
 ], t.prototype, "inputmode", 2);
 i([
-  s()
+  e()
 ], t.prototype, "label", 2);
 i([
-  s()
+  e()
 ], t.prototype, "leading", 2);
 i([
-  s()
+  e()
 ], t.prototype, "max", 2);
 i([
-  s({ type: Number, attribute: "maxlength" })
+  e({ type: Number, attribute: "maxlength" })
 ], t.prototype, "maxLength", 2);
 i([
-  s()
+  e()
 ], t.prototype, "min", 2);
 i([
-  s({ type: Number, attribute: "minlength" })
+  e({ type: Number, attribute: "minlength" })
 ], t.prototype, "minLength", 2);
 i([
-  s()
+  e()
 ], t.prototype, "name", 2);
 i([
-  p()
-], t.prototype, "_noLabel", 2);
-i([
-  s()
+  e()
 ], t.prototype, "pattern", 2);
 i([
-  s()
+  e()
 ], t.prototype, "placeholder", 2);
 i([
-  s({ type: Boolean })
+  e({ type: Boolean })
 ], t.prototype, "readonly", 2);
 i([
-  s({ attribute: "required-label" })
+  e({ attribute: "required-label" })
 ], t.prototype, "requiredLabel", 2);
 i([
-  s({ reflect: !0 })
+  e({ reflect: !0 })
 ], t.prototype, "severity", 2);
 i([
-  s({ type: Boolean, attribute: "show-valid" })
+  e({ type: Boolean, attribute: "show-valid" })
 ], t.prototype, "showValid", 2);
 i([
-  s({ reflect: !0 })
+  e({ reflect: !0 })
 ], t.prototype, "size", 2);
 i([
-  s()
+  e()
 ], t.prototype, "trailing", 2);
 i([
-  s()
+  e()
 ], t.prototype, "type", 2);
 i([
-  s({ type: String, attribute: "validate-on" })
+  e({ type: String, attribute: "validate-on" })
 ], t.prototype, "validateOn", 2);
 i([
-  s()
+  e()
 ], t.prototype, "value", 2);
 i([
-  p()
+  c()
 ], t.prototype, "invalid", 2);
 i([
-  p()
+  c()
 ], t.prototype, "_buttonDown", 2);
 i([
   _("input")

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

@@ -1,6 +1,6 @@
-import type { SkfIcon } from '@components/icon/icon.component.js';
-import '@components/icon/icon.js';
-import { SkfElement } from '@internal/components/skf-element.js';
+import type { SkfIcon } from '../icon/icon.component.js';
+import '../icon/icon.js';
+import { SkfElement } from '../../internal/components/skf-element.js';
 import { type CSSResultGroup } from 'lit';
 /**
  * The `<skf-link>` can be used as either a regular link or a link styled semantic button
@@ -33,12 +33,12 @@ export declare class SkfLink extends SkfElement {
     icon?: SkfIcon['name'];
     /** Defines the position of the icon in relation to the text */
     iconPlacement: 'left' | 'right';
-    /** Defines the relationship of the target object to the link object */
-    rel: string;
+    /** If defined, describes the relationship between a linked resource and the current document */
+    rel?: string;
     /** If defined, used on conjunction with onClick property, second argument */
     route?: string;
     /** If true, fills the parents horizontal axis */
-    stretch?: boolean;
+    stretch: boolean;
     /** If defined, specifies where to open the linked document */
     target?: '_blank' | '_parent' | '_self' | '_top';
     /** Defines the type of button */

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

@@ -1,27 +1,28 @@
 import "../icon/icon.js";
 import y from "./link.styles.js";
-import { SkfElement as m } from "../../internal/components/skf-element.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 n } from "lit/directives/if-defined.js";
-import { html as f, literal as d } from "lit/static-html.js";
-var k = Object.defineProperty, v = Object.getOwnPropertyDescriptor, o = (h, t, i, p) => {
-  for (var s = p > 1 ? void 0 : p ? v(t, i) : t, l = h.length - 1, c; l >= 0; l--)
-    (c = h[l]) && (s = (p ? c(t, i, s) : c(s)) || s);
-  return p && s && k(t, i, s), s;
+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 m {
+const a = class a extends d {
   constructor() {
-    super(...arguments), this.as = "a", this.color = "primary", this.iconPlacement = "left", this.rel = "noreferrer noopener", this.type = "button", this._preprocessOnClick = (t) => {
+    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");
     };
   }
   set onClick(t) {
     if (!t) return;
     this._onClick = t;
-    const i = (p) => {
-      t(p, this.href ?? this.route);
+    const i = (c) => {
+      t(c, this.href ?? this.route);
     };
     this._assertValidOnClick(t), this.removeEventListener("click", i), this.addEventListener("click", i);
   }
@@ -51,17 +52,22 @@ const a = class a extends m {
 		`;
   }
   render() {
-    const t = this.as === "a", i = t ? d`a` : d`button`;
+    const t = this.as === "a", i = t ? m`a` : m`button`;
     return f`
 			<${i}
 				?disabled=${n(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
+    })}
         		download=${n(t ? this.download : void 0)}
 				href=${n(t ? this.href : void 0)}
-				id="root"
 				rel=${n(t ? this.rel : void 0)}
 				target=${n(t ? this.target : void 0)}
-				title=${this.title}
 				type=${n(t ? void 0 : this.type)}
 			>
 				${this.icon && this._renderIcon()}
@@ -85,7 +91,7 @@ o([
   r({ type: String })
 ], e.prototype, "download", 2);
 o([
-  r({ type: String, reflect: !0 })
+  r({ type: String })
 ], e.prototype, "href", 2);
 o([
   r({ type: String })

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

@@ -1,36 +1,36 @@
 import { css as r } from "lit";
-const e = r`
-	:host {
-		display: contents;
-	}
-
-	#root {
-		align-items: center;
-		color: var(--state-color, var(--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;
-
-		&:disabled {
-			--state-color: var(--color-disabled);
-		}
-
-		&:hover {
-			--state-color: var(--color-hover);
-		}
-
-		&:focus-visible {
-			border-radius: var(--skf-border-radius-sm);
-			outline: var(--skf-border-width-md) solid var(--outline-color);
-			outline-offset: var(--skf-size-2);
-		}
-
-		/**
-		 * Colors
-		 */
-		:host([color='primary']) & {
+const o = r`
+	/* stylelint-disable selector-class-pattern */
+	@layer components {
+		.link {
+			align-items: center;
+			color: var(--state-color, var(--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;
+
+			&:is(a) {
+				text-decoration: none;
+			}
+
+			&:disabled {
+				--state-color: var(--color-disabled);
+			}
+
+			&:hover {
+				--state-color: var(--color-hover);
+			}
+
+			&:focus-visible {
+				border-radius: var(--skf-border-radius-sm);
+				outline: var(--skf-border-width-md) solid var(--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);
@@ -38,7 +38,7 @@ const e = r`
 			--outline-color: var(--skf-interactive-text-color-primary);
 		}
 
-		:host([color='inverse']) & {
+		.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);
@@ -46,19 +46,15 @@ const e = r`
 			--outline-color: var(--skf-interactive-text-color-inverse);
 		}
 
-		:host([as='a']) & {
-			text-decoration: none;
-		}
-
-		:host([icon-placement='right']) & {
+		.link--icon-right {
 			--flex-direction: row-reverse;
 		}
 
-		:host([stretch]) & {
+		.link--stretch {
 			inline-size: 100%;
 		}
 	}
 `;
 export {
-  e as default
+  o as default
 };

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

@@ -1,4 +1,4 @@
-import { SkfElement } from '@internal/components/skf-element.js';
+import { SkfElement } from '../../internal/components/skf-element.js';
 import { type CSSResultGroup } from 'lit';
 /**
  * The `<skf-loader>` component is a progress indicator that uses circular indicators for short, indeterminate activities
@@ -13,7 +13,7 @@ export declare class SkfLoader extends SkfElement {
     /** Defines the aria-label */
     ariaLabel: string;
     /** If true, inverts the color (to be used on colored backgrounds) */
-    invert?: boolean;
+    invert: boolean;
     /** Defines the size of the loader */
     size?: 'md' | 'sm';
     constructor();

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

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