@navikt/ds-css 7.23.1 → 7.23.2

package/dist/darkside/components.css

@@ -693,7 +693,7 @@
     gap: var(--ax-space-16);
     text-align: center;
     width: 100%;
-    padding: var(--ax-space-20);
+    padding: var(--ax-space-16) var(--ax-space-20);
     border: 1px dashed var(--ax-border-neutral);
     border-radius: var(--ax-radius-12);
     background-color: var(--__axc-dropzone-background);
@@ -830,7 +830,7 @@
     border: 1px solid var(--ax-border-neutral-subtleA);
     outline-offset: -1px;
     border-radius: var(--ax-radius-12);
-    padding: var(--ax-space-20);
+    padding: var(--ax-space-16) var(--ax-space-20);
     gap: var(--ax-space-12);
     align-items: flex-start;
     transition: outline-color .25s cubic-bezier(0, .3, .15, 1);
@@ -895,6 +895,10 @@
     margin-top: -.375rem;
   }
 
+  .aksel-form-field__description:empty {
+    display: none;
+  }
+
   .aksel-form-field--disabled {
     opacity: var(--ax-opacity-disabled);
     cursor: not-allowed;
@@ -927,7 +931,7 @@
 
   .aksel-error-summary {
     background-color: var(--ax-bg-default);
-    padding: var(--ax-space-20);
+    padding: var(--ax-space-16) var(--ax-space-20);
     border: 4px solid var(--ax-border-danger);
     border-radius: var(--ax-radius-12);
     outline-offset: 3px;
@@ -944,7 +948,7 @@
   }
 
   .aksel-error-summary--small {
-    padding: var(--ax-space-16);
+    padding: var(--ax-space-12) var(--ax-space-16);
   }
 
   .aksel-error-summary--small .aksel-error-summary__heading {
@@ -2351,7 +2355,7 @@
 
   .aksel-form-summary__header {
     background: var(--ax-bg-neutral-moderateA);
-    padding: var(--ax-space-20) var(--ax-space-20) var(--ax-space-16) var(--ax-space-20);
+    padding: var(--ax-space-16) var(--ax-space-20);
     justify-content: space-between;
     gap: 0 var(--ax-space-12);
     display: flex;
@@ -2359,7 +2363,7 @@
 
   @media (max-width: 479px) {
     .aksel-form-summary__header {
-      padding: var(--ax-space-16) var(--ax-space-16) var(--ax-space-12) var(--ax-space-16);
+      padding: var(--ax-space-12) var(--ax-space-16);
       flex-direction: column;
     }
   }
@@ -2466,7 +2470,7 @@
   .aksel-form-progress__collapsible[data-state="open"] {
     margin-top: var(--ax-space-4);
     visibility: visible;
-    padding-block: var(--ax-space-20);
+    padding-block: var(--ax-space-16);
     opacity: 1;
     grid-template-rows: 1fr;
   }
@@ -2636,7 +2640,7 @@
 
   .aksel-alert {
     border-radius: var(--ax-radius-12);
-    padding: var(--ax-space-20);
+    padding: var(--ax-space-16) var(--ax-space-20);
     gap: var(--ax-space-12);
     border: 1px solid;
     border-color: var(--ax-border-default);
@@ -2669,7 +2673,7 @@
   }
 
   .aksel-alert--small {
-    padding: var(--ax-space-16);
+    padding: var(--ax-space-12) var(--ax-space-16);
     gap: var(--ax-space-8);
   }
 
@@ -2775,7 +2779,7 @@
   }
 
   .aksel-chat__bubble {
-    padding: var(--ax-space-20);
+    padding: var(--ax-space-16) var(--ax-space-20);
     gap: var(--ax-space-8);
     border-radius: var(--ax-radius-12);
     border-bottom-left-radius: var(--ax-radius-2);
@@ -2785,7 +2789,7 @@
   }
 
   .aksel-chat--small .aksel-chat__bubble {
-    padding: var(--ax-space-16);
+    padding: var(--ax-space-12) var(--ax-space-16);
   }
 
   .aksel-chat__top-text {
@@ -3352,7 +3356,7 @@
 
   .aksel-expansioncard {
     --__axc-expansioncard-border-radius: calc(var(--ax-radius-12)  - 1px);
-    --__axc-expansioncard-padding-block: var(--ax-space-20);
+    --__axc-expansioncard-padding-block: var(--ax-space-16);
     --__axc-expansioncard-padding-inline: var(--ax-space-20);
     border-radius: var(--ax-radius-12);
     background-color: var(--ax-bg-softA);
@@ -3371,7 +3375,7 @@
 
   .aksel-expansioncard--small {
     --__axc-expansioncard-padding-inline: var(--ax-space-16);
-    --__axc-expansioncard-padding-block: var(--ax-space-16);
+    --__axc-expansioncard-padding-block: var(--ax-space-12);
   }
 
   .aksel-expansioncard--small > .aksel-expansioncard__header .aksel-expansioncard__title--small {
@@ -3583,7 +3587,7 @@
   }
 
   .aksel-guide-panel__content-inner {
-    padding: var(--ax-space-16);
+    padding: var(--ax-space-12) var(--ax-space-16);
     border-radius: var(--ax-radius-12);
     background-color: var(--ax-bg-raised);
     height: 100%;
@@ -3596,7 +3600,7 @@
 
   @media (min-width: 480px) {
     .aksel-guide-panel__content-inner {
-      padding: var(--ax-space-20);
+      padding: var(--ax-space-16) var(--ax-space-20);
     }
 
     .aksel-guide-panel[data-responsive="true"] .aksel-guide-panel__content-inner {
@@ -4034,16 +4038,13 @@
     width: 450px;
   }
 
-  .aksel-modal--small .aksel-modal__header {
-    padding: var(--ax-space-16);
-  }
-
-  .aksel-modal--small .aksel-modal__body {
+  .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: var(--ax-space-16);
+    padding-block: var(--ax-space-12) var(--ax-space-16);
+    padding-inline: var(--ax-space-16);
   }
 
   @media (min-width: 480px) {
@@ -4084,7 +4085,7 @@
   }
 
   .aksel-modal__header {
-    padding: var(--ax-space-20);
+    padding: var(--ax-space-16) var(--ax-space-20);
   }
 
   .aksel-modal__header-icon svg {
@@ -4115,7 +4116,8 @@
 
   .aksel-modal__footer {
     gap: var(--ax-space-16);
-    padding: var(--ax-space-20);
+    padding-block: var(--ax-space-16) var(--ax-space-20);
+    padding-inline: var(--ax-space-20);
     flex-flow: row-reverse wrap;
     display: flex;
   }
@@ -4213,12 +4215,12 @@
   }
 
   .aksel-popover__content {
-    padding: var(--ax-space-16);
+    padding: var(--ax-space-12) var(--ax-space-16);
   }
 
   @media (min-width: 480px) {
     .aksel-popover__content {
-      padding: var(--ax-space-20);
+      padding: var(--ax-space-16) var(--ax-space-20);
     }
   }
 
@@ -4253,12 +4255,6 @@
     color: var(--ax-text-default);
   }
 
-  @media (forced-colors: active) {
-    .aksel-tag[data-variant="outline"] {
-      color: canvastext;
-    }
-  }
-
   .aksel-tag[data-variant="moderate"] {
     background: var(--ax-bg-moderateA);
     color: var(--ax-text-default);