@navikt/ds-css 7.23.1 → 7.24.0

package/dist/darkside/version/{7.23.1 → 7.24.0}/component/popover.min.css

@@ -1 +1 @@
-@layer aksel.components{.aksel-popover{z-index:1000;background:var(--ax-bg-raised);box-shadow:var(--ax-shadow-dialog);border:1px solid var(--ax-border-neutral-subtleA);border-radius:var(--ax-radius-12);max-width:calc(100vw - var(--ax-space-24))}.aksel-popover__content{padding:var(--ax-space-16)}@media (min-width: 480px){.aksel-popover__content{padding:var(--ax-space-20)}}.aksel-popover--hidden{display:none}}
+@layer aksel.components{.aksel-popover{z-index:1000;background:var(--ax-bg-raised);box-shadow:var(--ax-shadow-dialog);border:1px solid var(--ax-border-neutral-subtleA);border-radius:var(--ax-radius-12);max-width:calc(100vw - var(--ax-space-24))}.aksel-popover__content{padding:var(--ax-space-12) var(--ax-space-16)}@media (min-width: 480px){.aksel-popover__content{padding:var(--ax-space-16) var(--ax-space-20)}}.aksel-popover--hidden{display:none}}

package/dist/darkside/version/{7.23.1 → 7.24.0}/component/table.css

@@ -5,10 +5,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;
   }

package/dist/darkside/version/7.24.0/component/table.min.css

@@ -0,0 +1 @@
+@layer aksel.components{.aksel-table{border-collapse:collapse;width:100%;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}.aksel-table__body .aksel-table__row--shade-on-hover:hover{background-color:var(--ax-bg-neutral-moderate-hoverA);transition:background-color 70ms cubic-bezier(.2,0,0,1)}.aksel-table__body .aksel-table__row--shade-on-hover.aksel-table__row--selected:hover{background-color:var(--ax-bg-moderate-hoverA)}.aksel-table__row{display:table-row}.aksel-table__row--selected{background-color:var(--ax-bg-softA)}.aksel-table__row--selected+.aksel-table__expanded-row{background-color:var(--ax-bg-softA)}.aksel-table--zebra-stripes .aksel-table__body :where(.aksel-table__row:nth-child(odd):not(.aksel-table__row--selected)){background-color:var(--ax-bg-neutral-softA)}.aksel-table--zebra-stripes .aksel-table__body :where(.aksel-table__expandable-row:nth-child(4n+1):not(.aksel-table__row--selected)){background-color:#0000}.aksel-table--zebra-stripes .aksel-table__body .aksel-table__expanded-row:nth-child(4n){background-color:var(--ax-bg-neutral-softA)}.aksel-table--zebra-stripes .aksel-table__row--selected+.aksel-table__expanded-row:nth-child(4n){background-color:var(--ax-bg-softA)}.aksel-table__header-cell,.aksel-table__data-cell{padding:var(--ax-space-12) var(--ax-space-8);border-bottom:1px solid var(--ax-border-neutral-subtleA);text-align:left;display:table-cell}.aksel-table__header .aksel-table__header-cell,.aksel-table__header .aksel-table__data-cell{border-bottom-width:2px}.aksel-table__header-cell--align-right,.aksel-table__data-cell--align-right{text-align:right}.aksel-table__header-cell--align-center,.aksel-table__data-cell--align-center{text-align:center}:where(.aksel-table__expandable-row--open:hover) .aksel-table__data-cell{border-bottom-color:#0000}.aksel-table--large .aksel-table__header-cell,.aksel-table--large .aksel-table__data-cell{padding:var(--ax-space-16) var(--ax-space-8)}.aksel-table--small .aksel-table__header-cell,.aksel-table--small .aksel-table__data-cell{padding:var(--ax-space-4) var(--ax-space-8)}.aksel-table :not(.aksel-checkboxes)>.aksel-checkbox .aksel-checkbox__input{top:-.75rem}.aksel-table :not(.aksel-checkboxes)>.aksel-checkbox--small .aksel-checkbox__input{top:-.375rem}.aksel-table :not(.aksel-checkboxes)>.aksel-checkbox .aksel-checkbox__label{padding:0}.aksel-table .aksel-checkbox__input:focus+.aksel-checkbox__label:after,.aksel-table .aksel-radio__input:focus+.aksel-radio__label:after{height:100%}.aksel-table__header-cell[aria-sort]{padding:0}.aksel-table__sort-button{appearance:none;color:var(--ax-text-subtle);cursor:pointer;padding:var(--ax-space-16) var(--ax-space-12);gap:var(--ax-space-4);width:100%;line-height:inherit;font-weight:inherit;background:none;border:none;align-items:center;margin:0;display:flex}.aksel-table--small .aksel-table__sort-button{padding:var(--ax-space-8) var(--ax-space-12)}.aksel-table__sort-button:hover{background-color:var(--ax-bg-neutral-moderate-hoverA)}.aksel-table__sort-button:focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:-5px}.aksel-table__header-cell[aria-sort=ascending] .aksel-table__sort-button,.aksel-table__header-cell[aria-sort=descending] .aksel-table__sort-button{background-color:var(--ax-bg-moderate-pressedA);color:var(--ax-text-default)}.aksel-table__header-cell--align-right .aksel-table__sort-button{justify-content:flex-end}.aksel-table__header-cell--align-center .aksel-table__sort-button{justify-content:center}.aksel-table__sort-button svg{flex-shrink:0;font-size:1.5rem}.aksel-table__expandable-row:not(.aksel-table__expandable-row--open) :where(.aksel-table__data-cell,.aksel-table__header-cell){transition:border-bottom-color .15s cubic-bezier(.95,.05,.8,.04)}.aksel-table__expandable-row.aksel-table__expandable-row--clickable:not(.aksel-table__expandable-row--expansion-disabled):hover{cursor:pointer}.aksel-table__expandable-row--open :where(.aksel-table__data-cell,.aksel-table__header-cell){border-bottom-color:#0000}.aksel-table__expandable-row--open .aksel-table__toggle-expand-cell--open{border-color:#0000}.aksel-table__toggle-expand-cell{width:3rem;padding:0}.aksel-table--large .aksel-table__toggle-expand-cell{padding:0 var(--ax-space-8)}.aksel-table--small .aksel-table__toggle-expand-cell{padding:var(--ax-space-4) var(--ax-space-8)}.aksel-table__toggle-expand-button{cursor:pointer;border-radius:var(--ax-radius-4);background:none;border:none;place-content:center;width:2rem;height:2rem;margin:0 auto;font-size:1.5rem;transition:background-color 70ms cubic-bezier(.2,0,0,1);display:grid}.aksel-table__expandable-icon{transition:transform .25s cubic-bezier(.2,0,0,1)}.aksel-table__expandable-row:not(.aksel-table__expandable-row--expansion-disabled) .aksel-table__toggle-expand-cell:hover{cursor:pointer}.aksel-table__toggle-expand-button:hover,.aksel-table__toggle-expand-cell:hover>.aksel-table__toggle-expand-button,.aksel-table__expandable-row--clickable:hover .aksel-table__toggle-expand-button{background-color:var(--ax-bg-neutral-moderate-hoverA)}.aksel-table__row--selected :is(:scope .aksel-table__toggle-expand-button:hover,:scope .aksel-table__toggle-expand-cell:hover>.aksel-table__toggle-expand-button,:scope .aksel-table__expandable-row--clickable:hover .aksel-table__toggle-expand-button){background-color:var(--ax-bg-moderate-hoverA)}.aksel-table__toggle-expand-cell--open>:where(.aksel-table__toggle-expand-button) :where(.aksel-table__expandable-icon){transform:rotateX(180deg)}.aksel-table__toggle-expand-button:focus-visible{outline:3px solid var(--ax-border-focus)}.aksel-table__expanded-row-cell{padding:0}.aksel-table__expanded-row-cell:empty{display:none}.aksel-table__expanded-row-collapse:not([style*="height: 0px;"]),.aksel-table__expanded-row-collapse[style*="transition:"]{border-bottom:1px solid var(--ax-border-neutral-subtleA)}.aksel-table__expanded-row-content{--__ac-table-expanded-row-pi: calc(var(--ax-space-8) + 3rem);padding-block:var(--ax-space-16)}.aksel-table--small .aksel-table__expanded-row-content{padding-block:var(--ax-space-8)}.aksel-table__expanded-row-content--gutter-both{padding-inline:var(--__ac-table-expanded-row-pi)}.aksel-table__expanded-row-content--gutter-left{padding-inline:var(--__ac-table-expanded-row-pi) var(--ax-space-8)}.aksel-table__expanded-row-content--gutter-right{padding-inline:var(--ax-space-8) var(--__ac-table-expanded-row-pi)}.aksel-table__expanded-row-content--gutter-none{padding-inline:var(--ax-space-8)}}

package/dist/darkside/version/{7.23.1 → 7.24.0}/component/tag.css

@@ -26,12 +26,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);

package/dist/darkside/version/7.24.0/component/tag.min.css

@@ -0,0 +1 @@
+@layer aksel.components{.aksel-tag{--__axc-tag-icon-size: 1.5rem;--__axc-tag-icon-margin: -2px;--__axc-tag-border: ;--__axc-tag-bg: ;--__axc-tag-text: ;--__axc-tag-text-strong: ;border-radius:var(--ax-radius-4);padding:var(--ax-space-2) var(--ax-space-8);justify-content:center;align-items:center;min-height:2rem;line-height:1;text-decoration:none;display:inline-flex}.aksel-tag:has(.aksel-tag__icon--left){gap:var(--ax-space-2)}.aksel-tag[data-variant=outline]{box-shadow:inset 0 0 0 1px var(--ax-border-default);background:var(--ax-bg-moderate);color:var(--ax-text-default)}.aksel-tag[data-variant=moderate]{background:var(--ax-bg-moderateA);color:var(--ax-text-default)}@media (forced-colors: active){.aksel-tag[data-variant=moderate]{box-shadow:inset 0 0 0 1px var(--ax-bg-strong);color:canvastext}}.aksel-tag[data-variant=strong]{background:var(--ax-bg-strong);color:var(--ax-text-contrast)}@media (forced-colors: active){.aksel-tag[data-variant=strong]{color:canvas}}@media (forced-colors: active){.aksel-tag{forced-color-adjust:none;color:canvastext}}.aksel-tag--small{min-height:1.5rem;padding:0 var(--ax-space-6);--__axc-tag-icon-size: 1.25rem}.aksel-tag--xsmall{min-height:1.25rem;padding:0 var(--ax-space-4);--__axc-tag-icon-size: 1rem;--__axc-tag-icon-margin: -1px}.aksel-tag__icon--left{font-size:var(--__axc-tag-icon-size);margin-inline-start:var(--__axc-tag-icon-margin);display:flex}}

package/dist/darkside/version/{7.23.1 → 7.24.0}/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;
   }