@navikt/ds-css 7.23.2 → 7.24.0

package/dist/index.css

@@ -5,7 +5,7 @@
  */
 
 :root, :host {
-  --ax-version: "7.23.2";
+  --ax-version: "7.24.0";
   --a-breakpoint-xs: 0;
   --a-breakpoint-sm: 480px;
   --a-breakpoint-sm-down: 479px;
@@ -4218,6 +4218,7 @@ li.navds-file-item {
   position: relative;
   padding: 0.5rem;
   padding-right: 2rem;
+  scroll-margin-block-start: 4rem;
 }
 
 @media (forced-colors: active) {
@@ -4350,6 +4351,7 @@ li.navds-file-item {
 
 .navds-switch--small > .navds-switch__input {
   height: 2rem;
+  width: 2.5rem;
   top: 0;
 }
 
@@ -4372,11 +4374,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 +4412,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 +4480,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 +4495,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 +4511,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 +4525,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 +4642,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 +4744,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 +5907,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 +8476,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;
 }