@navikt/ds-css 7.23.1 → 7.24.0

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 {
@@ -1275,6 +1279,7 @@
     min-height: 3rem;
     padding: var(--ax-space-8);
     padding-right: var(--ax-space-40);
+    scroll-margin-block-start: 4rem;
     display: inline-block;
     position: relative;
   }
@@ -1388,6 +1393,7 @@
   }
 
   .aksel-switch--small > .aksel-switch__input {
+    width: 2.5rem;
     height: 2rem;
     top: 0;
   }
@@ -1399,19 +1405,21 @@
 
   .aksel-switch__content {
     --__axc-switch-block-padding: .75rem;
+    --__axc-switch-inline-padding: 3.25rem;
     gap: var(--ax-space-2);
-    padding: var(--__axc-switch-block-padding) 0 var(--__axc-switch-block-padding) 3.25rem;
+    padding: var(--__axc-switch-block-padding) 0 var(--__axc-switch-block-padding) var(--__axc-switch-inline-padding);
     flex-direction: column;
     display: flex;
     position: relative;
   }
 
   .aksel-switch--right .aksel-switch__content {
-    padding: var(--__axc-switch-block-padding) 3.25rem var(--__axc-switch-block-padding) 0;
+    padding: var(--__axc-switch-block-padding) var(--__axc-switch-inline-padding) var(--__axc-switch-block-padding) 0;
   }
 
   .aksel-switch--small .aksel-switch__content {
     --__axc-switch-block-padding: .375rem;
+    --__axc-switch-inline-padding: 2.75rem;
   }
 
   .aksel-switch__content.aksel-switch--with-description {
@@ -1453,7 +1461,9 @@
   }
 
   .aksel-switch--small > .aksel-switch__track {
-    top: var(--ax-space-4);
+    top: var(--ax-space-6);
+    width: 2.25rem;
+    height: 1.25rem;
   }
 
   .aksel-switch__input:checked ~ .aksel-switch__track {
@@ -1500,6 +1510,11 @@
     transform: translateX(0);
   }
 
+  .aksel-switch--small .aksel-switch__thumb {
+    width: .875rem;
+    height: .875rem;
+  }
+
   .aksel-switch__input:checked ~ .aksel-switch__track > .aksel-switch__thumb {
     background-color: var(--ax-bg-raised);
     color: var(--ax-text-subtle);
@@ -1510,15 +1525,12 @@
     transform: translateX(1.25rem);
   }
 
-  .aksel-switch__input:checked ~ .aksel-switch__track > .aksel-switch__thumb > .aksel-switch__checkmark {
-    visibility: visible;
-    opacity: 1;
-  }
-
-  .aksel-switch__checkmark {
-    visibility: hidden;
-    opacity: 0;
-    transition: opacity .15s cubic-bezier(.4, 0, .2, 1);
+  .aksel-switch--small > .aksel-switch__input:checked ~ .aksel-switch__track > .aksel-switch__thumb {
+    width: 1rem;
+    height: 1rem;
+    top: 0;
+    left: 0;
+    transform: translateX(1rem);
   }
 
   @media (hover: hover) and (pointer: fine) {
@@ -1529,6 +1541,10 @@
     .aksel-switch__input:checked:hover:not(:disabled) ~ .aksel-switch__track > .aksel-switch__thumb {
       transform: translateX(1.1rem);
     }
+
+    .aksel-switch--small > .aksel-switch__input:checked:hover:not(:disabled) ~ .aksel-switch__track > .aksel-switch__thumb {
+      transform: translateX(.875rem);
+    }
   }
 
   .aksel-switch--right {
@@ -1582,6 +1598,10 @@
     .aksel-switch--readonly > .aksel-switch__input:checked:hover ~ .aksel-switch__track > .aksel-switch__thumb {
       transform: translateX(1.25rem);
     }
+
+    .aksel-switch--readonly.aksel-switch--small > .aksel-switch__input:checked:hover ~ .aksel-switch__track > .aksel-switch__thumb {
+      transform: translateX(1rem);
+    }
   }
 
   @media (forced-colors: active) {
@@ -1623,6 +1643,7 @@
     width: 100%;
     min-height: 3rem;
     color: var(--ax-text-neutral);
+    scroll-margin-block-start: 4rem;
   }
 
   .aksel-text-field__input:hover {
@@ -1698,6 +1719,7 @@
     resize: none;
     width: 100%;
     color: var(--ax-text-neutral);
+    scroll-margin-block-start: 4rem;
     display: block;
   }
 
@@ -2351,7 +2373,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 +2381,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 +2488,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 +2658,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 +2691,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 +2797,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 +2807,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 +3374,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 +3393,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 +3605,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 +3618,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 {
@@ -3873,6 +3895,164 @@
     margin-top: var(--a-space-4);
   }
 
+  .aksel-link-anchor__overlay {
+    cursor: pointer;
+  }
+
+  .aksel-link-anchor__overlay:focus-within {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+  }
+
+  @supports selector(:has(*)) {
+    .aksel-link-anchor__overlay:focus-within {
+      outline: unset;
+    }
+
+    .aksel-link-anchor__overlay:has(:focus-visible) {
+      outline: 3px solid var(--ax-border-focus);
+      outline-offset: 3px;
+    }
+  }
+
+  .aksel-link-anchor {
+    text-underline-offset: .1em;
+    color: inherit;
+    text-decoration: underline;
+    text-decoration-thickness: .05em;
+  }
+
+  .aksel-link-anchor:hover, .aksel-link-anchor__overlay:hover .aksel-link-anchor {
+    text-decoration-thickness: .111em;
+  }
+
+  .aksel-link-anchor:focus-visible {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+    border-radius: 1px;
+  }
+
+  .aksel-link-anchor__overlay .aksel-link-anchor:focus-visible {
+    outline: none;
+  }
+
+  .aksel-link-anchor__arrow {
+    flex-shrink: 0;
+    transition: transform .2s;
+    transform: translateX(0);
+  }
+
+  .aksel-link-anchor:hover .aksel-link-anchor__arrow, .aksel-link-anchor__overlay:hover .aksel-link-anchor__arrow {
+    transform: translateX(4px);
+  }
+
+  .aksel-link-card {
+    --__axc-link-card-padding-block: var(--ax-space-16);
+    --__axc-link-card-padding-inline: var(--ax-space-20);
+    border-radius: var(--ax-border-radius-xlarge);
+    color: var(--ax-text-neutral);
+    background-color: var(--ax-bg-raised);
+    border: 1px solid var(--ax-border-subtleA);
+    padding: var(--__axc-link-card-padding-block) var(--__axc-link-card-padding-inline);
+    cursor: pointer;
+    grid-template: "image image" min-content
+                   "icon title" min-content
+                   "icon description" min-content
+                   "icon footer"
+                   / auto 1fr;
+    align-items: center;
+    text-decoration: none;
+    transition-property: border-color, box-shadow, transform, background-color;
+    transition-duration: .3s;
+    transition-timing-function: cubic-bezier(0, 0, 0, 1);
+    display: grid;
+    position: relative;
+  }
+
+  .aksel-link-card:not(:has(.aksel-link-card__description, .aksel-link-card__footer)) {
+    grid-template-rows: auto 1fr;
+  }
+
+  .aksel-link-card:not(:has(.aksel-link-card__description, .aksel-link-card__footer)) .aksel-link-card__title {
+    align-items: center;
+  }
+
+  .aksel-link-card:not(:has(.aksel-link-card__description, .aksel-link-card__footer)) .aksel-link-card__icon {
+    align-self: center;
+  }
+
+  .aksel-link-card:hover {
+    border-color: var(--ax-border-default);
+    box-shadow: 0 0 0 1px var(--ax-border-default);
+  }
+
+  .aksel-link-card--small {
+    --__axc-link-card-padding-block: var(--ax-space-12);
+    --__axc-link-card-padding-inline: var(--ax-space-16);
+  }
+
+  .aksel-link-card__title {
+    color: var(--ax-text-subtle);
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: var(--ax-space-8);
+    -webkit-hyphens: auto;
+    hyphens: auto;
+    grid-area: title;
+    display: flex;
+  }
+
+  .aksel-link-card[data-color="neutral"] .aksel-link-card__title, .aksel-link-card__title[data-color="neutral"] {
+    color: var(--ax-text-default);
+  }
+
+  .aksel-link-card__description {
+    grid-area: description;
+    margin-block-start: var(--ax-space-4);
+  }
+
+  .aksel-link-card__footer {
+    align-self: flex-end;
+    gap: var(--ax-space-8);
+    flex-wrap: wrap;
+    grid-area: footer;
+    margin-block-start: var(--ax-space-16);
+    display: flex;
+  }
+
+  .aksel-link-card__icon {
+    width: max-content;
+    height: max-content;
+    color: var(--ax-text-default);
+    grid-area: icon;
+    place-content: center;
+    align-self: flex-start;
+    margin-inline-end: var(--ax-space-16);
+    display: grid;
+  }
+
+  .aksel-link-card--small .aksel-link-card__icon {
+    margin-inline-end: var(--ax-space-12);
+  }
+
+  .aksel-link-card__image-container {
+    margin-block: calc(var(--__axc-link-card-padding-block) * -1) var(--__axc-link-card-padding-block);
+    margin-inline: calc(var(--__axc-link-card-padding-inline) * 1 * -1);
+    border-radius: calc(var(--ax-border-radius-xlarge)  - 1px);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    grid-area: image;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .aksel-link-card__image-container :is(img, picture) {
+    object-fit: cover;
+    max-width: 100%;
+    height: 100%;
+    display: block;
+  }
+
   .aksel-loader {
     stroke-width: 6px;
     --__axc-loader-stroke-width: 5.9;
@@ -4034,16 +4214,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 +4261,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 +4292,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 +4391,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 +4431,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);
@@ -5319,10 +5491,23 @@
     display: table;
   }
 
+  .aksel-table.aksel-table--sticky-header {
+    border-collapse: separate;
+    border-spacing: 0;
+  }
+
   .aksel-table__header {
     display: table-header-group;
   }
 
+  .aksel-table--sticky-header .aksel-table__header {
+    z-index: 10;
+    background-color: var(--ax-bg-default);
+    box-sizing: border-box;
+    position: sticky;
+    top: 0;
+  }
+
   .aksel-table__body {
     display: table-row-group;
   }