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

package/build/index.css

@@ -2,6 +2,18 @@
 @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-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)}
@@ -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,52 +132,65 @@
     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,
@@ -182,21 +208,21 @@
    */
 
   .eds-button[data-selectable-space='lg'] {
+    gap: var(--eds-typography-gap-horizontal);
     min-height: 2.75rem; /* 44px */
     padding-inline: var(--eds-selectable-space-horizontal);
-    gap: var(--eds-typography-gap-horizontal);
   }
 
   .eds-button[data-selectable-space='md'] {
+    gap: var(--eds-typography-gap-horizontal);
     min-height: 2.25rem; /* 36px */
     padding-inline: var(--eds-selectable-space-horizontal);
-    gap: var(--eds-typography-gap-horizontal);
   }
 
   .eds-button[data-selectable-space='sm'] {
+    gap: var(--eds-typography-gap-horizontal);
     min-height: 1.5rem; /* 24px */
     padding-inline: var(--eds-selectable-space-horizontal);
-    gap: var(--eds-typography-gap-horizontal);
   }
 
   /* Comfortable density */
@@ -230,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) {
@@ -243,16 +269,16 @@
   }
 
   .eds-button[data-variant='primary']:disabled {
-    background-color: var(--eds-color-bg-fill-emphasis-disabled);
-    color: var(--eds-color-text-disabled);
     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));
@@ -267,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-disabled);
     outline-offset: calc(-1 * var(--eds-border-width-default, 1px));
-    color: var(--eds-color-text-disabled);
-    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) {
@@ -290,8 +316,8 @@
   }
 
   .eds-button[data-variant='ghost']:disabled {
-    color: var(--eds-color-text-disabled);
     cursor: not-allowed;
+    color: var(--eds-color-text-disabled);
   }
 
   /* ===== FOCUS STATE ===== */
@@ -310,12 +336,12 @@
   /* 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 since flexbox handles centering */
-  .eds-button[data-icon-only] .icon {
+  .eds-button[data-icon-only] .eds-icon {
     margin: 0;
   }
 }
@@ -327,12 +353,14 @@
  * text-box/padding-block reset disables typography.css baseline padding —
  * button handles its own sizing via min-height + flexbox centering.
  */
-.eds-button > span {
+.eds-button__label {
   display: inline-flex;
-  align-items: center;
   gap: var(--eds-typography-gap-horizontal);
-  text-box: normal;
+  align-items: center;
+
   padding-block: 0;
+
+  text-box: normal;
 }
 @layer eds-components {
   .eds-field {
@@ -392,6 +420,12 @@
     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-text-disabled);
@@ -943,10 +977,8 @@
     &:focus-within {
       outline-color: var(--eds-color-border-strong);
       box-shadow:
-        0 0 0 var(--eds-sizing-stroke-thick) var(--_bg-input),
-        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 */
@@ -956,10 +988,8 @@
       &:focus-within {
         outline-color: var(--eds-color-border-strong);
         box-shadow:
-          0 0 0 var(--eds-sizing-stroke-thick) var(--_bg-input),
-          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);
       }
     }
 
@@ -1013,8 +1043,7 @@
 
   /* Input/Textarea element */
   .eds-input {
-    /* Temporary alias until proper placeholder text token is available */
-    --_placeholder-text-color: var(--eds-color-border-strong);
+    --_placeholder-text-color: var(--eds-color-text-subtle);
 
     flex: 1;
     min-inline-size: 0;
@@ -1095,31 +1124,345 @@
   }
 
   .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);
+  }
+}
+@layer eds-components {
+  .eds-text-area {
+    & .label-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--eds-typography-gap-horizontal);
+      inline-size: 100%;
+
+      & > button {
+        flex-shrink: 0;
+        margin-block: calc(var(--eds-sizing-icon-xs) / -2);
+      }
+    }
 
-    &:hover,
-    &:focus-visible {
-      color: var(--eds-color-icon-info);
+    & .eds-input-container {
+      align-items: flex-start;
+      padding-block: var(--eds-container-space-vertical);
+      overflow: hidden;
+
+      & textarea.eds-input {
+        box-sizing: border-box;
+        overflow: auto;
+        white-space: pre-wrap;
+        text-overflow: clip;
+        resize: vertical;
+        padding-block-end: var(--eds-container-space-vertical);
+        padding-inline-end: var(--eds-selectable-space-horizontal);
+      }
 
-      & svg {
-        background: var(--eds-color-bg-fill-muted-hover);
-        border-radius: var(--eds-spacing-border-radius-pill);
+      &:has(+ .helper-row) {
+        margin-block-end: calc(
+          var(--eds-spacing-vertical-3xs) - var(--eds-generic-gap-vertical)
+        );
       }
     }
 
-    &: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);
+    & .helper-row {
+      display: flex;
+      align-items: baseline;
+      gap: var(--eds-typography-gap-horizontal);
+      inline-size: 100%;
+    }
+
+    & .char-count {
+      flex-shrink: 0;
+      color: var(--eds-color-text-subtle);
+    }
+  }
+}
+/* Must be outside @layer: [data-font-family] { margin: 0 } in variables.css
+   is unlayered and overrides any margin inside @layer eds-components. */
+.eds-text-area {
+  & .eds-error-icon {
+    margin-block-start: var(--eds-spacing-vertical-2xs);
+  }
+
+  & .char-count {
+    margin-inline-start: auto;
+  }
+
+  /* Extend textarea to bottom-right corner so the resize handle sits flush. */
+  & textarea.eds-input {
+    margin-block-end: calc(-1 * var(--eds-container-space-vertical));
+    margin-inline-end: calc(-1 * var(--eds-selectable-space-horizontal));
+  }
+}
+@layer eds-components {
+  .eds-search {
+    /* Color changes based on state — accent by default, overridden when readonly/disabled */
+    & .search-icon {
+      color: var(--eds-color-text-subtle);
+
+      [data-readonly] & {
+        color: var(--eds-color-border-strong);
+      }
+
+      [data-disabled] & {
+        color: var(--eds-color-text-disabled);
+      }
+    }
+
+    /* Hide native clear button — replaced by our custom one */
+    & [type='search']::-webkit-search-cancel-button {
+      appearance: none;
+    }
+  }
+}
+@layer eds-components {
+  .eds-link {
+    color: var(--eds-color-text-link);
+    text-decoration: underline;
+    text-decoration-thickness: var(--eds-sizing-stroke-thin);
+    text-underline-offset: var(--eds-spacing-vertical-4xs);
+
+    transition: color 150ms ease-in-out;
+  }
+
+  .eds-link:hover {
+    color: var(--eds-color-text-strong);
+  }
+
+  .eds-link:focus-visible {
+    border-radius: var(--eds-spacing-border-radius-rounded);
+    color: var(--eds-color-text-strong);
+    outline: var(--eds-sizing-stroke-thin) solid var(--eds-color-border-focus);
+    outline-offset: var(--eds-spacing-vertical-3xs);
+  }
+
+  /* Standalone variant: flex layout for icon + text */
+  .eds-link[data-variant='standalone'] {
+    position: relative;
+
+    gap: var(--eds-typography-gap-horizontal);
+    align-items: center;
+
+    border-bottom: var(--eds-sizing-stroke-thin) solid currentcolor;
+
+    text-decoration: none;
+  }
+
+  /* Use pseudo-element for focus ring so it can have border-radius
+     while border-bottom stays straight */
+  .eds-link[data-variant='standalone']:focus-visible {
+    border-radius: 0;
+    outline: none;
+  }
+
+  .eds-link[data-variant='standalone']:focus-visible::after {
+    pointer-events: none;
+    content: '';
+
+    position: absolute;
+    inset: calc(var(--eds-spacing-vertical-3xs) * -1);
+
+    border: var(--eds-sizing-stroke-thin) solid var(--eds-color-border-focus);
+    border-radius: var(--eds-spacing-border-radius-rounded);
+  }
+}
+/* Outside @layer to override typography.css [data-font-family] { display: block } */
+.eds-link[data-variant='standalone'] {
+  display: inline-flex;
+}
+@layer eds-components {
+  .eds-tooltip {
+    /* Gap between tooltip and anchor; also used for the arrow height */
+    --_arrow: var(--eds-spacing-vertical-3xs);
+    /* Width of the arrow tip (1px = visually sharp, matches Figma) */
+    --_tip: 1px;
+
+    /* UA popover reset */
+    position: fixed;
+    margin: 0;
+    inset: auto;
+    border: none;
+    overflow: visible;
+
+    position-anchor: var(--tooltip-anchor-name);
+    width: max-content;
+    background-color: var(--eds-color-text-strong);
+    color: var(--eds-color-text-strong-on-emphasis);
+    border-radius: var(--eds-spacing-border-radius-rounded);
+    padding-block: var(--eds-container-space-vertical);
+    padding-inline: var(--eds-container-space-horizontal);
+
+    /* Rectangle shadow — always downward regardless of arrow direction (no shadow tokens in EDS 2.0) */
+    box-shadow:
+      0px 2px 4px rgba(0, 0, 0, 0.14),
+      0px 3px 4px rgba(0, 0, 0, 0.12),
+      0px 1px 5px rgba(0, 0, 0, 0.2);
+
+    /* Arrow: ::before is expanded by --_arrow on all sides via `inset: calc(-1 * var(--_arrow))`.
+       A 16-point star clip-path pre-draws all 4 arrows. `margin: inherit` shifts the pseudo-element
+       to match the tooltip's own margin, so 3 arrows hide behind the tooltip body (z-index:-1)
+       and only the gap-side arrow remains visible. */
+    &::before {
+      content: '';
+      position: absolute;
+      z-index: -1;
+      background: inherit;
+      inset: calc(-1 * var(--_arrow));
+      margin: inherit;
+      clip-path: polygon(
+        /* top */
+        calc(50% - var(--_arrow)) var(--_arrow),
+        calc(50% - var(--_tip)) 0,
+        calc(50% + var(--_tip)) 0,
+        calc(50% + var(--_arrow)) var(--_arrow),
+        /* right */
+        calc(100% - var(--_arrow)) calc(50% - var(--_arrow)),
+        100% calc(50% - var(--_tip)),
+        100% calc(50% + var(--_tip)),
+        calc(100% - var(--_arrow)) calc(50% + var(--_arrow)),
+        /* bottom */
+        calc(50% + var(--_arrow)) calc(100% - var(--_arrow)),
+        calc(50% + var(--_tip)) 100%,
+        calc(50% - var(--_tip)) 100%,
+        calc(50% - var(--_arrow)) calc(100% - var(--_arrow)),
+        /* left */
+        var(--_arrow) calc(50% + var(--_arrow)),
+        0 calc(50% + var(--_tip)),
+        0 calc(50% - var(--_tip)),
+        var(--_arrow) calc(50% - var(--_arrow))
+      );
+    }
+
+    &[data-placement='top'] {
+      position-area: top;
+      bottom: var(--_arrow);
+      margin: var(--_arrow) var(--_arrow) 0;
+      position-try-fallbacks: flip-block, --eds-tooltip-bottom;
+    }
+
+    &[data-placement='bottom'] {
+      position-area: bottom;
+      top: var(--_arrow);
+      margin: 0 var(--_arrow) var(--_arrow);
+      position-try-fallbacks: flip-block, --eds-tooltip-top;
+    }
+
+    &[data-placement='right'] {
+      position-area: right;
+      left: var(--_arrow);
+      margin: var(--_arrow) var(--_arrow) var(--_arrow) 0;
+      position-try-fallbacks: flip-inline, --eds-tooltip-left;
+    }
+
+    &[data-placement='left'] {
+      position-area: left;
+      right: var(--_arrow);
+      margin: var(--_arrow) 0 var(--_arrow) var(--_arrow);
+      position-try-fallbacks: flip-inline, --eds-tooltip-right;
     }
+
+    & .label {
+      font-feature-settings: 'lnum', 'tnum';
+    }
+  }
+
+  .eds-tooltip-anchor {
+    display: inline-block;
+    anchor-name: var(--tooltip-anchor-name);
+  }
+}
+/* @position-try must be outside @layer per spec. */
+@position-try --eds-tooltip-bottom {
+  position-area: bottom;
+  top: var(--_arrow);
+  margin: 0 var(--_arrow) var(--_arrow);
+}
+@position-try --eds-tooltip-top {
+  position-area: top;
+  bottom: var(--_arrow);
+  margin: var(--_arrow) var(--_arrow) 0;
+}
+@position-try --eds-tooltip-left {
+  position-area: left;
+  right: var(--_arrow);
+  margin: var(--_arrow) 0 var(--_arrow) var(--_arrow);
+}
+@position-try --eds-tooltip-right {
+  position-area: right;
+  left: var(--_arrow);
+  margin: var(--_arrow) var(--_arrow) var(--_arrow) 0;
+}
+@layer eds-components {
+  .eds-banner {
+    position: relative;
+
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--eds-container-space-horizontal);
+    align-items: flex-start;
+
+    padding: var(--eds-container-space-vertical)
+      var(--eds-container-space-horizontal);
+    border-radius: var(--eds-spacing-border-radius-rounded, 4px);
+
+    background: var(--eds-color-bg-surface);
+    outline: var(--eds-sizing-stroke-thin) solid var(--eds-color-border-medium);
+  }
+
+  .eds-banner__icon {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+
+    height: var(--eds-typography-line-height, 1.5rem);
+
+    /*
+     * Negative margin compensates for Figma's icon container padding,
+     * pulling the icon closer to the component edge.
+     * Figma variable: selectable/icon-container-padding (↕︎ -6px, ↔︎ -4.8px)
+     * See #4684 for exporting this as a CSS custom property.
+     */
+    margin-block: -6px;
+    margin-inline-start: -4.8px;
+
+    color: var(--eds-color-text-subtle);
+  }
+
+  .eds-banner__message {
+    flex: 1;
+    min-width: 0;
+    margin: 0;
+    color: var(--eds-color-text-strong);
+  }
+
+  .eds-banner__actions {
+    display: flex;
+    gap: var(--eds-selectable-gap-horizontal, 8px);
+    align-items: center;
+  }
+
+  .eds-banner__actions[data-placement='bottom'] {
+    flex-basis: 100%;
+  }
+
+  .eds-banner:has(.eds-banner__dismiss) {
+    padding-inline-end: calc(
+      var(--eds-container-space-horizontal) + 24px +
+        var(--eds-container-space-horizontal)
+    );
+  }
+
+  .eds-banner__dismiss {
+    position: absolute;
+    top: var(--eds-container-space-vertical);
+    right: var(--eds-container-space-horizontal);
+
+    /* Same Figma icon container padding compensation as .eds-banner__icon */
+    margin-block: -6px;
+    margin-inline-end: -4.8px;
   }
 }