@navikt/ds-css 7.12.2 → 7.13.0

package/dist/darkside/component/panel.css

@@ -1,12 +1,12 @@
 @layer aksel.components {
   .navds-panel {
-    background-color: var(--ac-panel-bg, var(--a-surface-default));
-    padding: var(--a-spacing-4);
-    border-radius: var(--a-border-radius-small);
+    background-color: var(--ax-bg-default);
+    padding: var(--ax-space-16);
+    border-radius: var(--ax-border-radius-small);
     border: 1px solid rgba(0, 0, 0, 0);
   }
 
   .navds-panel--border {
-    border-color: var(--ac-panel-border, var(--a-border-default));
+    border-color: var(--ax-border-neutral);
   }
 }

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

@@ -1 +1 @@
-@layer aksel.components{.navds-panel{background-color:var(--ac-panel-bg,var(--a-surface-default));padding:var(--a-spacing-4);border-radius:var(--a-border-radius-small);border:1px solid transparent}.navds-panel--border{border-color:var(--ac-panel-border,var(--a-border-default))}}
+@layer aksel.components{.navds-panel{background-color:var(--ax-bg-default);padding:var(--ax-space-16);border-radius:var(--ax-border-radius-small);border:1px solid transparent}.navds-panel--border{border-color:var(--ax-border-neutral)}}

package/dist/darkside/components.css

@@ -1037,11 +1037,11 @@
   }
 
   .navds-confirmation-panel__inner {
-    gap: var(--a-spacing-3);
-    padding: var(--a-spacing-4);
-    border-radius: var(--a-border-radius-medium);
-    border: 1px solid var(--ac-confirmation-panel-border, var(--a-border-warning));
-    background-color: var(--ac-confirmation-panel-bg, var(--a-surface-warning-subtle));
+    gap: var(--ax-space-12);
+    padding: var(--ax-space-16);
+    border-radius: var(--ax-border-radius-large);
+    border: 1px solid var(--ax-border-default);
+    background-color: var(--ax-bg-moderate);
     flex-direction: column;
     justify-self: stretch;
     transition: background-color .1s linear;
@@ -1053,20 +1053,6 @@
     max-width: 80ch;
   }
 
-  .navds-confirmation-panel--checked .navds-confirmation-panel__inner {
-    border-color: var(--ac-confirmation-panel-checked-border, var(--a-border-success));
-    background-color: var(--ac-confirmation-panel-checked-bg, var(--a-surface-success-subtle));
-  }
-
-  .navds-confirmation-panel--error .navds-confirmation-panel__inner {
-    border-color: var(--ac-confirmation-panel-error-border, var(--a-border-danger));
-    background-color: var(--ac-confirmation-panel-error-bg, var(--a-surface-danger-subtle));
-  }
-
-  .navds-confirmation-panel--error .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label {
-    color: var(--a-text-default);
-  }
-
   @media (forced-colors: active) {
     .navds-confirmation-panel__inner:before {
       content: "";
@@ -1074,8 +1060,8 @@
       border-color: orange;
       border-left-style: solid;
       border-left-width: 8px;
-      border-start-start-radius: calc(var(--a-border-radius-medium)  - 1px);
-      border-end-start-radius: calc(var(--a-border-radius-medium)  - 1px);
+      border-start-start-radius: calc(var(--ax-border-radius-large)  - 1px);
+      border-end-start-radius: calc(var(--ax-border-radius-large)  - 1px);
       height: 100%;
       position: absolute;
       top: 0;
@@ -3218,21 +3204,21 @@
   }
 
   .navds-dropdown__menu {
-    padding: var(--a-spacing-2) 0;
-    color: var(--ac-dropdown-text, var(--a-text-default));
+    padding: var(--ax-space-8);
+    color: var(--ax-text-neutral);
     width: 27ch;
     max-height: 616px;
     overflow: hidden auto;
   }
 
   .navds-dropdown__divider {
-    margin: var(--a-spacing-3) 0;
+    margin: var(--ax-space-12) 0;
     border: none;
-    border-bottom: 1px solid var(--a-border-divider);
+    border-bottom: 1px solid var(--ax-border-neutral-subtle);
   }
 
   .navds-dropdown__menu > :not(.navds-dropdown__divider, .navds-dropdown__list) {
-    margin: 0 var(--a-spacing-4) var(--a-spacing-3);
+    margin: 0 var(--ax-space-16) var(--ax-space-12);
   }
 
   .navds-dropdown__list {
@@ -3246,18 +3232,20 @@
   }
 
   .navds-dropdown__list-heading {
-    margin: var(--a-spacing-1) var(--a-spacing-4) var(--a-spacing-3);
+    margin-block: var(--ax-space-4) var(--ax-space-12);
+    margin-inline: var(--ax-space-4);
   }
 
   .navds-dropdown__item {
-    color: var(--ac-dropdown-item-text, var(--a-text-action));
     font: inherit;
     text-align: left;
     cursor: pointer;
     align-items: center;
-    gap: var(--a-spacing-2);
+    gap: var(--ax-space-8);
     width: 100%;
-    padding: var(--a-spacing-1) var(--a-spacing-4);
+    padding: var(--ax-space-4);
+    border-radius: var(--ax-border-radius-medium);
+    color: var(--ax-text-neutral);
     background: none;
     border: none;
     margin: 0;
@@ -3267,31 +3255,19 @@
   }
 
   .navds-dropdown__item:hover {
-    background-color: var(--ac-dropdown-item-hover-bg, var(--a-surface-action-subtle-hover));
-    color: var(--ac-dropdown-item-hover-text, var(--a-text-action-hover));
+    background-color: var(--ax-bg-accent-moderate-hoverA);
   }
 
   .navds-dropdown__item:active {
-    background-color: var(--ac-dropdown-item-active-bg, var(--a-surface-action-active));
-    color: var(--ac-dropdown-item-active-text, var(--a-text-on-action));
+    background-color: var(--ax-bg-accent-moderate-pressedA);
   }
 
   .navds-dropdown__item:focus-visible {
-    outline-offset: -2px;
-    box-shadow: inset 0 0 0 2px var(--a-border-focus);
-    outline: 2px solid rgba(0, 0, 0, 0);
-  }
-
-  @supports not selector(:focus-visible) {
-    .navds-dropdown__item:focus {
-      outline-offset: -2px;
-      box-shadow: inset 0 0 0 2px var(--a-border-focus);
-      outline: 2px solid rgba(0, 0, 0, 0);
-    }
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: -3px;
   }
 
   .navds-dropdown__item:disabled {
-    color: var(--ac-dropdown-item-text, var(--a-text-action));
     opacity: var(--ax-opacity-disabled);
     cursor: not-allowed;
     background: none;
@@ -3974,6 +3950,43 @@
     color: var(--ax-text-neutral-subtle);
   }
 
+  .navds-link-panel {
+    color: var(--ax-text-neutral);
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--ax-space-16);
+    text-decoration: none;
+    display: flex;
+  }
+
+  .navds-link-panel:hover {
+    border-color: var(--ax-border-accent);
+  }
+
+  .navds-link-panel:hover .navds-link-panel__title {
+    color: var(--ax-text-accent-subtle);
+    text-decoration: underline;
+  }
+
+  .navds-link-panel:focus-visible {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+  }
+
+  .navds-link-panel__chevron {
+    flex-shrink: 0;
+    font-size: 1.5rem;
+    transition: transform .2s;
+  }
+
+  .navds-link-panel:hover > .navds-link-panel__chevron, .navds-link-panel:focus-within > .navds-link-panel__chevron {
+    transform: translateX(4px);
+  }
+
+  .navds-link-panel__description {
+    margin-top: var(--a-space-4);
+  }
+
   .navds-loader {
     stroke-width: 6px;
     --__axc-loader-stroke-width: 5.9;
@@ -5024,14 +5037,14 @@
   }
 
   .navds-panel {
-    background-color: var(--ac-panel-bg, var(--a-surface-default));
-    padding: var(--a-spacing-4);
-    border-radius: var(--a-border-radius-small);
+    background-color: var(--ax-bg-default);
+    padding: var(--ax-space-16);
+    border-radius: var(--ax-border-radius-small);
     border: 1px solid rgba(0, 0, 0, 0);
   }
 
   .navds-panel--border {
-    border-color: var(--ac-panel-border, var(--a-border-default));
+    border-color: var(--ax-border-neutral);
   }
 
   .navds-read-more {