nve-designsystem 2.12.3 → 2.13.0

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

@@ -3,7 +3,7 @@ import { INveComponent } from '../../interfaces/NveComponent.interface';
 /**
  * Brukes til å vise viktige beskjeder som toast. Dette er en komponent som bruker alert-rollen.
  * Hvis du trenger å vise en statisk varsling med mer informasjon, bruk nve-message-card.
- * Les mer i seksjonen om universel utforming.
+ * Les mer i seksjonen om tilgjengelighet.
  *
  * @slot - tekst - Hoved teksten i alerten.
  * @slot icon - Det første ikonet (til venstre).

package/components/nve-link-card/nve-link-card.component.d.ts

@@ -2,6 +2,10 @@ import { LitElement } from 'lit';
 import { INveComponent } from '../../interfaces/NveComponent.interface';
 /**
  * Komponent som brukes til å navigere til interne, eksterne sider, laste ned filer, eller sende e-post.
+ * For å bruke komponenten på best og tilgjengelig måte les mer i tilgjengelighet seksjonen.
+ *
+ * @csspart link-card Topp-element
+ * @csspart label Overskriften
  */
 export default class NveLinkCard extends LitElement implements INveComponent {
     /** Tittel som vises øverst på kortet */
@@ -18,33 +22,14 @@ export default class NveLinkCard extends LitElement implements INveComponent {
     clickAction: 'internal' | 'download' | 'external' | 'mail';
     /** Lenken som brukes for handlinger som intern/ekstern navigering eller e-post */
     href: string | undefined;
-    /** Valgfri nedlastingsfunksjon som kan overstyres for å implementere spesifikk nedlastingslogikk */
-    downloadHandler: () => void;
-    /** Tilpasset klikk-handler som kan brukes til å overstyre standard atferd (f.eks. i Vue med vue-router) */
-    customClickHandler?: (event: MouseEvent) => void;
+    /** Brukes for å legge :visited style når lenken kommer fra eksternt rammeverk som f.eks RouterLink i Vue */
+    visited: boolean;
     static styles: import('lit').CSSResult[];
-    /**
-     * Standard nedlastingsfunksjon som brukes hvis downloadHandler ikke er overstyrt.
-     * Bruker lenken (href) til å laste ned en fil.
-     */
-    private defaultDownloadHandler;
-    /**
-     * Denne funksjonen bestemmer hva som skjer når kortet blir klikket, basert på verdien av clickAction.
-     * Hvis Ctrl, Shift, Alt eller Meta er trykket, følger vi standard bruksmønstre:
-     * Ctrl/Cmd + Klikk: Åpner lenken i en ny fane.
-     * Shift + Klikk: Åpner lenken i et nytt vindu.
-     * Alt + Klikk: Laster ned lenken (hvis det er en fil).
-     * Hvis customClickHandler er definert, overstyres standard klikkatferd.
-     */
-    private handleClick;
-    /**
-     * Denne er lagt til slik man klikke på cardet ved bruk av tastaturet.
-     */
-    private handleKeyDown;
     /**
      * Returnerer ikonnavnet som vises på kortet basert på clickAction.
      */
     private getIconName;
+    private renderContent;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

package/components/nve-link-card/nve-link-card.component.js

@@ -1,76 +1,17 @@
-import { a as h, E as f, x as c } from "../../chunks/lit-element.js";
-import { n as o, t as p } from "../../chunks/property.js";
-import w from "./nve-link-card.styles.js";
-var u = Object.defineProperty, m = Object.getOwnPropertyDescriptor, i = (e, l, n, s) => {
-  for (var r = s > 1 ? void 0 : s ? m(l, n) : l, a = e.length - 1, d; a >= 0; a--)
-    (d = e[a]) && (r = (s ? d(l, n, r) : d(r)) || r);
-  return s && r && u(l, n, r), r;
+import { a as v, E as h, x as s } from "../../chunks/lit-element.js";
+import { n as i, t as m } from "../../chunks/property.js";
+import { e as f } from "../../chunks/class-map.js";
+import { o as p } from "../../chunks/if-defined.js";
+import u from "./nve-link-card.styles.js";
+import "../nve-icon/nve-icon.component.js";
+var k = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, e = (o, a, l, n) => {
+  for (var r = n > 1 ? void 0 : n ? _(a, l) : a, d = o.length - 1, c; d >= 0; d--)
+    (c = o[d]) && (r = (n ? c(a, l, r) : c(r)) || r);
+  return n && r && k(a, l, r), r;
 };
-let t = class extends h {
+let t = class extends v {
   constructor() {
-    super(...arguments), this.label = "", this.size = "medium", this.variant = "primary", this.testId = void 0, this.clickAction = "internal", this.href = void 0, this.downloadHandler = this.defaultDownloadHandler;
-  }
-  /**
-   * Standard nedlastingsfunksjon som brukes hvis downloadHandler ikke er overstyrt.
-   * Bruker lenken (href) til å laste ned en fil.
-   */
-  async defaultDownloadHandler() {
-    if (this.href) {
-      const e = this.href, l = e.split("/").pop() || "download";
-      try {
-        const n = await fetch(e, { mode: "cors" });
-        if (!n.ok) throw new Error(`Failed to fetch file: ${n.statusText}`);
-        const s = await n.blob(), r = URL.createObjectURL(s), a = document.createElement("a");
-        a.href = r, a.download = l, document.body.appendChild(a), a.click(), document.body.removeChild(a), URL.revokeObjectURL(r);
-      } catch {
-      }
-    }
-  }
-  /**
-   * Denne funksjonen bestemmer hva som skjer når kortet blir klikket, basert på verdien av clickAction.
-   * Hvis Ctrl, Shift, Alt eller Meta er trykket, følger vi standard bruksmønstre:
-   * Ctrl/Cmd + Klikk: Åpner lenken i en ny fane.
-   * Shift + Klikk: Åpner lenken i et nytt vindu.
-   * Alt + Klikk: Laster ned lenken (hvis det er en fil).
-   * Hvis customClickHandler er definert, overstyres standard klikkatferd.
-   */
-  handleClick(e) {
-    if (this.customClickHandler) {
-      e instanceof MouseEvent && this.customClickHandler(e);
-      return;
-    }
-    if (this.href && (e.ctrlKey || e.metaKey)) {
-      window.open(this.href, "_blank");
-      return;
-    }
-    if (this.href && e.shiftKey) {
-      window.open(this.href, "_blank", "noopener,noreferrer");
-      return;
-    }
-    if (e.altKey && this.clickAction === "download" && this.href) {
-      this.downloadHandler();
-      return;
-    }
-    switch (this.clickAction) {
-      case "internal":
-        this.href && (window.location.href = this.href);
-        break;
-      case "download":
-        this.downloadHandler && this.downloadHandler();
-        break;
-      case "external":
-        this.href && window.open(this.href, "_blank");
-        break;
-      case "mail":
-        this.href && (window.location.href = `mailto:${this.href}`);
-        break;
-    }
-  }
-  /**
-   * Denne er lagt til slik man klikke på cardet ved bruk av tastaturet.
-   */
-  handleKeyDown(e) {
-    e.key === "Enter" && this.handleClick(e);
+    super(...arguments), this.label = "", this.size = "medium", this.variant = "primary", this.testId = void 0, this.clickAction = "internal", this.href = void 0, this.visited = !1;
   }
   /**
    * Returnerer ikonnavnet som vises på kortet basert på clickAction.
@@ -89,56 +30,67 @@ let t = class extends h {
         return "arrow_forward";
     }
   }
+  renderContent() {
+    return s`
+      <div class="link-card__content">
+        <div part="label" class="link-card__label">${this.label}</div>
+        ${this.additionalText ? s`<div part="additional-text" class="link-card__additional-text">${this.additionalText}</div>` : h}
+      </div>
+      <nve-icon aria-hidden="true" slot="suffix" name="${this.getIconName()}"></nve-icon>
+    `;
+  }
   render() {
-    return c`
-      <a
+    return this.parentElement?.tagName.toLowerCase() === "a" || this.parentElement?.getAttribute("role") === "link" ? s` <div
         part="link-card"
-        class="link-card link-card--${this.size} link-card--${this.variant}"
-        tabindex="0"
-        @click="${this.handleClick}"
-        @keydown="${this.handleKeyDown}"
+        testId="${p(this.testId)}"
+        class=${f({
+      "link-card": !0,
+      "link-card--visited": this.visited,
+      [`link-card--${this.size}`]: !0,
+      [`link-card--${this.variant}`]: !0
+    })}
       >
-        <div class="link-card__content">
-          <div part="label" class="link-card__label">${this.label}</div>
-          ${this.additionalText ? c`<div part="additional-text" class="link-card__additional-text">${this.additionalText}</div>` : f}
-        </div>
-        <div>
-          <nve-icon slot="suffix" name="${this.getIconName()}" style="font-size: 1.5rem;"></nve-icon>
-        </div>
-      </a>
-    `;
+        ${this.renderContent()}
+      </div>` : s`
+        <a
+          testId="${p(this.testId)}"
+          ?download=${this.clickAction === "download"}
+          part="link-card"
+          class="link-card link-card--${this.size} link-card--${this.variant}"
+          href=${p(this.clickAction === "mail" ? `mailto:${this.href}` : this.href)}
+          target=${this.clickAction === "external" ? "_blank" : h}
+          >${this.renderContent()}
+        </a>
+      `;
   }
 };
-t.styles = [w];
-i([
-  o({ reflect: !0 })
+t.styles = [u];
+e([
+  i()
 ], t.prototype, "label", 2);
-i([
-  o({ reflect: !0 })
+e([
+  i()
 ], t.prototype, "additionalText", 2);
-i([
-  o({ reflect: !0 })
+e([
+  i()
 ], t.prototype, "size", 2);
-i([
-  o({ reflect: !0 })
+e([
+  i()
 ], t.prototype, "variant", 2);
-i([
-  o({ reflect: !0 })
+e([
+  i()
 ], t.prototype, "testId", 2);
-i([
-  o({ reflect: !0 })
+e([
+  i({ type: String })
 ], t.prototype, "clickAction", 2);
-i([
-  o({ reflect: !0 })
+e([
+  i()
 ], t.prototype, "href", 2);
-i([
-  o()
-], t.prototype, "downloadHandler", 2);
-i([
-  o()
-], t.prototype, "customClickHandler", 2);
-t = i([
-  p("nve-link-card")
+e([
+  i({ type: Boolean })
+], t.prototype, "visited", 2);
+t = e([
+  m("nve-link-card")
 ], t);
 export {
   t as default

package/components/nve-link-card/nve-link-card.styles.js

@@ -3,13 +3,20 @@ const e = r`
   .link-card {
     border-radius: var(--borderRadius-large, 6px);
     padding: var(--spacing-medium, 16px) var(--spacing-large, 24px);
-    transition: all 0.3s ease;
+    transition: background 0.3s ease;
     border: 2px solid transparent;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     cursor: pointer;
+    text-decoration: none;
+    color: var(--neutrals-foreground-primary, #0d0d0e);
+  }
+
+  .link-card--visited,
+  .link-card:visited {
+    color: var(--interactive-links-visited);
   }
 
   .link-card:focus {
@@ -39,13 +46,18 @@ const e = r`
 
   .link-card__label {
     font-size: 1rem;
-    color: var(--neutrals-foreground-primary, #0d0d0e);
+    color: inherit;
     font-family: 'Source Sans Pro';
     font-style: normal;
     font-weight: 400;
     line-height: 150%;
   }
 
+  .link-card--visited .link-card__label,
+  .link-card:visited .link-card__label {
+    color: var(--interactive-links-visited);
+  }
+
   .link-card__label--small {
     font-size: 0.875rem;
   }
@@ -61,7 +73,7 @@ const e = r`
   }
 
   .link-card__additional-text {
-    color: var(--neutrals-foreground-primary, #0d0d0e);
+    color: inherit;
     font-family: 'Source Sans Pro';
     font-style: normal;
     font-weight: 400;
@@ -70,6 +82,11 @@ const e = r`
     font-size: 0.875rem;
   }
 
+  .link-card--visited .link-card__additional-text,
+  .link-card:visited .link-card__additional-text {
+    color: var(--interactive-links-visited);
+  }
+
   .link-card--primary {
     background: var(--neutrals-background-primary, #fff);
   }
@@ -94,6 +111,11 @@ const e = r`
     border-radius: var(--borderRadius-large, 6px);
     border: 2px solid var(--neutrals-foreground-primary, #0d0d0e);
   }
+
+  nve-icon {
+    --icon-size: 24px;
+    color: var(--neutrals-foreground-primary);
+  }
 `;
 export {
   e as default

package/components/nve-tab-group/nve-tab-group.component.d.ts

@@ -5,7 +5,7 @@ import { INveComponent } from '../../interfaces/NveComponent.interface';
  * Håndterer navigasjon mellom faner, synkronisering av aktive faner og paneler, samt tilgjengelighetsegenskaper.
  * Sporet 'nav' brukes for å legge til faner, og standardsporet brukes for innholdspaneler. Foreløpig støttes kun horisontal retning på fanene.
  * Automatisk aktivering av faner (når man blar mellom fanene med tastatur) støttes ikke – det kan være uheldig fra et tilgjengelighetsperspektiv.
- * For beste praksis, les mer i seksjonen om universell utforming.
+ * For beste praksis, les mer i seksjonen om tilgjengelighet.
  *
  * @event nve-tab-change Når aktiv fane endres.
  *

package/components/nve-warning-level/nve-warning-level.component.d.ts

@@ -10,7 +10,7 @@ import { INveComponent } from '../../interfaces/NveComponent.interface';
  * Komponenten kan legges inni button- eller a-elementer for å gi ekstra hover-effekter.
  *
  * Tilgjengelighetsmerkingen (aria-label) kan variere ut fra behov, og det anbefales derfor at brukere selv setter verdiene for ariaLabel.
- * Les mer i seksjonen om universel utforming.
+ * Les mer i seksjonen om tilgjengelighet.
  * @csspart base - farenivå kontainer
  * @csspart warning-badge - støtte badge som vises nederst til høyre i faregradskomponenten
  *

package/css/global.css

@@ -51,6 +51,11 @@
   --sl-input-letter-spacing: var(--sl-letter-spacing-normal);
 }
 
+/* Brukes for å fjerne standard linje i <a> hvis man skal wrappe nve-link-card med routerLink component i SPA*/
+a:has(nve-link-card) {
+  text-decoration: unset;
+}
+
 /* Brukes i nve-alert for å vise toast*/
 .toast-stack {
   position: fixed;

package/custom-elements.json

@@ -70,134 +70,13 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/nve-accordion-item/nve-accordion-item.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Viser et kort sammendrag og utvides for å vise ekstra innhold.\nKan brukes som en selvstendig komponent eller som en del av nve-accordion.",
-          "name": "NveAccordionItem",
-          "members": [
-            {
-              "kind": "field",
-              "name": "testId",
-              "type": {
-                "text": "string | undefined"
-              },
-              "default": "undefined"
-            },
-            {
-              "kind": "field",
-              "name": "leftStroke",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "tykk strek på venstre side"
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "'none' | 'neutral' | 'info' | 'success' | 'warning' | 'error'"
-              },
-              "default": "'none'",
-              "description": "Setter farge på bakgrunn og tekst"
-            },
-            {
-              "kind": "field",
-              "name": "border",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Vis en ramme rundt hele komponenten"
-            },
-            {
-              "kind": "field",
-              "name": "compact",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Kompakt visning uten luft på sidene. En strek vil vises under for å skille komponenter fra hverandre"
-            },
-            {
-              "kind": "field",
-              "name": "styles",
-              "type": {
-                "text": "array"
-              },
-              "static": true,
-              "default": "[SlDetails.styles, styles]"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "testId",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": ""
-            },
-            {
-              "name": "leftStroke",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "tykk strek på venstre side"
-            },
-            {
-              "name": "variant",
-              "type": {
-                "text": "'none' | 'neutral' | 'info' | 'success' | 'warning' | 'error'"
-              },
-              "description": "Setter farge på bakgrunn og tekst"
-            },
-            {
-              "name": "border",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Vis en ramme rundt hele komponenten"
-            },
-            {
-              "name": "compact",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Kompakt visning uten luft på sidene. En strek vil vises under for å skille komponenter fra hverandre"
-            }
-          ],
-          "superclass": {
-            "name": "SlDetails",
-            "package": "@shoelace-style/shoelace"
-          },
-          "tagNameWithoutPrefix": "accordion-item",
-          "tagName": "nve-accordion-item",
-          "customElement": true,
-          "jsDoc": "/**\n * Viser et kort sammendrag og utvides for å vise ekstra innhold.\n * Kan brukes som en selvstendig komponent eller som en del av nve-accordion.\n */"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "NveAccordionItem",
-            "module": "components/nve-accordion-item/nve-accordion-item.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/nve-alert/nve-alert.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "Brukes til å vise viktige beskjeder som toast. Dette er en komponent som bruker alert-rollen.\nHvis du trenger å vise en statisk varsling med mer informasjon, bruk nve-message-card.\nLes mer i seksjonen om universel utforming.",
+          "description": "Brukes til å vise viktige beskjeder som toast. Dette er en komponent som bruker alert-rollen.\nHvis du trenger å vise en statisk varsling med mer informasjon, bruk nve-message-card.\nLes mer i seksjonen om tilgjengelighet.",
           "name": "NveAlert",
           "cssParts": [
             {
@@ -577,7 +456,7 @@
           "tagNameWithoutPrefix": "alert",
           "tagName": "nve-alert",
           "customElement": true,
-          "jsDoc": "/**\n * Brukes til å vise viktige beskjeder som toast. Dette er en komponent som bruker alert-rollen.\n * Hvis du trenger å vise en statisk varsling med mer informasjon, bruk nve-message-card.\n * Les mer i seksjonen om universel utforming.\n *\n * @slot - tekst - Hoved teksten i alerten.\n * @slot icon - Det første ikonet (til venstre).\n * @slot label - Overskriften for alerten.\n *\n * @event sl-after-hide Etter allerten er skjult\n * @event sl-after-show Etter allerten er vist\n * @event sl-show Når alerten blir vist\n * @event sl-hide Når alerten blir skjult\n *\n * @csspart base Topp-element\n * @csspart icon Ikonet til venstre\n * @csspart label Overskriften\n * @csspart message Hoved tekst\n *\n */"
+          "jsDoc": "/**\n * Brukes til å vise viktige beskjeder som toast. Dette er en komponent som bruker alert-rollen.\n * Hvis du trenger å vise en statisk varsling med mer informasjon, bruk nve-message-card.\n * Les mer i seksjonen om tilgjengelighet.\n *\n * @slot - tekst - Hoved teksten i alerten.\n * @slot icon - Det første ikonet (til venstre).\n * @slot label - Overskriften for alerten.\n *\n * @event sl-after-hide Etter allerten er skjult\n * @event sl-after-show Etter allerten er vist\n * @event sl-show Når alerten blir vist\n * @event sl-hide Når alerten blir skjult\n *\n * @csspart base Topp-element\n * @csspart icon Ikonet til venstre\n * @csspart label Overskriften\n * @csspart message Hoved tekst\n *\n */"
         }
       ],
       "exports": [
@@ -591,6 +470,127 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/nve-accordion-item/nve-accordion-item.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Viser et kort sammendrag og utvides for å vise ekstra innhold.\nKan brukes som en selvstendig komponent eller som en del av nve-accordion.",
+          "name": "NveAccordionItem",
+          "members": [
+            {
+              "kind": "field",
+              "name": "testId",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "undefined"
+            },
+            {
+              "kind": "field",
+              "name": "leftStroke",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "tykk strek på venstre side"
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "'none' | 'neutral' | 'info' | 'success' | 'warning' | 'error'"
+              },
+              "default": "'none'",
+              "description": "Setter farge på bakgrunn og tekst"
+            },
+            {
+              "kind": "field",
+              "name": "border",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Vis en ramme rundt hele komponenten"
+            },
+            {
+              "kind": "field",
+              "name": "compact",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Kompakt visning uten luft på sidene. En strek vil vises under for å skille komponenter fra hverandre"
+            },
+            {
+              "kind": "field",
+              "name": "styles",
+              "type": {
+                "text": "array"
+              },
+              "static": true,
+              "default": "[SlDetails.styles, styles]"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "testId",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": ""
+            },
+            {
+              "name": "leftStroke",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "tykk strek på venstre side"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "'none' | 'neutral' | 'info' | 'success' | 'warning' | 'error'"
+              },
+              "description": "Setter farge på bakgrunn og tekst"
+            },
+            {
+              "name": "border",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Vis en ramme rundt hele komponenten"
+            },
+            {
+              "name": "compact",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Kompakt visning uten luft på sidene. En strek vil vises under for å skille komponenter fra hverandre"
+            }
+          ],
+          "superclass": {
+            "name": "SlDetails",
+            "package": "@shoelace-style/shoelace"
+          },
+          "tagNameWithoutPrefix": "accordion-item",
+          "tagName": "nve-accordion-item",
+          "customElement": true,
+          "jsDoc": "/**\n * Viser et kort sammendrag og utvides for å vise ekstra innhold.\n * Kan brukes som en selvstendig komponent eller som en del av nve-accordion.\n */"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "NveAccordionItem",
+            "module": "components/nve-accordion-item/nve-accordion-item.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/nve-badge/nve-badge.js",
@@ -3206,8 +3206,18 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Komponent som brukes til å navigere til interne, eksterne sider, laste ned filer, eller sende e-post.",
+          "description": "Komponent som brukes til å navigere til interne, eksterne sider, laste ned filer, eller sende e-post.\nFor å bruke komponenten på best og tilgjengelig måte les mer i tilgjengelighet seksjonen.",
           "name": "NveLinkCard",
+          "cssParts": [
+            {
+              "description": "Topp-element",
+              "name": "link-card"
+            },
+            {
+              "description": "Overskriften",
+              "name": "label"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -3273,19 +3283,12 @@
             },
             {
               "kind": "field",
-              "name": "downloadHandler",
+              "name": "visited",
               "type": {
-                "text": "() => void"
-              },
-              "description": "Valgfri nedlastingsfunksjon som kan overstyres for å implementere spesifikk nedlastingslogikk"
-            },
-            {
-              "kind": "field",
-              "name": "customClickHandler",
-              "type": {
-                "text": "(event: MouseEvent) => void | undefined"
+                "text": "boolean"
               },
-              "description": "Tilpasset klikk-handler som kan brukes til å overstyre standard atferd (f.eks. i Vue med vue-router)"
+              "default": "false",
+              "description": "Brukes for å legge :visited style når lenken kommer fra eksternt rammeverk som f.eks RouterLink i Vue"
             },
             {
               "kind": "field",
@@ -3298,43 +3301,14 @@
             },
             {
               "kind": "method",
-              "name": "defaultDownloadHandler",
-              "privacy": "private",
-              "description": "Standard nedlastingsfunksjon som brukes hvis downloadHandler ikke er overstyrt.\nBruker lenken (href) til å laste ned en fil."
-            },
-            {
-              "kind": "method",
-              "name": "handleClick",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent | KeyboardEvent"
-                  }
-                }
-              ],
-              "description": "Denne funksjonen bestemmer hva som skjer når kortet blir klikket, basert på verdien av clickAction.\nHvis Ctrl, Shift, Alt eller Meta er trykket, følger vi standard bruksmønstre:\nCtrl/Cmd + Klikk: Åpner lenken i en ny fane.\nShift + Klikk: Åpner lenken i et nytt vindu.\nAlt + Klikk: Laster ned lenken (hvis det er en fil).\nHvis customClickHandler er definert, overstyres standard klikkatferd."
-            },
-            {
-              "kind": "method",
-              "name": "handleKeyDown",
+              "name": "getIconName",
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ],
-              "description": "Denne er lagt til slik man klikke på cardet ved bruk av tastaturet."
+              "description": "Returnerer ikonnavnet som vises på kortet basert på clickAction."
             },
             {
               "kind": "method",
-              "name": "getIconName",
-              "privacy": "private",
-              "description": "Returnerer ikonnavnet som vises på kortet basert på clickAction."
+              "name": "renderContent",
+              "privacy": "private"
             },
             {
               "kind": "method",
@@ -3392,18 +3366,11 @@
               "description": "Lenken som brukes for handlinger som intern/ekstern navigering eller e-post"
             },
             {
-              "name": "downloadHandler",
+              "name": "visited",
               "type": {
-                "text": "() => void"
-              },
-              "description": "Valgfri nedlastingsfunksjon som kan overstyres for å implementere spesifikk nedlastingslogikk"
-            },
-            {
-              "name": "customClickHandler",
-              "type": {
-                "text": "(event: MouseEvent) => void"
+                "text": "boolean"
               },
-              "description": "Tilpasset klikk-handler som kan brukes til å overstyre standard atferd (f.eks. i Vue med vue-router)"
+              "description": "Brukes for å legge :visited style når lenken kommer fra eksternt rammeverk som f.eks RouterLink i Vue"
             }
           ],
           "superclass": {
@@ -3413,7 +3380,7 @@
           "tagNameWithoutPrefix": "link-card",
           "tagName": "nve-link-card",
           "customElement": true,
-          "jsDoc": "/**\n * Komponent som brukes til å navigere til interne, eksterne sider, laste ned filer, eller sende e-post.\n */"
+          "jsDoc": "/**\n * Komponent som brukes til å navigere til interne, eksterne sider, laste ned filer, eller sende e-post.\n * For å bruke komponenten på best og tilgjengelig måte les mer i tilgjengelighet seksjonen.\n *\n * @csspart link-card Topp-element\n * @csspart label Overskriften\n */"
         }
       ],
       "exports": [
@@ -5470,7 +5437,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Fanegruppe som viser og styrer et sett med faner og tilhørende innholdspaneler.\nHåndterer navigasjon mellom faner, synkronisering av aktive faner og paneler, samt tilgjengelighetsegenskaper.\nSporet 'nav' brukes for å legge til faner, og standardsporet brukes for innholdspaneler. Foreløpig støttes kun horisontal retning på fanene.\nAutomatisk aktivering av faner (når man blar mellom fanene med tastatur) støttes ikke – det kan være uheldig fra et tilgjengelighetsperspektiv.\nFor beste praksis, les mer i seksjonen om universell utforming.",
+          "description": "Fanegruppe som viser og styrer et sett med faner og tilhørende innholdspaneler.\nHåndterer navigasjon mellom faner, synkronisering av aktive faner og paneler, samt tilgjengelighetsegenskaper.\nSporet 'nav' brukes for å legge til faner, og standardsporet brukes for innholdspaneler. Foreløpig støttes kun horisontal retning på fanene.\nAutomatisk aktivering av faner (når man blar mellom fanene med tastatur) støttes ikke – det kan være uheldig fra et tilgjengelighetsperspektiv.\nFor beste praksis, les mer i seksjonen om tilgjengelighet.",
           "name": "NveTabGroup",
           "cssProperties": [
             {
@@ -5714,7 +5681,7 @@
           "tagNameWithoutPrefix": "tab-group",
           "tagName": "nve-tab-group",
           "customElement": true,
-          "jsDoc": "/**\n * Fanegruppe som viser og styrer et sett med faner og tilhørende innholdspaneler.\n * Håndterer navigasjon mellom faner, synkronisering av aktive faner og paneler, samt tilgjengelighetsegenskaper.\n * Sporet 'nav' brukes for å legge til faner, og standardsporet brukes for innholdspaneler. Foreløpig støttes kun horisontal retning på fanene.\n * Automatisk aktivering av faner (når man blar mellom fanene med tastatur) støttes ikke – det kan være uheldig fra et tilgjengelighetsperspektiv.\n * For beste praksis, les mer i seksjonen om universell utforming.\n *\n * @event nve-tab-change Når aktiv fane endres.\n *\n * @csspart base Topp-element\n * @csspart body Innholdet i tab gruppen\n * @csspart nav hoved kontainer for fanene\n * @csspart button-backward-base Bakoverknapp kontainer\n * @csspart button-forward-base Fremoverknapp kontainer\n *\n * @slot (nav) - legg inn faner her.\n * @slot (standard) - legg inn paneler her.\n *  @cssproperty --scroll-button-background - farge på bakover og fremoverknappene. Standard er #fff og #1b1b1f for dark modus.\n */"
+          "jsDoc": "/**\n * Fanegruppe som viser og styrer et sett med faner og tilhørende innholdspaneler.\n * Håndterer navigasjon mellom faner, synkronisering av aktive faner og paneler, samt tilgjengelighetsegenskaper.\n * Sporet 'nav' brukes for å legge til faner, og standardsporet brukes for innholdspaneler. Foreløpig støttes kun horisontal retning på fanene.\n * Automatisk aktivering av faner (når man blar mellom fanene med tastatur) støttes ikke – det kan være uheldig fra et tilgjengelighetsperspektiv.\n * For beste praksis, les mer i seksjonen om tilgjengelighet.\n *\n * @event nve-tab-change Når aktiv fane endres.\n *\n * @csspart base Topp-element\n * @csspart body Innholdet i tab gruppen\n * @csspart nav hoved kontainer for fanene\n * @csspart button-backward-base Bakoverknapp kontainer\n * @csspart button-forward-base Fremoverknapp kontainer\n *\n * @slot (nav) - legg inn faner her.\n * @slot (standard) - legg inn paneler her.\n *  @cssproperty --scroll-button-background - farge på bakover og fremoverknappene. Standard er #fff og #1b1b1f for dark modus.\n */"
         }
       ],
       "exports": [
@@ -6636,7 +6603,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "DangerLevel-komponenten brukes til å vise gjeldende faregrad ved hjelp av farge og et siffer som representerer nivået.\nFaregraden angis med et tall fra 1 til 5, eller et spørsmålstegn (?) dersom nivået er ukjent.\n\nI tillegg kan faregraden støttes av et ekstra ikon/badge som plasseres nederst til høyre i komponenten.\nDette ikonet kan være enten en trekant eller en sirkel (se eksempler nedenfor) for å tiltrekke ekstra oppmerksomhet.\n\nKomponenten kan legges inni button- eller a-elementer for å gi ekstra hover-effekter.\n\nTilgjengelighetsmerkingen (aria-label) kan variere ut fra behov, og det anbefales derfor at brukere selv setter verdiene for ariaLabel.\nLes mer i seksjonen om universel utforming.",
+          "description": "DangerLevel-komponenten brukes til å vise gjeldende faregrad ved hjelp av farge og et siffer som representerer nivået.\nFaregraden angis med et tall fra 1 til 5, eller et spørsmålstegn (?) dersom nivået er ukjent.\n\nI tillegg kan faregraden støttes av et ekstra ikon/badge som plasseres nederst til høyre i komponenten.\nDette ikonet kan være enten en trekant eller en sirkel (se eksempler nedenfor) for å tiltrekke ekstra oppmerksomhet.\n\nKomponenten kan legges inni button- eller a-elementer for å gi ekstra hover-effekter.\n\nTilgjengelighetsmerkingen (aria-label) kan variere ut fra behov, og det anbefales derfor at brukere selv setter verdiene for ariaLabel.\nLes mer i seksjonen om tilgjengelighet.",
           "name": "NveWarningLevel",
           "cssParts": [
             {
@@ -6751,7 +6718,7 @@
           "tagNameWithoutPrefix": "warning-level",
           "tagName": "nve-warning-level",
           "customElement": true,
-          "jsDoc": "/**\n * DangerLevel-komponenten brukes til å vise gjeldende faregrad ved hjelp av farge og et siffer som representerer nivået.\n * Faregraden angis med et tall fra 1 til 5, eller et spørsmålstegn (?) dersom nivået er ukjent.\n *\n * I tillegg kan faregraden støttes av et ekstra ikon/badge som plasseres nederst til høyre i komponenten.\n * Dette ikonet kan være enten en trekant eller en sirkel (se eksempler nedenfor) for å tiltrekke ekstra oppmerksomhet.\n *\n * Komponenten kan legges inni button- eller a-elementer for å gi ekstra hover-effekter.\n *\n * Tilgjengelighetsmerkingen (aria-label) kan variere ut fra behov, og det anbefales derfor at brukere selv setter verdiene for ariaLabel.\n * Les mer i seksjonen om universel utforming.\n * @csspart base - farenivå kontainer\n * @csspart warning-badge - støtte badge som vises nederst til høyre i faregradskomponenten\n *\n */"
+          "jsDoc": "/**\n * DangerLevel-komponenten brukes til å vise gjeldende faregrad ved hjelp av farge og et siffer som representerer nivået.\n * Faregraden angis med et tall fra 1 til 5, eller et spørsmålstegn (?) dersom nivået er ukjent.\n *\n * I tillegg kan faregraden støttes av et ekstra ikon/badge som plasseres nederst til høyre i komponenten.\n * Dette ikonet kan være enten en trekant eller en sirkel (se eksempler nedenfor) for å tiltrekke ekstra oppmerksomhet.\n *\n * Komponenten kan legges inni button- eller a-elementer for å gi ekstra hover-effekter.\n *\n * Tilgjengelighetsmerkingen (aria-label) kan variere ut fra behov, og det anbefales derfor at brukere selv setter verdiene for ariaLabel.\n * Les mer i seksjonen om tilgjengelighet.\n * @csspart base - farenivå kontainer\n * @csspart warning-badge - støtte badge som vises nederst til høyre i faregradskomponenten\n *\n */"
         }
       ],
       "exports": [
@@ -7192,7 +7159,7 @@
   "package": {
     "name": "nve-designsystem",
     "description": "Designsystem for NVE",
-    "version": "2.12.2",
+    "version": "2.12.3",
     "author": {
       "name": "NVE",
       "email": "nve@nve.no"

package/package.json

@@ -7,7 +7,7 @@
   },
   "license": "MIT",
   "homepage": "https://github.com/NVE/Designsystem/",
-  "version": "2.12.3",
+  "version": "2.13.0",
   "customElements": "custom-elements.json",
   "exports": {
     ".": {

package/vscode.css-custom-data.json

@@ -29,6 +29,8 @@
     { "name": "::part(label)", "description": "Overskriften" },
     { "name": "::part(message)", "description": "Hoved tekst" },
     { "name": "::part(icon)", "description": "Selve ikon span-element." },
+    { "name": "::part(link-card)", "description": "Topp-element" },
+    { "name": "::part(label)", "description": "Overskriften" },
     { "name": "::part(base)", "description": "hele komponenten." },
     { "name": "::part(header)", "description": "alt som er over brødteksten" },
     { "name": "::part(subheader)", "description": "ekstra tekst over label" },

package/vscode.html-custom-data.json

@@ -13,49 +13,9 @@
         }
       ]
     },
-    {
-      "name": "nve-accordion-item",
-      "description": "Viser et kort sammendrag og utvides for å vise ekstra innhold.\nKan brukes som en selvstendig komponent eller som en del av nve-accordion.\n---\n",
-      "attributes": [
-        { "name": "testId", "description": "", "values": [] },
-        {
-          "name": "leftStroke",
-          "description": "tykk strek på venstre side",
-          "values": []
-        },
-        {
-          "name": "variant",
-          "description": "Setter farge på bakgrunn og tekst",
-          "values": [
-            { "name": "none" },
-            { "name": "neutral" },
-            { "name": "info" },
-            { "name": "success" },
-            { "name": "warning" },
-            { "name": "error" }
-          ]
-        },
-        {
-          "name": "border",
-          "description": "Vis en ramme rundt hele komponenten",
-          "values": []
-        },
-        {
-          "name": "compact",
-          "description": "Kompakt visning uten luft på sidene. En strek vil vises under for å skille komponenter fra hverandre",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Mer info",
-          "url": "https://designsystem.nve.no/components/nve-accordion-item"
-        }
-      ]
-    },
     {
       "name": "nve-alert",
-      "description": "Brukes til å vise viktige beskjeder som toast. Dette er en komponent som bruker alert-rollen.\nHvis du trenger å vise en statisk varsling med mer informasjon, bruk nve-message-card.\nLes mer i seksjonen om universel utforming.\n---\n\n\n### **Hendelser:**\n - **sl-show** - Når alerten blir vist\n- **sl-hide** - Når alerten blir skjult\n- **sl-after-show** - Etter allerten er vist\n- **sl-after-hide** - Etter allerten er skjult\n\n### **Metoder:**\n - **show(): __** - Viser alerten med animasjon.\nSetter `open` til true, kjører visningsanimasjonen, og starter eventuell auto-hide timer.\nSender ut eventen `sl-after-show` når animasjonen er ferdig.\n- **hide(): __** - Skjuler alerten med animasjon.\nKjører skjuleanimasjonen før `open` settes til false.\nSender ut eventen `sl-after-hide` når animasjonen og oppdateringen er ferdig.\nStopper eventuell auto-hide timer.\n- **toast(): __** - Viser alerten som en toast-melding.\nLegger alerten i toast-stacken, venter til den er rendret, og viser den med animasjon.\nFjerner alerten fra toast-stacken når den skjules, og fjerner stacken hvis det ikke er flere alerts igjen.\n\n### **Spor:**\n - _default_ - tekst - Hoved teksten i alerten.\n- **icon** - Det første ikonet (til venstre).\n- **label** - Overskriften for alerten.\n\n### **Deler:**\n - **base** - Topp-element\n- **icon** - Ikonet til venstre\n- **label** - Overskriften\n- **message** - Hoved tekst",
+      "description": "Brukes til å vise viktige beskjeder som toast. Dette er en komponent som bruker alert-rollen.\nHvis du trenger å vise en statisk varsling med mer informasjon, bruk nve-message-card.\nLes mer i seksjonen om tilgjengelighet.\n---\n\n\n### **Hendelser:**\n - **sl-show** - Når alerten blir vist\n- **sl-hide** - Når alerten blir skjult\n- **sl-after-show** - Etter allerten er vist\n- **sl-after-hide** - Etter allerten er skjult\n\n### **Metoder:**\n - **show(): __** - Viser alerten med animasjon.\nSetter `open` til true, kjører visningsanimasjonen, og starter eventuell auto-hide timer.\nSender ut eventen `sl-after-show` når animasjonen er ferdig.\n- **hide(): __** - Skjuler alerten med animasjon.\nKjører skjuleanimasjonen før `open` settes til false.\nSender ut eventen `sl-after-hide` når animasjonen og oppdateringen er ferdig.\nStopper eventuell auto-hide timer.\n- **toast(): __** - Viser alerten som en toast-melding.\nLegger alerten i toast-stacken, venter til den er rendret, og viser den med animasjon.\nFjerner alerten fra toast-stacken når den skjules, og fjerner stacken hvis det ikke er flere alerts igjen.\n\n### **Spor:**\n - _default_ - tekst - Hoved teksten i alerten.\n- **icon** - Det første ikonet (til venstre).\n- **label** - Overskriften for alerten.\n\n### **Deler:**\n - **base** - Topp-element\n- **icon** - Ikonet til venstre\n- **label** - Overskriften\n- **message** - Hoved tekst",
       "attributes": [
         { "name": "testId", "description": "", "values": [] },
         { "name": "label", "description": "Overskriften", "values": [] },
@@ -119,6 +79,46 @@
         }
       ]
     },
+    {
+      "name": "nve-accordion-item",
+      "description": "Viser et kort sammendrag og utvides for å vise ekstra innhold.\nKan brukes som en selvstendig komponent eller som en del av nve-accordion.\n---\n",
+      "attributes": [
+        { "name": "testId", "description": "", "values": [] },
+        {
+          "name": "leftStroke",
+          "description": "tykk strek på venstre side",
+          "values": []
+        },
+        {
+          "name": "variant",
+          "description": "Setter farge på bakgrunn og tekst",
+          "values": [
+            { "name": "none" },
+            { "name": "neutral" },
+            { "name": "info" },
+            { "name": "success" },
+            { "name": "warning" },
+            { "name": "error" }
+          ]
+        },
+        {
+          "name": "border",
+          "description": "Vis en ramme rundt hele komponenten",
+          "values": []
+        },
+        {
+          "name": "compact",
+          "description": "Kompakt visning uten luft på sidene. En strek vil vises under for å skille komponenter fra hverandre",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Mer info",
+          "url": "https://designsystem.nve.no/components/nve-accordion-item"
+        }
+      ]
+    },
     {
       "name": "nve-badge",
       "description": "En liten etikett som vanligvis vises inne i eller i nærheten av en annen større grensesnittkomponent, som representerer en status, egenskap eller andre metadata.\n---\n",
@@ -559,7 +559,7 @@
     },
     {
       "name": "nve-link-card",
-      "description": "Komponent som brukes til å navigere til interne, eksterne sider, laste ned filer, eller sende e-post.\n---\n",
+      "description": "Komponent som brukes til å navigere til interne, eksterne sider, laste ned filer, eller sende e-post.\nFor å bruke komponenten på best og tilgjengelig måte les mer i tilgjengelighet seksjonen.\n---\n\n\n### **Deler:**\n - **link-card** - Topp-element\n- **label** - Overskriften",
       "attributes": [
         {
           "name": "label",
@@ -610,14 +610,9 @@
           "values": []
         },
         {
-          "name": "downloadHandler",
-          "description": "Valgfri nedlastingsfunksjon som kan overstyres for å implementere spesifikk nedlastingslogikk",
-          "values": [{ "name": "() => void" }]
-        },
-        {
-          "name": "customClickHandler",
-          "description": "Tilpasset klikk-handler som kan brukes til å overstyre standard atferd (f.eks. i Vue med vue-router)",
-          "values": [{ "name": "(event: MouseEvent) => void" }]
+          "name": "visited",
+          "description": "Brukes for å legge :visited style når lenken kommer fra eksternt rammeverk som f.eks RouterLink i Vue",
+          "values": []
         }
       ],
       "references": [
@@ -1008,7 +1003,7 @@
     },
     {
       "name": "nve-tab-group",
-      "description": "Fanegruppe som viser og styrer et sett med faner og tilhørende innholdspaneler.\nHåndterer navigasjon mellom faner, synkronisering av aktive faner og paneler, samt tilgjengelighetsegenskaper.\nSporet 'nav' brukes for å legge til faner, og standardsporet brukes for innholdspaneler. Foreløpig støttes kun horisontal retning på fanene.\nAutomatisk aktivering av faner (når man blar mellom fanene med tastatur) støttes ikke – det kan være uheldig fra et tilgjengelighetsperspektiv.\nFor beste praksis, les mer i seksjonen om universell utforming.\n---\n\n\n### **Hendelser:**\n - **nve-tab-change** - Når aktiv fane endres.\n\n### **Spor:**\n - **(nav)** - legg inn faner her.\n- **(standard)** - legg inn paneler her.\n\n### **CSS-variabler:**\n - **--scroll-button-background** - farge på bakover og fremoverknappene. Standard er #fff og #1b1b1f for dark modus. _(default: undefined)_\n\n### **Deler:**\n - **base** - Topp-element\n- **body** - Innholdet i tab gruppen\n- **nav** - hoved kontainer for fanene\n- **button-backward-base** - Bakoverknapp kontainer\n- **button-forward-base** - Fremoverknapp kontainer",
+      "description": "Fanegruppe som viser og styrer et sett med faner og tilhørende innholdspaneler.\nHåndterer navigasjon mellom faner, synkronisering av aktive faner og paneler, samt tilgjengelighetsegenskaper.\nSporet 'nav' brukes for å legge til faner, og standardsporet brukes for innholdspaneler. Foreløpig støttes kun horisontal retning på fanene.\nAutomatisk aktivering av faner (når man blar mellom fanene med tastatur) støttes ikke – det kan være uheldig fra et tilgjengelighetsperspektiv.\nFor beste praksis, les mer i seksjonen om tilgjengelighet.\n---\n\n\n### **Hendelser:**\n - **nve-tab-change** - Når aktiv fane endres.\n\n### **Spor:**\n - **(nav)** - legg inn faner her.\n- **(standard)** - legg inn paneler her.\n\n### **CSS-variabler:**\n - **--scroll-button-background** - farge på bakover og fremoverknappene. Standard er #fff og #1b1b1f for dark modus. _(default: undefined)_\n\n### **Deler:**\n - **base** - Topp-element\n- **body** - Innholdet i tab gruppen\n- **nav** - hoved kontainer for fanene\n- **button-backward-base** - Bakoverknapp kontainer\n- **button-forward-base** - Fremoverknapp kontainer",
       "attributes": [
         { "name": "testId", "description": "", "values": [] },
         {
@@ -1259,7 +1254,7 @@
     },
     {
       "name": "nve-warning-level",
-      "description": "DangerLevel-komponenten brukes til å vise gjeldende faregrad ved hjelp av farge og et siffer som representerer nivået.\nFaregraden angis med et tall fra 1 til 5, eller et spørsmålstegn (?) dersom nivået er ukjent.\n\nI tillegg kan faregraden støttes av et ekstra ikon/badge som plasseres nederst til høyre i komponenten.\nDette ikonet kan være enten en trekant eller en sirkel (se eksempler nedenfor) for å tiltrekke ekstra oppmerksomhet.\n\nKomponenten kan legges inni button- eller a-elementer for å gi ekstra hover-effekter.\n\nTilgjengelighetsmerkingen (aria-label) kan variere ut fra behov, og det anbefales derfor at brukere selv setter verdiene for ariaLabel.\nLes mer i seksjonen om universel utforming.\n---\n\n\n### **Deler:**\n - **base** - farenivå kontainer\n- **warning-badge** - støtte badge som vises nederst til høyre i faregradskomponenten",
+      "description": "DangerLevel-komponenten brukes til å vise gjeldende faregrad ved hjelp av farge og et siffer som representerer nivået.\nFaregraden angis med et tall fra 1 til 5, eller et spørsmålstegn (?) dersom nivået er ukjent.\n\nI tillegg kan faregraden støttes av et ekstra ikon/badge som plasseres nederst til høyre i komponenten.\nDette ikonet kan være enten en trekant eller en sirkel (se eksempler nedenfor) for å tiltrekke ekstra oppmerksomhet.\n\nKomponenten kan legges inni button- eller a-elementer for å gi ekstra hover-effekter.\n\nTilgjengelighetsmerkingen (aria-label) kan variere ut fra behov, og det anbefales derfor at brukere selv setter verdiene for ariaLabel.\nLes mer i seksjonen om tilgjengelighet.\n---\n\n\n### **Deler:**\n - **base** - farenivå kontainer\n- **warning-badge** - støtte badge som vises nederst til høyre i faregradskomponenten",
       "attributes": [
         { "name": "testId", "description": "", "values": [] },
         {