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

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

@@ -1,19 +1,19 @@
 import '../icon/icon.js';
 import { FormBase } from '../../internal/components/formBase.js';
 import '../../internal/components/hint/hint';
+import type { FormFieldSeverity } from '../../internal/types.js';
 import type { FormFieldBaseProps } from '../../internal/types/formField.js';
 import { type CSSResultGroup } from 'lit';
-type AutocompleteValues = 'on' | 'off' | 'name' | 'honorific-prefix' | 'given-name' | 'additional-name' | 'family-name' | 'honorific-suffix' | 'nickname' | 'username' | 'new-password' | 'current-password' | 'one-time-code' | 'organization-title' | 'organization' | 'street-address' | 'address-line1' | 'address-line2' | 'address-line3' | 'address-level4' | 'address-level3' | 'address-level2' | 'address-level1' | 'country' | 'country-name' | 'postal-code' | 'cc-name' | 'cc-given-name' | 'cc-additional-name' | 'cc-family-name' | 'cc-number' | 'cc-exp' | 'cc-exp-month' | 'cc-exp-year' | 'cc-csc' | 'cc-type' | 'transaction-amount' | 'transaction-currency' | 'language' | 'bday' | 'bday-day' | 'bday-month' | 'bday-year' | 'sex' | 'url' | 'photo' | 'tel' | 'tel-country-code' | 'tel-national' | 'tel-area-code' | 'tel-local' | 'tel-extension' | 'email' | 'impp' | 'password' | 'webauthn' | 'work' | (string & {});
 /**
- * The skf-text-field is used to create a text input field. It can be used inside a form element or standalone.
+ * The skf-text-field is used to create a text input field. It can be used inside a form element or standalone
  *
- * @documentation See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/619e4125b3d2147c0c584b11) for design principles.
+ * See [zeroheight](https://zeroheight.com/853e936c9/p/9481fa-input-field) for design principles
  *
- * @attribute {boolean} disabled - If true, sets disabled state
- * @attribute {boolean} required - If true, value is required or must be checked for the form to be submittable
+ * @attribute {boolean} [disabled=false] - If true, sets disabled state
+ * @attribute {boolean} [required=false] - If true, value is required or must be checked for the form to be submittable
  *
- * @event change - Fires when the value of the input changes
- * @event invalid - Fires when the input is invalid
+ * @event {CustomEvent} change - Fires when the value of the input changes
+ * @event {CustomEvent} invalid - Fires when the input is invalid
  *
  * @slot - The Inputs label. Alternatively, you can use the `label` attribute.
  *
@@ -25,12 +25,13 @@ type AutocompleteValues = 'on' | 'off' | 'name' | 'honorific-prefix' | 'given-na
 export declare class SkfInput extends FormBase implements FormFieldBaseProps {
     static styles: CSSResultGroup;
     private customError;
+    /** @internal intermediary value for reset to function, e.g value attribute act as default value */
+    private _value;
     /**
-     * Specifies what permission the browser has to provide assistance in filling out form field values. Refer to
-     * [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.
-     * @type { 'on' | 'off' | 'name' | 'honorific-prefix' | 'given-name' | 'additional-name' | 'family-name' | 'honorific-suffix' | 'nickname' | 'username' | 'new-password' | 'current-password' | 'one-time-code' | 'organization-title' | 'organization' | 'street-address' | 'address-line1' | 'address-line2' | 'address-line3' | 'address-level4' | 'address-level3' | 'address-level2' | 'address-level1' | 'country' | 'country-name' | 'postal-code' | 'cc-name' | 'cc-given-name' | 'cc-additional-name' | 'cc-family-name' | 'cc-number' | 'cc-exp' | 'cc-exp-month' | 'cc-exp-year' | 'cc-csc' | 'cc-type' | 'transaction-amount' | 'transaction-currency' | 'language' | 'bday' | 'bday-day' | 'bday-month' | 'bday-year' | 'sex' | 'url' | 'photo' | 'tel' | 'tel-country-code' | 'tel-national' | 'tel-area-code' | 'tel-local' | 'tel-extension' | 'email' | 'impp' | 'password' | 'webauthn' | 'work' | (string & {})}
+     * 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.
      */
-    autocomplete?: AutocompleteValues;
+    autocomplete?: HTMLInputElement['autocomplete'];
     /** Custom aria-label for the clear button. **Notice!** Only applicable to type=search. */
     buttonAriaLabelClear: string;
     /** Custom aria-label for the visibility button. **Notice!** Only applicable to type=password. */
@@ -41,13 +42,16 @@ export declare class SkfInput extends FormBase implements FormFieldBaseProps {
     set customInvalid(value: string | undefined);
     get customInvalid(): string | undefined;
     /** If true, outputs helping hints in console */
-    debug?: boolean;
+    debug: boolean;
     /** If true, hides the label visually */
-    hideLabel?: boolean;
+    hideLabel: boolean;
     /** If defined, displays informational text below the field */
     hint?: string;
-    /** Tells what keyboard to use if applicable */
-    inputmode: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+    /**
+     * 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.
+     */
+    inputmode: HTMLInputElement['inputMode'];
     /** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
     label?: string;
     /** If defined, displays a prefix/adornment before the input-element */
@@ -67,44 +71,40 @@ export declare class SkfInput extends FormBase implements FormFieldBaseProps {
     /** If defined, displays placeholder text */
     placeholder?: string;
     /** If true, makes the element not mutable, meaning the user can not edit the control */
-    readonly?: boolean;
+    readonly: boolean;
     /** If defined, renders an alternative A11y text for the asterisk */
     requiredLabel?: string;
-    /**
-     * If defined, displays provided severity state
-     * @type { "success" | "info" | "warning" }
-     */
-    severity?: FormFieldBaseProps['severity'];
+    /** If defined, displays provided severity state */
+    severity?: FormFieldSeverity;
     /** If true, displays valid state after interaction */
-    showValid?: boolean;
+    showValid: boolean;
     /** Size of the input */
     size: 'sm' | 'md';
     /** If defined, displays a suffix/adornment after the input-element */
     trailing?: string;
-    /**
-     * Type of input control
-     * @type { 'button' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week' }
-     */
-    type?: Exclude<FormFieldBaseProps['type'], 'checkbox' | 'radio'>;
+    /** Type of input */
+    type: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url';
     /** Sets validation start */
     validateOn: 'input' | 'change' | 'submit';
     /** The current value of the input field  */
-    value: string;
+    set value(newValue: string);
+    get value(): string;
     /** @internal */
     /** true if the internal state is invalid  */
     invalid: boolean;
     /** @internal */
     private _buttonDown;
     /** @internal */
-    $input: HTMLInputElement;
+    $input?: HTMLInputElement;
     /** @internal */
     _defaultSlot: Node[];
     /** @internal */
     private _numberController;
     /** @internal */
     private _passwordController;
-    protected firstUpdated(): void;
+    firstUpdated(): void;
     willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
+    /** @internal */
     valueChanged(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     /** @internal */
@@ -136,4 +136,3 @@ export declare class SkfInput extends FormBase implements FormFieldBaseProps {
     private _onBlur;
     render(): import("lit").TemplateResult<1>;
 }
-export {};

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

@@ -1,51 +1,52 @@
 import "../icon/icon.js";
-import { FormBase as b } from "../../internal/components/formBase.js";
+import { FormBase as c } from "../../internal/components/formBase.js";
 import "../../internal/components/hint/hint.js";
-import { hintSeverity as v } from "../../internal/helpers/hintSeverity.js";
+import { hintSeverity as b } from "../../internal/helpers/hintSeverity.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 { componentStyles as _ } 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 { state as p, property as s, query as $, queryAssignedNodes as g } from "lit/decorators.js";
+import { ifDefined as o } from "lit/directives/if-defined.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 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;
+var L = Object.defineProperty, P = Object.getOwnPropertyDescriptor, e = (v, t, r, a) => {
+  for (var n = a > 1 ? void 0 : a ? P(t, r) : t, l = v.length - 1, d; l >= 0; l--)
+    (d = v[l]) && (n = (a ? d(t, r, n) : d(n)) || n);
+  return a && n && L(t, r, n), n;
 };
-const p = class p extends b {
+const m = class m extends c {
   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 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;
-      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);
+    super(...arguments), this._value = "", this.buttonAriaLabelClear = "Clear input", this.buttonAriaLabelHide = "Hide password", this.buttonAriaLabelShow = "Show password", this.debug = !1, this.hideLabel = !1, this.inputmode = "text", this.readonly = !1, this.showValid = !1, this.size = "md", this.type = "text", this.validateOn = "change", this.invalid = !1, this._buttonDown = !1, this._numberController = new E(this), this._passwordController = new C(this), this._handleInput = () => {
+      var t;
+      this._value = ((t = this.$input) == null ? void 0 : t.value) ?? "", this.validateOn === "input" && (this._pristine = !1, this.validateInput());
+    }, this._resetValue = (t) => {
+      var r, a;
+      t.stopPropagation(), this.value = ((r = this.getAttribute("value")) == null ? void 0 : r.trim()) ?? "", this._value = this.value, this._internals.setFormValue(this.value), (a = this.$input) == null || a.focus();
+    }, 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 = (s) => h`
+    }, this._renderNumberButton = (t) => h`
 		<button
 			?disabled=${this.disabled}
 			@click=${(r) => {
-      this._numberController.handleActionBtnClick(r, s);
+      this._numberController.handleActionBtnClick(r, t);
     }}
 			@mousedown=${this._handlePressStart}
 			@mouseup=${this._handlePressEnd}
 			@mouseleave=${this._handlePressEnd}
-			aria-label="${s === "inc" ? "Increment" : "Decrement"}"
+			aria-label="${t === "inc" ? "Increment" : "Decrement"}"
 			class="number skf-icon-host"
 			type="button"
 		>
-			<skf-icon name="${s === "inc" ? "chevronUp" : "chevronDown"}" size="sm"></skf-icon>
+			<skf-icon name="${t === "inc" ? "chevronUp" : "chevronDown"}" size="sm"></skf-icon>
 		</button>
 	`, this._renderPasswordButton = () => h`
 		<button
 			@click=${this._passwordController.toggleVisibility}
-			aria-label=${n(this._passwordController._buttonAriaLabel)}
+			aria-label=${o(this._passwordController._buttonAriaLabel)}
 			class="password skf-icon-host"
 			type="button"
 			@mousedown="${this._handlePressStart}"
@@ -60,31 +61,41 @@ const p = class p extends b {
 			@mousedown=${this._handlePressStart}
 			@mouseup=${this._handlePressEnd}
 			@mouseleave=${this._handlePressEnd}
-			aria-label=${n(this.buttonAriaLabelClear)}
+			aria-label=${o(this.buttonAriaLabelClear)}
 			class="search skf-icon-host"
 			type="button"
 		>
 			<skf-icon name="close" size="sm"></skf-icon>
 		</button>
 	`, this._onBlur = () => {
-      this._buttonDown && this.$input.focus();
+      var t;
+      this._buttonDown && ((t = this.$input) == null || t.focus());
     };
   }
-  set customInvalid(s) {
-    this.customError = s ?? "";
+  set customInvalid(t) {
+    this.customError = t ?? "";
   }
   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() {
+    var t;
+    return ((t = this.$input) == null ? void 0 : t.value) ?? "";
+  }
   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", (s) => {
-      this._pristine = !1, this.invalid = !0, this.customErrorDisplay && s.preventDefault();
+    var t;
+    (t = this.$input) == null || t.addEventListener("change", () => {
+      var r;
+      this.validateOn === "change" && (this.validateOn = "input", this._pristine = !1), this._internals.setFormValue(((r = this.$input) == null ? void 0 : r.value) ?? ""), this.emitEvent("change"), this.validateInput();
+    }), this.addEventListener("invalid", (r) => {
+      this._pristine = !1, this.invalid = !0, this.customErrorDisplay && r.preventDefault();
     }), this.addEventListener("reset", this._resetValue), this.validateInput();
   }
-  willUpdate(s) {
-    if (s.has("invalid"))
+  willUpdate(t) {
+    if (t.has("invalid"))
       if (this.invalid) {
         this.setAttribute("invalid", ""), this.showValid || this.removeAttribute("valid");
         const r = this._internals.validationMessage;
@@ -95,8 +106,8 @@ const p = class p extends b {
   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")
+  attributeChangedCallback(t, r, a) {
+    if (super.attributeChangedCallback(t, r, a), t === "value" && this._internals.setFormValue(a), t === "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();
@@ -105,7 +116,7 @@ const p = class p extends b {
   }
   /** @internal */
   validateInput() {
-    if (this._internals.validity.customError) return;
+    if (this._internals.validity.customError || !this.$input) return;
     const r = this.$input.validity;
     if (this.invalid = !1, r.valid)
       this._internals.setValidity({ customError: this._internals.validity.customError });
@@ -113,12 +124,12 @@ const p = class p extends b {
       this.invalid = !this._pristine && !r.valid;
       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"`
+        const n = `data-${a.toString()}`;
+        if (r[a] && !this.hasAttribute(n) && this.debug && console.log(
+          `Add custom message on ${this.localName} using attribute: ${n.toUpperCase()}="Your custom message"`
         ), r[a]) {
           this.validationError = a.toString();
-          const l = this.hasAttribute(o) ? this.getAttribute(o) : this.$input.validationMessage;
+          const l = this.hasAttribute(n) ? this.getAttribute(n) : this.$input.validationMessage;
           this._internals.setValidity(
             { [this.validationError]: !0, customError: this._internals.validity.customError },
             this.withFallback(l)
@@ -128,20 +139,20 @@ const p = class p extends b {
     }
   }
   render() {
-    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;
+    var r, a, n, l;
+    const t = (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=${s} id="label">
+					<div class=${this.hideLabel ? "visually-hidden" : ""} ?hidden=${t} id="label">
 						<slot>${this.label}</slot>
 						${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>` : u}
 						<div
-							data-leading=${n(this.leading)}
-							data-trailing=${n(this.trailing)}
+							data-leading=${o(this.leading)}
+							data-trailing=${o(this.trailing)}
 							id="affix"
 						>
 							<input
@@ -151,21 +162,20 @@ const p = class p extends b {
 								.value=${w(this.value)}
 								@blur=${this._onBlur}
 								@input=${this._handleInput}
-								autocomplete=${this.autocomplete}
-								aria-describedby=${n((o = this.hint) != null && o.trim() ? "hint" : u)}
-								aria-errormessage=${n((l = this.hint) != null && l.trim() ? "hint" : u)}
+								.autocomplete=${this.autocomplete}
+								aria-describedby=${o((n = this.hint) != null && n.trim() ? "hint" : u)}
+								aria-errormessage=${o((l = this.hint) != null && l.trim() ? "hint" : u)}
 								aria-invalid=${!!this.invalid}
-								autocomplete="off"
 								data-testid="field-input"
-								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(
+								inputmode=${o(this.inputMode)}
+								max=${o(this.max)}
+								maxlength=${o(this.maxLength)}
+								min=${o(this.min)}
+								minlength=${o(this.minLength)}
+								name=${o(this.name)}
+								pattern=${o(this.pattern)}
+								placeholder=${o(this.placeholder)}
+								type=${o(
       this.type === "password" ? this._passwordController._type : this.type
     )}
 							/>
@@ -176,14 +186,14 @@ const p = class p extends b {
 									</div>
 								` : u}
 						${this.type === "password" ? this._renderPasswordButton() : u}
-						${this.type === "search" && this.value.length > 0 ? this._renderSearchButton() : u}
+						${this.type === "search" && this._value.length > 0 ? this._renderSearchButton() : u}
 					</div>
 				</label>
 				${this.hint && h`
 					<skf-hint
 						aria-live=${this.invalid ? "assertive" : "polite"}
 						id="hint"
-						severity=${n(v(this.severity, this.invalid))}
+						severity=${o(b(this.invalid, this.severity))}
 						>${this.customInvalid ?? this.hint}
 					</skf-hint>
 				`}
@@ -191,104 +201,107 @@ const p = class p extends b {
 		`;
   }
 };
-p.styles = [_, A];
-let t = p;
+m.styles = [_, A];
+let i = m;
+e([
+  p()
+], i.prototype, "_value", 2);
 e([
-  i({ type: String })
-], t.prototype, "autocomplete", 2);
+  s()
+], i.prototype, "autocomplete", 2);
 e([
-  i({ attribute: "button-aria-label-clear" })
-], t.prototype, "buttonAriaLabelClear", 2);
+  s({ attribute: "button-aria-label-clear" })
+], i.prototype, "buttonAriaLabelClear", 2);
 e([
-  i({ attribute: "button-aria-label-hide" })
-], t.prototype, "buttonAriaLabelHide", 2);
+  s({ attribute: "button-aria-label-hide" })
+], i.prototype, "buttonAriaLabelHide", 2);
 e([
-  i({ attribute: "button-aria-label-show" })
-], t.prototype, "buttonAriaLabelShow", 2);
+  s({ attribute: "button-aria-label-show" })
+], i.prototype, "buttonAriaLabelShow", 2);
 e([
-  i({ attribute: "custom-invalid", reflect: !0 })
-], t.prototype, "customInvalid", 1);
+  s({ attribute: "custom-invalid", reflect: !0 })
+], i.prototype, "customInvalid", 1);
 e([
-  i({ type: Boolean })
-], t.prototype, "debug", 2);
+  s({ type: Boolean })
+], i.prototype, "debug", 2);
 e([
-  i({ type: Boolean, attribute: "hide-label" })
-], t.prototype, "hideLabel", 2);
+  s({ type: Boolean, attribute: "hide-label" })
+], i.prototype, "hideLabel", 2);
 e([
-  i()
-], t.prototype, "hint", 2);
+  s()
+], i.prototype, "hint", 2);
 e([
-  i({ type: String })
-], t.prototype, "inputmode", 2);
+  s()
+], i.prototype, "inputmode", 2);
 e([
-  i()
-], t.prototype, "label", 2);
+  s()
+], i.prototype, "label", 2);
 e([
-  i()
-], t.prototype, "leading", 2);
+  s()
+], i.prototype, "leading", 2);
 e([
-  i()
-], t.prototype, "max", 2);
+  s()
+], i.prototype, "max", 2);
 e([
-  i({ type: Number, attribute: "maxlength" })
-], t.prototype, "maxLength", 2);
+  s({ type: Number, attribute: "maxlength" })
+], i.prototype, "maxLength", 2);
 e([
-  i()
-], t.prototype, "min", 2);
+  s()
+], i.prototype, "min", 2);
 e([
-  i({ type: Number, attribute: "minlength" })
-], t.prototype, "minLength", 2);
+  s({ type: Number, attribute: "minlength" })
+], i.prototype, "minLength", 2);
 e([
-  i({ reflect: !0 })
-], t.prototype, "name", 2);
+  s({ reflect: !0 })
+], i.prototype, "name", 2);
 e([
-  i()
-], t.prototype, "pattern", 2);
+  s()
+], i.prototype, "pattern", 2);
 e([
-  i()
-], t.prototype, "placeholder", 2);
+  s()
+], i.prototype, "placeholder", 2);
 e([
-  i({ type: Boolean })
-], t.prototype, "readonly", 2);
+  s({ type: Boolean })
+], i.prototype, "readonly", 2);
 e([
-  i({ attribute: "required-label" })
-], t.prototype, "requiredLabel", 2);
+  s({ attribute: "required-label" })
+], i.prototype, "requiredLabel", 2);
 e([
-  i({ reflect: !0 })
-], t.prototype, "severity", 2);
+  s({ reflect: !0 })
+], i.prototype, "severity", 2);
 e([
-  i({ type: Boolean, attribute: "show-valid" })
-], t.prototype, "showValid", 2);
+  s({ type: Boolean, attribute: "show-valid" })
+], i.prototype, "showValid", 2);
 e([
-  i({ reflect: !0 })
-], t.prototype, "size", 2);
+  s({ reflect: !0 })
+], i.prototype, "size", 2);
 e([
-  i()
-], t.prototype, "trailing", 2);
+  s()
+], i.prototype, "trailing", 2);
 e([
-  i()
-], t.prototype, "type", 2);
+  s()
+], i.prototype, "type", 2);
 e([
-  i({ type: String, attribute: "validate-on" })
-], t.prototype, "validateOn", 2);
+  s({ attribute: "validate-on" })
+], i.prototype, "validateOn", 2);
 e([
-  i({ reflect: !0 })
-], t.prototype, "value", 2);
+  s({})
+], i.prototype, "value", 1);
 e([
-  c()
-], t.prototype, "invalid", 2);
+  p()
+], i.prototype, "invalid", 2);
 e([
-  c()
-], t.prototype, "_buttonDown", 2);
+  p()
+], i.prototype, "_buttonDown", 2);
 e([
   $("input")
-], t.prototype, "$input", 2);
+], i.prototype, "$input", 2);
 e([
   g({ flatten: !0 })
-], t.prototype, "_defaultSlot", 2);
+], i.prototype, "_defaultSlot", 2);
 e([
   y("value", { waitUntilFirstUpdate: !0, afterUpdate: !0 })
-], t.prototype, "valueChanged", 1);
+], i.prototype, "valueChanged", 1);
 export {
-  t as SkfInput
+  i as SkfInput
 };

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

@@ -1,13 +1,12 @@
-import type { SkfIcon } from '../icon/icon.component.js';
 import '../icon/icon.js';
 import { SkfElement } from '../../internal/components/skf-element.js';
+import type { Icon } from '../../internal/types.js';
 import { type CSSResultGroup } from 'lit';
+type SkfLinkType = HTMLButtonElement['type'];
 /**
  * The `<skf-link>` can be used as either a regular link or a link styled semantic button
  *
- * @documentation See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/folder/619626129069cd5f9510528f) for design principles
- *
- * @property {function} onClick - If provided, custom function triggered by click where the second return parameter enables custom routing.
+ * @documentation See [zeroheight](https://zeroheight.com/****) for design principles
  *
  * @slot - The links' main content
  *
@@ -16,24 +15,25 @@ import { type CSSResultGroup } from 'lit';
 export declare class SkfLink extends SkfElement {
     static styles: CSSResultGroup;
     static classMap: {};
+    /** @internal */
     private _onClick?;
     /** Defines the semantic element to render */
     as: 'button' | 'a';
     /** Defines the text-color */
     color: 'primary' | 'inverse';
     /** If true, disables the link */
-    disabled?: boolean;
+    disabled: boolean;
     /** If defined, downloads the url */
     download?: string;
     /** If defined, loads url on click  */
     href?: string;
-    /**
-     * If defined, renders an icon before or after the text
-     * @type { "arrowDown" | "arrowDownUp" | "arrowLeft" | "arrowRight" | "arrowUp" | "article" | "artificialIntelligence" | "asset" | "attachment" | "bandCursor" | "bands" | "batteryEmpty" | "batteryFull" | "batteryLow" | "bearingFault" | "book" | "bulb" | "burger" | "cPM" | "calendar" | "calendarBooked" | "calendarEmpty" | "calendarNotBooked" | "calendarRecurring" | "caretDown" | "caretUp" | "caretUpDown" | "chat" | "check" | "checkCircle" | "checkSmall" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "chevronUpDown" | "close" | "closeAllFaults" | "closeFault" | "closeSmall" | "columnGraph" | "comment" | "connection1" | "connection2" | "connection3" | "connection4" | "danger" | "defectFrequencies" | "defectFrequenciesAlternative" | "doubleChevronLeft" | "doubleChevronRight" | "download" | "draft" | "draftFilled" | "draftOutlined" | "dragNDrop" | "drop" | "duplicate" | "edit" | "emailFilled" | "emailOutlined" | "exclamation" | "eye" | "eyeHidden" | "eyeVisible" | "filter" | "forbidden" | "fullScreen" | "fullScreenExit" | "functionalLocation" | "harmonicCursor" | "heatmap" | "hierarchy" | "history" | "historyAlt" | "hourglassFramedFilled" | "hourglassFramedOutlined" | "hourglassOutlined" | "hz" | "iMX" | "image" | "infoCircleFilled" | "infoCircleOutlined" | "integration" | "kebab" | "link" | "listGroup" | "listItem" | "locationPin" | "lock" | "logOut" | "meatballs" | "microphone" | "minus" | "minusSmall" | "noData" | "o" | "openInNew" | "overlayBaseline" | "pDF" | "paper" | "pause" | "pieChart" | "pin" | "play" | "plus" | "powerOff" | "printer" | "proCollect" | "recAction" | "received" | "refresh" | "reorder" | "replace" | "reply" | "rewalkableRoute" | "routes" | "search" | "send" | "sensorA" | "sensorB" | "settings" | "sidebandCursor" | "singleCursor" | "spectrum" | "starFilled" | "starOutlined" | "statusCircle" | "stop" | "structuralVibration" | "sync" | "timewave" | "trash" | "trend" | "trendingUp" | "undo" | "unknownCircle" | "unknownDiamond" | "unlink" | "unlock" | "unscheduledAction" | "upload" | "user" | "viewFull" | "viewHorizontal" | "viewVertical" | "warning" | "warningCircle" | "warningDiamond" | "zoomIn" | "zoomOut" }
-     */
-    icon?: SkfIcon['name'];
+    /** If defined, renders an icon before or after the text */
+    icon?: Icon;
     /** Defines the position of the icon in relation to the text */
     iconPlacement: 'left' | 'right';
+    /** If defined, accepts a function that runs on click. Forwards optional route as second argument. */
+    set onClick(onClickFn: ((event: Event, route?: string) => void) | undefined);
+    get onClick(): ((event: Event, route?: string) => void) | undefined;
     /** 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 */
@@ -43,10 +43,7 @@ export declare class SkfLink extends SkfElement {
     /** If defined, specifies where to open the linked document */
     target?: '_blank' | '_parent' | '_self' | '_top';
     /** Defines the type of button */
-    type: 'button' | 'submit' | 'reset';
-    /** If defined, accepts a function that runs on click. Forwards optional route as second argument. */
-    set onClick(onClickFn: ((event: Event, route?: string) => void) | undefined);
-    get onClick(): ((event: Event, route?: string) => void) | undefined;
+    type: SkfLinkType;
     connectedCallback(): void;
     /** @internal */
     private _assertValidOnClick;
@@ -57,3 +54,4 @@ export declare class SkfLink extends SkfElement {
     private _renderIcon;
     render(): import("lit").TemplateResult;
 }
+export {};