nve-designsystem 4.0.3 → 4.2.0

package/chunks/chunk.5JY5FUCG.js

@@ -925,7 +925,11 @@ var $ = class extends c {
 		super.updated(e), e.has("active") && (this.active ? this.start() : this.stop()), e.has("anchor") && this.handleAnchorChange(), this.active && (await this.updateComplete, this.reposition());
 	}
 	async handleAnchorChange() {
-		await this.stop(), this.anchor && typeof this.anchor == "string" ? this.anchorEl = this.getRootNode().getElementById(this.anchor) : this.anchor instanceof Element || Ze(this.anchor) ? this.anchorEl = this.anchor : this.anchorEl = this.querySelector("[slot=\"anchor\"]"), this.anchorEl instanceof HTMLSlotElement && (this.anchorEl = this.anchorEl.assignedElements({ flatten: !0 })[0]), this.anchorEl && this.active && this.start();
+		if (await this.stop(), this.anchor && typeof this.anchor == "string") {
+			let e = this.getRootNode();
+			this.anchorEl = e.getElementById(this.anchor);
+		} else this.anchor instanceof Element || Ze(this.anchor) ? this.anchorEl = this.anchor : this.anchorEl = this.querySelector("[slot=\"anchor\"]");
+		this.anchorEl instanceof HTMLSlotElement && (this.anchorEl = this.anchorEl.assignedElements({ flatten: !0 })[0]), this.anchorEl && this.active && this.start();
 	}
 	start() {
 		!this.anchorEl || !this.active || (this.cleanup = Ve(this.anchorEl, this.popup, () => {

package/chunks/chunk.HVTXQL7M.js

@@ -241,8 +241,7 @@ var _ = t`
 	}
 	updateSkidding() {
 		if (!this.host.parentElement?.computedStyleMap) return;
-		let e = this.host.parentElement.computedStyleMap();
-		this.skidding = [
+		let e = this.host.parentElement.computedStyleMap(), t = [
 			"padding-top",
 			"border-top-width",
 			"margin-top"
@@ -250,6 +249,7 @@ var _ = t`
 			let r = e.get(n) ?? new CSSUnitValue(0, "px");
 			return t - (r instanceof CSSUnitValue ? r : new CSSUnitValue(0, "px")).to("px").value;
 		}, 0);
+		this.skidding = t;
 	}
 	isExpanded() {
 		return this.popupRef.value ? this.popupRef.value.active : !1;

package/chunks/chunk.TP2GB2HO.js

@@ -667,14 +667,15 @@ var E = t`
 		t === !0 || t === !1 ? e.selected = t : e.selected = !e.selected, this.selectionChanged();
 	}
 	selectionChanged() {
-		this.selectedOptions = this.getAllOptions().filter((e) => e.selected);
-		let e = this.valueHasChanged;
+		let e = this.getAllOptions();
+		this.selectedOptions = e.filter((e) => e.selected);
+		let t = this.valueHasChanged;
 		if (this.multiple) this.value = this.selectedOptions.map((e) => e.value), this.placeholder && this.value.length === 0 ? this.displayLabel = "" : this.displayLabel = this.localize.term("numOptionsSelected", this.selectedOptions.length);
 		else {
 			let e = this.selectedOptions[0];
 			this.value = e?.value ?? "", this.displayLabel = (e?.getTextLabel)?.call(e) ?? "";
 		}
-		this.valueHasChanged = e, this.updateComplete.then(() => {
+		this.valueHasChanged = t, this.updateComplete.then(() => {
 			this.formControlController.updateValidity();
 		});
 	}

package/chunks/chunk.ZH2AND3P.js

@@ -369,9 +369,10 @@ var b = class extends c {
 	goToSlide(e, t = "smooth") {
 		let { slidesPerPage: n, loop: r } = this, i = this.getSlides(), a = this.getSlides({ excludeClones: !1 });
 		if (!i.length) return;
-		this.activeSlide = r ? (e + i.length) % i.length : h(e, 0, i.length - n);
-		let o = this.localize.dir() === "rtl", s = a[h(e + (r ? n : 0) + (o ? n - 1 : 0), 0, a.length - 1)];
-		this.scrollToSlide(s, p() ? "auto" : t);
+		let o = r ? (e + i.length) % i.length : h(e, 0, i.length - n);
+		this.activeSlide = o;
+		let s = this.localize.dir() === "rtl", c = a[h(e + (r ? n : 0) + (s ? n - 1 : 0), 0, a.length - 1)];
+		this.scrollToSlide(c, p() ? "auto" : t);
 	}
 	scrollToSlide(e, t = "smooth") {
 		this.pendingSlideChange = !0, window.requestAnimationFrame(() => {

package/chunks/chunk.js

@@ -1,5 +1,5 @@
 //#region \0rolldown/runtime.js
-var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescriptor, r = Object.getOwnPropertyNames, i = Object.getPrototypeOf, a = Object.prototype.hasOwnProperty, o = (e, t) => () => (t || e((t = { exports: {} }).exports, t), t.exports), s = (e, n) => {
+var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescriptor, r = Object.getOwnPropertyNames, i = Object.getPrototypeOf, a = Object.prototype.hasOwnProperty, o = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), s = (e, n) => {
 	let r = {};
 	for (var i in e) t(r, i, {
 		get: e[i],

package/chunks/decorate.js

@@ -94,7 +94,7 @@ function u(e) {
 	} });
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.124.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

@@ -2998,8 +2998,8 @@ var Je = r`
 	}
 	updated(e) {
 		if (super.updated(e), e.has("value")) {
-			let e = parseFloat(getComputedStyle(this.indicator).getPropertyValue("r")), t = 2 * Math.PI * e;
-			this.indicatorOffset = `${t - this.value / 100 * t}px`;
+			let e = parseFloat(getComputedStyle(this.indicator).getPropertyValue("r")), t = 2 * Math.PI * e, n = t - this.value / 100 * t;
+			this.indicatorOffset = `${n}px`;
 		}
 	}
 	render() {
@@ -6877,8 +6877,8 @@ var Vt = class e {
 			"rgb",
 			"hsl",
 			"hsv"
-		];
-		this.format = e[(e.indexOf(this.format) + 1) % e.length], this.setColor(this.value), this.emit("sl-change"), this.emit("sl-input");
+		], t = (e.indexOf(this.format) + 1) % e.length;
+		this.format = e[t], this.setColor(this.value), this.emit("sl-change"), this.emit("sl-input");
 	}
 	handleAlphaDrag(e) {
 		let t = this.shadowRoot.querySelector(".color-picker__slider.color-picker__alpha"), n = t.querySelector(".color-picker__slider-handle"), { width: r } = t.getBoundingClientRect(), i = this.value, a = this.value;

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

@@ -216,23 +216,30 @@ var t = e`
   /* Deaktivert */
   .button--disabled {
     cursor: not-allowed;
-    opacity: 0.38;
   }
 
   .button--primary.button--disabled {
     --_button-background: var(--color-interactive-background-primary-disabled);
+    --_button-color: var(--color-interactive-foreground-primary-disabled);
   }
 
   .button--secondary.button--disabled {
     --_button-background: var(--color-interactive-background-secondary-disabled);
+    --_button-color: var(--color-interactive-foreground-secondary-disabled);
   }
 
   .button--tertiary.button--disabled {
     --_button-border-color: var(--color-interactive-border-secondary-disabled);
+    --_button-color: var(--color-interactive-foreground-secondary-disabled);
+  }
+
+  .button--ghost.button--disabled {
+    --_button-color: var(--color-interactive-foreground-secondary-disabled);
   }
 
   .button--danger.button--disabled {
     --_button-background: var(--color-interactive-background-danger-disabled);
+    --_button-color: var(--color-interactive-foreground-danger-disabled);
   }
 
   /* Lastende */

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

@@ -120,7 +120,9 @@ var d = class extends n {
 	}
 	checkOverflow() {
 		let e = this.shadowRoot?.querySelector(".tab-group__nav");
-		e && (this.isOverflow = e.scrollWidth > e.clientWidth, this.updateScrollState());
+		if (!e) return;
+		let t = e.scrollWidth > e.clientWidth;
+		this.isOverflow = t, this.updateScrollState();
 	}
 	updateScrollState() {
 		let e = this.shadowRoot?.querySelector(".tab-group__nav");

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

@@ -40,6 +40,8 @@ export default class NveTextarea extends LitElement implements INveComponent {
     label: string;
     /** Hjelpetekst under textarea */
     helpText: string;
+    /** Hint - tekst under inndatafelt */
+    hint: string;
     /** Om textarea er deaktivert */
     disabled: boolean;
     /** Om textarea er skrivebeskyttet */
@@ -57,7 +59,7 @@ export default class NveTextarea extends LitElement implements INveComponent {
     /** Kontrollerer om og hvordan tekstinnput automatisk blir gjort stor som det blir skrevet inn av brukeren. */
     autocapitalize: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
     /** Indikerer om nettleserens autokorrekturfunksjon er på eller av. */
-    autocorrect: "on" | "off";
+    autocorrect: 'on' | 'off';
     /** Indikerer om nettleserens autokorrekturfunksjon er på eller av. */
     tooltip?: string;
     /**

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

@@ -12,7 +12,7 @@ var f = class extends n {
 		this.styles = [d];
 	}
 	constructor() {
-		super(), this.name = "", this.value = "", this.title = "", this.filled = !1, this.label = "", this.helpText = "", this.disabled = !1, this.readonly = !1, this.placeholder = "", this.required = !1, this.requiredLabel = "*Obligatorisk", this.autocapitalize = "off", this.autocorrect = "off", this.testId = "", this.showErrorMessage = !1, this.touched = !1, this.resizeObserver = null;
+		super(), this.name = "", this.value = "", this.title = "", this.filled = !1, this.label = "", this.helpText = "", this.hint = "", this.disabled = !1, this.readonly = !1, this.placeholder = "", this.required = !1, this.requiredLabel = "*Obligatorisk", this.autocapitalize = "off", this.autocorrect = "off", this.testId = "", this.showErrorMessage = !1, this.touched = !1, this.resizeObserver = null;
 	}
 	firstUpdated() {
 		if (this.requiredLabel && this.style.setProperty("--textarea-required-content", `"${this.requiredLabel}"`), this.required) {
@@ -73,6 +73,10 @@ var f = class extends n {
                 size="small"
                 tooltip=${l(this.tooltip)}
               ></nve-label>` : e}
+        ${this.helpText ? t` <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 part="base" class="textarea__base">
           <textarea
             part="textarea"
@@ -106,11 +110,9 @@ var f = class extends n {
                 ${this.showErrorMessage ? t`<nve-icon class="textarea__icon--error" name="error"></nve-icon>` : null}
               </div>` : e}
         </div>
-        <div part="help-text-container" class="textarea__help-text__container">
-          <!-- Ikke vis hjelpe tekst mens feil -->
-          ${!this.showErrorMessage && this.helpText ? t`<span class="textarea__help-text" aria-hidden=${this.helpText ? "false" : "true"}
-                >${this.helpText}</span
-              >` : e}
+        <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}
         </div>
       </div>
@@ -120,7 +122,7 @@ var f = class extends n {
 s([i()], f.prototype, "name", void 0), s([i()], f.prototype, "value", void 0), s([i()], f.prototype, "errorMessage", void 0), s([i()], f.prototype, "title", void 0), s([i({
 	type: Boolean,
 	reflect: !0
-})], f.prototype, "filled", void 0), s([i()], f.prototype, "label", void 0), s([i()], f.prototype, "helpText", void 0), s([i({
+})], f.prototype, "filled", void 0), s([i()], f.prototype, "label", void 0), s([i()], f.prototype, "helpText", void 0), s([i()], f.prototype, "hint", void 0), s([i({
 	type: Boolean,
 	reflect: !0
 })], f.prototype, "disabled", void 0), s([i({

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

@@ -94,6 +94,11 @@ var t = e`
     color: var(--color-feedback-background-emphasized-error);
   }
 
+  .textarea__hint {
+    font: var(--typography-label-x-small-light);
+    color: var(--color-neutrals-foreground-primary);
+  }
+
   .textarea__icon__container {
     position: relative; /** trengs for å posisjonere ikonen */
   }

package/css/nve.css

@@ -294,34 +294,42 @@
   --color-interactive-background-primary-enabled: var(--color-shades-grey-950);
   --color-interactive-background-primary-hover: var(--color-shades-grey-600);
   --color-interactive-background-primary-pressed: var(--color-shades-grey-500);
-  --color-interactive-background-primary-disabled: var(--color-shades-grey-950);
+  --color-interactive-background-primary-disabled: var(--color-shades-grey-300);
   --color-interactive-background-secondary-enabled: var(--color-shades-grey-150);
   --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-150);
-  --color-interactive-background-tertiary-hover: var(--color-shades-grey-100);
-  --color-interactive-background-tertiary-pressed: var(--color-shades-grey-150);
+  --color-interactive-background-secondary-disabled: var(--color-shades-grey-100);
+  --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);
-  --color-interactive-background-danger-disabled: var(--color-shades-functional-red-700);
+  --color-interactive-background-danger-disabled: var(--color-shades-functional-red-150);
   --color-interactive-foreground-primary-enabled: var(--color-shades-grey-000);
   --color-interactive-foreground-primary-hover: var(--color-shades-grey-000);
-  --color-interactive-foreground-primary-disabled: var(--color-shades-grey-000);
+  --color-interactive-foreground-primary-disabled: var(--color-shades-grey-100);
   --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-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-grey-000);
+  --color-interactive-foreground-danger-disabled: var(--color-shades-functional-red-000);
   --color-interactive-foreground-link-enabled: var(--color-shades-functional-blue-700);
   --color-interactive-foreground-link-hover: var(--color-shades-functional-blue-950);
   --color-interactive-foreground-link-visited: var(--color-shades-grey-600);
   --color-interactive-border-primary-enabled: var(--color-shades-grey-999);
   --color-interactive-border-primary-hover: var(--color-shades-functional-neutralgrey-600-050);
-  --color-interactive-border-primary-disabled: var(--color-shades-grey-999);
+  --color-interactive-border-primary-disabled: var(--color-shades-grey-300);
   --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-500);
+  --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

@@ -294,34 +294,42 @@
   --color-interactive-background-primary-enabled: var(--color-shades-grey-000);
   --color-interactive-background-primary-hover: var(--color-shades-grey-150);
   --color-interactive-background-primary-pressed: var(--color-shades-grey-200);
-  --color-interactive-background-primary-disabled: var(--color-shades-grey-000);
+  --color-interactive-background-primary-disabled: var(--color-shades-grey-700);
   --color-interactive-background-secondary-enabled: var(--color-shades-grey-700);
   --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-700);
-  --color-interactive-background-tertiary-hover: var(--color-shades-grey-700);
-  --color-interactive-background-tertiary-pressed: var(--color-shades-grey-600);
+  --color-interactive-background-secondary-disabled: var(--color-shades-grey-800);
+  --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);
-  --color-interactive-background-danger-disabled: var(--color-shades-functional-red-500);
+  --color-interactive-background-danger-disabled: var(--color-shades-functional-red-900);
   --color-interactive-foreground-primary-enabled: var(--color-shades-grey-950);
   --color-interactive-foreground-primary-hover: var(--color-shades-grey-950);
-  --color-interactive-foreground-primary-disabled: var(--color-shades-grey-950);
+  --color-interactive-foreground-primary-disabled: var(--color-shades-grey-600);
   --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-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-grey-000);
+  --color-interactive-foreground-danger-disabled: var(--color-shades-functional-red-800);
   --color-interactive-foreground-link-enabled: var(--color-shades-functional-blue-400);
   --color-interactive-foreground-link-hover: var(--color-shades-functional-blue-200);
   --color-interactive-foreground-link-visited: var(--color-shades-grey-200);
   --color-interactive-border-primary-enabled: var(--color-shades-grey-000);
   --color-interactive-border-primary-hover: var(--color-shades-functional-neutralgrey-100-050);
-  --color-interactive-border-primary-disabled: var(--color-shades-grey-000);
+  --color-interactive-border-primary-disabled: var(--color-shades-grey-700);
   --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-600);
+  --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

@@ -294,34 +294,42 @@
   --color-interactive-background-primary-enabled: var(--color-shades-grey-950);
   --color-interactive-background-primary-hover: var(--color-shades-grey-600);
   --color-interactive-background-primary-pressed: var(--color-shades-grey-500);
-  --color-interactive-background-primary-disabled: var(--color-shades-grey-950);
+  --color-interactive-background-primary-disabled: var(--color-shades-grey-300);
   --color-interactive-background-secondary-enabled: var(--color-shades-grey-150);
   --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-150);
-  --color-interactive-background-tertiary-hover: var(--color-shades-grey-100);
-  --color-interactive-background-tertiary-pressed: var(--color-shades-grey-150);
+  --color-interactive-background-secondary-disabled: var(--color-shades-grey-100);
+  --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);
-  --color-interactive-background-danger-disabled: var(--color-shades-functional-red-700);
+  --color-interactive-background-danger-disabled: var(--color-shades-functional-red-150);
   --color-interactive-foreground-primary-enabled: var(--color-shades-grey-000);
   --color-interactive-foreground-primary-hover: var(--color-shades-grey-000);
-  --color-interactive-foreground-primary-disabled: var(--color-shades-grey-000);
+  --color-interactive-foreground-primary-disabled: var(--color-shades-grey-100);
   --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-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-grey-000);
+  --color-interactive-foreground-danger-disabled: var(--color-shades-functional-red-000);
   --color-interactive-foreground-link-enabled: var(--color-shades-functional-blue-700);
   --color-interactive-foreground-link-hover: var(--color-shades-functional-blue-950);
   --color-interactive-foreground-link-visited: var(--color-shades-grey-600);
   --color-interactive-border-primary-enabled: var(--color-shades-grey-999);
   --color-interactive-border-primary-hover: var(--color-shades-functional-neutralgrey-600-050);
-  --color-interactive-border-primary-disabled: var(--color-shades-grey-999);
+  --color-interactive-border-primary-disabled: var(--color-shades-grey-300);
   --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-500);
+  --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

@@ -294,34 +294,42 @@
   --color-interactive-background-primary-enabled: var(--color-shades-grey-000);
   --color-interactive-background-primary-hover: var(--color-shades-grey-150);
   --color-interactive-background-primary-pressed: var(--color-shades-grey-200);
-  --color-interactive-background-primary-disabled: var(--color-shades-grey-000);
+  --color-interactive-background-primary-disabled: var(--color-shades-grey-700);
   --color-interactive-background-secondary-enabled: var(--color-shades-grey-700);
   --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-700);
-  --color-interactive-background-tertiary-hover: var(--color-shades-grey-700);
-  --color-interactive-background-tertiary-pressed: var(--color-shades-grey-600);
+  --color-interactive-background-secondary-disabled: var(--color-shades-grey-800);
+  --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);
-  --color-interactive-background-danger-disabled: var(--color-shades-functional-red-500);
+  --color-interactive-background-danger-disabled: var(--color-shades-functional-red-900);
   --color-interactive-foreground-primary-enabled: var(--color-shades-grey-950);
   --color-interactive-foreground-primary-hover: var(--color-shades-grey-950);
-  --color-interactive-foreground-primary-disabled: var(--color-shades-grey-950);
+  --color-interactive-foreground-primary-disabled: var(--color-shades-grey-600);
   --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-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-grey-000);
+  --color-interactive-foreground-danger-disabled: var(--color-shades-functional-red-800);
   --color-interactive-foreground-link-enabled: var(--color-shades-functional-blue-400);
   --color-interactive-foreground-link-hover: var(--color-shades-functional-blue-200);
   --color-interactive-foreground-link-visited: var(--color-shades-grey-200);
   --color-interactive-border-primary-enabled: var(--color-shades-grey-000);
   --color-interactive-border-primary-hover: var(--color-shades-functional-neutralgrey-100-050);
-  --color-interactive-border-primary-disabled: var(--color-shades-grey-000);
+  --color-interactive-border-primary-disabled: var(--color-shades-grey-700);
   --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-600);
+  --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);