@navikt/ds-css 7.23.2 → 7.24.0

package/dist/darkside/version/{7.23.2 → 7.24.0}/components.css

@@ -1279,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;
   }
@@ -1392,6 +1393,7 @@
   }
 
   .aksel-switch--small > .aksel-switch__input {
+    width: 2.5rem;
     height: 2rem;
     top: 0;
   }
@@ -1403,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 {
@@ -1457,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 {
@@ -1504,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);
@@ -1514,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) {
@@ -1533,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 {
@@ -1586,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) {
@@ -1627,6 +1643,7 @@
     width: 100%;
     min-height: 3rem;
     color: var(--ax-text-neutral);
+    scroll-margin-block-start: 4rem;
   }
 
   .aksel-text-field__input:hover {
@@ -1702,6 +1719,7 @@
     resize: none;
     width: 100%;
     color: var(--ax-text-neutral);
+    scroll-margin-block-start: 4rem;
     display: block;
   }
 
@@ -3877,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;
@@ -5315,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;
   }