@navikt/ds-css 7.38.0 → 7.39.0

package/dist/darkside/component/alert.css

@@ -77,17 +77,27 @@
     border-radius: var(--ax-radius-12);
     --__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));
     height: fit-content;
     display: grid;
     overflow: clip;
   }
 
+  .aksel-base-alert[data-centered="false"] {
+    --__axc-global-alert-alignment: var(--ax-space-20);
+  }
+
   .aksel-base-alert[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);
+  }
+
+  .aksel-base-alert[data-size="small"][data-centered="false"] {
+    --__axc-global-alert-alignment: var(--ax-space-16);
   }
 
   .aksel-base-alert[data-variant="moderate"] {
@@ -111,13 +121,13 @@
   .aksel-base-alert__header {
     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;
     display: flex;
   }
 
   .aksel-base-alert[data-global="true"] .aksel-base-alert__header {
-    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"] .aksel-base-alert__header {
@@ -137,13 +147,13 @@
   }
 
   .aksel-base-alert__icon {
-    margin-top: var(--ax-space-4);
+    margin-top: var(--__axc-base-alert-header-icon-margin-block-start);
     font-size: 1.5rem;
     display: grid;
   }
 
   .aksel-base-alert__title {
-    padding-block: var(--__axc-base-alert-title-pb);
+    padding-block: var(--ax-space-6);
   }
 
   .aksel-base-alert__content {
@@ -152,12 +162,13 @@
   }
 
   .aksel-base-alert[data-global="true"] .aksel-base-alert__content {
-    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 {
-    z-index: 1;
     margin-left: auto;
+    z-index: 1;
+    margin-block-start: var(--__axc-base-alert-header-close-button-margin-block-start);
   }
 
   .aksel-base-alert__close-button:focus-visible {

package/dist/darkside/component/alert.min.css

@@ -1 +1 @@
-@layer aksel.components{.aksel-alert{border-radius:var(--ax-radius-12);padding:var(--ax-space-16) var(--ax-space-20);gap:var(--ax-space-12);border:1px solid;border-color:var(--ax-border-default);background-color:var(--ax-bg-moderate);align-items:center;display:flex}.aksel-alert>.aksel-alert__icon{color:var(--ax-text-decoration)}@media(forced-colors:active){.aksel-alert{color:canvastext;background-color:canvas;border:1px solid canvastext}}.aksel-alert__wrapper--maxwidth{max-width:43.5rem}.aksel-alert__icon{height:var(--ax-font-line-height-xlarge);flex-shrink:0;align-self:flex-start;font-size:1.5rem}.aksel-alert--small{padding:var(--ax-space-12) var(--ax-space-16);gap:var(--ax-space-8)}.aksel-alert--small>.aksel-alert__icon{height:var(--ax-font-line-height-large);margin-block-start:0}.aksel-alert--full-width{border-radius:0}.aksel-alert--inline{background-color:#0000;border:none;padding:0}.aksel-alert__button-wrapper{flex-flow:row;flex:1;justify-content:flex-end;align-self:flex-start;display:flex}.aksel-alert--close-button>.aksel-alert__wrapper,.aksel-alert--close-button>.aksel-alert__icon{margin-block-start:var(--ax-space-2)}.aksel-alert--close-button.aksel-alert--small{align-items:flex-start}.aksel-alert--close-button.aksel-alert--small>.aksel-alert__wrapper,.aksel-alert--close-button.aksel-alert--small>.aksel-alert__icon{margin-block-start:var(--ax-space-4)}.aksel-base-alert{border-radius:var(--ax-radius-12);--__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;height:fit-content;display:grid;overflow:clip}.aksel-base-alert[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)}.aksel-base-alert[data-variant=moderate]{outline:1px solid var(--ax-border-default);outline-offset:-1px}.aksel-base-alert[data-variant=strong]{outline:4px solid var(--ax-border-default);outline-offset:-4px}.aksel-base-alert[data-variant=strong][data-color=neutral]{outline-color:var(--ax-border-strong)}.aksel-base-alert[data-global=true]{border-radius:0}.aksel-base-alert__header{align-items:flex-start;gap:var(--ax-space-8);padding:var(--ax-space-8) var(--__axc-base-alert-pi);border-bottom:1px solid;display:flex}.aksel-base-alert[data-global=true] .aksel-base-alert__header{padding-inline:max(var(--__axc-base-alert-pi),calc((100% - var(--__axc-base-alert-header-max-width)) / 2))}.aksel-base-alert[data-variant=moderate] .aksel-base-alert__header{background:var(--ax-bg-moderate);color:var(--ax-text-default);border-color:var(--ax-border-subtleA)}.aksel-base-alert[data-variant=strong] .aksel-base-alert__header{background:var(--ax-bg-strong);color:var(--ax-text-contrast);border-bottom:none}.aksel-base-alert__header:only-child{border-bottom:none}.aksel-base-alert__icon{margin-top:var(--ax-space-4);font-size:1.5rem;display:grid}.aksel-base-alert__title{padding-block:var(--__axc-base-alert-title-pb)}.aksel-base-alert__content{padding:var(--__axc-base-alert-content-p);background-color:var(--ax-bg-default)}.aksel-base-alert[data-global=true] .aksel-base-alert__content{padding-inline:max(var(--__axc-base-alert-pi),calc((100% - var(--__axc-base-alert-header-max-width)) / 2))}.aksel-base-alert__close-button{z-index:1;margin-left:auto}.aksel-base-alert__close-button:focus-visible{outline-color:var(--ax-bg-default)}.aksel-base-alert__close-button.aksel-base-alert__close-button.aksel-base-alert__close-button{color:var(--ax-text-neutral-contrast)}}
+@layer aksel.components{.aksel-alert{border-radius:var(--ax-radius-12);padding:var(--ax-space-16) var(--ax-space-20);gap:var(--ax-space-12);border:1px solid;border-color:var(--ax-border-default);background-color:var(--ax-bg-moderate);align-items:center;display:flex}.aksel-alert>.aksel-alert__icon{color:var(--ax-text-decoration)}@media(forced-colors:active){.aksel-alert{color:canvastext;background-color:canvas;border:1px solid canvastext}}.aksel-alert__wrapper--maxwidth{max-width:43.5rem}.aksel-alert__icon{height:var(--ax-font-line-height-xlarge);flex-shrink:0;align-self:flex-start;font-size:1.5rem}.aksel-alert--small{padding:var(--ax-space-12) var(--ax-space-16);gap:var(--ax-space-8)}.aksel-alert--small>.aksel-alert__icon{height:var(--ax-font-line-height-large);margin-block-start:0}.aksel-alert--full-width{border-radius:0}.aksel-alert--inline{background-color:#0000;border:none;padding:0}.aksel-alert__button-wrapper{flex-flow:row;flex:1;justify-content:flex-end;align-self:flex-start;display:flex}.aksel-alert--close-button>.aksel-alert__wrapper,.aksel-alert--close-button>.aksel-alert__icon{margin-block-start:var(--ax-space-2)}.aksel-alert--close-button.aksel-alert--small{align-items:flex-start}.aksel-alert--close-button.aksel-alert--small>.aksel-alert__wrapper,.aksel-alert--close-button.aksel-alert--small>.aksel-alert__icon{margin-block-start:var(--ax-space-4)}.aksel-base-alert{border-radius:var(--ax-radius-12);--__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-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));height:fit-content;display:grid;overflow:clip}.aksel-base-alert[data-centered=false]{--__axc-global-alert-alignment: var(--ax-space-20)}.aksel-base-alert[data-size=small]{--__axc-base-alert-content-p: var(--ax-space-8) var(--ax-space-16) var(--ax-space-12) var(--ax-space-16);--__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)}.aksel-base-alert[data-size=small][data-centered=false]{--__axc-global-alert-alignment: var(--ax-space-16)}.aksel-base-alert[data-variant=moderate]{outline:1px solid var(--ax-border-default);outline-offset:-1px}.aksel-base-alert[data-variant=strong]{outline:4px solid var(--ax-border-default);outline-offset:-4px}.aksel-base-alert[data-variant=strong][data-color=neutral]{outline-color:var(--ax-border-strong)}.aksel-base-alert[data-global=true]{border-radius:0}.aksel-base-alert__header{align-items:flex-start;gap:var(--ax-space-8);padding:0 var(--__axc-base-alert-pi);border-bottom:1px solid;display:flex}.aksel-base-alert[data-global=true] .aksel-base-alert__header{padding-inline:var(--__axc-global-alert-alignment)}.aksel-base-alert[data-variant=moderate] .aksel-base-alert__header{background:var(--ax-bg-moderate);color:var(--ax-text-default);border-color:var(--ax-border-subtleA)}.aksel-base-alert[data-variant=strong] .aksel-base-alert__header{background:var(--ax-bg-strong);color:var(--ax-text-contrast);border-bottom:none}.aksel-base-alert__header:only-child{border-bottom:none}.aksel-base-alert__icon{margin-top:var(--__axc-base-alert-header-icon-margin-block-start);font-size:1.5rem;display:grid}.aksel-base-alert__title{padding-block:var(--ax-space-6)}.aksel-base-alert__content{padding:var(--__axc-base-alert-content-p);background-color:var(--ax-bg-default)}.aksel-base-alert[data-global=true] .aksel-base-alert__content{padding-inline:var(--__axc-global-alert-alignment)}.aksel-base-alert__close-button{margin-left:auto;z-index:1;margin-block-start:var(--__axc-base-alert-header-close-button-margin-block-start)}.aksel-base-alert__close-button:focus-visible{outline-color:var(--ax-bg-default)}.aksel-base-alert__close-button.aksel-base-alert__close-button.aksel-base-alert__close-button{color:var(--ax-text-neutral-contrast)}}

package/dist/darkside/component/dialog.css

@@ -187,6 +187,8 @@
   .aksel-dialog__body {
     padding-block: var(--__axc-dialog-p-b);
     padding-inline: var(--__axc-dialog-p-i);
+    overscroll-behavior: contain;
+    position: relative;
     overflow: auto;
   }
 
@@ -194,6 +196,13 @@
     padding-block-start: 0;
   }
 
+  .aksel-dialog__body {
+    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, .3), transparent) top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .3), transparent) bottom;
+    background-repeat: no-repeat;
+    background-size: 100% 40px, 100% 50px, 100% 16px, 100% 16px;
+    background-attachment: local, local, scroll, scroll;
+  }
+
   .aksel-dialog__footer {
     justify-content: flex-end;
     gap: var(--ax-space-8);

package/dist/darkside/component/dialog.min.css

@@ -1 +1 @@
-@layer aksel.components{.aksel-dialog__popup{--__axc-dialog-transform: ;--__axc-dialog-p-b: var(--ax-space-16);--__axc-dialog-p-i: var(--ax-space-20);background-color:var(--ax-bg-raised);border-radius:var(--ax-radius-12);color:var(--ax-text-neutral);box-shadow:var(--ax-shadow-dialog);border:1px solid var(--ax-border-neutral-subtleA);z-index:2000;flex-direction:column;transition:transform .2s cubic-bezier(.25,.46,.45,.94),opacity .2s cubic-bezier(.25,.46,.45,.94),translate .2s cubic-bezier(.25,.46,.45,.94);display:flex;position:fixed;overflow:hidden}.aksel-dialog__popup:focus{outline:none}.aksel-dialog__popup[data-size=small]{--__axc-dialog-p-b: var(--ax-space-12);--__axc-dialog-p-i: var(--ax-space-16)}.aksel-dialog__popup[data-entering-style],.aksel-dialog__popup[data-exiting-style]{opacity:.001;transform:var(--__axc-dialog-transform)}.aksel-dialog__popup[data-exiting-style]{transition-duration:.1s}.aksel-dialog__popup[data-exiting-style]:after{transition-timing-function:cubic-bezier(.55,.09,.68,.53)}.aksel-dialog__popup[data-nested-dialog-open=true]{box-shadow:none}.aksel-dialog__popup[data-nested-dialog-open=true]:after{opacity:.9}.aksel-dialog__popup:after{content:"";border-radius:inherit;background-color:var(--ax-bg-overlay);opacity:0;z-index:1;pointer-events:none;transition:opacity cubic-bezier(.25,.46,.45,.94);position:absolute;inset:0}.aksel-dialog__popup[data-position=center]{--__axc-dialog-center-margin: 3rem;--__axc-dialog-transform: scale(.98);max-width:calc(100dvw - 3rem);max-height:calc(90dvh - var(--__axc-dialog-center-margin));margin-inline:auto;margin-block:max(var(--__axc-dialog-center-margin),10dvh) auto;top:0;left:0;right:0}.aksel-dialog__popup[data-position=center][data-nested=true][data-entering-style],.aksel-dialog__popup[data-position=center][data-nested=true][data-exiting-style]{opacity:1;transition-duration:0s;transform:scale(1)}.aksel-dialog__popup[data-position=center][data-nested-dialog-open=true]{transform:translateY(calc(1rem * var(--__axc-nested-level) * -1)) scale(calc(1 - .02 * var(--__axc-nested-level)))}@media(max-width:768px)or (max-height:479px){.aksel-dialog__popup[data-position=center]{--__axc-dialog-transform: translateY(35%);border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0;max-width:95dvw;height:auto;max-height:calc(100dvh - max(16px,10dvh));margin-block:0;margin-inline:auto;inset:auto 0 0}}.aksel-dialog__popup[data-position=right],.aksel-dialog__popup[data-position=left]{max-width:calc(100vw - max(16px,10vw));top:0;bottom:0}:is(.aksel-dialog__popup[data-position=right],.aksel-dialog__popup[data-position=left])[data-nested-dialog-open=true]:after{opacity:1;transition-duration:.1s}.aksel-dialog__popup[data-position=right]{--__axc-dialog-transform: translateX(35%);border-right:0;border-top-right-radius:0;border-bottom-right-radius:0;right:0}.aksel-dialog__popup[data-position=left]{--__axc-dialog-transform: translateX(-35%);border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;left:0}.aksel-dialog__popup[data-position=bottom]{--__axc-dialog-transform: translateY(35%);border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0;max-width:95dvw;height:auto;max-height:calc(100dvh - max(16px,10dvh));margin-inline:auto;bottom:0;left:0;right:0}.aksel-dialog__popup[data-position=bottom][data-nested-dialog-open=true]{transform:translateY(calc(1rem * var(--__axc-nested-level) * -1)) scale(calc(1 - .02 * var(--__axc-nested-level)))}.aksel-dialog__popup[data-position=fullscreen]{--__axc-dialog-transform: scale(.98);border:0;border-radius:0;width:100%;max-width:100dvw;height:100%;max-height:100dvh;inset:0}.aksel-dialog__backdrop{background-color:var(--ax-bg-overlay);z-index:2000;min-height:100dvh;transition:opacity .2s cubic-bezier(.25,.46,.45,.94);position:fixed;inset:0}@supports (-webkit-touch-callout: none){.aksel-dialog__backdrop{position:absolute}}.aksel-dialog__backdrop[data-entering-style],.aksel-dialog__backdrop[data-exiting-style]{opacity:.001}.aksel-dialog__header{padding-block:var(--__axc-dialog-p-b);padding-inline:var(--__axc-dialog-p-i)}.aksel-dialog__title{margin-block-end:var(--ax-space-4)}.aksel-dialog__close-button{float:right;align-self:start}.aksel-dialog__body{padding-block:var(--__axc-dialog-p-b);padding-inline:var(--__axc-dialog-p-i);overflow:auto}.aksel-dialog__header~.aksel-dialog__body{padding-block-start:0}.aksel-dialog__footer{justify-content:flex-end;gap:var(--ax-space-8);padding-block:var(--__axc-dialog-p-b);padding-inline:var(--__axc-dialog-p-i);flex-flow:wrap;display:flex}@media(forced-colors:active){.aksel-dialog__popup{outline:2px solid var(--ax-border-neutral-strong)!important}}}
+@layer aksel.components{.aksel-dialog__popup{--__axc-dialog-transform: ;--__axc-dialog-p-b: var(--ax-space-16);--__axc-dialog-p-i: var(--ax-space-20);background-color:var(--ax-bg-raised);border-radius:var(--ax-radius-12);color:var(--ax-text-neutral);box-shadow:var(--ax-shadow-dialog);border:1px solid var(--ax-border-neutral-subtleA);z-index:2000;flex-direction:column;transition:transform .2s cubic-bezier(.25,.46,.45,.94),opacity .2s cubic-bezier(.25,.46,.45,.94),translate .2s cubic-bezier(.25,.46,.45,.94);display:flex;position:fixed;overflow:hidden}.aksel-dialog__popup:focus{outline:none}.aksel-dialog__popup[data-size=small]{--__axc-dialog-p-b: var(--ax-space-12);--__axc-dialog-p-i: var(--ax-space-16)}.aksel-dialog__popup[data-entering-style],.aksel-dialog__popup[data-exiting-style]{opacity:.001;transform:var(--__axc-dialog-transform)}.aksel-dialog__popup[data-exiting-style]{transition-duration:.1s}.aksel-dialog__popup[data-exiting-style]:after{transition-timing-function:cubic-bezier(.55,.09,.68,.53)}.aksel-dialog__popup[data-nested-dialog-open=true]{box-shadow:none}.aksel-dialog__popup[data-nested-dialog-open=true]:after{opacity:.9}.aksel-dialog__popup:after{content:"";border-radius:inherit;background-color:var(--ax-bg-overlay);opacity:0;z-index:1;pointer-events:none;transition:opacity cubic-bezier(.25,.46,.45,.94);position:absolute;inset:0}.aksel-dialog__popup[data-position=center]{--__axc-dialog-center-margin: 3rem;--__axc-dialog-transform: scale(.98);max-width:calc(100dvw - 3rem);max-height:calc(90dvh - var(--__axc-dialog-center-margin));margin-inline:auto;margin-block:max(var(--__axc-dialog-center-margin),10dvh) auto;top:0;left:0;right:0}.aksel-dialog__popup[data-position=center][data-nested=true][data-entering-style],.aksel-dialog__popup[data-position=center][data-nested=true][data-exiting-style]{opacity:1;transition-duration:0s;transform:scale(1)}.aksel-dialog__popup[data-position=center][data-nested-dialog-open=true]{transform:translateY(calc(1rem * var(--__axc-nested-level) * -1)) scale(calc(1 - .02 * var(--__axc-nested-level)))}@media(max-width:768px)or (max-height:479px){.aksel-dialog__popup[data-position=center]{--__axc-dialog-transform: translateY(35%);border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0;max-width:95dvw;height:auto;max-height:calc(100dvh - max(16px,10dvh));margin-block:0;margin-inline:auto;inset:auto 0 0}}.aksel-dialog__popup[data-position=right],.aksel-dialog__popup[data-position=left]{max-width:calc(100vw - max(16px,10vw));top:0;bottom:0}:is(.aksel-dialog__popup[data-position=right],.aksel-dialog__popup[data-position=left])[data-nested-dialog-open=true]:after{opacity:1;transition-duration:.1s}.aksel-dialog__popup[data-position=right]{--__axc-dialog-transform: translateX(35%);border-right:0;border-top-right-radius:0;border-bottom-right-radius:0;right:0}.aksel-dialog__popup[data-position=left]{--__axc-dialog-transform: translateX(-35%);border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;left:0}.aksel-dialog__popup[data-position=bottom]{--__axc-dialog-transform: translateY(35%);border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0;max-width:95dvw;height:auto;max-height:calc(100dvh - max(16px,10dvh));margin-inline:auto;bottom:0;left:0;right:0}.aksel-dialog__popup[data-position=bottom][data-nested-dialog-open=true]{transform:translateY(calc(1rem * var(--__axc-nested-level) * -1)) scale(calc(1 - .02 * var(--__axc-nested-level)))}.aksel-dialog__popup[data-position=fullscreen]{--__axc-dialog-transform: scale(.98);border:0;border-radius:0;width:100%;max-width:100dvw;height:100%;max-height:100dvh;inset:0}.aksel-dialog__backdrop{background-color:var(--ax-bg-overlay);z-index:2000;min-height:100dvh;transition:opacity .2s cubic-bezier(.25,.46,.45,.94);position:fixed;inset:0}@supports (-webkit-touch-callout: none){.aksel-dialog__backdrop{position:absolute}}.aksel-dialog__backdrop[data-entering-style],.aksel-dialog__backdrop[data-exiting-style]{opacity:.001}.aksel-dialog__header{padding-block:var(--__axc-dialog-p-b);padding-inline:var(--__axc-dialog-p-i)}.aksel-dialog__title{margin-block-end:var(--ax-space-4)}.aksel-dialog__close-button{float:right;align-self:start}.aksel-dialog__body{padding-block:var(--__axc-dialog-p-b);padding-inline:var(--__axc-dialog-p-i);overscroll-behavior:contain;position:relative;overflow:auto}.aksel-dialog__header~.aksel-dialog__body{padding-block-start:0}.aksel-dialog__body{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,.3),transparent) top,radial-gradient(farthest-side at 50% 100%,rgba(0,0,0,.3),transparent) bottom;background-repeat:no-repeat;background-size:100% 40px,100% 50px,100% 16px,100% 16px;background-attachment:local,local,scroll,scroll}.aksel-dialog__footer{justify-content:flex-end;gap:var(--ax-space-8);padding-block:var(--__axc-dialog-p-b);padding-inline:var(--__axc-dialog-p-i);flex-flow:wrap;display:flex}@media(forced-colors:active){.aksel-dialog__popup{outline:2px solid var(--ax-border-neutral-strong)!important}}}

package/dist/darkside/component/readmore.css

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

package/dist/darkside/component/readmore.min.css

@@ -1 +1 @@
-@layer aksel.components{.aksel-read-more{--__axc-read-more-icon-size: 1.5rem;--__axc-read-more-pi-start: 0px;--__axc-read-more-pi-end: var(--ax-space-4);--__axc-read-more-pb: var(--ax-space-4)}.aksel-read-more__button{cursor:pointer;align-items:flex-start;gap:var(--ax-space-4);color:var(--ax-text-subtle);padding-inline:var(--__axc-read-more-pi-start) var(--__axc-read-more-pi-end);padding-block:var(--__axc-read-more-pb);text-align:start;background:none;border:none;margin:0;display:flex}.aksel-read-more__button:focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:3px}.aksel-read-more__button[data-state=open] .aksel-read-more__expand-icon{transform:rotateX(-180deg)}.aksel-read-more:is([data-volume=low],:not([data-volume])) .aksel-read-more__button{border-radius:var(--ax-radius-4)}.aksel-read-more:is([data-volume=low],:not([data-volume])) .aksel-read-more__button:hover{background-color:var(--ax-bg-neutral-moderate-hoverA)}.aksel-read-more[data-volume=high] .aksel-read-more__button{background-color:var(--ax-bg-moderate);border-radius:var(--ax-radius-full)}.aksel-read-more[data-volume=high] .aksel-read-more__button:hover{background-color:var(--ax-bg-moderate-hoverA);color:var(--ax-text-default)}.aksel-read-more[data-volume=high].aksel-read-more--large{--__axc-read-more-pi-start: var(--ax-space-12);--__axc-read-more-pi-end: var(--ax-space-24)}.aksel-read-more[data-volume=high].aksel-read-more--small,.aksel-read-more[data-volume=high].aksel-read-more--medium{--__axc-read-more-pi-start: var(--ax-space-8);--__axc-read-more-pi-end: var(--ax-space-16)}.aksel-read-more__content{margin-top:var(--ax-space-8);border-left:2px solid var(--ax-border-neutral-subtleA);color:var(--ax-text-neutral);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))}.aksel-read-more__content:focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:3px}.aksel-read-more__content[data-state=closed]{display:none}.aksel-read-more__expand-icon{font-size:var(--__axc-read-more-icon-size);flex-shrink:0;transition:transform .1s cubic-bezier(.2,0,0,1)}.aksel-read-more--large{--__axc-read-more-pb: var(--ax-space-12)}.aksel-read-more--small{--__axc-read-more-icon-size: 1.25rem;--__axc-read-more-pb: var(--ax-space-2)}@media(forced-colors:active){.aksel-read-more__button{color:buttontext;background-color:buttonface;border:1px solid buttontext}}}
+@layer aksel.components{.aksel-read-more{--__axc-read-more-icon-size: 1.5rem;--__axc-read-more-pi-start: 0px;--__axc-read-more-pi-end: var(--ax-space-4);--__axc-read-more-pb: var(--ax-space-4)}.aksel-read-more__button{cursor:pointer;align-items:flex-start;gap:var(--ax-space-4);color:var(--ax-text-subtle);padding-inline:var(--__axc-read-more-pi-start) var(--__axc-read-more-pi-end);padding-block:var(--__axc-read-more-pb);text-align:start;background:none;border:none;margin:0;display:flex}.aksel-read-more__button:focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:3px}.aksel-read-more__button[data-state=open] .aksel-read-more__expand-icon{transform:rotateX(-180deg)}.aksel-read-more:is([data-volume=low],:not([data-volume])) .aksel-read-more__button{border-radius:var(--ax-radius-4)}.aksel-read-more:is([data-volume=low],:not([data-volume])) .aksel-read-more__button:hover{background-color:var(--ax-bg-neutral-moderate-hoverA)}.aksel-read-more[data-volume=high] .aksel-read-more__button{background-color:var(--ax-bg-moderate);border-radius:var(--ax-radius-full)}.aksel-read-more[data-volume=high] .aksel-read-more__button:hover{background-color:var(--ax-bg-moderate-hoverA);color:var(--ax-text-default)}.aksel-read-more[data-volume=high].aksel-read-more--large{--__axc-read-more-pi-start: var(--ax-space-12);--__axc-read-more-pi-end: var(--ax-space-24)}.aksel-read-more[data-volume=high].aksel-read-more--small,.aksel-read-more[data-volume=high].aksel-read-more--medium{--__axc-read-more-pi-start: var(--ax-space-8);--__axc-read-more-pi-end: var(--ax-space-16)}.aksel-read-more__content{margin-top:var(--ax-space-8);border-left:2px solid var(--ax-border-neutral-subtleA);color:var(--ax-text-neutral);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))}.aksel-read-more__content[data-state=closed]{display:none}.aksel-read-more__expand-icon{font-size:var(--__axc-read-more-icon-size);flex-shrink:0;transition:transform .1s cubic-bezier(.2,0,0,1)}.aksel-read-more--large{--__axc-read-more-pb: var(--ax-space-12)}.aksel-read-more--small{--__axc-read-more-icon-size: 1.25rem;--__axc-read-more-pb: var(--ax-space-2)}@media(forced-colors:active){.aksel-read-more__button{color:buttontext;background-color:buttonface;border:1px solid buttontext}}}

package/dist/darkside/components.css

@@ -2756,17 +2756,27 @@
     border-radius: var(--ax-radius-12);
     --__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));
     height: fit-content;
     display: grid;
     overflow: clip;
   }
 
+  .aksel-base-alert[data-centered="false"] {
+    --__axc-global-alert-alignment: var(--ax-space-20);
+  }
+
   .aksel-base-alert[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);
+  }
+
+  .aksel-base-alert[data-size="small"][data-centered="false"] {
+    --__axc-global-alert-alignment: var(--ax-space-16);
   }
 
   .aksel-base-alert[data-variant="moderate"] {
@@ -2790,13 +2800,13 @@
   .aksel-base-alert__header {
     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;
     display: flex;
   }
 
   .aksel-base-alert[data-global="true"] .aksel-base-alert__header {
-    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"] .aksel-base-alert__header {
@@ -2816,13 +2826,13 @@
   }
 
   .aksel-base-alert__icon {
-    margin-top: var(--ax-space-4);
+    margin-top: var(--__axc-base-alert-header-icon-margin-block-start);
     font-size: 1.5rem;
     display: grid;
   }
 
   .aksel-base-alert__title {
-    padding-block: var(--__axc-base-alert-title-pb);
+    padding-block: var(--ax-space-6);
   }
 
   .aksel-base-alert__content {
@@ -2831,12 +2841,13 @@
   }
 
   .aksel-base-alert[data-global="true"] .aksel-base-alert__content {
-    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 {
-    z-index: 1;
     margin-left: auto;
+    z-index: 1;
+    margin-block-start: var(--__axc-base-alert-header-close-button-margin-block-start);
   }
 
   .aksel-base-alert__close-button:focus-visible {
@@ -3426,6 +3437,8 @@
   .aksel-dialog__body {
     padding-block: var(--__axc-dialog-p-b);
     padding-inline: var(--__axc-dialog-p-i);
+    overscroll-behavior: contain;
+    position: relative;
     overflow: auto;
   }
 
@@ -3433,6 +3446,13 @@
     padding-block-start: 0;
   }
 
+  .aksel-dialog__body {
+    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, .3), transparent) top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .3), transparent) bottom;
+    background-repeat: no-repeat;
+    background-size: 100% 40px, 100% 50px, 100% 16px, 100% 16px;
+    background-attachment: local, local, scroll, scroll;
+  }
+
   .aksel-dialog__footer {
     justify-content: flex-end;
     gap: var(--ax-space-8);
@@ -5430,11 +5450,6 @@
     padding-left: calc(var(--__axc-read-more-icon-size) / 2 - 1px + var(--ax-space-4));
   }
 
-  .aksel-read-more__content:focus-visible {
-    outline: 3px solid var(--ax-border-focus);
-    outline-offset: 3px;
-  }
-
   .aksel-read-more__content[data-state="closed"] {
     display: none;
   }