nve-designsystem 0.1.80 → 0.1.82

package/chunks/watch.js

@@ -0,0 +1,21 @@
+function u(t, c) {
+  const l = {
+    waitUntilFirstUpdate: !1,
+    ...c
+  };
+  return (a, o) => {
+    const { update: d } = a, f = Array.isArray(t) ? t : [t];
+    a.update = function(i) {
+      f.forEach((h) => {
+        const s = h;
+        if (i.has(s)) {
+          const n = i.get(s), e = this[s];
+          n !== e && (!l.waitUntilFirstUpdate || this.hasUpdated) && this[o](n, e);
+        }
+      }), d.call(this, i);
+    };
+  };
+}
+export {
+  u as w
+};

package/components/nve-darkmode-switch/nve-darkmode-switch.component.d.ts

@@ -0,0 +1,28 @@
+import { INveComponent } from '../../interfaces/NveComponent.interface';
+import { LitElement, TemplateResult } from 'lit';
+/**
+ * Komponent for å sette .darkmode-klasse på root.
+ * Må kun være en av dem på siden, de vil ikke synkronisere data.
+ *
+ * Hvorvidt bruker foretrekker dark-mode eller ikke hentes fra browser via "prefers-color-scheme".
+ * Dersom bruker setter darkmode ved å klikke på komponenten, lagres valget i localstorage.
+ *
+ * Man kan bruke "darkmodeclass" for å sette klassen som legges til dersom den ikke er "darkmode"
+ */
+export default class NveDarkmodeSwitch extends LitElement implements INveComponent {
+    constructor();
+    testId: string;
+    darkmode: boolean;
+    darkmodeclass: string;
+    localStorageVariable: string;
+    private toggleDarkmode;
+    private checkFocus;
+    private checkInput;
+    connectedCallback(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-darkmode-switch': NveDarkmodeSwitch;
+    }
+}

package/components/nve-darkmode-switch/nve-darkmode-switch.component.js

@@ -0,0 +1,53 @@
+import { s as n, x as m } from "../../chunks/lit-element.js";
+import { n as i, t as h } from "../../chunks/property.js";
+var u = Object.defineProperty, k = Object.getOwnPropertyDescriptor, a = (t, e, c, s) => {
+  for (var o = s > 1 ? void 0 : s ? k(e, c) : e, d = t.length - 1, l; d >= 0; d--)
+    (l = t[d]) && (o = (s ? l(e, c, o) : l(o)) || o);
+  return s && o && u(e, c, o), o;
+};
+let r = class extends n {
+  constructor() {
+    super(), this.testId = "", this.darkmode = !1, this.darkmodeclass = "darkmode", this.localStorageVariable = "preferdarkmode";
+  }
+  toggleDarkmode(t) {
+    console.dir(1), this.darkmode = !!t.target.checked, localStorage.setItem(this.localStorageVariable, this.darkmode.toString()), this.darkmode ? document.documentElement.classList.add(this.darkmodeclass) : document.documentElement.classList.remove(this.darkmodeclass);
+  }
+  checkFocus() {
+    console.dir(2);
+  }
+  checkInput() {
+    console.dir(3);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const t = localStorage.getItem(this.localStorageVariable);
+    let e = !1;
+    t === null ? window.matchMedia("(prefers-color-scheme: dark)").matches && (e = !0) : e = t === "true", e ? (this.darkmode = !0, document.documentElement.classList.add(this.darkmodeclass)) : (this.darkmode = !1, document.documentElement.classList.remove(this.darkmodeclass));
+  }
+  render() {
+    return m`<nve-switch
+      @change=${this.toggleDarkmode}
+      @focus=${this.checkFocus}
+      @input=${this.checkInput}
+      ?checked=${this.darkmode}
+    >
+      <nve-icon slot="onicon" name="dark_mode"></nve-icon>
+      <nve-icon slot="officon" name="light_mode"></nve-icon>
+    </nve-switch>`;
+  }
+};
+a([
+  i({ reflect: !0, type: String })
+], r.prototype, "testId", 2);
+a([
+  i({ attribute: !1, type: Boolean })
+], r.prototype, "darkmode", 2);
+a([
+  i({ attribute: !0, type: String })
+], r.prototype, "darkmodeclass", 2);
+r = a([
+  h("nve-darkmode-switch")
+], r);
+export {
+  r as default
+};

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

@@ -1,18 +1,19 @@
-import { n, t as M } from "../../chunks/property.js";
+import { n, t as E } from "../../chunks/property.js";
 import { r as p } from "../../chunks/state.js";
-import { f as S } from "../../chunks/chunk.SI4ACBFK.js";
-import { c as R, b as l, S as w } from "../../chunks/chunk.JS655M6J.js";
-import { i as E, x as g } from "../../chunks/lit-element.js";
-import { F as A, c as $, a as q, v as I } from "../../chunks/chunk.UEQZEZFU.js";
-import { e as v } from "../../chunks/query.js";
-import { H as L } from "../../chunks/chunk.NYIIDP5N.js";
-import { w as V } from "../../chunks/chunk.Q6ASPMKT.js";
-import { e as B } from "../../chunks/class-map.js";
-import G from "./nve-radio-group.styles.js";
-import { t as _ } from "../../chunks/updateInvalidProperty.js";
-var O = E`
-  ${R}
-  ${S}
+import { f as V } from "../../chunks/chunk.SI4ACBFK.js";
+import { c as y, b as l, S as C } from "../../chunks/chunk.JS655M6J.js";
+import { i as _, x as g } from "../../chunks/lit-element.js";
+import { F as x, c as k, a as M, v as S } from "../../chunks/chunk.UEQZEZFU.js";
+import { e as b } from "../../chunks/query.js";
+import { H as A } from "../../chunks/chunk.NYIIDP5N.js";
+import { w as R } from "../../chunks/chunk.Q6ASPMKT.js";
+import { e as $ } from "../../chunks/class-map.js";
+import q from "./nve-radio-group.styles.js";
+import { w as I } from "../../chunks/watch.js";
+import { t as v } from "../../chunks/updateInvalidProperty.js";
+var L = _`
+  ${y}
+  ${V}
 
   :host {
     display: block;
@@ -45,8 +46,8 @@ var O = E`
     white-space: nowrap;
     border: 0;
   }
-`, z = E`
-  ${R}
+`, B = _`
+  ${y}
 
   :host {
     display: inline-block;
@@ -56,31 +57,31 @@ var O = E`
     display: flex;
     flex-wrap: nowrap;
   }
-`, m = class extends w {
+`, f = class extends C {
   constructor() {
     super(...arguments), this.disableRole = !1, this.label = "";
   }
   handleFocus(t) {
-    const e = f(t.target);
+    const e = m(t.target);
     e == null || e.classList.add("sl-button-group__button--focus");
   }
   handleBlur(t) {
-    const e = f(t.target);
+    const e = m(t.target);
     e == null || e.classList.remove("sl-button-group__button--focus");
   }
   handleMouseOver(t) {
-    const e = f(t.target);
+    const e = m(t.target);
     e == null || e.classList.add("sl-button-group__button--hover");
   }
   handleMouseOut(t) {
-    const e = f(t.target);
+    const e = m(t.target);
     e == null || e.classList.remove("sl-button-group__button--hover");
   }
   handleSlotChange() {
     const t = [...this.defaultSlot.assignedElements({ flatten: !0 })];
     t.forEach((e) => {
-      const s = t.indexOf(e), o = f(e);
-      o && (o.classList.add("sl-button-group__button"), o.classList.toggle("sl-button-group__button--first", s === 0), o.classList.toggle("sl-button-group__button--inner", s > 0 && s < t.length - 1), o.classList.toggle("sl-button-group__button--last", s === t.length - 1), o.classList.toggle("sl-button-group__button--radio", o.tagName.toLowerCase() === "sl-radio-button"));
+      const s = t.indexOf(e), i = m(e);
+      i && (i.classList.add("sl-button-group__button"), i.classList.toggle("sl-button-group__button--first", s === 0), i.classList.toggle("sl-button-group__button--inner", s > 0 && s < t.length - 1), i.classList.toggle("sl-button-group__button--last", s === t.length - 1), i.classList.toggle("sl-button-group__button--radio", i.tagName.toLowerCase() === "sl-radio-button"));
     });
   }
   render() {
@@ -100,29 +101,29 @@ var O = E`
     `;
   }
 };
-m.styles = z;
+f.styles = B;
 l([
-  v("slot")
-], m.prototype, "defaultSlot", 2);
+  b("slot")
+], f.prototype, "defaultSlot", 2);
 l([
   p()
-], m.prototype, "disableRole", 2);
+], f.prototype, "disableRole", 2);
 l([
   n()
-], m.prototype, "label", 2);
-function f(t) {
+], f.prototype, "label", 2);
+function m(t) {
   var e;
   const s = "sl-button, sl-radio-button";
   return (e = t.closest(s)) != null ? e : t.querySelector(s);
 }
-var a = class extends w {
+var a = class extends C {
   constructor() {
-    super(...arguments), this.formControlController = new A(this), this.hasSlotController = new L(this, "help-text", "label"), this.customValidityMessage = "", this.hasButtonGroup = !1, this.errorMessage = "", this.defaultValue = "", this.label = "", this.helpText = "", this.name = "option", this.value = "", this.size = "medium", this.form = "", this.required = !1;
+    super(...arguments), this.formControlController = new x(this), this.hasSlotController = new A(this, "help-text", "label"), this.customValidityMessage = "", this.hasButtonGroup = !1, this.errorMessage = "", this.defaultValue = "", this.label = "", this.helpText = "", this.name = "option", this.value = "", this.size = "medium", this.form = "", this.required = !1;
   }
   /** Gets the validity state object */
   get validity() {
     const t = this.required && !this.value;
-    return this.customValidityMessage !== "" ? $ : t ? q : I;
+    return this.customValidityMessage !== "" ? k : t ? M : S;
   }
   /** Gets the validation message */
   get validationMessage() {
@@ -139,21 +140,21 @@ var a = class extends w {
     return [...this.querySelectorAll("sl-radio, sl-radio-button")];
   }
   handleRadioClick(t) {
-    const e = t.target.closest("sl-radio, sl-radio-button"), s = this.getAllRadios(), o = this.value;
-    e.disabled || (this.value = e.value, s.forEach((i) => i.checked = i === e), this.value !== o && (this.emit("sl-change"), this.emit("sl-input")));
+    const e = t.target.closest("sl-radio, sl-radio-button"), s = this.getAllRadios(), i = this.value;
+    e.disabled || (this.value = e.value, s.forEach((o) => o.checked = o === e), this.value !== i && (this.emit("sl-change"), this.emit("sl-input")));
   }
   handleKeyDown(t) {
     var e;
     if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", " "].includes(t.key))
       return;
-    const s = this.getAllRadios().filter((h) => !h.disabled), o = (e = s.find((h) => h.checked)) != null ? e : s[0], i = t.key === " " ? 0 : ["ArrowUp", "ArrowLeft"].includes(t.key) ? -1 : 1, u = this.value;
-    let r = s.indexOf(o) + i;
-    r < 0 && (r = s.length - 1), r > s.length - 1 && (r = 0), this.getAllRadios().forEach((h) => {
-      h.checked = !1, this.hasButtonGroup || (h.tabIndex = -1);
-    }), this.value = s[r].value, s[r].checked = !0, this.hasButtonGroup ? s[r].shadowRoot.querySelector("button").focus() : (s[r].tabIndex = 0, s[r].focus()), this.value !== u && (this.emit("sl-change"), this.emit("sl-input")), t.preventDefault();
+    const s = this.getAllRadios().filter((c) => !c.disabled), i = (e = s.find((c) => c.checked)) != null ? e : s[0], o = t.key === " " ? 0 : ["ArrowUp", "ArrowLeft"].includes(t.key) ? -1 : 1, h = this.value;
+    let r = s.indexOf(i) + o;
+    r < 0 && (r = s.length - 1), r > s.length - 1 && (r = 0), this.getAllRadios().forEach((c) => {
+      c.checked = !1, this.hasButtonGroup || (c.tabIndex = -1);
+    }), this.value = s[r].value, s[r].checked = !0, this.hasButtonGroup ? s[r].shadowRoot.querySelector("button").focus() : (s[r].tabIndex = 0, s[r].focus()), this.value !== h && (this.emit("sl-change"), this.emit("sl-input")), t.preventDefault();
   }
   handleLabelClick() {
-    const t = this.getAllRadios(), s = t.find((o) => o.checked) || t[0];
+    const t = this.getAllRadios(), s = t.find((i) => i.checked) || t[0];
     s && s.focus();
   }
   handleInvalid(t) {
@@ -164,18 +165,18 @@ var a = class extends w {
     const s = this.getAllRadios();
     if (await Promise.all(
       // Sync the checked state and size
-      s.map(async (o) => {
-        await o.updateComplete, o.checked = o.value === this.value, o.size = this.size;
+      s.map(async (i) => {
+        await i.updateComplete, i.checked = i.value === this.value, i.size = this.size;
       })
-    ), this.hasButtonGroup = s.some((o) => o.tagName.toLowerCase() === "sl-radio-button"), !s.some((o) => o.checked))
+    ), this.hasButtonGroup = s.some((i) => i.tagName.toLowerCase() === "sl-radio-button"), !s.some((i) => i.checked))
       if (this.hasButtonGroup) {
-        const o = (t = s[0].shadowRoot) == null ? void 0 : t.querySelector("button");
-        o && (o.tabIndex = 0);
+        const i = (t = s[0].shadowRoot) == null ? void 0 : t.querySelector("button");
+        i && (i.tabIndex = 0);
       } else
         s[0].tabIndex = 0;
     if (this.hasButtonGroup) {
-      const o = (e = this.shadowRoot) == null ? void 0 : e.querySelector("sl-button-group");
-      o && (o.disableRole = !0);
+      const i = (e = this.shadowRoot) == null ? void 0 : e.querySelector("sl-button-group");
+      i && (i.disableRole = !0);
     }
   }
   syncRadios() {
@@ -213,20 +214,20 @@ var a = class extends w {
     this.customValidityMessage = t, this.errorMessage = t, this.validationInput.setCustomValidity(t), this.formControlController.updateValidity();
   }
   render() {
-    const t = this.hasSlotController.test("label"), e = this.hasSlotController.test("help-text"), s = this.label ? !0 : !!t, o = this.helpText ? !0 : !!e, i = g`
+    const t = this.hasSlotController.test("label"), e = this.hasSlotController.test("help-text"), s = this.label ? !0 : !!t, i = this.helpText ? !0 : !!e, o = g`
       <slot @slotchange=${this.syncRadios} @click=${this.handleRadioClick} @keydown=${this.handleKeyDown}></slot>
     `;
     return g`
       <fieldset
         part="form-control"
-        class=${B({
+        class=${$({
       "form-control": !0,
       "form-control--small": this.size === "small",
       "form-control--medium": this.size === "medium",
       "form-control--large": this.size === "large",
       "form-control--radio-group": !0,
       "form-control--has-label": s,
-      "form-control--has-help-text": o
+      "form-control--has-help-text": i
     })}
         role="radiogroup"
         aria-labelledby="label"
@@ -260,16 +261,16 @@ var a = class extends w {
 
           ${this.hasButtonGroup ? g`
                 <sl-button-group part="button-group" exportparts="base:button-group__base" role="presentation">
-                  ${i}
+                  ${o}
                 </sl-button-group>
-              ` : i}
+              ` : o}
         </div>
 
         <div
           part="form-control-help-text"
           id="help-text"
           class="form-control__help-text"
-          aria-hidden=${o ? "false" : "true"}
+          aria-hidden=${i ? "false" : "true"}
         >
           <slot name="help-text">${this.helpText}</slot>
         </div>
@@ -277,13 +278,13 @@ var a = class extends w {
     `;
   }
 };
-a.styles = O;
-a.dependencies = { "sl-button-group": m };
+a.styles = L;
+a.dependencies = { "sl-button-group": f };
 l([
-  v("slot:not([name])")
+  b("slot:not([name])")
 ], a.prototype, "defaultSlot", 2);
 l([
-  v(".radio-group__validation-input")
+  b(".radio-group__validation-input")
 ], a.prototype, "validationInput", 2);
 l([
   p()
@@ -316,37 +317,19 @@ l([
   n({ type: Boolean, reflect: !0 })
 ], a.prototype, "required", 2);
 l([
-  V("size", { waitUntilFirstUpdate: !0 })
+  R("size", { waitUntilFirstUpdate: !0 })
 ], a.prototype, "handleSizeChange", 1);
 l([
-  V("value")
+  R("value")
 ], a.prototype, "handleValueChange", 1);
-var k = a;
+var w = a;
 a.define("sl-radio-group");
-function D(t, e) {
-  const s = {
-    waitUntilFirstUpdate: !1,
-    ...e
-  };
-  return (o, i) => {
-    const { update: u } = o, r = Array.isArray(t) ? t : [t];
-    o.update = function(h) {
-      r.forEach((x) => {
-        const b = x;
-        if (h.has(b)) {
-          const y = h.get(b), C = this[b];
-          y !== C && (!s.waitUntilFirstUpdate || this.hasUpdated) && this[i](y, C);
-        }
-      }), u.call(this, h);
-    };
-  };
-}
-var T = Object.defineProperty, U = Object.getOwnPropertyDescriptor, c = (t, e, s, o) => {
-  for (var i = o > 1 ? void 0 : o ? U(e, s) : e, u = t.length - 1, r; u >= 0; u--)
-    (r = t[u]) && (i = (o ? r(e, s, i) : r(i)) || i);
-  return o && i && T(e, s, i), i;
+var G = Object.defineProperty, O = Object.getOwnPropertyDescriptor, u = (t, e, s, i) => {
+  for (var o = i > 1 ? void 0 : i ? O(e, s) : e, h = t.length - 1, r; h >= 0; h--)
+    (r = t[h]) && (o = (i ? r(e, s, o) : r(o)) || o);
+  return i && o && G(e, s, o), o;
 };
-let d = class extends k {
+let d = class extends w {
   constructor() {
     super(), this.orientation = "vertical", this.disabled = !1, this.requiredLabel = "*Obligatorisk", this.testId = "", this.alreadyInvalid = !1, this.errorMessageCopy = "", this.getAllRadios = function() {
       return [
@@ -356,35 +339,35 @@ let d = class extends k {
         )
       ];
     }, this.handleRadioClick = function(t) {
-      const e = t.target.closest("sl-radio, sl-radio-button, nve-radio, nve-radio-button"), s = this.getAllRadios(), o = this.value;
+      const e = t.target.closest("sl-radio, sl-radio-button, nve-radio, nve-radio-button"), s = this.getAllRadios(), i = this.value;
       if (!e || e.disabled)
         return;
-      const i = e.shadowRoot.querySelectorAll("span[part='base']");
-      i.length > 0 && i[0].focus(), this.value = e.value, s.forEach((u) => u.checked = u === e), this.value !== o && (this.emit("sl-change"), this.emit("sl-input"));
+      const o = e.shadowRoot.querySelectorAll("span[part='base']");
+      o.length > 0 && o[0].focus(), this.value = e.value, s.forEach((h) => h.checked = h === e), this.value !== i && (this.emit("sl-change"), this.emit("sl-input"));
     }, this.syncRadioElements = async function() {
-      var e, s, o;
+      var e, s, i;
       const t = this.getAllRadios();
       if (await Promise.all(
         // Sync the checked state and size
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        t.map(async (i) => {
-          await i.updateComplete, i.checked = i.value === this.value, i.size = this.size;
+        t.map(async (o) => {
+          await o.updateComplete, o.checked = o.value === this.value, o.size = this.size;
         })
       ), this.hasButtonGroup = t.some(
         // @ts-ignore
-        (i) => i.tagName.toLowerCase() === "sl-radio-button" || i.tagName.toLowerCase() === "nve-radio-button"
-      ), !t.some((i) => i.checked))
+        (o) => o.tagName.toLowerCase() === "sl-radio-button" || o.tagName.toLowerCase() === "nve-radio-button"
+      ), !t.some((o) => o.checked))
         if (this.hasButtonGroup) {
-          const i = (e = t[0].shadowRoot) == null ? void 0 : e.querySelector("button");
-          i && (i.tabIndex = 0);
+          const o = (e = t[0].shadowRoot) == null ? void 0 : e.querySelector("button");
+          o && (o.tabIndex = 0);
         } else
           t[0].tabIndex = 0;
       if (this.hasButtonGroup) {
-        const i = (
+        const o = (
           // @ts-ignore
-          ((s = this.shadowRoot) == null ? void 0 : s.querySelector("sl-button-group")) || ((o = this.shadowRoot) == null ? void 0 : o.querySelector("nve-button-group"))
+          ((s = this.shadowRoot) == null ? void 0 : s.querySelector("sl-button-group")) || ((i = this.shadowRoot) == null ? void 0 : i.querySelector("nve-button-group"))
         );
-        i && (i.disableRole = !0);
+        o && (o.disableRole = !0);
       }
     }, this.syncRadios = function() {
       if (customElements.get("sl-radio") && customElements.get("sl-radio-button") || // lagt til nve-radio og nve-radio-button
@@ -409,46 +392,46 @@ let d = class extends k {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   handlePropChange(t, e) {
     const s = this.getAllRadios();
-    return e !== t ? (s.forEach((i) => {
-      i.was_disabled === void 0 ? i.was_disabled = i.disabled : t === !0 ? i.disabled = i.was_disabled : (i.was_disabled = i.disabled, i.disabled = !0);
+    return e !== t ? (s.forEach((o) => {
+      o.was_disabled === void 0 ? o.was_disabled = o.disabled : t === !0 ? o.disabled = o.was_disabled : (o.was_disabled = o.disabled, o.disabled = !0);
     }), !0) : !1;
   }
   makeInvalid() {
     const t = this.getAllRadios();
-    _(t, !0, "data-invalid"), this.errorMessageCopy || (this.errorMessageCopy = this.validationMessage), this.setCustomValidity(this.errorMessageCopy), this.style.setProperty("--radio-group-error-message", `"${this.errorMessageCopy}"`);
+    v(t, !0, "data-invalid"), this.errorMessageCopy || (this.errorMessageCopy = this.validationMessage), this.setCustomValidity(this.errorMessageCopy), this.style.setProperty("--radio-group-error-message", `"${this.errorMessageCopy}"`);
   }
   resetValidation() {
     const t = this.getAllRadios();
-    this.errorMessageCopy = "", _(t, !1, "data-invalid"), this.setCustomValidity(""), this.style.removeProperty("--radio-group-error-message");
+    this.errorMessageCopy = "", v(t, !1, "data-invalid"), this.setCustomValidity(""), this.style.removeProperty("--radio-group-error-message");
   }
 };
-d.styles = [k.styles, G];
-c([
+d.styles = [w.styles, q];
+u([
   n({ reflect: !0 })
 ], d.prototype, "orientation", 2);
-c([
+u([
   n({ type: Boolean, reflect: !0 })
 ], d.prototype, "disabled", 2);
-c([
+u([
   n({ reflect: !0 })
 ], d.prototype, "errorMessage", 2);
-c([
+u([
   n()
 ], d.prototype, "requiredLabel", 2);
-c([
+u([
   n({ reflect: !0, type: String })
 ], d.prototype, "testId", 2);
-c([
+u([
   p()
 ], d.prototype, "alreadyInvalid", 2);
-c([
+u([
   p()
 ], d.prototype, "errorMessageCopy", 2);
-c([
-  D("disabled")
+u([
+  I("disabled")
 ], d.prototype, "connectedCallback", 1);
-d = c([
-  M("nve-radio-group")
+d = u([
+  E("nve-radio-group")
 ], d);
 export {
   d as default

package/components/nve-stepper/nve-step/nve-step.component.js

@@ -137,7 +137,7 @@ let e = class extends h {
     return this.isLast ? "" : c`
           <div class="vertical-divider-container">
           <div
-          style="${this.isOrientationVertical() ? `height:${this.spaceBetweenSteps}px` : `min-width:${this.spaceBetweenSteps}px`}"
+          style="${this.isOrientationVertical() ? `height:${this.spaceBetweenSteps}px` : ""}"
           class="${t} ${this.getDividerColorClass()}"
         ></div>
         </div>`;

package/components/nve-stepper/nve-step/nve-step.styles.js

@@ -84,7 +84,7 @@ const r = e`
 }
 
 .divider-not-reached-color {
-  color:var(--neutrals-background-secondary, #E4E5E7);
+  background:var(--neutrals-background-secondary, #E4E5E7);
 }
 
 .divider-reached-color {

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

@@ -0,0 +1,53 @@
+import { INveComponent } from '../../interfaces/NveComponent.interface';
+import { CSSResultArray, LitElement, TemplateResult } from 'lit';
+/**
+ * En vippe-bryter med støtte for ikoner.
+ *
+ * @slot - Tekst etter bryteren
+ * @slot onicon - Det første ikonet (til venstre). Synlig når status er PÅ
+ * @slot officon - Det andre ikonet (til høyre). Synlig når status er AV
+ *
+ * @event blur Bryter mister fokus
+ * @event change Bryter endres
+ * @event input Bryter endres
+ * @event focus Bryter får fokus
+ *
+ * @csspart base Topp-element
+ * @csspart control Element rundt bryteren
+ * @csspart thumb Bryter-indikatoren
+ * @csspart label Tekst bak bryteren
+ *
+ */
+export default class NveSwitch extends LitElement implements INveComponent {
+    constructor();
+    testId: string;
+    /** Hidden checkbox som holder state */
+    input: HTMLInputElement;
+    private hasFocus;
+    title: string;
+    /** Navn på switch */
+    name: string;
+    /** Switchens verdi, bruk i forms */
+    value: string;
+    disabled: boolean;
+    /** Verdien til switchen. */
+    checked: boolean;
+    static styles: CSSResultArray;
+    private emit;
+    private handleBlur;
+    private handleInput;
+    private handleClick;
+    private handleFocus;
+    private handleKeyDown;
+    handleCheckedChange(): void;
+    /** click, focus og blur sendes til input (checkbox) */
+    click(): void;
+    focus(options?: FocusOptions): void;
+    blur(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-switch': NveSwitch;
+    }
+}