@navikt/ds-css 7.10.0 → 7.12.0

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

@@ -11,7 +11,7 @@
   }
 
   .navds-fieldset__description {
-    color: var(--ax-text-subtle);
+    color: var(--ax-text-neutral-subtle);
   }
 
   .navds-fieldset > .navds-fieldset__description:not(:empty) {
@@ -52,10 +52,10 @@
     text-align: center;
     width: 100%;
     padding: var(--ax-space-16) var(--ax-space-20);
-    border: 1px dashed var(--ax-border-default);
+    border: 1px dashed var(--ax-border-neutral);
     border-radius: var(--ax-border-radius-xlarge);
     background-color: var(--__axc-dropzone-background);
-    color: var(--ax-text-default);
+    color: var(--ax-text-neutral);
     transition: background-color var(--__axc-dropzone-animation-length-short) var(--__axc-dropzone-animation-ease-out);
     cursor: pointer;
     flex-direction: column;
@@ -68,18 +68,19 @@
   }
 
   .navds-dropzone__area:hover:not([data-disabled="true"]) > .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);
   }
 
-  .navds-dropzone__area:active .navds-dropzone__area-button {
+  .navds-dropzone__area: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;
   }
 
   .navds-dropzone__area[data-disabled="true"] {
+    --__axc-dropzone-background: var(--ax-bg-neutral-soft);
+    border-color: var(--ax-border-neutral-subtleA);
     cursor: default;
   }
 
@@ -88,7 +89,7 @@
   }
 
   .navds-dropzone--dragging > .navds-dropzone__area:after {
-    color: var(--ax-text-accent-strong);
+    color: var(--ax-text-accent);
     background-color: var(--ax-bg-accent-moderateA);
     content: "";
     border: 1px dashed var(--ax-border-accent-strong);
@@ -142,7 +143,7 @@
   .navds-dropzone__area-release__icon {
     padding: var(--__axc-dropzone-icon-padding);
     border-radius: var(--ax-border-radius-full);
-    background-color: var(--ax-bg-moderateA);
+    background-color: var(--ax-bg-neutral-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;
@@ -163,13 +164,13 @@
   }
 
   .navds-dropzone--dragging .navds-dropzone__area-release {
-    color: var(--ax-text-accent-strong);
+    color: var(--ax-text-accent-subtle);
     top: 50%;
     transform: translateY(-50%);
   }
 
   .navds-dropzone__area-disabled {
-    color: var(--ax-text-subtle);
+    color: var(--ax-text-neutral-subtle);
     align-items: center;
     gap: var(--ax-space-8);
     flex-direction: column;
@@ -184,7 +185,7 @@
 
   .navds-file-item__inner {
     background-color: var(--ax-bg-raised);
-    border: 1px solid var(--ax-border-subtleA);
+    border: 1px solid var(--ax-border-neutral-subtleA);
     outline-offset: -1px;
     border-radius: var(--ax-border-radius-xlarge);
     padding: var(--ax-space-12) var(--ax-space-16);
@@ -199,8 +200,8 @@
   }
 
   .navds-file-item__icon {
-    background-color: var(--ax-bg-moderateA);
-    color: var(--ax-text-default);
+    background-color: var(--ax-bg-neutral-moderateA);
+    color: var(--ax-text-neutral);
     border-radius: var(--ax-border-radius-full);
     min-width: 2.5rem;
     min-height: 2.5rem;
@@ -228,7 +229,6 @@
   }
 
   .navds-file-item__error {
-    color: var(--ax-text-danger);
     grid-template-rows: 0fr;
     transition-property: grid-template-rows, padding-top;
     transition-duration: .25s;
@@ -237,23 +237,11 @@
     overflow: hidden;
   }
 
-  .navds-file-item__error .navds-file-item__error {
+  .navds-file-item--error .navds-file-item__error {
     padding-top: var(--ax-space-4);
     grid-template-rows: 1fr;
   }
 
-  .navds-file-item__error-content {
-    gap: var(--ax-space-4);
-    min-height: 0;
-    display: flex;
-  }
-
-  .navds-file-item__error-content > svg {
-    flex-shrink: 0;
-    height: 1rem;
-    margin-top: .1rem;
-  }
-
   .navds-form-field {
     justify-items: start;
     gap: var(--ax-space-8);
@@ -261,7 +249,7 @@
   }
 
   .navds-form-field__description {
-    color: var(--ax-text-subtle);
+    color: var(--ax-text-neutral-subtle);
     margin-top: -.375rem;
   }
 
@@ -275,7 +263,7 @@
   }
 
   .navds-form-field__subdescription {
-    color: var(--ax-text-subtle);
+    color: var(--ax-text-neutral-subtle);
   }
 
   .navds-form-field--readonly > :where(.navds-form-field__label) {
@@ -300,16 +288,16 @@
     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;
   }
 
   .navds-error-summary:focus-visible, .navds-error-summary: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);
     }
   }
 
@@ -419,8 +407,8 @@
     padding: var(--ax-space-12) 0;
     cursor: pointer;
     gap: var(--ax-space-8);
-    --__axc-radio-checkbox-readonly-bg: var(--ax-bg-moderate);
-    --__axc-radio-checkbox-readonly-border: var(--ax-border-subtle);
+    --__axc-radio-checkbox-readonly-bg: var(--ax-bg-neutral-moderate);
+    --__axc-radio-checkbox-readonly-border: var(--ax-border-neutral-subtle);
     display: flex;
   }
 
@@ -428,7 +416,7 @@
     content: "";
     border-radius: var(--ax-border-radius-medium);
     background-color: var(--ax-bg-input);
-    border: 2px solid var(--ax-border-default);
+    border: 2px solid var(--ax-border-neutral);
     flex-shrink: 0;
     width: 1.5rem;
     height: 1.5rem;
@@ -460,25 +448,40 @@
     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:focus + .navds-checkbox__label:after, .navds-radio__input:focus + .navds-radio__label:after {
+    content: "";
+    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;
+    position: absolute;
   }
 
-  .navds-checkbox__input:indeterminate + .navds-checkbox__label:after {
-    content: "";
-    transform: translate(var(--ax-space-6), -50%);
+  .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 {
     background-color: var(--ax-bg-default);
-    border-radius: 1px;
-    flex-shrink: 0;
     width: .75rem;
     height: .25rem;
+    transform: translate(var(--ax-space-6), -50%);
+    pointer-events: none;
+    border-radius: 1px;
+    display: block;
     position: absolute;
     top: 50%;
   }
 
-  .navds-checkbox--small .navds-checkbox__input:indeterminate + .navds-checkbox__label:after {
-    transform: translate(.25rem, -50%);
+  .navds-checkbox--small .navds-checkbox__input:indeterminate + .navds-checkbox__label > .navds-checkbox__icon-indeterminate {
+    transform: translate(var(--ax-space-4), -50%);
+    height: .1875rem;
   }
 
   .navds-checkbox__input:where(:checked, :indeterminate) + .navds-checkbox__label:before {
@@ -527,8 +530,8 @@
     border-width: 6px;
   }
 
-  .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label, .navds-radio__input:hover:not(:disabled) + .navds-radio__label {
-    color: var(--ax-text-accent);
+  .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label, .navds-radio__input:hover:not(:disabled, :checked) + .navds-radio__label {
+    color: var(--ax-text-accent-subtle);
   }
 
   .navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label:before, .navds-radio__input:hover:not(:disabled, :checked) + .navds-radio__label:before {
@@ -570,7 +573,7 @@
   }
 
   .navds-checkbox--readonly > .navds-checkbox__input:hover + .navds-checkbox__label, .navds-radio--readonly > .navds-radio__input:hover + .navds-radio__label {
-    color: var(--ax-text-default);
+    color: var(--ax-text-neutral);
   }
 
   .navds-checkbox--readonly > .navds-checkbox__input:not(:disabled) + .navds-checkbox__label:before, .navds-checkbox--readonly > .navds-checkbox__input:hover .navds-checkbox__label:before, .navds-radio--readonly > .navds-radio__input:not(:disabled, :checked) + .navds-radio__label:before, .navds-radio--readonly > .navds-radio__input:hover:not(:checked, :focus) + .navds-radio__label:before {
@@ -584,17 +587,17 @@
   }
 
   .navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
-    color: var(--ax-text-subtle);
+    color: var(--ax-text-neutral-subtle);
   }
 
   .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label:before {
-    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);
+    background-color: var(--ax-bg-neutral-strong);
+    box-shadow: inset 0 0 0 2px var(--ax-border-neutral-subtle), inset 0 0 0 8px var(--ax-bg-neutral-moderate);
     border-width: 0;
   }
 
-  .navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label:after {
-    background-color: var(--ax-text-subtle);
+  .navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label > .navds-checkbox__icon-indeterminate {
+    background-color: var(--ax-text-neutral-subtle);
   }
 
   @media (forced-colors: active) {
@@ -614,7 +617,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);
     }
 
@@ -631,7 +634,7 @@
       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);
     }
 
@@ -653,9 +656,9 @@
   .navds-select__input {
     appearance: none;
     background-color: var(--ax-bg-input);
-    border-radius: var(--ax-border-radius-medium);
-    border: 1px solid var(--ax-border-default);
-    color: var(--ax-text-default);
+    border-radius: var(--ax-border-radius-large);
+    border: 1px solid var(--ax-border-neutral);
+    color: var(--ax-text-neutral);
     box-sizing: border-box;
     width: 100%;
     min-height: 3rem;
@@ -671,8 +674,8 @@
   }
 
   .navds-select__input: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);
   }
 
@@ -686,7 +689,7 @@
 
   .navds-select__container {
     width: 100%;
-    color: var(--ax-text-default);
+    color: var(--ax-text-neutral);
     display: flex;
     position: relative;
   }
@@ -694,7 +697,7 @@
   .navds-select__chevron {
     right: var(--ax-space-8);
     pointer-events: none;
-    color: var(--ax-text-default);
+    color: var(--ax-text-neutral);
     align-self: center;
     font-size: 1.5rem;
     position: absolute;
@@ -718,15 +721,15 @@
 
   .navds-select__input:disabled {
     background-color: var(--ax-bg-input);
-    border: 1px solid var(--ax-border-default);
+    border: 1px solid var(--ax-border-neutral);
     box-shadow: none;
     cursor: not-allowed;
     opacity: 1;
-    color: var(--ax-text-default);
+    color: var(--ax-text-neutral);
   }
 
   .navds-select__input:disabled > option {
-    color: var(--ax-text-default);
+    color: var(--ax-text-neutral);
   }
 
   @media (forced-colors: active) {
@@ -736,8 +739,8 @@
   }
 
   .navds-select--readonly .navds-select__input {
-    background-color: var(--ax-bg-moderate);
-    border-color: var(--ax-border-subtleA);
+    background-color: var(--ax-bg-neutral-moderate);
+    border-color: var(--ax-border-neutral-subtleA);
     cursor: default;
   }
 
@@ -750,7 +753,7 @@
   }
 
   .navds-select--readonly .navds-select__chevron {
-    color: var(--ax-text-subtle);
+    color: var(--ax-text-neutral-subtle);
   }
 
   .navds-switch {
@@ -780,34 +783,48 @@
 
   .navds-switch__label-wrapper {
     cursor: pointer;
-    color: var(--ax-text-default);
+    color: var(--ax-text-neutral);
   }
 
   .navds-switch__content {
+    --__axc-switch-block-padding: .75rem;
+    gap: var(--ax-space-2);
+    padding: var(--__axc-switch-block-padding) 0 var(--__axc-switch-block-padding) 3.25rem;
     flex-direction: column;
-    gap: .125rem;
-    padding: .75rem 0 .75rem 3.25rem;
     display: flex;
+    position: relative;
   }
 
   .navds-switch--right .navds-switch__content {
-    padding: .75rem 3.25rem .75rem 0;
+    padding: var(--__axc-switch-block-padding) 3.25rem var(--__axc-switch-block-padding) 0;
   }
 
   .navds-switch--small .navds-switch__content {
-    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: .375rem;
   }
 
-  .navds-switch--right.navds-switch--small .navds-switch__content {
-    padding: calc(var(--ax-space-8)  - var(--ax-space-2)) 3.25rem calc(var(--ax-space-8)  - var(--ax-space-2)) 0;
+  .navds-switch__content.navds-switch--with-description {
+    padding-bottom: 0;
   }
 
-  .navds-switch--with-description {
-    padding-bottom: 0;
+  .navds-switch__input:focus ~ .navds-switch__label-wrapper > .navds-switch__content:after {
+    content: "";
+    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;
+    position: absolute;
+    left: 0;
+  }
+
+  .navds-switch__input:focus ~ .navds-switch__label-wrapper > .navds-switch__content.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);
+    color: var(--ax-text-accent-subtle);
   }
 
   .navds-switch__input:disabled:hover ~ .navds-switch__label-wrapper {
@@ -820,7 +837,7 @@
     height: 1.5rem;
     top: var(--ax-space-12);
     border-radius: var(--ax-border-radius-full);
-    border: 2px solid var(--ax-border-default);
+    border: 2px solid var(--ax-border-neutral);
     transition-property: background-color, border-color;
     transition-duration: .1s;
     transition-timing-function: cubic-bezier(.4, 0, .2, 1);
@@ -844,7 +861,7 @@
 
   .navds-switch__input:disabled ~ .navds-switch__track {
     background-color: var(--ax-bg-input);
-    border-color: var(--ax-border-default);
+    border-color: var(--ax-border-neutral);
   }
 
   .navds-switch__input:checked:disabled ~ .navds-switch__track {
@@ -852,13 +869,13 @@
     border-color: var(--ax-bg-accent-strong-pressed);
   }
 
-  .navds-switch__input:focus-visible ~ .navds-switch__track {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
+  .navds-switch--standalone > .navds-switch__input:focus ~ .navds-switch__track {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
   }
 
   .navds-switch__thumb {
-    background-color: var(--ax-bg-strong);
+    background-color: var(--ax-bg-neutral-strong);
     border-radius: var(--ax-border-radius-full);
     justify-content: center;
     align-items: center;
@@ -874,7 +891,7 @@
 
   .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
     background-color: var(--ax-bg-raised);
-    color: var(--ax-text-accent);
+    color: var(--ax-text-accent-subtle);
     width: 1.25rem;
     height: 1.25rem;
     top: 0;
@@ -925,8 +942,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-moderate);
-    border-color: var(--ax-border-subtleA);
+    background-color: var(--ax-bg-neutral-moderate);
+    border-color: var(--ax-border-neutral-subtleA);
   }
 
   .navds-switch--readonly > .navds-switch__label-wrapper, .navds-switch--readonly > .navds-switch__input {
@@ -934,7 +951,7 @@
   }
 
   .navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__label-wrapper, .navds-switch--readonly .navds-switch__label-wrapper:hover {
-    color: var(--ax-text-default);
+    color: var(--ax-text-neutral);
   }
 
   .navds-switch--readonly .navds-switch__label {
@@ -942,12 +959,12 @@
   }
 
   .navds-switch--readonly .navds-switch__thumb {
-    background-color: var(--ax-bg-strong);
+    background-color: var(--ax-bg-neutral-strong);
   }
 
   .navds-switch--readonly > .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
-    background-color: var(--ax-bg-strong);
-    color: var(--ax-text-contrast);
+    background-color: var(--ax-bg-neutral-strong);
+    color: var(--ax-text-neutral-contrast);
   }
 
   @media (hover: hover) and (pointer: fine) {
@@ -973,9 +990,8 @@
       color: field;
     }
 
-    .navds-switch__input:focus-visible ~ .navds-switch__track {
-      outline-offset: 2px;
-      outline: 2px solid highlight;
+    .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) {
@@ -983,7 +999,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 {
@@ -999,11 +1015,11 @@
     appearance: none;
     padding: var(--ax-space-8);
     background: var(--ax-bg-input);
-    border-radius: var(--ax-border-radius-medium);
-    border: 1px solid var(--ax-border-default);
+    border-radius: var(--ax-border-radius-large);
+    border: 1px solid var(--ax-border-neutral);
     width: 100%;
     min-height: 3rem;
-    color: var(--ax-text-default);
+    color: var(--ax-text-neutral);
   }
 
   .navds-text-field__input:hover {
@@ -1012,18 +1028,18 @@
 
   .navds-text-field__input: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;
   }
 
   .navds-text-field__input:disabled {
     background-color: var(--ax-bg-input);
-    border-color: var(--ax-border-default);
+    border-color: var(--ax-border-neutral);
     cursor: not-allowed;
   }
 
   .navds-text-field__input::placeholder {
-    color: var(--ax-text-subtle);
+    color: var(--ax-text-neutral-subtle);
   }
 
   .navds-text-field__input[size] {
@@ -1041,8 +1057,8 @@
   }
 
   .navds-text-field--readonly .navds-text-field__input {
-    background-color: var(--ax-bg-moderate);
-    border-color: var(--ax-border-subtleA);
+    background-color: var(--ax-bg-neutral-moderate);
+    border-color: var(--ax-border-neutral-subtleA);
     cursor: default;
   }
 
@@ -1074,16 +1090,16 @@
     appearance: none;
     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);
+    border-radius: var(--ax-border-radius-large);
+    border: 1px solid var(--ax-border-neutral);
     resize: none;
     width: 100%;
-    color: var(--ax-text-default);
+    color: var(--ax-text-neutral);
     display: block;
   }
 
   .navds-textarea__input::placeholder {
-    color: var(--ax-text-subtle);
+    color: var(--ax-text-neutral-subtle);
   }
 
   .navds-textarea__input:hover {
@@ -1091,14 +1107,14 @@
   }
 
   .navds-textarea__input: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);
   }
 
   .navds-textarea__input:disabled {
     background-color: var(--ax-bg-input);
-    border-color: var(--ax-border-default);
+    border-color: var(--ax-border-neutral);
     cursor: not-allowed;
   }
 
@@ -1107,18 +1123,18 @@
   }
 
   .navds-textarea--readonly .navds-textarea__input {
-    background-color: var(--ax-bg-moderate);
-    border-color: var(--ax-border-subtleA);
+    background-color: var(--ax-bg-neutral-moderate);
+    border-color: var(--ax-border-neutral-subtleA);
     cursor: default;
   }
 
   .navds-textarea__counter {
-    color: var(--ax-text-subtle);
+    color: var(--ax-text-neutral-subtle);
     margin-top: -.25rem;
   }
 
   .navds-textarea__counter--error {
-    color: var(--ax-text-danger);
+    color: var(--ax-text-danger-subtle);
   }
 
   .navds-textarea__sr-counter {
@@ -1188,14 +1204,14 @@
   }
 
   .navds-search__wrapper {
-    border-radius: var(--ax-border-radius-medium);
+    border-radius: var(--ax-border-radius-large);
     align-items: center;
     display: inline-flex;
   }
 
   .navds-search__wrapper: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;
   }
 
   .navds-search__input {
@@ -1255,14 +1271,14 @@
 
   .navds-search__button-search {
     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);
     flex-shrink: 0;
   }
 
   .navds-search__button-search.navds-button--secondary {
     --__axc-button-border-width: 1px;
-    --__axc-button-border-color: var(--ax-border-default);
+    --__axc-button-border-color: var(--ax-border-neutral);
   }
 
   .navds-search__button-search.navds-button--secondary:not(:hover, :active) {
@@ -1273,10 +1289,6 @@
     --__axc-button-border-color: var(--ax-border-accent-strong);
   }
 
-  .navds-search__button-search.navds-button--secondary:active:not(:disabled) {
-    --__axc-button-border-color: transparent;
-  }
-
   .navds-search:not(.navds-search--error, .navds-search--disabled) .navds-search__wrapper:has(.navds-search__input:is(:hover, :focus-visible)) .navds-search__button-search.navds-button--secondary:not(:hover, :active) {
     --__axc-button-border-color: var(--ax-border-accent-strong);
   }
@@ -1306,7 +1318,7 @@
     --__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);
+    border-radius: var(--ax-border-radius-large);
     flex-direction: column;
     width: 100%;
     display: flex;
@@ -1330,7 +1342,7 @@
   }
 
   .navds-combobox--disabled .navds-combobox__wrapper:hover {
-    border-color: var(--ax-border-default);
+    border-color: var(--ax-border-neutral);
   }
 
   .navds-combobox--disabled .navds-combobox__wrapper :hover {
@@ -1346,20 +1358,20 @@
   }
 
   .navds-combobox--readonly .navds-combobox__selected-options .navds-chips__chip {
-    background-color: var(--ax-bg-moderateA);
+    background-color: var(--ax-bg-neutral-moderateA);
   }
 
   .navds-combobox--readonly .navds-combobox__button-toggle-list {
-    color: var(--ax-bg-moderate);
+    color: var(--ax-bg-neutral-moderate);
   }
 
   .navds-combobox--readonly .navds-combobox__wrapper {
-    border-color: var(--ax-border-subtle);
+    border-color: var(--ax-border-neutral-subtle);
     overflow: clip;
   }
 
   .navds-combobox--readonly .navds-text-field__input, .navds-combobox--readonly .navds-combobox__input {
-    background-color: var(--ax-bg-moderate);
+    background-color: var(--ax-bg-neutral-moderate);
   }
 
   .navds-combobox__button-toggle-list svg, .navds-combobox__list svg {
@@ -1368,8 +1380,8 @@
   }
 
   .navds-combobox__wrapper-inner {
-    border: 1px solid var(--ax-border-default);
-    border-radius: var(--ax-border-radius-medium);
+    border: 1px solid var(--ax-border-neutral);
+    border-radius: var(--ax-border-radius-large);
   }
 
   .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
@@ -1379,7 +1391,7 @@
   }
 
   .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible).navds-combobox__wrapper-inner--virtually-unfocused {
-    border-color: var(--ax-border-default);
+    border-color: var(--ax-border-neutral);
     outline: none;
   }
 
@@ -1408,7 +1420,7 @@
   }
 
   .navds-combobox--disabled .navds-combobox__wrapper-inner:hover {
-    border-color: var(--ax-border-default);
+    border-color: var(--ax-border-neutral);
   }
 
   .navds-combobox--error .navds-combobox__wrapper-inner {
@@ -1493,8 +1505,7 @@
   }
 
   .navds-combobox__button-toggle-list {
-    border-radius: var(--ax-border-radius-medium);
-    color: var(--ax-text-default);
+    color: var(--ax-text-neutral);
     cursor: pointer;
     background: none;
     border: none;
@@ -1506,11 +1517,11 @@
   }
 
   .navds-combobox__button-toggle-list:hover {
-    color: var(--ax-text-accent);
+    color: var(--ax-text-accent-subtle);
   }
 
   .navds-combobox__button-toggle-list:hover:active {
-    color: var(--ax-text-accent-strong);
+    color: var(--ax-text-accent);
   }
 
   .navds-combobox__list {
@@ -1519,10 +1530,10 @@
     left: 0;
     right: 0;
     top: calc(100% + var(--ax-space-8));
-    border: 1px solid var(--ax-border-subtleA);
+    border: 1px solid var(--ax-border-neutral-subtleA);
     border-radius: var(--ax-border-radius-large);
     background-color: var(--ax-bg-raised);
-    color: var(--ax-text-default);
+    color: var(--ax-text-neutral);
     overscroll-behavior: contain;
     box-shadow: var(--ax-shadow-dialog);
     flex-direction: column;
@@ -1542,7 +1553,7 @@
   .navds-combobox__list-item, .navds-combobox__list-item--loading, .navds-combobox__list-item--no-options, .navds-combobox__list-item--new-option, .navds-combobox__list-item--max-selected {
     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);
     margin-inline: var(--ax-space-8);
     margin-block: var(--ax-space-2);
     border: 0;
@@ -1562,8 +1573,8 @@
   }
 
   .navds-combobox__list-item--max-selected {
-    background-color: var(--ax-bg-moderateA);
-    border-bottom: 1px solid var(--ax-border-subtle);
+    background-color: var(--ax-bg-neutral-moderateA);
+    border-bottom: 1px solid var(--ax-border-neutral-subtle);
     padding-block: var(--ax-space-8);
     line-height: var(--ax-font-line-height-large);
     border-radius: 0;
@@ -1599,12 +1610,12 @@
 
   .navds-combobox__list-item mark {
     font-weight: var(--ax-font-weight-bold);
-    color: var(--ax-text-default);
+    color: var(--ax-text-neutral);
     background-color: rgba(0, 0, 0, 0);
   }
 
   .navds-combobox__list-item svg {
-    color: var(--ax-text-default);
+    color: var(--ax-text-neutral);
   }
 
   .navds-combobox__list-item--selected {
@@ -1627,7 +1638,7 @@
   }
 
   .navds-combobox__list-item--new-option svg {
-    color: var(--ax-text-default);
+    color: var(--ax-text-neutral);
   }
 
   .navds-combobox__list-item--new-option:only-child {
@@ -1726,15 +1737,15 @@
   }
 
   .navds-form-summary {
-    border: 1px solid var(--ax-border-subtleA);
+    border: 1px solid var(--ax-border-neutral-subtleA);
     border-radius: var(--ax-border-radius-xlarge);
     background: var(--ax-bg-raised);
     overflow: hidden;
   }
 
   .navds-form-summary__header {
-    background: var(--ax-bg-moderateA);
-    padding: var(--ax-space-16) var(--ax-space-24);
+    background: var(--ax-bg-neutral-moderateA);
+    padding: var(--ax-space-20) var(--ax-space-20) var(--ax-space-16) var(--ax-space-20);
     justify-content: space-between;
     gap: 0 var(--ax-space-12);
     display: flex;
@@ -1742,7 +1753,7 @@
 
   @media (max-width: 479px) {
     .navds-form-summary__header {
-      padding: var(--ax-space-12) var(--ax-space-16);
+      padding: var(--ax-space-16) var(--ax-space-16) var(--ax-space-12) var(--ax-space-16);
       flex-direction: column;
     }
   }
@@ -1754,24 +1765,24 @@
   }
 
   .navds-form-summary > .navds-form-summary__answers {
-    border-top: 1px solid var(--ax-border-subtleA);
+    border-top: 1px solid var(--ax-border-neutral-subtleA);
   }
 
   .navds-form-summary__answers {
-    padding: var(--ax-space-16) var(--ax-space-20);
+    padding: var(--ax-space-16) var(--ax-space-20) var(--ax-space-20) var(--ax-space-20);
     margin: 0;
   }
 
   @media (max-width: 479px) {
     .navds-form-summary__answers {
-      padding: var(--ax-space-16);
+      padding: var(--ax-space-12) var(--ax-space-16) var(--ax-space-16) var(--ax-space-16);
     }
   }
 
   .navds-form-summary__answer:not(:last-child) {
     margin-bottom: var(--ax-space-16);
     padding-bottom: var(--ax-space-16);
-    border-bottom: 1px solid var(--ax-border-subtleA);
+    border-bottom: 1px solid var(--ax-border-neutral-subtleA);
   }
 
   .navds-form-summary__answer:has(.navds-form-summary__answer) {
@@ -1826,39 +1837,35 @@
   }
 
   .navds-form-progress__collapsible {
+    visibility: hidden;
+    border: 1px solid var(--ax-border-neutral-subtleA);
+    border-radius: var(--ax-border-radius-xlarge);
+    background: var(--ax-bg-raised);
+    padding-inline: var(--ax-space-20);
+    opacity: .001;
     grid-template-rows: 0fr;
-    transition: grid-template-rows .25s cubic-bezier(.2, 0, 0, 1);
+    margin-top: -2px;
+    padding-block: 0;
+    transition-property: margin-top, opacity, visibility, padding-block-start, grid-template-rows;
+    transition-duration: 1s;
+    transition-timing-function: cubic-bezier(.2, 0, 0, 1);
     display: grid;
     overflow: hidden;
   }
 
   .navds-form-progress__collapsible[hidden] {
-    display: grid !important;
+    display: grid;
   }
 
   .navds-form-progress__collapsible[data-state="open"] {
+    margin-top: var(--ax-space-4);
+    visibility: visible;
+    padding-block: var(--ax-space-16);
+    opacity: 1;
     grid-template-rows: 1fr;
   }
 
   .navds-form-progress__collapsible-content {
-    opacity: .01;
-    visibility: hidden;
     min-height: 0;
-    transition-property: opacity, visibility;
-    transition-duration: .25s;
-    transition-timing-function: cubic-bezier(.2, 0, 0, 1);
-  }
-
-  .navds-form-progress__collapsible[data-state="open"] .navds-form-progress__collapsible-content {
-    visibility: visible;
-    opacity: 1;
-  }
-
-  .navds-form-progress__stepper {
-    border: 1px solid var(--ax-border-subtle);
-    border-radius: var(--ax-border-radius-large);
-    padding: var(--ax-space-16) var(--ax-space-20);
-    margin-top: var(--ax-space-4);
-    background: var(--ax-bg-raised);
   }
 }