nve-designsystem 4.1.0 → 4.3.0

package/chunks/chunk.5P45LHIX.js

@@ -5,7 +5,7 @@ import { t as s } from "./chunk.NYIIDP5N.js";
 import { t as c } from "./chunk.GMYPQTFK.js";
 import { t as l } from "./class-map.js";
 import { t as u } from "./if-defined.js";
-import { n as d } from "./static-html.js";
+import { r as d } from "./static-html.js";
 //#region node_modules/@shoelace-style/shoelace/dist/chunks/chunk.MAQXLKQ7.js
 var f = e`
   :host {

package/chunks/chunk.RWUUFNUL.js

@@ -4,7 +4,7 @@ import { n as i, r as a, t as o } from "./chunk.4TUIT776.js";
 import { t as s } from "./chunk.YHLNUJ7P.js";
 import { t as c } from "./class-map.js";
 import { t as l } from "./if-defined.js";
-import { n as u, t as d } from "./static-html.js";
+import { r as u, t as d } from "./static-html.js";
 //#region node_modules/@shoelace-style/shoelace/dist/chunks/chunk.6I2T3DLI.js
 var f = e`
   :host {

package/chunks/decorate.js

@@ -94,7 +94,7 @@ function u(e) {
 	} });
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.127.0/helpers/decorate.js
+//#region \0@oxc-project+runtime@0.128.0/helpers/decorate.js
 function d(e, t, n, r) {
 	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
 	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);

package/chunks/shoelace.js

@@ -20,7 +20,7 @@ import "./chunk.5JY5FUCG.js";
 import { n as O } from "./chunk.ZH2AND3P.js";
 import { n as ce } from "./chunk.TP2GB2HO.js";
 import { i as le, n as ue } from "./chunk.RWUUFNUL.js";
-import { n as de, t as fe } from "./static-html.js";
+import { r as de, t as fe } from "./static-html.js";
 import "./chunk.XQ2OKYYA.js";
 import { t as pe } from "./unsafe-html.js";
 import "./chunk.EA437WHD.js";

package/chunks/static-html.js

@@ -2,23 +2,26 @@ import { s as e } from "./lit.js";
 //#region node_modules/lit-html/static.js
 var t = Symbol.for(""), n = (e) => {
 	if (e?.r === t) return e?._$litStatic$;
-}, r = (e, ...n) => ({
+}, r = (e) => ({
+	_$litStatic$: e,
+	r: t
+}), i = (e, ...n) => ({
 	_$litStatic$: n.reduce(((t, n, r) => t + ((e) => {
 		if (e._$litStatic$ !== void 0) return e._$litStatic$;
 		throw Error(`Value passed to 'literal' function must be a 'literal' result: ${e}. Use 'unsafeStatic' to pass non-literal values, but\n            take care to ensure page security.`);
 	})(n) + e[r + 1]), e[0]),
 	r: t
-}), i = /* @__PURE__ */ new Map(), a = ((e) => (t, ...r) => {
-	let a = r.length, o, s, c = [], l = [], u, d = 0, f = !1;
-	for (; d < a;) {
-		for (u = t[d]; d < a && (s = r[d], o = n(s)) !== void 0;) u += o + t[++d], f = !0;
-		d !== a && l.push(s), c.push(u), d++;
+}), a = /* @__PURE__ */ new Map(), o = ((e) => (t, ...r) => {
+	let i = r.length, o, s, c = [], l = [], u, d = 0, f = !1;
+	for (; d < i;) {
+		for (u = t[d]; d < i && (s = r[d], o = n(s)) !== void 0;) u += o + t[++d], f = !0;
+		d !== i && l.push(s), c.push(u), d++;
 	}
-	if (d === a && c.push(t[a]), f) {
+	if (d === i && c.push(t[i]), f) {
 		let e = c.join("$$lit$$");
-		(t = i.get(e)) === void 0 && (c.raw = c, i.set(e, t = c)), r = l;
+		(t = a.get(e)) === void 0 && (c.raw = c, a.set(e, t = c)), r = l;
 	}
 	return e(t, ...r);
 })(e);
 //#endregion
-export { a as n, r as t };
+export { r as n, o as r, i as t };

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

@@ -2,7 +2,7 @@ import { n as e, t } from "../../chunks/lit.js";
 import { a as n, o as r, r as i, s as a, t as o } from "../../chunks/decorate.js";
 import { t as s } from "../../chunks/class-map.js";
 import { t as c } from "../../chunks/if-defined.js";
-import { n as l, t as u } from "../../chunks/static-html.js";
+import { r as l, t as u } from "../../chunks/static-html.js";
 import d from "./nve-button.styles.js";
 //#region src/components/nve-button/nve-button.component.ts
 var f = class extends t {

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

@@ -0,0 +1,29 @@
+import { LitElement } from 'lit';
+import { INveComponent } from '../../interfaces/NveComponent.interface';
+/**
+ * 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.
+ *
+ * @slot - tekst - Selve overskriften (innholdet).
+ *
+ * @csspart nve-heading Hele heading-elementet
+ *
+ * Se designsystemet for alle varianter og tokens.
+ */
+export default class NveHeading extends LitElement implements INveComponent {
+    testId: string | undefined;
+    /** Heading level - Hvilket nivå overskriften skal ha (h1-h6) */
+    level: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Typografitype - Kan overstyre det som er standard typografi basert på nivå */
+    size?: 'headingXlarge' | 'headingLarge' | 'headingMedium' | 'headingSmall' | 'headingXsmall' | 'subheadingLarge' | 'subheadingMedium' | 'subheadingSmall';
+    static styles: import('lit').CSSResult[];
+    constructor();
+    protected getTagName(): string;
+    protected getDefaultTypographyType(): "headingXlarge" | "headingLarge" | "headingMedium" | "headingSmall" | "headingXsmall";
+    render(): import('lit-html').TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-heading': NveHeading;
+    }
+}

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

@@ -0,0 +1,45 @@
+import { t as e } from "../../chunks/lit.js";
+import { o as t, s as n, t as r } from "../../chunks/decorate.js";
+import { n as i, r as a } from "../../chunks/static-html.js";
+import o from "./nve-heading.styles.js";
+//#region src/components/nve-heading/nve-heading.component.ts
+var s = class extends e {
+	static {
+		this.styles = [o];
+	}
+	constructor() {
+		super(), this.testId = void 0, this.level = 1;
+	}
+	getTagName() {
+		return !this.level || this.level < 1 || this.level > 6 || isNaN(this.level) ? "h1" : `h${this.level}`;
+	}
+	getDefaultTypographyType() {
+		switch (this.level) {
+			case 1: return "headingXlarge";
+			case 2: return "headingLarge";
+			case 3: return "headingMedium";
+			case 4: return "headingSmall";
+			case 5: return "headingXsmall";
+			case 6: return "headingXsmall";
+			default: return "headingMedium";
+		}
+	}
+	render() {
+		let e = this.getTagName();
+		return a`
+      <${i(e)} part="nve-heading" data-testid=${this.testId} class="heading ${this.size ? this.size : this.getDefaultTypographyType()}">
+        <slot></slot>
+      </${i(e)}>
+    `;
+	}
+};
+r([t({ type: String })], s.prototype, "testId", void 0), r([t({
+	type: Number,
+	reflect: !0
+})], s.prototype, "level", void 0), r([t({
+	type: String,
+	reflect: !0
+})], s.prototype, "size", void 0), s = r([n("nve-heading")], s);
+var c = s;
+//#endregion
+export { c as default };

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

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

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

@@ -0,0 +1,41 @@
+import { u as e } from "../../chunks/lit.js";
+//#region src/components/nve-heading/nve-heading.styles.ts
+var t = e`
+  .heading {
+    margin: 0;
+  }
+
+  .headingXlarge {
+    font: var(--typography-heading-x-large);
+  }
+
+  .headingLarge {
+    font: var(--typography-heading-large);
+  }
+
+  .headingMedium {
+    font: var(--typography-heading-medium);
+  }
+
+  .headingSmall {
+    font: var(--typography-heading-small);
+  }
+
+  .headingXsmall {
+    font: var(--typography-heading-x-small);
+  }
+
+  .subheadingLarge {
+    font: var(--typography-subheading-large);
+  }
+
+  .subheadingMedium {
+    font: var(--typography-subheading-medium);
+  }
+
+  .subheadingSmall {
+    font: var(--typography-subheading-small);
+  }
+`;
+//#endregion
+export { t as default };

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

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+import { INveComponent } from '../../interfaces/NveComponent.interface';
+/**
+ * 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).
+ *
+ * @slot - tekst - Selve avsnittet (innholdet).
+ *
+ * @csspart paragraph Hele paragraph-elementet
+ *
+ * Se designsystemet for alle varianter og tokens.
+ */
+export default class NveParagraph extends LitElement implements INveComponent {
+    testId: string | undefined;
+    /** Typografivariant for paragrafen */
+    size?: 'leadLargeRegular' | 'leadLargeSemibold' | 'leadMediumRegular' | 'leadMediumSemibold' | 'leadSmallRegular' | 'leadSmallSemibold' | 'bodyLarge' | 'bodyLargeUnderline' | 'bodyMedium' | 'bodyMediumUnderline' | 'bodySmall' | 'bodySmallUnderline' | 'bodyXSmall' | 'bodyXSmallUnderline' | 'bodyLargeCompact' | 'bodyLargeUnderlineCompact' | 'bodyMediumCompact' | 'bodyMediumUnderlineCompact' | 'bodySmallCompact' | 'bodySmallUnderlineCompact' | 'bodyXSmallCompact' | 'bodyXSmallUnderlineCompact';
+    static styles: import('lit').CSSResult[];
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-paragraph': NveParagraph;
+    }
+}

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

@@ -0,0 +1,26 @@
+import { s as e, t } from "../../chunks/lit.js";
+import { o as n, s as r, t as i } from "../../chunks/decorate.js";
+import a from "./nve-paragraph.styles.js";
+//#region src/components/nve-paragraph/nve-paragraph.component.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.testId = void 0;
+	}
+	static {
+		this.styles = [a];
+	}
+	render() {
+		return e`
+      <p class="paragraph ${this.size ? `${this.size}` : ""}" part="paragraph" data-testid="${this.testId}">
+        <slot></slot>
+      </p>
+    `;
+	}
+};
+i([n({ type: String })], o.prototype, "testId", void 0), i([n({
+	type: String,
+	reflect: !0
+})], o.prototype, "size", void 0), o = i([r("nve-paragraph")], o);
+var s = o;
+//#endregion
+export { s as default };

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

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

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

@@ -0,0 +1,105 @@
+import { u as e } from "../../chunks/lit.js";
+//#region src/components/nve-paragraph/nve-paragraph.styles.ts
+var t = e`
+  .paragraph {
+    margin: 0;
+  }
+
+  .leadLargeRegular {
+    font: var(--typography-lead-large-regular);
+  }
+
+  .leadLargeSemibold {
+    font: var(--typography-lead-large-semibold);
+  }
+
+  .leadMediumRegular {
+    font: var(--typography-lead-medium-regular);
+  }
+
+  .leadMediumSemibold {
+    font: var(--typography-lead-medium-semibold);
+  }
+
+  .leadSmallRegular {
+    font: var(--typography-lead-small-regular);
+  }
+
+  .leadSmallSemibold {
+    font: var(--typography-lead-small-semibold);
+  }
+
+  .bodyLarge {
+    font: var(--typography-body-large);
+  }
+
+  .bodyLargeUnderline {
+    font: var(--typography-body-large-underline);
+    text-decoration: underline;
+  }
+
+  .bodyMedium {
+    font: var(--typography-body-medium);
+  }
+
+  .bodyMediumUnderline {
+    font: var(--typography-body-medium-underline);
+    text-decoration: underline;
+  }
+
+  .bodySmall {
+    font: var(--typography-body-small);
+  }
+
+  .bodySmallUnderline {
+    font: var(--typography-body-small-underline);
+    text-decoration: underline;
+  }
+
+  .bodyXSmall {
+    font: var(--typography-body-x-small);
+  }
+
+  .bodyXSmallUnderline {
+    font: var(--typography-body-x-small-underline);
+    text-decoration: underline;
+  }
+
+  .bodyLargeCompact {
+    font: var(--typography-body-compact-large-compact);
+  }
+
+  .bodyLargeUnderlineCompact {
+    font: var(--typography-body-compact-large-underline-compact);
+    text-decoration: underline;
+  }
+
+  .bodyMediumCompact {
+    font: var(--typography-body-compact-medium-compact);
+  }
+
+  .bodyMediumUnderlineCompact {
+    font: var(--typography-body-compact-medium-underline-compact);
+    text-decoration: underline;
+  }
+
+  .bodySmallCompact {
+    font: var(--typography-body-compact-small-compact);
+  }
+
+  .bodySmallUnderlineCompact {
+    font: var(--typography-body-compact-small-underline-compact);
+    text-decoration: underline;
+  }
+
+  .bodyXSmallCompact {
+    font: var(--typography-body-compact-x-small-compact);
+  }
+
+  .bodyXSmallUnderlineCompact {
+    font: var(--typography-body-compact-x-small-underline-compact);
+    text-decoration: underline;
+  }
+`;
+//#endregion
+export { t as default };

package/css/nve.css

@@ -299,8 +299,10 @@
   --color-interactive-background-secondary-hover: var(--color-shades-grey-200);
   --color-interactive-background-secondary-pressed: var(--color-shades-grey-300);
   --color-interactive-background-secondary-disabled: var(--color-shades-grey-100);
-  --color-interactive-background-tertiary-hover: var(--color-shades-grey-100);
-  --color-interactive-background-tertiary-pressed: var(--color-shades-grey-150);
+  --color-interactive-background-tertiary-enabled: var(--color-shades-grey-100);
+  --color-interactive-background-tertiary-hover: var(--color-shades-grey-150);
+  --color-interactive-background-tertiary-pressed: var(--color-shades-grey-200);
+  --color-interactive-background-tertiary-disabled: var(--color-shades-grey-100);
   --color-interactive-background-danger-enabled: var(--color-shades-functional-red-700);
   --color-interactive-background-danger-hover: var(--color-shades-functional-red-800);
   --color-interactive-background-danger-pressed: var(--color-shades-functional-red-850);
@@ -311,6 +313,9 @@
   --color-interactive-foreground-secondary-enabled: var(--color-shades-grey-950);
   --color-interactive-foreground-secondary-hover: var(--color-shades-grey-950);
   --color-interactive-foreground-secondary-disabled: var(--color-shades-grey-300);
+  --color-interactive-foreground-tertiary-enabled: var(--color-shades-grey-600);
+  --color-interactive-foreground-tertiary-hover: var(--color-shades-grey-950);
+  --color-interactive-foreground-tertiary-disabled: var(--color-shades-grey-300);
   --color-interactive-foreground-danger-enabled: var(--color-shades-grey-000);
   --color-interactive-foreground-danger-disabled: var(--color-shades-functional-red-000);
   --color-interactive-foreground-link-enabled: var(--color-shades-functional-blue-700);
@@ -322,6 +327,9 @@
   --color-interactive-border-secondary-enabled: var(--color-shades-grey-500);
   --color-interactive-border-secondary-hover: var(--color-shades-grey-950);
   --color-interactive-border-secondary-disabled: var(--color-shades-grey-150);
+  --color-interactive-border-tertiary-enabled: var(--color-shades-grey-300);
+  --color-interactive-border-tertiary-hover: var(--color-shades-grey-600);
+  --color-interactive-border-tertiary-disabled: var(--color-shades-grey-150);
   --color-interactive-border-accessibility-focus: var(--color-shades-functional-blue-500);
   --color-feedback-background-default-neutral: var(--color-shades-functional-neutralgrey-150); /** For neutral messages */
   --color-feedback-background-default-info: var(--color-shades-functional-blue-100);
@@ -545,6 +553,7 @@
   --dimension-1x: 0.25rem; /** 4px */
   --dimension-1-5x: 0.375rem; /** 6px */
   --dimension-2x: 0.5rem; /** 8px */
+  --dimension-2-5x: 0.625rem; /** 10px */
   --dimension-3x: 0.75rem; /** 12px */
   --dimension-3-5x: 0.875rem; /** 14px */
   --dimension-4x: 1rem; /** 16px */
@@ -606,11 +615,13 @@
   --spacing-content-margin-top: var(--spacing-40x);
   --spacing-content-margin-bottom: var(--spacing-88x);
   --spacing-content-margin-left-right: var(--spacing-48x);
+  --spacing-fixed-spacing-3x-small: var(--dimension-05x);
   --spacing-fixed-spacing-2x-small: var(--dimension-1-5x);
   --spacing-fixed-spacing-x-small: var(--dimension-2x);
-  --spacing-fixed-spacing-small: var(--dimension-4x);
-  --spacing-fixed-spacing-medium: var(--dimension-6x);
-  --spacing-fixed-spacing-large: var(--dimension-10x);
+  --spacing-fixed-spacing-small: var(--dimension-2-5x);
+  --spacing-fixed-spacing-medium: var(--dimension-4x);
+  --spacing-fixed-spacing-large: var(--dimension-6x);
+  --spacing-fixed-spacing-x-large: var(--dimension-10x);
   --sizing-4x-small: var(--dimension-2x);
   --sizing-3x-small: var(--dimension-4x);
   --sizing-2x-small: var(--dimension-6x);
@@ -789,6 +800,7 @@
   --dimension-1x: 0.25rem; /** 4px */
   --dimension-1-5x: 0.375rem; /** 6px */
   --dimension-2x: 0.5rem; /** 8px */
+  --dimension-2-5x: 0.625rem; /** 10px */
   --dimension-3x: 0.75rem; /** 12px */
   --dimension-3-5x: 0.875rem; /** 14px */
   --dimension-4x: 1rem; /** 16px */
@@ -982,6 +994,7 @@
   --dimension-1x: 0.25rem; /** 4px */
   --dimension-1-5x: 0.375rem; /** 6px */
   --dimension-2x: 0.5rem; /** 8px */
+  --dimension-2-5x: 0.625rem; /** 10px */
   --dimension-3x: 0.75rem; /** 12px */
   --dimension-3-5x: 0.875rem; /** 14px */
   --dimension-4x: 1rem; /** 16px */
@@ -1175,6 +1188,7 @@
   --dimension-1x: 0.25rem; /** 4px */
   --dimension-1-5x: 0.375rem; /** 6px */
   --dimension-2x: 0.5rem; /** 8px */
+  --dimension-2-5x: 0.625rem; /** 10px */
   --dimension-3x: 0.75rem; /** 12px */
   --dimension-3-5x: 0.875rem; /** 14px */
   --dimension-4x: 1rem; /** 16px */
@@ -1368,6 +1382,7 @@
   --dimension-1x: 0.25rem; /** 4px */
   --dimension-1-5x: 0.375rem; /** 6px */
   --dimension-2x: 0.5rem; /** 8px */
+  --dimension-2-5x: 0.625rem; /** 10px */
   --dimension-3x: 0.75rem; /** 12px */
   --dimension-3-5x: 0.875rem; /** 14px */
   --dimension-4x: 1rem; /** 16px */

package/css/nve_dark.css

@@ -299,8 +299,10 @@
   --color-interactive-background-secondary-hover: var(--color-shades-grey-600);
   --color-interactive-background-secondary-pressed: var(--color-shades-grey-500);
   --color-interactive-background-secondary-disabled: var(--color-shades-grey-800);
-  --color-interactive-background-tertiary-hover: var(--color-shades-grey-700);
-  --color-interactive-background-tertiary-pressed: var(--color-shades-grey-600);
+  --color-interactive-background-tertiary-enabled: var(--color-shades-grey-700);
+  --color-interactive-background-tertiary-hover: var(--color-shades-grey-600);
+  --color-interactive-background-tertiary-pressed: var(--color-shades-grey-500);
+  --color-interactive-background-tertiary-disabled: var(--color-shades-grey-800);
   --color-interactive-background-danger-enabled: var(--color-shades-functional-red-500);
   --color-interactive-background-danger-hover: var(--color-shades-functional-red-400);
   --color-interactive-background-danger-pressed: var(--color-shades-functional-red-300);
@@ -311,6 +313,9 @@
   --color-interactive-foreground-secondary-enabled: var(--color-shades-grey-000);
   --color-interactive-foreground-secondary-hover: var(--color-shades-grey-000);
   --color-interactive-foreground-secondary-disabled: var(--color-shades-grey-700);
+  --color-interactive-foreground-tertiary-enabled: var(--color-shades-grey-200);
+  --color-interactive-foreground-tertiary-hover: var(--color-shades-grey-050);
+  --color-interactive-foreground-tertiary-disabled: var(--color-shades-grey-700);
   --color-interactive-foreground-danger-enabled: var(--color-shades-grey-000);
   --color-interactive-foreground-danger-disabled: var(--color-shades-functional-red-800);
   --color-interactive-foreground-link-enabled: var(--color-shades-functional-blue-400);
@@ -322,6 +327,9 @@
   --color-interactive-border-secondary-enabled: var(--color-shades-grey-500);
   --color-interactive-border-secondary-hover: var(--color-shades-grey-000);
   --color-interactive-border-secondary-disabled: var(--color-shades-grey-700);
+  --color-interactive-border-tertiary-enabled: var(--color-shades-grey-600);
+  --color-interactive-border-tertiary-hover: var(--color-shades-grey-400);
+  --color-interactive-border-tertiary-disabled: var(--color-shades-grey-700);
   --color-interactive-border-accessibility-focus: var(--color-shades-functional-blue-500);
   --color-feedback-background-default-neutral: var(--color-shades-functional-neutralgrey-800);
   --color-feedback-background-default-info: var(--color-shades-functional-blue-850);

package/css/rme.css

@@ -299,8 +299,10 @@
   --color-interactive-background-secondary-hover: var(--color-shades-grey-200);
   --color-interactive-background-secondary-pressed: var(--color-shades-grey-300);
   --color-interactive-background-secondary-disabled: var(--color-shades-grey-100);
-  --color-interactive-background-tertiary-hover: var(--color-shades-grey-100);
-  --color-interactive-background-tertiary-pressed: var(--color-shades-grey-150);
+  --color-interactive-background-tertiary-enabled: var(--color-shades-grey-100);
+  --color-interactive-background-tertiary-hover: var(--color-shades-grey-150);
+  --color-interactive-background-tertiary-pressed: var(--color-shades-grey-200);
+  --color-interactive-background-tertiary-disabled: var(--color-shades-grey-100);
   --color-interactive-background-danger-enabled: var(--color-shades-functional-red-700);
   --color-interactive-background-danger-hover: var(--color-shades-functional-red-800);
   --color-interactive-background-danger-pressed: var(--color-shades-functional-red-850);
@@ -311,6 +313,9 @@
   --color-interactive-foreground-secondary-enabled: var(--color-shades-grey-950);
   --color-interactive-foreground-secondary-hover: var(--color-shades-grey-950);
   --color-interactive-foreground-secondary-disabled: var(--color-shades-grey-300);
+  --color-interactive-foreground-tertiary-enabled: var(--color-shades-grey-600);
+  --color-interactive-foreground-tertiary-hover: var(--color-shades-grey-950);
+  --color-interactive-foreground-tertiary-disabled: var(--color-shades-grey-300);
   --color-interactive-foreground-danger-enabled: var(--color-shades-grey-000);
   --color-interactive-foreground-danger-disabled: var(--color-shades-functional-red-000);
   --color-interactive-foreground-link-enabled: var(--color-shades-functional-blue-700);
@@ -322,6 +327,9 @@
   --color-interactive-border-secondary-enabled: var(--color-shades-grey-500);
   --color-interactive-border-secondary-hover: var(--color-shades-grey-950);
   --color-interactive-border-secondary-disabled: var(--color-shades-grey-150);
+  --color-interactive-border-tertiary-enabled: var(--color-shades-grey-300);
+  --color-interactive-border-tertiary-hover: var(--color-shades-grey-600);
+  --color-interactive-border-tertiary-disabled: var(--color-shades-grey-150);
   --color-interactive-border-accessibility-focus: var(--color-shades-functional-blue-500);
   --color-feedback-background-default-neutral: var(--color-shades-functional-neutralgrey-150); /** For neutral messages */
   --color-feedback-background-default-info: var(--color-shades-functional-blue-100);
@@ -545,6 +553,7 @@
   --dimension-1x: 0.25rem; /** 4px */
   --dimension-1-5x: 0.375rem; /** 6px */
   --dimension-2x: 0.5rem; /** 8px */
+  --dimension-2-5x: 0.625rem; /** 10px */
   --dimension-3x: 0.75rem; /** 12px */
   --dimension-3-5x: 0.875rem; /** 14px */
   --dimension-4x: 1rem; /** 16px */
@@ -606,11 +615,13 @@
   --spacing-content-margin-top: var(--spacing-40x);
   --spacing-content-margin-bottom: var(--spacing-88x);
   --spacing-content-margin-left-right: var(--spacing-48x);
+  --spacing-fixed-spacing-3x-small: var(--dimension-05x);
   --spacing-fixed-spacing-2x-small: var(--dimension-1-5x);
   --spacing-fixed-spacing-x-small: var(--dimension-2x);
-  --spacing-fixed-spacing-small: var(--dimension-4x);
-  --spacing-fixed-spacing-medium: var(--dimension-6x);
-  --spacing-fixed-spacing-large: var(--dimension-10x);
+  --spacing-fixed-spacing-small: var(--dimension-2-5x);
+  --spacing-fixed-spacing-medium: var(--dimension-4x);
+  --spacing-fixed-spacing-large: var(--dimension-6x);
+  --spacing-fixed-spacing-x-large: var(--dimension-10x);
   --sizing-4x-small: var(--dimension-2x);
   --sizing-3x-small: var(--dimension-4x);
   --sizing-2x-small: var(--dimension-6x);
@@ -789,6 +800,7 @@
   --dimension-1x: 0.25rem; /** 4px */
   --dimension-1-5x: 0.375rem; /** 6px */
   --dimension-2x: 0.5rem; /** 8px */
+  --dimension-2-5x: 0.625rem; /** 10px */
   --dimension-3x: 0.75rem; /** 12px */
   --dimension-3-5x: 0.875rem; /** 14px */
   --dimension-4x: 1rem; /** 16px */
@@ -982,6 +994,7 @@
   --dimension-1x: 0.25rem; /** 4px */
   --dimension-1-5x: 0.375rem; /** 6px */
   --dimension-2x: 0.5rem; /** 8px */
+  --dimension-2-5x: 0.625rem; /** 10px */
   --dimension-3x: 0.75rem; /** 12px */
   --dimension-3-5x: 0.875rem; /** 14px */
   --dimension-4x: 1rem; /** 16px */
@@ -1175,6 +1188,7 @@
   --dimension-1x: 0.25rem; /** 4px */
   --dimension-1-5x: 0.375rem; /** 6px */
   --dimension-2x: 0.5rem; /** 8px */
+  --dimension-2-5x: 0.625rem; /** 10px */
   --dimension-3x: 0.75rem; /** 12px */
   --dimension-3-5x: 0.875rem; /** 14px */
   --dimension-4x: 1rem; /** 16px */
@@ -1368,6 +1382,7 @@
   --dimension-1x: 0.25rem; /** 4px */
   --dimension-1-5x: 0.375rem; /** 6px */
   --dimension-2x: 0.5rem; /** 8px */
+  --dimension-2-5x: 0.625rem; /** 10px */
   --dimension-3x: 0.75rem; /** 12px */
   --dimension-3-5x: 0.875rem; /** 14px */
   --dimension-4x: 1rem; /** 16px */

package/css/rme_dark.css

@@ -299,8 +299,10 @@
   --color-interactive-background-secondary-hover: var(--color-shades-grey-600);
   --color-interactive-background-secondary-pressed: var(--color-shades-grey-500);
   --color-interactive-background-secondary-disabled: var(--color-shades-grey-800);
-  --color-interactive-background-tertiary-hover: var(--color-shades-grey-700);
-  --color-interactive-background-tertiary-pressed: var(--color-shades-grey-600);
+  --color-interactive-background-tertiary-enabled: var(--color-shades-grey-700);
+  --color-interactive-background-tertiary-hover: var(--color-shades-grey-600);
+  --color-interactive-background-tertiary-pressed: var(--color-shades-grey-500);
+  --color-interactive-background-tertiary-disabled: var(--color-shades-grey-800);
   --color-interactive-background-danger-enabled: var(--color-shades-functional-red-500);
   --color-interactive-background-danger-hover: var(--color-shades-functional-red-400);
   --color-interactive-background-danger-pressed: var(--color-shades-functional-red-300);
@@ -311,6 +313,9 @@
   --color-interactive-foreground-secondary-enabled: var(--color-shades-grey-000);
   --color-interactive-foreground-secondary-hover: var(--color-shades-grey-000);
   --color-interactive-foreground-secondary-disabled: var(--color-shades-grey-700);
+  --color-interactive-foreground-tertiary-enabled: var(--color-shades-grey-200);
+  --color-interactive-foreground-tertiary-hover: var(--color-shades-grey-050);
+  --color-interactive-foreground-tertiary-disabled: var(--color-shades-grey-700);
   --color-interactive-foreground-danger-enabled: var(--color-shades-grey-000);
   --color-interactive-foreground-danger-disabled: var(--color-shades-functional-red-800);
   --color-interactive-foreground-link-enabled: var(--color-shades-functional-blue-400);
@@ -322,6 +327,9 @@
   --color-interactive-border-secondary-enabled: var(--color-shades-grey-500);
   --color-interactive-border-secondary-hover: var(--color-shades-grey-000);
   --color-interactive-border-secondary-disabled: var(--color-shades-grey-700);
+  --color-interactive-border-tertiary-enabled: var(--color-shades-grey-600);
+  --color-interactive-border-tertiary-hover: var(--color-shades-grey-400);
+  --color-interactive-border-tertiary-disabled: var(--color-shades-grey-700);
   --color-interactive-border-accessibility-focus: var(--color-shades-functional-blue-500);
   --color-feedback-background-default-neutral: var(--color-shades-functional-neutralgrey-800);
   --color-feedback-background-default-info: var(--color-shades-functional-blue-850);

package/css/varsom.css

@@ -299,8 +299,10 @@
   --color-interactive-background-secondary-hover: var(--color-shades-grey-200);
   --color-interactive-background-secondary-pressed: var(--color-shades-grey-300);
   --color-interactive-background-secondary-disabled: var(--color-shades-grey-100);
-  --color-interactive-background-tertiary-hover: var(--color-shades-grey-100);
-  --color-interactive-background-tertiary-pressed: var(--color-shades-grey-150);
+  --color-interactive-background-tertiary-enabled: var(--color-shades-grey-100);
+  --color-interactive-background-tertiary-hover: var(--color-shades-grey-150);
+  --color-interactive-background-tertiary-pressed: var(--color-shades-grey-200);
+  --color-interactive-background-tertiary-disabled: var(--color-shades-grey-100);
   --color-interactive-background-danger-enabled: var(--color-shades-functional-red-700);
   --color-interactive-background-danger-hover: var(--color-shades-functional-red-800);
   --color-interactive-background-danger-pressed: var(--color-shades-functional-red-850);
@@ -311,6 +313,9 @@
   --color-interactive-foreground-secondary-enabled: var(--color-shades-grey-950);
   --color-interactive-foreground-secondary-hover: var(--color-shades-grey-950);
   --color-interactive-foreground-secondary-disabled: var(--color-shades-grey-300);
+  --color-interactive-foreground-tertiary-enabled: var(--color-shades-grey-600);
+  --color-interactive-foreground-tertiary-hover: var(--color-shades-grey-950);
+  --color-interactive-foreground-tertiary-disabled: var(--color-shades-grey-300);
   --color-interactive-foreground-danger-enabled: var(--color-shades-grey-000);
   --color-interactive-foreground-danger-disabled: var(--color-shades-functional-red-000);
   --color-interactive-foreground-link-enabled: var(--color-shades-functional-blue-700);
@@ -322,6 +327,9 @@
   --color-interactive-border-secondary-enabled: var(--color-shades-grey-500);
   --color-interactive-border-secondary-hover: var(--color-shades-grey-950);
   --color-interactive-border-secondary-disabled: var(--color-shades-grey-150);
+  --color-interactive-border-tertiary-enabled: var(--color-shades-grey-300);
+  --color-interactive-border-tertiary-hover: var(--color-shades-grey-600);
+  --color-interactive-border-tertiary-disabled: var(--color-shades-grey-150);
   --color-interactive-border-accessibility-focus: var(--color-shades-functional-blue-500);
   --color-feedback-background-default-neutral: var(--color-shades-functional-neutralgrey-150); /** For neutral messages */
   --color-feedback-background-default-info: var(--color-shades-functional-blue-100);
@@ -545,6 +553,7 @@
   --dimension-1x: 0.25rem; /** 4px */
   --dimension-1-5x: 0.375rem; /** 6px */
   --dimension-2x: 0.5rem; /** 8px */
+  --dimension-2-5x: 0.625rem; /** 10px */
   --dimension-3x: 0.75rem; /** 12px */
   --dimension-3-5x: 0.875rem; /** 14px */
   --dimension-4x: 1rem; /** 16px */
@@ -606,11 +615,13 @@
   --spacing-content-margin-top: var(--spacing-40x);
   --spacing-content-margin-bottom: var(--spacing-88x);
   --spacing-content-margin-left-right: var(--spacing-48x);
+  --spacing-fixed-spacing-3x-small: var(--dimension-05x);
   --spacing-fixed-spacing-2x-small: var(--dimension-1-5x);
   --spacing-fixed-spacing-x-small: var(--dimension-2x);
-  --spacing-fixed-spacing-small: var(--dimension-4x);
-  --spacing-fixed-spacing-medium: var(--dimension-6x);
-  --spacing-fixed-spacing-large: var(--dimension-10x);
+  --spacing-fixed-spacing-small: var(--dimension-2-5x);
+  --spacing-fixed-spacing-medium: var(--dimension-4x);
+  --spacing-fixed-spacing-large: var(--dimension-6x);
+  --spacing-fixed-spacing-x-large: var(--dimension-10x);
   --sizing-4x-small: var(--dimension-2x);
   --sizing-3x-small: var(--dimension-4x);
   --sizing-2x-small: var(--dimension-6x);
@@ -789,6 +800,7 @@
   --dimension-1x: 0.25rem; /** 4px */
   --dimension-1-5x: 0.375rem; /** 6px */
   --dimension-2x: 0.5rem; /** 8px */
+  --dimension-2-5x: 0.625rem; /** 10px */
   --dimension-3x: 0.75rem; /** 12px */
   --dimension-3-5x: 0.875rem; /** 14px */
   --dimension-4x: 1rem; /** 16px */
@@ -982,6 +994,7 @@
   --dimension-1x: 0.25rem; /** 4px */
   --dimension-1-5x: 0.375rem; /** 6px */
   --dimension-2x: 0.5rem; /** 8px */
+  --dimension-2-5x: 0.625rem; /** 10px */
   --dimension-3x: 0.75rem; /** 12px */
   --dimension-3-5x: 0.875rem; /** 14px */
   --dimension-4x: 1rem; /** 16px */
@@ -1175,6 +1188,7 @@
   --dimension-1x: 0.25rem; /** 4px */
   --dimension-1-5x: 0.375rem; /** 6px */
   --dimension-2x: 0.5rem; /** 8px */
+  --dimension-2-5x: 0.625rem; /** 10px */
   --dimension-3x: 0.75rem; /** 12px */
   --dimension-3-5x: 0.875rem; /** 14px */
   --dimension-4x: 1rem; /** 16px */
@@ -1368,6 +1382,7 @@
   --dimension-1x: 0.25rem; /** 4px */
   --dimension-1-5x: 0.375rem; /** 6px */
   --dimension-2x: 0.5rem; /** 8px */
+  --dimension-2-5x: 0.625rem; /** 10px */
   --dimension-3x: 0.75rem; /** 12px */
   --dimension-3-5x: 0.875rem; /** 14px */
   --dimension-4x: 1rem; /** 16px */

package/css/varsom_dark.css

@@ -299,8 +299,10 @@
   --color-interactive-background-secondary-hover: var(--color-shades-grey-600);
   --color-interactive-background-secondary-pressed: var(--color-shades-grey-500);
   --color-interactive-background-secondary-disabled: var(--color-shades-grey-800);
-  --color-interactive-background-tertiary-hover: var(--color-shades-grey-700);
-  --color-interactive-background-tertiary-pressed: var(--color-shades-grey-600);
+  --color-interactive-background-tertiary-enabled: var(--color-shades-grey-700);
+  --color-interactive-background-tertiary-hover: var(--color-shades-grey-600);
+  --color-interactive-background-tertiary-pressed: var(--color-shades-grey-500);
+  --color-interactive-background-tertiary-disabled: var(--color-shades-grey-800);
   --color-interactive-background-danger-enabled: var(--color-shades-functional-red-500);
   --color-interactive-background-danger-hover: var(--color-shades-functional-red-400);
   --color-interactive-background-danger-pressed: var(--color-shades-functional-red-300);
@@ -311,6 +313,9 @@
   --color-interactive-foreground-secondary-enabled: var(--color-shades-grey-000);
   --color-interactive-foreground-secondary-hover: var(--color-shades-grey-000);
   --color-interactive-foreground-secondary-disabled: var(--color-shades-grey-700);
+  --color-interactive-foreground-tertiary-enabled: var(--color-shades-grey-200);
+  --color-interactive-foreground-tertiary-hover: var(--color-shades-grey-050);
+  --color-interactive-foreground-tertiary-disabled: var(--color-shades-grey-700);
   --color-interactive-foreground-danger-enabled: var(--color-shades-grey-000);
   --color-interactive-foreground-danger-disabled: var(--color-shades-functional-red-800);
   --color-interactive-foreground-link-enabled: var(--color-shades-functional-blue-400);
@@ -322,6 +327,9 @@
   --color-interactive-border-secondary-enabled: var(--color-shades-grey-500);
   --color-interactive-border-secondary-hover: var(--color-shades-grey-000);
   --color-interactive-border-secondary-disabled: var(--color-shades-grey-700);
+  --color-interactive-border-tertiary-enabled: var(--color-shades-grey-600);
+  --color-interactive-border-tertiary-hover: var(--color-shades-grey-400);
+  --color-interactive-border-tertiary-disabled: var(--color-shades-grey-700);
   --color-interactive-border-accessibility-focus: var(--color-shades-functional-blue-500);
   --color-feedback-background-default-neutral: var(--color-shades-functional-neutralgrey-800);
   --color-feedback-background-default-info: var(--color-shades-functional-blue-850);

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",
@@ -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

@@ -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,7 +11,7 @@
   },
   "license": "MIT",
   "homepage": "https://github.com/NVE/Designsystem/",
-  "version": "4.1.0",
+  "version": "4.3.0",
   "customElements": "dist/custom-elements.json",
   "exports": {
     ".": {
@@ -46,7 +46,12 @@
   "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"
   }
 }