nve-designsystem 3.1.0 → 3.3.0

package/components/nve-tag/nve-tag.component.js

@@ -1,87 +1,86 @@
-import { n as s, t as f } from "../../chunks/property.js";
-import { a as h, E as u, x as p } from "../../chunks/lit-element.js";
-import { e as g } from "../../chunks/class-map.js";
-import m from "./nve-tag.styles.js";
-var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, e = (r, l, o, i) => {
-  for (var a = i > 1 ? void 0 : i ? b(l, o) : l, n = r.length - 1, c; n >= 0; n--)
-    (c = r[n]) && (a = (i ? c(l, o, a) : c(a)) || a);
-  return i && a && v(l, o, a), a;
-};
-let t = class extends h {
-  constructor() {
-    super(...arguments), this.variant = "neutral", this.saturation = "default", this.size = "medium", this["extra-text"] = "", this.dot = !1, this.closeable = !1, this["close-aria-label"] = "Lukk";
-  }
-  closeButtonClick() {
-    const r = new CustomEvent("nve-close", {
-      bubbles: !0,
-      cancelable: !1,
-      composed: !0,
-      detail: {}
-    });
-    this.dispatchEvent(r);
-  }
-  render() {
-    return p`
+import { a as e, n as t, t as n } from "../../chunks/lit.js";
+import { o as r, s as i, t as a } from "../../chunks/decorate.js";
+import { t as o } from "../../chunks/class-map.js";
+import s from "./nve-tag.styles.js";
+//#region src/components/nve-tag/nve-tag.component.ts
+var c = class extends n {
+	constructor(...e) {
+		super(...e), this.variant = "neutral", this.saturation = "default", this.size = "medium", this.extraText = "", this.dot = !1, this.closeable = !1, this.closeAriaLabel = "Lukk";
+	}
+	static {
+		this.styles = [s];
+	}
+	closeButtonClick() {
+		let e = new CustomEvent("nve-close", {
+			bubbles: !0,
+			cancelable: !1,
+			composed: !0,
+			detail: {}
+		});
+		this.dispatchEvent(e);
+	}
+	render() {
+		return e`
       <span
         part="base"
-        class=${g({
-      tag: !0,
-      "tag--neutral": this.variant === "neutral",
-      "tag--info": this.variant === "info",
-      "tag--success": this.variant === "success",
-      "tag--warning": this.variant === "warning",
-      "tag--error": this.variant === "error",
-      "tag--small": this.size === "small",
-      "tag--medium": this.size === "medium",
-      "tag--saturation-emphasized": this.saturation === "emphasized",
-      "tag--saturation-subtle": this.saturation === "subtle",
-      "tag--saturation-default": this.saturation === "default"
-    })}
+        class=${o({
+			tag: !0,
+			"tag--neutral": this.variant === "neutral",
+			"tag--info": this.variant === "info",
+			"tag--success": this.variant === "success",
+			"tag--warning": this.variant === "warning",
+			"tag--error": this.variant === "error",
+			"tag--small": this.size === "small",
+			"tag--medium": this.size === "medium",
+			"tag--saturation-emphasized": this.saturation === "emphasized",
+			"tag--saturation-subtle": this.saturation === "subtle",
+			"tag--saturation-default": this.saturation === "default"
+		})}
       >
         <slot name="prefix"
-          >${this.dot ? p`<svg width="11" height="10" viewBox="0 0 11 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+          >${this.dot ? e`<svg width="11" height="10" viewBox="0 0 11 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <circle cx="5.5" cy="5" r="5" fill="currentcolor" />
-              </svg> ` : u}</slot
+              </svg> ` : t}</slot
         >
         <slot part="text"></slot>
-        <slot name="extra" part="extra">${this["extra-text"]}</slot>
-        ${this.closeable ? p`<button
+        <slot name="extra" part="extra">${this.extraText}</slot>
+        ${this.closeable ? e`<button
               part="close"
               class="tag-close"
-              aria-label="${this["close-aria-label"]}"
+              aria-label="${this.closeAriaLabel}"
               @click=${this.closeButtonClick}
             >
               <nve-icon name="close"></nve-icon>
-            </button>` : u}
+            </button>` : t}
       </span>
     `;
-  }
-};
-t.styles = [m];
-e([
-  s({ type: String, reflect: !0 })
-], t.prototype, "variant", 2);
-e([
-  s({ type: String, reflect: !0 })
-], t.prototype, "saturation", 2);
-e([
-  s({ type: String, reflect: !0 })
-], t.prototype, "size", 2);
-e([
-  s({ type: String, reflect: !1, attribute: !0 })
-], t.prototype, "extra-text", 2);
-e([
-  s({ type: Boolean, reflect: !1 })
-], t.prototype, "dot", 2);
-e([
-  s({ type: Boolean, reflect: !1 })
-], t.prototype, "closeable", 2);
-e([
-  s({ type: String, reflect: !1 })
-], t.prototype, "close-aria-label", 2);
-t = e([
-  f("nve-tag")
-], t);
-export {
-  t as default
+	}
 };
+a([r({
+	type: String,
+	reflect: !0
+})], c.prototype, "variant", void 0), a([r({
+	type: String,
+	reflect: !0
+})], c.prototype, "saturation", void 0), a([r({
+	type: String,
+	reflect: !0
+})], c.prototype, "size", void 0), a([r({
+	type: String,
+	reflect: !1,
+	attribute: "extra-text"
+})], c.prototype, "extraText", void 0), a([r({
+	type: Boolean,
+	reflect: !1
+})], c.prototype, "dot", void 0), a([r({
+	type: Boolean,
+	reflect: !1,
+	attribute: "closeable"
+})], c.prototype, "closeable", void 0), a([r({
+	type: String,
+	reflect: !1,
+	attribute: "close-aria-label"
+})], c.prototype, "closeAriaLabel", void 0), c = a([i("nve-tag")], c);
+var l = c;
+//#endregion
+export { l as default };

package/components/nve-tag/nve-tag.styles.js

@@ -1,5 +1,6 @@
-import { i as o } from "../../chunks/lit-element.js";
-const e = o`
+import { u as e } from "../../chunks/lit.js";
+//#region src/components/nve-tag/nve-tag.styles.ts
+var t = e`
   .tag {
     display: flex;
     gap: var(--spacing-2x-small);
@@ -15,104 +16,105 @@ const e = o`
 
   :host([variant='neutral'][saturation='emphasized']) {
     --_bg-color: var(--color-feedback-background-emphasized-neutral);
-    --_text-color: var(--color-feedback-foreground-emphasized-neutral);
+    --_text-color: var(--color-feedback-foreground-on-bg-emphasized-neutral,);
     --_hover-bg-color: var(--color-feedback-background-default-neutral);
     --_hover-text-color: var(--color-feedback-foreground-default-neutral);
   }
 
   :host([variant='neutral'][saturation='default']) {
     --_bg-color: var(--color-feedback-background-default-neutral);
-    --_text-color: var(--color-feedback-foreground-default-neutral);
+    --_text-color: var(--color-feedback-foreground-on-bg-subtle-neutral);
     --_hover-bg-color: var(--color-feedback-background-subtle-neutral);
     --_hover-text-color: var(--color-feedback-foreground-subtle-neutral);
   }
-  color- :host([variant='neutral'][saturation='subtle']) {
+
+  :host([variant='neutral'][saturation='subtle']) {
     --_bg-color: var(--color-feedback-background-subtle-neutral);
-    --_text-color: var(--color-feedback-foreground-subtle-neutral);
+    --_text-color: var(--color-feedback-foreground-on-bg-subtle-neutral);
     --_hover-bg-color: var(--color-feedback-background-default-neutral);
     --_hover-text-color: var(--color-feedback-foreground-default-neutral);
   }
 
   :host([variant='success'][saturation='emphasized']) {
     --_bg-color: var(--color-feedback-background-emphasized-success);
-    --_text-color: var(--color-feedback-foreground-emphasized-success);
+    --_text-color: var(--color-feedback-foreground-on-bg-emphasized-success);
     --_hover-bg-color: var(--color-feedback-background-default-success);
     --_hover-text-color: var(--color-feedback-foreground-default-success);
   }
 
   :host([variant='success'][saturation='default']) {
     --_bg-color: var(--color-feedback-background-default-success);
-    --_text-color: var(--color-feedback-foreground-default-success);
+    --_text-color: var(--color-feedback-foreground-on-bg-subtle-success);
     --_hover-bg-color: var(--color-feedback-background-subtle-success);
     --_hover-text-color: var(--color-feedback-foreground-subtle-success);
   }
 
   :host([variant='success'][saturation='subtle']) {
     --_bg-color: var(--color-feedback-background-subtle-success);
-    --_text-color: var(--color-feedback-foreground-subtle-success);
+    --_text-color: var(--color-feedback-foreground-on-bg-subtle-success);
     --_hover-bg-color: var(--color-feedback-background-default-success);
     --_hover-text-color: var(--color-feedback-foreground-default-success);
   }
 
   :host([variant='info'][saturation='emphasized']) {
     --_bg-color: var(--color-feedback-background-emphasized-info);
-    --_text-color: var(--color-feedback-foreground-emphasized-info);
+    --_text-color: var(--color-feedback-foreground-on-bg-emphasized-info);
     --_hover-bg-color: var(--color-feedback-background-default-info);
     --_hover-text-color: var(--color-feedback-foreground-default-info);
   }
 
   :host([variant='info'][saturation='default']) {
     --_bg-color: var(--color-feedback-background-default-info);
-    --_text-color: var(--color-feedback-foreground-default-info);
+    --_text-color: var(--color-feedback-foreground-on-bg-subtle-info);
     --_hover-bg-color: var(--color-feedback-background-subtle-info);
     --_hover-text-color: var(--color-feedback-foreground-subtle-info);
   }
 
   :host([variant='info'][saturation='subtle']) {
     --_bg-color: var(--color-feedback-background-subtle-info);
-    --_text-color: var(--color-feedback-foreground-subtle-info);
+    --_text-color: var(--color-feedback-foreground-on-bg-subtle-info);
     --_hover-bg-color: var(--color-feedback-background-default-info);
     --_hover-text-color: var(--color-feedback-foreground-default-info);
   }
 
   :host([variant='warning'][saturation='emphasized']) {
     --_bg-color: var(--color-feedback-background-emphasized-warning);
-    --_text-color: var(--color-feedback-foreground-emphasized-warning);
+    --_text-color: var(--color-feedback-foreground-on-bg-emphasized-warning);
     --_hover-bg-color: var(--color-feedback-background-default-warning);
     --_hover-text-color: var(--color-feedback-foreground-default-warning);
   }
 
   :host([variant='warning'][saturation='default']) {
     --_bg-color: var(--color-feedback-background-default-warning);
-    --_text-color: var(--color-feedback-foreground-default-warning);
+    --_text-color: var(--color-feedback-foreground-on-bg-subtle-warning);
     --_hover-bg-color: var(--color-feedback-background-subtle-warning);
     --_hover-text-color: var(--color-feedback-foreground-subtle-warning);
   }
 
   :host([variant='warning'][saturation='subtle']) {
     --_bg-color: var(--color-feedback-background-subtle-warning);
-    --_text-color: var(--color-feedback-foreground-subtle-warning);
+    --_text-color: var(--color-feedback-foreground-on-bg-subtle-warning);
     --_hover-bg-color: var(--color-feedback-background-default-warning);
     --_hover-text-color: var(--color-feedback-foreground-default-warning);
   }
 
   :host([variant='error'][saturation='emphasized']) {
     --_bg-color: var(--color-feedback-background-emphasized-error);
-    --_text-color: var(--color-feedback-foreground-emphasized-error);
+    --_text-color: var(--color-feedback-foreground-on-bg-emphasized-error);
     --_hover-bg-color: var(--color-feedback-background-default-error);
     --_hover-text-color: var(--color-feedback-foreground-default-error);
   }
 
   :host([variant='error'][saturation='default']) {
     --_bg-color: var(--color-feedback-background-default-error);
-    --_text-color: var(--color-feedback-foreground-default-error);
+    --_text-color: var(--color-feedback-foreground-on-bg-subtle-error);
     --_hover-bg-color: var(--color-feedback-background-subtle-error);
     --_hover-text-color: var(--color-feedback-foreground-subtle-error);
   }
 
   :host([variant='error'][saturation='subtle']) {
     --_bg-color: var(--color-feedback-background-subtle-error);
-    --_text-color: var(--color-feedback-foreground-subtle-error);
+    --_text-color: var(--color-feedback-foreground-on-bg-subtle-error);
     --_hover-bg-color: var(--color-feedback-background-default-error);
     --_hover-text-color: var(--color-feedback-foreground-default-error);
   }
@@ -170,9 +172,8 @@ const e = o`
   }
 
   .tag.tag--saturation-emphasized.tag--neutral:has(.tag-close:focus-visible) {
-    outline-color: var(--color-interactive-primary-foreground-border-focus);
+    outline-color: var(--color-interactive-border-accessibility-focus);
   }
 `;
-export {
-  e as default
-};
+//#endregion
+export { t as default };

package/components/nve-textarea/nve-textarea.component.d.ts

@@ -40,6 +40,8 @@ export default class NveTextarea extends LitElement implements INveComponent {
     label: string;
     /** Hjelpetekst under textarea */
     helpText: string;
+    /** Hint - tekst under inndatafelt */
+    hint: string;
     /** Om textarea er deaktivert */
     disabled: boolean;
     /** Om textarea er skrivebeskyttet */
@@ -57,7 +59,7 @@ export default class NveTextarea extends LitElement implements INveComponent {
     /** Kontrollerer om og hvordan tekstinnput automatisk blir gjort stor som det blir skrevet inn av brukeren. */
     autocapitalize: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
     /** Indikerer om nettleserens autokorrekturfunksjon er på eller av. */
-    autocorrect?: string;
+    autocorrect: 'on' | 'off';
     /** Indikerer om nettleserens autokorrekturfunksjon er på eller av. */
     tooltip?: string;
     /**

package/components/nve-textarea/nve-textarea.component.js

@@ -1,103 +1,101 @@
-import { a as m, E as p, x as o } from "../../chunks/lit-element.js";
-import { n as s, t as b } from "../../chunks/property.js";
-import { r as u } from "../../chunks/state.js";
-import { e as v } from "../../chunks/query.js";
-import f from "./nve-textarea.styles.js";
-import { o as r } from "../../chunks/if-defined.js";
-import { l as y } from "../../chunks/live.js";
-import { e as g } from "../../chunks/class-map.js";
+import { a as e, n as t, t as n } from "../../chunks/lit.js";
+import { a as r, o as i, r as a, s as o, t as s } from "../../chunks/decorate.js";
+import { t as c } from "../../chunks/class-map.js";
+import { t as l } from "../../chunks/if-defined.js";
+import { t as u } from "../../chunks/live.js";
 import "../nve-icon/nve-icon.component.js";
-import "../nve-label/nve-label.component.js";
-var x = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, t = (i, l, a, h) => {
-  for (var n = h > 1 ? void 0 : h ? _(l, a) : l, d = i.length - 1, c; d >= 0; d--)
-    (c = i[d]) && (n = (h ? c(l, a, n) : c(n)) || n);
-  return h && n && x(l, a, n), n;
-};
-let e = class extends m {
-  constructor() {
-    super(), this.name = "", this.value = "", this.title = "", this.filled = !1, this.label = "", this.helpText = "", this.disabled = !1, this.readonly = !1, this.placeholder = "", this.required = !1, this.requiredLabel = "*Obligatorisk", this.autocapitalize = "off", this.testId = "", this.showErrorMessage = !1, this.touched = !1, this.resizeObserver = null;
-  }
-  firstUpdated() {
-    if (this.requiredLabel && this.style.setProperty("--textarea-required-content", `"${this.requiredLabel}"`), this.required) {
-      const a = this.input.checkValidity();
-      this.toggleAttribute("data-valid", a), this.toggleAttribute("data-invalid", !a);
-    }
-    const i = this.shadowRoot?.querySelector(".textarea__control"), l = this.shadowRoot?.querySelector(".textarea__label");
-    i && l && (this.resizeObserver = new ResizeObserver((a) => {
-      for (const h of a)
-        l.style.width = `${h.contentRect.width + 32}px`;
-    }), this.resizeObserver.observe(i));
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.closest("form")?.addEventListener("submit", this.handleSubmit.bind(this));
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.closest("form")?.removeEventListener("submit", this.handleSubmit.bind(this)), this.resizeObserver?.disconnect();
-  }
-  // kan senere flyttes til utils hvis blir brukt flere steder
-  emit(i) {
-    this.dispatchEvent(new CustomEvent(i));
-  }
-  handleSubmit(i) {
-    i.preventDefault(), this.checkValidity();
-  }
-  // validerer ikke hvis bruker ikke har tatt på input feltet
-  handleBlur() {
-    this.touched && this.checkValidity(), this.emit("sl-blur");
-  }
-  handleChange() {
-    this.value = this.input.value, this.emit("sl-change");
-  }
-  handleInput() {
-    this.touched = !0, this.value = this.input.value, this.emit("sl-input");
-  }
-  /** Sjekker constraint validation og hvis man kjørte setCustomValidity med en melding, checkValidity blir falsk og. Hvis man ikke bruker errorMessage property vil den vise default engelsk tekst istedenfor */
-  checkValidity() {
-    this.input.checkValidity() ? this.resetValidation() : this.makeInvalid();
-  }
-  setCustomValidity(i = "") {
-    this.input.setCustomValidity(i), this.checkValidity();
-  }
-  makeInvalid() {
-    this.errorMessage = this.errorMessage || this.input.validationMessage, this.showErrorMessage = !0, this.emit("sl-invalid"), this.toggleValidationAttributes(!1);
-  }
-  resetValidation() {
-    this.showErrorMessage = !1, this.toggleValidationAttributes(!0);
-  }
-  /** Toggler riktig validering attribute for å vise riktig style */
-  toggleValidationAttributes(i) {
-    this.toggleAttribute("data-valid", i), this.toggleAttribute("data-user-valid", i), this.toggleAttribute("data-invalid", !i), this.toggleAttribute("data-user-invalid", !i);
-  }
-  // eslint-disable-next-line max-lines-per-function
-  render() {
-    const i = !!this.querySelector('[slot="label"]');
-    return o`
-      <div part="form-control" class=${g({ "form-control": !0, "form-control--has-label": this.label })}>
-        ${i ? o`<slot name="label"></slot>` : this.label ? o`<nve-label
+import "../../chunks/nve-label.component.js";
+import d from "./nve-textarea.styles.js";
+//#region src/components/nve-textarea/nve-textarea.component.ts
+var f = class extends n {
+	static {
+		this.styles = [d];
+	}
+	constructor() {
+		super(), this.name = "", this.value = "", this.title = "", this.filled = !1, this.label = "", this.helpText = "", this.hint = "", this.disabled = !1, this.readonly = !1, this.placeholder = "", this.required = !1, this.requiredLabel = "*Obligatorisk", this.autocapitalize = "off", this.autocorrect = "off", this.testId = "", this.showErrorMessage = !1, this.touched = !1, this.resizeObserver = null;
+	}
+	firstUpdated() {
+		if (this.requiredLabel && this.style.setProperty("--textarea-required-content", `"${this.requiredLabel}"`), this.required) {
+			let e = this.input.checkValidity();
+			this.toggleAttribute("data-valid", e), this.toggleAttribute("data-invalid", !e);
+		}
+		let e = this.shadowRoot?.querySelector(".textarea__control"), t = this.shadowRoot?.querySelector(".textarea__label");
+		e && t && (this.resizeObserver = new ResizeObserver((e) => {
+			for (let n of e) t.style.width = `${n.contentRect.width + 32}px`;
+		}), this.resizeObserver.observe(e));
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.closest("form")?.addEventListener("submit", this.handleSubmit.bind(this));
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.closest("form")?.removeEventListener("submit", this.handleSubmit.bind(this)), this.resizeObserver?.disconnect();
+	}
+	emit(e) {
+		this.dispatchEvent(new CustomEvent(e));
+	}
+	handleSubmit(e) {
+		e.preventDefault(), this.checkValidity();
+	}
+	handleBlur() {
+		this.touched && this.checkValidity(), this.emit("sl-blur");
+	}
+	handleChange() {
+		this.value = this.input.value, this.emit("sl-change");
+	}
+	handleInput() {
+		this.touched = !0, this.value = this.input.value, this.emit("sl-input");
+	}
+	checkValidity() {
+		this.input.checkValidity() ? this.resetValidation() : this.makeInvalid();
+	}
+	setCustomValidity(e = "") {
+		this.input.setCustomValidity(e), this.checkValidity();
+	}
+	makeInvalid() {
+		this.errorMessage = this.errorMessage || this.input.validationMessage, this.showErrorMessage = !0, this.emit("sl-invalid"), this.toggleValidationAttributes(!1);
+	}
+	resetValidation() {
+		this.showErrorMessage = !1, this.toggleValidationAttributes(!0);
+	}
+	toggleValidationAttributes(e) {
+		this.toggleAttribute("data-valid", e), this.toggleAttribute("data-user-valid", e), this.toggleAttribute("data-invalid", !e), this.toggleAttribute("data-user-invalid", !e);
+	}
+	render() {
+		let n = !!this.querySelector("[slot=\"label\"]");
+		return e`
+      <div part="form-control" class=${c({
+			"form-control": !0,
+			"form-control--has-label": this.label
+		})}>
+        ${n ? e`<slot name="label"></slot>` : this.label ? e`<nve-label
                 id="label"
                 value=${this.label}
                 size="small"
-                tooltip=${r(this.tooltip)}
-              ></nve-label>` : p}
+                tooltip=${l(this.tooltip)}
+              ></nve-label>` : t}
+        ${this.helpText ? e` <div part="help-text-container" class="textarea__help-text__container">
+              <span class="textarea__help-text" aria-hidden=${this.helpText ? "false" : "true"}>${this.helpText}</span>
+            </div>` : t}
+
         <div part="base" class="textarea__base">
           <textarea
             part="textarea"
             class="textarea__control"
             title=${this.title}
-            name=${r(this.name)}
-            .value=${y(this.value)}
+            name=${l(this.name)}
+            .value=${u(this.value)}
             ?disabled=${this.disabled}
             ?readonly=${this.readonly}
             ?required=${this.required}
-            placeholder=${r(this.placeholder)}
-            minlength=${r(this.minlength)}
-            maxlength=${r(this.maxlength)}
-            autocapitalize=${r(this.autocapitalize)}
-            autocorrect=${r(this.autocorrect)}
+            placeholder=${l(this.placeholder)}
+            minlength=${l(this.minlength)}
+            maxlength=${l(this.maxlength)}
+            autocapitalize=${l(this.autocapitalize)}
+            autocorrect=${l(this.autocorrect)}
             ?autofocus=${this.autofocus}
-            inputmode=${r(this.inputmode)}
+            inputmode=${l(this.inputmode)}
             aria-describedby="help-text"
-            rows=${r(this.rows && this.rows >= 3 ? this.rows : 3)}
+            rows=${l(this.rows && this.rows >= 3 ? this.rows : 3)}
             @change=${this.handleChange}
             @input=${this.handleInput}
             @blur=${this.handleBlur}
@@ -107,95 +105,36 @@ let e = class extends m {
           Må gjøres sånn fordi vi vil ikke begrense textarea__base brede til fit-content (da textarea kan aldri ta så mye plass som er 
           tilgjengelig i nettleseren og man må alltid sette brede på den manuelt. Nei takk.) -->
           <!-- Foreløpig kan man ha enten 'lock' eller 'error' ikone -->
-          ${this.disabled || this.showErrorMessage ? o`<div class="textarea__icon__container">
-                ${this.disabled ? o`<nve-icon name="lock"></nve-icon>` : null}
-                ${this.showErrorMessage ? o`<nve-icon class="textarea__icon--error" name="error"></nve-icon>` : null}
-              </div>` : p}
+          ${this.disabled || this.showErrorMessage ? e`<div class="textarea__icon__container">
+                ${this.disabled ? e`<nve-icon name="lock"></nve-icon>` : null}
+                ${this.showErrorMessage ? e`<nve-icon class="textarea__icon--error" name="error"></nve-icon>` : null}
+              </div>` : t}
         </div>
-        <div part="help-text-container" class="textarea__help-text__container">
-          <!-- Ikke vis hjelpe tekst mens feil -->
-          ${!this.showErrorMessage && this.helpText ? o`<span class="textarea__help-text" aria-hidden=${this.helpText ? "false" : "true"}
-                >${this.helpText}</span
-              >` : p}
-          ${this.showErrorMessage ? o`<span class="textarea__help-text textarea__help-text--error">${this.errorMessage}</span>` : p}
+        <div part="hint-text-container" class="textarea__hint-text__container">
+          <!-- Ikke vis hint dersom feil -->
+          ${!this.showErrorMessage && this.hint ? e`<span class="textarea__hint" aria-hidden=${this.hint ? "false" : "true"}>${this.hint}</span>` : t}
+          ${this.showErrorMessage ? e`<span class="textarea__help-text textarea__help-text--error">${this.errorMessage}</span>` : t}
         </div>
       </div>
     `;
-  }
-};
-e.styles = [f];
-t([
-  s()
-], e.prototype, "name", 2);
-t([
-  s()
-], e.prototype, "value", 2);
-t([
-  s()
-], e.prototype, "errorMessage", 2);
-t([
-  s()
-], e.prototype, "title", 2);
-t([
-  s({ type: Boolean, reflect: !0 })
-], e.prototype, "filled", 2);
-t([
-  s()
-], e.prototype, "label", 2);
-t([
-  s()
-], e.prototype, "helpText", 2);
-t([
-  s({ type: Boolean, reflect: !0 })
-], e.prototype, "disabled", 2);
-t([
-  s({ type: Boolean, reflect: !0 })
-], e.prototype, "readonly", 2);
-t([
-  s()
-], e.prototype, "placeholder", 2);
-t([
-  s({ type: Boolean, reflect: !0 })
-], e.prototype, "required", 2);
-t([
-  s()
-], e.prototype, "requiredLabel", 2);
-t([
-  s({ type: Number })
-], e.prototype, "minlength", 2);
-t([
-  s({ type: Number })
-], e.prototype, "maxlength", 2);
-t([
-  s()
-], e.prototype, "autocapitalize", 2);
-t([
-  s()
-], e.prototype, "autocorrect", 2);
-t([
-  s()
-], e.prototype, "tooltip", 2);
-t([
-  s({ reflect: !0, type: String })
-], e.prototype, "testId", 2);
-t([
-  s()
-], e.prototype, "inputmode", 2);
-t([
-  s()
-], e.prototype, "rows", 2);
-t([
-  u()
-], e.prototype, "showErrorMessage", 2);
-t([
-  u()
-], e.prototype, "touched", 2);
-t([
-  v(".textarea__control")
-], e.prototype, "input", 2);
-e = t([
-  b("nve-textarea")
-], e);
-export {
-  e as default
+	}
 };
+s([i()], f.prototype, "name", void 0), s([i()], f.prototype, "value", void 0), s([i()], f.prototype, "errorMessage", void 0), s([i()], f.prototype, "title", void 0), s([i({
+	type: Boolean,
+	reflect: !0
+})], f.prototype, "filled", void 0), s([i()], f.prototype, "label", void 0), s([i()], f.prototype, "helpText", void 0), s([i()], f.prototype, "hint", void 0), s([i({
+	type: Boolean,
+	reflect: !0
+})], f.prototype, "disabled", void 0), s([i({
+	type: Boolean,
+	reflect: !0
+})], f.prototype, "readonly", void 0), s([i()], f.prototype, "placeholder", void 0), s([i({
+	type: Boolean,
+	reflect: !0
+})], f.prototype, "required", void 0), s([i()], f.prototype, "requiredLabel", void 0), s([i({ type: Number })], f.prototype, "minlength", void 0), s([i({ type: Number })], f.prototype, "maxlength", void 0), s([i()], f.prototype, "autocapitalize", void 0), s([i()], f.prototype, "autocorrect", void 0), s([i()], f.prototype, "tooltip", void 0), s([i({
+	reflect: !0,
+	type: String
+})], f.prototype, "testId", void 0), s([i()], f.prototype, "inputmode", void 0), s([i()], f.prototype, "rows", void 0), s([r()], f.prototype, "showErrorMessage", void 0), s([r()], f.prototype, "touched", void 0), s([a(".textarea__control")], f.prototype, "input", void 0), f = s([o("nve-textarea")], f);
+var p = f;
+//#endregion
+export { p as default };