nve-designsystem 4.3.0 → 4.4.2

package/chunks/static-html.js

@@ -1,15 +1,15 @@
-import { s as e } from "./lit.js";
-//#region node_modules/lit-html/static.js
+import { a as e } from "./lit.js";
+//#region .pnpm/lit-html@3.3.3/node_modules/lit-html/static.js
 var t = Symbol.for(""), n = (e) => {
 	if (e?.r === t) return e?._$litStatic$;
 }, r = (e) => ({
 	_$litStatic$: e,
 	r: t
 }), i = (e, ...n) => ({
-	_$litStatic$: n.reduce(((t, n, r) => t + ((e) => {
+	_$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]),
+	})(n) + e[r + 1], e[0]),
 	r: t
 }), a = /* @__PURE__ */ new Map(), o = ((e) => (t, ...r) => {
 	let i = r.length, o, s, c = [], l = [], u, d = 0, f = !1;

package/chunks/unsafe-html.js

@@ -1,6 +1,6 @@
 import { n as e, r as t } from "./lit.js";
 import { i as n, n as r, r as i } from "./class-map.js";
-//#region node_modules/lit-html/directives/unsafe-html.js
+//#region .pnpm/lit-html@3.3.3/node_modules/lit-html/directives/unsafe-html.js
 var a = class extends i {
 	constructor(t) {
 		if (super(t), this.it = e, t.type !== n.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");

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

@@ -1,4 +1,4 @@
-import { s as e, t } from "../../chunks/lit.js";
+import { a as e, t } from "../../chunks/lit.js";
 import { o as n, s as r, t as i } from "../../chunks/decorate.js";
 //#region src/components/nve-accordion/nve-accordion.component.ts
 var a = class extends t {

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

@@ -1,4 +1,4 @@
-import { s as e, t } from "../../chunks/lit.js";
+import { a as e, t } from "../../chunks/lit.js";
 import { o as n, s as r, t as i } from "../../chunks/decorate.js";
 import { t as a } from "../../chunks/class-map.js";
 import o from "./nve-badge.styles.js";

package/components/nve-carousel-thumbnail/nve-carousel-thumbnail.component.js

@@ -1,4 +1,4 @@
-import { s as e, t } from "../../chunks/lit.js";
+import { a 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-carousel-thumbnail.styles.js";
 //#region src/components/nve-carousel-thumbnail/nve-carousel-thumbnail.component.ts

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

@@ -1,4 +1,4 @@
-import { s as e, t } from "../../chunks/lit.js";
+import { a as e, t } from "../../chunks/lit.js";
 import { a as n, o as r, s as i, t as a } from "../../chunks/decorate.js";
 import { t as o } from "../../chunks/unsafe-html.js";
 import { n as s, t as c } from "../../chunks/ref.js";

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

@@ -1,4 +1,4 @@
-import { s as e, t } from "../../chunks/lit.js";
+import { a as e, t } from "../../chunks/lit.js";
 import { o as n, s as r, t as i } from "../../chunks/decorate.js";
 //#region src/components/nve-darkmode-switch/nve-darkmode-switch.component.ts
 var a = class extends t {
@@ -6,7 +6,8 @@ var a = class extends t {
 		super(), this.testId = "", this.darkmode = !1, this.darkmodeclass = "darkmode", this.localStorageVariable = "preferdarkmode";
 	}
 	toggleDarkmode(e) {
-		this.darkmode = !!e.target.checked, localStorage.setItem(this.localStorageVariable, this.darkmode.toString()), this.darkmode ? document.documentElement.classList.add(this.darkmodeclass) : document.documentElement.classList.remove(this.darkmodeclass);
+		let t = e.target;
+		this.darkmode = !!t?.checked, localStorage.setItem(this.localStorageVariable, this.darkmode.toString()), this.darkmode ? document.documentElement.classList.add(this.darkmodeclass) : document.documentElement.classList.remove(this.darkmodeclass);
 	}
 	connectedCallback() {
 		super.connectedCallback();

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

@@ -1,5 +1,5 @@
 import { r as e, t } from "../../chunks/chunk.js";
-import { s as n, t as r } from "../../chunks/lit.js";
+import { a as n, t as r } from "../../chunks/lit.js";
 import { a as i, o as a, s as o, t as s } from "../../chunks/decorate.js";
 import { t as c } from "../../chunks/class-map.js";
 import { t as l } from "../../chunks/if-defined.js";

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

@@ -1,4 +1,4 @@
-import { n as e, s as t, t as n } from "../../chunks/lit.js";
+import { a as e, n as t, t as n } from "../../chunks/lit.js";
 import { o as r, s as i, t as a } from "../../chunks/decorate.js";
 import { t as o } from "../../chunks/class-map.js";
 import { t as s } from "../../chunks/if-defined.js";
@@ -22,17 +22,17 @@ var l = class extends n {
 		}
 	}
 	renderContent() {
-		return t`
+		return e`
       <slot name="icon"></slot>
       <div class="link-card__content">
         <div part="label" class="link-card__label">${this.label}</div>
-        ${this.additionalText ? t`<div part="additional-text" class="link-card__additional-text">${this.additionalText}</div>` : e}
+        ${this.additionalText ? e`<div part="additional-text" class="link-card__additional-text">${this.additionalText}</div>` : t}
       </div>
       <nve-icon aria-hidden="true" slot="suffix" name="${this.getIconName()}"></nve-icon>
     `;
 	}
 	render() {
-		return this.parentElement?.tagName.toLowerCase() === "a" || this.parentElement?.getAttribute("role") === "link" ? t` <div
+		return this.parentElement?.tagName.toLowerCase() === "a" || this.parentElement?.getAttribute("role") === "link" ? e` <div
         part="link-card"
         testId="${s(this.testId)}"
         class=${o({
@@ -42,14 +42,14 @@ var l = class extends n {
 		})}
       >
         ${this.renderContent()}
-      </div>` : t`
+      </div>` : e`
         <a
           testId="${s(this.testId)}"
           ?download=${this.clickAction === "download"}
           part="link-card"
           class="link-card link-card--${this.size} link-card--${this.variant}"
           href=${s(this.clickAction === "mail" ? `mailto:${this.href}` : this.href)}
-          target=${this.clickAction === "external" ? "_blank" : e}
+          target=${this.clickAction === "external" ? "_blank" : t}
           >${this.renderContent()}
         </a>
       `;

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

@@ -1,4 +1,4 @@
-import { s as e, t } from "../../chunks/lit.js";
+import { a as e, t } from "../../chunks/lit.js";
 import { o as n, s as r, t as i } from "../../chunks/decorate.js";
 import { t as a } from "../../chunks/class-map.js";
 import "../nve-icon/nve-icon.component.js";

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

@@ -1,4 +1,4 @@
-import { n as e, s as t, t as n } from "../../chunks/lit.js";
+import { a as e, n as t, t as n } from "../../chunks/lit.js";
 import { o as r, s as i, t as a } from "../../chunks/decorate.js";
 import { t as o } from "../../chunks/if-defined.js";
 import "../nve-icon/nve-icon.component.js";
@@ -20,34 +20,34 @@ var c = class extends n {
 		}
 	}
 	renderContent() {
-		return t`
+		return e`
       <div part="content" class="navigation-card__content">
-        ${this.iconPath ? t`<img
+        ${this.iconPath ? e`<img
               part="leading-icon"
               src="${this.iconPath}"
               alt=""
               aria-hidden="true"
               class="navigation-card__icon"
-            />` : e}
+            />` : t}
         <h2 part="label" class="navigation-card__label">${this.label}</h2>
-        ${!this.iconPath && this.additionalText ? t`<p part="additional-text" class="navigation-card__additional-text">${this.additionalText}</p>` : e}
+        ${!this.iconPath && this.additionalText ? e`<p part="additional-text" class="navigation-card__additional-text">${this.additionalText}</p>` : t}
       </div>
       <nve-icon aria-hidden="true" name="${this.getIconName()}" class="navigation-card__arrow" />
     `;
 	}
 	render() {
-		return this.parentElement?.tagName.toLowerCase() === "a" || this.parentElement?.getAttribute("role") === "link" ? t`
+		return this.parentElement?.tagName.toLowerCase() === "a" || this.parentElement?.getAttribute("role") === "link" ? e`
         <div part="navigation-card" class="navigation-card" testid=${o(this.testId)}>
           ${this.renderContent()}
         </div>
-      ` : t`
+      ` : e`
       <a
         testid=${o(this.testId)}
         ?download=${this.clickAction === "download"}
         part="navigation-card"
         class="navigation-card"
         href="${o(this.href)}"
-        target=${this.clickAction === "external" ? "_blank" : e}
+        target=${this.clickAction === "external" ? "_blank" : t}
       >
         ${this.renderContent()}
       </a>

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

@@ -1,4 +1,4 @@
-import { s as e, t } from "../../chunks/lit.js";
+import { a 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

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

@@ -1,4 +1,4 @@
-import { s as e, t } from "../../../chunks/lit.js";
+import { a as e, t } from "../../../chunks/lit.js";
 import { o as n, r, s as i, t as a } from "../../../chunks/decorate.js";
 import o from "./nve-step.styles.js";
 //#region src/components/nve-stepper/nve-step/nve-step.component.ts
@@ -6,7 +6,7 @@ var s = /* @__PURE__ */ function(e) {
 	return e[e.NotStarted = 0] = "NotStarted", e[e.Started = 1] = "Started", e[e.Active = 2] = "Active", e[e.Done = 3] = "Done", e[e.Error = 4] = "Error", e;
 }({}), c = class extends t {
 	constructor(...e) {
-		super(...e), this.label = "", this.index = 0, this.state = s.NotStarted, this.selectedStepIndex = 0, this.isSelected = !1, this.isLast = !1, this.entranceAllowed = !1, this.orientation = "horizontal", this.hideStateText = !1, this.hideDescriptions = !1;
+		super(...e), this.label = "", this.index = 0, this.state = 0, this.selectedStepIndex = 0, this.isSelected = !1, this.isLast = !1, this.entranceAllowed = !1, this.orientation = "horizontal", this.hideStateText = !1, this.hideDescriptions = !1;
 	}
 	firstUpdated() {
 		this.style.setProperty("--flex-grow", this.isLast ? "0" : "1");
@@ -23,19 +23,19 @@ var s = /* @__PURE__ */ function(e) {
 	iconForState(e) {
 		let t = "";
 		switch (e) {
-			case s.NotStarted:
+			case 0:
 				t = "circle";
 				break;
-			case s.Active:
+			case 2:
 				t = "radio_button_checked";
 				break;
-			case s.Started:
+			case 1:
 				t = "trip_origin";
 				break;
-			case s.Done:
+			case 3:
 				t = "check_circle";
 				break;
-			case s.Error:
+			case 4:
 				t = "error";
 				break;
 			default:
@@ -46,35 +46,35 @@ var s = /* @__PURE__ */ function(e) {
 	}
 	getStateText(e) {
 		switch (e) {
-			case s.NotStarted: return "Ikke påbegynt";
-			case s.Active: return "Aktiv";
-			case s.Started: return "Påbegynt";
-			case s.Done: return "Fullført";
-			case s.Error: return "Feil";
+			case 0: return "Ikke påbegynt";
+			case 2: return "Aktiv";
+			case 1: return "Påbegynt";
+			case 3: return "Fullført";
+			case 4: return "Feil";
 			default: return "Ikke påbegynt";
 		}
 	}
 	getStateColorClass(e) {
 		switch (e) {
-			case s.NotStarted: return "state-not-started-color";
-			case s.Active: return "state-started-color";
-			case s.Done: return "state-done-color";
-			case s.Error: return "state-error-color";
+			case 0: return "state-not-started-color";
+			case 2: return "state-started-color";
+			case 3: return "state-done-color";
+			case 4: return "state-error-color";
 			default: return "state-not-started-color";
 		}
 	}
 	getLabelClass(e) {
 		switch (e) {
-			case s.NotStarted: return "state-not-started-color";
-			case s.Error: return "state-error-color";
+			case 0: return "state-not-started-color";
+			case 4: return "state-error-color";
 			default: return "";
 		}
 	}
 	getIconClass(e) {
 		switch (e) {
-			case s.Started: return "";
-			case s.NotStarted: return "state-not-started-icon-color filled-icon";
-			case s.Error: return "state-error-color filled-icon";
+			case 1: return "";
+			case 0: return "state-not-started-icon-color filled-icon";
+			case 4: return "state-error-color filled-icon";
 			default: return "filled-icon";
 		}
 	}

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

@@ -1,4 +1,4 @@
-import { s as e, t } from "../../chunks/lit.js";
+import { a 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-stepper-mobile.styles.js";
 //#region src/components/nve-stepper/nve-stepper-mobile.component.ts

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

@@ -1,4 +1,4 @@
-import { s as e, t } from "../../chunks/lit.js";
+import { a as e, t } from "../../chunks/lit.js";
 import { o as n, s as r, t as i } from "../../chunks/decorate.js";
 import { StepState as a } from "./nve-step/nve-step.component.js";
 import o from "./nve-stepper.styles.js";

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

@@ -1,4 +1,4 @@
-import { s as e, t } from "../../chunks/lit.js";
+import { a 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";

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

@@ -1,4 +1,4 @@
-import { s as e, t } from "../../chunks/lit.js";
+import { a as e, t } from "../../chunks/lit.js";
 import { o as n, s as r, t as i } from "../../chunks/decorate.js";
 import { t as a } from "../../chunks/class-map.js";
 import o from "./nve-tab.styles.js";

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

@@ -1,4 +1,4 @@
-import { n as e, s as t, t as n } from "../../chunks/lit.js";
+import { a as e, n as t, t as n } from "../../chunks/lit.js";
 import { a as r, o 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";
@@ -157,7 +157,7 @@ var d = class extends n {
 		}
 	}
 	render() {
-		return t`
+		return e`
       <div
         part="base"
         class="tab-group"
@@ -175,7 +175,7 @@ var d = class extends n {
           >
             <slot name="nav"></slot>
           </div>
-          ${this.canScrollBack && this.isOverflow ? t`
+          ${this.canScrollBack && this.isOverflow ? e`
                 <div
                   aria-hidden="true"
                   part="button-backward-base"
@@ -185,8 +185,8 @@ var d = class extends n {
                     <nve-icon name="chevron_backward"></nve-icon>
                   </nve-button>
                 </div>
-              ` : e}
-          ${this.canScrollForward && this.isOverflow ? t`
+              ` : t}
+          ${this.canScrollForward && this.isOverflow ? e`
                 <div
                   part="button-forward-base"
                   aria-hidden="true"
@@ -196,7 +196,7 @@ var d = class extends n {
                     <nve-icon name="chevron_forward"></nve-icon>
                   </nve-button>
                 </div>
-              ` : e}
+              ` : t}
         </div>
         <slot part="body"></slot>
       </div>

package/components/nve-tab-panel/nve-tab-panel.component.js

@@ -1,4 +1,4 @@
-import { s as e, t } from "../../chunks/lit.js";
+import { a 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-tab-panel.styles.js";
 //#region src/components/nve-tab-panel/nve-tab-panel.component.ts

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

@@ -1,4 +1,4 @@
-import { n as e, s as t, t as n } from "../../chunks/lit.js";
+import { a as e, n as t, t as n } from "../../chunks/lit.js";
 import { o as r, s as i, t as a } from "../../chunks/decorate.js";
 import { t as o } from "../../chunks/class-map.js";
 import s from "./nve-tag.styles.js";
@@ -20,7 +20,7 @@ var c = class extends n {
 		this.dispatchEvent(e);
 	}
 	render() {
-		return t`
+		return e`
       <span
         part="base"
         class=${o({
@@ -38,20 +38,20 @@ var c = class extends n {
 		})}
       >
         <slot name="prefix"
-          >${this.dot ? t`<svg width="11" height="10" viewBox="0 0 11 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+          >${this.dot ? e`<svg width="11" height="10" viewBox="0 0 11 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <circle cx="5.5" cy="5" r="5" fill="currentcolor" />
-              </svg> ` : e}</slot
+              </svg> ` : t}</slot
         >
         <slot part="text"></slot>
         <slot name="extra" part="extra">${this.extraText}</slot>
-        ${this.closeable ? t`<button
+        ${this.closeable ? e`<button
               part="close"
               class="tag-close"
               aria-label="${this.closeAriaLabel}"
               @click=${this.closeButtonClick}
             >
               <nve-icon name="close"></nve-icon>
-            </button>` : e}
+            </button>` : t}
       </span>
     `;
 	}

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

@@ -1,4 +1,4 @@
-import { n as e, s as t, t as n } from "../../chunks/lit.js";
+import { a as e, n as t, t as n } from "../../chunks/lit.js";
 import { a as r, o as i, r as a, s as o, t as s } from "../../chunks/decorate.js";
 import { t as c } from "../../chunks/class-map.js";
 import { t as l } from "../../chunks/if-defined.js";
@@ -62,20 +62,20 @@ var f = class extends n {
 	}
 	render() {
 		let n = !!this.querySelector("[slot=\"label\"]");
-		return t`
+		return e`
       <div part="form-control" class=${c({
 			"form-control": !0,
 			"form-control--has-label": this.label
 		})}>
-        ${n ? t`<slot name="label"></slot>` : this.label ? t`<nve-label
+        ${n ? e`<slot name="label"></slot>` : this.label ? e`<nve-label
                 id="label"
                 value=${this.label}
                 size="small"
                 tooltip=${l(this.tooltip)}
-              ></nve-label>` : e}
-        ${this.helpText ? t` <div part="help-text-container" class="textarea__help-text__container">
+              ></nve-label>` : t}
+        ${this.helpText ? e` <div part="help-text-container" class="textarea__help-text__container">
               <span class="textarea__help-text" aria-hidden=${this.helpText ? "false" : "true"}>${this.helpText}</span>
-            </div>` : e}
+            </div>` : t}
 
         <div part="base" class="textarea__base">
           <textarea
@@ -105,15 +105,15 @@ var f = class extends n {
           Må gjøres sånn fordi vi vil ikke begrense textarea__base brede til fit-content (da textarea kan aldri ta så mye plass som er 
           tilgjengelig i nettleseren og man må alltid sette brede på den manuelt. Nei takk.) -->
           <!-- Foreløpig kan man ha enten 'lock' eller 'error' ikone -->
-          ${this.disabled || this.showErrorMessage ? t`<div class="textarea__icon__container">
-                ${this.disabled ? t`<nve-icon name="lock"></nve-icon>` : null}
-                ${this.showErrorMessage ? t`<nve-icon class="textarea__icon--error" name="error"></nve-icon>` : null}
-              </div>` : e}
+          ${this.disabled || this.showErrorMessage ? e`<div class="textarea__icon__container">
+                ${this.disabled ? e`<nve-icon name="lock"></nve-icon>` : null}
+                ${this.showErrorMessage ? e`<nve-icon class="textarea__icon--error" name="error"></nve-icon>` : null}
+              </div>` : t}
         </div>
         <div part="hint-text-container" class="textarea__hint-text__container">
           <!-- Ikke vis hint dersom feil -->
-          ${!this.showErrorMessage && this.hint ? t`<span class="textarea__hint" aria-hidden=${this.hint ? "false" : "true"}>${this.hint}</span>` : e}
-          ${this.showErrorMessage ? t`<span class="textarea__help-text textarea__help-text--error">${this.errorMessage}</span>` : e}
+          ${!this.showErrorMessage && this.hint ? e`<span class="textarea__hint" aria-hidden=${this.hint ? "false" : "true"}>${this.hint}</span>` : t}
+          ${this.showErrorMessage ? e`<span class="textarea__help-text textarea__help-text--error">${this.errorMessage}</span>` : t}
         </div>
       </div>
     `;

package/css/nve.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: true;
   --boolean-brand-varsom: false;
@@ -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 */