@navikt/ds-css 7.23.1 → 7.23.2

package/dist/darkside/version/{7.23.1 → 7.23.2}/index.css

@@ -646,7 +646,7 @@
   }
 
   :root, :host {
-    --ax-version: "7.23.1";
+    --ax-version: "7.23.2";
     --ax-space-0: 0rem;
     --ax-space-1: .0625rem;
     --ax-space-2: .125rem;
@@ -1861,7 +1861,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);
@@ -1998,7 +1998,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);
@@ -2063,6 +2063,10 @@
     margin-top: -.375rem;
   }
 
+  .aksel-form-field__description:empty {
+    display: none;
+  }
+
   .aksel-form-field--disabled {
     opacity: var(--ax-opacity-disabled);
     cursor: not-allowed;
@@ -2095,7 +2099,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;
@@ -2112,7 +2116,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 {
@@ -3519,7 +3523,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;
@@ -3527,7 +3531,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;
     }
   }
@@ -3634,7 +3638,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;
   }
@@ -3804,7 +3808,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);
@@ -3837,7 +3841,7 @@
   }
 
   .aksel-alert--small {
-    padding: var(--ax-space-16);
+    padding: var(--ax-space-12) var(--ax-space-16);
     gap: var(--ax-space-8);
   }
 
@@ -3943,7 +3947,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);
@@ -3953,7 +3957,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 {
@@ -4520,7 +4524,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);
@@ -4539,7 +4543,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 {
@@ -4751,7 +4755,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%;
@@ -4764,7 +4768,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 {
@@ -5202,16 +5206,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) {
@@ -5252,7 +5253,7 @@
   }
 
   .aksel-modal__header {
-    padding: var(--ax-space-20);
+    padding: var(--ax-space-16) var(--ax-space-20);
   }
 
   .aksel-modal__header-icon svg {
@@ -5283,7 +5284,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;
   }
@@ -5381,12 +5383,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);
     }
   }
 
@@ -5421,12 +5423,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);