@navikt/ds-css 7.38.0 → 7.39.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @navikt/ds-css
 
+## 7.39.0
+
+### Minor Changes
+
+- LocalAlert, InfoCard: Reduced default header height. ([`91f3f8a`](https://github.com/navikt/aksel/commit/91f3f8acb8749bc154a1e7dca008ce0be43e2e34))
+
+- GlobalAlert: Reduced default header height and added centered content prop. ([#4476](https://github.com/navikt/aksel/pull/4476))
+
+### Patch Changes
+
+- Dialog: Handle SR-only elements inside Dialog.Body better. Moved elements in Footer to flex-end. ([#4457](https://github.com/navikt/aksel/pull/4457))
+
+- Darkside: ExpansionCardContent typography is no longer affected by 'app-color'. ([#4460](https://github.com/navikt/aksel/pull/4460))
+
+- ReadMore: Removed focus styling for content, reverting #4116. ([#4464](https://github.com/navikt/aksel/pull/4464))
+
 ## 7.38.0
 
 ### Patch Changes

package/alert.css

@@ -121,13 +121,24 @@
 
   --__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));
+
+  &[data-centered="false"] {
+    --__ac-global-alert-alignment: var(--a-spacing-5);
+  }
 
   &[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);
+
+    &[data-centered="false"] {
+      --__ac-global-alert-alignment: var(--a-spacing-4);
+    }
   }
 
   &[data-variant="moderate"] {
@@ -309,11 +320,11 @@
   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"] & {
-    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"] & {
@@ -327,12 +338,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 {
@@ -340,12 +351,13 @@
   background-color: var(--a-bg-default);
 
   .navds-base-alert[data-global="true"] & {
-    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;

package/darkside/alert.darkside.css

@@ -92,13 +92,23 @@
 
   --__axc-base-alert-pi: var(--ax-space-20);
   --__axc-base-alert-content-p: var(--ax-space-12) var(--__axc-base-alert-pi) var(--ax-space-16) var(--__axc-base-alert-pi);
-  --__axc-base-alert-title-pb: var(--ax-space-2);
   --__axc-base-alert-header-max-width: 37.5rem;
+  --__axc-base-alert-header-icon-margin-block-start: var(--ax-space-8);
+  --__axc-base-alert-header-close-button-margin-block-start: var(--ax-space-4);
+  --__axc-global-alert-alignment: max(var(--__axc-base-alert-pi), calc((100% - var(--__axc-base-alert-header-max-width)) / 2));
+
+  &[data-centered="false"] {
+    --__axc-global-alert-alignment: var(--ax-space-20);
+  }
 
   &[data-size="small"] {
-    --__axc-base-alert-pi: var(--ax-space-16);
     --__axc-base-alert-content-p: var(--ax-space-8) var(--ax-space-16) var(--ax-space-12) var(--ax-space-16);
-    --__axc-base-alert-title-pb: var(--ax-space-4);
+    --__axc-base-alert-header-icon-margin-block-start: var(--ax-space-6);
+    --__axc-base-alert-header-close-button-margin-block-start: var(--ax-space-2);
+
+    &[data-centered="false"] {
+      --__axc-global-alert-alignment: var(--ax-space-16);
+    }
   }
 
   &[data-variant="moderate"] {
@@ -124,11 +134,11 @@
   display: flex;
   align-items: flex-start;
   gap: var(--ax-space-8);
-  padding: var(--ax-space-8) var(--__axc-base-alert-pi);
+  padding: 0 var(--__axc-base-alert-pi);
   border-bottom: 1px solid;
 
   .aksel-base-alert[data-global="true"] & {
-    padding-inline: max(var(--__axc-base-alert-pi), calc((100% - var(--__axc-base-alert-header-max-width)) / 2));
+    padding-inline: var(--__axc-global-alert-alignment);
   }
 
   .aksel-base-alert[data-variant="moderate"] & {
@@ -150,12 +160,12 @@
 
 .aksel-base-alert__icon {
   font-size: 1.5rem;
-  margin-top: var(--ax-space-4);
+  margin-top: var(--__axc-base-alert-header-icon-margin-block-start);
   display: grid;
 }
 
 .aksel-base-alert__title {
-  padding-block: var(--__axc-base-alert-title-pb);
+  padding-block: var(--ax-space-6);
 }
 
 .aksel-base-alert__content {
@@ -163,12 +173,13 @@
   background-color: var(--ax-bg-default);
 
   .aksel-base-alert[data-global="true"] & {
-    padding-inline: max(var(--__axc-base-alert-pi), calc((100% - var(--__axc-base-alert-header-max-width)) / 2));
+    padding-inline: var(--__axc-global-alert-alignment);
   }
 }
 
 .aksel-base-alert__close-button {
   margin-left: auto;
+  margin-block-start: var(--__axc-base-alert-header-close-button-margin-block-start);
 
   /* Moved focus-outline over wrapper outline */
   z-index: 1;

package/darkside/dialog.darkside.css

@@ -209,13 +209,28 @@
 }
 
 .aksel-dialog__body {
-  overflow: auto;
   padding-block: var(--__axc-dialog-p-b);
   padding-inline: var(--__axc-dialog-p-i);
+  overflow: auto;
+  overscroll-behavior: contain;
+  position: relative; /* Needed to make sr-only elements position correctly - see Storybook */
 
   .aksel-dialog__header ~ & {
     padding-block-start: 0;
   }
+
+  background:
+    linear-gradient(var(--ax-bg-raised) 30%, transparent) top,
+    linear-gradient(transparent, var(--ax-bg-raised) 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;
 }
 
 .aksel-dialog__footer {

package/darkside/read-more.darkside.css

@@ -70,11 +70,6 @@
   margin-left: calc(var(--__axc-read-more-pi-start) + var(--__axc-read-more-icon-size) / 2 - 1px);
   padding-left: calc(var(--__axc-read-more-icon-size) / 2 - 1px + var(--ax-space-4));
 
-  &:focus-visible {
-    outline: 3px solid var(--ax-border-focus);
-    outline-offset: 3px;
-  }
-
   &[data-state="closed"] {
     display: none;
   }

package/dialog.css

@@ -209,17 +209,32 @@
 }
 
 .navds-dialog__body {
-  overflow: auto;
   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 ~ & {
     padding-block-start: 0;
   }
+
+  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;
 }
 
 .navds-dialog__footer {
-  justify-content: flex-start;
+  justify-content: flex-end;
   display: flex;
   flex-flow: wrap;
   gap: var(--a-spacing-2);

package/dist/component/alert.css

@@ -122,16 +122,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;
@@ -280,12 +291,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 {
@@ -298,12 +309,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 {
@@ -312,11 +323,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;

package/dist/component/alert.min.css

@@ -1 +1 @@
-.navds-alert{align-items:center;border:1px solid;border-radius:var(--a-border-radius-medium);display:flex;gap:var(--a-spacing-3);padding:var(--a-spacing-4)}.navds-alert--small.navds-alert--close-button{align-items:flex-start}.navds-alert__wrapper--maxwidth{max-width:43.5rem}.navds-alert--close-button>.navds-alert__wrapper{-webkit-margin-before:var(--a-spacing-05);margin-block-start:var(--a-spacing-05)}.navds-alert--small.navds-alert--close-button>.navds-alert__wrapper{-webkit-margin-before:var(--a-spacing-1);margin-block-start:var(--a-spacing-1)}.navds-alert--small{gap:var(--a-spacing-2);padding:var(--a-spacing-2) var(--a-spacing-4)}.navds-alert--full-width{border-radius:0}.navds-alert>.navds-alert__icon{align-self:flex-start;background:radial-gradient(circle,var(--a-surface-default) 47%,0,#0000);flex-shrink:0;font-size:1.5rem;height:var(--a-font-line-height-xlarge)}.navds-alert--small>.navds-alert__icon{-webkit-margin-before:0;height:var(--a-font-line-height-large);margin-block-start:0}.navds-alert--close-button>.navds-alert__icon{-webkit-margin-before:var(--a-spacing-05);margin-block-start:var(--a-spacing-05)}.navds-alert--small.navds-alert--close-button>.navds-alert__icon{-webkit-margin-before:var(--a-spacing-1);margin-block-start:var(--a-spacing-1)}.navds-alert--error{background-color:var(--ac-alert-error-bg,var(--a-surface-danger-subtle));border-color:var(--ac-alert-error-border,var(--a-border-danger))}.navds-alert--error>.navds-alert__icon{color:var(--ac-alert-icon-error-color,var(--a-icon-danger))}.navds-alert--warning{background-color:var(--ac-alert-warning-bg,var(--a-surface-warning-subtle));border-color:var(--ac-alert-warning-border,var(--a-border-warning))}.navds-alert--warning>.navds-alert__icon{background:radial-gradient(circle at 50% 57%,var(--a-surface-default) 30%,0,#0000);color:var(--ac-alert-icon-warning-color,var(--a-icon-warning))}.navds-alert--info{background-color:var(--ac-alert-info-bg,var(--a-surface-info-subtle));border-color:var(--ac-alert-info-border,var(--a-border-info))}.navds-alert--info>.navds-alert__icon{color:var(--ac-alert-icon-info-color,var(--a-icon-info))}.navds-alert--success{background-color:var(--ac-alert-success-bg,var(--a-surface-success-subtle));border-color:var(--ac-alert-success-border,var(--a-border-success))}.navds-alert--success>.navds-alert__icon{color:var(--ac-alert-icon-success-color,var(--a-icon-success))}.navds-alert--inline{background-color:initial;border:none;padding:0}.navds-alert__button-wrapper{align-self:flex-start;display:flex;flex:1;flex-flow:row nowrap;justify-content:flex-end}@media (forced-colors:active){.navds-alert{background-color:canvas;border:1px solid canvastext;color:initial}}.navds-base-alert{border-radius:var(--a-border-radius-xlarge);display:grid;height:-webkit-fit-content;height:fit-content;overflow:clip;--__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}.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)}.navds-base-alert[data-variant=moderate]{outline:1px solid;outline-offset:-1px}.navds-base-alert[data-variant=strong]{outline:4px solid;outline-offset:-4px}.navds-base-alert[data-global=true]{border-radius:0}.navds-base-alert[data-color=accent]{outline-color:var(--a-border-action)}.navds-base-alert[data-color=accent][data-variant=moderate] .navds-base-alert__header{background:var(--a-surface-action-subtle);border-color:var(--a-blue-200);color:var(--a-blue-800)}.navds-base-alert[data-color=neutral]{outline-color:var(--a-gray-700)}.navds-base-alert[data-color=neutral][data-variant=moderate] .navds-base-alert__header{background:var(--a-surface-neutral-subtle);border-color:var(--a-gray-200);color:var(--a-gray-800)}.navds-base-alert[data-color=neutral][data-variant=strong] .navds-base-alert__header{background:var(--a-surface-neutral);color:var(--a-text-on-neutral)}.navds-base-alert[data-color=info]{outline-color:var(--a-border-info)}.navds-base-alert[data-color=info][data-variant=moderate] .navds-base-alert__header{background:var(--a-surface-info-subtle);border-color:var(--a-lightblue-200);color:var(--a-lightblue-900)}.navds-base-alert[data-color=success]{outline-color:var(--a-border-success)}.navds-base-alert[data-color=success][data-variant=moderate] .navds-base-alert__header{background:var(--a-surface-success-subtle);border-color:var(--a-green-200);color:var(--a-green-800)}.navds-base-alert[data-color=success][data-variant=strong] .navds-base-alert__header{background:var(--a-surface-success);color:var(--a-text-on-success)}.navds-base-alert[data-color=warning]{outline-color:var(--a-surface-warning)}.navds-base-alert[data-color=warning][data-variant=moderate] .navds-base-alert__header{background:var(--a-surface-warning-subtle);border-color:var(--a-orange-200);color:var(--a-orange-900)}.navds-base-alert[data-color=warning][data-variant=strong] .navds-base-alert__header{background:var(--a-surface-warning);color:var(--a-text-on-warning)}.navds-base-alert[data-color=danger]{outline-color:var(--a-border-danger)}.navds-base-alert[data-color=danger][data-variant=moderate] .navds-base-alert__header{background:var(--a-surface-danger-subtle);border-color:var(--a-red-200);color:var(--a-red-800)}.navds-base-alert[data-color=danger][data-variant=strong] .navds-base-alert__header{background:var(--a-surface-danger);color:var(--a-text-on-danger)}.navds-base-alert[data-color=brand-magenta]{outline-color:var(--a-border-alt-1)}.navds-base-alert[data-color=brand-magenta][data-variant=moderate] .navds-base-alert__header{background:var(--a-surface-alt-1-subtle);border-color:var(--a-purple-200);color:var(--a-purple-800)}.navds-base-alert[data-color=brand-beige]{outline-color:var(--a-border-warning)}.navds-base-alert[data-color=brand-beige][data-variant=moderate] .navds-base-alert__header{background:var(--a-surface-warning-subtle);border-color:var(--a-orange-200);color:var(--a-orange-900)}.navds-base-alert[data-color=brand-blue]{outline-color:var(--a-border-alt-3)}.navds-base-alert[data-color=brand-blue][data-variant=moderate] .navds-base-alert__header{background:var(--a-surface-alt-3-subtle);border-color:var(--a-deepblue-200);color:var(--a-deepblue-800)}.navds-base-alert[data-color=meta-lime]{outline-color:var(--a-border-alt-2)}.navds-base-alert[data-color=meta-lime][data-variant=moderate] .navds-base-alert__header{background:var(--a-surface-alt-2-subtle);border-color:var(--a-limegreen-200);color:var(--a-limegreen-900)}.navds-base-alert[data-color=meta-purple]{outline-color:var(--a-border-alt-1)}.navds-base-alert[data-color=meta-purple][data-variant=moderate] .navds-base-alert__header{background:var(--a-surface-alt-1-subtle);border-color:var(--a-purple-200);color:var(--a-purple-800)}.navds-base-alert__header{align-items:flex-start;border-bottom:1px solid;display:flex;gap:var(--a-spacing-2);padding:var(--a-spacing-2) var(--__ac-base-alert-pi)}.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))}.navds-base-alert[data-variant=strong] .navds-base-alert__header,.navds-base-alert__header:only-child{border-bottom:none}.navds-base-alert__icon{display:grid;font-size:1.5rem;margin-top:var(--a-spacing-1)}.navds-base-alert__title{padding-block:var(--__ac-base-alert-title-pb)}.navds-base-alert__content{background-color:var(--a-bg-default);padding:var(--__ac-base-alert-content-p)}.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))}.navds-base-alert__close-button.navds-base-alert__close-button{margin-left:auto;z-index:1}.navds-base-alert__close-button.navds-base-alert__close-button:focus-visible{box-shadow:0 0 0 3px #fff}.navds-base-alert__close-button.navds-base-alert__close-button.navds-base-alert__close-button.navds-base-alert__close-button{color:var(--a-text-on-inverted)}.navds-base-alert[data-color=warning] .navds-base-alert__close-button.navds-base-alert__close-button{color:var(--a-text-default)}:is(.navds-base-alert[data-color=warning] .navds-base-alert__close-button.navds-base-alert__close-button):active{color:var(--a-text-on-inverted)}
+.navds-alert{align-items:center;border:1px solid;border-radius:var(--a-border-radius-medium);display:flex;gap:var(--a-spacing-3);padding:var(--a-spacing-4)}.navds-alert--small.navds-alert--close-button{align-items:flex-start}.navds-alert__wrapper--maxwidth{max-width:43.5rem}.navds-alert--close-button>.navds-alert__wrapper{-webkit-margin-before:var(--a-spacing-05);margin-block-start:var(--a-spacing-05)}.navds-alert--small.navds-alert--close-button>.navds-alert__wrapper{-webkit-margin-before:var(--a-spacing-1);margin-block-start:var(--a-spacing-1)}.navds-alert--small{gap:var(--a-spacing-2);padding:var(--a-spacing-2) var(--a-spacing-4)}.navds-alert--full-width{border-radius:0}.navds-alert>.navds-alert__icon{align-self:flex-start;background:radial-gradient(circle,var(--a-surface-default) 47%,0,#0000);flex-shrink:0;font-size:1.5rem;height:var(--a-font-line-height-xlarge)}.navds-alert--small>.navds-alert__icon{-webkit-margin-before:0;height:var(--a-font-line-height-large);margin-block-start:0}.navds-alert--close-button>.navds-alert__icon{-webkit-margin-before:var(--a-spacing-05);margin-block-start:var(--a-spacing-05)}.navds-alert--small.navds-alert--close-button>.navds-alert__icon{-webkit-margin-before:var(--a-spacing-1);margin-block-start:var(--a-spacing-1)}.navds-alert--error{background-color:var(--ac-alert-error-bg,var(--a-surface-danger-subtle));border-color:var(--ac-alert-error-border,var(--a-border-danger))}.navds-alert--error>.navds-alert__icon{color:var(--ac-alert-icon-error-color,var(--a-icon-danger))}.navds-alert--warning{background-color:var(--ac-alert-warning-bg,var(--a-surface-warning-subtle));border-color:var(--ac-alert-warning-border,var(--a-border-warning))}.navds-alert--warning>.navds-alert__icon{background:radial-gradient(circle at 50% 57%,var(--a-surface-default) 30%,0,#0000);color:var(--ac-alert-icon-warning-color,var(--a-icon-warning))}.navds-alert--info{background-color:var(--ac-alert-info-bg,var(--a-surface-info-subtle));border-color:var(--ac-alert-info-border,var(--a-border-info))}.navds-alert--info>.navds-alert__icon{color:var(--ac-alert-icon-info-color,var(--a-icon-info))}.navds-alert--success{background-color:var(--ac-alert-success-bg,var(--a-surface-success-subtle));border-color:var(--ac-alert-success-border,var(--a-border-success))}.navds-alert--success>.navds-alert__icon{color:var(--ac-alert-icon-success-color,var(--a-icon-success))}.navds-alert--inline{background-color:initial;border:none;padding:0}.navds-alert__button-wrapper{align-self:flex-start;display:flex;flex:1;flex-flow:row nowrap;justify-content:flex-end}@media (forced-colors:active){.navds-alert{background-color:canvas;border:1px solid canvastext;color:initial}}.navds-base-alert{border-radius:var(--a-border-radius-xlarge);display:grid;height:-webkit-fit-content;height:fit-content;overflow:clip;--__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-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-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}.navds-base-alert[data-variant=strong]{outline:4px solid;outline-offset:-4px}.navds-base-alert[data-global=true]{border-radius:0}.navds-base-alert[data-color=accent]{outline-color:var(--a-border-action)}.navds-base-alert[data-color=accent][data-variant=moderate] .navds-base-alert__header{background:var(--a-surface-action-subtle);border-color:var(--a-blue-200);color:var(--a-blue-800)}.navds-base-alert[data-color=neutral]{outline-color:var(--a-gray-700)}.navds-base-alert[data-color=neutral][data-variant=moderate] .navds-base-alert__header{background:var(--a-surface-neutral-subtle);border-color:var(--a-gray-200);color:var(--a-gray-800)}.navds-base-alert[data-color=neutral][data-variant=strong] .navds-base-alert__header{background:var(--a-surface-neutral);color:var(--a-text-on-neutral)}.navds-base-alert[data-color=info]{outline-color:var(--a-border-info)}.navds-base-alert[data-color=info][data-variant=moderate] .navds-base-alert__header{background:var(--a-surface-info-subtle);border-color:var(--a-lightblue-200);color:var(--a-lightblue-900)}.navds-base-alert[data-color=success]{outline-color:var(--a-border-success)}.navds-base-alert[data-color=success][data-variant=moderate] .navds-base-alert__header{background:var(--a-surface-success-subtle);border-color:var(--a-green-200);color:var(--a-green-800)}.navds-base-alert[data-color=success][data-variant=strong] .navds-base-alert__header{background:var(--a-surface-success);color:var(--a-text-on-success)}.navds-base-alert[data-color=warning]{outline-color:var(--a-surface-warning)}.navds-base-alert[data-color=warning][data-variant=moderate] .navds-base-alert__header{background:var(--a-surface-warning-subtle);border-color:var(--a-orange-200);color:var(--a-orange-900)}.navds-base-alert[data-color=warning][data-variant=strong] .navds-base-alert__header{background:var(--a-surface-warning);color:var(--a-text-on-warning)}.navds-base-alert[data-color=danger]{outline-color:var(--a-border-danger)}.navds-base-alert[data-color=danger][data-variant=moderate] .navds-base-alert__header{background:var(--a-surface-danger-subtle);border-color:var(--a-red-200);color:var(--a-red-800)}.navds-base-alert[data-color=danger][data-variant=strong] .navds-base-alert__header{background:var(--a-surface-danger);color:var(--a-text-on-danger)}.navds-base-alert[data-color=brand-magenta]{outline-color:var(--a-border-alt-1)}.navds-base-alert[data-color=brand-magenta][data-variant=moderate] .navds-base-alert__header{background:var(--a-surface-alt-1-subtle);border-color:var(--a-purple-200);color:var(--a-purple-800)}.navds-base-alert[data-color=brand-beige]{outline-color:var(--a-border-warning)}.navds-base-alert[data-color=brand-beige][data-variant=moderate] .navds-base-alert__header{background:var(--a-surface-warning-subtle);border-color:var(--a-orange-200);color:var(--a-orange-900)}.navds-base-alert[data-color=brand-blue]{outline-color:var(--a-border-alt-3)}.navds-base-alert[data-color=brand-blue][data-variant=moderate] .navds-base-alert__header{background:var(--a-surface-alt-3-subtle);border-color:var(--a-deepblue-200);color:var(--a-deepblue-800)}.navds-base-alert[data-color=meta-lime]{outline-color:var(--a-border-alt-2)}.navds-base-alert[data-color=meta-lime][data-variant=moderate] .navds-base-alert__header{background:var(--a-surface-alt-2-subtle);border-color:var(--a-limegreen-200);color:var(--a-limegreen-900)}.navds-base-alert[data-color=meta-purple]{outline-color:var(--a-border-alt-1)}.navds-base-alert[data-color=meta-purple][data-variant=moderate] .navds-base-alert__header{background:var(--a-surface-alt-1-subtle);border-color:var(--a-purple-200);color:var(--a-purple-800)}.navds-base-alert__header{align-items:flex-start;border-bottom:1px solid;display:flex;gap:var(--a-spacing-2);padding:0 var(--__ac-base-alert-pi)}.navds-base-alert[data-global=true] .navds-base-alert__header{padding-inline:var(--__ac-global-alert-alignment)}.navds-base-alert[data-variant=strong] .navds-base-alert__header,.navds-base-alert__header:only-child{border-bottom:none}.navds-base-alert__icon{display:grid;font-size:1.5rem;margin-top:var(--__ac-base-alert-header-icon-margin-block-start)}.navds-base-alert__title{padding-block:var(--a-spacing-1-alt)}.navds-base-alert__content{background-color:var(--a-bg-default);padding:var(--__ac-base-alert-content-p)}.navds-base-alert[data-global=true] .navds-base-alert__content{padding-inline:var(--__ac-global-alert-alignment)}.navds-base-alert__close-button.navds-base-alert__close-button{margin-left:auto;-webkit-margin-before:var(--__ac-base-alert-header-close-button-margin-block-start);margin-block-start:var(--__ac-base-alert-header-close-button-margin-block-start);z-index:1}.navds-base-alert__close-button.navds-base-alert__close-button:focus-visible{box-shadow:0 0 0 3px #fff}.navds-base-alert__close-button.navds-base-alert__close-button.navds-base-alert__close-button.navds-base-alert__close-button{color:var(--a-text-on-inverted)}.navds-base-alert[data-color=warning] .navds-base-alert__close-button.navds-base-alert__close-button{color:var(--a-text-default)}:is(.navds-base-alert[data-color=warning] .navds-base-alert__close-button.navds-base-alert__close-button):active{color:var(--a-text-on-inverted)}

package/dist/component/dialog.css

@@ -208,18 +208,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);

package/dist/component/dialog.min.css

@@ -1 +1 @@
-.navds-dialog__popup{--__ac-dialog-transform: ;--__ac-dialog-p-b:var(--a-spacing-4);--__ac-dialog-p-i:var(--a-spacing-5);background-color:var(--a-surface-default);border:1px solid var(--a-border-subtle);border-radius:var(--a-border-radius-large);box-shadow:var(--a-shadow-xlarge);color:var(--a-text-default);display:flex;flex-direction:column;overflow:hidden;position:fixed;transition:.2s cubic-bezier(.25,.46,.45,.94);transition-property:transform,opacity,translate;z-index:2000}.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)}.navds-dialog__popup[data-entering-style],.navds-dialog__popup[data-exiting-style]{opacity:.001;transform:var(--__ac-dialog-transform)}.navds-dialog__popup[data-exiting-style]{transition-duration:.1s}.navds-dialog__popup[data-exiting-style]:after{transition-timing-function:cubic-bezier(.55,.09,.68,.53)}.navds-dialog__popup[data-nested-dialog-open=true]{box-shadow:none}.navds-dialog__popup[data-nested-dialog-open=true]:after{opacity:.9}.navds-dialog__popup:after{background-color:var(--a-surface-backdrop);border-radius:inherit;content:"";inset:0;opacity:0;pointer-events:none;position:absolute;transition:opacity 0s cubic-bezier(.25,.46,.45,.94);z-index:1}.navds-dialog__popup[data-position=center]{--__ac-dialog-center-margin:3rem;--__ac-dialog-transform:scale(0.98);left:0;margin-block:max(var(--__ac-dialog-center-margin),10dvh) auto;margin-inline:auto;max-height:calc(90dvh - var(--__ac-dialog-center-margin));max-width:calc(100dvw - 3rem);right:0;top:0}.navds-dialog__popup[data-position=center][data-nested=true][data-entering-style],.navds-dialog__popup[data-position=center][data-nested=true][data-exiting-style]{opacity:1;transform:scale(1);transition-duration:0s}.navds-dialog__popup[data-position=center][data-nested-dialog-open=true]{transform:translateY(calc(1rem*var(--__axc-nested-level)*-1)) scale(calc(1 - var(--__axc-nested-level)*.02))}@media (max-width:479px) or (max-height:479px){.navds-dialog__popup[data-position=center]{--__ac-dialog-transform:translateY(35%);border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;bottom:0;height:auto;left:0;margin-block:0;margin-inline:auto;max-height:calc(100dvh - max(16px, 10dvh));max-width:95dvw;right:0;top:auto}}.navds-dialog__popup[data-position=left],.navds-dialog__popup[data-position=right]{bottom:0;max-width:calc(100vw - max(16px, 10vw));top:0}[data-nested-dialog-open=true]:is(.navds-dialog__popup[data-position=right],.navds-dialog__popup[data-position=left]):after{opacity:1;transition-duration:.1s}.navds-dialog__popup[data-position=right]{--__ac-dialog-transform:translateX(35%);border-bottom-right-radius:0;border-right:0;border-top-right-radius:0;right:0}.navds-dialog__popup[data-position=left]{--__ac-dialog-transform:translateX(-35%);border-bottom-left-radius:0;border-left:0;border-top-left-radius:0;left:0}.navds-dialog__popup[data-position=bottom]{--__ac-dialog-transform:translateY(35%);border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;bottom:0;height:auto;left:0;margin-inline:auto;max-height:calc(100dvh - max(16px, 10dvh));max-width:95dvw;right:0}.navds-dialog__popup[data-position=bottom][data-nested-dialog-open=true]{transform:translateY(calc(1rem*var(--__axc-nested-level)*-1)) scale(calc(1 - var(--__axc-nested-level)*.02))}.navds-dialog__popup[data-position=fullscreen]{--__ac-dialog-transform:scale(0.98);border:0;border-radius:0;height:100%;inset:0;max-height:100dvh;max-width:100dvw;width:100%}.navds-dialog__backdrop{background-color:var(--a-surface-backdrop);inset:0;min-height:100dvh;position:fixed;transition:opacity .2s cubic-bezier(.25,.46,.45,.94);z-index:2000}@supports (-webkit-touch-callout:none){.navds-dialog__backdrop{position:absolute}}.navds-dialog__backdrop[data-entering-style],.navds-dialog__backdrop[data-exiting-style]{opacity:.001}.navds-dialog__header{padding-block:var(--__ac-dialog-p-b);padding-inline:var(--__ac-dialog-p-i)}.navds-dialog__title{-webkit-margin-after:var(--a-spacing-1);margin-block-end:var(--a-spacing-1)}.navds-dialog__close-button{align-self:start;float:right}.navds-dialog__body{overflow:auto;padding-block:var(--__ac-dialog-p-b);padding-inline:var(--__ac-dialog-p-i)}.navds-dialog__header~.navds-dialog__body{-webkit-padding-before:0;padding-block-start:0}.navds-dialog__footer{display:flex;flex-flow:wrap;gap:var(--a-spacing-2);justify-content:flex-start;padding-block:var(--__ac-dialog-p-b);padding-inline:var(--__ac-dialog-p-i)}
+.navds-dialog__popup{--__ac-dialog-transform: ;--__ac-dialog-p-b:var(--a-spacing-4);--__ac-dialog-p-i:var(--a-spacing-5);background-color:var(--a-surface-default);border:1px solid var(--a-border-subtle);border-radius:var(--a-border-radius-large);box-shadow:var(--a-shadow-xlarge);color:var(--a-text-default);display:flex;flex-direction:column;overflow:hidden;position:fixed;transition:.2s cubic-bezier(.25,.46,.45,.94);transition-property:transform,opacity,translate;z-index:2000}.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)}.navds-dialog__popup[data-entering-style],.navds-dialog__popup[data-exiting-style]{opacity:.001;transform:var(--__ac-dialog-transform)}.navds-dialog__popup[data-exiting-style]{transition-duration:.1s}.navds-dialog__popup[data-exiting-style]:after{transition-timing-function:cubic-bezier(.55,.09,.68,.53)}.navds-dialog__popup[data-nested-dialog-open=true]{box-shadow:none}.navds-dialog__popup[data-nested-dialog-open=true]:after{opacity:.9}.navds-dialog__popup:after{background-color:var(--a-surface-backdrop);border-radius:inherit;content:"";inset:0;opacity:0;pointer-events:none;position:absolute;transition:opacity 0s cubic-bezier(.25,.46,.45,.94);z-index:1}.navds-dialog__popup[data-position=center]{--__ac-dialog-center-margin:3rem;--__ac-dialog-transform:scale(0.98);left:0;margin-block:max(var(--__ac-dialog-center-margin),10dvh) auto;margin-inline:auto;max-height:calc(90dvh - var(--__ac-dialog-center-margin));max-width:calc(100dvw - 3rem);right:0;top:0}.navds-dialog__popup[data-position=center][data-nested=true][data-entering-style],.navds-dialog__popup[data-position=center][data-nested=true][data-exiting-style]{opacity:1;transform:scale(1);transition-duration:0s}.navds-dialog__popup[data-position=center][data-nested-dialog-open=true]{transform:translateY(calc(1rem*var(--__axc-nested-level)*-1)) scale(calc(1 - var(--__axc-nested-level)*.02))}@media (max-width:479px) or (max-height:479px){.navds-dialog__popup[data-position=center]{--__ac-dialog-transform:translateY(35%);border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;bottom:0;height:auto;left:0;margin-block:0;margin-inline:auto;max-height:calc(100dvh - max(16px, 10dvh));max-width:95dvw;right:0;top:auto}}.navds-dialog__popup[data-position=left],.navds-dialog__popup[data-position=right]{bottom:0;max-width:calc(100vw - max(16px, 10vw));top:0}[data-nested-dialog-open=true]:is(.navds-dialog__popup[data-position=right],.navds-dialog__popup[data-position=left]):after{opacity:1;transition-duration:.1s}.navds-dialog__popup[data-position=right]{--__ac-dialog-transform:translateX(35%);border-bottom-right-radius:0;border-right:0;border-top-right-radius:0;right:0}.navds-dialog__popup[data-position=left]{--__ac-dialog-transform:translateX(-35%);border-bottom-left-radius:0;border-left:0;border-top-left-radius:0;left:0}.navds-dialog__popup[data-position=bottom]{--__ac-dialog-transform:translateY(35%);border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;bottom:0;height:auto;left:0;margin-inline:auto;max-height:calc(100dvh - max(16px, 10dvh));max-width:95dvw;right:0}.navds-dialog__popup[data-position=bottom][data-nested-dialog-open=true]{transform:translateY(calc(1rem*var(--__axc-nested-level)*-1)) scale(calc(1 - var(--__axc-nested-level)*.02))}.navds-dialog__popup[data-position=fullscreen]{--__ac-dialog-transform:scale(0.98);border:0;border-radius:0;height:100%;inset:0;max-height:100dvh;max-width:100dvw;width:100%}.navds-dialog__backdrop{background-color:var(--a-surface-backdrop);inset:0;min-height:100dvh;position:fixed;transition:opacity .2s cubic-bezier(.25,.46,.45,.94);z-index:2000}@supports (-webkit-touch-callout:none){.navds-dialog__backdrop{position:absolute}}.navds-dialog__backdrop[data-entering-style],.navds-dialog__backdrop[data-exiting-style]{opacity:.001}.navds-dialog__header{padding-block:var(--__ac-dialog-p-b);padding-inline:var(--__ac-dialog-p-i)}.navds-dialog__title{-webkit-margin-after:var(--a-spacing-1);margin-block-end:var(--a-spacing-1)}.navds-dialog__close-button{align-self:start;float:right}.navds-dialog__header~.navds-dialog__body{-webkit-padding-before:0;padding-block-start:0}.navds-dialog__body{background:linear-gradient(var(--a-surface-default) 30%,#0000) top,linear-gradient(#0000,var(--a-surface-default) 60%) bottom,radial-gradient(farthest-side at 50% 0,#0000004d,#0000) top,radial-gradient(farthest-side at 50% 100%,#0000004d,#0000) bottom;background-attachment:local,local,scroll,scroll;background-repeat:no-repeat;background-size:100% 40px,100% 50px,100% 16px,100% 16px;overflow:auto;overscroll-behavior:contain;position:relative}.navds-dialog__body,.navds-dialog__footer{padding-block:var(--__ac-dialog-p-b);padding-inline:var(--__ac-dialog-p-i)}.navds-dialog__footer{display:flex;flex-flow:wrap;gap:var(--a-spacing-2);justify-content:flex-end}

package/dist/component/readmore.css

@@ -27,8 +27,7 @@
     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;
@@ -44,15 +43,13 @@
   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);
   }

package/dist/component/readmore.min.css

@@ -1 +1 @@
-.navds-read-more__button{align-items:flex-start;background:none;border:none;border-radius:var(--a-border-radius-small);color:var(--ac-read-more-text,var(--a-text-action));cursor:pointer;display:flex;gap:var(--a-spacing-05);margin:0;padding:var(--a-spacing-1) var(--a-spacing-2) var(--a-spacing-1) var(--a-spacing-05);text-align:start}.navds-read-more--small .navds-read-more__button{padding:var(--a-spacing-05) var(--a-spacing-1-alt) var(--a-spacing-05) var(--a-spacing-05)}.navds-read-more--large .navds-read-more__button{padding:var(--a-spacing-3) var(--a-spacing-1-alt) var(--a-spacing-3) var(--a-spacing-05)}@media (forced-colors:active){.navds-read-more__button{background-color:ButtonFace;border:1px solid ButtonText;color:ButtonText}.navds-read-more__button.navds-read-more__button:focus-visible,.navds-read-more__content.navds-read-more__content:focus-visible{box-shadow:none;outline:2px solid highlight;outline-offset:2px}}.navds-read-more__button:hover{background-color:var(--ac-read-more-hover-bg,var(--a-surface-hover));color:var(--ac-read-more-hover-text,var(--a-text-action-hover))}.navds-read-more__button:active{background-color:var(--ac-read-more-active-bg,var(--a-surface-active))}.navds-read-more__button:focus-visible,.navds-read-more__content:focus-visible{box-shadow:var(--a-shadow-focus);outline:none}@supports not selector(:focus-visible){.navds-read-more__button:focus,.navds-read-more__content:focus{box-shadow:var(--a-shadow-focus);outline:none}}.navds-read-more__content{border-left:2px solid var(--ac-read-more-line,var(--a-border-divider));color:var(--a-text-default);margin-left:.8125rem;margin-top:var(--a-spacing-1);padding-left:.8125rem}.navds-read-more--small .navds-read-more__content{margin-left:.6875rem;padding-left:.6875rem}.navds-read-more__content--closed{display:none}.navds-read-more__expand-icon{flex-shrink:0;font-size:1.5rem}.navds-read-more--small .navds-read-more__expand-icon{font-size:1.25rem}.navds-read-more__button:hover>.navds-read-more__expand-icon{position:relative;top:1px}.navds-read-more--open>.navds-read-more__button>.navds-read-more__expand-icon{transform:rotate(-180deg)}.navds-read-more--open>.navds-read-more__button:hover>.navds-read-more__expand-icon{top:-1px}
+.navds-read-more__button{align-items:flex-start;background:none;border:none;border-radius:var(--a-border-radius-small);color:var(--ac-read-more-text,var(--a-text-action));cursor:pointer;display:flex;gap:var(--a-spacing-05);margin:0;padding:var(--a-spacing-1) var(--a-spacing-2) var(--a-spacing-1) var(--a-spacing-05);text-align:start}.navds-read-more--small .navds-read-more__button{padding:var(--a-spacing-05) var(--a-spacing-1-alt) var(--a-spacing-05) var(--a-spacing-05)}.navds-read-more--large .navds-read-more__button{padding:var(--a-spacing-3) var(--a-spacing-1-alt) var(--a-spacing-3) var(--a-spacing-05)}@media (forced-colors:active){.navds-read-more__button{background-color:ButtonFace;border:1px solid ButtonText;color:ButtonText}.navds-read-more__button.navds-read-more__button:focus-visible{box-shadow:none;outline:2px solid highlight;outline-offset:2px}}.navds-read-more__button:hover{background-color:var(--ac-read-more-hover-bg,var(--a-surface-hover));color:var(--ac-read-more-hover-text,var(--a-text-action-hover))}.navds-read-more__button:active{background-color:var(--ac-read-more-active-bg,var(--a-surface-active))}.navds-read-more__button:focus-visible{box-shadow:var(--a-shadow-focus);outline:none}@supports not selector(:focus-visible){.navds-read-more__button:focus{box-shadow:var(--a-shadow-focus);outline:none}}.navds-read-more__content{border-left:2px solid var(--ac-read-more-line,var(--a-border-divider));color:var(--a-text-default);margin-left:.8125rem;margin-top:var(--a-spacing-1);padding-left:.8125rem}.navds-read-more--small .navds-read-more__content{margin-left:.6875rem;padding-left:.6875rem}.navds-read-more__content--closed{display:none}.navds-read-more__expand-icon{flex-shrink:0;font-size:1.5rem}.navds-read-more--small .navds-read-more__expand-icon{font-size:1.25rem}.navds-read-more__button:hover>.navds-read-more__expand-icon{position:relative;top:1px}.navds-read-more--open>.navds-read-more__button>.navds-read-more__expand-icon{transform:rotate(-180deg)}.navds-read-more--open>.navds-read-more__button:hover>.navds-read-more__expand-icon{top:-1px}

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;
@@ -2190,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);
@@ -7491,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;
@@ -7508,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);
   }