@navikt/ds-css 7.5.3 → 7.7.0

package/darkside/date.darkside.css

@@ -1,106 +1,138 @@
 .navds-date {
-  padding: var(--a-spacing-4) var(--a-spacing-3);
-}
+  padding: var(--ax-spacing-4) var(--ax-spacing-3);
+
+  .rdp-day_range_middle {
+    &.rdp-day_disabled {
+      color: var(--ax-text-default);
+      background: var(--ax-bg-neutral-moderateA);
+    }
+
+    &.rdp-day_selected {
+      background-color: var(--ax-bg-accent-moderateA);
+      box-shadow: inset 0 0 0 1px var(--ax-border-accent-subtleA);
+      color: var(--ax-text-default);
+    }
+  }
 
-.navds-date .rdp-day_range_middle.rdp-day_disabled {
-  color: var(--ac-date-middle-text, var(--a-text-on-action));
-  background: var(--ac-date-middle-bg, var(--a-surface-action-selected));
-}
+  .rdp-month,
+  &.rdp-month {
+    display: grid;
+    gap: var(--ax-spacing-5);
+  }
 
-.navds-date .rdp-month,
-.navds-date.rdp-month {
-  display: grid;
-  gap: var(--a-spacing-5);
-}
+  .navds-date__caption-label {
+    text-transform: capitalize;
+  }
 
-.navds-date__caption-label {
-  text-transform: capitalize;
-}
+  .rdp-head_cell {
+    text-transform: capitalize;
+    font-size: var(--ax-font-size-small);
+  }
 
-.navds-date .rdp-head_cell {
-  text-transform: capitalize;
-  font-size: var(--a-font-size-small);
-}
+  .rdp-button {
+    all: unset;
+    display: block;
+    width: 2.5rem;
+    height: 2.5rem;
+    text-align: center;
+    border-radius: var(--ax-border-radius-medium);
+  }
 
-.navds-date .rdp-weeknumber {
-  font-size: var(--a-font-size-small);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  border-radius: var(--a-border-radius-medium);
-  margin: var(--a-spacing-2);
-  color: var(--a-text-subtle);
-}
+  .rdp-day_range_start {
+    border-radius: var(--ax-border-radius-xlarge) var(--ax-border-radius-medium) var(--ax-border-radius-medium)
+      var(--ax-border-radius-xlarge);
+  }
 
-.navds-date .rdp-weeknumber.rdp-button {
-  width: 2rem;
-  height: 2rem;
-  box-shadow: 0 0 0 1px var(--a-border-default);
-  color: var(--a-text-subtle);
-  font-size: var(--a-font-size-small);
-}
+  .rdp-day_range_end:not(.rdp-day_range_start) {
+    border-radius: var(--ax-border-radius-medium) var(--ax-border-radius-xlarge) var(--ax-border-radius-xlarge)
+      var(--ax-border-radius-medium);
+  }
 
-.navds-date .rdp-weeknumber.rdp-button:active {
-  background-color: var(--a-surface-action-active);
-  color: var(--a-text-on-action);
-  box-shadow: none;
-}
+  .rdp-day_range_start.rdp-day_range_end {
+    border-radius: var(--ax-border-radius-xlarge);
+  }
 
-.navds-date__caption__month .navds-select__container select {
-  text-transform: capitalize;
-}
+  .navds-date__field {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    position: relative;
+  }
 
-.navds-date .rdp-button {
-  all: unset;
-  display: block;
-  width: 2.5rem;
-  height: 2.5rem;
-  text-align: center;
-  border-radius: var(--a-border-radius-medium);
-}
+  .rdp-day_selected,
+  .navds-monthpicker__month--selected {
+    color: var(--ax-text-accent-contrast);
+    background: var(--ax-bg-accent-strong-pressed);
+    cursor: pointer;
+  }
 
-.navds-date .rdp-day_range_start {
-  border-radius: var(--a-border-radius-xlarge) var(--a-border-radius-medium) var(--a-border-radius-medium)
-    var(--a-border-radius-xlarge);
-}
+  .rdp-day_disabled {
+    cursor: not-allowed;
+    text-decoration: line-through;
+    background-color: var(--ax-bg-neutral-moderateA);
+    color: var(--ax-text-subtle);
+  }
 
-.navds-date .rdp-day_range_end:not(.rdp-day_range_start) {
-  border-radius: var(--a-border-radius-medium) var(--a-border-radius-xlarge) var(--a-border-radius-xlarge)
-    var(--a-border-radius-medium);
-}
+  .rdp-button:where(:not(.rdp-day_selected, [disabled])):hover,
+  .navds-date__month-button:where(:not(.rdp-day_selected, [disabled])):hover {
+    background: var(--ax-bg-accent-moderate-hoverA);
+    cursor: pointer;
+  }
 
-.navds-date .rdp-day_range_start.rdp-day_range_end {
-  border-radius: var(--a-border-radius-xlarge);
-}
+  .rdp-day_today {
+    position: relative;
+
+    &::before {
+      width: 6px;
+      height: 6px;
+      display: block;
+      background-color: var(--ax-text-accent);
+      border-radius: var(--ax-border-radius-full);
+      content: "";
+      position: absolute;
+      bottom: 5px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    &.rdp-day_selected:not(.rdp-day_range_middle),
+    &:active {
+      &::before {
+        background-color: var(--ax-text-accent-contrast);
+      }
+    }
+  }
 
-.navds-date .rdp-button:not(.rdp-day_selected, [disabled]):focus-visible,
-.navds-date .navds-date__month-button:not(.rdp-day_selected, [disabled]):focus-visible {
-  box-shadow: var(--a-shadow-focus);
-}
+  .rdp-day_outside {
+    visibility: hidden;
+    pointer-events: none;
+  }
 
-@supports not selector(:focus-visible) {
-  .navds-date .rdp-button:not(.rdp-day_selected, [disabled]):focus,
-  .navds-date .navds-date__month-button:not(.rdp-day_selected, [disabled]):focus {
-    box-shadow: var(--a-shadow-focus);
+  .navds-date__modal & {
+    padding: 0;
+  }
+
+  .navds-date__modal-body > & {
+    padding: 0;
   }
 }
 
-.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus-visible,
-.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus-visible {
-  box-shadow:
-    inset 0 0 0 1px var(--a-surface-default),
-    var(--a-shadow-focus);
+.navds-date__caption {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--ax-spacing-1);
+  padding-inline: var(--ax-spacing-1);
 }
 
-@supports not selector(:focus-visible) {
-  .navds-date .rdp-button.rdp-day_selected:not([disabled]):focus,
-  .navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus {
-    box-shadow:
-      inset 0 0 0 1px var(--a-surface-default),
-      var(--a-shadow-focus);
-  }
+.navds-date__caption-button {
+  width: 2rem;
+  height: 2rem;
+  color: var(--ax-text-default);
+}
+
+.navds-date__caption__month .navds-select__container select {
+  text-transform: capitalize;
 }
 
 /* Monthpicker */
@@ -110,24 +142,10 @@
   width: 3rem;
   height: 3rem;
   text-transform: capitalize;
-  border-radius: var(--a-border-radius-medium);
+  border-radius: var(--ax-border-radius-medium);
   cursor: pointer;
 }
 
-.navds-date__month-button:focus-visible,
-.navds-monthpicker__caption-button:focus-visible {
-  box-shadow: var(--a-shadow-focus);
-  z-index: 1;
-}
-
-@supports not selector(:focus-visible) {
-  .navds-date__month-button:focus,
-  .navds-monthpicker__caption-button:focus {
-    box-shadow: var(--a-shadow-focus);
-    z-index: 1;
-  }
-}
-
 .navds-date__year-label {
   display: flex;
   align-items: center;
@@ -137,86 +155,28 @@
 .navds-date__standalone-wrapper {
   height: fit-content;
   width: fit-content;
-}
 
-.navds-date .navds-date__field {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  position: relative;
-}
-
-.navds-date__field-wrapper {
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-  width: fit-content;
-}
-
-.navds-date .rdp-day_selected,
-.navds-monthpicker__month--selected {
-  color: var(--ac-date-selected-text, var(--a-text-on-action));
-  background: var(--ac-date-selected-bg, var(--a-surface-action-selected));
-  cursor: pointer;
-}
-
-.navds-date .rdp-day_disabled {
-  cursor: not-allowed;
-  text-decoration: line-through;
-  background-color: var(--ac-date-disabled-bg, var(--a-surface-neutral-subtle));
-  color: var(--ac-date-disabled-text, var(--a-text-subtle));
-}
-
-.navds-date .rdp-button:where(:not(.rdp-day_selected, [disabled])):hover,
-.navds-date__month-button:where(:not(.rdp-day_selected, [disabled])):hover {
-  background: var(--ac-date-hover-bg, var(--a-surface-action-subtle-hover));
-  cursor: pointer;
-}
-
-.navds-date .rdp-day_today {
-  box-shadow: 0 0 0 1px var(--ac-date-today-border, var(--a-border-action-selected));
-  text-decoration: underline;
-}
-
-.navds-date__caption {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--a-spacing-1);
-  padding-inline: var(--a-spacing-1);
-}
-
-.navds-date__caption-button,
-.navds-date__caption-button:disabled,
-.navds-date__caption-button:disabled:hover {
-  color: var(--ac-date-caption-text, var(--a-text-default));
+  .rdp-cell > button.rdp-day,
+  button.navds-date__month-button {
+    &:focus-visible {
+      outline: 2px solid var(--ax-border-focus);
+      outline-offset: 1px;
+    }
+
+    &:active:not(:disabled) {
+      color: var(--ax-text-accent-contrast);
+      background-color: var(--ax-bg-accent-strong-pressed);
+    }
+  }
 }
 
 .navds-date__field-input {
-  padding-right: var(--a-spacing-12);
-}
-
-.navds-form-field--small .navds-date__field-input {
-  padding-right: var(--a-spacing-8);
-}
-
-/* Error-handling */
-.navds-date__field--error .navds-date__field-input:not(:hover, :disabled) {
-  border-color: var(--ac-date-input-error-border, var(--a-border-danger));
-  box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger));
-}
-
-.navds-date__field--error .navds-date__field-input:focus-visible:not(:hover, :disabled) {
-  box-shadow:
-    inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)),
-    var(--a-shadow-focus);
-}
+  &.navds-text-field__input {
+    padding-right: var(--ax-spacing-12);
+  }
 
-@supports not selector(:focus-visible) {
-  .navds-date__field--error .navds-date__field-input:focus:not(:hover, :disabled) {
-    box-shadow:
-      inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)),
-      var(--a-shadow-focus);
+  .navds-form-field--small & {
+    padding-right: var(--ax-spacing-8);
   }
 }
 
@@ -225,74 +185,65 @@
   right: 0.0625rem;
   top: 50%;
   transform: translateY(-50%);
-  color: var(--ac-date-input-button-text, var(--a-text-default));
+  color: var(--ax-text-default);
   display: inline-flex;
   cursor: pointer;
   margin: 0;
   text-decoration: none;
   border: none;
   background: none;
-  border-radius: calc(var(--a-border-radius-medium) - 1px);
-  padding: var(--a-spacing-3);
+  border-radius: calc(var(--ax-border-radius-medium) - 1px);
+  padding: var(--ax-spacing-3);
   align-items: center;
   justify-content: center;
   font-size: 1.5rem;
   height: calc(100% - 0.125rem);
   border-start-start-radius: 0;
   border-end-start-radius: 0;
-}
-
-.navds-form-field--small .navds-date__field-button {
-  padding: var(--a-spacing-1);
-}
 
-.navds-date__field-button:hover:where(:not([disabled])) {
-  color: var(--ac-date-input-button-hover-text, var(--a-text-action-on-action-subtle));
-  background-color: var(--ac-date-input-button-hover-bg, var(--a-surface-action-subtle-hover));
-}
+  .navds-form-field--small & {
+    padding: var(--ax-spacing-1);
+  }
 
-.navds-form-field--disabled .navds-date__field-button {
-  opacity: 1;
-  cursor: not-allowed;
-}
+  .navds-form-field--disabled & {
+    opacity: 1;
+    cursor: not-allowed;
+  }
 
-.navds-date__field-button:focus-visible {
-  outline: none;
-  box-shadow: var(--a-shadow-focus);
-  border-radius: var(--a-border-radius-medium);
-}
+  /* Readonly */
+  .navds-date__field--readonly & {
+    cursor: default;
+  }
 
-@supports not selector(:focus-visible) {
-  .navds-date__field-button:focus {
-    outline: none;
-    box-shadow: var(--a-shadow-focus);
+  &:focus-visible {
+    outline-color: var(--ax-border-focus);
   }
 }
 
-.navds-date__caption__year {
-  width: 5rem;
+.navds-date__field-wrapper {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  width: fit-content;
 }
 
-.navds-date .rdp-day_outside {
-  visibility: hidden;
-  pointer-events: none;
+.navds-date__week-row {
+  display: flex;
+  align-items: center;
+  gap: var(--ax-spacing-05);
 }
 
-/* Readonly */
-.navds-date__field--readonly .navds-date__field-button {
-  cursor: default;
-  color: var(--a-gray-500);
+.navds-date__weeknumber {
+  --__axc-button-border-width: 1px;
 }
 
-.navds-date__caption-button {
-  width: 2rem;
-  height: 2rem;
-}
+.navds-date__weeknumber-number {
+  font-size: 0.875rem;
+  color: var(--ax-text-subtle);
 
-.navds-date__week-row {
-  display: flex;
-  align-items: center;
-  gap: var(--a-spacing-05);
+  .navds-date__weeknumber:active & {
+    color: var(--ax-text-neutral-contrast);
+  }
 }
 
 .navds-date__week-wrapper {
@@ -303,37 +254,25 @@
   margin: 0;
 }
 
-.navds-date__modal.navds-date {
-  padding: 0;
-}
-
 .navds-date__modal-body {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  padding: var(--a-spacing-4);
-  gap: var(--a-spacing-2);
-}
-
-.navds-date__modal-body > .navds-date {
-  padding: 0;
-}
-
-.navds-date__popover:where(.navds-popover) {
-  border: none;
+  padding: var(--ax-spacing-4);
+  gap: var(--ax-spacing-2);
 }
 
 @media (min-width: 480px) {
   .navds-date {
-    padding: var(--a-spacing-5) var(--a-spacing-4);
+    padding: var(--ax-spacing-5) var(--ax-spacing-4);
   }
 
   .navds-date__modal-body {
-    padding: var(--a-spacing-6);
+    padding: var(--ax-spacing-6);
   }
 
   .navds-date__caption {
-    gap: var(--a-spacing-2);
+    gap: var(--ax-spacing-2);
   }
 
   .navds-date .rdp-button,

package/darkside/expansioncard.darkside.css

@@ -1,7 +1,7 @@
 .navds-expansioncard {
   --__axc-expansioncard-border-radius: calc(var(--ax-border-radius-xlarge) - 1px);
   --__axc-expansioncard-padding-block: var(--ax-spacing-4);
-  --__axc-expansioncard-padding-inline: var(--ax-spacing-6);
+  --__axc-expansioncard-padding-inline: var(--ax-spacing-5);
 
   border-radius: var(--ax-border-radius-xlarge);
   background-color: var(--ax-bg-raised);
@@ -16,8 +16,8 @@
 
 /* ------------------------ ExpansionCard Small-size ------------------------ */
 .navds-expansioncard--small {
-  --__axc-expansioncard-padding-block: var(--ax-spacing-3);
   --__axc-expansioncard-padding-inline: var(--ax-spacing-4);
+  --__axc-expansioncard-padding-block: var(--ax-spacing-3);
 
   & > .navds-expansioncard__header .navds-expansioncard__title--small {
     margin-top: var(--ax-spacing-05);
@@ -31,10 +31,6 @@
     min-height: 2rem;
     min-width: 2rem;
   }
-
-  & .navds-expansioncard__content {
-    --__axc-expansioncard-padding-block: var(--ax-spacing-4);
-  }
 }
 
 /* -------------------------- ExpansionCard Header -------------------------- */
@@ -144,8 +140,6 @@
 
 /* -------------------------- ExpansionCard Content ------------------------- */
 .navds-expansioncard__content {
-  --__axc-expansioncard-padding-block: var(--ax-spacing-5);
-
   border-end-end-radius: var(--__axc-expansioncard-border-radius);
   border-end-start-radius: var(--__axc-expansioncard-border-radius);
   padding-inline: var(--__axc-expansioncard-padding-inline);
@@ -161,7 +155,7 @@
   &[data-open="true"] {
     grid-template-rows: 1fr;
     visibility: visible;
-    padding-block: var(--__axc-expansioncard-padding-block) var(--__axc-expansioncard-padding-inline);
+    padding-block: var(--__axc-expansioncard-padding-block);
 
     & .navds-expansioncard__content-inner {
       opacity: 1;

package/darkside/form/combobox.darkside.css

@@ -120,7 +120,6 @@
   & .navds-combobox__wrapper-inner {
     border-color: var(--ax-border-danger);
     box-shadow: 0 0 0 1px var(--ax-border-danger);
-    outline-offset: 3px;
 
     &:has(.navds-combobox__input:focus-visible) {
       border-color: var(--ax-border-danger);
@@ -129,7 +128,7 @@
 }
 
 .navds-combobox__selected-options {
-  gap: var(--__axc-combobox-wrapper-inner-padding);
+  gap: 0;
   align-items: center;
 
   & > li {
@@ -141,6 +140,10 @@
     display: flex;
     flex: 1;
   }
+
+  &[data-type="multiple"] {
+    gap: var(--__axc-combobox-wrapper-inner-padding);
+  }
 }
 
 .navds-combobox__selected-options--no-bg {
@@ -162,7 +165,6 @@
   border: none;
   padding: 0;
   margin: 0;
-  margin-left: var(--ax-spacing-1);
   min-width: 10ch;
   width: 100%;
   height: var(--__axc-combobox-input-height);
@@ -172,6 +174,10 @@
     outline: 0;
     border: none;
   }
+
+  .navds-combobox__selected-options > li:only-child > & {
+    margin-left: var(--ax-spacing-1);
+  }
 }
 
 .navds-combobox__input--hide-caret {
@@ -248,17 +254,14 @@
   right: 0;
   z-index: 10;
   top: calc(100% + var(--ax-spacing-2));
-  border: 1px solid var(--ax-border-default);
+  border: 1px solid var(--ax-border-subtleA);
   display: flex;
   flex-direction: column;
   border-radius: var(--ax-border-radius-large);
   background-color: var(--ax-bg-raised);
   color: var(--ax-text-default);
   overscroll-behavior: contain;
-  box-shadow:
-    0 0 1px 0 rgb(7 9 13 / 0.02),
-    0 2px 5px 0 rgb(7 9 13 / 0.1),
-    0 10px 16px 0 rgb(7 9 13 / 0.12);
+  box-shadow: var(--ax-shadow-dialog);
 
   & .navds-combobox__list-options {
     overflow-y: auto;
@@ -269,18 +272,6 @@
   display: none;
 }
 
-.navds-combobox__list_non-selectables {
-  position: sticky;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 1;
-
-  &:hover {
-    cursor: default;
-  }
-}
-
 .navds-combobox__list-item,
 .navds-combobox__list-item--loading,
 .navds-combobox__list-item--no-options,
@@ -295,6 +286,7 @@
   border: 0;
   margin-inline: var(--ax-spacing-2);
   margin-block: var(--ax-spacing-1);
+  scroll-margin-block: 8px; /* outline + outline-offset + margin-block */
 }
 
 .navds-combobox__list-item--no-options {

package/darkside/form/error-summary.darkside.css

@@ -1,6 +1,6 @@
 .navds-error-summary {
   background-color: var(--ax-bg-default);
-  padding: var(--ax-spacing-5);
+  padding: var(--ax-spacing-4) var(--ax-spacing-5);
   border: 4px solid var(--ax-border-danger);
   border-radius: var(--ax-border-radius-xlarge);
   outline-offset: 2px;
@@ -18,7 +18,7 @@
 }
 
 .navds-error-summary--small {
-  padding: var(--ax-spacing-3);
+  padding: var(--ax-spacing-3) var(--ax-spacing-4);
 
   & .navds-error-summary__heading {
     scroll-margin-top: var(--ax-spacing-4);