@navikt/ds-css 7.9.2 → 7.11.0

package/darkside/form/combobox.darkside.css

@@ -10,12 +10,12 @@
   flex-direction: column;
   width: 100%;
   position: relative;
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-border-radius-large);
 }
 
 .navds-form-field:not(:is(.navds-combobox--disabled, .navds-combobox--readonly)) {
   & .navds-combobox__wrapper:hover {
-    border-color: var(--ax-border-focus);
+    border-color: var(--ax-border-accent-strong);
   }
 }
 
@@ -31,6 +31,10 @@
   opacity: var(--ax-opacity-disabled);
 
   & .navds-combobox__wrapper {
+    &:hover {
+      border-color: var(--ax-border-default);
+    }
+
     & *:hover {
       cursor: not-allowed;
     }
@@ -77,12 +81,12 @@
 
 .navds-combobox__wrapper-inner {
   border: 1px solid var(--ax-border-default);
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-border-radius-large);
 
   &:has(.navds-combobox__input:focus-visible) {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
-    border-color: var(--ax-border-focus);
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+    border-color: var(--ax-border-accent-strong);
   }
 
   &:has(.navds-combobox__input:focus-visible).navds-combobox__wrapper-inner--virtually-unfocused {
@@ -113,15 +117,19 @@
   &:hover {
     cursor: text;
   }
+
+  .navds-combobox--disabled &:hover {
+    border-color: var(--ax-border-default);
+  }
 }
 
 .navds-combobox--error {
   & .navds-combobox__wrapper-inner {
-    border-color: var(--ax-border-danger);
-    box-shadow: 0 0 0 1px var(--ax-border-danger);
+    border-color: var(--ax-border-danger-strong);
+    box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
 
     &:has(.navds-combobox__input:focus-visible) {
-      border-color: var(--ax-border-danger);
+      border-color: var(--ax-border-danger-strong);
     }
   }
 }
@@ -207,7 +215,6 @@
 }
 
 .navds-combobox__button-toggle-list {
-  border-radius: var(--ax-border-radius-medium);
   color: var(--ax-text-default);
   display: flex;
   justify-content: center;
@@ -230,7 +237,7 @@
 /* dropdown & non selectable dropdown items */
 
 .navds-combobox__list {
-  max-height: 290px;
+  max-height: 316px;
   overflow: clip;
   position: absolute;
   left: 0;
@@ -265,10 +272,10 @@
   justify-content: space-between;
   padding-block: var(--__axc-combobox-list-item-padding-block);
   padding-inline: var(--__axc-combobox-list-item-padding-inline);
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-border-radius-large);
   border: 0;
   margin-inline: var(--ax-space-8);
-  margin-block: var(--ax-space-4);
+  margin-block: var(--ax-space-2);
   scroll-margin-block: 8px; /* outline + outline-offset + margin-block */
 }
 
@@ -307,7 +314,6 @@
 .navds-combobox__list-item--focus {
   cursor: pointer;
   outline: 2px solid var(--ax-border-focus);
-  outline-offset: 2px;
 }
 
 .navds-combobox__list-item {
@@ -321,10 +327,11 @@
   & mark {
     background-color: transparent;
     font-weight: var(--ax-font-weight-bold);
+    color: var(--ax-text-default);
   }
 
   & svg {
-    color: var(--ax-text-accent);
+    color: var(--ax-text-default);
   }
 }
 
@@ -344,14 +351,14 @@
   justify-content: flex-start;
   gap: 0.25rem;
   margin: 0;
-  margin-block: calc(var(--ax-space-4) * -1);
-  padding-block: var(--ax-space-16);
+  margin-block-start: calc(var(--ax-space-4) * -1);
 
   & svg {
     color: var(--ax-text-default);
   }
 
   &:only-child {
+    margin-block: calc(var(--ax-space-4) * -1);
     border: none;
   }
 }

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

@@ -3,17 +3,17 @@
   padding: var(--ax-space-16) var(--ax-space-20);
   border: 4px solid var(--ax-border-danger);
   border-radius: var(--ax-border-radius-xlarge);
-  outline-offset: 2px;
+  outline-offset: 3px;
 
   &:focus-visible,
   &:has(.navds-error-summary__heading:focus-visible) {
-    outline: 2px solid var(--ax-border-focus);
+    outline: 3px solid var(--ax-border-focus);
   }
 }
 
 @supports not selector(:focus-visible) {
   .navds-error-summary:focus {
-    outline: 2px solid var(--ax-border-focus);
+    outline: 3px solid var(--ax-border-focus);
   }
 }
 

package/darkside/form/file-upload.darkside.css

@@ -26,19 +26,23 @@
     border-color: var(--ax-border-accent-strong);
 
     & > .navds-dropzone__area-button {
-      color: var(--ax-text-accent-strong);
       background-color: var(--ax-bg-accent-moderate-hover);
       box-shadow: inset 0 0 0 2px var(--ax-bg-accent-strong-hover);
     }
   }
 
-  &:active .navds-dropzone__area-button {
-    background-color: var(--ax-bg-accent-strong-pressed);
-    color: var(--ax-text-accent-contrast);
-    box-shadow: none;
+  &:active:not([data-disabled="true"]) {
+    & > .navds-dropzone__area-button {
+      background-color: var(--ax-bg-accent-strong-pressed);
+      color: var(--ax-text-accent-contrast);
+      box-shadow: none;
+    }
   }
 
   &[data-disabled="true"] {
+    --__axc-dropzone-background: var(--ax-bg-soft);
+
+    border-color: var(--ax-border-subtleA);
     cursor: default;
   }
 }
@@ -89,7 +93,7 @@
 
 .navds-dropzone--error > .navds-dropzone__area {
   border-color: transparent;
-  outline: 2px solid var(--ax-border-danger);
+  outline: 2px solid var(--ax-border-danger-strong);
   outline-offset: -1px;
 }
 
@@ -130,7 +134,7 @@
 }
 
 .navds-dropzone--dragging .navds-dropzone__area-release {
-  color: var(--ax-text-accent-strong);
+  color: var(--ax-text-accent);
   top: 50%;
   transform: translateY(-50%);
 }
@@ -165,7 +169,7 @@ li.navds-file-item {
 }
 
 .navds-file-item--error > .navds-file-item__inner {
-  outline: 2px solid var(--ax-border-danger);
+  outline: 2px solid var(--ax-border-danger-strong);
 }
 
 .navds-file-item__icon {
@@ -198,7 +202,6 @@ li.navds-file-item {
 }
 
 .navds-file-item__error {
-  color: var(--ax-text-danger);
   display: grid;
   transition-property: grid-template-rows, padding-top;
   transition-duration: 250ms;
@@ -206,20 +209,8 @@ li.navds-file-item {
   overflow: hidden;
   grid-template-rows: 0fr;
 
-  & .navds-file-item__error {
+  .navds-file-item--error & {
     grid-template-rows: 1fr;
     padding-top: var(--ax-space-4);
   }
 }
-
-.navds-file-item__error-content {
-  min-height: 0;
-  display: flex;
-  gap: var(--ax-space-4);
-
-  & > svg {
-    flex-shrink: 0;
-    height: 1rem;
-    margin-top: 0.1rem;
-  }
-}

package/darkside/form/form-progress.darkside.css

@@ -50,7 +50,7 @@
 
 .navds-form-progress__stepper {
   border: 1px solid var(--ax-border-subtle);
-  border-radius: var(--ax-border-radius-large);
+  border-radius: var(--ax-border-radius-xlarge);
   padding: var(--ax-space-16) var(--ax-space-20);
   margin-top: var(--ax-space-4);
   background: var(--ax-bg-raised);

package/darkside/form/radio-checkbox.darkside.css

@@ -68,26 +68,42 @@
   height: 1.25rem;
 }
 
-.navds-checkbox__input:focus + .navds-checkbox__label::before,
-.navds-radio__input:focus + .navds-radio__label::before {
-  outline: 2px solid var(--ax-border-focus);
-  outline-offset: 2px;
-}
-
-.navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+.navds-checkbox__input:focus + .navds-checkbox__label::after,
+.navds-radio__input:focus + .navds-radio__label::after {
   content: "";
   position: absolute;
-  top: 50%;
-  transform: translate(var(--ax-space-6), -50%);
-  background-color: var(--ax-bg-default);
+  width: 100%;
+  height: calc(100% - var(--ax-space-24));
+  border-radius: var(--ax-border-radius-medium);
+  outline: 3px solid var(--ax-border-focus);
+  outline-offset: 3px;
+  pointer-events: none;
+}
+
+.navds-checkbox--small > .navds-checkbox__input:focus + .navds-checkbox__label::after,
+.navds-radio--small > .navds-radio__input:focus + .navds-radio__label::after {
+  height: calc(100% - var(--ax-space-12));
+}
+
+.navds-checkbox__icon-indeterminate {
+  display: none;
+}
+
+.navds-checkbox__input:indeterminate + .navds-checkbox__label > .navds-checkbox__icon-indeterminate {
+  display: block;
   width: 0.75rem;
   height: 0.25rem;
+  background-color: var(--ax-bg-default);
   border-radius: 1px;
-  flex-shrink: 0;
+  position: absolute;
+  transform: translate(var(--ax-space-6), -50%);
+  top: 50%;
+  pointer-events: none;
 }
 
-.navds-checkbox--small .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
-  transform: translate(0.25rem, -50%);
+.navds-checkbox--small .navds-checkbox__input:indeterminate + .navds-checkbox__label > .navds-checkbox__icon-indeterminate {
+  transform: translate(var(--ax-space-4), -50%);
+  height: 0.1875rem;
 }
 
 .navds-checkbox__input:where(:checked, :indeterminate) + .navds-checkbox__label::before {
@@ -141,7 +157,7 @@
 
 .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
 .navds-radio__input:hover:not(:disabled) + .navds-radio__label {
-  color: var(--ax-text-accent-strong);
+  color: var(--ax-text-accent);
 }
 
 .navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
@@ -152,13 +168,12 @@
 
 .navds-checkbox--error > .navds-checkbox__input:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
 .navds-radio--error > .navds-radio__input:not(:disabled, :checked) + .navds-radio__label::before {
-  border-color: var(--ax-border-danger);
+  border-color: var(--ax-border-danger-strong);
 }
 
 .navds-checkbox--error > .navds-checkbox__input:not(:disabled, :checked, :indeterminate):hover + .navds-checkbox__label::before,
 .navds-radio--error > .navds-radio__input:not(:disabled, :checked):hover + .navds-radio__label::before {
   background-color: var(--ax-bg-danger-moderate-hoverA);
-  border-color: var(--ax-border-danger-strong);
 }
 
 .navds-checkbox--error > .navds-checkbox__input:is(:checked, :indeterminate):not(:disabled) + .navds-checkbox__label::before {
@@ -222,7 +237,7 @@
     inset 0 0 0 8px var(--ax-bg-moderate);
 }
 
-.navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+.navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label > .navds-checkbox__icon-indeterminate {
   background-color: var(--ax-text-subtle);
 }
 
@@ -247,7 +262,7 @@
     color: var(--__axc-radio-checkbox-high-contrast-text);
   }
 
-  .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+  .navds-checkbox__input:indeterminate + .navds-checkbox__label > .navds-checkbox__icon-indeterminate {
     background-color: var(--__axc-radio-checkbox-high-contrast-text);
   }
 
@@ -265,7 +280,10 @@
     background-color: var(--__axc-radio-checkbox-high-contrast-bg);
   }
 
-  .navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+  .navds-checkbox--readonly
+    > .navds-checkbox__input:indeterminate
+    + .navds-checkbox__label
+    > .navds-checkbox__icon-indeterminate {
     background-color: var(--__axc-radio-checkbox-high-contrast-text);
   }
 

package/darkside/form/search.darkside.css

@@ -22,12 +22,12 @@
 .navds-search__wrapper {
   display: inline-flex;
   align-items: center;
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-border-radius-large);
 
   /* We have to outline the whole container to include the Search-buttons */
   &:has(.navds-search__input:focus-visible) {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
   }
 }
 
@@ -97,8 +97,8 @@
 .navds-search__button-search {
   flex-shrink: 0;
   border-radius: 0;
-  border-top-right-radius: var(--ax-border-radius-medium);
-  border-bottom-right-radius: var(--ax-border-radius-medium);
+  border-top-right-radius: var(--ax-border-radius-large);
+  border-bottom-right-radius: var(--ax-border-radius-large);
 }
 
 .navds-search__button-search.navds-button--secondary {
@@ -127,13 +127,13 @@
 
 /* --------------------------- Search Error-state --------------------------- */
 .navds-search--error .navds-search__input:not(:disabled) {
-  border-color: var(--ax-border-danger);
+  border-color: var(--ax-border-danger-strong);
   box-shadow:
-    inset -2px 0 0 0 var(--ax-border-danger),
-    inset 0 0 0 1px var(--ax-border-danger);
+    inset -2px 0 0 0 var(--ax-border-danger-strong),
+    inset 0 0 0 1px var(--ax-border-danger-strong);
 
   &.navds-search__input--simple {
-    box-shadow: inset 0 0 0 1px var(--ax-border-danger);
+    box-shadow: inset 0 0 0 1px var(--ax-border-danger-strong);
   }
 }
 

package/darkside/form/select.darkside.css

@@ -1,7 +1,7 @@
 .navds-select__input {
   appearance: none;
   background-color: var(--ax-bg-input);
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-border-radius-large);
   border: 1px solid var(--ax-border-default);
   color: var(--ax-text-default);
   width: 100%;
@@ -18,8 +18,8 @@
   }
 
   &:focus {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
     border-color: var(--ax-border-accent-strong);
   }
 
@@ -66,8 +66,8 @@
 /* --------------------------- Select Error-state --------------------------- */
 .navds-select--error {
   > * select {
-    box-shadow: 0 0 0 1px var(--ax-border-danger);
-    border-color: var(--ax-border-danger);
+    box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
+    border-color: var(--ax-border-danger-strong);
   }
 
   > * select:hover,

package/darkside/form/switch.darkside.css

@@ -31,31 +31,46 @@
 }
 
 .navds-switch__content {
+  --__axc-switch-block-padding: 0.75rem;
+
+  position: relative;
   display: flex;
   flex-direction: column;
-  gap: 0.125rem;
-  padding: 0.75rem 0 0.75rem 3.25rem;
+  gap: var(--ax-space-2);
+  padding: var(--__axc-switch-block-padding) 0 var(--__axc-switch-block-padding) 3.25rem;
 
   .navds-switch--right & {
-    padding: 0.75rem 3.25rem 0.75rem 0;
+    padding: var(--__axc-switch-block-padding) 3.25rem var(--__axc-switch-block-padding) 0;
   }
 
   .navds-switch--small & {
-    padding: calc(var(--ax-space-8) - var(--ax-space-2)) 0 calc(var(--ax-space-8) - var(--ax-space-2)) 3.25rem;
+    --__axc-switch-block-padding: 0.375rem;
   }
 
-  .navds-switch--right.navds-switch--small & {
-    padding: calc(var(--ax-space-8) - var(--ax-space-2)) 3.25rem calc(var(--ax-space-8) - var(--ax-space-2)) 0;
+  &.navds-switch--with-description {
+    padding-bottom: 0;
   }
-}
 
-.navds-switch--with-description {
-  padding-bottom: 0;
+  .navds-switch__input:focus ~ .navds-switch__label-wrapper > &::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    width: 100%;
+    height: calc(100% - var(--__axc-switch-block-padding) * 2);
+    border-radius: var(--ax-border-radius-medium);
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+    pointer-events: none;
+  }
+
+  .navds-switch__input:focus ~ .navds-switch__label-wrapper > &.navds-switch--with-description::after {
+    height: calc(100% - var(--__axc-switch-block-padding) * 1);
+  }
 }
 
 .navds-switch__input:hover ~ .navds-switch__label-wrapper,
 .navds-switch__label-wrapper:hover {
-  color: var(--ax-text-accent-strong);
+  color: var(--ax-text-accent);
 }
 
 .navds-switch__input:disabled:hover ~ .navds-switch__label-wrapper {
@@ -100,9 +115,9 @@
     border-color: var(--ax-bg-accent-strong-pressed);
   }
 
-  .navds-switch__input:focus-visible ~ & {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
+  .navds-switch--standalone > .navds-switch__input:focus ~ & {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
   }
 }
 
@@ -124,7 +139,7 @@
   .navds-switch__input:checked ~ .navds-switch__track > & {
     background-color: var(--ax-bg-raised);
     transform: translateX(1.25rem);
-    color: var(--ax-text-accent-strong);
+    color: var(--ax-text-accent);
     width: 1.25rem;
     height: 1.25rem;
     left: 0;
@@ -238,9 +253,9 @@
     color: field;
   }
 
-  .navds-switch__input:focus-visible ~ .navds-switch__track {
-    outline: 2px solid highlight;
-    outline-offset: 2px;
+  .navds-switch__input:focus ~ .navds-switch__label-wrapper > .navds-switch__content::after,
+  .navds-switch--standalone > .navds-switch__input:focus ~ .navds-switch__track {
+    outline: 3px solid highlight;
   }
 
   .navds-switch--disabled:not(.navds-switch--loading) {
@@ -248,7 +263,7 @@
   }
 
   .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__thumb {
-    background-color: graytext;
+    background-color: graytext !important;
   }
 
   .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__track {

package/darkside/form/text-field.darkside.css

@@ -2,7 +2,7 @@
   appearance: none;
   padding: var(--ax-space-8);
   background: var(--ax-bg-input);
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-border-radius-large);
   border: 1px solid var(--ax-border-default);
   min-height: 3rem;
   width: 100%;
@@ -14,8 +14,8 @@
 
   &:focus-visible {
     border-color: var(--ax-border-accent-strong);
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
   }
 
   &:disabled {
@@ -39,8 +39,8 @@
 }
 
 .navds-text-field--error .navds-text-field__input:not(:disabled) {
-  border-color: var(--ax-border-danger);
-  box-shadow: 0 0 0 1px var(--ax-border-danger);
+  border-color: var(--ax-border-danger-strong);
+  box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
 }
 
 .navds-text-field--readonly .navds-text-field__input {

package/darkside/form/textarea.darkside.css

@@ -4,7 +4,7 @@
   appearance: none;
   padding: var(--ax-space-8);
   background-color: var(--ax-bg-input);
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-border-radius-large);
   border: 1px solid var(--ax-border-default);
   resize: none;
   width: 100%;
@@ -20,8 +20,8 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
     border-color: var(--ax-border-accent-strong);
   }
 
@@ -90,8 +90,8 @@
 }
 
 .navds-textarea--error .navds-textarea__input:not(:disabled) {
-  box-shadow: 0 0 0 1px var(--ax-border-danger);
-  border-color: var(--ax-border-danger);
+  box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
+  border-color: var(--ax-border-danger-strong);
 }
 
 @media (forced-colors: active) {

package/darkside/index.css

@@ -45,7 +45,6 @@
 @import "./tooltip.darkside.css" layer(aksel.components);
 @import "./toggle-group.darkside.css" layer(aksel.components);
 @import "./panel.darkside.css" layer(aksel.components);
-@import "./link-panel.darkside.css" layer(aksel.components);
 @import "./read-more.darkside.css" layer(aksel.components);
 @import "./progress-bar.darkside.css" layer(aksel.components);
 @import "./skeleton.darkside.css" layer(aksel.components);

package/darkside/internalheader.darkside.css

@@ -87,7 +87,7 @@
 .navds-internalheader__button {
   &:focus-visible {
     outline: 3px solid var(--ax-border-focus);
-    outline-offset: -3px;
+    outline-offset: -4px;
   }
 
   &:active {

package/darkside/link.darkside.css

@@ -13,8 +13,9 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+    border-radius: 1px;
   }
 
   &.navds-link--inline-text {

package/darkside/modal.darkside.css

@@ -14,6 +14,7 @@
   max-height: 100%;
   max-width: 100%;
   color: var(--ax-text-default);
+  margin: auto;
 
   &[open] {
     display: flex;

package/darkside/read-more.darkside.css

@@ -20,8 +20,8 @@
   text-align: start;
 
   &:focus-visible {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
   }
 
   &[data-state="open"] .navds-read-more__expand-icon {

package/darkside/stepper.darkside.css

@@ -66,10 +66,11 @@
   padding: var(--__axc-stepper-border-width);
   margin: calc(var(--__axc-stepper-border-width) * -1) calc(var(--__axc-stepper-border-width) * -1)
     var(--__axc-stepper-circle-size);
+  width: 100%;
 
   &:focus-visible {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 4px;
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
 
     /* Isolate item to make outline show above line--2 */
     isolation: isolate;