nve-designsystem 2.14.2 → 2.15.0

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

@@ -1,7 +1,8 @@
 import { LitElement } from 'lit';
 /**
  * Et ikon.
- * Vi bruker ikoner fra Material Symbols, men det er også mulig å bruke ikoner fra egen repo. Det anbefales sterkt å bruke Material-ikonene.
+ * Vi bruker ikoner fra Material Symbols, men det er også mulig å bruke ikoner fra eget repo.
+ * Vi anbefaler å bruke Material-ikonene.
  * Strektykkelsen skal være 400, uavhengig av ikonets størrelse, og kun stilene Sharp og Outlined skal brukes.
  * Fill-stilen bør unngås, da den fyller hele ikonet med farge i stedet for å bruke kun konturer
  * @see https://fonts.google.com/icons
@@ -14,7 +15,9 @@ export default class NveIcon extends LitElement {
     library: 'Outlined' | 'Sharp';
     /** Navnet på ikonet i Material Symbols-biblioteket */
     name: string;
+    /** Filnavn til ikonet om du velger å bruke et lokalt ikon */
     src: string;
+    /** En beskrivelse av ikonet */
     alt: string | undefined;
     /** Boolean som angir om ikonet har hatt tid til å laste. */
     private iconLoaded;

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

@@ -1,162 +1,167 @@
-import { a as U, x as N } from "../../chunks/lit-element.js";
-import { n as j, t as H } from "../../chunks/property.js";
-import { r as J } from "../../chunks/state.js";
-import K from "./nve-icon.styles.js";
-import { e as Q } from "../../chunks/class-map.js";
-import { o as V } from "../../chunks/if-defined.js";
-function X(s) {
-  return s && s.__esModule && Object.prototype.hasOwnProperty.call(s, "default") ? s.default : s;
+import { a as H, x as W } from "../../chunks/lit-element.js";
+import { n as $, t as J } from "../../chunks/property.js";
+import { r as K } from "../../chunks/state.js";
+import Q from "./nve-icon.styles.js";
+import { e as V } from "../../chunks/class-map.js";
+import { o as X } from "../../chunks/if-defined.js";
+import { offlineIcons as q } from "./offline-icons.js";
+import { o as Y } from "../../chunks/unsafe-html.js";
+function Z(i) {
+  return i && i.__esModule && Object.prototype.hasOwnProperty.call(i, "default") ? i.default : i;
 }
-var S = { exports: {} }, q;
-function Y() {
-  return q || (q = 1, function(s) {
+var N = { exports: {} }, B;
+function ee() {
+  return B || (B = 1, function(i) {
     (function() {
-      function r(e, n) {
+      function u(e, n) {
         document.addEventListener ? e.addEventListener("scroll", n, !1) : e.attachEvent("scroll", n);
       }
-      function T(e) {
+      function l(e) {
         document.body ? e() : document.addEventListener ? document.addEventListener("DOMContentLoaded", function n() {
           document.removeEventListener("DOMContentLoaded", n), e();
         }) : document.attachEvent("onreadystatechange", function n() {
           (document.readyState == "interactive" || document.readyState == "complete") && (document.detachEvent("onreadystatechange", n), e());
         });
       }
-      function u(e) {
+      function p(e) {
         this.g = document.createElement("div"), this.g.setAttribute("aria-hidden", "true"), this.g.appendChild(document.createTextNode(e)), this.h = document.createElement("span"), this.i = document.createElement("span"), this.m = document.createElement("span"), this.j = document.createElement("span"), this.l = -1, this.h.style.cssText = "max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;", this.i.style.cssText = "max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;", this.j.style.cssText = "max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;", this.m.style.cssText = "display:inline-block;width:200%;height:200%;font-size:16px;max-width:none;", this.h.appendChild(this.m), this.i.appendChild(this.j), this.g.appendChild(this.h), this.g.appendChild(this.i);
       }
-      function i(e, n) {
+      function r(e, n) {
         e.g.style.cssText = "max-width:none;min-width:20px;min-height:20px;display:inline-block;overflow:hidden;position:absolute;width:auto;margin:0;padding:0;top:-999px;white-space:nowrap;font-synthesis:none;font:" + n + ";";
       }
-      function E(e) {
+      function C(e) {
         var n = e.g.offsetWidth, t = n + 100;
         return e.j.style.width = t + "px", e.i.scrollLeft = t, e.h.scrollLeft = e.h.scrollWidth + 100, e.l !== n ? (e.l = n, !0) : !1;
       }
-      function y(e, n) {
+      function g(e, n) {
         function t() {
-          var a = p;
-          E(a) && a.g.parentNode !== null && n(a.l);
+          var s = m;
+          C(s) && s.g.parentNode !== null && n(s.l);
         }
-        var p = e;
-        r(e.h, t), r(e.i, t), E(e);
+        var m = e;
+        u(e.h, t), u(e.i, t), C(e);
       }
-      function $(e, n, t) {
+      function S(e, n, t) {
         n = n || {}, t = t || window, this.family = e, this.style = n.style || "normal", this.weight = n.weight || "normal", this.stretch = n.stretch || "normal", this.context = t;
       }
-      var P = null, _ = null, A = null, I = null;
-      function B(e) {
-        return _ === null && (F(e) && /Apple/.test(window.navigator.vendor) ? (e = /AppleWebKit\/([0-9]+)(?:\.([0-9]+))(?:\.([0-9]+))/.exec(window.navigator.userAgent), _ = !!e && 603 > parseInt(e[1], 10)) : _ = !1), _;
+      var j = null, I = null, P = null, A = null;
+      function G(e) {
+        return I === null && (F(e) && /Apple/.test(window.navigator.vendor) ? (e = /AppleWebKit\/([0-9]+)(?:\.([0-9]+))(?:\.([0-9]+))/.exec(window.navigator.userAgent), I = !!e && 603 > parseInt(e[1], 10)) : I = !1), I;
       }
       function F(e) {
-        return I === null && (I = !!e.document.fonts), I;
+        return A === null && (A = !!e.document.fonts), A;
       }
-      function g(e, n) {
-        var t = e.style, p = e.weight;
-        if (A === null) {
-          var a = document.createElement("div");
+      function w(e, n) {
+        var t = e.style, m = e.weight;
+        if (P === null) {
+          var s = document.createElement("div");
           try {
-            a.style.font = "condensed 100px sans-serif";
+            s.style.font = "condensed 100px sans-serif";
           } catch {
           }
-          A = a.style.font !== "";
+          P = s.style.font !== "";
         }
-        return [t, p, A ? e.stretch : "", "100px", n].join(" ");
+        return [t, m, P ? e.stretch : "", "100px", n].join(" ");
       }
-      $.prototype.load = function(e, n) {
-        var t = this, p = e || "BESbswy", a = 0, w = n || 3e3, z = (/* @__PURE__ */ new Date()).getTime();
+      S.prototype.load = function(e, n) {
+        var t = this, m = e || "BESbswy", s = 0, b = n || 3e3, z = (/* @__PURE__ */ new Date()).getTime();
         return new Promise(function(M, k) {
-          if (F(t.context) && !B(t.context)) {
-            var G = new Promise(function(b, x) {
-              function d() {
-                (/* @__PURE__ */ new Date()).getTime() - z >= w ? x(Error("" + w + "ms timeout exceeded")) : t.context.document.fonts.load(g(t, '"' + t.family + '"'), p).then(function(m) {
-                  1 <= m.length ? b() : setTimeout(d, 25);
-                }, x);
+          if (F(t.context) && !G(t.context)) {
+            var R = new Promise(function(x, E) {
+              function c() {
+                (/* @__PURE__ */ new Date()).getTime() - z >= b ? E(Error("" + b + "ms timeout exceeded")) : t.context.document.fonts.load(w(t, '"' + t.family + '"'), m).then(function(v) {
+                  1 <= v.length ? x() : setTimeout(c, 25);
+                }, E);
               }
-              d();
-            }), R = new Promise(function(b, x) {
-              a = setTimeout(function() {
-                x(Error("" + w + "ms timeout exceeded"));
-              }, w);
+              c();
+            }), U = new Promise(function(x, E) {
+              s = setTimeout(function() {
+                E(Error("" + b + "ms timeout exceeded"));
+              }, b);
             });
-            Promise.race([R, G]).then(function() {
-              clearTimeout(a), M(t);
+            Promise.race([U, R]).then(function() {
+              clearTimeout(s), M(t);
             }, k);
-          } else T(function() {
-            function b() {
+          } else l(function() {
+            function x() {
               var o;
-              (o = c != -1 && h != -1 || c != -1 && f != -1 || h != -1 && f != -1) && ((o = c != h && c != f && h != f) || (P === null && (o = /AppleWebKit\/([0-9]+)(?:\.([0-9]+))/.exec(window.navigator.userAgent), P = !!o && (536 > parseInt(o[1], 10) || parseInt(o[1], 10) === 536 && 11 >= parseInt(o[2], 10))), o = P && (c == D && h == D && f == D || c == O && h == O && f == O || c == W && h == W && f == W)), o = !o), o && (l.parentNode !== null && l.parentNode.removeChild(l), clearTimeout(a), M(t));
+              (o = d != -1 && h != -1 || d != -1 && f != -1 || h != -1 && f != -1) && ((o = d != h && d != f && h != f) || (j === null && (o = /AppleWebKit\/([0-9]+)(?:\.([0-9]+))/.exec(window.navigator.userAgent), j = !!o && (536 > parseInt(o[1], 10) || parseInt(o[1], 10) === 536 && 11 >= parseInt(o[2], 10))), o = j && (d == _ && h == _ && f == _ || d == D && h == D && f == D || d == O && h == O && f == O)), o = !o), o && (a.parentNode !== null && a.parentNode.removeChild(a), clearTimeout(s), M(t));
             }
-            function x() {
-              if ((/* @__PURE__ */ new Date()).getTime() - z >= w) l.parentNode !== null && l.parentNode.removeChild(l), k(Error("" + w + "ms timeout exceeded"));
+            function E() {
+              if ((/* @__PURE__ */ new Date()).getTime() - z >= b) a.parentNode !== null && a.parentNode.removeChild(a), k(Error("" + b + "ms timeout exceeded"));
               else {
                 var o = t.context.document.hidden;
-                (o === !0 || o === void 0) && (c = d.g.offsetWidth, h = m.g.offsetWidth, f = C.g.offsetWidth, b()), a = setTimeout(x, 50);
+                (o === !0 || o === void 0) && (d = c.g.offsetWidth, h = v.g.offsetWidth, f = L.g.offsetWidth, x()), s = setTimeout(E, 50);
               }
             }
-            var d = new u(p), m = new u(p), C = new u(p), c = -1, h = -1, f = -1, D = -1, O = -1, W = -1, l = document.createElement("div");
-            l.dir = "ltr", i(d, g(t, "sans-serif")), i(m, g(t, "serif")), i(C, g(t, "monospace")), l.appendChild(d.g), l.appendChild(m.g), l.appendChild(C.g), t.context.document.body.appendChild(l), D = d.g.offsetWidth, O = m.g.offsetWidth, W = C.g.offsetWidth, x(), y(d, function(o) {
-              c = o, b();
-            }), i(d, g(t, '"' + t.family + '",sans-serif')), y(m, function(o) {
-              h = o, b();
-            }), i(m, g(t, '"' + t.family + '",serif')), y(C, function(o) {
-              f = o, b();
-            }), i(C, g(t, '"' + t.family + '",monospace'));
+            var c = new p(m), v = new p(m), L = new p(m), d = -1, h = -1, f = -1, _ = -1, D = -1, O = -1, a = document.createElement("div");
+            a.dir = "ltr", r(c, w(t, "sans-serif")), r(v, w(t, "serif")), r(L, w(t, "monospace")), a.appendChild(c.g), a.appendChild(v.g), a.appendChild(L.g), t.context.document.body.appendChild(a), _ = c.g.offsetWidth, D = v.g.offsetWidth, O = L.g.offsetWidth, E(), g(c, function(o) {
+              d = o, x();
+            }), r(c, w(t, '"' + t.family + '",sans-serif')), g(v, function(o) {
+              h = o, x();
+            }), r(v, w(t, '"' + t.family + '",serif')), g(L, function(o) {
+              f = o, x();
+            }), r(L, w(t, '"' + t.family + '",monospace'));
           });
         });
-      }, s.exports = $;
+      }, i.exports = S;
     })();
-  }(S)), S.exports;
+  }(N)), N.exports;
 }
-var Z = Y();
-const ee = /* @__PURE__ */ X(Z);
-var te = Object.defineProperty, ne = Object.getOwnPropertyDescriptor, L = (s, r, T, u) => {
-  for (var i = u > 1 ? void 0 : u ? ne(r, T) : r, E = s.length - 1, y; E >= 0; E--)
-    (y = s[E]) && (i = (u ? y(r, T, i) : y(i)) || i);
-  return u && i && te(r, T, i), i;
+var te = ee();
+const ne = /* @__PURE__ */ Z(te);
+var oe = Object.defineProperty, ie = Object.getOwnPropertyDescriptor, T = (i, u, l, p) => {
+  for (var r = p > 1 ? void 0 : p ? ie(u, l) : u, C = i.length - 1, g; C >= 0; C--)
+    (g = i[C]) && (r = (p ? g(u, l, r) : g(r)) || r);
+  return p && r && oe(u, l, r), r;
 };
-let v = class extends U {
+let y = class extends H {
   constructor() {
     super(...arguments), this.library = "Sharp", this.name = "", this.src = "", this.alt = void 0, this.iconLoaded = !1;
   }
   firstUpdated() {
-    if (this.src) return;
+    if (this.src || q[this.name]) return;
     if (!document.getElementById(`material-icons-${this.library.toLowerCase()}`)) {
-      const r = document.createElement("link");
-      r.id = `material-icons-${this.library.toLowerCase()}`, r.rel = "stylesheet", r.href = `https://fonts.googleapis.com/css2?family=Material+Symbols+${this.library}:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200`, document.head.appendChild(r);
+      const l = document.createElement("link");
+      l.id = `material-icons-${this.library.toLowerCase()}`, l.rel = "stylesheet", l.href = `https://fonts.googleapis.com/css2?family=Material+Symbols+${this.library}:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200`, document.head.appendChild(l);
     }
-    new ee(`Material Symbols ${this.library}`).load().then(() => {
+    new ne(`Material Symbols ${this.library}`).load().then(() => {
       this.iconLoaded = !0, this.requestUpdate();
     }).catch();
   }
   render() {
-    return this.src ? N`<img src=${this.src} alt=${V(this.alt)} />` : !this.src && this.iconLoaded ? N`<span
+    if (this.src)
+      return W`<img src=${this.src} alt=${X(this.alt)} />`;
+    const i = q[this.name];
+    return i ? W`${Y(i)}` : !this.src && this.iconLoaded ? W`<span
         part="icon"
-        class=${Q({
+        class=${V({
       "material-outlined": this.library === "Outlined",
       "material-sharp": this.library === "Sharp"
     })}
         >${this.name}</span
-      >` : N`<nve-skeleton class="placeholder" effect="sheen"></nve-skeleton>`;
+      >` : W`<nve-skeleton class="placeholder" effect="sheen"></nve-skeleton>`;
   }
 };
-v.styles = [K];
-L([
-  j()
-], v.prototype, "library", 2);
-L([
-  j({ type: String, reflect: !0 })
-], v.prototype, "name", 2);
-L([
-  j()
-], v.prototype, "src", 2);
-L([
-  j()
-], v.prototype, "alt", 2);
-L([
-  J()
-], v.prototype, "iconLoaded", 2);
-v = L([
-  H("nve-icon")
-], v);
+y.styles = [Q];
+T([
+  $()
+], y.prototype, "library", 2);
+T([
+  $({ type: String, reflect: !0 })
+], y.prototype, "name", 2);
+T([
+  $()
+], y.prototype, "src", 2);
+T([
+  $()
+], y.prototype, "alt", 2);
+T([
+  K()
+], y.prototype, "iconLoaded", 2);
+y = T([
+  J("nve-icon")
+], y);
 export {
-  v as default
+  y as default
 };

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

@@ -1,5 +1,5 @@
 import { i as e } from "../../chunks/lit-element.js";
-const n = e`
+const r = 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);
@@ -43,7 +43,11 @@ const n = e`
   .material-sharp {
     font-family: 'Material Symbols Sharp';
   }
+  
+  svg {
+    fill: currentColor;
+  }
 `;
 export {
-  n as default
+  r as default
 };

package/components/nve-icon/offline-icons.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Disse ikonene er kopiert fra Material Symbols og brukes av NVE-komponenter internt
+ * NB! Det er kun sharp-variantene av ikonene som er lagret her
+ * Du bruker dem ved å sette name-attributtet på nve-icon til navnet på ikonet, f.eks. <nve-icon name="close"></nve-icon>
+ * Så vil <nve-icon> sjekke om ikonet finnes offline før den prøver å laste det fra Material Symbols
+ * For å legge til nye ikoner her, gå til https://fonts.google.com/icons?icon.style=Sharp,
+ * velg aktuelt ikon, velg 24px størrelse og svart farge og "copy icon to clipboard"
+ */
+export declare const offlineIcons: {
+    [key: string]: string;
+};

package/components/nve-icon/offline-icons.js

@@ -0,0 +1,14 @@
+const h = {
+  check_circle: '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>',
+  chevron_backward: '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z"/></svg>',
+  chevron_forward: '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>',
+  close: '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>',
+  error: '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>',
+  info: '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>',
+  lock: '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M240-80q-33 0-56.5-23.5T160-160v-400q0-33 23.5-56.5T240-640h40v-80q0-83 58.5-141.5T480-920q83 0 141.5 58.5T680-720v80h40q33 0 56.5 23.5T800-560v400q0 33-23.5 56.5T720-80H240Zm0-80h480v-400H240v400Zm240-120q33 0 56.5-23.5T560-360q0-33-23.5-56.5T480-440q-33 0-56.5 23.5T400-360q0 33 23.5 56.5T480-280ZM360-640h240v-80q0-50-35-85t-85-35q-50 0-85 35t-35 85v80ZM240-160v-400 400Z"/></svg>',
+  open_in_new: '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z"/></svg>',
+  warning: '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="m40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Zm40-100Z"/></svg>'
+};
+export {
+  h as offlineIcons
+};

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

@@ -51,7 +51,7 @@ let t = class extends h {
               aria-label="${this["close-aria-label"]}"
               @click=${this.closeButtonClick}
             >
-              <nve-icon name="close" library="Sharp"></nve-icon>
+              <nve-icon name="close"></nve-icon>
             </button>` : u}
       </span>
     `;

package/css/global.css

@@ -1,5 +1,41 @@
 @import '../nve-designsystem.css';
-@import url('https://fonts.cdnfonts.com/css/source-sans-pro');
+
+/* Skrifttyper som brukes internt i komponentene har vi lastet ned på forhånd for offline-støtte. 
+ Filene er lastet ned fra https://fontsource.org/fonts/source-sans-3
+ Source Sans 3 skal være kompatibel med Source Sans Pro 
+ For at fontene skal funke i brukerveiledninga også, må alle font-filer kopieres manuelt til /doc-site/fonts */
+@font-face {
+  font-family: 'Source Sans Pro';
+  src:
+    local('Source Sans Pro'),
+    url('/fonts/source-sans-3-latin-400-normal.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Source Sans Pro';
+  src:
+    local('Source Sans Pro'),
+    url('/fonts/source-sans-3-latin-400-italic.woff2') format('woff2');
+  font-weight: 400;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'Source Sans Pro';
+  src:
+    local('Source Sans Pro'),
+    url('/fonts/source-sans-3-latin-600-normal.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Source Sans Pro';
+  src:
+    local('Source Sans Pro'),
+    url('/fonts/source-sans-3-latin-600-italic.woff2') format('woff2');
+  font-weight: 600;
+  font-style: italic;
+}
 
 :root {
   --transition-time: 0.3s;

package/custom-elements.json

@@ -5802,7 +5802,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Et ikon.\nVi bruker ikoner fra Material Symbols, men det er også mulig å bruke ikoner fra egen repo. Det anbefales sterkt å bruke Material-ikonene.\nStrektykkelsen skal være 400, uavhengig av ikonets størrelse, og kun stilene Sharp og Outlined skal brukes.\nFill-stilen bør unngås, da den fyller hele ikonet med farge i stedet for å bruke kun konturer",
+          "description": "Et ikon.\nVi bruker ikoner fra Material Symbols, men det er også mulig å bruke ikoner fra eget repo. \nVi anbefaler å bruke Material-ikonene.\nStrektykkelsen skal være 400, uavhengig av ikonets størrelse, og kun stilene Sharp og Outlined skal brukes.\nFill-stilen bør unngås, da den fyller hele ikonet med farge i stedet for å bruke kun konturer",
           "name": "NveIcon",
           "cssProperties": [
             {
@@ -5850,7 +5850,8 @@
               "type": {
                 "text": "string"
               },
-              "default": "''"
+              "default": "''",
+              "description": "Filnavn til ikonet om du velger å bruke et lokalt ikon"
             },
             {
               "kind": "field",
@@ -5858,7 +5859,8 @@
               "type": {
                 "text": "string | undefined"
               },
-              "default": "undefined"
+              "default": "undefined",
+              "description": "En beskrivelse av ikonet"
             },
             {
               "kind": "method",
@@ -5885,14 +5887,14 @@
               "type": {
                 "text": "string"
               },
-              "description": ""
+              "description": "Filnavn til ikonet om du velger å bruke et lokalt ikon"
             },
             {
               "name": "alt",
               "type": {
                 "text": "string | undefined"
               },
-              "description": ""
+              "description": "En beskrivelse av ikonet"
             }
           ],
           "superclass": {
@@ -5902,7 +5904,7 @@
           "tagNameWithoutPrefix": "icon",
           "tagName": "nve-icon",
           "customElement": true,
-          "jsDoc": "/**\n * Et ikon.\n * Vi bruker ikoner fra Material Symbols, men det er også mulig å bruke ikoner fra egen repo. Det anbefales sterkt å bruke Material-ikonene.\n * Strektykkelsen skal være 400, uavhengig av ikonets størrelse, og kun stilene Sharp og Outlined skal brukes.\n * Fill-stilen bør unngås, da den fyller hele ikonet med farge i stedet for å bruke kun konturer\n * @see https://fonts.google.com/icons\n * @csspart icon - Selve ikon span-element.\n * @cssproperty --icon-size - Størrelse på ikonet. 16px er standard.\n */"
+          "jsDoc": "/**\n * Et ikon.\n * Vi bruker ikoner fra Material Symbols, men det er også mulig å bruke ikoner fra eget repo. \n * Vi anbefaler å bruke Material-ikonene.\n * Strektykkelsen skal være 400, uavhengig av ikonets størrelse, og kun stilene Sharp og Outlined skal brukes.\n * Fill-stilen bør unngås, da den fyller hele ikonet med farge i stedet for å bruke kun konturer\n * @see https://fonts.google.com/icons\n * @csspart icon - Selve ikon span-element.\n * @cssproperty --icon-size - Størrelse på ikonet. 16px er standard.\n */"
         }
       ],
       "exports": [
@@ -14712,7 +14714,7 @@
   "package": {
     "name": "nve-designsystem",
     "description": "Designsystem for NVE",
-    "version": "2.14.1",
+    "version": "2.14.2",
     "author": {
       "name": "NVE",
       "email": "nve@nve.no"

package/package.json

@@ -7,7 +7,7 @@
   },
   "license": "MIT",
   "homepage": "https://github.com/NVE/Designsystem/",
-  "version": "2.14.2",
+  "version": "2.15.0",
   "customElements": "custom-elements.json",
   "exports": {
     ".": {
@@ -19,7 +19,8 @@
     "./dist/vscode.css-custom-data.json": "./vscode.css-custom-data.json",
     "./components/*": "./components/*",
     "./registerIcons/*": "./registerIcons/*",
-    "./css/*": "./css/*"
+    "./css/*": "./css/*",
+    "./fonts/*": "./fonts/*"
   },
   "type": "module",
   "types": "nve-designsystem.d.ts",

package/vscode.html-custom-data.json

@@ -797,7 +797,7 @@
     },
     {
       "name": "nve-icon",
-      "description": "Et ikon.\nVi bruker ikoner fra Material Symbols, men det er også mulig å bruke ikoner fra egen repo. Det anbefales sterkt å bruke Material-ikonene.\nStrektykkelsen skal være 400, uavhengig av ikonets størrelse, og kun stilene Sharp og Outlined skal brukes.\nFill-stilen bør unngås, da den fyller hele ikonet med farge i stedet for å bruke kun konturer\n---\n\n\n### **CSS-variabler:**\n - **--icon-size** - Størrelse på ikonet. 16px er standard. _(default: undefined)_\n\n### **Deler:**\n - **icon** - Selve ikon span-element.",
+      "description": "Et ikon.\nVi bruker ikoner fra Material Symbols, men det er også mulig å bruke ikoner fra eget repo. \nVi anbefaler å bruke Material-ikonene.\nStrektykkelsen skal være 400, uavhengig av ikonets størrelse, og kun stilene Sharp og Outlined skal brukes.\nFill-stilen bør unngås, da den fyller hele ikonet med farge i stedet for å bruke kun konturer\n---\n\n\n### **CSS-variabler:**\n - **--icon-size** - Størrelse på ikonet. 16px er standard. _(default: undefined)_\n\n### **Deler:**\n - **icon** - Selve ikon span-element.",
       "attributes": [
         {
           "name": "library",
@@ -809,8 +809,16 @@
           "description": "Navnet på ikonet i Material Symbols-biblioteket",
           "values": []
         },
-        { "name": "src", "description": "", "values": [] },
-        { "name": "alt", "description": "", "values": [] }
+        {
+          "name": "src",
+          "description": "Filnavn til ikonet om du velger å bruke et lokalt ikon",
+          "values": []
+        },
+        {
+          "name": "alt",
+          "description": "En beskrivelse av ikonet",
+          "values": []
+        }
       ],
       "references": [
         {