@equinor/eds-core-react 2.4.1-beta.0 → 2.5.0-beta.0

package/build/index.css

@@ -1,9 +1,9 @@
 
-@layer eds-components;
+@layer eds-elements, eds-components;
 /* EDS 2.0 Next Components - CSS */
 /* Define layer order - eds-components has lowest priority for easy user overrides */
 /*
- * Font loading:
+ * Font import:
  * Next components use two font families:
  *   - "Inter" for UI text (buttons, inputs, labels, etc.)
  *   - "Equinor" for headings
@@ -16,7 +16,7 @@
  */
 :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-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{--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);--eds-elevation-low:0px 1px 8px 0px #0003, 0px 4px 8px 3px #0000001f;--eds-elevation-high:0px 4px 12px 0px #0003, 0px 12px 16px 6px #0000001f}
 :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)}
@@ -102,6 +102,629 @@
 [data-tracking=tight]{--eds-typography-tracking:var(--eds-typography-tracking-tight)}
 [data-tracking=normal]{--eds-typography-tracking:var(--eds-typography-tracking-normal)}
 [data-tracking=wide],[data-tracking=loose]{--eds-typography-tracking:var(--eds-typography-tracking-wide)}
+/* Reusable registered custom properties used to resolve values */
+@property --captured-size-1 {
+  inherits: false;
+  initial-value: 0;
+  syntax: '<length>';
+}
+@property --captured-size-2 {
+  inherits: true;
+  initial-value: 0;
+  syntax: '<length>';
+}
+:root,
+[data-density='spacious'] {
+  --_base: 1rem;
+  --eds-typography-ui-body-xs-font-size: round(
+    calc(var(--_base) * pow(2, -3/5)),
+    0.03125rem
+  );
+  --eds-typography-ui-body-sm-font-size: round(
+    calc(var(--_base) * pow(2, -2/5)),
+    0.03125rem
+  );
+  --eds-typography-ui-body-md-font-size: round(
+    calc(var(--_base) * pow(2, -1/5)),
+    0.03125rem
+  );
+  --eds-typography-ui-body-lg-font-size: var(--_base);
+  --eds-typography-ui-body-xl-font-size: round(
+    calc(var(--_base) * pow(2, 1/5)),
+    0.03125rem
+  );
+  --eds-typography-ui-body-2xl-font-size: round(
+    calc(var(--_base) * pow(2, 2/5)),
+    0.03125rem
+  );
+  --eds-typography-ui-body-3xl-font-size: round(
+    calc(var(--_base) * pow(2, 3/5)),
+    0.03125rem
+  );
+  --eds-typography-ui-body-4xl-font-size: round(
+    calc(var(--_base) * pow(2, 4/5)),
+    0.03125rem
+  );
+  --eds-typography-ui-body-5xl-font-size: round(
+    calc(var(--_base) * pow(2, 5/5)),
+    0.03125rem
+  );
+  --eds-typography-ui-body-6xl-font-size: round(
+    calc(var(--_base) * pow(2, 6/5)),
+    0.03125rem
+  );
+
+  /* line-height normal */
+  --eds-typography-ui-body-xs-line-height-default: round(
+    calc(
+      var(--eds-typography-ui-body-xs-font-size) * (1.39 - pow(0 / 9, 3) * 0.29)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-sm-line-height-default: round(
+    calc(
+      var(--eds-typography-ui-body-sm-font-size) * (1.39 - pow(1 / 9, 3) * 0.29)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-md-line-height-default: round(
+    calc(
+      var(--eds-typography-ui-body-md-font-size) * (1.39 - pow(2 / 9, 3) * 0.29)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-lg-line-height-default: round(
+    calc(
+      var(--eds-typography-ui-body-lg-font-size) * (1.39 - pow(3 / 9, 3) * 0.29)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-xl-line-height-default: round(
+    calc(
+      var(--eds-typography-ui-body-xl-font-size) * (1.39 - pow(4 / 9, 3) * 0.29)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-2xl-line-height-default: round(
+    calc(
+      var(--eds-typography-ui-body-2xl-font-size) *
+        (1.39 - pow(5 / 9, 3) * 0.29)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-3xl-line-height-default: round(
+    calc(
+      var(--eds-typography-ui-body-3xl-font-size) *
+        (1.39 - pow(6 / 9, 3) * 0.29)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-4xl-line-height-default: round(
+    calc(
+      var(--eds-typography-ui-body-4xl-font-size) *
+        (1.39 - pow(7 / 9, 3) * 0.29)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-5xl-line-height-default: round(
+    calc(
+      var(--eds-typography-ui-body-5xl-font-size) *
+        (1.39 - pow(8 / 9, 3) * 0.29)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-6xl-line-height-default: round(
+    calc(
+      var(--eds-typography-ui-body-6xl-font-size) *
+        (1.39 - pow(9 / 9, 3) * 0.29)
+    ),
+    4px
+  );
+
+  /* line-height squished */
+  --eds-typography-ui-body-xs-line-height-squished: round(
+    calc(
+      var(--eds-typography-ui-body-xs-font-size) * (1.13 - pow(0 / 9, 3) * 0.13)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-sm-line-height-squished: round(
+    calc(
+      var(--eds-typography-ui-body-sm-font-size) * (1.13 - pow(1 / 9, 3) * 0.13)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-md-line-height-squished: round(
+    calc(
+      var(--eds-typography-ui-body-md-font-size) * (1.13 - pow(2 / 9, 3) * 0.13)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-lg-line-height-squished: round(
+    calc(
+      var(--eds-typography-ui-body-lg-font-size) * (1.13 - pow(3 / 9, 3) * 0.13)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-xl-line-height-squished: round(
+    calc(
+      var(--eds-typography-ui-body-xl-font-size) * (1.13 - pow(4 / 9, 3) * 0.13)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-2xl-line-height-squished: round(
+    calc(
+      var(--eds-typography-ui-body-2xl-font-size) *
+        (1.13 - pow(5 / 9, 3) * 0.13)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-3xl-line-height-squished: round(
+    calc(
+      var(--eds-typography-ui-body-3xl-font-size) *
+        (1.13 - pow(6 / 9, 3) * 0.13)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-4xl-line-height-squished: round(
+    calc(
+      var(--eds-typography-ui-body-4xl-font-size) *
+        (1.13 - pow(7 / 9, 3) * 0.13)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-5xl-line-height-squished: round(
+    calc(
+      var(--eds-typography-ui-body-5xl-font-size) *
+        (1.13 - pow(8 / 9, 3) * 0.13)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-6xl-line-height-squished: round(
+    calc(
+      var(--eds-typography-ui-body-6xl-font-size) *
+        (1.13 - pow(9 / 9, 3) * 0.13)
+    ),
+    4px
+  );
+}
+/* TODO: rename densities — relaxed → spacious, spacious → comfortable, comfortable → compact */
+[data-density='relaxed'] {
+  --_base: 1.15625rem;
+  --eds-typography-ui-body-xs-font-size: round(
+    calc(var(--_base) * pow(2, -3/5)),
+    0.03125rem
+  );
+  --eds-typography-ui-body-sm-font-size: round(
+    calc(var(--_base) * pow(2, -2/5)),
+    0.03125rem
+  );
+  --eds-typography-ui-body-md-font-size: round(
+    calc(var(--_base) * pow(2, -1/5)),
+    0.03125rem
+  );
+  --eds-typography-ui-body-lg-font-size: var(--_base);
+  --eds-typography-ui-body-xl-font-size: round(
+    calc(var(--_base) * pow(2, 1/5)),
+    0.03125rem
+  );
+  --eds-typography-ui-body-2xl-font-size: round(
+    calc(var(--_base) * pow(2, 2/5)),
+    0.03125rem
+  );
+  --eds-typography-ui-body-3xl-font-size: round(
+    calc(var(--_base) * pow(2, 3/5)),
+    0.03125rem
+  );
+  --eds-typography-ui-body-4xl-font-size: round(
+    calc(var(--_base) * pow(2, 4/5)),
+    0.03125rem
+  );
+  --eds-typography-ui-body-5xl-font-size: round(
+    calc(var(--_base) * pow(2, 5/5)),
+    0.03125rem
+  );
+  --eds-typography-ui-body-6xl-font-size: round(
+    calc(var(--_base) * pow(2, 6/5)),
+    0.03125rem
+  );
+
+  /* line-height normal */
+  --eds-typography-ui-body-xs-line-height-default: round(
+    calc(
+      var(--eds-typography-ui-body-xs-font-size) * (1.39 - pow(0 / 9, 3) * 0.29)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-sm-line-height-default: round(
+    calc(
+      var(--eds-typography-ui-body-sm-font-size) * (1.39 - pow(1 / 9, 3) * 0.29)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-md-line-height-default: round(
+    calc(
+      var(--eds-typography-ui-body-md-font-size) * (1.39 - pow(2 / 9, 3) * 0.29)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-lg-line-height-default: round(
+    calc(
+      var(--eds-typography-ui-body-lg-font-size) * (1.39 - pow(3 / 9, 3) * 0.29)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-xl-line-height-default: round(
+    calc(
+      var(--eds-typography-ui-body-xl-font-size) * (1.39 - pow(4 / 9, 3) * 0.29)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-2xl-line-height-default: round(
+    calc(
+      var(--eds-typography-ui-body-2xl-font-size) *
+        (1.39 - pow(5 / 9, 3) * 0.29)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-3xl-line-height-default: round(
+    calc(
+      var(--eds-typography-ui-body-3xl-font-size) *
+        (1.39 - pow(6 / 9, 3) * 0.29)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-4xl-line-height-default: round(
+    calc(
+      var(--eds-typography-ui-body-4xl-font-size) *
+        (1.39 - pow(7 / 9, 3) * 0.29)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-5xl-line-height-default: round(
+    calc(
+      var(--eds-typography-ui-body-5xl-font-size) *
+        (1.39 - pow(8 / 9, 3) * 0.29)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-6xl-line-height-default: round(
+    calc(
+      var(--eds-typography-ui-body-6xl-font-size) *
+        (1.39 - pow(9 / 9, 3) * 0.29)
+    ),
+    4px
+  );
+
+  /* line-height squished */
+  --eds-typography-ui-body-xs-line-height-squished: round(
+    calc(
+      var(--eds-typography-ui-body-xs-font-size) * (1.13 - pow(0 / 9, 3) * 0.13)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-sm-line-height-squished: round(
+    calc(
+      var(--eds-typography-ui-body-sm-font-size) * (1.13 - pow(1 / 9, 3) * 0.13)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-md-line-height-squished: round(
+    calc(
+      var(--eds-typography-ui-body-md-font-size) * (1.13 - pow(2 / 9, 3) * 0.13)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-lg-line-height-squished: round(
+    calc(
+      var(--eds-typography-ui-body-lg-font-size) * (1.13 - pow(3 / 9, 3) * 0.13)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-xl-line-height-squished: round(
+    calc(
+      var(--eds-typography-ui-body-xl-font-size) * (1.13 - pow(4 / 9, 3) * 0.13)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-2xl-line-height-squished: round(
+    calc(
+      var(--eds-typography-ui-body-2xl-font-size) *
+        (1.13 - pow(5 / 9, 3) * 0.13)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-3xl-line-height-squished: round(
+    calc(
+      var(--eds-typography-ui-body-3xl-font-size) *
+        (1.13 - pow(6 / 9, 3) * 0.13)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-4xl-line-height-squished: round(
+    calc(
+      var(--eds-typography-ui-body-4xl-font-size) *
+        (1.13 - pow(7 / 9, 3) * 0.13)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-5xl-line-height-squished: round(
+    calc(
+      var(--eds-typography-ui-body-5xl-font-size) *
+        (1.13 - pow(8 / 9, 3) * 0.13)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-6xl-line-height-squished: round(
+    calc(
+      var(--eds-typography-ui-body-6xl-font-size) *
+        (1.13 - pow(9 / 9, 3) * 0.13)
+    ),
+    4px
+  );
+}
+[data-density='comfortable'] {
+  --_base: 0.875rem;
+  --eds-typography-ui-body-xs-font-size: round(
+    calc(var(--_base) * pow(2, -3/5)),
+    0.03125rem
+  );
+  --eds-typography-ui-body-sm-font-size: round(
+    calc(var(--_base) * pow(2, -2/5)),
+    0.03125rem
+  );
+  --eds-typography-ui-body-md-font-size: round(
+    calc(var(--_base) * pow(2, -1/5)),
+    0.03125rem
+  );
+  --eds-typography-ui-body-lg-font-size: var(--_base);
+  --eds-typography-ui-body-xl-font-size: round(
+    calc(var(--_base) * pow(2, 1/5)),
+    0.03125rem
+  );
+  --eds-typography-ui-body-2xl-font-size: round(
+    calc(var(--_base) * pow(2, 2/5)),
+    0.03125rem
+  );
+  --eds-typography-ui-body-3xl-font-size: round(
+    calc(var(--_base) * pow(2, 3/5)),
+    0.03125rem
+  );
+  --eds-typography-ui-body-4xl-font-size: round(
+    calc(var(--_base) * pow(2, 4/5)),
+    0.03125rem
+  );
+  --eds-typography-ui-body-5xl-font-size: round(
+    calc(var(--_base) * pow(2, 5/5)),
+    0.03125rem
+  );
+  --eds-typography-ui-body-6xl-font-size: round(
+    calc(var(--_base) * pow(2, 6/5)),
+    0.03125rem
+  );
+
+  /* line-height normal */
+  --eds-typography-ui-body-xs-line-height-default: round(
+    calc(
+      var(--eds-typography-ui-body-xs-font-size) * (1.39 - pow(0 / 9, 3) * 0.29)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-sm-line-height-default: round(
+    calc(
+      var(--eds-typography-ui-body-sm-font-size) * (1.39 - pow(1 / 9, 3) * 0.29)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-md-line-height-default: round(
+    calc(
+      var(--eds-typography-ui-body-md-font-size) * (1.39 - pow(2 / 9, 3) * 0.29)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-lg-line-height-default: round(
+    calc(
+      var(--eds-typography-ui-body-lg-font-size) * (1.39 - pow(3 / 9, 3) * 0.29)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-xl-line-height-default: round(
+    calc(
+      var(--eds-typography-ui-body-xl-font-size) * (1.39 - pow(4 / 9, 3) * 0.29)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-2xl-line-height-default: round(
+    calc(
+      var(--eds-typography-ui-body-2xl-font-size) *
+        (1.39 - pow(5 / 9, 3) * 0.29)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-3xl-line-height-default: round(
+    calc(
+      var(--eds-typography-ui-body-3xl-font-size) *
+        (1.39 - pow(6 / 9, 3) * 0.29)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-4xl-line-height-default: round(
+    calc(
+      var(--eds-typography-ui-body-4xl-font-size) *
+        (1.39 - pow(7 / 9, 3) * 0.29)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-5xl-line-height-default: round(
+    calc(
+      var(--eds-typography-ui-body-5xl-font-size) *
+        (1.39 - pow(8 / 9, 3) * 0.29)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-6xl-line-height-default: round(
+    calc(
+      var(--eds-typography-ui-body-6xl-font-size) *
+        (1.39 - pow(9 / 9, 3) * 0.29)
+    ),
+    4px
+  );
+
+  /* line-height squished */
+  --eds-typography-ui-body-xs-line-height-squished: round(
+    calc(
+      var(--eds-typography-ui-body-xs-font-size) * (1.13 - pow(0 / 9, 3) * 0.13)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-sm-line-height-squished: round(
+    calc(
+      var(--eds-typography-ui-body-sm-font-size) * (1.13 - pow(1 / 9, 3) * 0.13)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-md-line-height-squished: round(
+    calc(
+      var(--eds-typography-ui-body-md-font-size) * (1.13 - pow(2 / 9, 3) * 0.13)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-lg-line-height-squished: round(
+    calc(
+      var(--eds-typography-ui-body-lg-font-size) * (1.13 - pow(3 / 9, 3) * 0.13)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-xl-line-height-squished: round(
+    calc(
+      var(--eds-typography-ui-body-xl-font-size) * (1.13 - pow(4 / 9, 3) * 0.13)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-2xl-line-height-squished: round(
+    calc(
+      var(--eds-typography-ui-body-2xl-font-size) *
+        (1.13 - pow(5 / 9, 3) * 0.13)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-3xl-line-height-squished: round(
+    calc(
+      var(--eds-typography-ui-body-3xl-font-size) *
+        (1.13 - pow(6 / 9, 3) * 0.13)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-4xl-line-height-squished: round(
+    calc(
+      var(--eds-typography-ui-body-4xl-font-size) *
+        (1.13 - pow(7 / 9, 3) * 0.13)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-5xl-line-height-squished: round(
+    calc(
+      var(--eds-typography-ui-body-5xl-font-size) *
+        (1.13 - pow(8 / 9, 3) * 0.13)
+    ),
+    4px
+  );
+  --eds-typography-ui-body-6xl-line-height-squished: round(
+    calc(
+      var(--eds-typography-ui-body-6xl-font-size) *
+        (1.13 - pow(9 / 9, 3) * 0.13)
+    ),
+    4px
+  );
+}
+/* ===== TEXT-BOX PADDING =====
+ * 1cap and 1ex resolve at the element where var() is used,
+ * so these formulas work correctly at any font-size.
+ */
+:root {
+  /* Trim leading above ex-height and below alphabetic baseline.
+   * Use inside @supports (text-box: trim-both ex alphabetic) in component CSS —
+   * var() cannot be used in @supports conditions as it always resolves to valid. */
+  --text-box: trim-both ex alphabetic;
+
+  /* Single-line: snap height to 4px grid, centered optically */
+  /* --eds-padding-top-centered: calc((round(1cap, 0.25rem) - 1ex) / 2 + (1cap - 1ex) / 2);
+  --eds-padding-bottom-centered: calc(
+    (round(1cap, 0.25rem) - 1ex) / 2 - (1cap - 1ex) / 2
+  ); */
+
+  /* Multi-line: align text to baseline grid */
+  --eds-padding-top-baseline: calc(round(1cap, 0.25rem) - 1ex);
+  --eds-padding-bottom-baseline: 0px;
+}
+/* @function progressive enhancement — Chrome/Edge 128+.
+ * Browsers without @function support fall back to the :root custom properties above.
+ * Remove the :root fallbacks once Safari supports @function. */
+/* TODO: uncomment --padding-block() once Safari supports @function.
+ * It will replace the manual padding-block calc() in component CSS.
+ * Track Safari support: https://caniuse.com/css-at-function
+ *
+ * @function --padding-block(
+ *     --padding-block <length>,
+ *     --line-height <length>,
+ *     --cap-rounded <length>
+ *   )
+ *   returns <length> {
+ *   result: calc(
+ *     var(--padding-block) - (var(--line-height) - var(--cap-rounded)) / 2
+ *   );
+ * }
+ */
+/* ===== FUTURE: ELIMINATE DENSITY DUPLICATION WITH @function =====
+ *
+ * Currently the font-size and line-height scales are duplicated in both the
+ * spacious and comfortable density blocks. This is necessary because CSS custom
+ * property late binding does not reliably propagate through chained math
+ * functions (round, pow) across inheritance boundaries in all browsers.
+ *
+ * Once @function has broad browser support (currently Chrome/Edge 128+ only,
+ * not yet in Safari), the duplication can be removed. @function calls stored as
+ * custom property values ARE lazily evaluated at the point of consumption, so
+ * they correctly read --_base from the local cascade:
+ *
+ *   @function --font-size-step(--step: 0) returns <length> {
+ *     result: round(calc(var(--_base) * pow(2, calc(var(--step) / 5))), 0.03125rem);
+ *   }
+ *
+ *   :root,
+ *   [data-density='spacious'] {
+ *     --_base: 1rem;
+ *     --eds-typography-ui-body-xs-font-size: --font-size-step(-3);
+ *     --eds-typography-ui-body-sm-font-size: --font-size-step(-2);
+ *     --eds-typography-ui-body-md-font-size: --font-size-step(-1);
+ *     --eds-typography-ui-body-lg-font-size: --font-size-step(0);
+ *     (etc.)
+ *   }
+ *
+ *   [data-density='comfortable'] {
+ *     --_base: 0.875rem; (that's it — no more duplication)
+ *   }
+ *
+ * Track Safari @function support: https://caniuse.com/css-at-function
+ */
+/* This is just a POC, the real values has to be defined in the design tokens */
+/* TODO: Add values */
+[data-density='relaxed'] {
+  [data-selectable-space='sm'] {
+    --eds-selectable-space-horizontal: 16px;
+    --eds-selectable-space-vertical: 12px;
+  }
+
+  [data-selectable-space='md'] {
+    --eds-selectable-space-horizontal: 20px;
+    --eds-selectable-space-vertical: 16px;
+  }
+
+  [data-selectable-space='lg'] {
+    --eds-selectable-space-horizontal: 24px;
+    --eds-selectable-space-vertical: 20px;
+  }
+}
 @layer eds-components {
   /* Inline with text: uses token from parent's data-font-size, or 1.5em fallback */
   .eds-icon {
@@ -174,21 +797,45 @@
 }
 @layer eds-components {
   .eds-button {
+    --_label-font-size: var(--eds-typography-ui-body-md-font-size);
+    --_label-line-height: var(--eds-typography-ui-body-md-line-height-squished);
+    --_label-height: round(1cap, 4px);
+    --captured-size-2: var(--_label-height); /* capture cap-height before SVG overrides font-size */
+    --_font-family: var(--eds-typography-ui-body-font-family);
+    --_color: var(--eds-color-text-strong-on-emphasis);
+    --_bg-color: var(--eds-color-bg-fill-emphasis-default);
+    --_padding-block: var(--eds-selectable-space-vertical);
+
     cursor: pointer;
 
     /* Layout */
     display: inline-flex;
+    gap: round(0.618em, 1px);
     align-items: center;
     justify-content: center;
 
     box-sizing: border-box;
+    min-height: calc(var(--_padding-block) * 2 + var(--_label-height));
+    padding-block: calc(
+      var(--_padding-block) -
+        (var(--_label-line-height) - var(--_label-height)) / 2
+    );
+    padding-inline: var(--eds-selectable-space-horizontal);
 
     /* Appearance */
     border: none;
     border-radius: var(--eds-spacing-border-radius-rounded, 4px);
 
+    /* Typography — ensures correct font for asChild elements */
+    font-family: var(--eds-typography-ui-body-font-family);
+    font-size: var(--_label-font-size);
+    line-height: var(--_label-line-height);
+    color: var(--_color);
+    text-align: start;
     text-decoration: none;
+    white-space: pre-line;
 
+    background-color: var(--_bg-color);
     outline: none;
 
     /* Transitions */
@@ -196,37 +843,52 @@
       background-color 150ms ease-in-out,
       border-color 150ms ease-in-out,
       color 150ms ease-in-out;
-  }
 
-  /* ===== SIZE VARIANTS ===== */
-  /*
-   * Button height is controlled by min-height.
-   * The span keeps its natural line-height and is centered by flexbox.
-   *
-   * Spacious (default): sm=24px, md=36px
-   * Comfortable:        sm=20px, md=24px
-   */
+    /* ===== LABEL ===== */
+    & .label {
+      font-family: var(--_font-family);
+      font-size: var(--_label-font-size);
+      line-height: var(--_label-line-height);
+      color: var(--_color);
+    }
 
-  .eds-button[data-selectable-space='md'] {
-    gap: var(--eds-typography-gap-horizontal);
-    min-height: 2.25rem; /* 36px */
-    padding-inline: var(--eds-selectable-space-horizontal);
-  }
+    &[data-multiline] {
+      padding-block: var(--eds-selectable-space-vertical);
 
-  .eds-button[data-selectable-space='sm'] {
-    gap: var(--eds-typography-gap-horizontal);
-    min-height: 1.5rem; /* 24px */
-    padding-inline: var(--eds-selectable-space-horizontal);
-  }
+      .label {
+        white-space: normal;
+
+        @supports (text-box: trim-both ex alphabetic) {
+          padding-top: var(--eds-padding-top-baseline);
+          padding-bottom: 0;
+
+          text-box: trim-both ex alphabetic;
+        }
+      }
+    }
+
+    & > svg {
+      --captured-size-1: var(--_label-font-size);
+      --_icon-size: calc(24px * tan(atan2(var(--captured-size-1), 1px)) / 16);
 
-  /* Comfortable density */
+      width: var(--_icon-size);
+      height: var(--_icon-size);
+      margin-block: calc((var(--captured-size-2) - var(--_icon-size)) / 2);
+      margin-inline: -0.2em;
 
-  [data-density='comfortable'] .eds-button[data-selectable-space='md'] {
-    min-height: 1.5rem; /* 24px */
+      font-size: var(--_icon-size);
+    }
   }
 
-  [data-density='comfortable'] .eds-button[data-selectable-space='sm'] {
-    min-height: 1.25rem; /* 20px */
+  /* ===== SIZE VARIANTS ===== */
+  /* Font size and line-height scale with data-selectable-space.
+   * Button height is derived from padding-block + line-height.
+   * min-height, gap, and padding-inline adapt automatically via the
+   * --eds-selectable-space-* tokens which are density-aware. */
+
+  .eds-button[data-selectable-space='sm'] {
+    --_label-font-size: var(--eds-typography-ui-body-sm-font-size);
+    --_label-line-height: var(--eds-typography-ui-body-sm-line-height-squished);
   }
 
   /* ===== ICON-ONLY BUTTON ===== */
@@ -246,79 +908,82 @@
   /* ===== PRIMARY VARIANT ===== */
 
   .eds-button[data-variant='primary'] {
-    color: var(--eds-color-text-strong-on-emphasis);
-    background-color: var(--eds-color-bg-fill-emphasis-default);
+    --_color: var(--eds-color-text-strong-on-emphasis);
+    --_bg-color: var(--eds-color-bg-fill-emphasis-default);
   }
 
-  .eds-button[data-variant='primary']:hover:not(:disabled) {
-    background-color: var(--eds-color-bg-fill-emphasis-hover);
+  .eds-button[data-variant='primary']:disabled {
+    --_bg-color: var(--eds-color-bg-fill-emphasis-disabled);
+    --_color: var(--eds-color-text-disabled);
+
+    cursor: not-allowed;
   }
 
-  .eds-button[data-variant='primary']:active:not(:disabled) {
-    background-color: var(--eds-color-bg-fill-emphasis-active);
+  .eds-button[data-variant='primary']:hover:not(:disabled) {
+    --_bg-color: var(--eds-color-bg-fill-emphasis-hover);
   }
 
-  .eds-button[data-variant='primary']:disabled {
-    cursor: not-allowed;
-    color: var(--eds-color-text-disabled);
-    background-color: var(--eds-color-bg-fill-emphasis-disabled);
+  .eds-button[data-variant='primary']:active:not(:disabled) {
+    --_bg-color: var(--eds-color-bg-fill-emphasis-active);
   }
 
   /* ===== SECONDARY VARIANT ===== */
 
   .eds-button[data-variant='secondary'] {
-    color: var(--eds-color-text-subtle);
-    background-color: transparent;
+    --_color: var(--eds-color-text-subtle);
+    --_bg-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));
   }
 
-  .eds-button[data-variant='secondary']:hover:not(:disabled) {
-    background-color: var(--eds-color-bg-fill-muted-default);
-  }
-
-  .eds-button[data-variant='secondary']:active:not(:disabled) {
-    background-color: var(--eds-color-bg-fill-muted-hover);
-  }
-
   .eds-button[data-variant='secondary']:disabled {
+    --_color: var(--eds-color-text-disabled);
+
     cursor: not-allowed;
-    color: var(--eds-color-text-disabled);
     outline: var(--eds-border-width-default, 1px) solid
       var(--eds-color-border-disabled);
     outline-offset: calc(-1 * var(--eds-border-width-default, 1px));
   }
 
-  /* ===== GHOST VARIANT ===== */
+  .eds-button[data-variant='secondary']:focus-visible {
+    outline-offset: var(--eds-sizing-stroke-thin);
+  }
 
-  .eds-button[data-variant='ghost'] {
-    color: var(--eds-color-text-subtle);
-    background-color: transparent;
+  .eds-button[data-variant='secondary']:hover:not(:disabled) {
+    --_bg-color: var(--eds-color-bg-fill-muted-default);
   }
 
-  .eds-button[data-variant='ghost']:hover:not(:disabled) {
-    background-color: var(--eds-color-bg-fill-muted-default);
+  .eds-button[data-variant='secondary']:active:not(:disabled) {
+    --_bg-color: var(--eds-color-bg-fill-muted-hover);
   }
 
-  .eds-button[data-variant='ghost']:active:not(:disabled) {
-    background-color: var(--eds-color-bg-fill-muted-hover);
+  /* ===== GHOST VARIANT ===== */
+
+  .eds-button[data-variant='ghost'] {
+    --_color: var(--eds-color-text-subtle);
+    --_bg-color: transparent;
   }
 
   .eds-button[data-variant='ghost']:disabled {
+    --_color: var(--eds-color-text-disabled);
+
     cursor: not-allowed;
-    color: var(--eds-color-text-disabled);
   }
 
-  /* ===== FOCUS STATE ===== */
+  .eds-button[data-variant='ghost']:hover:not(:disabled) {
+    --_bg-color: var(--eds-color-bg-fill-muted-default);
+  }
 
-  .eds-button:focus-visible {
-    outline: var(--eds-sizing-stroke-thick) solid
-      var(--eds-color-border-focus);
-    outline-offset: var(--eds-sizing-stroke-thin);
+  .eds-button[data-variant='ghost']:active:not(:disabled) {
+    --_bg-color: var(--eds-color-bg-fill-muted-hover);
   }
 
-  .eds-button[data-variant='secondary']:focus-visible {
+  /* ===== FOCUS STATE ===== */
+
+  .eds-button:focus-visible {
+    outline: var(--eds-sizing-stroke-thick) solid var(--eds-color-border-focus);
     outline-offset: var(--eds-sizing-stroke-thin);
   }
 
@@ -335,23 +1000,6 @@
     margin: 0;
   }
 }
-/*
- * 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.
- *
- * text-box/padding-block reset disables typography.css baseline padding —
- * button handles its own sizing via min-height + flexbox centering.
- */
-.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 {
     /* Layout - use CSS variable for configurable width */
@@ -1472,4 +2120,117 @@
     margin-inline-end: -4.8px;
   }
 }
+@layer eds-components {
+  .eds-chip {
+    cursor: pointer;
+    user-select: none;
+
+    display: inline-flex;
+    gap: var(--eds-typography-gap-horizontal);
+    align-items: center;
+
+    box-sizing: border-box;
+    padding-block: var(--eds-selectable-space-vertical);
+    padding-inline: var(--eds-selectable-space-horizontal);
+    border: none;
+    border-radius: var(--eds-spacing-border-radius-pill, 100vmax);
+
+    font: inherit;
+    color: inherit;
+
+    transition:
+      background-color 150ms ease-in-out,
+      outline-color 150ms ease-in-out,
+      color 150ms ease-in-out;
+
+    /* ===== DEFAULT VARIANT (solid muted fill) ===== */
+
+    &[data-variant='default'] {
+      color: var(--eds-color-text-subtle);
+      background-color: var(--eds-color-bg-fill-muted-default);
+      outline: none;
+    }
+
+    &[data-variant='default']:hover {
+      background-color: var(--eds-color-bg-fill-muted-hover);
+    }
+
+    &[data-variant='default']:active {
+      background-color: var(--eds-color-bg-fill-muted-active);
+    }
+
+    /* ===== OUTLINED VARIANT (border + transparent bg) ===== */
+
+    &[data-variant='outlined'] {
+      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));
+    }
+
+    &[data-variant='outlined']:hover {
+      background-color: var(--eds-color-bg-fill-muted-hover);
+    }
+
+    &[data-variant='outlined']:active {
+      background-color: var(--eds-color-bg-fill-muted-active);
+    }
+
+    /* ===== HIGH-CONTRAST VARIANT (emphasis fill + light text) ===== */
+
+    &[data-variant='high-contrast'] {
+      color: var(--eds-color-text-strong-on-emphasis);
+      background-color: var(--eds-color-bg-fill-emphasis-default);
+      outline: none;
+    }
+
+    &[data-variant='high-contrast']:hover {
+      background-color: var(--eds-color-bg-fill-emphasis-hover);
+    }
+
+    &[data-variant='high-contrast']:active {
+      background-color: var(--eds-color-bg-fill-emphasis-active);
+    }
+
+    /* ===== FOCUS STATE ===== */
+
+    &:focus-visible {
+      box-shadow:
+        0 0 0 var(--eds-sizing-stroke-thin) var(--eds-color-bg-canvas),
+        0 0 0 calc(var(--eds-sizing-stroke-thin) * 2)
+          var(--eds-color-border-focus);
+    }
+
+    /* ===== ICONS ===== */
+
+    & .eds-icon {
+      flex-shrink: 0;
+      margin-block: calc(-1 * var(--eds-selectable-space-vertical));
+      margin-inline: calc(-1 * var(--eds-selectable-space-vertical) / 2);
+    }
+  }
+}
+/*
+ * Outside @layer to override typography.css [data-font-family] { display: block }.
+ * data-font-family/data-font-size on the chip container establishes the typography
+ * context for gap and icon sizing tokens.
+ */
+.eds-chip {
+  display: inline-flex;
+}
+/*
+ * Label needs inline-flex to center custom icons with text.
+ * text-box: normal disables baseline trimming — chip handles sizing via
+ * padding + flexbox centering.
+ */
+.eds-chip > .label {
+  display: inline-flex;
+  gap: var(--eds-typography-gap-horizontal);
+  align-items: center;
+
+  padding-block: 0;
+
+  text-box: normal;
+}