@skf-design-system/ui-components 1.0.2-beta.17 → 1.0.2-beta.19

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

@@ -8,6 +8,8 @@ type SkfIconSize = IconSize;
  *
  * @documentation See [zeroheight](https://zeroheight.com/*) for design principles
  *
+ * @slot - A custom svg icon. **Notice** Make sure that viewBox is set to `0 0 24 24.
+ *
  * @tagname skf-icon
  */
 export declare class SkfIcon extends SkfElement {
@@ -18,7 +20,7 @@ export declare class SkfIcon extends SkfElement {
     /** If defined, adds an alternate description to use for assistive devices */
     label?: string;
     /** Name of the icon to display */
-    name: Icon;
+    name?: Icon;
     /** Size of the icon */
     size: SkfIconSize;
     connectedCallback(): void;

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

@@ -3,15 +3,15 @@ var u = (t) => {
 };
 var g = (t, e, r) => e.has(t) || u("Cannot " + r);
 var c = (t, e, r) => (g(t, e, "read from private field"), r ? r.call(t) : e.get(t)), y = (t, e, r) => e.has(t) ? u("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), d = (t, e, r, o) => (g(t, e, "write to private field"), o ? o.call(t, r) : e.set(t, r), r);
-import { SkfElement as v } from "../../internal/components/skf-element.js";
-import { stateMap as b } from "../../internal/helpers/stateMap.js";
-import { watch as _ } from "../../internal/helpers/watch.js";
-import { ICONS as S } from "@skf-design-system/ui-assets";
-import { componentStyles as C } from "../../styles/component.styles.js";
-import { html as z } from "lit";
+import { SkfElement as b } from "../../internal/components/skf-element.js";
+import { stateMap as _ } from "../../internal/helpers/stateMap.js";
+import { watch as S } from "../../internal/helpers/watch.js";
+import { ICONS as C } from "@skf-design-system/ui-assets";
+import { componentStyles as z } from "../../styles/component.styles.js";
+import { html as v } from "lit";
 import { property as n } from "lit/decorators.js";
 import { styles as O } from "./icon.styles.js";
-var w = Object.defineProperty, P = Object.getOwnPropertyDescriptor, l = (t, e, r, o) => {
+var w = Object.defineProperty, P = Object.getOwnPropertyDescriptor, p = (t, e, r, o) => {
   for (var s = o > 1 ? void 0 : o ? P(e, r) : e, m = t.length - 1, h; m >= 0; m--)
     (h = t[m]) && (s = (o ? h(e, r, s) : h(s)) || s);
   return o && s && w(e, r, s), s;
@@ -30,40 +30,40 @@ const x = {
   ],
   size: ["lg", "md", "sm", "xs"]
 };
-var a, p;
-const f = class f extends v {
+var a, l;
+const f = class f extends b {
   constructor() {
     super(...arguments);
     y(this, a);
-    y(this, p);
-    d(this, a, this.attachInternals()), d(this, p, c(this, a).states), this.color = "primary", this.size = "md";
+    y(this, l);
+    d(this, a, this.attachInternals()), d(this, l, c(this, a).states), this.color = "primary", this.size = "md";
   }
   connectedCallback() {
     super.connectedCallback(), this.ariaHidden = this.label ? null : "true", this.ariaLabel = this.label ?? null, this.role = this.label ? "img" : null;
   }
   _handleStateChange(r, o, s) {
-    b(c(this, p), x[r]).set(s);
+    _(c(this, l), x[r]).set(s);
   }
   render() {
-    return z`<div id="root">${S[this.name]}</div>`;
+    return v`<div id="root">${this.name ? C[this.name] : v`<slot></slot>`}</div>`;
   }
 };
-a = new WeakMap(), p = new WeakMap(), f.styles = [C, O];
+a = new WeakMap(), l = new WeakMap(), f.styles = [z, O];
 let i = f;
-l([
+p([
   n({ type: String })
 ], i.prototype, "color", 2);
-l([
+p([
   n({ type: String })
 ], i.prototype, "label", 2);
-l([
+p([
   n({ type: String })
 ], i.prototype, "name", 2);
-l([
+p([
   n({ type: String })
 ], i.prototype, "size", 2);
-l([
-  _(["color", "size"])
+p([
+  S(["color", "size"])
 ], i.prototype, "_handleStateChange", 1);
 export {
   i as SkfIcon

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

@@ -3,7 +3,7 @@ const r = o`
 	@layer components {
 		@layer base {
 			:host {
-				display: inline-flex;
+				display: inline-block;
 				pointer-events: none;
 				user-select: none;
 			}
@@ -13,13 +13,20 @@ const r = o`
 				--_skf-icon-size: var(--skf-icon-size-md);
 
 				block-size: var(--_skf-icon-size);
-				flex-shrink: 0; /* Prevents shrink when flex-child */
 				inline-size: var(--_skf-icon-size);
 
 				:host(:not([data-color='custom'])) & {
 					color: var(--_skf-icon-color);
 				}
 			}
+
+			svg,
+			::slotted(svg) {
+				block-size: 100%;
+				display: block;
+				fill: currentcolor;
+				inline-size: 100%;
+			}
 		}
 
 		@layer mods {

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

@@ -28,8 +28,6 @@ export declare class SkfInput extends FormBase implements FormFieldBaseProps {
     #private;
     static styles: CSSResultGroup;
     private customError;
-    /** @internal intermediary value for reset to function, e.g value attribute act as default value */
-    private _value;
     /**
      * Indicates whether the value of the control can be automatically completed by the browser. See
      * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/autocomplete) for details.
@@ -45,6 +43,8 @@ export declare class SkfInput extends FormBase implements FormFieldBaseProps {
     hideLabel: boolean;
     /** If defined, displays informational text below the field */
     hint?: string;
+    /** @internal - true if the internal state is invalid. Only internal use */
+    invalid: boolean;
     /**
      * Provides a hint about the type of data that might be entered by the user while editing the element or its contents. See
      * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inputMode) for details.
@@ -85,11 +85,7 @@ export declare class SkfInput extends FormBase implements FormFieldBaseProps {
     /** Sets validation start */
     validateOn: 'input' | 'change' | 'submit';
     /** The current value of the input field  */
-    set value(newValue: string);
-    get value(): string;
-    /** @internal */
-    /** true if the internal state is invalid  */
-    invalid: boolean;
+    value: string;
     /** @internal */
     private _buttonDown;
     /** @internal */
@@ -101,10 +97,10 @@ export declare class SkfInput extends FormBase implements FormFieldBaseProps {
     /** @internal */
     private _passwordController;
     firstUpdated(): void;
-    willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
-    /** @internal */
-    valueChanged(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    _invalidChanged(): void;
+    _valueChanged(): void;
+    _hintChanged(): void;
     /** @internal */
     _handleInput: () => void;
     /** @internal */

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

@@ -1,44 +1,48 @@
-var f = (a) => {
-  throw TypeError(a);
+var $ = (r) => {
+  throw TypeError(r);
 };
-var b = (a, n, t) => n.has(a) || f("Cannot " + t);
-var c = (a, n, t) => (b(a, n, "read from private field"), t ? t.call(a) : n.get(a)), _ = (a, n, t) => n.has(a) ? f("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(a) : n.set(a, t), $ = (a, n, t, r) => (b(a, n, "write to private field"), r ? r.call(a, t) : n.set(a, t), t);
+var w = (r, n, t) => n.has(r) || $("Cannot " + t);
+var d = (r, n, t) => (w(r, n, "read from private field"), t ? t.call(r) : n.get(r)), b = (r, n, t) => n.has(r) ? $("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(r) : n.set(r, t), v = (r, n, t, a) => (w(r, n, "write to private field"), a ? a.call(r, t) : n.set(r, t), t);
 import "../icon/icon.js";
-import { FormBase as g } from "../../internal/components/formBase.js";
+import { FormBase as E } from "../../internal/components/formBase.js";
 import "../../internal/components/hint/hint.js";
-import { hintSeverity as w } from "../../internal/helpers/hintSeverity.js";
-import { watch as E } from "../../internal/helpers/watch.js";
-import { Asterisk as S } from "../../internal/templates/asterisk.js";
+import { hintSeverity as S } from "../../internal/helpers/hintSeverity.js";
+import { watch as _ } from "../../internal/helpers/watch.js";
+import { Asterisk as C } from "../../internal/templates/asterisk.js";
 import { componentStyles as P } from "../../styles/component.styles.js";
-import { LocalizeController as C } from "../../utilities/localize.js";
-import { html as p, nothing as m } from "lit";
-import { state as v, property as s, query as k, queryAssignedNodes as B } from "lit/decorators.js";
+import { LocalizeController as k } from "../../utilities/localize.js";
+import { html as c, nothing as m } from "lit";
+import { property as s, state as B, query as x, queryAssignedNodes as V } from "lit/decorators.js";
 import { ifDefined as l } from "lit/directives/if-defined.js";
-import { live as x } from "lit/directives/live.js";
-import { InputNumberController as A, InputPasswordController as V } from "./input.controllers.js";
-import I from "./input.styles.js";
-var L = Object.defineProperty, D = Object.getOwnPropertyDescriptor, e = (a, n, t, r) => {
-  for (var o = r > 1 ? void 0 : r ? D(n, t) : n, h = a.length - 1, u; h >= 0; h--)
-    (u = a[h]) && (o = (r ? u(n, t, o) : u(o)) || o);
-  return r && o && L(n, t, o), o;
-}, d;
-const y = class y extends g {
+import { live as L } from "lit/directives/live.js";
+import { InputNumberController as D, InputPasswordController as I } from "./input.controllers.js";
+import A from "./input.styles.js";
+var N = Object.defineProperty, O = Object.getOwnPropertyDescriptor, e = (r, n, t, a) => {
+  for (var o = a > 1 ? void 0 : a ? O(n, t) : n, h = r.length - 1, p; h >= 0; h--)
+    (p = r[h]) && (o = (a ? p(n, t, o) : p(o)) || o);
+  return a && o && N(n, t, o), o;
+}, u, f, y;
+const g = class g extends E {
   constructor() {
     super(...arguments);
-    _(this, d);
-    $(this, d, new C(this)), this._value = "", this.autofocus = !1, this.debug = !1, this.hideLabel = !1, this.inputmode = "text", this.lang = "en", this.readonly = !1, this.showValid = !1, this.size = "md", this.type = "text", this.validateOn = "change", this.invalid = !1, this._buttonDown = !1, this._numberController = new A(this), this._passwordController = new V(this), this._handleInput = () => {
-      this._value = this.$input?.value ?? "", this.validateOn === "input" && (this._pristine = !1, this.validateInput());
+    b(this, u);
+    /** @internal intermediary value for reset to function, e.g value attribute act as default value */
+    b(this, f);
+    /** @internal */
+    b(this, y);
+    v(this, u, new k(this)), this.autofocus = !1, this.debug = !1, this.hideLabel = !1, this.invalid = !1, this.inputmode = "text", this.lang = "en", this.readonly = !1, this.showValid = !1, this.size = "md", this.type = "text", this.validateOn = "change", this.value = "", this._buttonDown = !1, this._numberController = new D(this), this._passwordController = new I(this), this._handleInput = () => {
+      this.value = this.$input?.value ?? "", this.validateOn === "input" && (this._pristine = !1, this.validateInput());
     }, this._resetValue = (t) => {
-      t.stopPropagation(), this.value = this.getAttribute("value")?.trim() ?? "", this._value = this.value, this._internals.setFormValue(this.value), this.$input?.focus(), this.emit("cleared");
+      t.stopPropagation(), this.value = d(this, f) ?? "", this._internals.setFormValue(this.value), this.emit("cleared");
     }, this._handlePressStart = (t) => {
       this._buttonDown = !0, this.type === "number" && this._numberController.handleActionBtnLongPressStart(t);
     }, this._handlePressEnd = () => {
       this._buttonDown = !1, this.type === "number" && this._numberController.handleActionBtnLongPressEnd();
-    }, this._renderNumberButton = (t) => p`
+    }, this._renderNumberButton = (t) => c`
 		<button
 			?disabled=${this.disabled}
-			@click=${(r) => {
-      this._numberController.handleActionBtnClick(r, t);
+			@click=${(a) => {
+      this._numberController.handleActionBtnClick(a, t);
     }}
 			@mousedown=${this._handlePressStart}
 			@mouseup=${this._handlePressEnd}
@@ -49,10 +53,10 @@ const y = class y extends g {
 		>
 			<skf-icon name="${t === "inc" ? "chevronUp" : "chevronDown"}" size="sm"></skf-icon>
 		</button>
-	`, this._renderPasswordButton = () => p`
+	`, this._renderPasswordButton = () => c`
 		<button
 			@click=${this._passwordController.toggleVisibility}
-			aria-label=${this._passwordController._type === "password" ? c(this, d).term("showPassword") : c(this, d).term("hidePassword")}
+			aria-label=${this._passwordController._type === "password" ? d(this, u).term("showPassword") : d(this, u).term("hidePassword")}
 			class="password skf-icon-host"
 			type="button"
 			@mousedown="${this._handlePressStart}"
@@ -61,13 +65,13 @@ const y = class y extends g {
 		>
 			<skf-icon name=${this._passwordController._icon} size="sm"></skf-icon>
 		</button>
-	`, this._renderSearchButton = () => p`
+	`, this._renderSearchButton = () => c`
 		<button
 			@click=${this._resetValue}
 			@mousedown=${this._handlePressStart}
 			@mouseup=${this._handlePressEnd}
 			@mouseleave=${this._handlePressEnd}
-			aria-label=${c(this, d).term("clearEntry")}
+			aria-label=${d(this, u).term("clearEntry")}
 			class="search skf-icon-host"
 			type="button"
 		>
@@ -83,38 +87,35 @@ const y = class y extends g {
   get customInvalid() {
     return this.customError;
   }
-  set value(t) {
-    this.$input && (this.$input.value = t, this._value = t, this._internals.setFormValue(t), this.validateInput());
-  }
-  get value() {
-    return this.$input?.value ?? "";
-  }
   firstUpdated() {
     this.$input?.addEventListener("change", () => {
       this.validateOn === "change" && (this.validateOn = "input", this._pristine = !1), this._internals.setFormValue(this.$input?.value ?? ""), this.emit("change"), this.validateInput();
     }), this.addEventListener("invalid", (t) => {
       this._pristine = !1, this.invalid = !0, this.customErrorDisplay && t.preventDefault();
-    }), this.value = this.getAttribute("value")?.trim() ?? "", this.autofocus && this.$input?.focus(), this.addEventListener("reset", this._resetValue), this.validateInput();
-  }
-  willUpdate(t) {
-    if (t.has("invalid"))
-      if (this.invalid) {
-        this.setAttribute("invalid", ""), this.showValid || this.removeAttribute("valid");
-        const r = this._internals.validationMessage;
-        this.hint = r !== "" ? this._internals.validationMessage : "", this.checkValidity();
-      } else
-        this.removeAttribute("invalid"), !this._pristine && this.showValid && this.setAttribute("valid", "true"), this.hint = this.getAttribute("hint") ?? "";
+    }), this.autofocus && this.$input?.focus(), this.addEventListener("reset", this._resetValue), this.validateInput();
   }
-  valueChanged() {
-    this._internals.setFormValue(this.value), this.validateInput();
-  }
-  attributeChangedCallback(t, r, o) {
-    if (super.attributeChangedCallback(t, r, o), t === "value" && this._internals.setFormValue(o), t === "custom-invalid")
+  attributeChangedCallback(t, a, o) {
+    if (super.attributeChangedCallback(t, a, o), t === "custom-invalid")
       if (typeof o == "string") {
-        const u = this.withFallback(o);
-        this._pristine = !1, this._internals.setValidity({ customError: !0 }, u), this.invalid = !0, this.hint = u, this.checkValidity();
+        const p = this.withFallback(o);
+        this._pristine = !1, this._internals.setValidity({ customError: !0 }, p), this.invalid = !0, this.hint = p, this.checkValidity();
       } else
         this._internals.setValidity({}), this.validateInput();
+    t === "hint" && v(this, y, this.getAttribute("hint") ?? "");
+  }
+  _invalidChanged() {
+    if (this.invalid) {
+      this.showValid || this.removeAttribute("valid");
+      const t = this._internals.validationMessage;
+      this.hint = t !== "" ? this._internals.validationMessage : "", this.checkValidity();
+    } else
+      !this._pristine && this.showValid && this.setAttribute("valid", "true"), this.hint = d(this, y) ?? "";
+  }
+  _valueChanged() {
+    d(this, f) ?? v(this, f, this.value), this._internals.setFormValue(this.value), this.validateInput();
+  }
+  _hintChanged() {
+    d(this, y) ?? v(this, y, this.hint);
   }
   focus() {
     this.$input?.focus();
@@ -128,22 +129,22 @@ const y = class y extends g {
   /** @internal */
   validateInput() {
     if (this._internals.validity.customError || !this.$input) return;
-    const r = this.$input.validity;
-    if (this.invalid = !1, r.valid)
+    const a = this.$input.validity;
+    if (this.invalid = !1, a.valid)
       this._internals.setValidity({ customError: this._internals.validity.customError });
     else {
-      this.invalid = !this._pristine && !r.valid;
+      this.invalid = !this._pristine && !a.valid;
       let o;
-      for (o in r) {
+      for (o in a) {
         const h = `data-${o}`;
-        if (r[o] && !this.hasAttribute(h) && this.debug && console.log(
+        if (a[o] && !this.hasAttribute(h) && this.debug && console.log(
           `Add custom message on ${this.localName} using attribute: ${h.toUpperCase()}="Your custom message"`
-        ), r[o]) {
+        ), a[o]) {
           this.validationError = o;
-          const u = this.hasAttribute(h) ? this.getAttribute(h) : this.$input.validationMessage;
+          const p = this.hasAttribute(h) ? this.getAttribute(h) : this.$input.validationMessage;
           this._internals.setValidity(
             { [this.validationError]: !0, customError: this._internals.validity.customError },
-            this.withFallback(u)
+            this.withFallback(p)
           ), this.invalid && this.customErrorDisplay && this.checkValidity();
         }
       }
@@ -151,15 +152,15 @@ const y = class y extends g {
   }
   render() {
     const t = (this._defaultSlot.length === 0 || !this._defaultSlot[0]?.textContent?.trim()) && !this.label;
-    return p`
+    return c`
 			<div id="root">
 				<label>
 					<div class=${this.hideLabel ? "visually-hidden" : ""} ?hidden=${t} id="label">
 						<slot>${this.label}</slot>
-						${this.required ? S(c(this, d).term("required")) : m}
+						${this.required ? C(d(this, u).term("required")) : m}
 					</div>
 					<div id="input">
-						${this.type === "search" ? p`<skf-icon class="skf-icon-host" name="search" size="sm"></skf-icon>` : m}
+						${this.type === "search" ? c`<skf-icon class="skf-icon-host" name="search" size="sm"></skf-icon>` : m}
 						<div
 							data-leading=${l(this.leading)}
 							data-trailing=${l(this.trailing)}
@@ -170,7 +171,7 @@ const y = class y extends g {
 								?readonly=${this.readonly}
 								?required=${this.required}
 								.autocomplete=${this.autocomplete ?? "off"}
-								.value=${x(this.value)}
+								.value=${L(this.value)}
 								@blur=${this._onBlur}
 								@input=${this._handleInput}
 								aria-describedby=${l(this.hint?.trim() ? "hint" : m)}
@@ -190,21 +191,21 @@ const y = class y extends g {
     )}
 							/>
 						</div>
-						${this.type === "number" ? p`
+						${this.type === "number" ? c`
 									<div id="action">
 										${this._renderNumberButton("inc")} ${this._renderNumberButton("dec")}
 									</div>
 								` : m}
 						${this.type === "password" ? this._renderPasswordButton() : m}
-						${this.type === "search" && this._value.length > 0 ? this._renderSearchButton() : m}
+						${this.type === "search" && this.value.length > 0 ? this._renderSearchButton() : m}
 					</div>
 				</label>
-				${this.hint && p`
+				${this.hint && c`
 					<skf-hint
 						?disabled=${this.disabled}
 						aria-live=${this.invalid ? "assertive" : "polite"}
 						id="hint"
-						severity=${l(w(this.invalid, this.severity))}
+						severity=${l(S(this.invalid, this.severity))}
 						>${this.customInvalid ?? this.hint}
 					</skf-hint>
 				`}
@@ -212,11 +213,8 @@ const y = class y extends g {
 		`;
   }
 };
-d = new WeakMap(), y.styles = [P, I];
-let i = y;
-e([
-  v()
-], i.prototype, "_value", 2);
+u = new WeakMap(), f = new WeakMap(), y = new WeakMap(), g.styles = [P, A];
+let i = g;
 e([
   s()
 ], i.prototype, "autocomplete", 2);
@@ -235,6 +233,9 @@ e([
 e([
   s({ type: String })
 ], i.prototype, "hint", 2);
+e([
+  s({ type: Boolean, reflect: !0 })
+], i.prototype, "invalid", 2);
 e([
   s({ type: String })
 ], i.prototype, "inputmode", 2);
@@ -290,23 +291,26 @@ e([
   s({ type: String, attribute: "validate-on" })
 ], i.prototype, "validateOn", 2);
 e([
-  s({ type: String })
-], i.prototype, "value", 1);
-e([
-  v()
-], i.prototype, "invalid", 2);
+  s({ type: String, reflect: !1 })
+], i.prototype, "value", 2);
 e([
-  v()
+  B()
 ], i.prototype, "_buttonDown", 2);
 e([
-  k("input")
+  x("input")
 ], i.prototype, "$input", 2);
 e([
-  B({ flatten: !0 })
+  V({ flatten: !0 })
 ], i.prototype, "_defaultSlot", 2);
 e([
-  E("value", { waitUntilFirstUpdate: !0, afterUpdate: !0 })
-], i.prototype, "valueChanged", 1);
+  _("invalid")
+], i.prototype, "_invalidChanged", 1);
+e([
+  _("value", { waitUntilFirstUpdate: !0 })
+], i.prototype, "_valueChanged", 1);
+e([
+  _("hint")
+], i.prototype, "_hintChanged", 1);
 export {
   i as SkfInput
 };

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

@@ -3,33 +3,33 @@ var f = (c) => {
 };
 var g = (c, t, r) => t.has(c) || f("Cannot " + r);
 var a = (c, t, r) => (g(c, t, "read from private field"), r ? r.call(c) : t.get(c)), v = (c, t, r) => t.has(c) ? f("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(c) : t.set(c, r), n = (c, t, r, e) => (g(c, t, "write to private field"), e ? e.call(c, r) : t.set(c, r), r);
-import { SkfElement as w } from "../../internal/components/skf-element.js";
-import { stateMap as H } from "../../internal/helpers/stateMap.js";
-import { watch as M } from "../../internal/helpers/watch.js";
-import { componentStyles as V } from "../../styles/component.styles.js";
-import { html as x } from "lit";
-import { property as d } from "lit/decorators.js";
-import { styles as z } from "./logo.styles.js";
-var C = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, m = (c, t, r, e) => {
-  for (var s = e > 1 ? void 0 : e ? _(t, r) : t, i = c.length - 1, l; i >= 0; i--)
+import { SkfElement as H } from "../../internal/components/skf-element.js";
+import { stateMap as M } from "../../internal/helpers/stateMap.js";
+import { watch as V } from "../../internal/helpers/watch.js";
+import { componentStyles as x } from "../../styles/component.styles.js";
+import { nothing as z, html as d } from "lit";
+import { property as w } from "lit/decorators.js";
+import { styles as C } from "./logo.styles.js";
+var _ = Object.defineProperty, u = Object.getOwnPropertyDescriptor, m = (c, t, r, e) => {
+  for (var s = e > 1 ? void 0 : e ? u(t, r) : t, i = c.length - 1, l; i >= 0; i--)
     (l = c[i]) && (s = (e ? l(t, r, s) : l(s)) || s);
-  return e && s && C(t, r, s), s;
-}, h, p;
-const y = class y extends w {
+  return e && s && _(t, r, s), s;
+}, o, p;
+const y = class y extends H {
   constructor() {
     super(...arguments);
-    v(this, h);
+    v(this, o);
     v(this, p);
-    n(this, h, this.attachInternals()), n(this, p, a(this, h).states), this.title = "SKF logotype", this.color = "primary";
+    n(this, o, this.attachInternals()), n(this, p, a(this, o).states), this.title = "", this.color = "primary";
   }
   _handleStateChange() {
     const r = ["inverse", "primary", "secondary"];
-    H(a(this, p), r).set(this.color);
+    M(a(this, p), r).set(this.color);
   }
   render() {
-    return x`
+    return d`
 			<svg id="root" viewBox="0 0 1300 300" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px">
-				<title>${this.title}</title>
+				${this.title ? d`<title>${this.title}</title>` : z}
 				<g>
 					<path
 						d="M363.7,300c6.2,0,11.2-5,11.2-11.3v-165c0-6.2-5-11.3-11.3-11.2H157.5c-4.1,0-7.5-3.4-7.5-7.5V45
@@ -67,17 +67,17 @@ const y = class y extends w {
 		`;
   }
 };
-h = new WeakMap(), p = new WeakMap(), y.styles = [V, z];
-let o = y;
+o = new WeakMap(), p = new WeakMap(), y.styles = [x, C];
+let h = y;
 m([
-  d({ type: String })
-], o.prototype, "title", 2);
+  w({ type: String })
+], h.prototype, "title", 2);
 m([
-  d({ type: String })
-], o.prototype, "color", 2);
+  w({ type: String })
+], h.prototype, "color", 2);
 m([
-  M("color")
-], o.prototype, "_handleStateChange", 1);
+  V("color")
+], h.prototype, "_handleStateChange", 1);
 export {
-  o as SkfLogo
+  h as SkfLogo
 };

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

@@ -0,0 +1,40 @@
+import '../icon/icon.js';
+import { SkfElement } from '../../internal/components/skf-element.js';
+import { type Language } from '../../utilities/localize.js';
+import { type CSSResultGroup } from 'lit';
+/**
+ * The `<skf-pagination>` is a component that displays a list of actions or options
+ *
+ * @documentation See [zeroheight](https://zeroheight.com/****) for design principles
+ *
+ * @tagname skf-pagination
+ */
+export declare class SkfPagination extends SkfElement {
+    #private;
+    static styles: CSSResultGroup;
+    /** The number of items to display on each 'page' */
+    itemsPerPage: number;
+    /** Sets the internal language of the component */
+    lang: Language;
+    /** If true, hides both the delimiter and the total value */
+    noTotal: boolean;
+    /** The active page number. */
+    page: number;
+    /** The total number of items being paginated. */
+    total: number;
+    /** @internal Event that triggers when user selects previous or next page. Fires 'change' event. */
+    _handlePageChange(page: number): void;
+    /** @internal */
+    private _getPageStart;
+    /** @internal */
+    private _getPageEnd;
+    /** @internal */
+    private get _disabledNext();
+    /** @internal */
+    private get disabledPrev();
+    /** @internal */
+    private _handlePrev;
+    /** @internal */
+    private _handleNext;
+    render(): import("lit").TemplateResult<1>;
+}