@skf-design-system/ui-components 1.0.0-alpha.34 → 1.0.0-alpha.35

package/dist/components/tag/tag.component.js

@@ -1,27 +1,39 @@
+var y = (e) => {
+  throw TypeError(e);
+};
+var k = (e, o, t) => o.has(e) || y("Cannot " + t);
+var m = (e, o, t) => (k(e, o, "read from private field"), t ? t.call(e) : o.get(e)), d = (e, o, t) => o.has(e) ? y("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(e) : o.set(e, t), v = (e, o, t, i) => (k(e, o, "write to private field"), i ? i.call(e, t) : o.set(e, t), t);
 import "../icon/icon.js";
-import { SkfElement as u } from "../../internal/components/skf-element.js";
-import f from "../../styles/component.styles.js";
-import { html as a, nothing as p } from "lit";
-import { property as l, query as d } from "lit/decorators.js";
-import { classMap as v } from "lit/directives/class-map.js";
-import { ifDefined as _ } from "lit/directives/if-defined.js";
-import { styles as k } from "./tag.styles.js";
-var b = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (m, t, s, r) => {
-  for (var e = r > 1 ? void 0 : r ? y(t, s) : t, n = m.length - 1, c; n >= 0; n--)
-    (c = m[n]) && (e = (r ? c(t, s, e) : c(e)) || e);
-  return r && e && b(t, s, e), e;
+import { SkfElement as _ } from "../../internal/components/skf-element.js";
+import { stateMap as g } from "../../internal/helpers/stateMap.js";
+import { watch as w } from "../../internal/helpers/watch.js";
+import { componentStyles as $ } from "../../styles/component.styles.js";
+import { nothing as C, html as f } from "lit";
+import { property as c, query as R } from "lit/decorators.js";
+import { ifDefined as D } from "lit/directives/if-defined.js";
+import { styles as E } from "./tag.styles.js";
+var P = Object.defineProperty, z = Object.getOwnPropertyDescriptor, r = (e, o, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? z(o, t) : o, l = e.length - 1, p; l >= 0; l--)
+    (p = e[l]) && (s = (i ? p(o, t, s) : p(s)) || s);
+  return i && s && P(o, t, s), s;
+};
+const b = {
+  size: ["sm", "md"],
+  color: ["error", "info", "success", "warning"]
 };
-const h = class h extends u {
+var a, h;
+const u = class u extends _ {
   constructor() {
-    super(...arguments), this.size = "md", this._handleKeyDown = (t) => {
+    super(...arguments);
+    d(this, a);
+    d(this, h);
+    v(this, a, this.attachInternals()), v(this, h, m(this, a).states), this.size = "md", this.removable = !1, this._handleKeyDown = (t) => {
       (t.key === "Enter" || t.key === " ") && this.$removeButton.click();
     }, this._handleRemove = (t) => {
       this._onRemove && this._onRemove(t);
     }, this._handleClick = (t) => {
-      var e;
-      t.stopPropagation();
-      const s = t.composedPath()[0];
-      console.log("$clickTarget", s), s.localName === "button" ? this.remove() : (e = this.onClick) == null || e.call(this, t);
+      var l;
+      t.stopPropagation(), t.composedPath()[0].localName === "button" ? this.remove() : (l = this.onClick) == null || l.call(this, t);
     };
   }
   set onClick(t) {
@@ -42,63 +54,52 @@ const h = class h extends u {
   disconnectedCallback() {
     super.disconnectedCallback(), this.removeEventListener("click", this._handleClick);
   }
-  attributeChangedCallback(t, s, r) {
-    super.attributeChangedCallback(t, s, r), t === "removable" && r !== null ? this.addEventListener("keydown", this._handleKeyDown) : this.removeEventListener("keydown", this._handleKeyDown);
+  attributeChangedCallback(t, i, s) {
+    super.attributeChangedCallback(t, i, s), t === "removable" && s !== null ? this.addEventListener("keydown", this._handleKeyDown) : this.removeEventListener("keydown", this._handleKeyDown);
+  }
+  _handleStateChange(t, i, s) {
+    g(m(this, h), b[t]).set(s);
   }
   render() {
-    return a`
-			<div
-				class=${v({
-      tag: !0,
-      "tag--color-alert": this.color === "alert",
-      "tag--color-error": this.color === "error",
-      "tag--color-info": this.color === "info",
-      "tag--color-success": this.color === "success",
-      "tag--color-warning": this.color === "warning",
-      "tag--small": this.size === "sm"
-    })}
-			>
-				${this.icon ? a`
-							<skf-icon
-								class="tag__icon"
-								color=${_(this.color)}
-								name=${this.icon}
-								size="sm"
-							></skf-icon>
-						` : p}
-				<slot class="tag__slot"></slot>
-				${this.removable ? a`
-							<button @click=${this._handleRemove} class="tag__btn" type="button">
+    return f`
+			<div id="root">
+				${this.icon ? f`<skf-icon color=${D(this.color)} name=${this.icon} size="sm"></skf-icon>` : C}
+				<slot></slot>
+				${this.removable ? f`
+							<button @click=${this._handleRemove} type="button">
 								<skf-icon name="close" size="xs"></skf-icon>
 							</button>
-						` : p}
+						` : C}
 			</div>
 		`;
   }
 };
-h.styles = [f, k];
-let o = h;
-i([
-  l({ reflect: !0 })
-], o.prototype, "size", 2);
-i([
-  l()
-], o.prototype, "icon", 2);
-i([
-  l({ reflect: !0 })
-], o.prototype, "color", 2);
-i([
-  l({ attribute: !1 })
-], o.prototype, "onClick", 1);
-i([
-  l({ attribute: !1 })
-], o.prototype, "onRemove", 1);
-i([
-  l({ type: Boolean, reflect: !0 })
-], o.prototype, "removable", 2);
-i([
-  d("button")
-], o.prototype, "$removeButton", 2);
+a = new WeakMap(), h = new WeakMap(), u.styles = [$, E];
+let n = u;
+r([
+  c({ type: String })
+], n.prototype, "size", 2);
+r([
+  c({ type: String })
+], n.prototype, "icon", 2);
+r([
+  c({ type: String })
+], n.prototype, "color", 2);
+r([
+  c({ attribute: !1 })
+], n.prototype, "onClick", 1);
+r([
+  c({ attribute: !1 })
+], n.prototype, "onRemove", 1);
+r([
+  c({ type: Boolean })
+], n.prototype, "removable", 2);
+r([
+  R("button")
+], n.prototype, "$removeButton", 2);
+r([
+  w(Object.keys(b))
+], n.prototype, "_handleStateChange", 1);
 export {
-  o as SkfTag
+  n as SkfTag
 };

package/dist/components/tag/tag.d.ts

@@ -1,5 +1,5 @@
-import { SkfTag } from './tag.component';
-export * from './tag.component';
+import { SkfTag } from './tag.component.js';
+export * from './tag.component.js';
 export default SkfTag;
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/tag/tag.styles.js

@@ -1,66 +1,79 @@
 import { css as r } from "lit";
 const s = r`
-	/* stylelint-disable selector-class-pattern */
 	@layer components {
-		.tag {
-			align-items: center;
-			background-color: var(--_skf-tag-bg-color, var(--skf-bg-color-neutral-1));
-			block-size: var(--_skf-tag-height, var(--skf-size-32));
-			border: var(--skf-border-width-sm) solid
-				var(--_skf-tag-border-color, var(--skf-border-color-primary));
-			border-radius: var(--_skf-tag-border-radius, var(--skf-border-radius-md));
-			color: var(--_skf-tag-text-color, var(--skf-text-color-primary));
-			display: inline-flex;
-			font-size: var(--_skf-tag-font-size, var(--skf-font-size-50));
-			gap: var(--skf-spacing-25);
-			max-inline-size: 48ch;
-			padding-inline: var(--skf-spacing-50);
-		}
+		@layer base {
+			:host {
+				display: inline-flex;
+			}
 
-		.tag--color-alert {
-			--_skf-tag-bg-color: var(--skf-severity-bg-color-alert);
-			--_skf-tag-border-color: var(--skf-severity-fg-color-alert);
-		}
+			#root {
+				--_skf-tag-bg-color: var(--skf-bg-color-neutral-1);
+				--_skf-tag-border-color: var(--skf-border-color-primary);
+				--_skf-tag-border-radius: var(--skf-border-radius-md);
+				--_skf-tag-font-size: var(--skf-font-size-50);
+				--_skf-tag-height: var(--skf-size-32);
+				--_skf-tag-text-color: var(--skf-text-color-primary);
 
-		.tag--color-error {
-			--_skf-tag-bg-color: var(--skf-severity-bg-color-error);
-			--_skf-tag-border-color: var(--skf-severity-fg-color-error);
-		}
+				align-items: center;
+				background-color: var(--_skf-tag-bg-color);
+				block-size: var(--_skf-tag-height);
+				border: var(--skf-border-width-sm) solid var(--_skf-tag-border-color);
+				border-radius: var(--_skf-tag-border-radius);
+				color: var(--_skf-tag-text-color);
+				display: flex;
+				font-size: var(--_skf-tag-font-size);
+				gap: var(--skf-spacing-25);
+				max-inline-size: 48ch;
+				padding-inline: var(--skf-spacing-50);
+			}
 
-		.tag--color-info {
-			--_skf-tag-bg-color: var(--skf-severity-bg-color-info);
-			--_skf-tag-border-color: var(--skf-severity-fg-color-info);
-		}
+			slot {
+				display: block;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
 
-		.tag--color-success {
-			--_skf-tag-bg-color: var(--skf-severity-bg-color-success);
-			--_skf-tag-border-color: var(--skf-severity-fg-color-success);
-		}
+			button {
+				display: flex;
 
-		.tag--color-warning {
-			--_skf-tag-bg-color: var(--skf-severity-bg-color-warning);
-			--_skf-tag-border-color: var(--skf-severity-fg-color-warning);
+				&:focus-visible {
+					border-radius: var(--skf-border-radius-sm);
+					outline: var(--skf-border-width-md) solid var(--skf-interactive-border-color-focus);
+				}
+			}
 		}
 
-		.tag--small {
-			--_skf-tag-border-radius: 0.25rem; /* token needed */
-			--_skf-tag-font-size: var(--skf-font-size-25);
-			--_skf-tag-height: var(--skf-size-24);
-		}
+		@layer mods {
+			:host(:state(alert)) #root {
+				--_skf-tag-bg-color: var(--skf-severity-bg-color-alert);
+				--_skf-tag-border-color: var(--skf-severity-fg-color-alert);
+			}
 
-		.tag__slot {
-			display: block;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-		}
+			:host(:state(error)) #root {
+				--_skf-tag-bg-color: var(--skf-severity-bg-color-error);
+				--_skf-tag-border-color: var(--skf-severity-fg-color-error);
+			}
 
-		.tag__btn {
-			display: flex;
+			:host(:state(info)) #root {
+				--_skf-tag-bg-color: var(--skf-severity-bg-color-info);
+				--_skf-tag-border-color: var(--skf-severity-fg-color-info);
+			}
+
+			:host(:state(success)) #root {
+				--_skf-tag-bg-color: var(--skf-severity-bg-color-success);
+				--_skf-tag-border-color: var(--skf-severity-fg-color-success);
+			}
+
+			:host(:state(warning)) #root {
+				--_skf-tag-bg-color: var(--skf-severity-bg-color-warning);
+				--_skf-tag-border-color: var(--skf-severity-fg-color-warning);
+			}
 
-			&:focus-visible {
-				border-radius: var(--skf-border-radius-sm);
-				outline: var(--skf-border-width-md) solid var(--skf-interactive-border-color-focus);
+			:host(:state(sm)) #root {
+				--_skf-tag-border-radius: 0.25rem; /* token needed */
+				--_skf-tag-font-size: var(--skf-font-size-25);
+				--_skf-tag-height: var(--skf-size-24);
 			}
 		}
 	}

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

@@ -1,6 +1,7 @@
 import '../icon/icon.js';
 import { FormBase } from '../../internal/components/formBase.js';
 import '../../internal/components/hint/hint.js';
+import type { FormFieldSeverity } from '../../internal/types.js';
 import type { FormFieldBaseProps } from '../../internal/types/formField.js';
 import { type CSSResultGroup } from 'lit';
 interface SkfTextAreaProps extends Omit<FormFieldBaseProps, 'type'> {
@@ -14,8 +15,8 @@ interface SkfTextAreaProps extends Omit<FormFieldBaseProps, 'type'> {
  *
  * @documentation See [zeroheight](https://zeroheight.com/853e936c9/p/143f9d-text-area) 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
@@ -26,6 +27,7 @@ interface SkfTextAreaProps extends Omit<FormFieldBaseProps, 'type'> {
  */
 export declare class SkfTextArea extends FormBase implements SkfTextAreaProps {
     static styles: CSSResultGroup;
+    /** @internal */
     private customError;
     /** If defined, sets the cols of the textarea */
     cols?: number;
@@ -33,9 +35,9 @@ export declare class SkfTextArea extends FormBase implements SkfTextAreaProps {
     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;
     /** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */
@@ -49,18 +51,15 @@ export declare class SkfTextArea extends FormBase implements SkfTextAreaProps {
     /** 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, sets the rows of the textarea */
     rows?: number;
-    /**
-     * If defined, displays provided severity state
-     * @type {"success" | "info" | "warning" | "alert"}
-     */
-    severity?: SkfTextAreaProps['severity'];
+    /** If defined, displays provided severity state */
+    severity?: FormFieldSeverity;
     /** If true, displays valid state after interaction */
-    showValid?: boolean;
+    showValid: boolean;
     /** Size of the Textarea */
     size?: 'sm' | 'md';
     /** Sets validation start */

package/dist/components/textarea/textarea.component.js

@@ -1,28 +1,29 @@
 import "../icon/icon.js";
 import { FormBase as m } from "../../internal/components/formBase.js";
 import "../../internal/components/hint/hint.js";
-import { Asterisk as c } from "../../internal/templates/asterisk.js";
-import y from "../../styles/component.styles.js";
-import { html as p, nothing as v } from "lit";
-import { property as r, state as b, query as f } from "lit/decorators.js";
-import { ifDefined as n } from "lit/directives/if-defined.js";
-import g from "./textarea.styles.js";
-var $ = Object.defineProperty, E = Object.getOwnPropertyDescriptor, e = (h, t, s, a) => {
-  for (var l = a > 1 ? void 0 : a ? E(t, s) : t, o = h.length - 1, d; o >= 0; o--)
-    (d = h[o]) && (l = (a ? d(t, s, l) : d(l)) || l);
-  return a && l && $(t, s, l), l;
+import { hintSeverity as c } from "../../internal/helpers/hintSeverity.js";
+import { Asterisk as y } from "../../internal/templates/asterisk.js";
+import { componentStyles as f } from "../../styles/component.styles.js";
+import { nothing as u, html as v } from "lit";
+import { property as r, state as b, query as g } from "lit/decorators.js";
+import { ifDefined as o } from "lit/directives/if-defined.js";
+import $ from "./textarea.styles.js";
+var E = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, e = (p, i, s, a) => {
+  for (var l = a > 1 ? void 0 : a ? _(i, s) : i, n = p.length - 1, h; n >= 0; n--)
+    (h = p[n]) && (l = (a ? h(i, s, l) : h(l)) || l);
+  return a && l && E(i, s, l), l;
 };
-const u = class u extends m {
+const d = class d extends m {
   constructor() {
-    super(...arguments), this.size = "md", this.validateOn = "change", this.value = "", this.invalid = !1, this._resetValue = (t) => {
+    super(...arguments), this.debug = !1, this.hideLabel = !1, this.readonly = !1, this.showValid = !1, this.size = "md", this.validateOn = "change", this.value = "", this.invalid = !1, this._resetValue = (i) => {
       var s;
-      t.stopPropagation(), this.value = ((s = this.getAttribute("value")) == null ? void 0 : s.trim()) ?? "", this._internals.setFormValue(this.value), this.$input.focus();
+      i.stopPropagation(), this.value = ((s = this.getAttribute("value")) == null ? void 0 : s.trim()) ?? "", this._internals.setFormValue(this.value), this.$input.focus();
     }, this._handleInput = () => {
       this.value = this.$input.value || "", this.validateOn === "input" && (this.pristine = !1, this.validateInput());
     };
   }
-  set customInvalid(t) {
-    this.customError = t || "";
+  set customInvalid(i) {
+    this.customError = i ?? "";
   }
   get customInvalid() {
     return this.customError;
@@ -30,12 +31,12 @@ const u = class u extends m {
   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", (t) => {
-      this.pristine = !1, this.invalid = !0, this.customErrorDisplay && t.preventDefault();
+    }), this.addEventListener("invalid", (i) => {
+      this.pristine = !1, this.invalid = !0, this.customErrorDisplay && i.preventDefault();
     }), this.addEventListener("reset", this._resetValue), this.validateInput();
   }
-  willUpdate(t) {
-    if (t.has("invalid"))
+  willUpdate(i) {
+    if (i.has("invalid"))
       if (this.invalid) {
         this.setAttribute("invalid", ""), this.showValid || this.removeAttribute("valid");
         const s = this._internals.validationMessage;
@@ -43,11 +44,11 @@ const u = class u extends m {
       } else
         this.removeAttribute("invalid"), !this.pristine && this.showValid && this.setAttribute("valid", "true"), this.hint = this.getAttribute("hint") ?? "";
   }
-  attributeChangedCallback(t, s, a) {
-    if (super.attributeChangedCallback(t, s, a), t === "value" && this._internals.setFormValue(a), t === "custom-invalid")
+  attributeChangedCallback(i, s, a) {
+    if (super.attributeChangedCallback(i, s, a), i === "value" && this._internals.setFormValue(a), i === "custom-invalid")
       if (typeof a == "string") {
-        const o = this.withFallback(a);
-        this.pristine = !1, this._internals.setValidity({ customError: !0 }, o), this.invalid = !0, this.hint = o, this.checkValidity();
+        const n = this.withFallback(a);
+        this.pristine = !1, this._internals.setValidity({ customError: !0 }, n), this.invalid = !0, this.hint = n, this.checkValidity();
       } else
         this._internals.setValidity({}), this.validateInput();
   }
@@ -66,22 +67,22 @@ const u = class u extends m {
           `Add custom message on ${this.localName} using attribute: ${l.toUpperCase()}="Your custom message"`
         ), s[a]) {
           this.validationError = a.toString();
-          const o = this.hasAttribute(l) ? this.getAttribute(l) : this.$input.validationMessage;
+          const n = this.hasAttribute(l) ? this.getAttribute(l) : this.$input.validationMessage;
           this._internals.setValidity(
             { [this.validationError]: !0, customError: this._internals.validity.customError },
-            this.withFallback(o)
+            this.withFallback(n)
           ), this.invalid && this.customErrorDisplay && this.checkValidity();
         }
       }
     }
   }
   render() {
-    var t, s;
-    return p`
+    var i, s;
+    return v`
 			<div id="root">
 				<label>
 					<div class=${this.hideLabel ? "visually-hidden" : ""} id="label">
-						<slot>${this.label}</slot> ${this.required ? c(this.requiredLabel) : null}
+						<slot>${this.label}</slot> ${this.required ? y(this.requiredLabel) : null}
 					</div>
 					<div id="input">
 						<textarea
@@ -90,97 +91,94 @@ const u = class u extends m {
 							?required=${this.required}
 							.value=${this.value}
 							@input=${this._handleInput}
-							aria-describedby=${n((t = this.hint) != null && t.trim() ? "hint" : v)}
-							aria-errormessage=${n((s = this.hint) != null && s.trim() ? "hint" : v)}
+							aria-describedby=${o((i = this.hint) != null && i.trim() ? "hint" : u)}
+							aria-errormessage=${o((s = this.hint) != null && s.trim() ? "hint" : u)}
 							aria-invalid=${!!this.invalid}
-							cols=${n(this.cols)}
-							maxlength=${n(this.maxLength)}
-							minlength=${n(this.minLength)}
-							name=${n(this.name)}
-							placeholder=${n(this.placeholder)}
-							rows=${n(this.rows)}
+							cols=${o(this.cols)}
+							maxlength=${o(this.maxLength)}
+							minlength=${o(this.minLength)}
+							name=${o(this.name)}
+							placeholder=${o(this.placeholder)}
+							rows=${o(this.rows)}
 						>
 						</textarea>
 					</div>
 				</label>
-				${this.hint && p`
+				${this.hint && v`
 					<skf-hint
 						aria-live=${this.invalid ? "assertive" : "polite"}
 						id="hint"
-						severity=${n(_(this.severity, this.invalid))}
+						severity=${o(c(this.invalid, this.severity))}
 					>
-						${this.customInvalid ? this.customInvalid : this.hint}
+						${this.customInvalid ?? this.hint}
 					</skf-hint>
 				`}
 			</div>
 		`;
   }
 };
-u.styles = [y, g];
-let i = u;
+d.styles = [f, $];
+let t = d;
 e([
   r({ type: Number })
-], i.prototype, "cols", 2);
+], t.prototype, "cols", 2);
 e([
   r({ attribute: "custom-invalid", reflect: !0 })
-], i.prototype, "customInvalid", 1);
+], t.prototype, "customInvalid", 1);
 e([
   r({ type: Boolean })
-], i.prototype, "debug", 2);
+], t.prototype, "debug", 2);
 e([
   r({ type: Boolean, attribute: "hide-label" })
-], i.prototype, "hideLabel", 2);
+], t.prototype, "hideLabel", 2);
 e([
   r()
-], i.prototype, "hint", 2);
+], t.prototype, "hint", 2);
 e([
   r()
-], i.prototype, "label", 2);
+], t.prototype, "label", 2);
 e([
   r()
-], i.prototype, "name", 2);
+], t.prototype, "name", 2);
 e([
   r({ type: Number, attribute: "maxlength" })
-], i.prototype, "maxLength", 2);
+], t.prototype, "maxLength", 2);
 e([
   r({ type: Number, attribute: "minlength" })
-], i.prototype, "minLength", 2);
+], t.prototype, "minLength", 2);
 e([
   r()
-], i.prototype, "placeholder", 2);
+], t.prototype, "placeholder", 2);
 e([
   r({ type: Boolean })
-], i.prototype, "readonly", 2);
+], t.prototype, "readonly", 2);
 e([
   r({ attribute: "required-label" })
-], i.prototype, "requiredLabel", 2);
+], t.prototype, "requiredLabel", 2);
 e([
   r({ type: Number })
-], i.prototype, "rows", 2);
+], t.prototype, "rows", 2);
 e([
   r()
-], i.prototype, "severity", 2);
+], t.prototype, "severity", 2);
 e([
   r({ type: Boolean, attribute: "show-valid" })
-], i.prototype, "showValid", 2);
+], t.prototype, "showValid", 2);
 e([
   r({ reflect: !0 })
-], i.prototype, "size", 2);
+], t.prototype, "size", 2);
 e([
-  r({ type: String, attribute: "validate-on" })
-], i.prototype, "validateOn", 2);
+  r({ attribute: "validate-on" })
+], t.prototype, "validateOn", 2);
 e([
   r()
-], i.prototype, "value", 2);
+], t.prototype, "value", 2);
 e([
   b()
-], i.prototype, "invalid", 2);
+], t.prototype, "invalid", 2);
 e([
-  f("textarea")
-], i.prototype, "$input", 2);
-function _(h, t) {
-  return t ? "error" : h;
-}
+  g("textarea")
+], t.prototype, "$input", 2);
 export {
-  i as SkfTextArea
+  t as SkfTextArea
 };