@navikt/ds-css 7.9.1 → 7.10.0

package/dist/darkside/version/{7.9.1 → 7.10.0}/component/form.css

@@ -7,7 +7,7 @@
   }
 
   .navds-fieldset > :not(:first-child, :empty) {
-    margin-top: var(--ax-spacing-2);
+    margin-top: var(--ax-space-8);
   }
 
   .navds-fieldset__description {
@@ -42,16 +42,16 @@
 
   .navds-dropzone__area {
     --__axc-dropzone-background: var(--ax-bg-input);
-    --__axc-dropzone-icon-padding: var(--ax-spacing-2);
+    --__axc-dropzone-icon-padding: var(--ax-space-8);
     --__axc-dropzone-animation-length-long: .4s;
     --__axc-dropzone-animation-length-short: .25s;
     --__axc-dropzone-animation-ease-out: cubic-bezier(.3, 1, .3, 1);
     --__axc-dropzone-animation-over-under: cubic-bezier(.3, 1, .3, 1);
     align-items: center;
-    gap: var(--ax-spacing-4);
+    gap: var(--ax-space-16);
     text-align: center;
     width: 100%;
-    padding: var(--ax-spacing-4) var(--ax-spacing-5);
+    padding: var(--ax-space-16) var(--ax-space-20);
     border: 1px dashed var(--ax-border-default);
     border-radius: var(--ax-border-radius-xlarge);
     background-color: var(--__axc-dropzone-background);
@@ -125,13 +125,13 @@
   }
 
   .navds-dropzone--error > .navds-dropzone__area {
-    outline: 2px solid var(--ax-border-danger);
+    outline: 2px solid var(--ax-border-danger-strong);
     outline-offset: -1px;
     border-color: rgba(0, 0, 0, 0);
   }
 
   .navds-dropzone__area-release {
-    top: var(--ax-spacing-4);
+    top: var(--ax-space-16);
     z-index: 1;
     pointer-events: none;
     transition: top var(--__axc-dropzone-animation-length-long) var(--__axc-dropzone-animation-over-under), transform var(--__axc-dropzone-animation-length-long) var(--__axc-dropzone-animation-over-under);
@@ -142,7 +142,7 @@
   .navds-dropzone__area-release__icon {
     padding: var(--__axc-dropzone-icon-padding);
     border-radius: var(--ax-border-radius-full);
-    background-color: var(--ax-bg-neutral-moderateA);
+    background-color: var(--ax-bg-moderateA);
     transition: background-color .3s var(--__axc-dropzone-animation-ease-out), font-size .3s var(--__axc-dropzone-animation-ease-out);
     font-size: 1.5rem;
     display: grid;
@@ -171,7 +171,7 @@
   .navds-dropzone__area-disabled {
     color: var(--ax-text-subtle);
     align-items: center;
-    gap: var(--ax-spacing-2);
+    gap: var(--ax-space-8);
     flex-direction: column;
     display: flex;
   }
@@ -187,24 +187,24 @@
     border: 1px solid var(--ax-border-subtleA);
     outline-offset: -1px;
     border-radius: var(--ax-border-radius-xlarge);
-    padding: var(--ax-spacing-3) var(--ax-spacing-4);
-    gap: var(--ax-spacing-3);
+    padding: var(--ax-space-12) var(--ax-space-16);
+    gap: var(--ax-space-12);
     align-items: flex-start;
     transition: outline-color .25s cubic-bezier(0, .3, .15, 1);
     display: flex;
   }
 
   .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 {
-    background-color: var(--ax-bg-neutral-moderateA);
+    background-color: var(--ax-bg-moderateA);
     color: var(--ax-text-default);
     border-radius: var(--ax-border-radius-full);
     min-width: 2.5rem;
     min-height: 2.5rem;
-    margin-top: var(--ax-spacing-05);
+    margin-top: var(--ax-space-2);
     place-content: center;
     transition: background-color .25s cubic-bezier(0, .3, .15, 1);
     display: grid;
@@ -238,12 +238,12 @@
   }
 
   .navds-file-item__error .navds-file-item__error {
-    padding-top: var(--ax-spacing-1);
+    padding-top: var(--ax-space-4);
     grid-template-rows: 1fr;
   }
 
   .navds-file-item__error-content {
-    gap: var(--ax-spacing-1);
+    gap: var(--ax-space-4);
     min-height: 0;
     display: flex;
   }
@@ -256,7 +256,7 @@
 
   .navds-form-field {
     justify-items: start;
-    gap: var(--ax-spacing-2);
+    gap: var(--ax-space-8);
     display: grid;
   }
 
@@ -283,8 +283,8 @@
   }
 
   .navds-form-field__readonly-icon {
-    margin-top: var(--ax-spacing-05);
-    margin-right: var(--ax-spacing-1);
+    margin-top: var(--ax-space-2);
+    margin-right: var(--ax-space-4);
     flex-shrink: 0;
     align-self: flex-start;
   }
@@ -297,7 +297,7 @@
 
   .navds-error-summary {
     background-color: var(--ax-bg-default);
-    padding: var(--ax-spacing-4) var(--ax-spacing-5);
+    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;
@@ -314,21 +314,21 @@
   }
 
   .navds-error-summary--small {
-    padding: var(--ax-spacing-3) var(--ax-spacing-4);
+    padding: var(--ax-space-12) var(--ax-space-16);
   }
 
   .navds-error-summary--small .navds-error-summary__heading {
-    scroll-margin-top: var(--ax-spacing-4);
+    scroll-margin-top: var(--ax-space-16);
   }
 
   .navds-error-summary--small > .navds-error-summary__list {
-    margin: var(--ax-spacing-2) 0;
-    gap: var(--ax-spacing-2);
-    padding-left: var(--ax-spacing-5);
+    margin: var(--ax-space-8) 0;
+    gap: var(--ax-space-8);
+    padding-left: var(--ax-space-20);
   }
 
   .navds-error-summary__heading {
-    scroll-margin-top: var(--ax-spacing-6);
+    scroll-margin-top: var(--ax-space-24);
   }
 
   .navds-error-summary__heading:focus {
@@ -336,9 +336,9 @@
   }
 
   .navds-error-summary__list {
-    margin: var(--ax-spacing-3) 0;
-    gap: var(--ax-spacing-3);
-    padding-left: var(--ax-spacing-6);
+    margin: var(--ax-space-12) 0;
+    gap: var(--ax-space-12);
+    padding-left: var(--ax-space-24);
     list-style: inherit;
     flex-direction: column;
     display: flex;
@@ -416,10 +416,10 @@
   }
 
   .navds-checkbox__label, .navds-radio__label {
-    padding: var(--ax-spacing-3) 0;
+    padding: var(--ax-space-12) 0;
     cursor: pointer;
-    gap: var(--ax-spacing-2);
-    --__axc-radio-checkbox-readonly-bg: var(--ax-bg-neutral-moderate);
+    gap: var(--ax-space-8);
+    --__axc-radio-checkbox-readonly-bg: var(--ax-bg-moderate);
     --__axc-radio-checkbox-readonly-border: var(--ax-border-subtle);
     display: flex;
   }
@@ -452,7 +452,7 @@
   }
 
   .navds-checkbox--small > .navds-checkbox__label, .navds-radio--small > .navds-radio__label {
-    padding: var(--ax-spacing-1-alt) 0;
+    padding: var(--ax-space-6) 0;
   }
 
   .navds-checkbox--small > .navds-checkbox__label:before, .navds-radio--small > .navds-radio__label:before {
@@ -467,7 +467,7 @@
 
   .navds-checkbox__input:indeterminate + .navds-checkbox__label:after {
     content: "";
-    transform: translate(var(--ax-spacing-1-alt), -50%);
+    transform: translate(var(--ax-space-6), -50%);
     background-color: var(--ax-bg-default);
     border-radius: 1px;
     flex-shrink: 0;
@@ -498,7 +498,7 @@
   .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
     color: var(--ax-bg-default);
     height: 1.5rem;
-    transform: translate(var(--ax-spacing-1-alt));
+    transform: translate(var(--ax-space-6));
     pointer-events: none;
     align-items: center;
     display: flex;
@@ -528,7 +528,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, .navds-radio__input:hover:not(:disabled, :checked) + .navds-radio__label:before {
@@ -537,12 +537,11 @@
   }
 
   .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 {
@@ -589,8 +588,8 @@
   }
 
   .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label:before {
-    background-color: var(--ax-bg-neutral-strong);
-    box-shadow: inset 0 0 0 2px var(--ax-border-subtle), inset 0 0 0 8px var(--ax-bg-neutral-moderate);
+    background-color: var(--ax-bg-strong);
+    box-shadow: inset 0 0 0 2px var(--ax-border-subtle), inset 0 0 0 8px var(--ax-bg-moderate);
     border-width: 0;
   }
 
@@ -660,8 +659,8 @@
     box-sizing: border-box;
     width: 100%;
     min-height: 3rem;
-    padding: var(--ax-spacing-2);
-    padding-right: var(--ax-spacing-10);
+    padding: var(--ax-space-8);
+    padding-right: var(--ax-space-40);
     display: inline-block;
     position: relative;
   }
@@ -693,7 +692,7 @@
   }
 
   .navds-select__chevron {
-    right: var(--ax-spacing-2);
+    right: var(--ax-space-8);
     pointer-events: none;
     color: var(--ax-text-default);
     align-self: center;
@@ -712,12 +711,7 @@
     padding-block: 0;
   }
 
-  .navds-select--error > * select {
-    box-shadow: 0 0 0 1px var(--ax-border-danger);
-    border-color: var(--ax-border-danger);
-  }
-
-  .navds-select--error > * select:hover, .navds-select--error > * select:focus {
+  .navds-select--error > * select, .navds-select--error > * select:hover, .navds-select--error > * select:focus {
     box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
     border-color: var(--ax-border-danger-strong);
   }
@@ -742,8 +736,8 @@
   }
 
   .navds-select--readonly .navds-select__input {
-    background-color: var(--ax-bg-neutral-moderate);
-    border-color: var(--ax-border-neutral-subtleA);
+    background-color: var(--ax-bg-moderate);
+    border-color: var(--ax-border-subtleA);
     cursor: default;
   }
 
@@ -801,11 +795,11 @@
   }
 
   .navds-switch--small .navds-switch__content {
-    padding: calc(var(--ax-spacing-2)  - var(--ax-spacing-05)) 0 calc(var(--ax-spacing-2)  - var(--ax-spacing-05)) 3.25rem;
+    padding: calc(var(--ax-space-8)  - var(--ax-space-2)) 0 calc(var(--ax-space-8)  - var(--ax-space-2)) 3.25rem;
   }
 
   .navds-switch--right.navds-switch--small .navds-switch__content {
-    padding: calc(var(--ax-spacing-2)  - var(--ax-spacing-05)) 3.25rem calc(var(--ax-spacing-2)  - var(--ax-spacing-05)) 0;
+    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 {
@@ -813,7 +807,7 @@
   }
 
   .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 {
@@ -824,7 +818,7 @@
     background-color: var(--ax-bg-input);
     width: 2.75rem;
     height: 1.5rem;
-    top: var(--ax-spacing-3);
+    top: var(--ax-space-12);
     border-radius: var(--ax-border-radius-full);
     border: 2px solid var(--ax-border-default);
     transition-property: background-color, border-color;
@@ -835,7 +829,7 @@
   }
 
   .navds-switch--small > .navds-switch__track {
-    top: var(--ax-spacing-1);
+    top: var(--ax-space-4);
   }
 
   .navds-switch__input:checked ~ .navds-switch__track {
@@ -864,7 +858,7 @@
   }
 
   .navds-switch__thumb {
-    background-color: var(--ax-bg-neutral-strong);
+    background-color: var(--ax-bg-strong);
     border-radius: var(--ax-border-radius-full);
     justify-content: center;
     align-items: center;
@@ -880,7 +874,7 @@
 
   .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
     background-color: var(--ax-bg-raised);
-    color: var(--ax-text-accent-strong);
+    color: var(--ax-text-accent);
     width: 1.25rem;
     height: 1.25rem;
     top: 0;
@@ -931,8 +925,8 @@
   }
 
   .navds-switch--readonly > .navds-switch__track, .navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__track, .navds-switch--readonly > .navds-switch__input:checked ~ .navds-switch__track, .navds-switch--readonly > .navds-switch__input:checked:hover ~ .navds-switch__track {
-    background-color: var(--ax-bg-neutral-moderate);
-    border-color: var(--ax-border-neutral-subtleA);
+    background-color: var(--ax-bg-moderate);
+    border-color: var(--ax-border-subtleA);
   }
 
   .navds-switch--readonly > .navds-switch__label-wrapper, .navds-switch--readonly > .navds-switch__input {
@@ -948,12 +942,12 @@
   }
 
   .navds-switch--readonly .navds-switch__thumb {
-    background-color: var(--ax-bg-neutral-strong);
+    background-color: var(--ax-bg-strong);
   }
 
   .navds-switch--readonly > .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
-    background-color: var(--ax-bg-neutral-strong);
-    color: var(--ax-text-neutral-contrast);
+    background-color: var(--ax-bg-strong);
+    color: var(--ax-text-contrast);
   }
 
   @media (hover: hover) and (pointer: fine) {
@@ -1003,7 +997,7 @@
 
   .navds-text-field__input {
     appearance: none;
-    padding: var(--ax-spacing-2);
+    padding: var(--ax-space-8);
     background: var(--ax-bg-input);
     border-radius: var(--ax-border-radius-medium);
     border: 1px solid var(--ax-border-default);
@@ -1029,7 +1023,7 @@
   }
 
   .navds-text-field__input::placeholder {
-    color: var(--ax-text-neutral);
+    color: var(--ax-text-subtle);
   }
 
   .navds-text-field__input[size] {
@@ -1037,18 +1031,18 @@
   }
 
   .navds-form-field--small .navds-text-field__input {
-    padding: 0 var(--ax-spacing-2);
+    padding: 0 var(--ax-space-8);
     min-height: 2rem;
   }
 
   .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 {
-    background-color: var(--ax-bg-neutral-moderate);
-    border-color: var(--ax-border-neutral-subtleA);
+    background-color: var(--ax-bg-moderate);
+    border-color: var(--ax-border-subtleA);
     cursor: default;
   }
 
@@ -1078,7 +1072,7 @@
   .navds-textarea__input {
     height: var(--__axc-textarea-height);
     appearance: none;
-    padding: var(--ax-spacing-2);
+    padding: var(--ax-space-8);
     background-color: var(--ax-bg-input);
     border-radius: var(--ax-border-radius-medium);
     border: 1px solid var(--ax-border-default);
@@ -1109,12 +1103,12 @@
   }
 
   .navds-form-field--small .navds-textarea__input {
-    padding: var(--ax-spacing-1-alt);
+    padding: var(--ax-space-6);
   }
 
   .navds-textarea--readonly .navds-textarea__input {
-    background-color: var(--ax-bg-neutral-moderate);
-    border-color: var(--ax-border-neutral-subtleA);
+    background-color: var(--ax-bg-moderate);
+    border-color: var(--ax-border-subtleA);
     cursor: default;
   }
 
@@ -1163,8 +1157,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) {
@@ -1205,7 +1199,7 @@
   }
 
   .navds-search__input {
-    padding-right: var(--ax-spacing-10);
+    padding-right: var(--ax-space-40);
   }
 
   .navds-search__input:focus-visible {
@@ -1219,28 +1213,28 @@
   }
 
   .navds-search__input--simple {
-    padding-left: var(--ax-spacing-10);
+    padding-left: var(--ax-space-40);
   }
 
   .navds-form-field--small .navds-search__input {
-    padding-right: var(--ax-spacing-7);
+    padding-right: var(--ax-space-28);
   }
 
   .navds-form-field--small .navds-search__input--simple {
-    padding-left: var(--ax-spacing-7);
+    padding-left: var(--ax-space-28);
   }
 
   .navds-form-field--small .navds-search__search-icon {
-    left: var(--ax-spacing-1);
+    left: var(--ax-space-4);
     font-size: 1.25rem;
   }
 
   .navds-form-field--small .navds-search__button-clear {
-    right: var(--ax-spacing-1);
+    right: var(--ax-space-4);
   }
 
   .navds-search__search-icon {
-    left: var(--ax-spacing-2);
+    left: var(--ax-space-8);
     pointer-events: none;
     font-size: 1.5rem;
     position: absolute;
@@ -1253,7 +1247,7 @@
   }
 
   .navds-search__button-clear {
-    right: var(--ax-spacing-2);
+    right: var(--ax-space-8);
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
@@ -1288,12 +1282,12 @@
   }
 
   .navds-search--error .navds-search__input:not(:disabled) {
-    border-color: var(--ax-border-danger);
-    box-shadow: inset -2px 0 0 0 var(--ax-border-danger), inset 0 0 0 1px var(--ax-border-danger);
+    border-color: var(--ax-border-danger-strong);
+    box-shadow: inset -2px 0 0 0 var(--ax-border-danger-strong), inset 0 0 0 1px var(--ax-border-danger-strong);
   }
 
   .navds-search--error .navds-search__input:not(:disabled).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);
   }
 
   .navds-search__input:focus-visible, .navds-search__button-search:focus-visible {
@@ -1307,9 +1301,9 @@
 
   .navds-combobox__wrapper {
     --__axc-combobox-icon-size: 1.5rem;
-    --__axc-combobox-wrapper-inner-padding: var(--ax-spacing-2);
-    --__axc-combobox-list-item-padding-block: var(--ax-spacing-3);
-    --__axc-combobox-list-item-padding-inline: var(--ax-spacing-3);
+    --__axc-combobox-wrapper-inner-padding: var(--ax-space-8);
+    --__axc-combobox-list-item-padding-block: var(--ax-space-12);
+    --__axc-combobox-list-item-padding-inline: var(--ax-space-12);
     --__axc-combobox-border-width: 1px;
     --__axc-combobox-input-height: 2rem;
     border-radius: var(--ax-border-radius-medium);
@@ -1320,14 +1314,14 @@
   }
 
   .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);
   }
 
   .navds-form-field--small .navds-combobox__wrapper {
     --__axc-combobox-icon-size: 1.25rem;
-    --__axc-combobox-wrapper-inner-padding: var(--ax-spacing-1);
-    --__axc-combobox-list-item-padding-block: var(--ax-spacing-1-alt);
-    --__axc-combobox-list-item-padding-inline: var(--ax-spacing-2);
+    --__axc-combobox-wrapper-inner-padding: var(--ax-space-4);
+    --__axc-combobox-list-item-padding-block: var(--ax-space-6);
+    --__axc-combobox-list-item-padding-inline: var(--ax-space-8);
     --__axc-combobox-input-height: 1.5rem;
   }
 
@@ -1335,6 +1329,10 @@
     opacity: var(--ax-opacity-disabled);
   }
 
+  .navds-combobox--disabled .navds-combobox__wrapper:hover {
+    border-color: var(--ax-border-default);
+  }
+
   .navds-combobox--disabled .navds-combobox__wrapper :hover {
     cursor: not-allowed;
   }
@@ -1348,11 +1346,11 @@
   }
 
   .navds-combobox--readonly .navds-combobox__selected-options .navds-chips__chip {
-    background-color: var(--ax-bg-neutral-moderateA);
+    background-color: var(--ax-bg-moderateA);
   }
 
   .navds-combobox--readonly .navds-combobox__button-toggle-list {
-    color: var(--ax-bg-neutral-moderate);
+    color: var(--ax-bg-moderate);
   }
 
   .navds-combobox--readonly .navds-combobox__wrapper {
@@ -1361,7 +1359,7 @@
   }
 
   .navds-combobox--readonly .navds-text-field__input, .navds-combobox--readonly .navds-combobox__input {
-    background-color: var(--ax-bg-neutral-moderate);
+    background-color: var(--ax-bg-moderate);
   }
 
   .navds-combobox__button-toggle-list svg, .navds-combobox__list svg {
@@ -1375,9 +1373,9 @@
   }
 
   .navds-combobox__wrapper-inner: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);
   }
 
   .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible).navds-combobox__wrapper-inner--virtually-unfocused {
@@ -1409,13 +1407,17 @@
     cursor: text;
   }
 
+  .navds-combobox--disabled .navds-combobox__wrapper-inner: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);
   }
 
   .navds-combobox--error .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
-    border-color: var(--ax-border-danger);
+    border-color: var(--ax-border-danger-strong);
   }
 
   .navds-combobox__selected-options {
@@ -1468,7 +1470,7 @@
   }
 
   .navds-combobox__selected-options > li:only-child > .navds-combobox__input {
-    margin-left: var(--ax-spacing-1);
+    margin-left: var(--ax-space-4);
   }
 
   .navds-combobox__input--hide-caret {
@@ -1513,10 +1515,10 @@
 
   .navds-combobox__list {
     z-index: 10;
-    max-height: 290px;
+    max-height: 316px;
     left: 0;
     right: 0;
-    top: calc(100% + var(--ax-spacing-2));
+    top: calc(100% + var(--ax-space-8));
     border: 1px solid var(--ax-border-subtleA);
     border-radius: var(--ax-border-radius-large);
     background-color: var(--ax-bg-raised);
@@ -1541,8 +1543,8 @@
     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);
-    margin-inline: var(--ax-spacing-2);
-    margin-block: var(--ax-spacing-1);
+    margin-inline: var(--ax-space-8);
+    margin-block: var(--ax-space-2);
     border: 0;
     justify-content: space-between;
     align-items: center;
@@ -1560,9 +1562,9 @@
   }
 
   .navds-combobox__list-item--max-selected {
-    background-color: var(--ax-bg-neutral-moderateA);
-    border-bottom: 1px solid var(--ax-border-neutral-subtle);
-    padding-block: var(--ax-spacing-2);
+    background-color: var(--ax-bg-moderateA);
+    border-bottom: 1px solid var(--ax-border-subtle);
+    padding-block: var(--ax-space-8);
     line-height: var(--ax-font-line-height-large);
     border-radius: 0;
     margin: 0;
@@ -1574,7 +1576,7 @@
     gap: inherit;
     background-color: inherit;
     padding: 0;
-    padding-block: var(--ax-spacing-1);
+    padding-block: var(--ax-space-4);
     align-items: stretch;
     margin: 0;
     list-style: none;
@@ -1583,7 +1585,6 @@
   .navds-combobox__list-item--focus {
     cursor: pointer;
     outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
   }
 
   .navds-combobox__list-item {
@@ -1598,11 +1599,12 @@
 
   .navds-combobox__list-item mark {
     font-weight: var(--ax-font-weight-bold);
+    color: var(--ax-text-default);
     background-color: rgba(0, 0, 0, 0);
   }
 
   .navds-combobox__list-item svg {
-    color: var(--ax-text-accent);
+    color: var(--ax-text-default);
   }
 
   .navds-combobox__list-item--selected {
@@ -1618,11 +1620,10 @@
     background: var(--ax-bg-accent-moderateA);
     cursor: pointer;
     margin: 0;
-    margin-block: calc(var(--ax-spacing-1) * -1);
-    padding-block: var(--ax-spacing-4);
     border-radius: 0;
     justify-content: flex-start;
     gap: .25rem;
+    margin-block-start: calc(var(--ax-space-4) * -1);
   }
 
   .navds-combobox__list-item--new-option svg {
@@ -1630,6 +1631,7 @@
   }
 
   .navds-combobox__list-item--new-option:only-child {
+    margin-block: calc(var(--ax-space-4) * -1);
     border: none;
   }
 
@@ -1654,7 +1656,7 @@
     }
 
     .navds-combobox__selected-options {
-      gap: var(--ax-spacing-1);
+      gap: var(--ax-space-4);
     }
   }
 
@@ -1724,29 +1726,29 @@
   }
 
   .navds-form-summary {
-    border: 1px solid var(--ax-border-neutral-subtleA);
+    border: 1px solid var(--ax-border-subtleA);
     border-radius: var(--ax-border-radius-xlarge);
     background: var(--ax-bg-raised);
     overflow: hidden;
   }
 
   .navds-form-summary__header {
-    background: var(--ax-bg-neutral-moderateA);
-    padding: var(--ax-spacing-4) var(--ax-spacing-6);
+    background: var(--ax-bg-moderateA);
+    padding: var(--ax-space-16) var(--ax-space-24);
     justify-content: space-between;
-    gap: 0 var(--ax-spacing-3);
+    gap: 0 var(--ax-space-12);
     display: flex;
   }
 
   @media (max-width: 479px) {
     .navds-form-summary__header {
-      padding: var(--ax-spacing-3) var(--ax-spacing-4);
+      padding: var(--ax-space-12) var(--ax-space-16);
       flex-direction: column;
     }
   }
 
   .navds-form-summary__edit {
-    margin-top: var(--ax-spacing-1);
+    margin-top: var(--ax-space-4);
     flex-shrink: 0;
     align-self: flex-start;
   }
@@ -1756,24 +1758,24 @@
   }
 
   .navds-form-summary__answers {
-    padding: var(--ax-spacing-4) var(--ax-spacing-5);
+    padding: var(--ax-space-16) var(--ax-space-20);
     margin: 0;
   }
 
   @media (max-width: 479px) {
     .navds-form-summary__answers {
-      padding: var(--ax-spacing-4);
+      padding: var(--ax-space-16);
     }
   }
 
   .navds-form-summary__answer:not(:last-child) {
-    margin-bottom: var(--ax-spacing-4);
-    padding-bottom: var(--ax-spacing-4);
+    margin-bottom: var(--ax-space-16);
+    padding-bottom: var(--ax-space-16);
     border-bottom: 1px solid var(--ax-border-subtleA);
   }
 
   .navds-form-summary__answer:has(.navds-form-summary__answer) {
-    padding-bottom: var(--ax-spacing-6);
+    padding-bottom: var(--ax-space-24);
   }
 
   .navds-form-summary__answer:has(.navds-form-summary__answer):last-child {
@@ -1782,22 +1784,22 @@
 
   @media (max-width: 479px) {
     .navds-form-summary__answer:not(:last-child) {
-      margin-bottom: var(--ax-spacing-3);
-      padding-bottom: var(--ax-spacing-3);
+      margin-bottom: var(--ax-space-12);
+      padding-bottom: var(--ax-space-12);
     }
 
     .navds-form-summary__answer:has(.navds-form-summary__answer) {
-      padding-bottom: var(--ax-spacing-5);
+      padding-bottom: var(--ax-space-20);
     }
   }
 
   .navds-form-summary__value:first-of-type {
-    margin-top: var(--ax-spacing-1);
+    margin-top: var(--ax-space-4);
   }
 
   .navds-form-summary__value .navds-form-summary__answers {
-    margin-top: var(--ax-spacing-2);
-    padding: var(--ax-spacing-4) var(--ax-spacing-5);
+    margin-top: var(--ax-space-8);
+    padding: var(--ax-space-16) var(--ax-space-20);
     background: var(--ax-bg-info-moderateA);
     border-radius: var(--ax-border-radius-large);
     border: 1px solid var(--ax-border-info-subtleA);
@@ -1808,7 +1810,7 @@
   }
 
   .navds-form-progress__bar {
-    margin-bottom: var(--ax-spacing-2);
+    margin-bottom: var(--ax-space-8);
   }
 
   .navds-form-progress__button:focus-visible {
@@ -1855,8 +1857,8 @@
   .navds-form-progress__stepper {
     border: 1px solid var(--ax-border-subtle);
     border-radius: var(--ax-border-radius-large);
-    padding: var(--ax-spacing-4) var(--ax-spacing-5);
-    margin-top: var(--ax-spacing-1);
+    padding: var(--ax-space-16) var(--ax-space-20);
+    margin-top: var(--ax-space-4);
     background: var(--ax-bg-raised);
   }
 }