@navikt/ds-css 7.37.0 → 7.39.0

package/dist/components.css

@@ -680,16 +680,27 @@
 
   --__ac-base-alert-pi: var(--a-spacing-5);
   --__ac-base-alert-content-p: var(--a-spacing-3) var(--__ac-base-alert-pi) var(--a-spacing-4) var(--__ac-base-alert-pi);
-  --__ac-base-alert-title-pb: var(--a-spacing-05);
   --__ac-base-alert-header-max-width: 37.5rem;
+  --__ac-base-alert-header-icon-margin-block-start: var(--a-spacing-2);
+  --__ac-base-alert-header-close-button-margin-block-start: var(--a-spacing-1);
+  --__ac-global-alert-alignment: max(var(--__ac-base-alert-pi), calc((100% - var(--__ac-base-alert-header-max-width)) / 2));
 }
 
+.navds-base-alert[data-centered="false"] {
+    --__ac-global-alert-alignment: var(--a-spacing-5);
+  }
+
 .navds-base-alert[data-size="small"] {
     --__ac-base-alert-pi: var(--a-spacing-4);
     --__ac-base-alert-content-p: var(--a-spacing-2) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-4);
-    --__ac-base-alert-title-pb: var(--a-spacing-1);
+    --__ac-base-alert-header-icon-margin-block-start: var(--a-spacing-1-alt);
+    --__ac-base-alert-header-close-button-margin-block-start: var(--a-spacing-05);
   }
 
+.navds-base-alert[data-size="small"][data-centered="false"] {
+      --__ac-global-alert-alignment: var(--a-spacing-4);
+    }
+
 .navds-base-alert[data-variant="moderate"] {
     outline: 1px solid;
     outline-offset: -1px;
@@ -838,12 +849,12 @@
   display: flex;
   align-items: flex-start;
   gap: var(--a-spacing-2);
-  padding: var(--a-spacing-2) var(--__ac-base-alert-pi);
+  padding: 0 var(--__ac-base-alert-pi);
   border-bottom: 1px solid;
 }
 
 .navds-base-alert[data-global="true"] .navds-base-alert__header {
-    padding-inline: max(var(--__ac-base-alert-pi), calc((100% - var(--__ac-base-alert-header-max-width)) / 2));
+    padding-inline: var(--__ac-global-alert-alignment);
   }
 
 .navds-base-alert[data-variant="strong"] .navds-base-alert__header {
@@ -856,12 +867,12 @@
 
 .navds-base-alert__icon {
   font-size: 1.5rem;
-  margin-top: var(--a-spacing-1);
+  margin-top: var(--__ac-base-alert-header-icon-margin-block-start);
   display: grid;
 }
 
 .navds-base-alert__title {
-  padding-block: var(--__ac-base-alert-title-pb);
+  padding-block: var(--a-spacing-1-alt);
 }
 
 .navds-base-alert__content {
@@ -870,11 +881,12 @@
 }
 
 .navds-base-alert[data-global="true"] .navds-base-alert__content {
-    padding-inline: max(var(--__ac-base-alert-pi), calc((100% - var(--__ac-base-alert-header-max-width)) / 2));
+    padding-inline: var(--__ac-global-alert-alignment);
   }
 
 .navds-base-alert__close-button.navds-base-alert__close-button {
   margin-left: auto;
+  margin-block-start: var(--__ac-base-alert-header-close-button-margin-block-start);
 
   /* Moved focus-outline over wrapper outline */
   z-index: 1;
@@ -1994,19 +2006,15 @@
   box-shadow: var(--a-shadow-xlarge);
   display: flex;
   flex-direction: column;
-  outline: 1px solid var(--a-border-subtle);
+  border: 1px solid var(--a-border-subtle);
   z-index: 2000;
   overflow: hidden;
 }
 
-.light:not(:has(.dark)) .navds-dialog__backdrop ~ .navds-dialog__popup {
+.navds-dialog__popup:focus {
     outline: none;
   }
 
-:is(.light:not(:has(.dark)) .navds-dialog__backdrop ~ .navds-dialog__popup):focus {
-      outline: none;
-    }
-
 .navds-dialog__popup[data-size="small"] {
     --__ac-dialog-p-b: var(--a-spacing-3);
     --__ac-dialog-p-i: var(--a-spacing-4);
@@ -2087,6 +2095,7 @@
       height: auto;
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
+      border-bottom: 0;
       left: 0;
       right: 0;
       bottom: 0;
@@ -2112,6 +2121,7 @@
 
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
+    border-right: 0;
     right: 0;
   }
 
@@ -2120,6 +2130,7 @@
 
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
+    border-left: 0;
     left: 0;
   }
 
@@ -2128,6 +2139,7 @@
 
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
+    border-bottom: 0;
     left: 0;
     right: 0;
     bottom: 0;
@@ -2146,6 +2158,7 @@
     --__ac-dialog-transform: scale(0.98);
 
     border-radius: 0;
+    border: 0;
     inset: 0;
     max-height: 100dvh;
     max-width: 100dvw;
@@ -2159,7 +2172,7 @@
   inset: 0;
   background-color: var(--a-surface-backdrop);
   transition: opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  z-index: 1000;
+  z-index: 2000;
 
   /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
 }
@@ -2189,18 +2202,33 @@
   float: right;
 }
 
+.navds-dialog__header ~ .navds-dialog__body {
+    padding-block-start: 0;
+  }
+
 .navds-dialog__body {
-  overflow: auto;
+
+  background:
+    linear-gradient(var(--a-surface-default) 30%, transparent) top,
+    linear-gradient(transparent, var(--a-surface-default) 60%) bottom,
+    radial-gradient(farthest-side at 50% 0, rgba(0 0 0 / 0.3), transparent) top,
+    radial-gradient(farthest-side at 50% 100%, rgba(0 0 0 / 0.3), transparent) bottom;
+  background-size:
+    100% 40px,
+    100% 50px,
+    100% 16px,
+    100% 16px;
+  background-attachment: local, local, scroll, scroll;
+  background-repeat: no-repeat;
   padding-block: var(--__ac-dialog-p-b);
   padding-inline: var(--__ac-dialog-p-i);
+  overflow: auto;
+  overscroll-behavior: contain;
+  position: relative; /* Needed to make sr-only elements position correctly - see Storybook */
 }
 
-.navds-dialog__header ~ .navds-dialog__body {
-    padding-block-start: 0;
-  }
-
 .navds-dialog__footer {
-  justify-content: flex-start;
+  justify-content: flex-end;
   display: flex;
   flex-flow: wrap;
   gap: var(--a-spacing-2);
@@ -7490,8 +7518,7 @@ span.rdp-weeknumber {
     color: ButtonText;
   }
 
-  .navds-read-more__button.navds-read-more__button:focus-visible,
-  .navds-read-more__content.navds-read-more__content:focus-visible {
+  .navds-read-more__button.navds-read-more__button:focus-visible {
     box-shadow: none;
     outline: 2px solid highlight;
     outline-offset: 2px;
@@ -7507,15 +7534,13 @@ span.rdp-weeknumber {
   background-color: var(--ac-read-more-active-bg, var(--a-surface-active));
 }
 
-.navds-read-more__button:focus-visible,
-.navds-read-more__content:focus-visible {
+.navds-read-more__button:focus-visible {
   outline: none;
   box-shadow: var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
-  .navds-read-more__button:focus,
-  .navds-read-more__content:focus {
+  .navds-read-more__button:focus {
     outline: none;
     box-shadow: var(--a-shadow-focus);
   }