@navikt/ds-css 7.32.4 → 7.32.5

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-css
 
+## 7.32.5
+
 ## 7.32.4
 
 ### Patch Changes

package/config/bundle.darkside.ts

@@ -1,9 +1,9 @@
 import browserslist from "browserslist";
 import esbuild from "esbuild";
 import fastglob from "fast-glob";
-import fs from "fs";
 import { Features, browserslistToTargets, bundleAsync } from "lightningcss";
-import path from "path";
+import fs from "node:fs";
+import path from "node:path";
 import {
   StyleMappings,
   componentsCss,

package/config/tests/bundle.test.ts

@@ -1,5 +1,5 @@
 import fastglob from "fast-glob";
-import path from "path";
+import path from "node:path";
 import { describe, expect, test } from "vitest";
 
 /**

package/darkside/modal.darkside.css

@@ -1,7 +1,3 @@
-.aksel-modal__document-body {
-  overflow: hidden;
-}
-
 .aksel-modal {
   --__axc-modal-bg: var(--ax-bg-raised);
 

package/dist/component/modal.css

@@ -1,7 +1,7 @@
+/* TODO: Remove in v8 */
 .navds-modal__document-body {
   overflow: hidden;
 }
-
 .navds-modal {
   --__ac-modal-bg: var(--ac-modal-bg, var(--a-surface-default));
 
@@ -20,13 +20,11 @@
   inset: 0;
   z-index: 9999;
 }
-
 .navds-modal[open] {
   display: flex;
   flex-direction: column;
   animation: akselModalFadeIn 0.7s cubic-bezier(0.15, 1, 0.3, 1);
 }
-
 .navds-modal--polyfilled {
   top: 50%;
   bottom: unset; /* Overrides inset: 0 from .navds-modal */
@@ -39,15 +37,12 @@
   height: fit-content;
   margin: auto;
 }
-
 .navds-modal--polyfilled .navds-modal--polyfilled {
   overflow: auto;
 }
-
 .navds-modal--polyfilled:not([open]) {
   display: none; /* from polyfill */
 }
-
 ._dialog_overlay {
   /* From polyfill */
   position: fixed;
@@ -57,15 +52,12 @@
   /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
   left: 0;
 }
-
 .navds-modal--small {
   width: var(--ac-modal-width-small, 450px);
 }
-
 .navds-modal--medium {
   width: var(--ac-modal-width-medium, 700px);
 }
-
 @media (min-width: 480px) {
   .navds-modal {
     max-width: calc(100% - 2em);
@@ -75,7 +67,6 @@
     max-width: min(700px, calc(100% - 2em));
   }
 }
-
 @media (min-height: 480px) {
   .navds-modal {
     max-height: calc(100% - 2em);
@@ -86,7 +77,6 @@
     max-height: calc(100% - 4em);
   }
 }
-
 .navds-modal::backdrop {
   /*
    * Cannot use --a-surface-backdrop because ::backdrop does not inherit from anything but itself.
@@ -96,7 +86,6 @@
   background: var(--ac-modal-backdrop, rgb(2 20 49 / 0.49));
   animation: akselModalBackdropFadeIn 0.7s 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));
 
@@ -108,38 +97,31 @@
   /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
   left: 0;
 }
-
 .navds-modal__button {
   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--small .navds-modal__header {
   padding: var(--a-spacing-4) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-4);
 }
-
 .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;
   position: relative; /* Needed to make sr-only elements position correctly - see Storybook */
 }
-
 .navds-modal:not(.navds-modal--polyfilled) .navds-modal__body {
   background:
     linear-gradient(var(--__ac-modal-bg) 30%, transparent) top,
@@ -154,39 +136,31 @@
   background-attachment: local, local, scroll, scroll;
   background-repeat: no-repeat;
 }
-
 .navds-modal--small .navds-modal__body {
   padding: var(--a-spacing-2) var(--a-spacing-4) var(--a-spacing-4);
 }
-
 .navds-modal__header + .navds-modal__body {
   padding-top: var(--a-spacing-0);
 }
-
 .navds-modal__footer {
   display: flex;
   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--small .navds-modal__footer {
   padding: var(--a-spacing-4);
 }
-
 .navds-modal__footer :nth-of-type(2) {
   margin-left: auto;
 }
-
 /* When Datepicker is used nested inside a Modal */
-
 .navds-modal--polyfilled .navds-modal--polyfilled.navds-date__nested-modal {
   min-width: fit-content;
   max-width: 100vw;
   max-height: 100vh;
   animation: none;
 }
-
 @keyframes akselModalFadeIn {
   0% {
     opacity: 0.0001; /* Safari will not set focus inside the modal when it opens if we set this to 0 */
@@ -201,7 +175,6 @@
     transform: none;
   }
 }
-
 @keyframes akselModalBackdropFadeIn {
   0% {
     opacity: 0.0001;
@@ -215,7 +188,6 @@
     opacity: 1;
   }
 }
-
 @media (forced-colors: active) {
   .navds-modal {
     outline: 2px solid transparent;

package/dist/components.css

@@ -5235,6 +5235,8 @@ button.navds-internalheader__title:active,
   }
 }
 
+/* TODO: Remove in v8 */
+
 .navds-modal__document-body {
   overflow: hidden;
 }

package/dist/darkside/component/modal.css

@@ -1,8 +1,4 @@
 @layer aksel.components {
-  .aksel-modal__document-body {
-    overflow: hidden;
-  }
-
   .aksel-modal {
     --__axc-modal-bg: var(--ax-bg-raised);
     background-color: var(--__axc-modal-bg);

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

@@ -1 +1 @@
-@layer aksel.components{.aksel-modal__document-body{overflow:hidden}.aksel-modal{--__axc-modal-bg: var(--ax-bg-raised);background-color:var(--__axc-modal-bg);border:1px solid var(--ax-border-neutral-subtleA);border-radius:var(--ax-radius-12);box-shadow:var(--ax-shadow-dialog);max-width:100%;max-height:100%;color:var(--ax-text-neutral);margin:auto;padding:0;position:fixed}.aksel-modal[open]{flex-direction:column;animation:.7s cubic-bezier(.15,1,.3,1) akselModalFadeIn;display:flex}.aksel-modal--polyfilled{width:fit-content;height:fit-content;margin:auto;top:50%;left:0;right:0;transform:translateY(-50%)}.aksel-modal--polyfilled:not([open]){display:none}.aksel-modal--polyfilled .aksel-modal--polyfilled{overflow:auto}._dialog_overlay{position:fixed;inset:0}.aksel-modal--medium{width:700px}.aksel-modal--small{width:450px}.aksel-modal--small .aksel-modal__header,.aksel-modal--small .aksel-modal__body{padding:var(--ax-space-12) var(--ax-space-16)}.aksel-modal--small .aksel-modal__footer{padding-block:var(--ax-space-12) var(--ax-space-16);padding-inline:var(--ax-space-16)}@media(min-width:480px){.aksel-modal{max-width:calc(100% - 2em)}.aksel-modal--autowidth{max-width:min(700px,100% - 2em)}}@media(min-height:480px){.aksel-modal{max-height:calc(100% - 2em)}.aksel-modal--top{max-height:calc(100% - 4em);margin-top:2em}}.aksel-modal::backdrop{background:#021431cc;animation:.7s cubic-bezier(.15,1,.3,1) akselModalBackdropFadeIn}.aksel-modal--polyfilled+.backdrop{background:#021431cc;position:fixed;inset:0}.aksel-modal__button{margin-left:var(--ax-space-16);float:right}.aksel-modal__header{padding:var(--ax-space-16) var(--ax-space-20)}.aksel-modal__header-icon svg{vertical-align:-.25rem;margin-right:var(--ax-space-4);display:inline}.aksel-modal__label{font-weight:var(--ax-font-weight-bold);color:var(--ax-text-neutral-subtle)}.aksel-modal__body{padding:var(--ax-space-16) var(--ax-space-20);overscroll-behavior:contain;background:linear-gradient(var(--__axc-modal-bg) 30%,transparent) top,linear-gradient(transparent,var(--__axc-modal-bg) 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;position:relative;overflow:auto}.aksel-modal__header+.aksel-modal__body{padding-top:var(--ax-space-0)}.aksel-modal__footer{gap:var(--ax-space-16);padding-block:var(--ax-space-16) var(--ax-space-20);padding-inline:var(--ax-space-20);flex-flow:row-reverse wrap;display:flex}.aksel-modal__footer :nth-of-type(2){margin-left:auto}.aksel-modal--polyfilled .aksel-modal--polyfilled.aksel-date__nested-modal{min-width:fit-content;max-width:100vw;max-height:100vh;animation:none}@keyframes akselModalFadeIn{0%{opacity:.0001;transform:translate3d(0,4px,0)}50%{opacity:1}to{transform:none}}@keyframes akselModalBackdropFadeIn{0%{opacity:.0001}50%{opacity:1}to{opacity:1}}@media(forced-colors:active){.aksel-modal{outline:2px solid rgba(0,0,0,0)}}}
+@layer aksel.components{.aksel-modal{--__axc-modal-bg: var(--ax-bg-raised);background-color:var(--__axc-modal-bg);border:1px solid var(--ax-border-neutral-subtleA);border-radius:var(--ax-radius-12);box-shadow:var(--ax-shadow-dialog);max-width:100%;max-height:100%;color:var(--ax-text-neutral);margin:auto;padding:0;position:fixed}.aksel-modal[open]{flex-direction:column;animation:.7s cubic-bezier(.15,1,.3,1) akselModalFadeIn;display:flex}.aksel-modal--polyfilled{width:fit-content;height:fit-content;margin:auto;top:50%;left:0;right:0;transform:translateY(-50%)}.aksel-modal--polyfilled:not([open]){display:none}.aksel-modal--polyfilled .aksel-modal--polyfilled{overflow:auto}._dialog_overlay{position:fixed;inset:0}.aksel-modal--medium{width:700px}.aksel-modal--small{width:450px}.aksel-modal--small .aksel-modal__header,.aksel-modal--small .aksel-modal__body{padding:var(--ax-space-12) var(--ax-space-16)}.aksel-modal--small .aksel-modal__footer{padding-block:var(--ax-space-12) var(--ax-space-16);padding-inline:var(--ax-space-16)}@media(min-width:480px){.aksel-modal{max-width:calc(100% - 2em)}.aksel-modal--autowidth{max-width:min(700px,100% - 2em)}}@media(min-height:480px){.aksel-modal{max-height:calc(100% - 2em)}.aksel-modal--top{max-height:calc(100% - 4em);margin-top:2em}}.aksel-modal::backdrop{background:#021431cc;animation:.7s cubic-bezier(.15,1,.3,1) akselModalBackdropFadeIn}.aksel-modal--polyfilled+.backdrop{background:#021431cc;position:fixed;inset:0}.aksel-modal__button{margin-left:var(--ax-space-16);float:right}.aksel-modal__header{padding:var(--ax-space-16) var(--ax-space-20)}.aksel-modal__header-icon svg{vertical-align:-.25rem;margin-right:var(--ax-space-4);display:inline}.aksel-modal__label{font-weight:var(--ax-font-weight-bold);color:var(--ax-text-neutral-subtle)}.aksel-modal__body{padding:var(--ax-space-16) var(--ax-space-20);overscroll-behavior:contain;background:linear-gradient(var(--__axc-modal-bg) 30%,transparent) top,linear-gradient(transparent,var(--__axc-modal-bg) 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;position:relative;overflow:auto}.aksel-modal__header+.aksel-modal__body{padding-top:var(--ax-space-0)}.aksel-modal__footer{gap:var(--ax-space-16);padding-block:var(--ax-space-16) var(--ax-space-20);padding-inline:var(--ax-space-20);flex-flow:row-reverse wrap;display:flex}.aksel-modal__footer :nth-of-type(2){margin-left:auto}.aksel-modal--polyfilled .aksel-modal--polyfilled.aksel-date__nested-modal{min-width:fit-content;max-width:100vw;max-height:100vh;animation:none}@keyframes akselModalFadeIn{0%{opacity:.0001;transform:translate3d(0,4px,0)}50%{opacity:1}to{transform:none}}@keyframes akselModalBackdropFadeIn{0%{opacity:.0001}50%{opacity:1}to{opacity:1}}@media(forced-colors:active){.aksel-modal{outline:2px solid rgba(0,0,0,0)}}}

package/dist/darkside/components.css

@@ -4159,10 +4159,6 @@
     }
   }
 
-  .aksel-modal__document-body {
-    overflow: hidden;
-  }
-
   .aksel-modal {
     --__axc-modal-bg: var(--ax-bg-raised);
     background-color: var(--__axc-modal-bg);