nve-designsystem 4.2.0 → 4.4.2

package/css/varsom.css

@@ -112,6 +112,15 @@
   --color-shades-functional-red-999: #411616;
   --color-shades-functional-red-000: #ffebee;
   --color-shades-functional-red-050: #ffd8de;
+  --color-shades-functional-danger-100: #ffb8b8;
+  --color-shades-functional-danger-200: #ff8f8f;
+  --color-shades-functional-danger-400: #ff3333;
+  --color-shades-functional-danger-600: #e50000;
+  --color-shades-functional-danger-800: #b20000;
+  --color-shades-functional-danger-900: #800000;
+  --color-shades-functional-danger-999: #4d0000;
+  --color-shades-functional-danger-050: #ffd6d6;
+  --color-shades-functional-danger-000: #ffebeb;
   --color-shades-functional-orange-100: #ffe3c2;
   --color-shades-functional-orange-150: #ffd9ad;
   --color-shades-functional-orange-200: #ffc98a;
@@ -253,7 +262,7 @@
   --box-shadow-none: 0 0 0 0 rgba(0,0,0,0);
   --box-shadow-soft: -59px 104px 33px 0 rgba(0,0,0,0.00), -38px 67px 31px 0 rgba(0,0,0,0.00), -21px 37px 26px 0 rgba(0,0,0,0.01), -9px 17px 19px 0 rgba(0,0,0,0.02), -2px 4px 11px 0 rgba(0,0,0,0.03);
   --box-shadow-hard: -45px 80px 26px 0 rgba(0,0,0,0.00), -29px 51px 23px 0 rgba(0,0,0,0.01), -16px 29px 20px 0 rgba(0,0,0,0.02), -7px 13px 15px 0 rgba(0,0,0,0.03), -2px 3px 8px 0 rgba(0,0,0,0.04);
-  --box-shadow-header: 0 4px 032px 0 rgba(0,0,0,0.02);
+  --box-shadow-header: 0 4px 32px 0 rgba(0,0,0,0.02);
   --box-shadow-dropdown: 0 54px 15px 0 rgba(0,0,0,0.00), 0 35px 14px 0 rgba(0,0,0,0.00), 0 19px 12px 0 rgba(0,0,0,0.02), 0 9px 9px 0 rgba(0,0,0,0.03), 0 2px 5px 0 rgba(0,0,0,0.03);
   --boolean-brand-nve: false;
   --boolean-brand-varsom: true;
@@ -389,18 +398,18 @@
   --color-dangerlevel-background-default-level1: var(--color-shades-functional-green-500);
   --color-dangerlevel-background-default-level2: var(--color-shades-functional-yellow-500);
   --color-dangerlevel-background-default-level3: var(--color-shades-functional-orange-400);
-  --color-dangerlevel-background-default-level4: var(--color-shades-functional-red-500);
-  --color-dangerlevel-background-default-level5: var(--color-shades-functional-neutralgrey-950);
+  --color-dangerlevel-background-default-level4: var(--color-shades-functional-danger-400);
+  --color-dangerlevel-background-default-level5: var(--color-shades-functional-danger-900);
   --color-dangerlevel-background-mute-level1: var(--color-shades-functional-green-150);
   --color-dangerlevel-background-mute-level2: var(--color-shades-functional-yellow-200);
   --color-dangerlevel-background-mute-level3: var(--color-shades-functional-orange-150);
-  --color-dangerlevel-background-mute-level4: var(--color-shades-functional-red-050);
-  --color-dangerlevel-background-mute-level5: var(--color-shades-functional-neutralgrey-200);
+  --color-dangerlevel-background-mute-level4: var(--color-shades-functional-danger-050);
+  --color-dangerlevel-background-mute-level5: var(--color-shades-functional-danger-200);
   --color-dangerlevel-background-subtle-level1: var(--color-shades-functional-green-100);
   --color-dangerlevel-background-subtle-level2: var(--color-shades-functional-yellow-100);
   --color-dangerlevel-background-subtle-level3: var(--color-shades-functional-orange-050);
-  --color-dangerlevel-background-subtle-level4: var(--color-shades-functional-red-000);
-  --color-dangerlevel-background-subtle-level5: var(--color-shades-functional-neutralgrey-150);
+  --color-dangerlevel-background-subtle-level4: var(--color-shades-functional-danger-000);
+  --color-dangerlevel-background-subtle-level5: var(--color-shades-functional-danger-200);
   --color-dangerlevel-foreground-default-level1: var(--color-shades-functional-neutralgrey-999);
   --color-dangerlevel-foreground-default-level2: var(--color-shades-functional-neutralgrey-999);
   --color-dangerlevel-foreground-default-level3: var(--color-shades-functional-neutralgrey-999);
@@ -660,48 +669,48 @@
   --sizing-fixed-sizing-2x-large: var(--dimension-14x);
   --sizing-fixed-sizing-3x-large: var(--dimension-16x);
   --typography-heading-x-large: var(--font-weight-semibold) var(--font-size-3x-large)/var(--line-height-0) var(--font-family-primary-family);
-  --typography-heading-large: var(--font-weight-semibold) var(--font-size-2x-large)/var(--line-height-1) var(--font-family-primary-family);
+  --typography-heading-large: var(--font-weight-semibold) var(--font-size-2x-large)/1.2 var(--font-family-primary-family);
   --typography-heading-medium: var(--font-weight-semibold) var(--font-size-x-large)/var(--line-height-2) var(--font-family-primary-family);
-  --typography-heading-small: var(--font-weight-semibold) var(--font-size-large)/var(--line-height-3) var(--font-family-primary-family);
-  --typography-heading-x-small: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-3) var(--font-family-primary-family);
-  --typography-subheading-large: var(--font-weight-regular) var(--font-size-2x-large)/var(--line-height-1) var(--font-family-primary-family);
+  --typography-heading-small: var(--font-weight-semibold) var(--font-size-large)/1.3 var(--font-family-primary-family);
+  --typography-heading-x-small: var(--font-weight-semibold) var(--font-size-medium)/1.3 var(--font-family-primary-family);
+  --typography-subheading-large: var(--font-weight-regular) var(--font-size-2x-large)/1.2 var(--font-family-primary-family);
   --typography-subheading-medium: var(--font-weight-regular) var(--font-size-x-large)/var(--line-height-2) var(--font-family-primary-family);
-  --typography-subheading-small: var(--font-weight-regular) var(--font-size-large)/var(--line-height-3) var(--font-family-primary-family);
-  --typography-lead-large-regular: var(--font-weight-regular) var(--font-size-large)/var(--line-height-4) var(--font-family-primary-family);
-  --typography-lead-large-semibold: var(--font-weight-semibold) var(--font-size-large)/var(--line-height-4) var(--font-family-primary-family);
-  --typography-lead-medium-regular: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family);
-  --typography-lead-medium-semibold: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family);
+  --typography-subheading-small: var(--font-weight-regular) var(--font-size-large)/1.3 var(--font-family-primary-family);
+  --typography-lead-large-regular: var(--font-weight-regular) var(--font-size-large)/1.4 var(--font-family-primary-family);
+  --typography-lead-large-semibold: var(--font-weight-semibold) var(--font-size-large)/1.4 var(--font-family-primary-family);
+  --typography-lead-medium-regular: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family);
+  --typography-lead-medium-semibold: var(--font-weight-semibold) var(--font-size-medium)/1.5 var(--font-family-primary-family);
   --font-size-small: var(--dimension-4-5x); /** 16 px */
-  --typography-lead-small-regular: var(--font-weight-regular) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family);
-  --typography-lead-small-semibold: var(--font-weight-semibold) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family);
-  --typography-body-large: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family);
-  --typography-body-large-underline: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family);
-  --typography-body-medium: var(--font-weight-regular) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family);
-  --typography-body-medium-underline: var(--font-weight-regular) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family);
-  --typography-body-small: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-5) var(--font-family-primary-family);
-  --typography-body-small-underline: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-5) var(--font-family-primary-family);
-  --typography-body-x-small: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-primary-family);
-  --typography-body-x-small-underline: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-primary-family);
-  --typography-body-compact-large-compact: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-1) var(--font-family-primary-family);
-  --typography-body-compact-large-underline-compact: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-1) var(--font-family-primary-family);
-  --typography-body-compact-medium-compact: var(--font-weight-regular) var(--font-size-small)/var(--line-height-1) var(--font-family-primary-family);
-  --typography-body-compact-medium-underline-compact: var(--font-weight-regular) var(--font-size-small)/var(--line-height-1) var(--font-family-primary-family);
-  --typography-body-compact-small-compact: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-1) var(--font-family-primary-family);
-  --typography-body-compact-small-underline-compact: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-1) var(--font-family-primary-family);
-  --typography-body-compact-x-small-compact: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-1) var(--font-family-primary-family);
-  --typography-body-compact-x-small-underline-compact: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-1) var(--font-family-primary-family);
-  --typography-detailtext-caption: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-primary-family);
-  --typography-detailtext-caps-large: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family);
-  --typography-detailtext-caps-small: var(--font-weight-semibold) var(--font-size-x-small)/var(--line-height-5) var(--font-family-primary-family);
-  --typography-label-large: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-6) var(--font-family-primary-family);
-  --typography-label-large-light: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-6) var(--font-family-primary-family);
-  --typography-label-medium: var(--font-weight-semibold) var(--font-size-small)/var(--line-height-6) var(--font-family-primary-family);
-  --typography-label-medium-light: var(--font-weight-regular) var(--font-size-small)/var(--line-height-6) var(--font-family-primary-family);
-  --typography-label-small: var(--font-weight-semibold) var(--font-size-x-small)/var(--line-height-6) var(--font-family-primary-family);
-  --typography-label-small-light: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-6) var(--font-family-primary-family);
+  --typography-lead-small-regular: var(--font-weight-regular) var(--font-size-small)/1.5 var(--font-family-primary-family);
+  --typography-lead-small-semibold: var(--font-weight-semibold) var(--font-size-small)/1.5 var(--font-family-primary-family);
+  --typography-body-large: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family);
+  --typography-body-large-underline: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family);
+  --typography-body-medium: var(--font-weight-regular) var(--font-size-small)/1.5 var(--font-family-primary-family);
+  --typography-body-medium-underline: var(--font-weight-regular) var(--font-size-small)/1.5 var(--font-family-primary-family);
+  --typography-body-small: var(--font-weight-regular) var(--font-size-x-small)/1.5 var(--font-family-primary-family);
+  --typography-body-small-underline: var(--font-weight-regular) var(--font-size-x-small)/1.5 var(--font-family-primary-family);
+  --typography-body-x-small: var(--font-weight-regular) var(--font-size-2x-small)/1.5 var(--font-family-primary-family);
+  --typography-body-x-small-underline: var(--font-weight-regular) var(--font-size-2x-small)/1.5 var(--font-family-primary-family);
+  --typography-body-compact-large-compact: var(--font-weight-regular) var(--font-size-medium)/1.2 var(--font-family-primary-family);
+  --typography-body-compact-large-underline-compact: var(--font-weight-regular) var(--font-size-medium)/1.2 var(--font-family-primary-family);
+  --typography-body-compact-medium-compact: var(--font-weight-regular) var(--font-size-small)/1.2 var(--font-family-primary-family);
+  --typography-body-compact-medium-underline-compact: var(--font-weight-regular) var(--font-size-small)/1.2 var(--font-family-primary-family);
+  --typography-body-compact-small-compact: var(--font-weight-regular) var(--font-size-x-small)/1.2 var(--font-family-primary-family);
+  --typography-body-compact-small-underline-compact: var(--font-weight-regular) var(--font-size-x-small)/1.2 var(--font-family-primary-family);
+  --typography-body-compact-x-small-compact: var(--font-weight-regular) var(--font-size-2x-small)/1.2 var(--font-family-primary-family);
+  --typography-body-compact-x-small-underline-compact: var(--font-weight-regular) var(--font-size-2x-small)/1.2 var(--font-family-primary-family);
+  --typography-detailtext-caption: var(--font-weight-regular) var(--font-size-2x-small)/1.5 var(--font-family-primary-family);
+  --typography-detailtext-caps-large: var(--font-weight-semibold) var(--font-size-medium)/1.5 var(--font-family-primary-family);
+  --typography-detailtext-caps-small: var(--font-weight-semibold) var(--font-size-x-small)/1.5 var(--font-family-primary-family);
+  --typography-label-large: var(--font-weight-semibold) var(--font-size-medium)/1.1 var(--font-family-primary-family);
+  --typography-label-large-light: var(--font-weight-regular) var(--font-size-medium)/1.1 var(--font-family-primary-family);
+  --typography-label-medium: var(--font-weight-semibold) var(--font-size-small)/1.1 var(--font-family-primary-family);
+  --typography-label-medium-light: var(--font-weight-regular) var(--font-size-small)/1.1 var(--font-family-primary-family);
+  --typography-label-small: var(--font-weight-semibold) var(--font-size-x-small)/1.1 var(--font-family-primary-family);
+  --typography-label-small-light: var(--font-weight-regular) var(--font-size-x-small)/1.1 var(--font-family-primary-family);
   --font-size-2x-small: var(--dimension-3-5x); /** 12 px */
-  --typography-label-x-small: var(--font-weight-semibold) var(--font-size-2x-small)/var(--line-height-6) var(--font-family-primary-family);
-  --typography-label-x-small-light: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-6) var(--font-family-primary-family);
+  --typography-label-x-small: var(--font-weight-semibold) var(--font-size-2x-small)/1.1 var(--font-family-primary-family);
+  --typography-label-x-small-light: var(--font-weight-regular) var(--font-size-2x-small)/1.1 var(--font-family-primary-family);
   --font-size-x-small: var(--dimension-4x); /** 14 px */
   --font-size-medium: var(--dimension-5x); /** 18 px */
   --font-size-large: var(--dimension-6x); /** 20 px */

package/css/varsom_dark.css

@@ -112,6 +112,15 @@
   --color-shades-functional-red-999: #411616;
   --color-shades-functional-red-000: #ffebee;
   --color-shades-functional-red-050: #ffd8de;
+  --color-shades-functional-danger-100: #ffb8b8;
+  --color-shades-functional-danger-200: #ff8f8f;
+  --color-shades-functional-danger-400: #ff3333;
+  --color-shades-functional-danger-600: #e50000;
+  --color-shades-functional-danger-800: #b20000;
+  --color-shades-functional-danger-900: #800000;
+  --color-shades-functional-danger-999: #4d0000;
+  --color-shades-functional-danger-050: #ffd6d6;
+  --color-shades-functional-danger-000: #ffebeb;
   --color-shades-functional-orange-100: #ffe3c2;
   --color-shades-functional-orange-150: #ffd9ad;
   --color-shades-functional-orange-200: #ffc98a;
@@ -253,7 +262,7 @@
   --box-shadow-none: 0 0 0 0 rgba(0,0,0,0);
   --box-shadow-soft: -59px 104px 33px 0 rgba(0,0,0,0.00), -38px 67px 31px 0 rgba(0,0,0,0.00), -21px 37px 26px 0 rgba(0,0,0,0.01), -9px 17px 19px 0 rgba(0,0,0,0.02), -2px 4px 11px 0 rgba(0,0,0,0.03);
   --box-shadow-hard: -45px 80px 26px 0 rgba(0,0,0,0.00), -29px 51px 23px 0 rgba(0,0,0,0.01), -16px 29px 20px 0 rgba(0,0,0,0.02), -7px 13px 15px 0 rgba(0,0,0,0.03), -2px 3px 8px 0 rgba(0,0,0,0.04);
-  --box-shadow-header: 0 4px 032px 0 rgba(0,0,0,0.02);
+  --box-shadow-header: 0 4px 32px 0 rgba(0,0,0,0.02);
   --box-shadow-dropdown: 0 54px 15px 0 rgba(0,0,0,0.00), 0 35px 14px 0 rgba(0,0,0,0.00), 0 19px 12px 0 rgba(0,0,0,0.02), 0 9px 9px 0 rgba(0,0,0,0.03), 0 2px 5px 0 rgba(0,0,0,0.03);
   --boolean-brand-nve: false;
   --boolean-brand-varsom: true;
@@ -389,18 +398,18 @@
   --color-dangerlevel-background-default-level1: var(--color-shades-functional-green-500);
   --color-dangerlevel-background-default-level2: var(--color-shades-functional-yellow-500);
   --color-dangerlevel-background-default-level3: var(--color-shades-functional-orange-400);
-  --color-dangerlevel-background-default-level4: var(--color-shades-functional-red-500);
-  --color-dangerlevel-background-default-level5: var(--color-shades-functional-neutralgrey-950);
+  --color-dangerlevel-background-default-level4: var(--color-shades-functional-danger-400);
+  --color-dangerlevel-background-default-level5: var(--color-shades-functional-danger-900);
   --color-dangerlevel-background-mute-level1: var(--color-shades-functional-green-150);
   --color-dangerlevel-background-mute-level2: var(--color-shades-functional-yellow-200);
   --color-dangerlevel-background-mute-level3: var(--color-shades-functional-orange-150);
-  --color-dangerlevel-background-mute-level4: var(--color-shades-functional-red-050);
-  --color-dangerlevel-background-mute-level5: var(--color-shades-functional-neutralgrey-200);
+  --color-dangerlevel-background-mute-level4: var(--color-shades-functional-danger-050);
+  --color-dangerlevel-background-mute-level5: var(--color-shades-functional-danger-200);
   --color-dangerlevel-background-subtle-level1: var(--color-shades-functional-green-100);
   --color-dangerlevel-background-subtle-level2: var(--color-shades-functional-yellow-100);
   --color-dangerlevel-background-subtle-level3: var(--color-shades-functional-orange-050);
-  --color-dangerlevel-background-subtle-level4: var(--color-shades-functional-red-000);
-  --color-dangerlevel-background-subtle-level5: var(--color-shades-functional-neutralgrey-150);
+  --color-dangerlevel-background-subtle-level4: var(--color-shades-functional-danger-000);
+  --color-dangerlevel-background-subtle-level5: var(--color-shades-functional-danger-200);
   --color-dangerlevel-foreground-default-level1: var(--color-shades-functional-neutralgrey-999);
   --color-dangerlevel-foreground-default-level2: var(--color-shades-functional-neutralgrey-999);
   --color-dangerlevel-foreground-default-level3: var(--color-shades-functional-neutralgrey-999);

package/custom-elements.json

@@ -2133,6 +2133,99 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/nve-heading/nve-heading.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "nve-heading gir semantisk og tilgjengelig overskrift med riktig typografi fra designsystemet. Brukes for å sikre korrekt heading-hierarki (h1–h6) og typografi, og kan overstyres med variant for heading eller subheading.",
+          "name": "NveHeading",
+          "slots": [
+            {
+              "description": "tekst - Selve overskriften (innholdet).",
+              "name": "-"
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "nve-heading",
+              "description": "Hele heading-elementet Se designsystemet for alle varianter og tokens."
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "testId",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "undefined"
+            },
+            {
+              "kind": "field",
+              "name": "level",
+              "type": {
+                "text": "1 | 2 | 3 | 4 | 5 | 6"
+              },
+              "default": "1",
+              "description": "Heading level - Hvilket nivå overskriften skal ha (h1-h6)"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "| 'headingXlarge'\n    | 'headingLarge'\n    | 'headingMedium'\n    | 'headingSmall'\n    | 'headingXsmall'\n    | 'subheadingLarge'\n    | 'subheadingMedium'\n    | 'subheadingSmall'"
+              },
+              "description": "Typografitype - Kan overstyre det som er standard typografi basert på nivå"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "testId",
+              "type": {
+                "text": "string | undefined"
+              }
+            },
+            {
+              "name": "level",
+              "type": {
+                "text": "1 | 2 | 3 | 4 | 5 | 6"
+              },
+              "description": "Heading level - Hvilket nivå overskriften skal ha (h1-h6)",
+              "reflects": true
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "| 'headingXlarge'\n    | 'headingLarge'\n    | 'headingMedium'\n    | 'headingSmall'\n    | 'headingXsmall'\n    | 'subheadingLarge'\n    | 'subheadingMedium'\n    | 'subheadingSmall'"
+              },
+              "description": "Typografitype - Kan overstyre det som er standard typografi basert på nivå",
+              "reflects": true
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagNameWithoutPrefix": "heading",
+          "tagName": "nve-heading",
+          "customElement": true,
+          "jsDoc": "/**\n * nve-heading gir semantisk og tilgjengelig overskrift med riktig typografi fra designsystemet.\n * Brukes for å sikre korrekt heading-hierarki (h1–h6) og typografi, og kan overstyres med variant for heading eller subheading.\n *\n * @slot - tekst - Selve overskriften (innholdet).\n *\n * @csspart nve-heading Hele heading-elementet\n *\n * Se designsystemet for alle varianter og tokens.\n */",
+          "modulePath": "src/components/nve-heading/nve-heading.component.ts"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "NveHeading",
+            "module": "components/nve-heading/nve-heading.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/nve-icon/nve-icon.js",
@@ -2223,7 +2316,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 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 */",
+          "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 */",
           "modulePath": "src/components/nve-icon/nve-icon.component.ts"
         }
       ],
@@ -3151,6 +3244,82 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/nve-paragraph/nve-paragraph.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "nve-paragraph gir fleksibel og tilgjengelig typografi for avsnitt i designsystemet. Brukes til brødtekst, mengdetekst og ingress (lead), og gir riktig styling basert på designsystemets tokens. Du styrer typografivariant med size-prop, og kan velge mellom ulike varianter for brødtekst (body), ingress (lead) og kompakt tekst (body-compact).",
+          "name": "NveParagraph",
+          "slots": [
+            {
+              "description": "tekst - Selve avsnittet (innholdet).",
+              "name": "-"
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "paragraph",
+              "description": "Hele paragraph-elementet Se designsystemet for alle varianter og tokens."
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "testId",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "undefined"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "| 'leadLargeRegular'\n    | 'leadLargeSemibold'\n    | 'leadMediumRegular'\n    | 'leadMediumSemibold'\n    | 'leadSmallRegular'\n    | 'leadSmallSemibold'\n    | 'bodyLarge'\n    | 'bodyLargeUnderline'\n    | 'bodyMedium'\n    | 'bodyMediumUnderline'\n    | 'bodySmall'\n    | 'bodySmallUnderline'\n    | 'bodyXSmall'\n    | 'bodyXSmallUnderline'\n    | 'bodyLargeCompact'\n    | 'bodyLargeUnderlineCompact'\n    | 'bodyMediumCompact'\n    | 'bodyMediumUnderlineCompact'\n    | 'bodySmallCompact'\n    | 'bodySmallUnderlineCompact'\n    | 'bodyXSmallCompact'\n    | 'bodyXSmallUnderlineCompact'"
+              },
+              "description": "Typografivariant for paragrafen"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "testId",
+              "type": {
+                "text": "string | undefined"
+              }
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "| 'leadLargeRegular'\n    | 'leadLargeSemibold'\n    | 'leadMediumRegular'\n    | 'leadMediumSemibold'\n    | 'leadSmallRegular'\n    | 'leadSmallSemibold'\n    | 'bodyLarge'\n    | 'bodyLargeUnderline'\n    | 'bodyMedium'\n    | 'bodyMediumUnderline'\n    | 'bodySmall'\n    | 'bodySmallUnderline'\n    | 'bodyXSmall'\n    | 'bodyXSmallUnderline'\n    | 'bodyLargeCompact'\n    | 'bodyLargeUnderlineCompact'\n    | 'bodyMediumCompact'\n    | 'bodyMediumUnderlineCompact'\n    | 'bodySmallCompact'\n    | 'bodySmallUnderlineCompact'\n    | 'bodyXSmallCompact'\n    | 'bodyXSmallUnderlineCompact'"
+              },
+              "description": "Typografivariant for paragrafen",
+              "reflects": true
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagNameWithoutPrefix": "paragraph",
+          "tagName": "nve-paragraph",
+          "customElement": true,
+          "jsDoc": "/**\n * nve-paragraph gir fleksibel og tilgjengelig typografi for avsnitt i designsystemet.\n * Brukes til brødtekst, mengdetekst og ingress (lead), og gir riktig styling basert på designsystemets tokens.\n *\n * Du styrer typografivariant med size-prop, og kan velge mellom ulike varianter for brødtekst (body), ingress (lead) og kompakt tekst (body-compact).\n *\n * @slot - tekst - Selve avsnittet (innholdet).\n *\n * @csspart paragraph Hele paragraph-elementet\n *\n * Se designsystemet for alle varianter og tokens.\n */",
+          "modulePath": "src/components/nve-paragraph/nve-paragraph.component.ts"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "NveParagraph",
+            "module": "components/nve-paragraph/nve-paragraph.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/nve-popup/nve-popup.js",

package/nve-designsystem.d.ts

@@ -1,5 +1,5 @@
 /** Alle komponenter som er tilgjengelige, i alfabetisk rekkefølge. */
-/** Denne filen blir genererert av npm run add-component */
+/** Denne filen blir genererert av pnpm run add-component */
 export { default as NveAccordion } from './components/nve-accordion/nve-accordion.component';
 export { default as NveAccordionItem } from './components/nve-accordion-item/nve-accordion-item.component';
 export { default as NveAlert } from './components/nve-alert/nve-alert.component';
@@ -16,6 +16,7 @@ export { default as NveDialog } from './components/nve-dialog/nve-dialog.compone
 export { default as NveDivider } from './components/nve-divider/nve-divider.component';
 export { default as NveDrawer } from './components/nve-drawer/nve-drawer.component';
 export { default as NveDropdown } from './components/nve-dropdown/nve-dropdown.component';
+export { default as NveHeading } from './components/nve-heading/nve-heading.component';
 export { default as NveIcon } from './components/nve-icon/nve-icon.component';
 export { default as NveInput } from './components/nve-input/nve-input.component';
 export { default as NveLabel } from './components/nve-label/nve-label.component';
@@ -25,6 +26,7 @@ export { default as NveMenuItem } from './components/nve-menu-item/nve-menu-item
 export { default as NveMessageCard } from './components/nve-message-card/nve-message-card.component';
 export { default as NveNavigationCard } from './components/nve-navigation-card/nve-navigation-card.component';
 export { default as NveOption } from './components/nve-option/nve-option.component';
+export { default as NveParagraph } from './components/nve-paragraph/nve-paragraph.component';
 export { default as NvePopup } from './components/nve-popup/nve-popup.component';
 export { default as NveRadio } from './components/nve-radio/nve-radio.component';
 export { default as NveRadioButton } from './components/nve-radio-button/nve-radio-button.component';

package/nve-designsystem.js

@@ -21,24 +21,26 @@ import { t as y } from "./chunks/nve-dialog.component.js";
 import { t as b } from "./chunks/nve-divider.component.js";
 import { t as x } from "./chunks/nve-drawer.component.js";
 import { t as S } from "./chunks/nve-dropdown.component.js";
-import C from "./components/nve-link-card/nve-link-card.component.js";
-import { t as w } from "./chunks/nve-menu-item.component.js";
-import T from "./components/nve-message-card/nve-message-card.component.js";
-import E from "./components/nve-navigation-card/nve-navigation-card.component.js";
-import { t as D } from "./chunks/nve-radio.component.js";
-import { t as O } from "./chunks/nve-radio-button.component.js";
-import { t as k } from "./chunks/nve-radio-group.component.js";
-import A from "./components/nve-relative-time/nve-relative-time.component.js";
-import { t as j } from "./chunks/nve-select.component.js";
-import { t as M } from "./chunks/nve-skeleton.component.js";
-import { t as N } from "./chunks/nve-spinner.component.js";
-import P from "./components/nve-stepper/nve-step/nve-step.component.js";
-import F from "./components/nve-stepper/nve-stepper.component.js";
-import I from "./components/nve-switch/nve-switch.component.js";
-import L from "./components/nve-tab/nve-tab.component.js";
-import R from "./components/nve-tab-group/nve-tab-group.component.js";
-import z from "./components/nve-tab-panel/nve-tab-panel.component.js";
-import B from "./components/nve-tag/nve-tag.component.js";
-import V from "./components/nve-textarea/nve-textarea.component.js";
-import { t as H } from "./chunks/nve-warning-level.component.js";
-export { e as NveAccordion, t as NveAccordionItem, n as NveAlert, i as NveBadge, a as NveButton, o as NveCarousel, s as NveCarouselItem, c as NveCarouselThumbnail, l as NveCheckbox, f as NveCheckboxGroup, _ as NveCombobox, v as NveDarkmodeSwitch, y as NveDialog, b as NveDivider, x as NveDrawer, S as NveDropdown, r as NveIcon, m as NveInput, u as NveLabel, C as NveLinkCard, h as NveMenu, w as NveMenuItem, T as NveMessageCard, E as NveNavigationCard, g as NveOption, p as NvePopup, D as NveRadio, O as NveRadioButton, k as NveRadioGroup, A as NveRelativeTime, j as NveSelect, M as NveSkeleton, N as NveSpinner, P as NveStep, F as NveStepper, I as NveSwitch, L as NveTab, R as NveTabGroup, z as NveTabPanel, B as NveTag, V as NveTextarea, d as NveTooltip, H as NveWarningLevel };
+import C from "./components/nve-heading/nve-heading.component.js";
+import w from "./components/nve-link-card/nve-link-card.component.js";
+import { t as T } from "./chunks/nve-menu-item.component.js";
+import E from "./components/nve-message-card/nve-message-card.component.js";
+import D from "./components/nve-navigation-card/nve-navigation-card.component.js";
+import O from "./components/nve-paragraph/nve-paragraph.component.js";
+import { t as k } from "./chunks/nve-radio.component.js";
+import { t as A } from "./chunks/nve-radio-button.component.js";
+import { t as j } from "./chunks/nve-radio-group.component.js";
+import M from "./components/nve-relative-time/nve-relative-time.component.js";
+import { t as N } from "./chunks/nve-select.component.js";
+import { t as P } from "./chunks/nve-skeleton.component.js";
+import { t as F } from "./chunks/nve-spinner.component.js";
+import I from "./components/nve-stepper/nve-step/nve-step.component.js";
+import L from "./components/nve-stepper/nve-stepper.component.js";
+import R from "./components/nve-switch/nve-switch.component.js";
+import z from "./components/nve-tab/nve-tab.component.js";
+import B from "./components/nve-tab-group/nve-tab-group.component.js";
+import V from "./components/nve-tab-panel/nve-tab-panel.component.js";
+import H from "./components/nve-tag/nve-tag.component.js";
+import U from "./components/nve-textarea/nve-textarea.component.js";
+import { t as W } from "./chunks/nve-warning-level.component.js";
+export { e as NveAccordion, t as NveAccordionItem, n as NveAlert, i as NveBadge, a as NveButton, o as NveCarousel, s as NveCarouselItem, c as NveCarouselThumbnail, l as NveCheckbox, f as NveCheckboxGroup, _ as NveCombobox, v as NveDarkmodeSwitch, y as NveDialog, b as NveDivider, x as NveDrawer, S as NveDropdown, C as NveHeading, r as NveIcon, m as NveInput, u as NveLabel, w as NveLinkCard, h as NveMenu, T as NveMenuItem, E as NveMessageCard, D as NveNavigationCard, g as NveOption, O as NveParagraph, p as NvePopup, k as NveRadio, A as NveRadioButton, j as NveRadioGroup, M as NveRelativeTime, N as NveSelect, P as NveSkeleton, F as NveSpinner, I as NveStep, L as NveStepper, R as NveSwitch, z as NveTab, B as NveTabGroup, V as NveTabPanel, H as NveTag, U as NveTextarea, d as NveTooltip, W as NveWarningLevel };

package/package.json

@@ -11,8 +11,11 @@
   },
   "license": "MIT",
   "homepage": "https://github.com/NVE/Designsystem/",
-  "version": "4.2.0",
+  "version": "4.4.2",
   "customElements": "dist/custom-elements.json",
+  "engines": {
+    "node": "^24.16.0"
+  },
   "exports": {
     ".": {
       "import": "./nve-designsystem.js",
@@ -28,15 +31,14 @@
   },
   "type": "module",
   "types": "nve-designsystem.d.ts",
-  "scripts": {},
   "dependencies": {
     "@shoelace-style/shoelace": "^2.20.1",
     "fontfaceobserver": "^2.3.0",
-    "lit": "^3.3.2"
+    "lit": "^3.3.3"
   },
   "devDependencies": {},
   "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "^4.60.3"
+    "@rollup/rollup-linux-x64-gnu": "^4.61.1"
   },
   "config": {
     "commitizen": {
@@ -46,7 +48,13 @@
   "overrides": {
     "minimatch": ">=10.2.1",
     "minimist": ">=1.2.6",
-    "lodash": ">=4.17.23",
-    "tmp": ">=0.2.4"
-  }
+    "lodash": ">=4.18.0",
+    "tmp": ">=0.2.4",
+    "@vue/eslint-config-typescript": {
+      "@typescript-eslint/utils": "8.59.3",
+      "typescript-eslint": "8.59.3"
+    },
+    "koa": "2.16.4"
+  },
+  "scripts": {}
 }