nve-designsystem 0.1.56 → 0.1.58

package/chunks/chunk.2HU27ZWH.js

@@ -1,10 +1,11 @@
-import { c as p, b as l, S as f } from "./chunk.JS655M6J.js";
+import { c as p, b as o, S as f } from "./chunk.JS655M6J.js";
 import { i as g, x as y } from "./lit-element.js";
-import { w, u as L, g as m } from "./chunk.3WAW4E2K.js";
-import { w as b } from "./chunk.Q6ASPMKT.js";
+import { w, u as L, g as b } from "./chunk.3WAW4E2K.js";
+import { w as v } from "./chunk.Q6ASPMKT.js";
+import { e as C } from "./directive-helpers.js";
 import { n as h } from "./property.js";
-import { r as _ } from "./state.js";
-var C = g`
+import { r as I } from "./state.js";
+var R = g`
   ${p}
 
   :host {
@@ -19,14 +20,7 @@ var C = g`
     height: 100%;
     width: 100%;
   }
-`;
-/**
- * @license
- * Copyright 2020 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const I = (t, e) => e === void 0 ? (t == null ? void 0 : t._$litType$) !== void 0 : (t == null ? void 0 : t._$litType$) === e, H = (t) => t.strings === void 0, R = {}, M = (t, e = R) => t._$AH = e;
-var o = Symbol(), c = Symbol(), d, v = /* @__PURE__ */ new Map(), a = class extends f {
+`, l = Symbol(), c = Symbol(), d, m = /* @__PURE__ */ new Map(), a = class extends f {
   constructor() {
     super(...arguments), this.initialRender = !1, this.svg = null, this.label = "", this.library = "default";
   }
@@ -40,7 +34,7 @@ var o = Symbol(), c = Symbol(), d, v = /* @__PURE__ */ new Map(), a = class exte
       </svg>`;
     try {
       if (r = await fetch(t, { mode: "cors" }), !r.ok)
-        return r.status === 410 ? o : c;
+        return r.status === 410 ? l : c;
     } catch {
       return c;
     }
@@ -49,12 +43,12 @@ var o = Symbol(), c = Symbol(), d, v = /* @__PURE__ */ new Map(), a = class exte
       s.innerHTML = await r.text();
       const i = s.firstElementChild;
       if (((n = i == null ? void 0 : i.tagName) == null ? void 0 : n.toLowerCase()) !== "svg")
-        return o;
+        return l;
       d || (d = new DOMParser());
       const u = d.parseFromString(i.outerHTML, "text/html").body.querySelector("svg");
-      return u ? (u.part.add("svg"), document.adoptNode(u)) : o;
+      return u ? (u.part.add("svg"), document.adoptNode(u)) : l;
     } catch {
-      return o;
+      return l;
     }
   }
   connectedCallback() {
@@ -67,7 +61,7 @@ var o = Symbol(), c = Symbol(), d, v = /* @__PURE__ */ new Map(), a = class exte
     super.disconnectedCallback(), L(this);
   }
   getIconSource() {
-    const t = m(this.library);
+    const t = b(this.library);
     return this.name && t ? {
       url: t.resolver(this.name),
       fromLibrary: !0
@@ -81,23 +75,23 @@ var o = Symbol(), c = Symbol(), d, v = /* @__PURE__ */ new Map(), a = class exte
   }
   async setIcon() {
     var t;
-    const { url: e, fromLibrary: n } = this.getIconSource(), r = n ? m(this.library) : void 0;
+    const { url: e, fromLibrary: n } = this.getIconSource(), r = n ? b(this.library) : void 0;
     if (!e) {
       this.svg = null;
       return;
     }
-    let s = v.get(e);
-    if (s || (s = this.resolveIcon(e, r), v.set(e, s)), !this.initialRender)
+    let s = m.get(e);
+    if (s || (s = this.resolveIcon(e, r), m.set(e, s)), !this.initialRender)
       return;
     const i = await s;
-    if (i === c && v.delete(e), e === this.getIconSource().url) {
-      if (I(i)) {
+    if (i === c && m.delete(e), e === this.getIconSource().url) {
+      if (C(i)) {
         this.svg = i;
         return;
       }
       switch (i) {
         case c:
-        case o:
+        case l:
           this.svg = null, this.emit("sl-error");
           break;
         default:
@@ -109,30 +103,28 @@ var o = Symbol(), c = Symbol(), d, v = /* @__PURE__ */ new Map(), a = class exte
     return this.svg;
   }
 };
-a.styles = C;
-l([
-  _()
+a.styles = R;
+o([
+  I()
 ], a.prototype, "svg", 2);
-l([
+o([
   h({ reflect: !0 })
 ], a.prototype, "name", 2);
-l([
+o([
   h()
 ], a.prototype, "src", 2);
-l([
+o([
   h()
 ], a.prototype, "label", 2);
-l([
+o([
   h({ reflect: !0 })
 ], a.prototype, "library", 2);
-l([
-  b("label")
+o([
+  v("label")
 ], a.prototype, "handleLabelChange", 1);
-l([
-  b(["name", "src", "library"])
+o([
+  v(["name", "src", "library"])
 ], a.prototype, "setIcon", 1);
 export {
-  a as S,
-  H as f,
-  M as m
+  a as S
 };

package/chunks/chunk.YCHBWCKL.js

@@ -33,6 +33,6 @@ function b(t) {
   });
 }
 export {
-  b as a,
-  d as g
+  d as a,
+  b as g
 };

package/chunks/directive-helpers.js

@@ -0,0 +1,12 @@
+import "./lit-element.js";
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const p = (i, $) => $ === void 0 ? (i == null ? void 0 : i._$litType$) !== void 0 : (i == null ? void 0 : i._$litType$) === $, s = (i) => i.strings === void 0, t = {}, d = (i, $ = t) => i._$AH = $;
+export {
+  p as e,
+  s as f,
+  d as m
+};

package/chunks/live.js

@@ -1,6 +1,6 @@
 import { w as n, T as s } from "./lit-element.js";
 import { a as T, i as f, t } from "./class-map.js";
-import { f as l, m as p } from "./chunk.2HU27ZWH.js";
+import { f as l, m as p } from "./directive-helpers.js";
 /**
  * @license
  * Copyright 2020 Google LLC

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

@@ -14,6 +14,7 @@ import "../../chunks/static.js";
 import "../../chunks/if-defined.js";
 import "../../chunks/state.js";
 import "../../chunks/chunk.3WAW4E2K.js";
+import "../../chunks/directive-helpers.js";
 var T = $`
   ${z}
 
@@ -246,10 +247,10 @@ b("alert.hide", {
 });
 var _ = t;
 t.define("sl-alert");
-var D = Object.defineProperty, B = Object.getOwnPropertyDescriptor, n = (e, r, h, c) => {
-  for (var s = c > 1 ? void 0 : c ? B(r, h) : r, p = e.length - 1, d; p >= 0; p--)
-    (d = e[p]) && (s = (c ? d(r, h, s) : d(s)) || s);
-  return c && s && D(r, h, s), s;
+var D = Object.defineProperty, B = Object.getOwnPropertyDescriptor, n = (e, r, p, c) => {
+  for (var s = c > 1 ? void 0 : c ? B(r, p) : r, h = e.length - 1, d; h >= 0; h--)
+    (d = e[h]) && (s = (c ? d(r, p, s) : d(s)) || s);
+  return c && s && D(r, p, s), s;
 };
 let o = class extends _ {
   constructor() {

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

@@ -42,7 +42,7 @@ const a = r`
     padding: var(--spacing-xx-small);
     border-radius: 50%;
     stroke: var(--neutrals-foreground-primary);
-    transition: background-color 0.3s ease;
+    transition: background-color var(--transition-time) ease;
   }
 
   :host::part(message)::after {

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

@@ -10,11 +10,12 @@ import { b as e, S as w } from "../../chunks/chunk.JS655M6J.js";
 import { e as F } from "../../chunks/class-map.js";
 import { s as d, n as f } from "../../chunks/static.js";
 import { o as s } from "../../chunks/if-defined.js";
-import { r as c } from "../../chunks/state.js";
+import { r as m } from "../../chunks/state.js";
 import { e as V } from "../../chunks/query.js";
 import z from "./nve-button.styles.js";
 import "../../chunks/lit-element.js";
 import "../../chunks/chunk.3WAW4E2K.js";
+import "../../chunks/directive-helpers.js";
 var t = class extends w {
   constructor() {
     super(...arguments), this.formControlController = new C(this, {
@@ -153,10 +154,10 @@ e([
   V(".button")
 ], t.prototype, "button", 2);
 e([
-  c()
+  m()
 ], t.prototype, "hasFocus", 2);
 e([
-  c()
+  m()
 ], t.prototype, "invalid", 2);
 e([
   r()
@@ -227,19 +228,19 @@ e([
 e([
   S("disabled", { waitUntilFirstUpdate: !0 })
 ], t.prototype, "handleDisabledChange", 1);
-var m = t;
+var c = t;
 t.define("sl-button");
 var I = Object.defineProperty, k = Object.getOwnPropertyDescriptor, b = (o, i, a, n) => {
   for (var l = n > 1 ? void 0 : n ? k(i, a) : i, h = o.length - 1, p; h >= 0; h--)
     (p = o[h]) && (l = (n ? p(i, a, l) : p(l)) || l);
   return n && l && I(i, a, l), l;
 };
-let u = class extends m {
+let u = class extends c {
   constructor() {
     super(), this.size = "large";
   }
 };
-u.styles = [m.styles, z];
+u.styles = [c.styles, z];
 b([
   r({ reflect: !0 })
 ], u.prototype, "size", 2);

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

@@ -12,6 +12,7 @@ import { r as z } from "../../chunks/state.js";
 import { e as $ } from "../../chunks/query.js";
 import w from "./nve-checkbox.styles.js";
 import "../../chunks/chunk.3WAW4E2K.js";
+import "../../chunks/directive-helpers.js";
 var F = m`
   ${f}
 

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

@@ -14,7 +14,7 @@ const e = r`
     border-radius: var(--border-radius-small);
     width: 1.1rem;
     height: 1.1rem;
-    transition: all 0.3s ease-in;
+    transition: all var(--transition-time) ease-in;
   }
 
   :host::part(control control--checked),

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

@@ -1,4 +1,4 @@
-import { a as b } from "../../chunks/chunk.YCHBWCKL.js";
+import { g as b } from "../../chunks/chunk.YCHBWCKL.js";
 import { d as A, c as F, b as r, S as L } from "../../chunks/chunk.JS655M6J.js";
 import { l as _, u as w } from "../../chunks/chunk.RK73WSZS.js";
 import { i as z, x } from "../../chunks/lit-element.js";
@@ -16,6 +16,7 @@ import K from "./nve-dialog-styles.js";
 import "../../chunks/static.js";
 import "../../chunks/state.js";
 import "../../chunks/chunk.3WAW4E2K.js";
+import "../../chunks/directive-helpers.js";
 function* C(e = document.activeElement) {
   e != null && (yield e, "shadowRoot" in e && e.shadowRoot && e.shadowRoot.mode !== "closed" && (yield* A(C(e.shadowRoot.activeElement))));
 }

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

@@ -1,6 +1,6 @@
 import { c as b, b as r, S as y } from "../../chunks/chunk.JS655M6J.js";
 import { i as v, x as E } from "../../chunks/lit-element.js";
-import { g as k } from "../../chunks/chunk.YCHBWCKL.js";
+import { a as k } from "../../chunks/chunk.YCHBWCKL.js";
 import { S as T } from "../../chunks/chunk.GMVRWIWU.js";
 import { s as g, w as u, a as c, g as f, b as m } from "../../chunks/chunk.KRRLOROJ.js";
 import { L as _ } from "../../chunks/chunk.MAS2SHYD.js";

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

@@ -3,7 +3,7 @@ const o = e`
   /* Brukes i dropdown. Eneste måten å override shadow dom for å rotere expand_more ikonet når menyen åpner */
   :host([name='expand_more']) {
     transform: var(--icon-rotation, none);
-    transition: transform 0.3s ease;
+    transition: transform var(--transition-time) ease;
   }
 
   /* prevent icon beeing highlighted */

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

@@ -15,6 +15,7 @@ import { l as z } from "../../chunks/live.js";
 import { e as S } from "../../chunks/query.js";
 import P from "./nve-input.styles.js";
 import "../../chunks/chunk.3WAW4E2K.js";
+import "../../chunks/directive-helpers.js";
 var E = k`
   ${_}
   ${y}

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

@@ -20,8 +20,16 @@ const a = r`
     border-radius: var(--border-radius-small);
   }
 
+  :host::part(base) {
+    transition: border var(--transition-time) ease-in-out;
+  }
+
   .input--standard:hover:not(.input--disabled) {
-    border-color: var(--neutrals-border-subtle) !important;
+    border-color: var(--neutrals-foreground-primary) !important;
+  }
+
+  .input--filled:hover:not(.input--disabled) {
+    border-color: var(--neutrals-border-default) !important;
   }
 
   :host::after {
@@ -33,7 +41,6 @@ const a = r`
   :host([required]) .form-control--has-label .form-control__label::after,
   :host([requiredLabel])::part(form-control-label)::after {
     content: var(--sl-input-required-content);
-    margin-top: var(--spacing-xx-small);
     font: var(--label-x-small-light);
     color: var(--feedback-background-emphasized-error);
   }

package/components/nve-menu-item/nve-menu-item.component.js

@@ -1,10 +1,11 @@
-import { c as $, b as r, S as w } from "../../chunks/chunk.JS655M6J.js";
+import { c as $, b as l, S as w } from "../../chunks/chunk.JS655M6J.js";
 import { i as L, T as x, x as g } from "../../chunks/lit-element.js";
-import { f as A, S as E } from "../../chunks/chunk.2HU27ZWH.js";
-import { i as P, t as M, a as T, e as R } from "../../chunks/class-map.js";
-import { S as O } from "../../chunks/chunk.GMVRWIWU.js";
-import { H as D, g as z } from "../../chunks/chunk.NYIIDP5N.js";
-import { L as G } from "../../chunks/chunk.MAS2SHYD.js";
+import { f as A } from "../../chunks/directive-helpers.js";
+import { i as E, t as P, a as M, e as T } from "../../chunks/class-map.js";
+import { S as R } from "../../chunks/chunk.GMVRWIWU.js";
+import { H as O, g as D } from "../../chunks/chunk.NYIIDP5N.js";
+import { L as z } from "../../chunks/chunk.MAS2SHYD.js";
+import { S as G } from "../../chunks/chunk.2HU27ZWH.js";
 import { w as y } from "../../chunks/chunk.Q6ASPMKT.js";
 import { n as u, t as H } from "../../chunks/property.js";
 import { e as _ } from "../../chunks/query.js";
@@ -196,9 +197,9 @@ function V(e, i = !1, s = 0) {
       c(this, e);
 }
 const U = (e) => {
-  e.type == M.CHILD && (e._$AP ?? (e._$AP = V), e._$AQ ?? (e._$AQ = B));
+  e.type == P.CHILD && (e._$AP ?? (e._$AP = V), e._$AQ ?? (e._$AQ = B));
 };
-class q extends P {
+class q extends E {
   constructor() {
     super(...arguments), this._$AN = void 0;
   }
@@ -230,7 +231,7 @@ class q extends P {
 const j = () => new F();
 class F {
 }
-const v = /* @__PURE__ */ new WeakMap(), K = T(class extends q {
+const v = /* @__PURE__ */ new WeakMap(), K = M(class extends q {
   render(e) {
     return x;
   }
@@ -290,8 +291,8 @@ var W = class {
       const t = this.host.renderRoot.querySelector("slot[name='submenu']"), n = t == null ? void 0 : t.assignedElements({ flatten: !0 }).filter((k) => k.localName === "sl-menu")[0], o = this.localize.dir() === "rtl";
       if (!n)
         return;
-      const { left: l, top: d, width: f, height: b } = n.getBoundingClientRect();
-      this.host.style.setProperty("--safe-triangle-submenu-start-x", `${o ? l + f : l}px`), this.host.style.setProperty("--safe-triangle-submenu-start-y", `${d}px`), this.host.style.setProperty("--safe-triangle-submenu-end-x", `${o ? l + f : l}px`), this.host.style.setProperty("--safe-triangle-submenu-end-y", `${d + b}px`);
+      const { left: r, top: d, width: f, height: b } = n.getBoundingClientRect();
+      this.host.style.setProperty("--safe-triangle-submenu-start-x", `${o ? r + f : r}px`), this.host.style.setProperty("--safe-triangle-submenu-start-y", `${d}px`), this.host.style.setProperty("--safe-triangle-submenu-end-x", `${o ? r + f : r}px`), this.host.style.setProperty("--safe-triangle-submenu-end-y", `${d + b}px`);
     }, (this.host = e).addController(this), this.hasSlotController = i, this.localize = s;
   }
   hostConnected() {
@@ -347,8 +348,8 @@ var W = class {
     if (!((e = this.host.parentElement) != null && e.computedStyleMap))
       return;
     const i = this.host.parentElement.computedStyleMap(), t = ["padding-top", "border-top-width", "margin-top"].reduce((n, o) => {
-      var l;
-      const d = (l = i.get(o)) != null ? l : new CSSUnitValue(0, "px"), b = (d instanceof CSSUnitValue ? d : new CSSUnitValue(0, "px")).to("px");
+      var r;
+      const d = (r = i.get(o)) != null ? r : new CSSUnitValue(0, "px"), b = (d instanceof CSSUnitValue ? d : new CSSUnitValue(0, "px")).to("px");
       return n - b.value;
     }, 0);
     this.skidding = t;
@@ -374,7 +375,7 @@ var W = class {
   }
 }, a = class extends w {
   constructor() {
-    super(...arguments), this.type = "normal", this.checked = !1, this.value = "", this.disabled = !1, this.localize = new G(this), this.hasSlotController = new D(this, "submenu"), this.submenuController = new W(this, this.hasSlotController, this.localize), this.handleHostClick = (e) => {
+    super(...arguments), this.type = "normal", this.checked = !1, this.value = "", this.disabled = !1, this.localize = new z(this), this.hasSlotController = new O(this, "submenu"), this.submenuController = new W(this, this.hasSlotController, this.localize), this.handleHostClick = (e) => {
       this.disabled && (e.preventDefault(), e.stopImmediatePropagation());
     }, this.handleMouseOver = (e) => {
       this.focus(), e.stopPropagation();
@@ -409,7 +410,7 @@ var W = class {
   }
   /** Returns a text label based on the contents of the menu item's default slot. */
   getTextLabel() {
-    return z(this.defaultSlot);
+    return D(this.defaultSlot);
   }
   isSubmenu() {
     return this.hasSlotController.test("submenu");
@@ -420,7 +421,7 @@ var W = class {
       <div
         id="anchor"
         part="base"
-        class=${R({
+        class=${T({
       "menu-item": !0,
       "menu-item--rtl": e,
       "menu-item--checked": this.checked,
@@ -452,41 +453,41 @@ var W = class {
 };
 a.styles = N;
 a.dependencies = {
-  "sl-icon": E,
-  "sl-popup": O
+  "sl-icon": G,
+  "sl-popup": R
 };
-r([
+l([
   _("slot:not([name])")
 ], a.prototype, "defaultSlot", 2);
-r([
+l([
   _(".menu-item")
 ], a.prototype, "menuItem", 2);
-r([
+l([
   u()
 ], a.prototype, "type", 2);
-r([
+l([
   u({ type: Boolean, reflect: !0 })
 ], a.prototype, "checked", 2);
-r([
+l([
   u()
 ], a.prototype, "value", 2);
-r([
+l([
   u({ type: Boolean, reflect: !0 })
 ], a.prototype, "disabled", 2);
-r([
+l([
   y("checked")
 ], a.prototype, "handleCheckedChange", 1);
-r([
+l([
   y("disabled")
 ], a.prototype, "handleDisabledChange", 1);
-r([
+l([
   y("type")
 ], a.prototype, "handleTypeChange", 1);
 var S = a;
 a.define("sl-menu-item");
 var Q = Object.defineProperty, X = Object.getOwnPropertyDescriptor, p = (e, i, s, t) => {
-  for (var n = t > 1 ? void 0 : t ? X(i, s) : i, o = e.length - 1, l; o >= 0; o--)
-    (l = e[o]) && (n = (t ? l(i, s, n) : l(n)) || n);
+  for (var n = t > 1 ? void 0 : t ? X(i, s) : i, o = e.length - 1, r; o >= 0; o--)
+    (r = e[o]) && (n = (t ? r(i, s, n) : r(n)) || n);
   return t && n && Q(i, s, n), n;
 };
 let h = class extends S {

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

@@ -9,6 +9,7 @@ import { r as d } from "../../chunks/state.js";
 import { e as C } from "../../chunks/query.js";
 import S from "./nve-option.styles.js";
 import "../../chunks/chunk.3WAW4E2K.js";
+import "../../chunks/directive-helpers.js";
 var L = m`
   ${f}
 

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

@@ -7,6 +7,7 @@ import { e as _ } from "../../chunks/class-map.js";
 import { r as p } from "../../chunks/state.js";
 import y from "./nve-radio.styles.js";
 import "../../chunks/chunk.3WAW4E2K.js";
+import "../../chunks/directive-helpers.js";
 var z = v`
   ${m}
 

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

@@ -19,6 +19,7 @@ import K from "./nve-select.styles.js";
 import "../../chunks/static.js";
 import "../../chunks/if-defined.js";
 import "../../chunks/chunk.3WAW4E2K.js";
+import "../../chunks/directive-helpers.js";
 var H = k`
   ${O}
 

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

@@ -0,0 +1,90 @@
+import { LitElement } from 'lit';
+/**
+ * @dependency nve-icon
+ * @dependency nve-label
+ *
+ * Bruker sl-eventer for å være konsistent. Kan bruke våre egne eventer når vi droppper shoelace
+ * @event sl-blur - trigges når textarea mister fokus
+ * @event sl-change - trigges når textarea endrer verdi
+ * @event sl-input - trigges når textarea endrer verdi
+ * @event sl-invalid - trigges når textarea er invalid
+ *
+ * @csspart form-control - hoved komponent sitt container
+ * @csspart textarea-label - label og requiredLabel container
+ * @csspart base - textarea og ikone container
+ * @csspart help-text-container - container for hjelpetekst
+ *
+ * Skal brukes til å lage lang tekstfelt. Min høyde er satt opp til --sizing-2x-small. De fleste attributer som brukes på vanlig textarea
+ * burde bli støttet her. Hvis det er noe som mangler, bare å legge til.
+ * Man kan bruke label og tooltip attributer for å vise label over textarea. Samt med helpText. Trenger ikke noe eksta slots per i dag. Trengs ikke å lage separate slots for det.
+ * Siden vi skulle bruke ikoner inn i textarea var det enklere å lage vår egen komponent enn å leke med sl-textarea
+ */
+export default class NveTextarea extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Navnet på tekstområdet, sendt som et navn/verdi-par med skjemadata */
+    name: string;
+    /** Textarea verdi, sendt som et navn/verdi-par med skjemadata */
+    value: string;
+    /** Feil melding som vises under gruppe hvis validering feiler */
+    errorMessage?: string;
+    title: string;
+    /** Viser filled variant */
+    filled: boolean;
+    /** Label tekst */
+    label: string;
+    /** Hjelpetekst under textarea */
+    helpText: string;
+    /** Om textarea er deaktivert */
+    disabled: boolean;
+    /** Om textarea er skrivebeskyttet */
+    readonly: boolean;
+    /** Placeholder tekst */
+    placeholder: string;
+    /** Om textarea er obligatorisk */
+    required: boolean;
+    /** Tekst som vises for å markere at et felt er obligatorisk. Er satt til "*Obligatorisk" som standard.*/
+    requiredLabel: string;
+    /** Den minste lengden på inndata som vil bli betraktet som gyldig. */
+    minlength?: number;
+    /** Maksimal lengde på inndata som vil bli betraktet som gyldig. */
+    maxlength?: number;
+    /** 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;
+    /** Indikerer om nettleserens autokorrekturfunksjon er på eller av. */
+    tooltip?: string;
+    /**
+     * Forteller nettleseren hvilken type data som vil bli skrevet inn av brukeren, slik at den kan vise det passende virtuelle
+     * tastaturet på støttede enheter.
+     */
+    inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+    /** Bestemmer om feilmelding skal vises når validering feiler  */
+    private showErrorMessage;
+    /** Om bruker starter å skrive noe i textarea */
+    private touched;
+    /** Hoved input felt i nve-textarea komponentet. Brukes til constraint validering */
+    input: HTMLTextAreaElement;
+    constructor();
+    firstUpdated(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private emit;
+    private handleSubmit;
+    private handleBlur;
+    private handleChange;
+    private handleInput;
+    /** 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 */
+    private checkValidity;
+    setCustomValidity(message?: string): void;
+    private makeInvalid;
+    private resetValidation;
+    /** Toggler riktig validering attribute for å vise riktig style */
+    private toggleValidationAttributes;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-textarea': NveTextarea;
+    }
+}

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

@@ -0,0 +1,202 @@
+import { s as m, x as r } from "../../chunks/lit-element.js";
+import { n as a, t as b } from "../../chunks/property.js";
+import { r as c } from "../../chunks/state.js";
+import { e as v } from "../../chunks/query.js";
+import f from "./nve-textarea.styles.js";
+import { o as s } from "../../chunks/if-defined.js";
+import { l as g } from "../../chunks/live.js";
+import { e as u } from "../../chunks/class-map.js";
+import "../nve-icon/nve-icon.component.js";
+import "../nve-label/nve-label.component.js";
+import "../../chunks/directive-helpers.js";
+import "../nve-icon/nve-icon.styles.js";
+import "../nve-label/nve-label.styles.js";
+import "../nve-tooltip/nve-tooltip.component.js";
+import "../../chunks/chunk.JS655M6J.js";
+import "../../chunks/chunk.GMVRWIWU.js";
+import "../../chunks/chunk.KRRLOROJ.js";
+import "../../chunks/chunk.MAS2SHYD.js";
+import "../../chunks/chunk.Q6ASPMKT.js";
+var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, i = (t, o, n, h) => {
+  for (var l = h > 1 ? void 0 : h ? x(o, n) : o, p = t.length - 1, d; p >= 0; p--)
+    (d = t[p]) && (l = (h ? d(o, n, l) : d(l)) || l);
+  return h && l && y(o, n, l), l;
+};
+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.showErrorMessage = !1, this.touched = !1;
+  }
+  firstUpdated() {
+    if (this.required) {
+      const t = this.input.checkValidity();
+      this.toggleAttribute("data-valid", t), this.toggleAttribute("data-invalid", !t);
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const t = this.closest("form");
+    t == null || t.addEventListener("submit", this.handleSubmit.bind(this));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    const t = this.closest("form");
+    t == null || t.removeEventListener("submit", this.handleSubmit.bind(this));
+  }
+  // kan senere flyttes til utils hvis blir brukt flere steder
+  emit(t) {
+    this.dispatchEvent(new CustomEvent(t));
+  }
+  handleSubmit(t) {
+    t.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(t = "") {
+    this.input.setCustomValidity(t);
+  }
+  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(t) {
+    this.toggleAttribute("data-valid", t), this.toggleAttribute("data-user-valid", t), this.toggleAttribute("data-invalid", !t), this.toggleAttribute("data-user-invalid", !t);
+  }
+  render() {
+    return r`
+      <div part="form-control" class=${u({ "form-control": !0, "form-control--has-label": this.label })}>
+        <div part="textarea-label">
+          ${this.label ? r`
+                <nve-label
+                  class=${u({ textarea__label: !0 })}
+                  for="input"
+                  aria-hidden=${this.label ? "false" : "true"}
+                  value=${this.label}
+                  tooltip=${s(this.tooltip)}
+                ></nve-label>
+              ` : null}
+          ${this.required ? r`<span class="textarea__required-label">${this.requiredLabel}</span>` : null}
+        </div>
+        <div part="base">
+          <textarea
+            part="textarea"
+            class="textarea__control"
+            title=${this.title}
+            name=${s(this.name)}
+            .value=${g(this.value)}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            ?required=${this.required}
+            placeholder=${s(this.placeholder)}
+            minlength=${s(this.minlength)}
+            maxlength=${s(this.maxlength)}
+            autocapitalize=${s(this.autocapitalize)}
+            autocorrect=${s(this.autocorrect)}
+            ?autofocus=${this.autofocus}
+            inputmode=${s(this.inputmode)}
+            aria-describedby="help-text"
+            @change=${this.handleChange}
+            @input=${this.handleInput}
+            @blur=${this.handleBlur}
+          ></textarea>
+          <!-- Foreløpig kan man ha enten 'lock' eller 'error' ikone -->
+          ${this.disabled || this.showErrorMessage ? r`<div class="textarea__icon__container">
+                ${this.disabled ? r`<nve-icon name="lock"></nve-icon>` : null}
+                ${this.showErrorMessage ? r`<nve-icon class="textarea__icon--error" name="error"></nve-icon>` : null}
+              </div>` : null}
+        </div>
+        <div part="help-text-container" class="textarea__help-text__container">
+          <!-- Ikke vis hjelpe tekst mens feil -->
+          ${!this.showErrorMessage && this.helpText ? r`<span class="textarea__help-text" id="help-text" aria-hidden=${this.helpText ? "false" : "true"}
+                >${this.helpText}</span
+              >` : null}
+          ${this.showErrorMessage ? r`<span class="textarea__help-text textarea__help-text--error">${this.errorMessage}</span>` : null}
+        </div>
+      </div>
+    `;
+  }
+};
+e.styles = [f];
+i([
+  a()
+], e.prototype, "name", 2);
+i([
+  a()
+], e.prototype, "value", 2);
+i([
+  a()
+], e.prototype, "errorMessage", 2);
+i([
+  a()
+], e.prototype, "title", 2);
+i([
+  a({ type: Boolean, reflect: !0 })
+], e.prototype, "filled", 2);
+i([
+  a()
+], e.prototype, "label", 2);
+i([
+  a()
+], e.prototype, "helpText", 2);
+i([
+  a({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+i([
+  a({ type: Boolean, reflect: !0 })
+], e.prototype, "readonly", 2);
+i([
+  a()
+], e.prototype, "placeholder", 2);
+i([
+  a({ type: Boolean, reflect: !0 })
+], e.prototype, "required", 2);
+i([
+  a()
+], e.prototype, "requiredLabel", 2);
+i([
+  a({ type: Number })
+], e.prototype, "minlength", 2);
+i([
+  a({ type: Number })
+], e.prototype, "maxlength", 2);
+i([
+  a()
+], e.prototype, "autocapitalize", 2);
+i([
+  a()
+], e.prototype, "autocorrect", 2);
+i([
+  a()
+], e.prototype, "tooltip", 2);
+i([
+  a()
+], e.prototype, "inputmode", 2);
+i([
+  c()
+], e.prototype, "showErrorMessage", 2);
+i([
+  c()
+], e.prototype, "touched", 2);
+i([
+  v(".textarea__control")
+], e.prototype, "input", 2);
+e = i([
+  b("nve-textarea")
+], e);
+export {
+  e as default
+};

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

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

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

@@ -0,0 +1,103 @@
+import { i as r } from "../../chunks/lit-element.js";
+const a = r`
+  :host {
+    width: fit-content;
+    display: flex;
+  }
+
+  :host::part(form-control) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-x-small);
+  }
+
+  :host::part(base) {
+    display: flex;
+    position: relative; /** trengs for å posisjonere ikonen */
+    width: fit-content;
+  }
+
+  .textarea__control {
+    font: var(--body-small);
+    padding: var(--sizing-4x-small);
+    padding-right: var(--sizing-2x-small); /** trenger padding for å vise ikone så at teksten ikke dekker den */
+    border-radius: var(--border-radius-small);
+    border: var(--border-width-default, 1px) solid var(--neutrals-border-default);
+    min-height: var(--sizing-2x-small);
+    min-width: 30px;
+    transition: border var(--transition-time) ease-in-out;
+
+    &:hover:not(:disabled) {
+      border-color: var(--neutrals-foreground-primary);
+    }
+
+    &:focus-visible {
+      outline: var(--sl-focus-ring);
+      outline-offset: var(--sl-focus-ring-offset);
+    }
+  }
+
+  :host([data-user-invalid]) .textarea__control {
+    border-color: var(--feedback-background-emphasized-error);
+  }
+
+  :host([disabled]) .textarea__control {
+    opacity: 0.38;
+    background: var(--neutrals-background-primary-contrast);
+  }
+
+  :host([filled]) .textarea__control {
+    background: var(--neutrals-background-primary-contrast);
+    border: var(--border-width-default, 1px) solid var(--neutrals-border-subtle);
+
+    &:hover:not(:disabled) {
+      border-color: var(--neutrals-border-default);
+    }
+  }
+
+  :host([readonly]) .textarea__control {
+    background: var(--neutrals-background-secondary);
+    color: var(--neutrals-foreground-subtle,);
+    border: none;
+  }
+
+  :host::part(textarea-label) {
+    display: flex;
+    justify-content: space-between;
+    gap: 0.5rem;
+    align-items: center;
+  }
+
+  .textarea__required-label {
+    font: var(--label-x-small-light);
+    color: var(--feedback-background-emphasized-error);
+  }
+
+  .textarea__help-text__container {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .textarea__help-text {
+    font: var(--label-x-small-light);
+    color: var(--sl-input-help-text-color);
+  }
+
+  .textarea__help-text--error {
+    color: var(--feedback-background-emphasized-error);
+  }
+
+  .textarea__icon__container {
+    position: absolute;
+    right: var(--sizing-4x-small);
+    top: var(--sizing-4x-small);
+  }
+
+  .textarea__icon--error {
+    color: var(--feedback-background-emphasized-error);
+  }
+`;
+export {
+  a as default
+};

package/css/global.css

@@ -2,6 +2,8 @@
 @import url('https://fonts.cdnfonts.com/css/source-sans-pro');
 
 :root {
+  --transition-time: 0.3s;
+
   --sl-focus-ring-color: var(--interactive-links-focus);
   --sl-focus-ring-style: solid;
   --sl-focus-ring-width: 2px;

package/nve-designsystem.d.ts

@@ -17,6 +17,7 @@ export { default as NveRadio } from './components/nve-radio/nve-radio.component'
 export { default as NveRadioButton } from './components/nve-radio-button/nve-radio-button.component';
 export { default as NveRadioGroup } from './components/nve-radio-group/nve-radio-group.component';
 export { default as NveSpinner } from './components/nve-spinner/nve-spinner.component';
+export { default as NveTextarea } from './components/nve-textarea/nve-textarea.component';
 export { default as NveTooltip } from './components/nve-tooltip/nve-tooltip.component';
 export { default as NveSelect } from './components/nve-select/nve-select.component';
 export { default as NveOption } from './components/nve-option/nve-option.component';

package/nve-designsystem.js

@@ -1,26 +1,27 @@
-import { default as Q } from "./components/nve-alert/nve-alert.component.js";
-import { default as V } from "./components/nve-badge/nve-badge.component.js";
-import { default as X } from "./components/nve-button/nve-button.component.js";
-import { default as Z } from "./components/nve-checkbox/nve-checkbox.component.js";
-import { default as $ } from "./components/nve-checkbox-group/nve-checkbox-group.component.js";
-import { default as to } from "./components/nve-dialog/nve-dialog.component.js";
-import { default as eo } from "./components/nve-divider/nve-divider.component.js";
-import { default as mo } from "./components/nve-dropdown/nve-dropdown.component.js";
-import { default as io } from "./components/nve-icon/nve-icon.component.js";
-import { default as uo } from "./components/nve-input/nve-input.component.js";
-import { default as xo } from "./components/nve-label/nve-label.component.js";
-import { default as so } from "./components/nve-menu/nve-menu.component.js";
-import { default as no } from "./components/nve-menu-item/nve-menu-item.component.js";
-import { default as So } from "./components/nve-popup/nve-popup.component.js";
-import { default as Bo } from "./components/nve-radio/nve-radio.component.js";
-import { default as Io } from "./components/nve-radio-button/nve-radio-button.component.js";
-import { default as go } from "./components/nve-radio-group/nve-radio-group.component.js";
-import { default as ko } from "./components/nve-spinner/nve-spinner.component.js";
-import { default as Go } from "./components/nve-tooltip/nve-tooltip.component.js";
-import { default as wo } from "./components/nve-select/nve-select.component.js";
-import { default as Lo } from "./components/nve-option/nve-option.component.js";
-import { default as Po } from "./components/nve-stepper/nve-stepper.component.js";
-import { default as jo } from "./components/nve-stepper/nve-step/nve-step.component.js";
+import { default as V } from "./components/nve-alert/nve-alert.component.js";
+import { default as X } from "./components/nve-badge/nve-badge.component.js";
+import { default as Z } from "./components/nve-button/nve-button.component.js";
+import { default as $ } from "./components/nve-checkbox/nve-checkbox.component.js";
+import { default as to } from "./components/nve-checkbox-group/nve-checkbox-group.component.js";
+import { default as eo } from "./components/nve-dialog/nve-dialog.component.js";
+import { default as mo } from "./components/nve-divider/nve-divider.component.js";
+import { default as io } from "./components/nve-dropdown/nve-dropdown.component.js";
+import { default as uo } from "./components/nve-icon/nve-icon.component.js";
+import { default as xo } from "./components/nve-input/nve-input.component.js";
+import { default as so } from "./components/nve-label/nve-label.component.js";
+import { default as no } from "./components/nve-menu/nve-menu.component.js";
+import { default as So } from "./components/nve-menu-item/nve-menu-item.component.js";
+import { default as Bo } from "./components/nve-popup/nve-popup.component.js";
+import { default as Io } from "./components/nve-radio/nve-radio.component.js";
+import { default as go } from "./components/nve-radio-button/nve-radio-button.component.js";
+import { default as ko } from "./components/nve-radio-group/nve-radio-group.component.js";
+import { default as Go } from "./components/nve-spinner/nve-spinner.component.js";
+import { default as To } from "./components/nve-textarea/nve-textarea.component.js";
+import { default as Ao } from "./components/nve-tooltip/nve-tooltip.component.js";
+import { default as Oo } from "./components/nve-select/nve-select.component.js";
+import { default as jo } from "./components/nve-option/nve-option.component.js";
+import { default as yo } from "./components/nve-stepper/nve-stepper.component.js";
+import { default as Eo } from "./components/nve-stepper/nve-step/nve-step.component.js";
 import "./chunks/chunk.7O2CYFQX.js";
 import "./chunks/chunk.JS655M6J.js";
 import "./chunks/lit-element.js";
@@ -28,6 +29,7 @@ import "./chunks/property.js";
 import "./chunks/chunk.2HU27ZWH.js";
 import "./chunks/chunk.3WAW4E2K.js";
 import "./chunks/chunk.Q6ASPMKT.js";
+import "./chunks/directive-helpers.js";
 import "./chunks/state.js";
 import "./chunks/class-map.js";
 import "./chunks/static.js";
@@ -60,32 +62,34 @@ import "./components/nve-menu/nve-menu.styles.js";
 import "./components/nve-menu-item/nve-menu-item.styles.js";
 import "./components/nve-radio/nve-radio.styles.js";
 import "./components/nve-radio-group/nve-radio-group.styles.js";
+import "./components/nve-textarea/nve-textarea.styles.js";
 import "./components/nve-select/nve-select.styles.js";
 import "./components/nve-option/nve-option.styles.js";
 import "./components/nve-stepper/nve-stepper.styles.js";
 import "./components/nve-stepper/nve-step/nve-step.styles.js";
 export {
-  Q as NveAlert,
-  V as NveBadge,
-  X as NveButton,
-  Z as NveCheckbox,
-  $ as NveCheckboxGroup,
-  to as NveDialog,
-  eo as NveDivider,
-  mo as NveDropdown,
-  io as NveIcon,
-  uo as NveInput,
-  xo as NveLabel,
-  so as NveMenu,
-  no as NveMenuItem,
-  Lo as NveOption,
-  So as NvePopup,
-  Bo as NveRadio,
-  Io as NveRadioButton,
-  go as NveRadioGroup,
-  wo as NveSelect,
-  ko as NveSpinner,
-  jo as NveStep,
-  Po as NveStepper,
-  Go as NveTooltip
+  V as NveAlert,
+  X as NveBadge,
+  Z as NveButton,
+  $ as NveCheckbox,
+  to as NveCheckboxGroup,
+  eo as NveDialog,
+  mo as NveDivider,
+  io as NveDropdown,
+  uo as NveIcon,
+  xo as NveInput,
+  so as NveLabel,
+  no as NveMenu,
+  So as NveMenuItem,
+  jo as NveOption,
+  Bo as NvePopup,
+  Io as NveRadio,
+  go as NveRadioButton,
+  ko as NveRadioGroup,
+  Oo as NveSelect,
+  Go as NveSpinner,
+  Eo as NveStep,
+  yo as NveStepper,
+  To as NveTextarea,
+  Ao as NveTooltip
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nve-designsystem",
-  "version": "0.1.56",
+  "version": "0.1.58",
   "exports": {
     ".": {
       "import": "./nve-designsystem.js",