@navikt/ds-css 7.23.2 → 7.25.1

package/dist/index.css

@@ -5,7 +5,7 @@
  */
 
 :root, :host {
-  --ax-version: "7.23.2";
+  --ax-version: "7.25.1";
   --a-breakpoint-xs: 0;
   --a-breakpoint-sm: 480px;
   --a-breakpoint-sm-down: 479px;
@@ -2186,9 +2186,6 @@ body,
 }
 
 .navds-chat__bubble-wrapper {
-  list-style: none;
-  margin: 0;
-  padding: 0;
   display: flex;
   flex-direction: column;
   gap: var(--a-spacing-3);
@@ -3654,10 +3651,6 @@ li.navds-file-item {
   overflow-wrap: anywhere;
 }
 
-.navds-file-item__button {
-  margin-left: auto;
-}
-
 .navds-file-item__error {
   color: var(--a-text-danger);
   display: grid;
@@ -4218,6 +4211,7 @@ li.navds-file-item {
   position: relative;
   padding: 0.5rem;
   padding-right: 2rem;
+  scroll-margin-block-start: 4rem;
 }
 
 @media (forced-colors: active) {
@@ -4350,6 +4344,7 @@ li.navds-file-item {
 
 .navds-switch--small > .navds-switch__input {
   height: 2rem;
+  width: 2.5rem;
   top: 0;
 }
 
@@ -4372,11 +4367,11 @@ li.navds-file-item {
 }
 
 .navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
-  padding: calc(var(--a-spacing-2) - var(--a-spacing-05)) 0 calc(var(--a-spacing-2) - var(--a-spacing-05)) 3.25rem;
+  padding: calc(var(--a-spacing-2) - var(--a-spacing-05)) 0 calc(var(--a-spacing-2) - var(--a-spacing-05)) 2.75rem;
 }
 
 .navds-switch--right.navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
-  padding: calc(var(--a-spacing-2) - var(--a-spacing-05)) 3.25rem calc(var(--a-spacing-2) - var(--a-spacing-05)) 0;
+  padding: calc(var(--a-spacing-2) - var(--a-spacing-05)) 2.75rem calc(var(--a-spacing-2) - var(--a-spacing-05)) 0;
 }
 
 .navds-switch--with-description,
@@ -4410,7 +4405,9 @@ li.navds-file-item {
 }
 
 .navds-switch--small > .navds-switch__track {
-  top: var(--a-spacing-1);
+  top: var(--a-spacing-1-alt);
+  width: 2.25rem;
+  height: 1.25rem;
 }
 
 .navds-switch--right > .navds-switch__input,
@@ -4476,6 +4473,11 @@ li.navds-file-item {
   justify-content: center;
 }
 
+.navds-switch--small .navds-switch__thumb {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
 .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
   transform: translateX(1.25rem);
   color: var(--ac-switch-thumb-icon-checked, var(--a-icon-action-selected));
@@ -4486,12 +4488,12 @@ li.navds-file-item {
   top: 0;
 }
 
-.navds-switch__input:checked ~ .navds-switch__track .navds-switch__checkmark {
-  visibility: visible;
-}
-
-.navds-switch__checkmark {
-  visibility: hidden;
+.navds-switch--small > .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+  transform: translateX(1rem);
+  width: 1rem;
+  height: 1rem;
+  left: 0;
+  top: 0;
 }
 
 @media (hover: hover) and (pointer: fine) {
@@ -4502,6 +4504,10 @@ li.navds-file-item {
   .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
     transform: translateX(1.125rem);
   }
+
+  .navds-switch--small > .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
+    transform: translateX(0.875rem);
+  }
 }
 
 .navds-switch__input:disabled:hover ~ .navds-switch__track > .navds-switch__thumb {
@@ -4512,6 +4518,10 @@ li.navds-file-item {
   transform: translateX(1.25rem);
 }
 
+.navds-switch--small > .navds-switch__input:checked:disabled:hover ~ .navds-switch__track > .navds-switch__thumb {
+  transform: translateX(1rem);
+}
+
 /* Disabled */
 
 .navds-switch__input:disabled {
@@ -4625,6 +4635,7 @@ li.navds-file-item {
   min-height: 3rem;
   width: 100%;
   color: var(--ac-textfield-text, var(--__ac-textfield-text, var(--a-text-default)));
+  scroll-margin-block-start: 4rem;
 }
 
 .navds-text-field__input[size] {
@@ -4726,6 +4737,7 @@ li.navds-file-item {
   width: 100%;
   display: block;
   color: var(--ac-textarea-text, var(--__ac-textarea-text, var(--a-text-default)));
+  scroll-margin-block-start: 4rem;
 }
 
 .navds-textarea__input::placeholder {
@@ -5888,6 +5900,168 @@ button.navds-internalheader__title:active,
   color: var(--ac-link-subtle-text, var(--a-text-subtle));
 }
 
+.navds-link-anchor__overlay {
+  cursor: pointer;
+}
+
+.navds-link-anchor__overlay:focus-within {
+  outline: 3px solid var(--a-border-focus);
+  outline-offset: 3px;
+}
+
+@supports selector(:has(*)) {
+  .navds-link-anchor__overlay:focus-within {
+    outline: unset;
+  }
+
+  .navds-link-anchor__overlay:has(:focus-visible) {
+    outline: 3px solid var(--a-border-focus);
+    outline-offset: 3px;
+  }
+}
+
+.navds-link-anchor {
+  text-decoration: underline;
+  text-decoration-color: currentColor;
+  text-underline-offset: 0.1em;
+  text-decoration-thickness: 0.05em;
+  color: inherit;
+}
+
+.navds-link-anchor:hover,
+.navds-link-anchor__overlay:hover .navds-link-anchor {
+  text-decoration-thickness: 0.111em;
+}
+
+.navds-link-anchor:focus-visible {
+  outline: 3px solid var(--a-border-focus);
+  outline-offset: 3px;
+  border-radius: 1px;
+}
+
+.navds-link-anchor__overlay .navds-link-anchor:focus-visible {
+  outline: none;
+}
+
+.navds-link-anchor__arrow {
+  transition: transform 200ms;
+  transform: translateX(0);
+  flex-shrink: 0;
+}
+
+.navds-link-anchor:hover .navds-link-anchor__arrow,
+.navds-link-anchor__overlay:hover .navds-link-anchor__arrow {
+  transform: translateX(4px);
+}
+
+/* stylelint-disable declaration-block-no-redundant-longhand-properties */
+
+.navds-link-card {
+  --__ac-link-card-padding-block: var(--a-spacing-4);
+  --__ac-link-card-padding-inline: var(--a-spacing-5);
+
+  border-radius: var(--a-border-radius-xlarge);
+  text-decoration: none;
+  color: var(--a-text-default);
+  transition-property: border-color, box-shadow, transform, background-color;
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0, 0, 0, 1);
+  position: relative;
+  background-color: var(--a-surface-default);
+  border: 1px solid var(--a-border-subtle);
+  padding: var(--__ac-link-card-padding-block) var(--__ac-link-card-padding-inline);
+  cursor: pointer;
+  display: grid;
+  grid-template-areas:
+    "image image"
+    "icon title"
+    "icon description"
+    "icon footer";
+  grid-template-columns: auto 1fr;
+  grid-template-rows: min-content min-content min-content auto;
+  align-items: center;
+}
+
+.navds-link-card:not(:has(.navds-link-card__description, .navds-link-card__footer)) {
+  grid-template-rows: auto 1fr;
+}
+
+.navds-link-card:not(:has(.navds-link-card__description, .navds-link-card__footer)) .navds-link-card__icon {
+  align-self: center;
+}
+
+.navds-link-card:not(:has(.navds-link-card__description, .navds-link-card__footer)) .navds-link-card__title {
+  align-items: center;
+}
+
+.navds-link-card:hover {
+  border-color: var(--a-border-default);
+  box-shadow: 0 0 0 1px var(--a-border-default);
+}
+
+.navds-link-card__title {
+  grid-area: title;
+  color: var(--a-text-default);
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--a-spacing-2);
+  hyphens: auto;
+}
+
+.navds-link-card__description {
+  grid-area: description;
+  margin-block-start: var(--a-spacing-1);
+}
+
+.navds-link-card__footer {
+  grid-area: footer;
+  margin-block-start: var(--a-spacing-4);
+  display: flex;
+  align-self: flex-end;
+  gap: var(--a-spacing-2);
+  flex-wrap: wrap;
+}
+
+.navds-link-card__icon {
+  grid-area: icon;
+  width: max-content;
+  height: max-content;
+  display: grid;
+  place-content: center;
+  color: var(--a-text-default);
+  align-self: flex-start;
+  margin-inline-end: var(--a-spacing-4);
+}
+
+.aksel-link-card--small {
+  --__ac-link-card-padding-block: var(--a-spacing-3);
+  --__ac-link-card-padding-inline: var(--a-spacing-4);
+}
+
+.aksel-link-card--small .aksel-link-card__icon {
+  margin-inline-end: var(--a-spacing-3);
+}
+
+.navds-link-card__image-container {
+  display: block;
+  overflow: hidden;
+  grid-area: image;
+  margin-block: calc(var(--__ac-link-card-padding-block) * -1) var(--__ac-link-card-padding-block);
+  margin-inline: calc(var(--__ac-link-card-padding-inline) * 1 * -1);
+  border-radius: calc(var(--a-border-radius-xlarge) - 1px);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  position: relative;
+}
+
+.navds-link-card__image-container :is(img, picture) {
+  object-fit: cover;
+  display: block;
+  max-width: 100%;
+  height: 100%;
+}
+
 .navds-loader {
   width: 1.5rem;
   display: inline-block;
@@ -8295,10 +8469,23 @@ button.navds-stepper__step {
   display: table;
 }
 
+.navds-table.navds-table--sticky-header {
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
 .navds-table__header {
   display: table-header-group;
 }
 
+.navds-table--sticky-header .navds-table__header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background-color: var(--a-surface-default);
+  box-sizing: border-box;
+}
+
 .navds-table__body {
   display: table-row-group;
 }
@@ -8313,6 +8500,38 @@ button.navds-stepper__step {
 
 .navds-table__row--selected {
   background-color: var(--ac-table-row-selected, var(--a-surface-action-subtle));
+  box-shadow:
+    inset 1px 0 0 0 var(--a-border-action),
+    inset -1px 0 0 0 var(--a-border-action);
+}
+
+.navds-table__row--selected:first-of-type {
+  box-shadow:
+    inset 1px 0 0 0 var(--a-border-action),
+    inset -1px 0 0 0 var(--a-border-action),
+    inset 0 1px 0 0 var(--a-border-action);
+}
+
+.navds-table__row--selected :is(.navds-table__header-cell, .navds-table__data-cell) {
+  border-color: var(--a-border-action);
+}
+
+.navds-table__row--selected + .navds-table__expanded-row {
+  box-shadow:
+    inset 1px 0 0 0 var(--a-border-action),
+    inset -1px 0 0 0 var(--a-border-action);
+}
+
+.navds-table__row:has(+ .navds-table__row--selected) :is(.navds-table__header-cell, .navds-table__data-cell) {
+  border-color: var(--a-border-action);
+}
+
+.navds-table__row--selected.navds-table__expandable-row--open :is(.navds-table__header-cell, .navds-table__data-cell) {
+  border-color: transparent;
+}
+
+.navds-table__row--selected + .navds-table__expanded-row .navds-table__expanded-row-collapse {
+  border-color: var(--a-border-action);
 }
 
 .navds-table__body .navds-table__row--shade-on-hover.navds-table__row--selected:hover {
@@ -8539,6 +8758,10 @@ button.navds-stepper__step {
   border-bottom: 1px solid var(--ac-table-row-border, var(--a-border-default));
 }
 
+.navds-table__expanded-row:has(+ .navds-table__row--selected) .navds-table__expanded-row-collapse {
+  border-color: var(--a-border-action);
+}
+
 .navds-table__expanded-row-content {
   --__ac-table-expanded-row-pi: calc(var(--a-spacing-2) + 3rem);