@equinor/eds-core-react 2.3.5 → 2.3.6-beta.0

package/build/index.css

@@ -2,15 +2,27 @@
 @layer eds-components;
 /* EDS 2.0 Next Components - CSS */
 /* Define layer order - eds-components has lowest priority for easy user overrides */
+/*
+ * Font loading:
+ * Next components use two font families:
+ *   - "Inter" for UI text (buttons, inputs, labels, etc.)
+ *   - "Equinor" for headings
+ *
+ * Load both fonts via the EDS variable font stylesheet:
+ *   <link rel="stylesheet" href="https://cdn.eds.equinor.com/font/eds-uprights-vf.css" />
+ *
+ * Note: The older "equinor-font.css" only includes the Equinor font.
+ * If you only load that, UI components will fall back to a generic sans-serif.
+ */
 :root,[data-color-scheme=light]{color-scheme:light}
 [data-color-scheme=dark]{color-scheme:dark}
-:root{--eds-color-bg-floating:light-dark(#fff,#202223);--eds-color-bg-backdrop:light-dark(#aeaeae,#738696);--eds-color-bg-input:light-dark(#f5f5f5,#0b0b0b);--eds-color-border-focus:light-dark(#6fb6e9,#2d8bc5);--eds-color-text-link:light-dark(#0070a9,#5abbfb);--eds-color-accent-1:light-dark(#eaf8fa,#0a0b0b);--eds-color-accent-2:light-dark(#f6ffff,#1e2323);--eds-color-accent-3:light-dark(#cfe7e9,#3c6266);--eds-color-accent-4:light-dark(#bbdbdf,#3e7378);--eds-color-accent-5:light-dark(#a2cdd2,#41878e);--eds-color-accent-6:light-dark(#bbdbdf,#3c6266);--eds-color-accent-7:light-dark(#7cbac1,#439199);--eds-color-accent-8:light-dark(#21767e,#6ec0c9);--eds-color-accent-9:light-dark(#206f77,#8cd2da);--eds-color-accent-10:light-dark(#205c62,#ace3e9);--eds-color-accent-11:light-dark(#20565c,#c7f1f6);--eds-color-accent-12:light-dark(#1f6369,#bcebf1);--eds-color-accent-13:light-dark(#141f20,#e6ffff);--eds-color-accent-14:light-dark(#cae4e7,#2c3839);--eds-color-accent-15:light-dark(#fff,#030303);--eds-color-neutral-1:light-dark(#f5f5f5,#0b0b0b);--eds-color-neutral-2:light-dark(#fff,#202223);--eds-color-neutral-3:light-dark(#e1e1e1,#525c65);--eds-color-neutral-4:light-dark(#d4d4d4,#5d6b76);--eds-color-neutral-5:light-dark(#c4c4c4,#6b7d8b);--eds-color-neutral-6:light-dark(#d4d4d4,#525c65);--eds-color-neutral-7:light-dark(#aeaeae,#738696);--eds-color-neutral-8:light-dark(#696969,#9fb4c6);--eds-color-neutral-9:light-dark(#636363,#b4c7d7);--eds-color-neutral-10:light-dark(#525252,#cadae7);--eds-color-neutral-11:light-dark(#4d4d4d,#deeaf4);--eds-color-neutral-12:light-dark(#585858,#d6e3ee);--eds-color-neutral-13:light-dark(#1d1d1d,#f5fdff);--eds-color-neutral-14:light-dark(#dedede,#333639);--eds-color-neutral-15:light-dark(#fff,#030303);--eds-color-info-1:light-dark(#e7f8ff,#0a0b0c);--eds-color-info-2:light-dark(#f4ffff,#1d2226);--eds-color-info-3:light-dark(#cae6fa,#33607e);--eds-color-info-4:light-dark(#b5daf5,#316f98);--eds-color-info-5:light-dark(#99cbf0,#2e82b7);--eds-color-info-6:light-dark(#b5daf5,#33607e);--eds-color-info-7:light-dark(#6fb6e9,#2d8bc5);--eds-color-info-8:light-dark(#0070a9,#5abbfb);--eds-color-info-9:light-dark(#006aa0,#7dceff);--eds-color-info-10:light-dark(#085883,#a2e0ff);--eds-color-info-11:light-dark(#0e5279,#c4eeff);--eds-color-info-12:light-dark(#015e8d,#b7e8ff);--eds-color-info-13:light-dark(#121e27,#ecffff);--eds-color-info-14:light-dark(#c5e3f9,#2a3741);--eds-color-info-15:light-dark(#fff,#030304);--eds-color-success-1:light-dark(#eafbe8,#0a0c0a);--eds-color-success-2:light-dark(#f6fff5,#1e231e);--eds-color-success-3:light-dark(#cfeacc,#3c673a);--eds-color-success-4:light-dark(#bbe0b8,#3e793c);--eds-color-success-5:light-dark(#a2d49e,#418e3e);--eds-color-success-6:light-dark(#bbe0b8,#3c673a);--eds-color-success-7:light-dark(#7cc278,#439941);--eds-color-success-8:light-dark(#227e22,#6eca6a);--eds-color-success-9:light-dark(#207720,#8cdb87);--eds-color-success-10:light-dark(#20621f,#aceba8);--eds-color-success-11:light-dark(#215c1f,#c7f7c3);--eds-color-success-12:light-dark(#20691f,#bcf2b8);--eds-color-success-13:light-dark(#142114,#e6ffe3);--eds-color-success-14:light-dark(#cae8c7,#2c392b);--eds-color-success-15:light-dark(#fff,#030303);--eds-color-warning-1:light-dark(#fff1e2,#0c0b0a);--eds-color-warning-2:light-dark(#fffcf0,#27201b);--eds-color-warning-3:light-dark(#fbdac1,#7e4e25);--eds-color-warning-4:light-dark(#f6caaa,#97571b);--eds-color-warning-5:light-dark(#f0b689,#b46201);--eds-color-warning-6:light-dark(#f6caaa,#7e4e25);--eds-color-warning-7:light-dark(#e89959,#c36800);--eds-color-warning-8:light-dark(#a34e00,#f99539);--eds-color-warning-9:light-dark(#9b4900,#ffad63);--eds-color-warning-10:light-dark(#813e00,#ffc791);--eds-color-warning-11:light-dark(#773a00,#ffddb9);--eds-color-warning-12:light-dark(#8a4100,#ffd4aa);--eds-color-warning-13:light-dark(#27190e,#fff7e6);--eds-color-warning-14:light-dark(#fad6bc,#413226);--eds-color-warning-15:light-dark(#fff,#040303);--eds-color-danger-1:light-dark(#ffecea,#0d0a0a);--eds-color-danger-2:light-dark(#fff9f8,#2a1e1e);--eds-color-danger-3:light-dark(#ffd0ce,#923a3c);--eds-color-danger-4:light-dark(#ffbcba,#b03940);--eds-color-danger-5:light-dark(#ffa3a1,#d43745);--eds-color-danger-6:light-dark(#ffbcba,#923a3c);--eds-color-danger-7:light-dark(#ff7a7d,#e53748);--eds-color-danger-8:light-dark(#c6002d,#ff8082);--eds-color-danger-9:light-dark(#bc002a,#ffa3a1);--eds-color-danger-10:light-dark(#9a1026,#ffc1bf);--eds-color-danger-11:light-dark(#8e1525,#ffd9d7);--eds-color-danger-12:light-dark(#a50827,#ffd0ce);--eds-color-danger-13:light-dark(#2e1414,#fff5f4);--eds-color-danger-14:light-dark(#ffcbc9,#492d2c);--eds-color-danger-15:light-dark(#fff,#040303);--eds-color-bg-neutral-canvas:var(--eds-color-neutral-1);--eds-color-bg-neutral-surface:var(--eds-color-neutral-2);--eds-color-bg-neutral-fill-muted-default:var(--eds-color-neutral-3);--eds-color-bg-neutral-fill-muted-hover:var(--eds-color-neutral-4);--eds-color-bg-neutral-fill-muted-active:var(--eds-color-neutral-5);--eds-color-bg-neutral-fill-emphasis-default:var(--eds-color-neutral-9);--eds-color-bg-neutral-fill-emphasis-hover:var(--eds-color-neutral-10);--eds-color-bg-neutral-fill-emphasis-active:var(--eds-color-neutral-11);--eds-color-bg-accent-canvas:var(--eds-color-accent-1);--eds-color-bg-accent-surface:var(--eds-color-accent-2);--eds-color-bg-accent-fill-muted-default:var(--eds-color-accent-3);--eds-color-bg-accent-fill-muted-hover:var(--eds-color-accent-4);--eds-color-bg-accent-fill-muted-active:var(--eds-color-accent-5);--eds-color-bg-accent-fill-emphasis-default:var(--eds-color-accent-9);--eds-color-bg-accent-fill-emphasis-hover:var(--eds-color-accent-10);--eds-color-bg-accent-fill-emphasis-active:var(--eds-color-accent-11);--eds-color-bg-success-canvas:var(--eds-color-success-1);--eds-color-bg-success-surface:var(--eds-color-success-2);--eds-color-bg-success-fill-muted-default:var(--eds-color-success-3);--eds-color-bg-success-fill-muted-hover:var(--eds-color-success-4);--eds-color-bg-success-fill-muted-active:var(--eds-color-success-5);--eds-color-bg-success-fill-emphasis-default:var(--eds-color-success-9);--eds-color-bg-success-fill-emphasis-hover:var(--eds-color-success-10);--eds-color-bg-success-fill-emphasis-active:var(--eds-color-success-11);--eds-color-bg-info-canvas:var(--eds-color-info-1);--eds-color-bg-info-surface:var(--eds-color-info-2);--eds-color-bg-info-fill-muted-default:var(--eds-color-info-3);--eds-color-bg-info-fill-muted-hover:var(--eds-color-info-4);--eds-color-bg-info-fill-muted-active:var(--eds-color-info-5);--eds-color-bg-info-fill-emphasis-default:var(--eds-color-info-9);--eds-color-bg-info-fill-emphasis-hover:var(--eds-color-info-10);--eds-color-bg-info-fill-emphasis-active:var(--eds-color-info-11);--eds-color-bg-warning-canvas:var(--eds-color-warning-1);--eds-color-bg-warning-surface:var(--eds-color-warning-2);--eds-color-bg-warning-fill-muted-default:var(--eds-color-warning-3);--eds-color-bg-warning-fill-muted-hover:var(--eds-color-warning-4);--eds-color-bg-warning-fill-muted-active:var(--eds-color-warning-5);--eds-color-bg-warning-fill-emphasis-default:var(--eds-color-warning-9);--eds-color-bg-warning-fill-emphasis-hover:var(--eds-color-warning-10);--eds-color-bg-warning-fill-emphasis-active:var(--eds-color-warning-11);--eds-color-bg-danger-canvas:var(--eds-color-danger-1);--eds-color-bg-danger-surface:var(--eds-color-danger-2);--eds-color-bg-danger-fill-muted-default:var(--eds-color-danger-3);--eds-color-bg-danger-fill-muted-hover:var(--eds-color-danger-4);--eds-color-bg-danger-fill-muted-active:var(--eds-color-danger-5);--eds-color-bg-danger-fill-emphasis-default:var(--eds-color-danger-9);--eds-color-bg-danger-fill-emphasis-hover:var(--eds-color-danger-10);--eds-color-bg-danger-fill-emphasis-active:var(--eds-color-danger-11);--eds-color-border-neutral-subtle:var(--eds-color-neutral-6);--eds-color-border-neutral-medium:var(--eds-color-neutral-7);--eds-color-border-neutral-strong:var(--eds-color-neutral-8);--eds-color-border-accent-subtle:var(--eds-color-accent-6);--eds-color-border-accent-medium:var(--eds-color-accent-7);--eds-color-border-accent-strong:var(--eds-color-accent-8);--eds-color-border-success-subtle:var(--eds-color-success-6);--eds-color-border-success-medium:var(--eds-color-success-7);--eds-color-border-success-strong:var(--eds-color-success-8);--eds-color-border-info-subtle:var(--eds-color-info-6);--eds-color-border-info-medium:var(--eds-color-info-7);--eds-color-border-info-strong:var(--eds-color-info-8);--eds-color-border-warning-subtle:var(--eds-color-warning-6);--eds-color-border-warning-medium:var(--eds-color-warning-7);--eds-color-border-warning-strong:var(--eds-color-warning-8);--eds-color-border-danger-subtle:var(--eds-color-danger-6);--eds-color-border-danger-medium:var(--eds-color-danger-7);--eds-color-border-danger-strong:var(--eds-color-danger-8);--eds-color-text-neutral-subtle:var(--eds-color-neutral-12);--eds-color-text-neutral-strong:var(--eds-color-neutral-13);--eds-color-text-neutral-subtle-on-emphasis:var(--eds-color-neutral-14);--eds-color-text-neutral-strong-on-emphasis:var(--eds-color-neutral-15);--eds-color-text-accent-subtle:var(--eds-color-accent-12);--eds-color-text-accent-strong:var(--eds-color-accent-13);--eds-color-text-accent-subtle-on-emphasis:var(--eds-color-accent-14);--eds-color-text-accent-strong-on-emphasis:var(--eds-color-accent-15);--eds-color-text-success-subtle:var(--eds-color-success-12);--eds-color-text-success-strong:var(--eds-color-success-13);--eds-color-text-success-subtle-on-emphasis:var(--eds-color-success-14);--eds-color-text-success-strong-on-emphasis:var(--eds-color-success-15);--eds-color-text-info-subtle:var(--eds-color-info-12);--eds-color-text-info-strong:var(--eds-color-info-13);--eds-color-text-info-subtle-on-emphasis:var(--eds-color-info-14);--eds-color-text-info-strong-on-emphasis:var(--eds-color-info-15);--eds-color-text-warning-subtle:var(--eds-color-warning-12);--eds-color-text-warning-strong:var(--eds-color-warning-13);--eds-color-text-warning-subtle-on-emphasis:var(--eds-color-warning-14);--eds-color-text-warning-strong-on-emphasis:var(--eds-color-warning-15);--eds-color-text-danger-subtle:var(--eds-color-danger-12);--eds-color-text-danger-strong:var(--eds-color-danger-13);--eds-color-text-danger-subtle-on-emphasis:var(--eds-color-danger-14);--eds-color-text-danger-strong-on-emphasis:var(--eds-color-danger-15)}
-:root,[data-color-appearance=neutral]{--eds-color-bg-fill-muted-default:var(--eds-color-neutral-3);--eds-color-bg-fill-muted-hover:var(--eds-color-neutral-4);--eds-color-bg-fill-muted-active:var(--eds-color-neutral-5);--eds-color-bg-fill-emphasis-default:var(--eds-color-neutral-9);--eds-color-bg-fill-emphasis-hover:var(--eds-color-neutral-10);--eds-color-bg-fill-emphasis-active:var(--eds-color-neutral-11);--eds-color-bg-canvas:var(--eds-color-neutral-1);--eds-color-bg-surface:var(--eds-color-neutral-2);--eds-color-border-subtle:var(--eds-color-neutral-6);--eds-color-border-medium:var(--eds-color-neutral-7);--eds-color-border-strong:var(--eds-color-neutral-8);--eds-color-text-subtle:var(--eds-color-neutral-12);--eds-color-text-strong:var(--eds-color-neutral-13);--eds-color-text-subtle-on-emphasis:var(--eds-color-neutral-14);--eds-color-text-strong-on-emphasis:var(--eds-color-neutral-15)}
-[data-color-appearance=accent]{--eds-color-bg-fill-muted-default:var(--eds-color-accent-3);--eds-color-bg-fill-muted-hover:var(--eds-color-accent-4);--eds-color-bg-fill-muted-active:var(--eds-color-accent-5);--eds-color-bg-fill-emphasis-default:var(--eds-color-accent-9);--eds-color-bg-fill-emphasis-hover:var(--eds-color-accent-10);--eds-color-bg-fill-emphasis-active:var(--eds-color-accent-11);--eds-color-bg-canvas:var(--eds-color-accent-1);--eds-color-bg-surface:var(--eds-color-accent-2);--eds-color-border-subtle:var(--eds-color-accent-6);--eds-color-border-medium:var(--eds-color-accent-7);--eds-color-border-strong:var(--eds-color-accent-8);--eds-color-text-subtle:var(--eds-color-accent-12);--eds-color-text-strong:var(--eds-color-accent-13);--eds-color-text-subtle-on-emphasis:var(--eds-color-accent-14);--eds-color-text-strong-on-emphasis:var(--eds-color-accent-15)}
-[data-color-appearance=danger]{--eds-color-bg-fill-muted-default:var(--eds-color-danger-3);--eds-color-bg-fill-muted-hover:var(--eds-color-danger-4);--eds-color-bg-fill-muted-active:var(--eds-color-danger-5);--eds-color-bg-fill-emphasis-default:var(--eds-color-danger-9);--eds-color-bg-fill-emphasis-hover:var(--eds-color-danger-10);--eds-color-bg-fill-emphasis-active:var(--eds-color-danger-11);--eds-color-bg-canvas:var(--eds-color-danger-1);--eds-color-bg-surface:var(--eds-color-danger-2);--eds-color-border-subtle:var(--eds-color-danger-6);--eds-color-border-medium:var(--eds-color-danger-7);--eds-color-border-strong:var(--eds-color-danger-8);--eds-color-text-subtle:var(--eds-color-danger-12);--eds-color-text-strong:var(--eds-color-danger-13);--eds-color-text-subtle-on-emphasis:var(--eds-color-danger-14);--eds-color-text-strong-on-emphasis:var(--eds-color-danger-15)}
-[data-color-appearance=info]{--eds-color-bg-fill-muted-default:var(--eds-color-info-3);--eds-color-bg-fill-muted-hover:var(--eds-color-info-4);--eds-color-bg-fill-muted-active:var(--eds-color-info-5);--eds-color-bg-fill-emphasis-default:var(--eds-color-info-9);--eds-color-bg-fill-emphasis-hover:var(--eds-color-info-10);--eds-color-bg-fill-emphasis-active:var(--eds-color-info-11);--eds-color-bg-canvas:var(--eds-color-info-1);--eds-color-bg-surface:var(--eds-color-info-2);--eds-color-border-subtle:var(--eds-color-info-6);--eds-color-border-medium:var(--eds-color-info-7);--eds-color-border-strong:var(--eds-color-info-8);--eds-color-text-subtle:var(--eds-color-info-12);--eds-color-text-strong:var(--eds-color-info-13);--eds-color-text-subtle-on-emphasis:var(--eds-color-info-14);--eds-color-text-strong-on-emphasis:var(--eds-color-info-15)}
-[data-color-appearance=success]{--eds-color-bg-fill-muted-default:var(--eds-color-success-3);--eds-color-bg-fill-muted-hover:var(--eds-color-success-4);--eds-color-bg-fill-muted-active:var(--eds-color-success-5);--eds-color-bg-fill-emphasis-default:var(--eds-color-success-9);--eds-color-bg-fill-emphasis-hover:var(--eds-color-success-10);--eds-color-bg-fill-emphasis-active:var(--eds-color-success-11);--eds-color-bg-canvas:var(--eds-color-success-1);--eds-color-bg-surface:var(--eds-color-success-2);--eds-color-border-subtle:var(--eds-color-success-6);--eds-color-border-medium:var(--eds-color-success-7);--eds-color-border-strong:var(--eds-color-success-8);--eds-color-text-subtle:var(--eds-color-success-12);--eds-color-text-strong:var(--eds-color-success-13);--eds-color-text-subtle-on-emphasis:var(--eds-color-success-14);--eds-color-text-strong-on-emphasis:var(--eds-color-success-15)}
-[data-color-appearance=warning]{--eds-color-bg-fill-muted-default:var(--eds-color-warning-3);--eds-color-bg-fill-muted-hover:var(--eds-color-warning-4);--eds-color-bg-fill-muted-active:var(--eds-color-warning-5);--eds-color-bg-fill-emphasis-default:var(--eds-color-warning-9);--eds-color-bg-fill-emphasis-hover:var(--eds-color-warning-10);--eds-color-bg-fill-emphasis-active:var(--eds-color-warning-11);--eds-color-bg-canvas:var(--eds-color-warning-1);--eds-color-bg-surface:var(--eds-color-warning-2);--eds-color-border-subtle:var(--eds-color-warning-6);--eds-color-border-medium:var(--eds-color-warning-7);--eds-color-border-strong:var(--eds-color-warning-8);--eds-color-text-subtle:var(--eds-color-warning-12);--eds-color-text-strong:var(--eds-color-warning-13);--eds-color-text-subtle-on-emphasis:var(--eds-color-warning-14);--eds-color-text-strong-on-emphasis:var(--eds-color-warning-15)}
+:root{--eds-color-bg-floating:light-dark(#fff,#202223);--eds-color-bg-backdrop:light-dark(#aeaeae,#738696);--eds-color-bg-input:light-dark(#f5f5f5,#0b0b0b);--eds-color-border-focus:light-dark(#6fb6e9,#2d8bc5);--eds-color-text-link:light-dark(#0070a9,#5abbfb);--eds-color-bg-disabled:light-dark(#e1e1e1,#525c65);--eds-color-border-disabled:light-dark(#aeaeae,#738696);--eds-color-text-disabled:light-dark(#aeaeae,#738696);--eds-color-accent-1:light-dark(#eaf8fa,#0a0b0b);--eds-color-accent-2:light-dark(#f6ffff,#1e2323);--eds-color-accent-3:light-dark(#cfe7e9,#3c6266);--eds-color-accent-4:light-dark(#bbdbdf,#3e7378);--eds-color-accent-5:light-dark(#a2cdd2,#41878e);--eds-color-accent-6:light-dark(#bbdbdf,#3c6266);--eds-color-accent-7:light-dark(#7cbac1,#439199);--eds-color-accent-8:light-dark(#21767e,#6ec0c9);--eds-color-accent-9:light-dark(#206f77,#8cd2da);--eds-color-accent-10:light-dark(#205c62,#ace3e9);--eds-color-accent-11:light-dark(#20565c,#c7f1f6);--eds-color-accent-12:light-dark(#1f6369,#bcebf1);--eds-color-accent-13:light-dark(#141f20,#e6ffff);--eds-color-accent-14:light-dark(#cae4e7,#2c3839);--eds-color-accent-15:light-dark(#fff,#030303);--eds-color-neutral-1:light-dark(#f5f5f5,#0b0b0b);--eds-color-neutral-2:light-dark(#fff,#202223);--eds-color-neutral-3:light-dark(#e1e1e1,#525c65);--eds-color-neutral-4:light-dark(#d4d4d4,#5d6b76);--eds-color-neutral-5:light-dark(#c4c4c4,#6b7d8b);--eds-color-neutral-6:light-dark(#d4d4d4,#525c65);--eds-color-neutral-7:light-dark(#aeaeae,#738696);--eds-color-neutral-8:light-dark(#696969,#9fb4c6);--eds-color-neutral-9:light-dark(#636363,#b4c7d7);--eds-color-neutral-10:light-dark(#525252,#cadae7);--eds-color-neutral-11:light-dark(#4d4d4d,#deeaf4);--eds-color-neutral-12:light-dark(#585858,#d6e3ee);--eds-color-neutral-13:light-dark(#1d1d1d,#f5fdff);--eds-color-neutral-14:light-dark(#dedede,#333639);--eds-color-neutral-15:light-dark(#fff,#030303);--eds-color-info-1:light-dark(#e7f8ff,#0a0b0c);--eds-color-info-2:light-dark(#f4ffff,#1d2226);--eds-color-info-3:light-dark(#cae6fa,#33607e);--eds-color-info-4:light-dark(#b5daf5,#316f98);--eds-color-info-5:light-dark(#99cbf0,#2e82b7);--eds-color-info-6:light-dark(#b5daf5,#33607e);--eds-color-info-7:light-dark(#6fb6e9,#2d8bc5);--eds-color-info-8:light-dark(#0070a9,#5abbfb);--eds-color-info-9:light-dark(#006aa0,#7dceff);--eds-color-info-10:light-dark(#085883,#a2e0ff);--eds-color-info-11:light-dark(#0e5279,#c4eeff);--eds-color-info-12:light-dark(#015e8d,#b7e8ff);--eds-color-info-13:light-dark(#121e27,#ecffff);--eds-color-info-14:light-dark(#c5e3f9,#2a3741);--eds-color-info-15:light-dark(#fff,#030304);--eds-color-success-1:light-dark(#eafbe8,#0a0c0a);--eds-color-success-2:light-dark(#f6fff5,#1e231e);--eds-color-success-3:light-dark(#cfeacc,#3c673a);--eds-color-success-4:light-dark(#bbe0b8,#3e793c);--eds-color-success-5:light-dark(#a2d49e,#418e3e);--eds-color-success-6:light-dark(#bbe0b8,#3c673a);--eds-color-success-7:light-dark(#7cc278,#439941);--eds-color-success-8:light-dark(#227e22,#6eca6a);--eds-color-success-9:light-dark(#207720,#8cdb87);--eds-color-success-10:light-dark(#20621f,#aceba8);--eds-color-success-11:light-dark(#215c1f,#c7f7c3);--eds-color-success-12:light-dark(#20691f,#bcf2b8);--eds-color-success-13:light-dark(#142114,#e6ffe3);--eds-color-success-14:light-dark(#cae8c7,#2c392b);--eds-color-success-15:light-dark(#fff,#030303);--eds-color-warning-1:light-dark(#fff1e2,#0c0b0a);--eds-color-warning-2:light-dark(#fffcf0,#27201b);--eds-color-warning-3:light-dark(#fbdac1,#7e4e25);--eds-color-warning-4:light-dark(#f6caaa,#97571b);--eds-color-warning-5:light-dark(#f0b689,#b46201);--eds-color-warning-6:light-dark(#f6caaa,#7e4e25);--eds-color-warning-7:light-dark(#e89959,#c36800);--eds-color-warning-8:light-dark(#a34e00,#f99539);--eds-color-warning-9:light-dark(#9b4900,#ffad63);--eds-color-warning-10:light-dark(#813e00,#ffc791);--eds-color-warning-11:light-dark(#773a00,#ffddb9);--eds-color-warning-12:light-dark(#8a4100,#ffd4aa);--eds-color-warning-13:light-dark(#27190e,#fff7e6);--eds-color-warning-14:light-dark(#fad6bc,#413226);--eds-color-warning-15:light-dark(#fff,#040303);--eds-color-danger-1:light-dark(#ffecea,#0d0a0a);--eds-color-danger-2:light-dark(#fff9f8,#2a1e1e);--eds-color-danger-3:light-dark(#ffd0ce,#923a3c);--eds-color-danger-4:light-dark(#ffbcba,#b03940);--eds-color-danger-5:light-dark(#ffa3a1,#d43745);--eds-color-danger-6:light-dark(#ffbcba,#923a3c);--eds-color-danger-7:light-dark(#ff7a7d,#e53748);--eds-color-danger-8:light-dark(#c6002d,#ff8082);--eds-color-danger-9:light-dark(#bc002a,#ffa3a1);--eds-color-danger-10:light-dark(#9a1026,#ffc1bf);--eds-color-danger-11:light-dark(#8e1525,#ffd9d7);--eds-color-danger-12:light-dark(#a50827,#ffd0ce);--eds-color-danger-13:light-dark(#2e1414,#fff5f4);--eds-color-danger-14:light-dark(#ffcbc9,#492d2c);--eds-color-danger-15:light-dark(#fff,#040303);--eds-color-bg-neutral-canvas:var(--eds-color-neutral-1);--eds-color-bg-neutral-surface:var(--eds-color-neutral-2);--eds-color-bg-neutral-fill-muted-default:var(--eds-color-neutral-3);--eds-color-bg-neutral-fill-muted-hover:var(--eds-color-neutral-4);--eds-color-bg-neutral-fill-muted-active:var(--eds-color-neutral-5);--eds-color-bg-neutral-fill-emphasis-default:var(--eds-color-neutral-9);--eds-color-bg-neutral-fill-emphasis-hover:var(--eds-color-neutral-10);--eds-color-bg-neutral-fill-emphasis-active:var(--eds-color-neutral-11);--eds-color-bg-accent-canvas:var(--eds-color-accent-1);--eds-color-bg-accent-surface:var(--eds-color-accent-2);--eds-color-bg-accent-fill-muted-default:var(--eds-color-accent-3);--eds-color-bg-accent-fill-muted-hover:var(--eds-color-accent-4);--eds-color-bg-accent-fill-muted-active:var(--eds-color-accent-5);--eds-color-bg-accent-fill-emphasis-default:var(--eds-color-accent-9);--eds-color-bg-accent-fill-emphasis-hover:var(--eds-color-accent-10);--eds-color-bg-accent-fill-emphasis-active:var(--eds-color-accent-11);--eds-color-bg-success-canvas:var(--eds-color-success-1);--eds-color-bg-success-surface:var(--eds-color-success-2);--eds-color-bg-success-fill-muted-default:var(--eds-color-success-3);--eds-color-bg-success-fill-muted-hover:var(--eds-color-success-4);--eds-color-bg-success-fill-muted-active:var(--eds-color-success-5);--eds-color-bg-success-fill-emphasis-default:var(--eds-color-success-9);--eds-color-bg-success-fill-emphasis-hover:var(--eds-color-success-10);--eds-color-bg-success-fill-emphasis-active:var(--eds-color-success-11);--eds-color-bg-info-canvas:var(--eds-color-info-1);--eds-color-bg-info-surface:var(--eds-color-info-2);--eds-color-bg-info-fill-muted-default:var(--eds-color-info-3);--eds-color-bg-info-fill-muted-hover:var(--eds-color-info-4);--eds-color-bg-info-fill-muted-active:var(--eds-color-info-5);--eds-color-bg-info-fill-emphasis-default:var(--eds-color-info-9);--eds-color-bg-info-fill-emphasis-hover:var(--eds-color-info-10);--eds-color-bg-info-fill-emphasis-active:var(--eds-color-info-11);--eds-color-bg-warning-canvas:var(--eds-color-warning-1);--eds-color-bg-warning-surface:var(--eds-color-warning-2);--eds-color-bg-warning-fill-muted-default:var(--eds-color-warning-3);--eds-color-bg-warning-fill-muted-hover:var(--eds-color-warning-4);--eds-color-bg-warning-fill-muted-active:var(--eds-color-warning-5);--eds-color-bg-warning-fill-emphasis-default:var(--eds-color-warning-9);--eds-color-bg-warning-fill-emphasis-hover:var(--eds-color-warning-10);--eds-color-bg-warning-fill-emphasis-active:var(--eds-color-warning-11);--eds-color-bg-danger-canvas:var(--eds-color-danger-1);--eds-color-bg-danger-surface:var(--eds-color-danger-2);--eds-color-bg-danger-fill-muted-default:var(--eds-color-danger-3);--eds-color-bg-danger-fill-muted-hover:var(--eds-color-danger-4);--eds-color-bg-danger-fill-muted-active:var(--eds-color-danger-5);--eds-color-bg-danger-fill-emphasis-default:var(--eds-color-danger-9);--eds-color-bg-danger-fill-emphasis-hover:var(--eds-color-danger-10);--eds-color-bg-danger-fill-emphasis-active:var(--eds-color-danger-11);--eds-color-border-neutral-subtle:var(--eds-color-neutral-6);--eds-color-border-neutral-medium:var(--eds-color-neutral-7);--eds-color-border-neutral-strong:var(--eds-color-neutral-8);--eds-color-border-accent-subtle:var(--eds-color-accent-6);--eds-color-border-accent-medium:var(--eds-color-accent-7);--eds-color-border-accent-strong:var(--eds-color-accent-8);--eds-color-border-success-subtle:var(--eds-color-success-6);--eds-color-border-success-medium:var(--eds-color-success-7);--eds-color-border-success-strong:var(--eds-color-success-8);--eds-color-border-info-subtle:var(--eds-color-info-6);--eds-color-border-info-medium:var(--eds-color-info-7);--eds-color-border-info-strong:var(--eds-color-info-8);--eds-color-border-warning-subtle:var(--eds-color-warning-6);--eds-color-border-warning-medium:var(--eds-color-warning-7);--eds-color-border-warning-strong:var(--eds-color-warning-8);--eds-color-border-danger-subtle:var(--eds-color-danger-6);--eds-color-border-danger-medium:var(--eds-color-danger-7);--eds-color-border-danger-strong:var(--eds-color-danger-8);--eds-color-text-neutral-subtle:var(--eds-color-neutral-12);--eds-color-text-neutral-strong:var(--eds-color-neutral-13);--eds-color-text-neutral-subtle-on-emphasis:var(--eds-color-neutral-14);--eds-color-text-neutral-strong-on-emphasis:var(--eds-color-neutral-15);--eds-color-text-accent-subtle:var(--eds-color-accent-12);--eds-color-text-accent-strong:var(--eds-color-accent-13);--eds-color-text-accent-subtle-on-emphasis:var(--eds-color-accent-14);--eds-color-text-accent-strong-on-emphasis:var(--eds-color-accent-15);--eds-color-text-success-subtle:var(--eds-color-success-12);--eds-color-text-success-strong:var(--eds-color-success-13);--eds-color-text-success-subtle-on-emphasis:var(--eds-color-success-14);--eds-color-text-success-strong-on-emphasis:var(--eds-color-success-15);--eds-color-text-info-subtle:var(--eds-color-info-12);--eds-color-text-info-strong:var(--eds-color-info-13);--eds-color-text-info-subtle-on-emphasis:var(--eds-color-info-14);--eds-color-text-info-strong-on-emphasis:var(--eds-color-info-15);--eds-color-text-warning-subtle:var(--eds-color-warning-12);--eds-color-text-warning-strong:var(--eds-color-warning-13);--eds-color-text-warning-subtle-on-emphasis:var(--eds-color-warning-14);--eds-color-text-warning-strong-on-emphasis:var(--eds-color-warning-15);--eds-color-text-danger-subtle:var(--eds-color-danger-12);--eds-color-text-danger-strong:var(--eds-color-danger-13);--eds-color-text-danger-subtle-on-emphasis:var(--eds-color-danger-14);--eds-color-text-danger-strong-on-emphasis:var(--eds-color-danger-15)}
+:root,[data-color-appearance=neutral]{--eds-color-bg-fill-muted-default:var(--eds-color-neutral-3);--eds-color-bg-fill-muted-hover:var(--eds-color-neutral-4);--eds-color-bg-fill-muted-active:var(--eds-color-neutral-5);--eds-color-bg-fill-muted-disabled:var(--eds-color-neutral-3);--eds-color-bg-fill-emphasis-default:var(--eds-color-neutral-9);--eds-color-bg-fill-emphasis-hover:var(--eds-color-neutral-10);--eds-color-bg-fill-emphasis-active:var(--eds-color-neutral-11);--eds-color-bg-fill-emphasis-disabled:var(--eds-color-neutral-3);--eds-color-bg-canvas:var(--eds-color-neutral-1);--eds-color-bg-surface:var(--eds-color-neutral-2);--eds-color-border-subtle:var(--eds-color-neutral-6);--eds-color-border-medium:var(--eds-color-neutral-7);--eds-color-border-strong:var(--eds-color-neutral-8);--eds-color-border-disabled:var(--eds-color-neutral-7);--eds-color-text-subtle:var(--eds-color-neutral-12);--eds-color-text-strong:var(--eds-color-neutral-13);--eds-color-text-disabled:var(--eds-color-neutral-7);--eds-color-text-subtle-on-emphasis:var(--eds-color-neutral-14);--eds-color-text-strong-on-emphasis:var(--eds-color-neutral-15)}
+[data-color-appearance=accent]{--eds-color-bg-fill-muted-default:var(--eds-color-accent-3);--eds-color-bg-fill-muted-hover:var(--eds-color-accent-4);--eds-color-bg-fill-muted-active:var(--eds-color-accent-5);--eds-color-bg-fill-muted-disabled:var(--eds-color-accent-3);--eds-color-bg-fill-emphasis-default:var(--eds-color-accent-9);--eds-color-bg-fill-emphasis-hover:var(--eds-color-accent-10);--eds-color-bg-fill-emphasis-active:var(--eds-color-accent-11);--eds-color-bg-fill-emphasis-disabled:var(--eds-color-accent-3);--eds-color-bg-canvas:var(--eds-color-accent-1);--eds-color-bg-surface:var(--eds-color-accent-2);--eds-color-border-subtle:var(--eds-color-accent-6);--eds-color-border-medium:var(--eds-color-accent-7);--eds-color-border-strong:var(--eds-color-accent-8);--eds-color-border-disabled:var(--eds-color-accent-7);--eds-color-text-subtle:var(--eds-color-accent-12);--eds-color-text-strong:var(--eds-color-accent-13);--eds-color-text-disabled:var(--eds-color-accent-7);--eds-color-text-subtle-on-emphasis:var(--eds-color-accent-14);--eds-color-text-strong-on-emphasis:var(--eds-color-accent-15)}
+[data-color-appearance=danger]{--eds-color-bg-fill-muted-default:var(--eds-color-danger-3);--eds-color-bg-fill-muted-hover:var(--eds-color-danger-4);--eds-color-bg-fill-muted-active:var(--eds-color-danger-5);--eds-color-bg-fill-muted-disabled:var(--eds-color-danger-3);--eds-color-bg-fill-emphasis-default:var(--eds-color-danger-9);--eds-color-bg-fill-emphasis-hover:var(--eds-color-danger-10);--eds-color-bg-fill-emphasis-active:var(--eds-color-danger-11);--eds-color-bg-fill-emphasis-disabled:var(--eds-color-danger-3);--eds-color-bg-canvas:var(--eds-color-danger-1);--eds-color-bg-surface:var(--eds-color-danger-2);--eds-color-border-subtle:var(--eds-color-danger-6);--eds-color-border-medium:var(--eds-color-danger-7);--eds-color-border-strong:var(--eds-color-danger-8);--eds-color-border-disabled:var(--eds-color-danger-7);--eds-color-text-subtle:var(--eds-color-danger-12);--eds-color-text-strong:var(--eds-color-danger-13);--eds-color-text-disabled:var(--eds-color-danger-7);--eds-color-text-subtle-on-emphasis:var(--eds-color-danger-14);--eds-color-text-strong-on-emphasis:var(--eds-color-danger-15)}
+[data-color-appearance=info]{--eds-color-bg-fill-muted-default:var(--eds-color-info-3);--eds-color-bg-fill-muted-hover:var(--eds-color-info-4);--eds-color-bg-fill-muted-active:var(--eds-color-info-5);--eds-color-bg-fill-muted-disabled:var(--eds-color-info-3);--eds-color-bg-fill-emphasis-default:var(--eds-color-info-9);--eds-color-bg-fill-emphasis-hover:var(--eds-color-info-10);--eds-color-bg-fill-emphasis-active:var(--eds-color-info-11);--eds-color-bg-fill-emphasis-disabled:var(--eds-color-info-3);--eds-color-bg-canvas:var(--eds-color-info-1);--eds-color-bg-surface:var(--eds-color-info-2);--eds-color-border-subtle:var(--eds-color-info-6);--eds-color-border-medium:var(--eds-color-info-7);--eds-color-border-strong:var(--eds-color-info-8);--eds-color-border-disabled:var(--eds-color-info-7);--eds-color-text-subtle:var(--eds-color-info-12);--eds-color-text-strong:var(--eds-color-info-13);--eds-color-text-disabled:var(--eds-color-info-7);--eds-color-text-subtle-on-emphasis:var(--eds-color-info-14);--eds-color-text-strong-on-emphasis:var(--eds-color-info-15)}
+[data-color-appearance=success]{--eds-color-bg-fill-muted-default:var(--eds-color-success-3);--eds-color-bg-fill-muted-hover:var(--eds-color-success-4);--eds-color-bg-fill-muted-active:var(--eds-color-success-5);--eds-color-bg-fill-muted-disabled:var(--eds-color-success-3);--eds-color-bg-fill-emphasis-default:var(--eds-color-success-9);--eds-color-bg-fill-emphasis-hover:var(--eds-color-success-10);--eds-color-bg-fill-emphasis-active:var(--eds-color-success-11);--eds-color-bg-fill-emphasis-disabled:var(--eds-color-success-3);--eds-color-bg-canvas:var(--eds-color-success-1);--eds-color-bg-surface:var(--eds-color-success-2);--eds-color-border-subtle:var(--eds-color-success-6);--eds-color-border-medium:var(--eds-color-success-7);--eds-color-border-strong:var(--eds-color-success-8);--eds-color-border-disabled:var(--eds-color-success-7);--eds-color-text-subtle:var(--eds-color-success-12);--eds-color-text-strong:var(--eds-color-success-13);--eds-color-text-disabled:var(--eds-color-success-7);--eds-color-text-subtle-on-emphasis:var(--eds-color-success-14);--eds-color-text-strong-on-emphasis:var(--eds-color-success-15)}
+[data-color-appearance=warning]{--eds-color-bg-fill-muted-default:var(--eds-color-warning-3);--eds-color-bg-fill-muted-hover:var(--eds-color-warning-4);--eds-color-bg-fill-muted-active:var(--eds-color-warning-5);--eds-color-bg-fill-muted-disabled:var(--eds-color-warning-3);--eds-color-bg-fill-emphasis-default:var(--eds-color-warning-9);--eds-color-bg-fill-emphasis-hover:var(--eds-color-warning-10);--eds-color-bg-fill-emphasis-active:var(--eds-color-warning-11);--eds-color-bg-fill-emphasis-disabled:var(--eds-color-warning-3);--eds-color-bg-canvas:var(--eds-color-warning-1);--eds-color-bg-surface:var(--eds-color-warning-2);--eds-color-border-subtle:var(--eds-color-warning-6);--eds-color-border-medium:var(--eds-color-warning-7);--eds-color-border-strong:var(--eds-color-warning-8);--eds-color-border-disabled:var(--eds-color-warning-7);--eds-color-text-subtle:var(--eds-color-warning-12);--eds-color-text-strong:var(--eds-color-warning-13);--eds-color-text-disabled:var(--eds-color-warning-7);--eds-color-text-subtle-on-emphasis:var(--eds-color-warning-14);--eds-color-text-strong-on-emphasis:var(--eds-color-warning-15)}
 :root,[data-density=spacious]{--eds-sizing-icon-xs:1rem;--eds-sizing-icon-sm:1.125rem;--eds-sizing-icon-md:1.25rem;--eds-sizing-icon-lg:1.5rem;--eds-sizing-icon-xl:1.75rem;--eds-sizing-icon-2xl:2rem;--eds-sizing-icon-3xl:2.313rem;--eds-sizing-icon-4xl:2.625rem;--eds-sizing-icon-5xl:3rem;--eds-sizing-icon-6xl:3.5rem;--eds-sizing-selectable-xs:1.25rem;--eds-sizing-selectable-sm:1.5rem;--eds-sizing-selectable-md:2.25rem;--eds-sizing-selectable-lg:2.75rem;--eds-sizing-selectable-xl:3.25rem;--eds-sizing-selectable-2xl:3.75rem;--eds-sizing-stroke-thin:.063rem;--eds-sizing-stroke-thick:.125rem;--eds-sizing-stroke-none:0rem;--eds-spacing-icon-xs-gap-horizontal:.406rem;--eds-spacing-icon-xs-gap-vertical:.406rem;--eds-spacing-icon-sm-gap-horizontal:.469rem;--eds-spacing-icon-sm-gap-vertical:.469rem;--eds-spacing-icon-md-gap-horizontal:.531rem;--eds-spacing-icon-md-gap-vertical:.531rem;--eds-spacing-icon-lg-gap-horizontal:.625rem;--eds-spacing-icon-lg-gap-vertical:.625rem;--eds-spacing-icon-xl-gap-horizontal:.719rem;--eds-spacing-icon-xl-gap-vertical:.719rem;--eds-spacing-icon-2xl-gap-horizontal:.813rem;--eds-spacing-icon-2xl-gap-vertical:.813rem;--eds-spacing-icon-3xl-gap-horizontal:.938rem;--eds-spacing-icon-3xl-gap-vertical:.938rem;--eds-spacing-icon-4xl-gap-horizontal:1.094rem;--eds-spacing-icon-4xl-gap-vertical:1.094rem;--eds-spacing-icon-5xl-gap-horizontal:1.25rem;--eds-spacing-icon-5xl-gap-vertical:1.25rem;--eds-spacing-icon-6xl-gap-horizontal:1.438rem;--eds-spacing-icon-6xl-gap-vertical:1.438rem;--eds-spacing-border-radius-rounded:.25rem;--eds-spacing-border-radius-pill:62.5rem;--eds-spacing-border-radius-none:0rem;--eds-spacing-inset-xs-horizontal:.5rem;--eds-spacing-inset-xs-vertical-squished:.375rem;--eds-spacing-inset-xs-vertical-squared:.5rem;--eds-spacing-inset-xs-vertical-stretched:.75rem;--eds-spacing-inset-sm-horizontal:.75rem;--eds-spacing-inset-sm-vertical-squished:.5rem;--eds-spacing-inset-sm-vertical-squared:.75rem;--eds-spacing-inset-sm-vertical-stretched:1rem;--eds-spacing-inset-md-horizontal:1rem;--eds-spacing-inset-md-vertical-squished:.75rem;--eds-spacing-inset-md-vertical-squared:1rem;--eds-spacing-inset-md-vertical-stretched:1.25rem;--eds-spacing-inset-lg-horizontal:1.25rem;--eds-spacing-inset-lg-vertical-squished:1rem;--eds-spacing-inset-lg-vertical-squared:1.25rem;--eds-spacing-inset-lg-vertical-stretched:1.5rem;--eds-spacing-inset-xl-horizontal:1.5rem;--eds-spacing-inset-xl-vertical-squished:1.25rem;--eds-spacing-inset-xl-vertical-squared:1.5rem;--eds-spacing-inset-xl-vertical-stretched:1.75rem;--eds-spacing-horizontal-4xs:.125rem;--eds-spacing-horizontal-3xs:.25rem;--eds-spacing-horizontal-2xs:.375rem;--eds-spacing-horizontal-xs:.5rem;--eds-spacing-horizontal-sm:.75rem;--eds-spacing-horizontal-md:1rem;--eds-spacing-horizontal-lg:1.25rem;--eds-spacing-horizontal-xl:1.5rem;--eds-spacing-horizontal-2xl:1.75rem;--eds-spacing-horizontal-3xl:2rem;--eds-spacing-vertical-4xs:.125rem;--eds-spacing-vertical-3xs:.25rem;--eds-spacing-vertical-2xs:.375rem;--eds-spacing-vertical-xs:.5rem;--eds-spacing-vertical-sm:.75rem;--eds-spacing-vertical-md:1rem;--eds-spacing-vertical-lg:1.25rem;--eds-spacing-vertical-xl:1.5rem;--eds-spacing-vertical-2xl:1.75rem;--eds-spacing-vertical-3xl:2rem;--eds-typography-ui-body-xs-font-size:.656rem;--eds-typography-ui-body-xs-tracking-tight:-1.15px;--eds-typography-ui-body-xs-tracking-normal:0px;--eds-typography-ui-body-xs-tracking-wide:1.15px;--eds-typography-ui-body-xs-font-weight-lighter:300;--eds-typography-ui-body-xs-font-weight-normal:400;--eds-typography-ui-body-xs-font-weight-bolder:500;--eds-typography-ui-body-xs-line-height-default:1rem;--eds-typography-ui-body-xs-line-height-squished:.75rem;--eds-typography-ui-body-sm-font-size:.75rem;--eds-typography-ui-body-sm-tracking-tight:-1.32px;--eds-typography-ui-body-sm-tracking-normal:0px;--eds-typography-ui-body-sm-tracking-wide:1.32px;--eds-typography-ui-body-sm-font-weight-lighter:300;--eds-typography-ui-body-sm-font-weight-normal:400;--eds-typography-ui-body-sm-font-weight-bolder:500;--eds-typography-ui-body-sm-line-height-default:1rem;--eds-typography-ui-body-sm-line-height-squished:.75rem;--eds-typography-ui-body-font-family:"Inter";--eds-typography-ui-body-md-font-size:.875rem;--eds-typography-ui-body-md-tracking-tight:-1.54px;--eds-typography-ui-body-md-tracking-normal:0px;--eds-typography-ui-body-md-tracking-wide:1.54px;--eds-typography-ui-body-md-font-weight-lighter:300;--eds-typography-ui-body-md-font-weight-normal:400;--eds-typography-ui-body-md-font-weight-bolder:500;--eds-typography-ui-body-md-line-height-default:1.25rem;--eds-typography-ui-body-md-line-height-squished:1rem;--eds-typography-ui-body-lg-font-size:1rem;--eds-typography-ui-body-lg-tracking-tight:-1.76px;--eds-typography-ui-body-lg-tracking-normal:0px;--eds-typography-ui-body-lg-tracking-wide:1.76px;--eds-typography-ui-body-lg-font-weight-lighter:300;--eds-typography-ui-body-lg-font-weight-normal:400;--eds-typography-ui-body-lg-font-weight-bolder:500;--eds-typography-ui-body-lg-line-height-default:1.5rem;--eds-typography-ui-body-lg-line-height-squished:1.25rem;--eds-typography-ui-body-xl-font-size:1.156rem;--eds-typography-ui-body-xl-tracking-tight:-1.76px;--eds-typography-ui-body-xl-tracking-normal:0px;--eds-typography-ui-body-xl-tracking-wide:2.035px;--eds-typography-ui-body-xl-font-weight-lighter:300;--eds-typography-ui-body-xl-font-weight-normal:400;--eds-typography-ui-body-xl-font-weight-bolder:500;--eds-typography-ui-body-xl-line-height-default:1.5rem;--eds-typography-ui-body-xl-line-height-squished:1.25rem;--eds-typography-ui-body-2xl-font-size:1.313rem;--eds-typography-ui-body-2xl-tracking-tight:-2.31px;--eds-typography-ui-body-2xl-tracking-normal:0px;--eds-typography-ui-body-2xl-tracking-wide:2.31px;--eds-typography-ui-body-2xl-font-weight-lighter:300;--eds-typography-ui-body-2xl-font-weight-normal:400;--eds-typography-ui-body-2xl-font-weight-bolder:500;--eds-typography-ui-body-2xl-line-height-default:1.75rem;--eds-typography-ui-body-2xl-line-height-squished:1.5rem;--eds-typography-ui-body-3xl-font-size:1.531rem;--eds-typography-ui-body-3xl-tracking-tight:-2.695px;--eds-typography-ui-body-3xl-tracking-normal:0px;--eds-typography-ui-body-3xl-tracking-wide:2.695px;--eds-typography-ui-body-3xl-font-weight-lighter:300;--eds-typography-ui-body-3xl-font-weight-normal:400;--eds-typography-ui-body-3xl-font-weight-bolder:500;--eds-typography-ui-body-3xl-line-height-default:2rem;--eds-typography-ui-body-3xl-line-height-squished:1.75rem;--eds-typography-ui-body-4xl-font-size:1.75rem;--eds-typography-ui-body-4xl-tracking-tight:-3.08px;--eds-typography-ui-body-4xl-tracking-normal:0px;--eds-typography-ui-body-4xl-tracking-wide:3.08px;--eds-typography-ui-body-4xl-font-weight-lighter:300;--eds-typography-ui-body-4xl-font-weight-normal:400;--eds-typography-ui-body-4xl-font-weight-bolder:500;--eds-typography-ui-body-4xl-line-height-default:2rem;--eds-typography-ui-body-4xl-line-height-squished:1.75rem;--eds-typography-ui-body-5xl-font-size:2rem;--eds-typography-ui-body-5xl-tracking-tight:-3.52px;--eds-typography-ui-body-5xl-tracking-normal:0px;--eds-typography-ui-body-5xl-tracking-wide:3.52px;--eds-typography-ui-body-5xl-font-weight-lighter:300;--eds-typography-ui-body-5xl-font-weight-normal:400;--eds-typography-ui-body-5xl-font-weight-bolder:500;--eds-typography-ui-body-5xl-line-height-default:2.25rem;--eds-typography-ui-body-5xl-line-height-squished:2rem;--eds-typography-ui-body-6xl-font-size:2.313rem;--eds-typography-ui-body-6xl-tracking-tight:-4.07px;--eds-typography-ui-body-6xl-tracking-normal:0px;--eds-typography-ui-body-6xl-tracking-wide:4.07px;--eds-typography-ui-body-6xl-font-weight-lighter:300;--eds-typography-ui-body-6xl-font-weight-normal:400;--eds-typography-ui-body-6xl-font-weight-bolder:500;--eds-typography-ui-body-6xl-line-height-default:2.5rem;--eds-typography-ui-body-6xl-line-height-squished:2.25rem;--eds-typography-header-font-family:"Equinor";--eds-typography-header-xs-font-size:.75rem;--eds-typography-header-xs-tracking-tight:-1.15px;--eds-typography-header-xs-tracking-normal:0px;--eds-typography-header-xs-tracking-wide:1.15px;--eds-typography-header-xs-font-weight-lighter:300;--eds-typography-header-xs-font-weight-normal:400;--eds-typography-header-xs-font-weight-bolder:500;--eds-typography-header-xs-line-height-default:1rem;--eds-typography-header-xs-line-height-squished:.75rem;--eds-typography-header-sm-font-size:.875rem;--eds-typography-header-sm-tracking-tight:-1.32px;--eds-typography-header-sm-tracking-normal:0px;--eds-typography-header-sm-tracking-wide:1.32px;--eds-typography-header-sm-font-weight-lighter:300;--eds-typography-header-sm-font-weight-normal:400;--eds-typography-header-sm-font-weight-bolder:500;--eds-typography-header-sm-line-height-default:1rem;--eds-typography-header-sm-line-height-squished:.75rem;--eds-typography-header-md-font-size:1rem;--eds-typography-header-md-tracking-tight:-1.54px;--eds-typography-header-md-tracking-normal:0px;--eds-typography-header-md-tracking-wide:1.54px;--eds-typography-header-md-font-weight-lighter:300;--eds-typography-header-md-font-weight-normal:400;--eds-typography-header-md-font-weight-bolder:500;--eds-typography-header-md-line-height-default:1.25rem;--eds-typography-header-md-line-height-squished:1rem;--eds-typography-header-lg-font-size:1.125rem;--eds-typography-header-lg-tracking-tight:-1.76px;--eds-typography-header-lg-tracking-normal:0px;--eds-typography-header-lg-tracking-wide:1.76px;--eds-typography-header-lg-font-weight-lighter:300;--eds-typography-header-lg-font-weight-normal:400;--eds-typography-header-lg-font-weight-bolder:500;--eds-typography-header-lg-line-height-default:1.5rem;--eds-typography-header-lg-line-height-squished:1.25rem;--eds-typography-header-xl-font-size:1.313rem;--eds-typography-header-xl-tracking-tight:-1.76px;--eds-typography-header-xl-tracking-normal:0px;--eds-typography-header-xl-tracking-wide:2.035px;--eds-typography-header-xl-font-weight-lighter:300;--eds-typography-header-xl-font-weight-normal:400;--eds-typography-header-xl-font-weight-bolder:500;--eds-typography-header-xl-line-height-default:1.5rem;--eds-typography-header-xl-line-height-squished:1.25rem;--eds-typography-header-2xl-font-size:1.5rem;--eds-typography-header-2xl-tracking-tight:-2.31px;--eds-typography-header-2xl-tracking-normal:0px;--eds-typography-header-2xl-tracking-wide:2.31px;--eds-typography-header-2xl-font-weight-lighter:300;--eds-typography-header-2xl-font-weight-normal:400;--eds-typography-header-2xl-font-weight-bolder:500;--eds-typography-header-2xl-line-height-default:1.75rem;--eds-typography-header-2xl-line-height-squished:1.5rem;--eds-typography-header-3xl-font-size:1.719rem;--eds-typography-header-3xl-tracking-tight:-2.695px;--eds-typography-header-3xl-tracking-normal:0px;--eds-typography-header-3xl-tracking-wide:2.695px;--eds-typography-header-3xl-font-weight-lighter:300;--eds-typography-header-3xl-font-weight-normal:400;--eds-typography-header-3xl-font-weight-bolder:500;--eds-typography-header-3xl-line-height-default:2rem;--eds-typography-header-3xl-line-height-squished:1.75rem;--eds-typography-header-4xl-font-size:1.969rem;--eds-typography-header-4xl-tracking-tight:-3.08px;--eds-typography-header-4xl-tracking-normal:0px;--eds-typography-header-4xl-tracking-wide:3.08px;--eds-typography-header-4xl-font-weight-lighter:300;--eds-typography-header-4xl-font-weight-normal:400;--eds-typography-header-4xl-font-weight-bolder:500;--eds-typography-header-4xl-line-height-default:2rem;--eds-typography-header-4xl-line-height-squished:1.75rem;--eds-typography-header-5xl-font-size:2.281rem;--eds-typography-header-5xl-tracking-tight:-3.52px;--eds-typography-header-5xl-tracking-normal:0px;--eds-typography-header-5xl-tracking-wide:3.52px;--eds-typography-header-5xl-font-weight-lighter:300;--eds-typography-header-5xl-font-weight-normal:400;--eds-typography-header-5xl-font-weight-bolder:500;--eds-typography-header-5xl-line-height-default:2.25rem;--eds-typography-header-5xl-line-height-squished:2rem;--eds-typography-header-6xl-font-size:2.625rem;--eds-typography-header-6xl-tracking-tight:-4.07px;--eds-typography-header-6xl-tracking-normal:0px;--eds-typography-header-6xl-tracking-wide:4.07px;--eds-typography-header-6xl-font-weight-lighter:300;--eds-typography-header-6xl-font-weight-normal:400;--eds-typography-header-6xl-font-weight-bolder:500;--eds-typography-header-6xl-line-height-default:2.5rem;--eds-typography-header-6xl-line-height-squished:2.25rem}
 [data-density=comfortable]{--eds-sizing-icon-xs:.875rem;--eds-sizing-icon-sm:1rem;--eds-sizing-icon-md:1.125rem;--eds-sizing-icon-lg:1.25rem;--eds-sizing-icon-xl:1.5rem;--eds-sizing-icon-2xl:1.75rem;--eds-sizing-icon-3xl:2rem;--eds-sizing-icon-4xl:2.313rem;--eds-sizing-icon-5xl:2.625rem;--eds-sizing-icon-6xl:3rem;--eds-sizing-selectable-xs:1rem;--eds-sizing-selectable-sm:1.25rem;--eds-sizing-selectable-md:1.5rem;--eds-sizing-selectable-lg:2.25rem;--eds-sizing-selectable-xl:2.75rem;--eds-sizing-selectable-2xl:3.25rem;--eds-sizing-stroke-thin:.063rem;--eds-sizing-stroke-thick:.125rem;--eds-sizing-stroke-none:0rem;--eds-spacing-icon-xs-gap-horizontal:.344rem;--eds-spacing-icon-xs-gap-vertical:.344rem;--eds-spacing-icon-sm-gap-horizontal:.406rem;--eds-spacing-icon-sm-gap-vertical:.406rem;--eds-spacing-icon-md-gap-horizontal:.469rem;--eds-spacing-icon-md-gap-vertical:.469rem;--eds-spacing-icon-lg-gap-horizontal:.531rem;--eds-spacing-icon-lg-gap-vertical:.531rem;--eds-spacing-icon-xl-gap-horizontal:.625rem;--eds-spacing-icon-xl-gap-vertical:.625rem;--eds-spacing-icon-2xl-gap-horizontal:.719rem;--eds-spacing-icon-2xl-gap-vertical:.719rem;--eds-spacing-icon-3xl-gap-horizontal:.813rem;--eds-spacing-icon-3xl-gap-vertical:.813rem;--eds-spacing-icon-4xl-gap-horizontal:.938rem;--eds-spacing-icon-4xl-gap-vertical:.938rem;--eds-spacing-icon-5xl-gap-horizontal:1.094rem;--eds-spacing-icon-5xl-gap-vertical:1.094rem;--eds-spacing-icon-6xl-gap-horizontal:1.25rem;--eds-spacing-icon-6xl-gap-vertical:1.25rem;--eds-spacing-border-radius-rounded:.188rem;--eds-spacing-border-radius-pill:62.5rem;--eds-spacing-border-radius-none:0rem;--eds-spacing-inset-xs-horizontal:.375rem;--eds-spacing-inset-xs-vertical-squished:.25rem;--eds-spacing-inset-xs-vertical-squared:.375rem;--eds-spacing-inset-xs-vertical-stretched:.5rem;--eds-spacing-inset-sm-horizontal:.5rem;--eds-spacing-inset-sm-vertical-squished:.375rem;--eds-spacing-inset-sm-vertical-squared:.5rem;--eds-spacing-inset-sm-vertical-stretched:.75rem;--eds-spacing-inset-md-horizontal:.75rem;--eds-spacing-inset-md-vertical-squished:.5rem;--eds-spacing-inset-md-vertical-squared:.75rem;--eds-spacing-inset-md-vertical-stretched:1rem;--eds-spacing-inset-lg-horizontal:1rem;--eds-spacing-inset-lg-vertical-squished:.75rem;--eds-spacing-inset-lg-vertical-squared:1rem;--eds-spacing-inset-lg-vertical-stretched:1.25rem;--eds-spacing-inset-xl-horizontal:1.25rem;--eds-spacing-inset-xl-vertical-squished:1rem;--eds-spacing-inset-xl-vertical-squared:1.25rem;--eds-spacing-inset-xl-vertical-stretched:1.5rem;--eds-spacing-horizontal-4xs:.063rem;--eds-spacing-horizontal-3xs:.125rem;--eds-spacing-horizontal-2xs:.25rem;--eds-spacing-horizontal-xs:.375rem;--eds-spacing-horizontal-sm:.5rem;--eds-spacing-horizontal-md:.75rem;--eds-spacing-horizontal-lg:1rem;--eds-spacing-horizontal-xl:1.25rem;--eds-spacing-horizontal-2xl:1.5rem;--eds-spacing-horizontal-3xl:1.75rem;--eds-spacing-vertical-4xs:.063rem;--eds-spacing-vertical-3xs:.125rem;--eds-spacing-vertical-2xs:.25rem;--eds-spacing-vertical-xs:.375rem;--eds-spacing-vertical-sm:.5rem;--eds-spacing-vertical-md:.75rem;--eds-spacing-vertical-lg:1rem;--eds-spacing-vertical-xl:1.25rem;--eds-spacing-vertical-2xl:1.5rem;--eds-spacing-vertical-3xl:1.75rem;--eds-typography-ui-body-xs-font-size:.563rem;--eds-typography-ui-body-xs-tracking-tight:-.99px;--eds-typography-ui-body-xs-tracking-normal:0px;--eds-typography-ui-body-xs-tracking-wide:.99px;--eds-typography-ui-body-xs-font-weight-lighter:300;--eds-typography-ui-body-xs-font-weight-normal:400;--eds-typography-ui-body-xs-font-weight-bolder:500;--eds-typography-ui-body-xs-line-height-default:.75rem;--eds-typography-ui-body-xs-line-height-squished:.75rem;--eds-typography-ui-body-sm-font-size:.656rem;--eds-typography-ui-body-sm-tracking-tight:-1.15px;--eds-typography-ui-body-sm-tracking-normal:0px;--eds-typography-ui-body-sm-tracking-wide:1.15px;--eds-typography-ui-body-sm-font-weight-lighter:300;--eds-typography-ui-body-sm-font-weight-normal:400;--eds-typography-ui-body-sm-font-weight-bolder:500;--eds-typography-ui-body-sm-line-height-default:1rem;--eds-typography-ui-body-sm-line-height-squished:.75rem;--eds-typography-ui-body-font-family:"Inter";--eds-typography-ui-body-md-font-size:.75rem;--eds-typography-ui-body-md-tracking-tight:-1.32px;--eds-typography-ui-body-md-tracking-normal:0px;--eds-typography-ui-body-md-tracking-wide:1.32px;--eds-typography-ui-body-md-font-weight-lighter:300;--eds-typography-ui-body-md-font-weight-normal:400;--eds-typography-ui-body-md-font-weight-bolder:500;--eds-typography-ui-body-md-line-height-default:1rem;--eds-typography-ui-body-md-line-height-squished:.75rem;--eds-typography-ui-body-lg-font-size:.875rem;--eds-typography-ui-body-lg-tracking-tight:-1.54px;--eds-typography-ui-body-lg-tracking-normal:0px;--eds-typography-ui-body-lg-tracking-wide:1.54px;--eds-typography-ui-body-lg-font-weight-lighter:300;--eds-typography-ui-body-lg-font-weight-normal:400;--eds-typography-ui-body-lg-font-weight-bolder:500;--eds-typography-ui-body-lg-line-height-default:1.25rem;--eds-typography-ui-body-lg-line-height-squished:1rem;--eds-typography-ui-body-xl-font-size:1rem;--eds-typography-ui-body-xl-tracking-tight:-1.76px;--eds-typography-ui-body-xl-tracking-normal:0px;--eds-typography-ui-body-xl-tracking-wide:1.76px;--eds-typography-ui-body-xl-font-weight-lighter:300;--eds-typography-ui-body-xl-font-weight-normal:400;--eds-typography-ui-body-xl-font-weight-bolder:500;--eds-typography-ui-body-xl-line-height-default:1.5rem;--eds-typography-ui-body-xl-line-height-squished:1.25rem;--eds-typography-ui-body-2xl-font-size:1.156rem;--eds-typography-ui-body-2xl-tracking-tight:-1.76px;--eds-typography-ui-body-2xl-tracking-normal:0px;--eds-typography-ui-body-2xl-tracking-wide:2.035px;--eds-typography-ui-body-2xl-font-weight-lighter:300;--eds-typography-ui-body-2xl-font-weight-normal:400;--eds-typography-ui-body-2xl-font-weight-bolder:500;--eds-typography-ui-body-2xl-line-height-default:1.5rem;--eds-typography-ui-body-2xl-line-height-squished:1.25rem;--eds-typography-ui-body-3xl-font-size:1.313rem;--eds-typography-ui-body-3xl-tracking-tight:-2.31px;--eds-typography-ui-body-3xl-tracking-normal:0px;--eds-typography-ui-body-3xl-tracking-wide:2.31px;--eds-typography-ui-body-3xl-font-weight-lighter:300;--eds-typography-ui-body-3xl-font-weight-normal:400;--eds-typography-ui-body-3xl-font-weight-bolder:500;--eds-typography-ui-body-3xl-line-height-default:1.75rem;--eds-typography-ui-body-3xl-line-height-squished:1.5rem;--eds-typography-ui-body-4xl-font-size:1.531rem;--eds-typography-ui-body-4xl-tracking-tight:-2.695px;--eds-typography-ui-body-4xl-tracking-normal:0px;--eds-typography-ui-body-4xl-tracking-wide:2.695px;--eds-typography-ui-body-4xl-font-weight-lighter:300;--eds-typography-ui-body-4xl-font-weight-normal:400;--eds-typography-ui-body-4xl-font-weight-bolder:500;--eds-typography-ui-body-4xl-line-height-default:2rem;--eds-typography-ui-body-4xl-line-height-squished:1.75rem;--eds-typography-ui-body-5xl-font-size:1.75rem;--eds-typography-ui-body-5xl-tracking-tight:-3.08px;--eds-typography-ui-body-5xl-tracking-normal:0px;--eds-typography-ui-body-5xl-tracking-wide:3.08px;--eds-typography-ui-body-5xl-font-weight-lighter:300;--eds-typography-ui-body-5xl-font-weight-normal:400;--eds-typography-ui-body-5xl-font-weight-bolder:500;--eds-typography-ui-body-5xl-line-height-default:2rem;--eds-typography-ui-body-5xl-line-height-squished:1.75rem;--eds-typography-ui-body-6xl-font-size:2rem;--eds-typography-ui-body-6xl-tracking-tight:-3.52px;--eds-typography-ui-body-6xl-tracking-normal:0px;--eds-typography-ui-body-6xl-tracking-wide:3.52px;--eds-typography-ui-body-6xl-font-weight-lighter:300;--eds-typography-ui-body-6xl-font-weight-normal:0px;--eds-typography-ui-body-6xl-font-weight-bolder:500;--eds-typography-ui-body-6xl-line-height-default:2.25rem;--eds-typography-ui-body-6xl-line-height-squished:2rem;--eds-typography-header-font-family:"Equinor";--eds-typography-header-xs-font-size:.656rem;--eds-typography-header-xs-tracking-tight:-.99px;--eds-typography-header-xs-tracking-normal:0px;--eds-typography-header-xs-tracking-wide:.99px;--eds-typography-header-xs-font-weight-lighter:300;--eds-typography-header-xs-font-weight-normal:400;--eds-typography-header-xs-font-weight-bolder:500;--eds-typography-header-xs-line-height-default:.75rem;--eds-typography-header-xs-line-height-squished:.75rem;--eds-typography-header-sm-font-size:.75rem;--eds-typography-header-sm-tracking-tight:-1.15px;--eds-typography-header-sm-tracking-normal:0px;--eds-typography-header-sm-tracking-wide:1.15px;--eds-typography-header-sm-font-weight-lighter:300;--eds-typography-header-sm-font-weight-normal:400;--eds-typography-header-sm-font-weight-bolder:500;--eds-typography-header-sm-line-height-default:1rem;--eds-typography-header-sm-line-height-squished:.75rem;--eds-typography-header-md-font-size:.875rem;--eds-typography-header-md-tracking-tight:-1.32px;--eds-typography-header-md-tracking-normal:0px;--eds-typography-header-md-tracking-wide:1.32px;--eds-typography-header-md-font-weight-lighter:300;--eds-typography-header-md-font-weight-normal:400;--eds-typography-header-md-font-weight-bolder:500;--eds-typography-header-md-line-height-default:1rem;--eds-typography-header-md-line-height-squished:.75rem;--eds-typography-header-lg-font-size:1rem;--eds-typography-header-lg-tracking-tight:-1.54px;--eds-typography-header-lg-tracking-normal:0px;--eds-typography-header-lg-tracking-wide:1.54px;--eds-typography-header-lg-font-weight-lighter:300;--eds-typography-header-lg-font-weight-normal:400;--eds-typography-header-lg-font-weight-bolder:500;--eds-typography-header-lg-line-height-default:1.25rem;--eds-typography-header-lg-line-height-squished:1rem;--eds-typography-header-xl-font-size:1.125rem;--eds-typography-header-xl-tracking-tight:-1.76px;--eds-typography-header-xl-tracking-normal:0px;--eds-typography-header-xl-tracking-wide:1.76px;--eds-typography-header-xl-font-weight-lighter:300;--eds-typography-header-xl-font-weight-normal:400;--eds-typography-header-xl-font-weight-bolder:500;--eds-typography-header-xl-line-height-default:1.5rem;--eds-typography-header-xl-line-height-squished:1.25rem;--eds-typography-header-2xl-font-size:1.313rem;--eds-typography-header-2xl-tracking-tight:-1.76px;--eds-typography-header-2xl-tracking-normal:0px;--eds-typography-header-2xl-tracking-wide:2.035px;--eds-typography-header-2xl-font-weight-lighter:300;--eds-typography-header-2xl-font-weight-normal:400;--eds-typography-header-2xl-font-weight-bolder:500;--eds-typography-header-2xl-line-height-default:1.5rem;--eds-typography-header-2xl-line-height-squished:1.25rem;--eds-typography-header-3xl-font-size:1.5rem;--eds-typography-header-3xl-tracking-tight:-2.31px;--eds-typography-header-3xl-tracking-normal:0px;--eds-typography-header-3xl-tracking-wide:2.31px;--eds-typography-header-3xl-font-weight-lighter:300;--eds-typography-header-3xl-font-weight-normal:400;--eds-typography-header-3xl-font-weight-bolder:500;--eds-typography-header-3xl-line-height-default:1.75rem;--eds-typography-header-3xl-line-height-squished:1.5rem;--eds-typography-header-4xl-font-size:1.719rem;--eds-typography-header-4xl-tracking-tight:-2.695px;--eds-typography-header-4xl-tracking-normal:0px;--eds-typography-header-4xl-tracking-wide:2.695px;--eds-typography-header-4xl-font-weight-lighter:300;--eds-typography-header-4xl-font-weight-normal:400;--eds-typography-header-4xl-font-weight-bolder:500;--eds-typography-header-4xl-line-height-default:2rem;--eds-typography-header-4xl-line-height-squished:1.75rem;--eds-typography-header-5xl-font-size:1.969rem;--eds-typography-header-5xl-tracking-tight:-3.08px;--eds-typography-header-5xl-tracking-normal:0px;--eds-typography-header-5xl-tracking-wide:3.08px;--eds-typography-header-5xl-font-weight-lighter:300;--eds-typography-header-5xl-font-weight-normal:400;--eds-typography-header-5xl-font-weight-bolder:500;--eds-typography-header-5xl-line-height-default:2rem;--eds-typography-header-5xl-line-height-squished:1.75rem;--eds-typography-header-6xl-font-size:2.281rem;--eds-typography-header-6xl-tracking-tight:-3.52px;--eds-typography-header-6xl-tracking-normal:0px;--eds-typography-header-6xl-tracking-wide:3.52px;--eds-typography-header-6xl-font-weight-lighter:300;--eds-typography-header-6xl-font-weight-normal:400;--eds-typography-header-6xl-font-weight-bolder:500;--eds-typography-header-6xl-line-height-default:2.25rem;--eds-typography-header-6xl-line-height-squished:2rem}
 [data-space-proportions=squished]{--eds-spacing-proportions-xs-horizontal:var(--eds-spacing-inset-xs-horizontal);--eds-spacing-proportions-xs-vertical:var(--eds-spacing-inset-xs-vertical-squished);--eds-spacing-proportions-sm-horizontal:var(--eds-spacing-inset-sm-horizontal);--eds-spacing-proportions-sm-vertical:var(--eds-spacing-inset-sm-vertical-squished);--eds-spacing-proportions-md-horizontal:var(--eds-spacing-inset-md-horizontal);--eds-spacing-proportions-md-vertical:var(--eds-spacing-inset-md-vertical-squished);--eds-spacing-proportions-lg-horizontal:var(--eds-spacing-inset-lg-horizontal);--eds-spacing-proportions-lg-vertical:var(--eds-spacing-inset-lg-vertical-squished);--eds-spacing-proportions-xl-horizontal:var(--eds-spacing-inset-xl-horizontal);--eds-spacing-proportions-xl-vertical:var(--eds-spacing-inset-xl-vertical-squished)}
@@ -92,13 +104,9 @@
 [data-tracking=wide],[data-tracking=loose]{--eds-typography-tracking:var(--eds-typography-tracking-wide)}
 @layer eds-components {
   /* Inline with text: uses token from parent's data-font-size, or 1.5em fallback */
-  .icon {
-    /*
-     * Set font-size first to establish the icon's size context.
-     * Then use 1em for width/height (relative to computed font-size).
-     * This avoids compound scaling (1.5em × 1.5em = 2.25em would be wrong).
-     */
-    font-size: var(--eds-typography-icon-size, 1.5em);
+  .eds-icon {
+    flex-shrink: 0;
+
     width: 1em;
     height: 1em;
 
@@ -106,11 +114,16 @@
     margin-block: -0.25em;
     margin-inline: -0.1em;
 
-    flex-shrink: 0;
+    /*
+     * font-size establishes the icon's size context.
+     * width/height use 1em (relative to this computed font-size).
+     * This avoids compound scaling (1.5em × 1.5em = 2.25em would be wrong).
+     */
+    font-size: var(--eds-typography-icon-size, 1.5em);
   }
 
   /* Explicit size: fixed size from design tokens, no margins */
-  .icon[data-icon-size] {
+  .eds-icon[data-icon-size] {
     --_explicit-size: var(--eds-sizing-icon-md); /* fallback */
 
     width: var(--_explicit-size);
@@ -119,176 +132,119 @@
     font-size: inherit;
   }
 
-  .icon[data-icon-size='xs'] {
+  .eds-icon[data-icon-size='xs'] {
     --_explicit-size: var(--eds-sizing-icon-xs);
   }
-  .icon[data-icon-size='sm'] {
+
+  .eds-icon[data-icon-size='sm'] {
     --_explicit-size: var(--eds-sizing-icon-sm);
   }
-  .icon[data-icon-size='md'] {
+
+  .eds-icon[data-icon-size='md'] {
     --_explicit-size: var(--eds-sizing-icon-md);
   }
-  .icon[data-icon-size='lg'] {
+
+  .eds-icon[data-icon-size='lg'] {
     --_explicit-size: var(--eds-sizing-icon-lg);
   }
-  .icon[data-icon-size='xl'] {
+
+  .eds-icon[data-icon-size='xl'] {
     --_explicit-size: var(--eds-sizing-icon-xl);
   }
-  .icon[data-icon-size='2xl'] {
+
+  .eds-icon[data-icon-size='2xl'] {
     --_explicit-size: var(--eds-sizing-icon-2xl);
   }
-  .icon[data-icon-size='3xl'] {
+
+  .eds-icon[data-icon-size='3xl'] {
     --_explicit-size: var(--eds-sizing-icon-3xl);
   }
-  .icon[data-icon-size='4xl'] {
+
+  .eds-icon[data-icon-size='4xl'] {
     --_explicit-size: var(--eds-sizing-icon-4xl);
   }
-  .icon[data-icon-size='5xl'] {
+
+  .eds-icon[data-icon-size='5xl'] {
     --_explicit-size: var(--eds-sizing-icon-5xl);
   }
-  .icon[data-icon-size='6xl'] {
+
+  .eds-icon[data-icon-size='6xl'] {
     --_explicit-size: var(--eds-sizing-icon-6xl);
   }
 }
 @layer eds-components {
   .eds-button {
+    cursor: pointer;
+
     /* Layout */
     display: inline-flex;
     align-items: center;
     justify-content: center;
+
     box-sizing: border-box;
 
     /* Appearance */
     border: none;
     border-radius: var(--eds-spacing-border-radius-rounded, 4px);
-    cursor: pointer;
-    outline: none;
+
     text-decoration: none;
 
+    outline: none;
+
     /* Transitions */
     transition:
       background-color 150ms ease-in-out,
       border-color 150ms ease-in-out,
       color 150ms ease-in-out;
-
-    /* Comfortable density asymmetric padding for visual text centering */
-    /* These values compensate for font metrics (ascenders/descenders) */
-    /* Empirically determined from Figma design */
-    --_comfortable-padding-top: 0.313rem; /* 5px */
-    --_comfortable-padding-bottom: 0.188rem; /* 3px */
-
-    /* Comfortable density icon-only padding to match label button heights */
-    /* Formula: (target-height - icon-size) / 2 where target-height = label button height */
-    /* Empirically determined from Figma design */
-    --_comfortable-icon-padding-sm: 0.125rem; /* 2px: (20px - 16px) / 2 */
-    --_comfortable-icon-padding-md: 0.188rem; /* 3px: (24px - 18px) / 2 */
-    --_comfortable-icon-padding-lg: 0.5rem; /* 8px: (36px - 20px) / 2 */
   }
 
-  /* ===== SIZE VARIANTS (Button with label) ===== */
+  /* ===== SIZE VARIANTS ===== */
   /*
-   * Spacing adjusted from design tokens to compensate for icon negative margins
-   * Icons have margin-block: -0.25em and margin-inline: -0.1em for optical alignment
+   * Button height is controlled by min-height.
+   * The span keeps its natural line-height and is centered by flexbox.
    *
-   * Token reference (from --eds-selectable-space-*):
-   * - lg: horizontal=20px, vertical=16px (spacious) / 12px (comfortable)
-   * - md: horizontal=16px, vertical=12px (spacious) / 8px (comfortable)
-   * - sm: horizontal=12px, vertical=8px (spacious) / 6px (comfortable)
-   *
-   * Adjustments made:
-   * - Vertical padding reduced by ~4px to account for icon negative margins
-   * - Gap values slightly adjusted for visual balance with icons
+   * Spacious (default): sm=24px, md=36px, lg=44px
+   * Comfortable:        sm=20px, md=24px, lg=36px
    */
 
   .eds-button[data-selectable-space='lg'] {
-    /* Base from token (16px spacious / 12px comfortable) → Adjusted: -4px vertical for icon margins */
-    padding-block: calc(var(--eds-selectable-space-vertical) - 0.25rem); /* 16px → 12px / 12px → 8px */
-    padding-inline: var(--eds-selectable-space-horizontal); /* 20px spacious / 16px comfortable */
     gap: var(--eds-typography-gap-horizontal);
+    min-height: 2.75rem; /* 44px */
+    padding-inline: var(--eds-selectable-space-horizontal);
   }
 
   .eds-button[data-selectable-space='md'] {
-    /* Base from token (12px spacious / 8px comfortable) → Adjusted: -2px vertical for icon margins */
-    padding-block: calc(var(--eds-selectable-space-vertical) - 0.125rem); /* 12px → 10px / 8px → 6px */
-    padding-inline: var(--eds-selectable-space-horizontal); /* 16px spacious / 12px comfortable */
     gap: var(--eds-typography-gap-horizontal);
+    min-height: 2.25rem; /* 36px */
+    padding-inline: var(--eds-selectable-space-horizontal);
   }
 
   .eds-button[data-selectable-space='sm'] {
-    /* Base from token (8px spacious / 6px comfortable) → Adjusted: -2px vertical for icon margins */
-    padding-block: calc(var(--eds-selectable-space-vertical) - 0.125rem); /* 8px → 6px / 6px → 4px */
-    padding-inline: var(--eds-selectable-space-horizontal); /* 12px spacious / 8px comfortable */
     gap: var(--eds-typography-gap-horizontal);
+    min-height: 1.5rem; /* 24px */
+    padding-inline: var(--eds-selectable-space-horizontal);
   }
 
-  /* ===== DENSITY OVERRIDES ===== */
-  /*
-   * Note: Density-specific overrides are defined OUTSIDE @layer (after this block closes)
-   * to ensure they can override the typography tokens from @equinor/eds-tokens
-   */
+  /* Comfortable density */
 
-  /* ===== ICON-ONLY BUTTON ===== */
-  /*
-   * Icon-only buttons maintain same height as label buttons but adapt to density.
-   * Formula: padding = base-padding + (line-height - icon-size) / 2
-   *
-   * This ensures icon buttons:
-   * - Match label button height in both spacious and comfortable density
-   * - Center the icon vertically regardless of density mode
-   * - Adapt automatically via --eds-typography-line-height-squished token
-   *
-   * Density behavior:
-   * - Spacious: Uses larger line-height → more padding → taller buttons
-   * - Comfortable: Uses smaller line-height → less padding → shorter buttons
-   */
-
-  .eds-button[data-icon-only] {
-    aspect-ratio: 1;
+  [data-density='comfortable'] .eds-button[data-selectable-space='lg'] {
+    min-height: 2.25rem; /* 36px */
   }
 
-  .eds-button[data-icon-only][data-selectable-space='lg'] {
-    /* Base padding from token minus icon compensation: (16px - 4px) = 12px spacious / (12px - 4px) = 8px comfortable */
-    /* Adapts with line-height (20px spacious / 16px comfortable) */
-    /* Target height: 44px spacious / 40px comfortable */
-    --_base-padding: calc(var(--eds-selectable-space-vertical) - 0.25rem);
-    padding: calc(
-      var(--_base-padding) +
-        (
-          var(--eds-typography-line-height-squished) -
-            var(--eds-typography-icon-size)
-        ) /
-        2
-    );
+  [data-density='comfortable'] .eds-button[data-selectable-space='md'] {
+    min-height: 1.5rem; /* 24px */
   }
 
-  .eds-button[data-icon-only][data-selectable-space='md'] {
-    /* Base padding from token minus icon compensation: (12px - 2px) = 10px spacious / (8px - 2px) = 6px comfortable */
-    /* Adapts with line-height (16px spacious / 12px comfortable) */
-    /* Target height: 36px spacious / 32px comfortable */
-    --_base-padding: calc(var(--eds-selectable-space-vertical) - 0.125rem);
-    padding: calc(
-      var(--_base-padding) +
-        (
-          var(--eds-typography-line-height-squished) -
-            var(--eds-typography-icon-size)
-        ) /
-        2
-    );
+  [data-density='comfortable'] .eds-button[data-selectable-space='sm'] {
+    min-height: 1.25rem; /* 20px */
   }
 
-  .eds-button[data-icon-only][data-selectable-space='sm'] {
-    /* Base padding from token minus icon compensation: (8px - 2px) = 6px spacious / (6px - 2px) = 4px comfortable */
-    /* Line-height (12px) same for both densities */
-    /* Target height: 24px (consistent across densities) */
-    --_base-padding: calc(var(--eds-selectable-space-vertical) - 0.125rem);
-    padding: calc(
-      var(--_base-padding) +
-        (
-          var(--eds-typography-line-height-squished) -
-            var(--eds-typography-icon-size)
-        ) /
-        2
-    );
+  /* ===== ICON-ONLY BUTTON ===== */
+  /* Height from size variant, aspect-ratio makes it square, flexbox centers icon */
+
+  .eds-button[data-icon-only] {
+    aspect-ratio: 1;
+    padding: 0;
   }
 
   /* ===== ROUND ICON-ONLY BUTTON ===== */
@@ -300,8 +256,8 @@
   /* ===== PRIMARY VARIANT ===== */
 
   .eds-button[data-variant='primary'] {
-    background-color: var(--eds-color-bg-fill-emphasis-default);
     color: var(--eds-color-text-strong-on-emphasis);
+    background-color: var(--eds-color-bg-fill-emphasis-default);
   }
 
   .eds-button[data-variant='primary']:hover:not(:disabled) {
@@ -313,16 +269,16 @@
   }
 
   .eds-button[data-variant='primary']:disabled {
-    background-color: var(--eds-color-bg-fill-muted-default);
-    color: var(--eds-color-border-medium);
     cursor: not-allowed;
+    color: var(--eds-color-text-disabled);
+    background-color: var(--eds-color-bg-fill-emphasis-disabled);
   }
 
   /* ===== SECONDARY VARIANT ===== */
 
   .eds-button[data-variant='secondary'] {
-    background-color: transparent;
     color: var(--eds-color-text-subtle);
+    background-color: transparent;
     outline: var(--eds-border-width-default, 1px) solid
       var(--eds-color-border-strong);
     outline-offset: calc(-1 * var(--eds-border-width-default, 1px));
@@ -337,18 +293,18 @@
   }
 
   .eds-button[data-variant='secondary']:disabled {
+    cursor: not-allowed;
+    color: var(--eds-color-text-disabled);
     outline: var(--eds-border-width-default, 1px) solid
-      var(--eds-color-border-medium);
+      var(--eds-color-border-disabled);
     outline-offset: calc(-1 * var(--eds-border-width-default, 1px));
-    color: var(--eds-color-border-medium);
-    cursor: not-allowed;
   }
 
   /* ===== GHOST VARIANT ===== */
 
   .eds-button[data-variant='ghost'] {
-    background-color: transparent;
     color: var(--eds-color-text-subtle);
+    background-color: transparent;
   }
 
   .eds-button[data-variant='ghost']:hover:not(:disabled) {
@@ -360,8 +316,8 @@
   }
 
   .eds-button[data-variant='ghost']:disabled {
-    color: var(--eds-color-border-medium);
     cursor: not-allowed;
+    color: var(--eds-color-text-disabled);
   }
 
   /* ===== FOCUS STATE ===== */
@@ -380,106 +336,31 @@
   /* Icons inherit size from Typography via --eds-typography-icon-size */
   /* Icons use em-based negative margins from icon.css for optical alignment */
 
-  .eds-button .icon {
+  .eds-button .eds-icon {
     flex-shrink: 0;
   }
 
-  /* Icon-only buttons: remove negative margins, use padding for sizing */
-  .eds-button[data-icon-only] .icon {
+  /* Icon-only buttons: remove negative margins since flexbox handles centering */
+  .eds-button[data-icon-only] .eds-icon {
     margin: 0;
   }
 }
-/* ===== LABEL WRAPPER (TypographyNext) ===== */
-/* Outside @layer to override typography.css which sets display: block on [data-font-family] */
-.eds-button {
-  display: inline-flex;
-}
-.eds-button > span {
-  display: inline-flex;
-  align-items: center;
-  gap: inherit;
-}
-/* Reset baseline padding and text-box-trim for proper centering */
-.eds-button > span[data-baseline] {
-  padding: 0;
-  /* Disable text-box-trim so text sits centered within its line-height box */
-  /* Flexbox will then center the entire line-height box vertically in the button */
-  text-box-trim: none;
-  text-box-edge: auto;
-}
-/* Icon-only: span should not affect layout */
-.eds-button[data-icon-only] > span {
-  display: contents;
-}
-/* ===== DENSITY OVERRIDES ===== */
 /*
- * Comfortable density uses smaller font-sizes (one size down) and tighter spacing.
- *
- * Font-size mapping (from Figma):
- * - small: XS (10.5px) instead of SM (12px)
- * - default: SM (12px) instead of MD (14px)
- * - large: MD (14px) instead of LG (16px)
+ * Outside @layer to override typography.css [data-font-family] { display: block }.
+ * The span wraps text children via TypographyNext and needs inline-flex for
+ * icon+text gap and vertical centering.
  *
- * Target heights in comfortable mode:
- * - small: 20px (4px × 2 + 12px line-height)
- * - default: 24px (4px × 2 + 16px line-height)
- * - large: 36px (8px × 2 + 20px line-height)
- *
- * These overrides are OUTSIDE @layer to ensure they can override the typography
- * tokens from @equinor/eds-tokens/css/variables.
+ * text-box/padding-block reset disables typography.css baseline padding —
+ * button handles its own sizing via min-height + flexbox centering.
  */
-[data-density='comfortable'] .eds-button[data-selectable-space='sm'][data-font-size='sm'],
-[data-density='comfortable'] .eds-button[data-selectable-space='sm'] [data-font-size='sm'] {
-  /* Override line-height to maintain SM height (12px instead of XS's 12px) */
-  --eds-typography-line-height: 0.75rem; /* 12px (SM line-height) */
-  --eds-typography-line-height-squished: 0.75rem; /* 12px */
-}
-[data-density='comfortable'] .eds-button[data-selectable-space='sm'][data-font-size='sm'] {
-  /* Target: 20px = (5px + 3px) + 12px line-height */
-  /* Asymmetric padding to visually center text (more top, less bottom) */
-  padding-top: var(--_comfortable-padding-top);
-  padding-bottom: var(--_comfortable-padding-bottom);
-}
-[data-density='comfortable'] .eds-button[data-selectable-space='md'][data-font-size='md'],
-[data-density='comfortable'] .eds-button[data-selectable-space='md'] [data-font-size='md'] {
-  /* Override line-height to maintain MD height (16px instead of SM's 12px) */
-  --eds-typography-line-height: 1rem; /* 16px (MD line-height, NOT SM) */
-  --eds-typography-line-height-squished: 1rem; /* 16px */
-}
-[data-density='comfortable'] .eds-button[data-selectable-space='md'][data-font-size='md'] {
-  /* Target: 24px = (5px + 3px) + 16px line-height */
-  /* Asymmetric padding to visually center text (more top, less bottom) */
-  padding-top: var(--_comfortable-padding-top);
-  padding-bottom: var(--_comfortable-padding-bottom);
-}
-[data-density='comfortable'] .eds-button[data-selectable-space='lg'][data-font-size='lg'],
-[data-density='comfortable'] .eds-button[data-selectable-space='lg'] [data-font-size='lg'] {
-  /* Override line-height to maintain LG height (20px instead of MD's 16px) */
-  --eds-typography-line-height: 1.25rem; /* 20px (LG line-height, NOT MD) */
-  --eds-typography-line-height-squished: 1.25rem; /* 20px */
-}
-[data-density='comfortable'] .eds-button[data-selectable-space='lg'][data-font-size='lg'] {
-  /* Target: 36px = (8px × 2) + 20px */
-  /* Token gives 12px in comfortable mode, minus icon compensation = 8px */
-  padding-block: calc(var(--eds-selectable-space-vertical) - 0.25rem); /* 12px → 8px */
-}
-/* Icon-only button overrides for comfortable density */
-/* Set fixed padding to ensure square buttons that match labeled button heights */
-/* Formula: padding = (target-height - icon-size) / 2 */
-[data-density='comfortable'] .eds-button[data-icon-only][data-selectable-space='sm'] {
-  /* Target: 20×20px to match labeled small button (20px height) */
-  /* Icon size: 16px, padding needed: (20 - 16) / 2 = 2px */
-  padding: var(--_comfortable-icon-padding-sm);
-}
-[data-density='comfortable'] .eds-button[data-icon-only][data-selectable-space='md'] {
-  /* Target: 24×24px to match labeled default button (24px height) */
-  /* Icon size: 18px, padding needed: (24 - 18) / 2 = 3px */
-  padding: var(--_comfortable-icon-padding-md);
-}
-[data-density='comfortable'] .eds-button[data-icon-only][data-selectable-space='lg'] {
-  /* Target: 36×36px to match labeled large button (36px height) */
-  /* Icon size: 20px, padding needed: (36 - 20) / 2 = 8px */
-  padding: var(--_comfortable-icon-padding-lg);
+.eds-button__label {
+  display: inline-flex;
+  gap: var(--eds-typography-gap-horizontal);
+  align-items: center;
+
+  padding-block: 0;
+
+  text-box: normal;
 }
 @layer eds-components {
   .eds-field {
@@ -539,9 +420,15 @@
     color: var(--_eds-field-helper-color);
   }
 
+  /* Reduce gap before helper message to 3xs spacing.
+     Applied to the preceding sibling (not helper message) to avoid [data-font-family] margin: 0 override. */
+  .eds-field > :has(+ .eds-field__helper-message) {
+    margin-block-end: calc(var(--eds-spacing-vertical-3xs) - var(--eds-generic-gap-vertical));
+  }
+
   /* Only helper message changes color when disabled */
   .eds-field[data-disabled='true'] {
-    --_eds-field-helper-color: var(--eds-color-border-neutral-medium);
+    --_eds-field-helper-color: var(--eds-color-text-disabled);
   }
 }
 @layer eds-components {
@@ -692,7 +579,7 @@
   }
 
   .eds-checkbox[data-disabled='true'] .eds-checkbox__icon {
-    fill: var(--eds-color-border-medium);
+    fill: var(--eds-color-text-disabled);
   }
 
   /* Icon visibility */
@@ -731,7 +618,7 @@
   }
 
   .eds-field.eds-checkbox[data-disabled='true'] .eds-field__label {
-    color: var(--eds-color-border-medium);
+    color: var(--eds-color-text-disabled);
     cursor: not-allowed;
   }
 
@@ -884,7 +771,7 @@
   }
 
   .eds-radio[data-disabled='true'] .eds-radio__icon {
-    fill: var(--eds-color-border-medium);
+    fill: var(--eds-color-text-disabled);
   }
 
   /* Icon visibility */
@@ -909,7 +796,7 @@
   }
 
   .eds-field.eds-radio[data-disabled='true'] .eds-field__label {
-    color: var(--eds-color-border-medium);
+    color: var(--eds-color-text-disabled);
     cursor: not-allowed;
   }
 }
@@ -965,7 +852,7 @@
     }
 
     &[data-disabled='true'] .eds-field__label {
-      color: var(--eds-color-border-medium);
+      color: var(--eds-color-text-disabled);
       cursor: not-allowed;
     }
   }
@@ -1039,7 +926,7 @@
     }
 
     .eds-switch:has(.eds-switch__input:disabled) & {
-      background-color: var(--eds-color-border-medium);
+      background-color: var(--eds-color-bg-disabled);
       box-shadow: none;
     }
   }
@@ -1047,6 +934,11 @@
 @layer eds-components {
   /* Container */
   .eds-input-container {
+    /* Temporary alias until proper input background token is available */
+    --_bg-input: var(--eds-color-bg-canvas);
+    /* Temporary alias until proper readonly text token is available */
+    --_readonly-text-color: var(--eds-color-border-strong);
+
     isolation: isolate;
     display: flex;
     flex-direction: row;
@@ -1054,8 +946,8 @@
     gap: var(--eds-typography-gap-horizontal);
     box-sizing: border-box;
     inline-size: 100%;
-    background: var(--eds-color-bg-canvas);
-    /* Use outline instead of border to not affect height (36px target) */
+    background: var(--_bg-input);
+    /* Outline instead of border to not affect height calculation */
     outline: var(--eds-sizing-stroke-thin) solid var(--eds-color-border-subtle);
     outline-offset: calc(-1 * var(--eds-sizing-stroke-thin));
     border-radius: var(--eds-spacing-border-radius-none);
@@ -1065,40 +957,28 @@
       background-color 150ms,
       outline-color 150ms;
 
-    /* Hover - only for enabled inputs */
     &:hover:not([data-disabled]):not([data-readonly]) {
       outline-color: var(--eds-color-border-strong);
 
       & .eds-input {
         color: var(--eds-color-text-strong);
-        /* -webkit-text-fill-color overrides Safari autofill background styling */
+        /* Safari autofill override */
         -webkit-text-fill-color: var(--eds-color-text-strong);
 
         &::placeholder {
           color: var(--eds-color-text-strong);
+          /* Safari autofill override */
           -webkit-text-fill-color: var(--eds-color-text-strong);
         }
       }
-
-      /* Hover for adornments - only when not invalid */
-      &:not([data-invalid]) {
-        & .eds-adornment__text,
-        & .eds-adornment__adornment {
-          color: var(--eds-color-text-strong);
-        }
-      }
     }
 
-    /* Focus state - border stays in place, focus ring appears outside with gap
-       Matches Switch pattern: stroke-thin ring with stroke-thick gap */
+    /* Focus ring with gap (box-shadow since outline is used for border) */
     &:focus-within {
       outline-color: var(--eds-color-border-strong);
-      /* Use box-shadow since outline is used for the border */
       box-shadow:
-        0 0 0 var(--eds-sizing-stroke-thick) var(--eds-color-bg-canvas),
-        0 0 0
-          calc(var(--eds-sizing-stroke-thick) + var(--eds-sizing-stroke-thin))
-          var(--eds-color-border-focus);
+        0 0 0 var(--eds-sizing-stroke-thin) var(--_bg-input),
+        0 0 0 calc(var(--eds-sizing-stroke-thin) * 2) var(--eds-color-border-focus);
     }
 
     /* Invalid state */
@@ -1108,15 +988,8 @@
       &:focus-within {
         outline-color: var(--eds-color-border-strong);
         box-shadow:
-          0 0 0 var(--eds-sizing-stroke-thick) var(--eds-color-bg-canvas),
-          0 0 0
-            calc(var(--eds-sizing-stroke-thick) + var(--eds-sizing-stroke-thin))
-            var(--eds-color-border-focus);
-      }
-
-      & .eds-input::placeholder {
-        color: var(--eds-color-border-strong);
-        -webkit-text-fill-color: var(--eds-color-border-strong);
+          0 0 0 var(--eds-sizing-stroke-thin) var(--_bg-input),
+          0 0 0 calc(var(--eds-sizing-stroke-thin) * 2) var(--eds-color-border-focus);
       }
     }
 
@@ -1126,23 +999,23 @@
       outline-color: transparent;
 
       & .eds-input {
-        color: var(--eds-color-border-medium);
+        color: var(--eds-color-text-disabled);
         cursor: not-allowed;
         opacity: 1;
-        -webkit-text-fill-color: var(
-          --eds-color-border-medium
-        ); /* Safari autofill override */
+        /* Safari autofill override */
+        -webkit-text-fill-color: var(--eds-color-text-disabled);
 
         &::placeholder {
-          color: var(--eds-color-border-medium);
-          -webkit-text-fill-color: var(--eds-color-border-medium);
+          color: var(--eds-color-text-disabled);
+          /* Safari autofill override */
+          -webkit-text-fill-color: var(--eds-color-text-disabled);
         }
       }
 
       & .eds-adornment__text,
       & .eds-adornment__adornment,
       & .eds-error-icon {
-        color: var(--eds-color-border-medium);
+        color: var(--eds-color-text-disabled);
       }
     }
 
@@ -1151,26 +1024,28 @@
       outline-color: transparent;
 
       & .eds-input {
-        color: var(--eds-color-border-strong);
-        -webkit-text-fill-color: var(
-          --eds-color-border-strong
-        ); /* Safari autofill override */
-
-        &::placeholder {
-          color: var(--eds-color-border-strong);
-          -webkit-text-fill-color: var(--eds-color-border-strong);
-        }
+        color: var(--_readonly-text-color);
+        /* Safari autofill override */
+        -webkit-text-fill-color: var(--_readonly-text-color);
       }
 
       & .eds-adornment__text,
       & .eds-adornment__adornment {
-        color: var(--eds-color-border-strong);
+        color: var(--_readonly-text-color);
       }
     }
   }
 
+  /* Comfortable density: uses XS vertical spacing for 24px height */
+  [data-density='comfortable'] .eds-input-container {
+    padding-block: var(--eds-spacing-proportions-xs-vertical);
+  }
+
   /* Input/Textarea element */
   .eds-input {
+    /* Temporary alias until proper placeholder text token is available */
+    --_placeholder-text-color: var(--eds-color-border-strong);
+
     flex: 1;
     min-inline-size: 0;
     border: var(--eds-sizing-stroke-none);
@@ -1184,7 +1059,9 @@
     resize: none;
 
     &::placeholder {
-      color: var(--eds-color-border-strong);
+      color: var(--_placeholder-text-color);
+      /* Safari autofill override */
+      -webkit-text-fill-color: var(--_placeholder-text-color);
     }
   }
 
@@ -1200,16 +1077,42 @@
     align-items: center;
     gap: var(--eds-typography-gap-horizontal);
     flex-shrink: 0;
-  }
-
-  /* Adornment text (prefix/suffix) */
-  .eds-adornment__text {
     color: var(--eds-color-text-subtle);
   }
 
-  /* Adornment icons */
+  /* Adornment icons and buttons */
   .eds-adornment__adornment {
-    color: var(--eds-color-text-subtle);
+    display: flex;
+    align-items: center;
+  }
+
+  /* Prevent button from expanding Input (Button size="small" is 24px, Input needs 20px) */
+  .eds-adornment__adornment:has(button) {
+    block-size: var(--eds-typography-ui-body-md-line-height-default);
+  }
+
+  /* Make button fit the 20px space to match Input content height */
+  .eds-adornment__adornment button {
+    inline-size: var(--eds-typography-ui-body-md-line-height-default);
+    block-size: var(--eds-typography-ui-body-md-line-height-default);
+    padding: 0;
+  }
+
+  /* Negative margin aligns buttons with icon adornments
+     Applied to wrapper to avoid [data-font-family] margin override */
+
+  /* End adornment */
+  .eds-input ~ .eds-adornment .eds-adornment__adornment:has(button) {
+    margin-inline-end: calc(
+      (var(--eds-sizing-icon-xs) - var(--eds-typography-ui-body-md-line-height-default)) / 2
+    );
+  }
+
+  /* Start adornment */
+  .eds-adornment:has(~ .eds-input) .eds-adornment__adornment:has(button) {
+    margin-inline-start: calc(
+      (var(--eds-sizing-icon-xs) - var(--eds-typography-ui-body-md-line-height-default)) / 2
+    );
   }
 }
 @layer eds-components {
@@ -1222,31 +1125,10 @@
   }
 
   .eds-text-field__info {
-    display: inline-flex;
-    align-items: center;
     flex-shrink: 0;
-    padding: 0;
-    border: none;
-    background: transparent;
-    color: var(--eds-color-icon-subtle);
-    cursor: pointer;
+    /* Negative margin collapses the button's 24px layout contribution to ~8px,
+       matching Figma's 8px icon container. Label text-box height determines row height. */
     margin-block: calc(var(--eds-sizing-icon-xs) / -2);
-
-    &:hover,
-    &:focus-visible {
-      color: var(--eds-color-icon-info);
-
-      & svg {
-        background: var(--eds-color-bg-fill-muted-hover);
-        border-radius: var(--eds-spacing-border-radius-pill);
-      }
-    }
-
-    &:focus-visible {
-      outline: var(--eds-sizing-stroke-thick) solid var(--eds-color-focus);
-      outline-offset: var(--eds-sizing-stroke-thick);
-      border-radius: var(--eds-spacing-border-radius-pill);
-    }
   }
 }