@navikt/ds-css 4.12.2 → 5.0.1

package/dist/global/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 18 Aug 2023 10:19:31 GMT
+ * Generated on Fri, 18 Aug 2023 10:23:38 GMT
  */
 
 :root, :host {
@@ -109,26 +109,26 @@
   --a-blue-200: rgba(153, 195, 255, 1);
   --a-blue-100: rgba(204, 225, 255, 1);
   --a-blue-50: rgba(230, 240, 255, 1);
-  --a-grayalpha-900: rgba(0, 0, 0, 0.85);
-  --a-grayalpha-800: rgba(0, 0, 0, 0.75);
-  --a-grayalpha-700: rgba(0, 0, 0, 0.65);
-  --a-grayalpha-600: rgba(0, 0, 0, 0.56);
-  --a-grayalpha-500: rgba(0, 0, 0, 0.44);
-  --a-grayalpha-400: rgba(0, 0, 0, 0.31);
-  --a-grayalpha-300: rgba(0, 0, 0, 0.19);
-  --a-grayalpha-200: rgba(0, 0, 0, 0.1);
-  --a-grayalpha-100: rgba(0, 0, 0, 0.05);
-  --a-grayalpha-50: rgba(0, 0, 0, 0.03);
-  --a-gray-900: rgba(38, 38, 38, 1);
-  --a-gray-800: rgba(64, 64, 64, 1);
-  --a-gray-700: rgba(89, 89, 89, 1);
-  --a-gray-600: rgba(112, 112, 112, 1);
-  --a-gray-500: rgba(143, 143, 143, 1);
-  --a-gray-400: rgba(176, 176, 176, 1);
-  --a-gray-300: rgba(207, 207, 207, 1);
-  --a-gray-200: rgba(229, 229, 229, 1);
-  --a-gray-100: rgba(241, 241, 241, 1);
-  --a-gray-50: rgba(247, 247, 247, 1);
+  --a-grayalpha-900: rgba(2, 5, 9, 0.87);
+  --a-grayalpha-800: rgba(3, 11, 22, 0.75);
+  --a-grayalpha-700: rgba(1, 11, 24, 0.68);
+  --a-grayalpha-600: rgba(2, 15, 34, 0.6);
+  --a-grayalpha-500: rgba(2, 20, 49, 0.49);
+  --a-grayalpha-400: rgba(5, 23, 51, 0.34);
+  --a-grayalpha-300: rgba(7, 26, 54, 0.21);
+  --a-grayalpha-200: rgba(17, 41, 64, 0.13);
+  --a-grayalpha-100: rgba(18, 43, 68, 0.08);
+  --a-grayalpha-50: rgba(38, 55, 89, 0.06);
+  --a-gray-900: rgba(35, 38, 42, 1);
+  --a-gray-800: rgba(66, 71, 79, 1);
+  --a-gray-700: rgba(82, 89, 98, 1);
+  --a-gray-600: rgba(103, 111, 123, 1);
+  --a-gray-500: rgba(131, 140, 154, 1);
+  --a-gray-400: rgba(170, 176, 186, 1);
+  --a-gray-300: rgba(203, 207, 213, 1);
+  --a-gray-200: rgba(224, 227, 230, 1);
+  --a-gray-100: rgba(236, 238, 240, 1);
+  --a-gray-50: rgba(242, 243, 245, 1);
   --a-nav-red: rgba(195, 0, 0, 1);
   --a-white: rgba(255, 255, 255, 1);
   --a-transparent: rgba(255, 255, 255, 0);
@@ -188,7 +188,7 @@
   --a-icon-success: var(--a-green-500);
   --a-icon-action: var(--a-blue-500);
   --a-icon-action-on-action-subtle: var(--a-blue-600);
-  --a-icon-action-selected: var(--a-deepblue-500);
+  --a-icon-action-selected: var(--a-blue-700);
   --a-icon-subtle: var(--a-grayalpha-700);
   --a-icon-default: var(--a-gray-900);
   --a-surface-alt-3: var(--a-deepblue-500);
@@ -228,16 +228,16 @@
   --a-surface-neutral-subtle: var(--a-grayalpha-100);
   --a-surface-neutral-subtle-hover: var(--a-grayalpha-200);
   --a-surface-action: var(--a-blue-500);
-  --a-surface-action-selected: var(--a-deepblue-500);
-  --a-surface-action-selected-hover: var(--a-deepblue-600);
-  --a-surface-action-active: var(--a-deepblue-500);
+  --a-surface-action-selected: var(--a-blue-700);
+  --a-surface-action-selected-hover: var(--a-blue-800);
+  --a-surface-action-active: var(--a-blue-700);
   --a-surface-action-hover: var(--a-blue-600);
   --a-surface-action-subtle: var(--a-blue-50);
   --a-surface-action-subtle-hover: var(--a-blue-100);
   --a-surface-inverted: var(--a-gray-900);
   --a-surface-inverted-active: var(--a-gray-700);
   --a-surface-inverted-hover: var(--a-gray-800);
-  --a-surface-backdrop: var(--a-grayalpha-700);
+  --a-surface-backdrop: var(--a-grayalpha-500);
   --a-surface-transparent: var(--a-transparent);
   --a-surface-subtle: var(--a-gray-50);
   --a-surface-selected: var(--a-blue-50);
@@ -258,7 +258,7 @@
   --a-text-on-inverted: var(--a-white);
   --a-text-action: var(--a-blue-500);
   --a-text-action-on-action-subtle: var(--a-blue-600);
-  --a-text-action-selected: var(--a-deepblue-500);
+  --a-text-action-selected: var(--a-blue-700);
   --a-text-danger: var(--a-red-500);
   --a-text-visited: var(--a-purple-500);
   --a-text-subtle: var(--a-grayalpha-700);
@@ -294,9 +294,9 @@
   --a-border-success: var(--a-green-500);
   --a-border-selected: var(--a-blue-500);
   --a-border-action: var(--a-blue-500);
-  --a-border-action-selected: var(--a-deepblue-500);
-  --a-border-subtle: var(--a-grayalpha-200);
-  --a-border-subtle-hover: var(--a-grayalpha-300);
+  --a-border-action-selected: var(--a-blue-700);
+  --a-border-subtle: var(--a-grayalpha-300);
+  --a-border-subtle-hover: var(--a-grayalpha-400);
   --a-border-divider: var(--a-grayalpha-300);
   --a-border-strong: var(--a-grayalpha-700);
   --a-border-default: var(--a-grayalpha-500);

package/dist/global/tokens.min.css

@@ -1 +1 @@
-:host,:root{--a-spacing-05:0.125rem;--a-spacing-32:8rem;--a-spacing-24:6rem;--a-spacing-20:5rem;--a-spacing-18:4.5rem;--a-spacing-16:4rem;--a-spacing-14:3.5rem;--a-spacing-12:3rem;--a-spacing-11:2.75rem;--a-spacing-10:2.5rem;--a-spacing-9:2.25rem;--a-spacing-8:2rem;--a-spacing-7:1.75rem;--a-spacing-6:1.5rem;--a-spacing-5:1.25rem;--a-spacing-4:1rem;--a-spacing-3:0.75rem;--a-spacing-2:0.5rem;--a-spacing-1:0.25rem;--a-spacing-0:0;--a-shadow-xlarge:0px 2px 5px 0px rgba(0,0,0,.15),0px 10px 24px 0px rgba(0,0,0,.18),0px 0px 1px 0px rgba(0,0,0,.08);--a-shadow-large:0px 2px 5px 0px rgba(0,0,0,.15),0px 10px 16px 0px rgba(0,0,0,.12),0px 0px 1px 0px rgba(0,0,0,.12);--a-shadow-medium:0px 5px 12px 0px rgba(0,0,0,.13),0px 1px 3px 0px rgba(0,0,0,.1),0px 0px 1px 0px rgba(0,0,0,.15);--a-shadow-small:0px 3px 8px 0px rgba(0,0,0,.1),0px 1px 3px 0px rgba(0,0,0,.1),0px 0px 1px 0px rgba(0,0,0,.18);--a-shadow-xsmall:0px 1px 3px 0px rgba(0,0,0,.15),0px 0px 1px 0px rgba(0,0,0,.2);--a-purple-900:#1f142f;--a-purple-800:#301f46;--a-purple-700:#412b5d;--a-purple-600:#523874;--a-purple-500:#634689;--a-purple-400:#8269a2;--a-purple-300:#a18dbb;--a-purple-200:#c0b2d2;--a-purple-100:#e0d8e9;--a-purple-50:#efecf4;--a-orange-900:#523300;--a-orange-800:#7d4c00;--a-orange-700:#a86400;--a-orange-600:#c77300;--a-orange-500:#ff9100;--a-orange-400:#fa3;--a-orange-300:#ffc166;--a-orange-200:#ffd799;--a-orange-100:#ffeccc;--a-orange-50:#fff9f0;--a-limegreen-900:#474e00;--a-limegreen-800:#666e00;--a-limegreen-700:#7f8900;--a-limegreen-600:#939e00;--a-limegreen-500:#a2ad00;--a-limegreen-400:#c1cb33;--a-limegreen-300:#d9e366;--a-limegreen-200:#ecf399;--a-limegreen-100:#f9fccc;--a-limegreen-50:#fdffe6;--a-lightblue-900:#134852;--a-lightblue-800:#236b7d;--a-lightblue-700:#368da8;--a-lightblue-600:#4cadcd;--a-lightblue-500:#66cbec;--a-lightblue-400:#7cdaf8;--a-lightblue-300:#97e6ff;--a-lightblue-200:#b5f1ff;--a-lightblue-100:#d8f9ff;--a-lightblue-50:#ebfcff;--a-green-900:#003b0f;--a-green-800:#005519;--a-green-700:#006a23;--a-green-600:#007c2e;--a-green-500:#06893a;--a-green-400:#33aa5f;--a-green-300:#66c786;--a-green-200:#99dead;--a-green-100:#ccf1d6;--a-green-50:#f3fcf5;--a-deepblue-900:#00243a;--a-deepblue-800:#003453;--a-deepblue-700:#004367;--a-deepblue-600:#005077;--a-deepblue-500:#005b82;--a-deepblue-400:#3380a5;--a-deepblue-300:#66a3c4;--a-deepblue-200:#99c4dd;--a-deepblue-100:#cce2f0;--a-deepblue-50:#e6f1f8;--a-red-900:#260000;--a-red-800:#5c0000;--a-red-700:#8c0000;--a-red-600:#ad0000;--a-red-500:#c30000;--a-red-400:#de2e2e;--a-red-300:#f25c5c;--a-red-200:#f68282;--a-red-100:#ffc2c2;--a-red-50:#ffe6e6;--a-blue-900:#002252;--a-blue-800:#00347d;--a-blue-700:#00459c;--a-blue-600:#0056b4;--a-blue-500:#0067c5;--a-blue-400:#3386e0;--a-blue-300:#66a5f4;--a-blue-200:#99c3ff;--a-blue-100:#cce1ff;--a-blue-50:#e6f0ff;--a-grayalpha-900:rgba(0,0,0,.85);--a-grayalpha-800:rgba(0,0,0,.75);--a-grayalpha-700:rgba(0,0,0,.65);--a-grayalpha-600:rgba(0,0,0,.56);--a-grayalpha-500:rgba(0,0,0,.44);--a-grayalpha-400:rgba(0,0,0,.31);--a-grayalpha-300:rgba(0,0,0,.19);--a-grayalpha-200:rgba(0,0,0,.1);--a-grayalpha-100:rgba(0,0,0,.05);--a-grayalpha-50:rgba(0,0,0,.03);--a-gray-900:#262626;--a-gray-800:#404040;--a-gray-700:#595959;--a-gray-600:#707070;--a-gray-500:#8f8f8f;--a-gray-400:#b0b0b0;--a-gray-300:#cfcfcf;--a-gray-200:#e5e5e5;--a-gray-100:#f1f1f1;--a-gray-50:#f7f7f7;--a-nav-red:#c30000;--a-white:#fff;--a-transparent:hsla(0,0%,100%,0);--a-border-radius-full:9999px;--a-border-radius-xlarge:12px;--a-border-radius-large:8px;--a-border-radius-medium:4px;--a-border-radius-small:2px;--a-z-index-tooltip:3000;--a-z-index-focus:10;--a-z-index-popover:1000;--a-z-index-modal:2000;--a-font-weight-regular:400;--a-font-weight-bold:600;--a-font-size-small:0.875rem;--a-font-size-medium:1rem;--a-font-size-large:1.125rem;--a-font-size-xlarge:1.25rem;--a-font-size-heading-xsmall:1.125rem;--a-font-size-heading-small:1.25rem;--a-font-size-heading-medium:1.5rem;--a-font-size-heading-large:1.75rem;--a-font-size-heading-xlarge:2rem;--a-font-size-heading-2xlarge:2.5rem;--a-font-line-height-medium:1.25rem;--a-font-line-height-large:1.5rem;--a-font-line-height-xlarge:1.75rem;--a-font-line-height-heading-xsmall:1.5rem;--a-font-line-height-heading-small:1.75rem;--a-font-line-height-heading-medium:2rem;--a-font-line-height-heading-large:2.25rem;--a-font-line-height-heading-xlarge:2.5rem;--a-font-line-height-heading-2xlarge:3.25rem;--a-font-family:"Source Sans Pro",Arial,sans-serif;--a-breakpoint-xl-down:1279px;--a-breakpoint-xl:1280px;--a-breakpoint-lg-down:1023px;--a-breakpoint-lg:1024px;--a-breakpoint-md-down:767px;--a-breakpoint-md:768px;--a-breakpoint-sm-down:479px;--a-breakpoint-sm:480px;--a-breakpoint-xs:0;--a-icon-on-info:var(--a-gray-900);--a-icon-on-warning:var(--a-gray-900);--a-icon-on-danger:var(--a-white);--a-icon-on-success:var(--a-white);--a-icon-on-action:var(--a-white);--a-icon-on-inverted:var(--a-white);--a-icon-on-neutral:var(--a-white);--a-icon-alt-3:var(--a-deepblue-400);--a-icon-alt-2:var(--a-limegreen-700);--a-icon-alt-1:var(--a-purple-500);--a-icon-info:var(--a-lightblue-800);--a-icon-warning:var(--a-orange-600);--a-icon-danger:var(--a-red-500);--a-icon-success:var(--a-green-500);--a-icon-action:var(--a-blue-500);--a-icon-action-on-action-subtle:var(--a-blue-600);--a-icon-action-selected:var(--a-deepblue-500);--a-icon-subtle:var(--a-grayalpha-700);--a-icon-default:var(--a-gray-900);--a-surface-alt-3:var(--a-deepblue-500);--a-surface-alt-3-strong:var(--a-deepblue-800);--a-surface-alt-3-moderate:var(--a-deepblue-200);--a-surface-alt-3-subtle:var(--a-deepblue-100);--a-surface-alt-2:var(--a-limegreen-400);--a-surface-alt-2-moderate:var(--a-limegreen-200);--a-surface-alt-2-subtle:var(--a-limegreen-100);--a-surface-alt-1:var(--a-purple-400);--a-surface-alt-1-moderate:var(--a-purple-200);--a-surface-alt-1-subtle:var(--a-purple-100);--a-surface-info:var(--a-lightblue-500);--a-surface-info-moderate:var(--a-lightblue-200);--a-surface-info-subtle:var(--a-lightblue-100);--a-surface-info-subtle-hover:var(--a-lightblue-200);--a-surface-warning:var(--a-orange-500);--a-surface-warning-moderate:var(--a-orange-200);--a-surface-warning-subtle:var(--a-orange-100);--a-surface-warning-subtle-hover:var(--a-orange-200);--a-surface-danger:var(--a-red-500);--a-surface-danger-active:var(--a-red-700);--a-surface-danger-hover:var(--a-red-600);--a-surface-danger-moderate:var(--a-red-200);--a-surface-danger-subtle:var(--a-red-100);--a-surface-danger-subtle-hover:var(--a-red-200);--a-surface-success-hover:var(--a-green-600);--a-surface-success:var(--a-green-500);--a-surface-success-moderate:var(--a-green-200);--a-surface-success-subtle:var(--a-green-100);--a-surface-success-subtle-hover:var(--a-green-200);--a-surface-neutral:var(--a-gray-700);--a-surface-neutral-active:var(--a-gray-900);--a-surface-neutral-selected:var(--a-gray-900);--a-surface-neutral-hover:var(--a-gray-800);--a-surface-neutral-moderate:var(--a-grayalpha-200);--a-surface-neutral-subtle:var(--a-grayalpha-100);--a-surface-neutral-subtle-hover:var(--a-grayalpha-200);--a-surface-action:var(--a-blue-500);--a-surface-action-selected:var(--a-deepblue-500);--a-surface-action-selected-hover:var(--a-deepblue-600);--a-surface-action-active:var(--a-deepblue-500);--a-surface-action-hover:var(--a-blue-600);--a-surface-action-subtle:var(--a-blue-50);--a-surface-action-subtle-hover:var(--a-blue-100);--a-surface-inverted:var(--a-gray-900);--a-surface-inverted-active:var(--a-gray-700);--a-surface-inverted-hover:var(--a-gray-800);--a-surface-backdrop:var(--a-grayalpha-700);--a-surface-transparent:var(--a-transparent);--a-surface-subtle:var(--a-gray-50);--a-surface-selected:var(--a-blue-50);--a-surface-active:var(--a-grayalpha-200);--a-surface-hover:var(--a-grayalpha-100);--a-surface-default:var(--a-white);--a-bg-subtle:var(--a-gray-100);--a-bg-default:var(--a-white);--a-text-on-alt-3:var(--a-white);--a-text-on-alt-2:var(--a-gray-900);--a-text-on-alt-1:var(--a-white);--a-text-on-info:var(--a-gray-900);--a-text-on-warning:var(--a-gray-900);--a-text-on-danger:var(--a-white);--a-text-on-success:var(--a-white);--a-text-on-action:var(--a-white);--a-text-on-neutral:var(--a-white);--a-text-on-inverted:var(--a-white);--a-text-action:var(--a-blue-500);--a-text-action-on-action-subtle:var(--a-blue-600);--a-text-action-selected:var(--a-deepblue-500);--a-text-danger:var(--a-red-500);--a-text-visited:var(--a-purple-500);--a-text-subtle:var(--a-grayalpha-700);--a-text-default:var(--a-gray-900);--a-data-border-6:var(--a-purple-400);--a-data-border-5:var(--a-green-400);--a-data-border-4:var(--a-lightblue-700);--a-data-border-3:var(--a-orange-600);--a-data-border-2:var(--a-deepblue-500);--a-data-border-1:var(--a-blue-400);--a-data-surface-6-subtle:var(--a-purple-200);--a-data-surface-6:var(--a-purple-400);--a-data-surface-5-subtle:var(--a-green-200);--a-data-surface-5:var(--a-green-400);--a-data-surface-4-subtle:var(--a-lightblue-500);--a-data-surface-4:var(--a-lightblue-700);--a-data-surface-3-subtle:var(--a-orange-300);--a-data-surface-3:var(--a-orange-600);--a-data-surface-2-subtle:var(--a-deepblue-200);--a-data-surface-2:var(--a-deepblue-500);--a-data-surface-1-subtle:var(--a-blue-100);--a-data-surface-1:var(--a-blue-400);--a-border-alt-3:var(--a-deepblue-500);--a-border-alt-2:var(--a-limegreen-700);--a-border-alt-1:var(--a-purple-400);--a-border-on-inverted-subtle:var(--a-gray-700);--a-border-on-inverted:var(--a-gray-200);--a-border-focus:var(--a-blue-800);--a-border-focus-on-inverted:var(--a-blue-200);--a-border-info:var(--a-lightblue-700);--a-border-warning:var(--a-orange-600);--a-border-danger:var(--a-red-500);--a-border-success:var(--a-green-500);--a-border-selected:var(--a-blue-500);--a-border-action:var(--a-blue-500);--a-border-action-selected:var(--a-deepblue-500);--a-border-subtle:var(--a-grayalpha-200);--a-border-subtle-hover:var(--a-grayalpha-300);--a-border-divider:var(--a-grayalpha-300);--a-border-strong:var(--a-grayalpha-700);--a-border-default:var(--a-grayalpha-500);--a-shadow-focus:0 0 0 3px var(--a-border-focus);--a-shadow-focus-inverted:0 0 0 3px var(--a-border-focus-on-inverted)}
+:host,:root{--a-spacing-05:0.125rem;--a-spacing-32:8rem;--a-spacing-24:6rem;--a-spacing-20:5rem;--a-spacing-18:4.5rem;--a-spacing-16:4rem;--a-spacing-14:3.5rem;--a-spacing-12:3rem;--a-spacing-11:2.75rem;--a-spacing-10:2.5rem;--a-spacing-9:2.25rem;--a-spacing-8:2rem;--a-spacing-7:1.75rem;--a-spacing-6:1.5rem;--a-spacing-5:1.25rem;--a-spacing-4:1rem;--a-spacing-3:0.75rem;--a-spacing-2:0.5rem;--a-spacing-1:0.25rem;--a-spacing-0:0;--a-shadow-xlarge:0px 2px 5px 0px rgba(0,0,0,.15),0px 10px 24px 0px rgba(0,0,0,.18),0px 0px 1px 0px rgba(0,0,0,.08);--a-shadow-large:0px 2px 5px 0px rgba(0,0,0,.15),0px 10px 16px 0px rgba(0,0,0,.12),0px 0px 1px 0px rgba(0,0,0,.12);--a-shadow-medium:0px 5px 12px 0px rgba(0,0,0,.13),0px 1px 3px 0px rgba(0,0,0,.1),0px 0px 1px 0px rgba(0,0,0,.15);--a-shadow-small:0px 3px 8px 0px rgba(0,0,0,.1),0px 1px 3px 0px rgba(0,0,0,.1),0px 0px 1px 0px rgba(0,0,0,.18);--a-shadow-xsmall:0px 1px 3px 0px rgba(0,0,0,.15),0px 0px 1px 0px rgba(0,0,0,.2);--a-purple-900:#1f142f;--a-purple-800:#301f46;--a-purple-700:#412b5d;--a-purple-600:#523874;--a-purple-500:#634689;--a-purple-400:#8269a2;--a-purple-300:#a18dbb;--a-purple-200:#c0b2d2;--a-purple-100:#e0d8e9;--a-purple-50:#efecf4;--a-orange-900:#523300;--a-orange-800:#7d4c00;--a-orange-700:#a86400;--a-orange-600:#c77300;--a-orange-500:#ff9100;--a-orange-400:#fa3;--a-orange-300:#ffc166;--a-orange-200:#ffd799;--a-orange-100:#ffeccc;--a-orange-50:#fff9f0;--a-limegreen-900:#474e00;--a-limegreen-800:#666e00;--a-limegreen-700:#7f8900;--a-limegreen-600:#939e00;--a-limegreen-500:#a2ad00;--a-limegreen-400:#c1cb33;--a-limegreen-300:#d9e366;--a-limegreen-200:#ecf399;--a-limegreen-100:#f9fccc;--a-limegreen-50:#fdffe6;--a-lightblue-900:#134852;--a-lightblue-800:#236b7d;--a-lightblue-700:#368da8;--a-lightblue-600:#4cadcd;--a-lightblue-500:#66cbec;--a-lightblue-400:#7cdaf8;--a-lightblue-300:#97e6ff;--a-lightblue-200:#b5f1ff;--a-lightblue-100:#d8f9ff;--a-lightblue-50:#ebfcff;--a-green-900:#003b0f;--a-green-800:#005519;--a-green-700:#006a23;--a-green-600:#007c2e;--a-green-500:#06893a;--a-green-400:#33aa5f;--a-green-300:#66c786;--a-green-200:#99dead;--a-green-100:#ccf1d6;--a-green-50:#f3fcf5;--a-deepblue-900:#00243a;--a-deepblue-800:#003453;--a-deepblue-700:#004367;--a-deepblue-600:#005077;--a-deepblue-500:#005b82;--a-deepblue-400:#3380a5;--a-deepblue-300:#66a3c4;--a-deepblue-200:#99c4dd;--a-deepblue-100:#cce2f0;--a-deepblue-50:#e6f1f8;--a-red-900:#260000;--a-red-800:#5c0000;--a-red-700:#8c0000;--a-red-600:#ad0000;--a-red-500:#c30000;--a-red-400:#de2e2e;--a-red-300:#f25c5c;--a-red-200:#f68282;--a-red-100:#ffc2c2;--a-red-50:#ffe6e6;--a-blue-900:#002252;--a-blue-800:#00347d;--a-blue-700:#00459c;--a-blue-600:#0056b4;--a-blue-500:#0067c5;--a-blue-400:#3386e0;--a-blue-300:#66a5f4;--a-blue-200:#99c3ff;--a-blue-100:#cce1ff;--a-blue-50:#e6f0ff;--a-grayalpha-900:rgba(2,5,9,.87);--a-grayalpha-800:rgba(3,11,22,.75);--a-grayalpha-700:rgba(1,11,24,.68);--a-grayalpha-600:rgba(2,15,34,.6);--a-grayalpha-500:rgba(2,20,49,.49);--a-grayalpha-400:rgba(5,23,51,.34);--a-grayalpha-300:rgba(7,26,54,.21);--a-grayalpha-200:rgba(17,41,64,.13);--a-grayalpha-100:rgba(18,43,68,.08);--a-grayalpha-50:rgba(38,55,89,.06);--a-gray-900:#23262a;--a-gray-800:#42474f;--a-gray-700:#525962;--a-gray-600:#676f7b;--a-gray-500:#838c9a;--a-gray-400:#aab0ba;--a-gray-300:#cbcfd5;--a-gray-200:#e0e3e6;--a-gray-100:#eceef0;--a-gray-50:#f2f3f5;--a-nav-red:#c30000;--a-white:#fff;--a-transparent:hsla(0,0%,100%,0);--a-border-radius-full:9999px;--a-border-radius-xlarge:12px;--a-border-radius-large:8px;--a-border-radius-medium:4px;--a-border-radius-small:2px;--a-z-index-tooltip:3000;--a-z-index-focus:10;--a-z-index-popover:1000;--a-z-index-modal:2000;--a-font-weight-regular:400;--a-font-weight-bold:600;--a-font-size-small:0.875rem;--a-font-size-medium:1rem;--a-font-size-large:1.125rem;--a-font-size-xlarge:1.25rem;--a-font-size-heading-xsmall:1.125rem;--a-font-size-heading-small:1.25rem;--a-font-size-heading-medium:1.5rem;--a-font-size-heading-large:1.75rem;--a-font-size-heading-xlarge:2rem;--a-font-size-heading-2xlarge:2.5rem;--a-font-line-height-medium:1.25rem;--a-font-line-height-large:1.5rem;--a-font-line-height-xlarge:1.75rem;--a-font-line-height-heading-xsmall:1.5rem;--a-font-line-height-heading-small:1.75rem;--a-font-line-height-heading-medium:2rem;--a-font-line-height-heading-large:2.25rem;--a-font-line-height-heading-xlarge:2.5rem;--a-font-line-height-heading-2xlarge:3.25rem;--a-font-family:"Source Sans Pro",Arial,sans-serif;--a-breakpoint-xl-down:1279px;--a-breakpoint-xl:1280px;--a-breakpoint-lg-down:1023px;--a-breakpoint-lg:1024px;--a-breakpoint-md-down:767px;--a-breakpoint-md:768px;--a-breakpoint-sm-down:479px;--a-breakpoint-sm:480px;--a-breakpoint-xs:0;--a-icon-on-info:var(--a-gray-900);--a-icon-on-warning:var(--a-gray-900);--a-icon-on-danger:var(--a-white);--a-icon-on-success:var(--a-white);--a-icon-on-action:var(--a-white);--a-icon-on-inverted:var(--a-white);--a-icon-on-neutral:var(--a-white);--a-icon-alt-3:var(--a-deepblue-400);--a-icon-alt-2:var(--a-limegreen-700);--a-icon-alt-1:var(--a-purple-500);--a-icon-info:var(--a-lightblue-800);--a-icon-warning:var(--a-orange-600);--a-icon-danger:var(--a-red-500);--a-icon-success:var(--a-green-500);--a-icon-action:var(--a-blue-500);--a-icon-action-on-action-subtle:var(--a-blue-600);--a-icon-action-selected:var(--a-blue-700);--a-icon-subtle:var(--a-grayalpha-700);--a-icon-default:var(--a-gray-900);--a-surface-alt-3:var(--a-deepblue-500);--a-surface-alt-3-strong:var(--a-deepblue-800);--a-surface-alt-3-moderate:var(--a-deepblue-200);--a-surface-alt-3-subtle:var(--a-deepblue-100);--a-surface-alt-2:var(--a-limegreen-400);--a-surface-alt-2-moderate:var(--a-limegreen-200);--a-surface-alt-2-subtle:var(--a-limegreen-100);--a-surface-alt-1:var(--a-purple-400);--a-surface-alt-1-moderate:var(--a-purple-200);--a-surface-alt-1-subtle:var(--a-purple-100);--a-surface-info:var(--a-lightblue-500);--a-surface-info-moderate:var(--a-lightblue-200);--a-surface-info-subtle:var(--a-lightblue-100);--a-surface-info-subtle-hover:var(--a-lightblue-200);--a-surface-warning:var(--a-orange-500);--a-surface-warning-moderate:var(--a-orange-200);--a-surface-warning-subtle:var(--a-orange-100);--a-surface-warning-subtle-hover:var(--a-orange-200);--a-surface-danger:var(--a-red-500);--a-surface-danger-active:var(--a-red-700);--a-surface-danger-hover:var(--a-red-600);--a-surface-danger-moderate:var(--a-red-200);--a-surface-danger-subtle:var(--a-red-100);--a-surface-danger-subtle-hover:var(--a-red-200);--a-surface-success-hover:var(--a-green-600);--a-surface-success:var(--a-green-500);--a-surface-success-moderate:var(--a-green-200);--a-surface-success-subtle:var(--a-green-100);--a-surface-success-subtle-hover:var(--a-green-200);--a-surface-neutral:var(--a-gray-700);--a-surface-neutral-active:var(--a-gray-900);--a-surface-neutral-selected:var(--a-gray-900);--a-surface-neutral-hover:var(--a-gray-800);--a-surface-neutral-moderate:var(--a-grayalpha-200);--a-surface-neutral-subtle:var(--a-grayalpha-100);--a-surface-neutral-subtle-hover:var(--a-grayalpha-200);--a-surface-action:var(--a-blue-500);--a-surface-action-selected:var(--a-blue-700);--a-surface-action-selected-hover:var(--a-blue-800);--a-surface-action-active:var(--a-blue-700);--a-surface-action-hover:var(--a-blue-600);--a-surface-action-subtle:var(--a-blue-50);--a-surface-action-subtle-hover:var(--a-blue-100);--a-surface-inverted:var(--a-gray-900);--a-surface-inverted-active:var(--a-gray-700);--a-surface-inverted-hover:var(--a-gray-800);--a-surface-backdrop:var(--a-grayalpha-500);--a-surface-transparent:var(--a-transparent);--a-surface-subtle:var(--a-gray-50);--a-surface-selected:var(--a-blue-50);--a-surface-active:var(--a-grayalpha-200);--a-surface-hover:var(--a-grayalpha-100);--a-surface-default:var(--a-white);--a-bg-subtle:var(--a-gray-100);--a-bg-default:var(--a-white);--a-text-on-alt-3:var(--a-white);--a-text-on-alt-2:var(--a-gray-900);--a-text-on-alt-1:var(--a-white);--a-text-on-info:var(--a-gray-900);--a-text-on-warning:var(--a-gray-900);--a-text-on-danger:var(--a-white);--a-text-on-success:var(--a-white);--a-text-on-action:var(--a-white);--a-text-on-neutral:var(--a-white);--a-text-on-inverted:var(--a-white);--a-text-action:var(--a-blue-500);--a-text-action-on-action-subtle:var(--a-blue-600);--a-text-action-selected:var(--a-blue-700);--a-text-danger:var(--a-red-500);--a-text-visited:var(--a-purple-500);--a-text-subtle:var(--a-grayalpha-700);--a-text-default:var(--a-gray-900);--a-data-border-6:var(--a-purple-400);--a-data-border-5:var(--a-green-400);--a-data-border-4:var(--a-lightblue-700);--a-data-border-3:var(--a-orange-600);--a-data-border-2:var(--a-deepblue-500);--a-data-border-1:var(--a-blue-400);--a-data-surface-6-subtle:var(--a-purple-200);--a-data-surface-6:var(--a-purple-400);--a-data-surface-5-subtle:var(--a-green-200);--a-data-surface-5:var(--a-green-400);--a-data-surface-4-subtle:var(--a-lightblue-500);--a-data-surface-4:var(--a-lightblue-700);--a-data-surface-3-subtle:var(--a-orange-300);--a-data-surface-3:var(--a-orange-600);--a-data-surface-2-subtle:var(--a-deepblue-200);--a-data-surface-2:var(--a-deepblue-500);--a-data-surface-1-subtle:var(--a-blue-100);--a-data-surface-1:var(--a-blue-400);--a-border-alt-3:var(--a-deepblue-500);--a-border-alt-2:var(--a-limegreen-700);--a-border-alt-1:var(--a-purple-400);--a-border-on-inverted-subtle:var(--a-gray-700);--a-border-on-inverted:var(--a-gray-200);--a-border-focus:var(--a-blue-800);--a-border-focus-on-inverted:var(--a-blue-200);--a-border-info:var(--a-lightblue-700);--a-border-warning:var(--a-orange-600);--a-border-danger:var(--a-red-500);--a-border-success:var(--a-green-500);--a-border-selected:var(--a-blue-500);--a-border-action:var(--a-blue-500);--a-border-action-selected:var(--a-blue-700);--a-border-subtle:var(--a-grayalpha-300);--a-border-subtle-hover:var(--a-grayalpha-400);--a-border-divider:var(--a-grayalpha-300);--a-border-strong:var(--a-grayalpha-700);--a-border-default:var(--a-grayalpha-500);--a-shadow-focus:0 0 0 3px var(--a-border-focus);--a-shadow-focus-inverted:0 0 0 3px var(--a-border-focus-on-inverted)}

package/dist/index.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /**
  * Do not edit directly
- * Generated on Fri, 18 Aug 2023 10:19:31 GMT
+ * Generated on Fri, 18 Aug 2023 10:23:38 GMT
  */
 :root, :host {
   --a-spacing-05: 0.125rem;
@@ -109,26 +109,26 @@
   --a-blue-200: rgba(153, 195, 255, 1);
   --a-blue-100: rgba(204, 225, 255, 1);
   --a-blue-50: rgba(230, 240, 255, 1);
-  --a-grayalpha-900: rgba(0, 0, 0, 0.85);
-  --a-grayalpha-800: rgba(0, 0, 0, 0.75);
-  --a-grayalpha-700: rgba(0, 0, 0, 0.65);
-  --a-grayalpha-600: rgba(0, 0, 0, 0.56);
-  --a-grayalpha-500: rgba(0, 0, 0, 0.44);
-  --a-grayalpha-400: rgba(0, 0, 0, 0.31);
-  --a-grayalpha-300: rgba(0, 0, 0, 0.19);
-  --a-grayalpha-200: rgba(0, 0, 0, 0.1);
-  --a-grayalpha-100: rgba(0, 0, 0, 0.05);
-  --a-grayalpha-50: rgba(0, 0, 0, 0.03);
-  --a-gray-900: rgba(38, 38, 38, 1);
-  --a-gray-800: rgba(64, 64, 64, 1);
-  --a-gray-700: rgba(89, 89, 89, 1);
-  --a-gray-600: rgba(112, 112, 112, 1);
-  --a-gray-500: rgba(143, 143, 143, 1);
-  --a-gray-400: rgba(176, 176, 176, 1);
-  --a-gray-300: rgba(207, 207, 207, 1);
-  --a-gray-200: rgba(229, 229, 229, 1);
-  --a-gray-100: rgba(241, 241, 241, 1);
-  --a-gray-50: rgba(247, 247, 247, 1);
+  --a-grayalpha-900: rgba(2, 5, 9, 0.87);
+  --a-grayalpha-800: rgba(3, 11, 22, 0.75);
+  --a-grayalpha-700: rgba(1, 11, 24, 0.68);
+  --a-grayalpha-600: rgba(2, 15, 34, 0.6);
+  --a-grayalpha-500: rgba(2, 20, 49, 0.49);
+  --a-grayalpha-400: rgba(5, 23, 51, 0.34);
+  --a-grayalpha-300: rgba(7, 26, 54, 0.21);
+  --a-grayalpha-200: rgba(17, 41, 64, 0.13);
+  --a-grayalpha-100: rgba(18, 43, 68, 0.08);
+  --a-grayalpha-50: rgba(38, 55, 89, 0.06);
+  --a-gray-900: rgba(35, 38, 42, 1);
+  --a-gray-800: rgba(66, 71, 79, 1);
+  --a-gray-700: rgba(82, 89, 98, 1);
+  --a-gray-600: rgba(103, 111, 123, 1);
+  --a-gray-500: rgba(131, 140, 154, 1);
+  --a-gray-400: rgba(170, 176, 186, 1);
+  --a-gray-300: rgba(203, 207, 213, 1);
+  --a-gray-200: rgba(224, 227, 230, 1);
+  --a-gray-100: rgba(236, 238, 240, 1);
+  --a-gray-50: rgba(242, 243, 245, 1);
   --a-nav-red: rgba(195, 0, 0, 1);
   --a-white: rgba(255, 255, 255, 1);
   --a-transparent: rgba(255, 255, 255, 0);
@@ -188,7 +188,7 @@
   --a-icon-success: var(--a-green-500);
   --a-icon-action: var(--a-blue-500);
   --a-icon-action-on-action-subtle: var(--a-blue-600);
-  --a-icon-action-selected: var(--a-deepblue-500);
+  --a-icon-action-selected: var(--a-blue-700);
   --a-icon-subtle: var(--a-grayalpha-700);
   --a-icon-default: var(--a-gray-900);
   --a-surface-alt-3: var(--a-deepblue-500);
@@ -228,16 +228,16 @@
   --a-surface-neutral-subtle: var(--a-grayalpha-100);
   --a-surface-neutral-subtle-hover: var(--a-grayalpha-200);
   --a-surface-action: var(--a-blue-500);
-  --a-surface-action-selected: var(--a-deepblue-500);
-  --a-surface-action-selected-hover: var(--a-deepblue-600);
-  --a-surface-action-active: var(--a-deepblue-500);
+  --a-surface-action-selected: var(--a-blue-700);
+  --a-surface-action-selected-hover: var(--a-blue-800);
+  --a-surface-action-active: var(--a-blue-700);
   --a-surface-action-hover: var(--a-blue-600);
   --a-surface-action-subtle: var(--a-blue-50);
   --a-surface-action-subtle-hover: var(--a-blue-100);
   --a-surface-inverted: var(--a-gray-900);
   --a-surface-inverted-active: var(--a-gray-700);
   --a-surface-inverted-hover: var(--a-gray-800);
-  --a-surface-backdrop: var(--a-grayalpha-700);
+  --a-surface-backdrop: var(--a-grayalpha-500);
   --a-surface-transparent: var(--a-transparent);
   --a-surface-subtle: var(--a-gray-50);
   --a-surface-selected: var(--a-blue-50);
@@ -258,7 +258,7 @@
   --a-text-on-inverted: var(--a-white);
   --a-text-action: var(--a-blue-500);
   --a-text-action-on-action-subtle: var(--a-blue-600);
-  --a-text-action-selected: var(--a-deepblue-500);
+  --a-text-action-selected: var(--a-blue-700);
   --a-text-danger: var(--a-red-500);
   --a-text-visited: var(--a-purple-500);
   --a-text-subtle: var(--a-grayalpha-700);
@@ -294,9 +294,9 @@
   --a-border-success: var(--a-green-500);
   --a-border-selected: var(--a-blue-500);
   --a-border-action: var(--a-blue-500);
-  --a-border-action-selected: var(--a-deepblue-500);
-  --a-border-subtle: var(--a-grayalpha-200);
-  --a-border-subtle-hover: var(--a-grayalpha-300);
+  --a-border-action-selected: var(--a-blue-700);
+  --a-border-subtle: var(--a-grayalpha-300);
+  --a-border-subtle-hover: var(--a-grayalpha-400);
   --a-border-divider: var(--a-grayalpha-300);
   --a-border-strong: var(--a-grayalpha-700);
   --a-border-default: var(--a-grayalpha-500);
@@ -2619,6 +2619,7 @@ body,
   transform: translate(0.25rem, -10%);
   height: 1.25rem;
 }
+/* Tailwind sets all svg to block */
 .navds-checkbox__icon > svg {
   display: inline;
 }
@@ -3957,65 +3958,137 @@ button.navds-internalheader__title:active,
     stroke-dashoffset: -120px;
   }
 }
-.ReactModal__Body--open {
+.navds-modal__document-body {
   overflow: hidden;
 }
 .navds-modal {
   background-color: var(--ac-modal-bg, var(--a-surface-default));
-  border-radius: var(--a-border-radius-medium);
-  display: block;
-  position: relative;
-  overflow: auto;
-  max-height: 100%;
+  border: 1px solid var(--ac-modal-border, var(--a-border-subtle));
+  border-radius: var(--a-border-radius-large);
   box-shadow: var(--a-shadow-xlarge);
+  padding: 0;
+  position: fixed;
+  max-height: 100%;
+  max-width: 100%;
 }
-.navds-modal__content {
-  padding: var(--a-spacing-4);
+.navds-modal[open] {
+  display: flex;
+  flex-direction: column;
+  animation: akselModalFadeIn 0.35s cubic-bezier(0.15, 1, 0.3, 1);
 }
-.navds-modal:focus-visible,
-.navds-modal--focus {
-  box-shadow: var(--a-shadow-focus);
-  outline: none;
+.navds-modal--polyfilled {
+  top: 50%;
+  transform: translate(0, -50%);
+  overflow: auto;
+
+  /* From polyfill (dialog-polyfill/dist/dialog-polyfill.css): */
+  left: 0;
+  right: 0;
+  width: fit-content;
+  height: fit-content;
+  margin: auto;
 }
-@supports not selector(:focus-visible) {
-  .navds-modal:focus,
-  .navds-modal--focus {
-    box-shadow: var(--a-shadow-focus);
-    outline: none;
-  }
+.navds-modal--polyfilled:not([open]) {
+  display: none; /* from polyfill */
 }
-.navds-modal__overlay {
+._dialog_overlay {
+  /* From polyfill */
   position: fixed;
-  z-index: var(--a-z-index-modal);
   top: 0;
+  right: 0;
   bottom: 0;
   left: 0;
-  right: 0;
-  background-color: var(--ac-modal-backdrop, var(--a-surface-backdrop));
-  padding: var(--a-spacing-4);
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
-.navds-modal__button--shake {
-  transform: rotate(0deg);
-  transition: transform 100ms cubic-bezier(0.82, 2, 1, 0.3);
+.navds-modal--small {
+  width: var(--ac-modal-width-small, 450px);
 }
-/* prettier-ignore */
-.navds-modal__overlay:active > .navds-modal:not(:active) > .navds-modal__button--shake {
-  transform: rotate(10deg);
-  transition: transform 100ms cubic-bezier(0.82, -2, 1, 0.3);
+.navds-modal--medium {
+  width: var(--ac-modal-width-medium, 700px);
+}
+@media (min-width: 480px) {
+  .navds-modal {
+    max-width: calc((100% - 6px) - 2em);
+    max-height: calc((100% - 6px) - 2em);
+  }
+
+  .navds-modal--autowidth {
+    max-width: min(700px, calc((100% - 6px) - 2em));
+  }
+}
+.navds-modal::backdrop {
+  /*
+   * Cannot use --a-surface-backdrop because ::backdrop does not inherit from anything but itself.
+   * But consumers can do `::backdrop { --ac-modal-backdrop: white; }`
+   * We can add ::backdrop to tokens.css when we remove the polyfill.
+   */
+  background: var(--ac-modal-backdrop, rgb(2 20 49 / 0.49));
+  animation: akselModalBackdropFadeIn 0.35s cubic-bezier(0.15, 1, 0.3, 1);
+}
+.navds-modal--polyfilled + .backdrop /* Cannot be combined with ::backdrop selector */ {
+  background: var(--ac-modal-backdrop, rgb(2 20 49 / 0.49));
+
+  /* From polyfill: */
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
 }
 .navds-modal__button {
-  position: absolute;
-  top: var(--a-spacing-4);
-  right: var(--a-spacing-4);
+  margin-left: var(--a-spacing-4);
+  float: right;
+}
+.navds-modal__header {
+  padding: var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-4) var(--a-spacing-6);
+}
+.navds-modal__header-icon svg {
+  display: inline;
+  vertical-align: -0.25rem;
+  margin-right: var(--a-spacing-1);
+}
+.navds-modal__label {
+  font-weight: 600;
+  color: var(--a-text-subtle);
+}
+.navds-modal__body {
+  padding: var(--a-spacing-6);
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+.navds-modal__header + .navds-modal__body {
+  padding-top: var(--a-spacing-0);
+}
+.navds-modal__footer {
   display: flex;
-  padding: var(--a-spacing-2);
+  flex-flow: row-reverse wrap;
+  gap: var(--a-spacing-4);
+  padding: var(--a-spacing-4) var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-6);
 }
-.navds-modal__button svg {
-  height: 1.5rem;
-  width: 1.5rem;
+.navds-modal__footer :nth-of-type(2) {
+  margin-left: auto;
+}
+@keyframes akselModalFadeIn {
+  from {
+    opacity: 0;
+    transform: translate3d(0, calc(5% + 4px), 0);
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  to {
+    transform: none;
+  }
+}
+@keyframes akselModalBackdropFadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
 }
 .navds-pagination__list {
   margin: 0;
@@ -5458,7 +5531,7 @@ button.navds-stepper__step {
 .navds-table__header-cell,
 .navds-table__data-cell {
   display: table-cell;
-  padding: var(--a-spacing-4) var(--a-spacing-3);
+  padding: var(--a-spacing-3) var(--a-spacing-2);
   border-bottom: 1px solid var(--ac-table-row-border, var(--a-border-default));
   text-align: left;
 }
@@ -5481,9 +5554,13 @@ button.navds-stepper__step {
 :where(.navds-table__expandable-row--open:hover) .navds-table__data-cell {
   border-bottom-color: transparent;
 }
+.navds-table--large .navds-table__header-cell,
+.navds-table--large .navds-table__data-cell {
+  padding: var(--a-spacing-4) var(--a-spacing-2);
+}
 .navds-table--small .navds-table__header-cell,
 .navds-table--small .navds-table__data-cell {
-  padding: var(--a-spacing-2) var(--a-spacing-3);
+  padding: var(--a-spacing-1) var(--a-spacing-2);
 }
 .navds-table .navds-checkbox .navds-checkbox__input {
   top: -0.75rem;
@@ -5546,7 +5623,7 @@ button.navds-stepper__step {
 .navds-table__expandable-row:not(.navds-table__expandable-row--open) .navds-table__data-cell {
   transition: border-bottom-color 190ms cubic-bezier(0.6, 0.04, 0.98, 0.335);
 }
-.navds-table__expandable-row:not(.navds-table__expandable-row--expansion-disabled):hover {
+.navds-table__expandable-row.navds-table__expandable-row--clickable:not(.navds-table__expandable-row--expansion-disabled):hover {
   cursor: pointer;
 }
 .navds-table__expandable-row--open .navds-table__data-cell {
@@ -5559,45 +5636,62 @@ button.navds-stepper__step {
   border-color: transparent;
 }
 .navds-table__toggle-expand-cell {
-  padding: 0;
-  width: 3.5rem;
+  padding: 0 var(--a-spacing-2);
+  position: relative;
+  width: 2.5rem;
+}
+.navds-table--large .navds-table__toggle-expand-cell {
+  padding: 0 var(--a-spacing-2);
 }
 .navds-table--small .navds-table__toggle-expand-cell {
-  padding: 0;
-  width: 2.25rem;
+  padding: var(--a-spacing-1) var(--a-spacing-2);
 }
 .navds-table__toggle-expand-button {
-  all: unset;
-  display: flex;
-  align-items: center;
+  display: grid;
+  place-content: center;
   cursor: pointer;
-  padding: var(--a-spacing-4);
+  margin: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--a-border-radius-medium);
+  height: 2rem;
+  width: 2rem;
+  font-size: 1.5rem;
 }
-.navds-table--small .navds-table__toggle-expand-button {
-  padding: var(--a-spacing-2);
+.navds-table__expandable-icon {
+  transition: transform 150ms ease-in-out;
 }
-.navds-table__toggle-expand-button:focus-visible {
-  box-shadow: inset var(--a-shadow-focus);
+.navds-table__toggle-expand-button:hover,
+.navds-table__expandable-row--clickable:hover .navds-table__toggle-expand-button {
+  background-color: var(--a-surface-hover);
 }
-@supports not selector(:focus-visible) {
-  .navds-table__toggle-expand-button:focus {
-    box-shadow: inset var(--a-shadow-focus);
-  }
+.navds-table__toggle-expand-cell--open > :where(.navds-table__toggle-expand-button) :where(.navds-table__expandable-icon) {
+  transform: translateY(0) rotate(180deg);
 }
-.navds-table__expandable-icon {
-  font-size: 1.5rem;
+.navds-table__toggle-expand-button:hover > :where(.navds-table__expandable-icon) {
+  transform: translateY(1px);
 }
-.navds-table--small .navds-table__expandable-icon {
-  font-size: 1.25rem;
+.navds-table__toggle-expand-cell--open > .navds-table__toggle-expand-button:hover > :where(.navds-table__expandable-icon) {
+  transform: translateY(-1px) rotate(180deg);
 }
-.navds-table__toggle-expand-button:hover .navds-table__expandable-icon {
-  transform: translateY(1px);
+.navds-table__toggle-expand-button:focus-visible {
+  outline: none;
+  box-shadow: var(--a-shadow-focus);
 }
-.navds-table__toggle-expand-cell--open .navds-table__expandable-icon {
-  transform: rotate(180deg);
+@supports not selector(:focus-visible) {
+  .navds-table__toggle-expand-button:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
 }
-.navds-table__toggle-expand-cell--open .navds-table__toggle-expand-button:hover .navds-table__expandable-icon {
-  transform: translateY(-1px) rotate(180deg);
+.navds-table__toggle-expand-button::after {
+  inset: 0;
+  z-index: 1;
+  position: absolute;
+  content: "";
+  height: 100%;
+  width: 100%;
+  cursor: pointer;
 }
 .navds-table__expanded-row-cell {
   padding: 0;
@@ -5609,10 +5703,10 @@ button.navds-stepper__step {
   border-bottom: 1px solid var(--ac-table-row-border, var(--a-border-default));
 }
 .navds-table__expanded-row-content {
-  padding: var(--a-spacing-4) 4.25rem;
+  padding: var(--a-spacing-4) calc(var(--a-spacing-2) + 3rem);
 }
 .navds-table--small .navds-table__expanded-row-content {
-  padding: var(--a-spacing-2) var(--a-spacing-12);
+  padding: var(--a-spacing-2) calc(var(--a-spacing-2) + 3rem);
 }
 .navds-tabs__tablist-wrapper {
   box-shadow: inset 0 -1px 0 0 var(--ac-tabs-border, var(--a-border-divider));