@navikt/ds-css 7.39.1 → 8.0.0

package/dist/component/form.css

@@ -1,1984 +1,1889 @@
-/*
-  Order matters; rearrange with care
-*/
-[data-theme="dark"] {
-  --__ac-form-description: var(--a-text-on-inverted);
-  --__ac-form-description: var(--a-text-on-inverted);
-  --__ac-textfield-text: var(--a-text-on-inverted);
-  --__ac-textfield-bg: var(--a-surface-inverted);
-  --__ac-textfield-border: var(--a-border-on-inverted);
-  --__ac-textfield-hover-border: var(--a-blue-200);
-  --__ac-textfield-placeholder: var(--a-gray-500);
-  --__ac-textfield-error-border: var(--a-red-300);
-  --__ac-textarea-text: var(--a-text-on-inverted);
-  --__ac-textarea-bg: var(--a-transparent);
-  --__ac-textarea-border: var(--a-border-on-inverted);
-  --__ac-textarea-hover-border: var(--a-blue-200);
-  --__ac-textarea-placeholder: var(--a-gray-500);
-  --__ac-textarea-error-border: var(--a-red-300);
-  --__ac-textarea-counter-text: var(--a-gray-300);
-  --__ac-textarea-counter-error-text: var(--a-red-300);
-  --__ac-search-button-border: var(--a-border-on-inverted);
-  --__ac-search-button-border-hover: var(--a-blue-200);
-  --__ac-search-clear-icon: var(--a-white);
-  --__ac-search-clear-icon-hover: var(--a-blue-200);
-  --__ac-search-error-border: var(--a-red-300);
-}
-[data-theme="light"] {
-  --__ac-form-description: initial;
-  --__ac-form-description: initial;
-  --__ac-textfield-text: initial;
-  --__ac-textfield-bg: initial;
-  --__ac-textfield-border: initial;
-  --__ac-textfield-hover-border: initial;
-  --__ac-textfield-placeholder: initial;
-  --__ac-textfield-error-border: initial;
-  --__ac-textarea-text: initial;
-  --__ac-textarea-bg: initial;
-  --__ac-textarea-border: initial;
-  --__ac-textarea-hover-border: initial;
-  --__ac-textarea-placeholder: initial;
-  --__ac-textarea-error-border: initial;
-  --__ac-textarea-counter-text: initial;
-  --__ac-textarea-counter-error-text: initial;
-  --__ac-search-button-border: initial;
-  --__ac-search-button-border-hover: initial;
-  --__ac-search-clear-icon: initial;
-  --__ac-search-clear-icon-hover: initial;
-  --__ac-search-error-border: initial;
-}
-.navds-fieldset {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  min-width: 0;
-}
-.navds-fieldset > :not(:first-child, :empty) {
-  margin-top: var(--a-spacing-2);
-}
-.navds-fieldset__description {
-  color: var(--ac-form-description, var(--__ac-form-description, var(--a-text-subtle)));
-}
-.navds-fieldset > .navds-fieldset__description:not(:empty) {
-  margin-top: 0.125rem;
-}
-/* Applied when hideLegend is applied to fieldset */
-.navds-fieldset > .navds-sr-only + :not(:first-child, :empty) {
-  margin-top: 0;
-}
-.navds-fieldset__legend {
-  padding: 0;
-}
-.navds-fieldset--readonly > :where(.navds-fieldset__legend) {
-  display: inline-flex;
-}
-.navds-fieldset:disabled > .navds-fieldset__legend,
-.navds-fieldset:disabled > .navds-fieldset__description {
-  opacity: 0.3;
-}
-@media (forced-colors: active) {
-  .navds-fieldset:disabled > .navds-fieldset__legend,
-  .navds-fieldset:disabled > .navds-fieldset__description {
-    opacity: 1;
+@layer aksel.reset, aksel.theming, aksel.baseline, aksel.print, aksel.typography, aksel.components.core, aksel.components.core.loader, aksel.components.core.button;
+
+@layer aksel.components.form {
+  .aksel-fieldset {
+    border: 0;
+    min-width: 0;
+    margin: 0;
+    padding: 0;
   }
-}
-/**
- * FileUpload.Dropzone
- */
-.navds-dropzone__area {
-  --__ac-dropzone-background: var(--a-surface-subtle);
-  --__ac-dropzone-text-color: var(--a-text-default);
-  --__ac-dropzone-padding: var(--a-spacing-6);
-  --__ac-dropzone-icon-padding: var(--a-spacing-2);
-  --__ac-dropzone-animation-length-long: 0.6s;
-  --__ac-dropzone-animation-length-short: 250ms;
-  --__ac-dropzone-animation-ease-out: cubic-bezier(0.3, 1, 0.3, 1);
-  --__ac-dropzone-animation-over-under: cubic-bezier(0.3, 1.4, 0.3, 1);
-
-  position: relative;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  gap: var(--a-spacing-4);
-  text-align: center;
-  padding: var(--__ac-dropzone-padding);
-  outline: 1px dashed var(--a-border-subtle);
-  outline-offset: -1px;
-  border-radius: var(--a-border-radius-large);
-  background-color: var(--__ac-dropzone-background);
-  color: var(--__ac-dropzone-text-color);
-  transition: background-color var(--__ac-dropzone-animation-length-short) var(--__ac-dropzone-animation-ease-out);
-  cursor: pointer;
-}
-.navds-dropzone__area:hover {
-  box-shadow: inset 0 2px 4px 1px rgb(11 11 11/ 0.05);
-  outline-color: var(--a-border-default);
-}
-.navds-dropzone--disabled > .navds-dropzone__area:hover {
-  outline-color: var(--a-border-subtle);
-  box-shadow: initial;
-  cursor: default;
-}
-.navds-dropzone--dragging > .navds-dropzone__area {
-  --__ac-dropzone-background: var(--a-surface-action-subtle-hover);
-}
-.navds-dropzone--dragging > .navds-dropzone__area::after {
-  outline: 1px dashed var(--a-border-subtle);
-  outline-offset: -1px;
-  color: var(--a-text-action-selected);
-  background-color: var(--a-surface-hover);
-  content: "";
-  inset: 0;
-  position: absolute;
-  -webkit-backdrop-filter: blur(8px);
-  backdrop-filter: blur(8px);
-  box-shadow: inset 0 2px 7px 3px rgb(11 11 11/ 0.1);
-  border-radius: var(--a-border-radius-large);
-  animation: akselDropzoneDragoverAnimation var(--__ac-dropzone-animation-length-short) var(--__ac-dropzone-animation-ease-out);
-}
-@keyframes akselDropzoneDragoverAnimation {
-  0% {
-    -webkit-backdrop-filter: blur(0);
-    backdrop-filter: blur(0);
-    background-color: var(--a-surface-transparent);
+
+  .aksel-fieldset > :not(:first-child, :empty) {
+    margin-top: var(--ax-space-8);
+  }
+
+  .aksel-fieldset__description {
+    color: var(--ax-text-neutral-subtle);
+  }
+
+  .aksel-fieldset > .aksel-fieldset__description:not(:empty) {
+    margin-top: .125rem;
+  }
+
+  .aksel-fieldset > .aksel-sr-only + :not(:first-child, :empty) {
+    margin-top: 0;
+  }
+
+  .aksel-fieldset__legend {
+    padding: 0;
+  }
+
+  .aksel-fieldset--readonly > :where(.aksel-fieldset__legend) {
+    display: inline-flex;
+  }
+
+  .aksel-fieldset:disabled > .aksel-fieldset__legend, .aksel-fieldset:disabled > .aksel-fieldset__description {
+    opacity: var(--ax-opacity-disabled);
+  }
+
+  @media (forced-colors: active) {
+    .aksel-fieldset:disabled > .aksel-fieldset__legend, .aksel-fieldset:disabled > .aksel-fieldset__description {
+      opacity: 1;
+    }
+  }
+
+  .aksel-dropzone__area {
+    --__axc-dropzone-background: var(--ax-bg-input);
+    --__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-space-16);
+    text-align: center;
+    width: 100%;
+    padding: var(--ax-space-16) var(--ax-space-20);
+    border: 1px dashed var(--ax-border-neutral);
+    border-radius: var(--ax-radius-12);
+    background-color: var(--__axc-dropzone-background);
+    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;
+    display: flex;
+    position: relative;
+  }
+
+  .aksel-dropzone__area:hover:not([data-disabled="true"]) {
+    border-color: var(--ax-border-strong);
+  }
+
+  .aksel-dropzone__area:hover:not([data-disabled="true"]) > .aksel-dropzone__area-button {
+    background-color: var(--ax-bg-moderate-hover);
+    box-shadow: inset 0 0 0 2px var(--ax-bg-strong-hover);
   }
 
-  70% {
+  .aksel-dropzone__area:active:not([data-disabled="true"]) > .aksel-dropzone__area-button {
+    background-color: var(--ax-bg-strong-pressed);
+    color: var(--ax-text-contrast);
+    box-shadow: none;
+  }
+
+  .aksel-dropzone__area[data-disabled="true"] {
+    --__axc-dropzone-background: var(--ax-bg-neutral-soft);
+    border-color: var(--ax-border-neutral-subtleA);
+    cursor: default;
+  }
+
+  .aksel-dropzone--dragging > .aksel-dropzone__area {
+    --__axc-dropzone-background: var(--ax-bg-input);
+  }
+
+  .aksel-dropzone--dragging > .aksel-dropzone__area:after {
+    color: var(--ax-text-default);
+    background-color: var(--ax-bg-moderateA);
+    content: "";
+    border: 1px dashed var(--ax-border-strong);
     -webkit-backdrop-filter: blur(8px);
     backdrop-filter: blur(8px);
+    border-radius: var(--ax-radius-12);
+    animation: akselDropzoneDragoverAnimation var(--__axc-dropzone-animation-length-short) var(--__axc-dropzone-animation-ease-out);
+    margin: -1px;
+    position: absolute;
+    inset: 0;
   }
 
-  100% {
-    background-color: var(--a-surface-hover);
+  @keyframes akselDropzoneDragoverAnimation {
+    0% {
+      -webkit-backdrop-filter: blur();
+      backdrop-filter: blur();
+      background-color: rgba(0, 0, 0, 0);
+    }
+
+    70% {
+      -webkit-backdrop-filter: blur(8px);
+      backdrop-filter: blur(8px);
+    }
+
+    100% {
+      background-color: var(--ax-bg-moderateA);
+    }
   }
-}
-.navds-dropzone__area-icon {
-  display: grid;
-  padding: var(--__ac-dropzone-icon-padding);
-  visibility: hidden;
-}
-.navds-dropzone--error:where(:not(.navds-dropzone--dragging)) > .navds-dropzone__area {
-  outline-color: var(--a-surface-danger);
-  outline-width: 2px;
-}
-.navds-dropzone__area:hover > .navds-dropzone__area-button {
-  color: var(--ac-button-secondary-hover-text, var(--__ac-button-secondary-hover-text, var(--a-text-action-on-action-subtle)));
-  background-color: var(
-    --ac-button-secondary-hover-bg,
-    var(--__ac-button-secondary-hover-bg, var(--a-surface-action-subtle-hover))
-  );
-}
-.navds-dropzone__area:active .navds-dropzone__area-button {
-  color: var(--ac-button-secondary-active-text, var(--__ac-button-secondary-active-text, var(--a-text-on-action)));
-  background-color: var(--ac-button-secondary-active-bg, var(--__ac-button-secondary-active-bg, var(--a-surface-action-active)));
-  box-shadow: none;
-}
-.navds-dropzone__area-release {
-  top: var(--__ac-dropzone-padding);
-  display: grid;
-  position: absolute;
-  z-index: 1;
-  pointer-events: none;
-  transition:
-    top var(--__ac-dropzone-animation-length-long) var(--__ac-dropzone-animation-over-under),
-    transform var(--__ac-dropzone-animation-length-long) var(--__ac-dropzone-animation-over-under);
-}
-.navds-dropzone__area-release__icon {
-  display: grid;
-  padding: var(--__ac-dropzone-icon-padding);
-  border-radius: var(--a-border-radius-full);
-  background-color: var(--a-surface-neutral-subtle);
-  transition:
-    background-color 300ms var(--__ac-dropzone-animation-ease-out),
-    font-size 300ms var(--__ac-dropzone-animation-ease-out);
-  font-size: 1.5rem;
-}
-.navds-dropzone--dragging .navds-dropzone__area-release > .navds-dropzone__area-release__icon {
-  background-color: transparent;
-  font-size: 2rem;
-}
-.navds-dropzone__area-release__text {
-  visibility: hidden;
-}
-.navds-dropzone--dragging .navds-dropzone__area-release > .navds-dropzone__area-release__text {
-  transition: visibility var(--__ac-dropzone-animation-length-long) var(--__ac-dropzone-animation-over-under);
-  visibility: visible;
-}
-.navds-dropzone--dragging .navds-dropzone__area-release {
-  color: var(--a-text-action-selected);
-  top: 50%;
-  transform: translateY(-50%);
-}
-.navds-dropzone__area-disabled {
-  color: var(--a-text-subtle);
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  gap: var(--a-spacing-2);
-}
-/**
- * FileUpload.Item
- */
-.navds-file-upload :is(ul, li),
-ul:has(> li.navds-file-item),
-li.navds-file-item {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-.navds-file-item__inner {
-  outline: 1px solid var(--a-border-subtle);
-  outline-offset: -1px;
-  transition: outline-color 250ms cubic-bezier(0, 0.3, 0.15, 1);
-  border-radius: var(--a-border-radius-large);
-  padding: var(--a-spacing-3);
-  display: flex;
-  gap: var(--a-spacing-3);
-  align-items: flex-start;
-}
-.navds-file-item--error > .navds-file-item__inner {
-  outline: 2px solid var(--a-surface-danger);
-}
-.navds-file-item__icon {
-  background-color: var(--a-surface-neutral-subtle);
-  color: var(--a-icon-default);
-  border-radius: var(--a-border-radius-full);
-  min-height: 3rem;
-  min-width: 3rem;
-  display: grid;
-  place-content: center;
-  transition: background-color 250ms cubic-bezier(0, 0.3, 0.15, 1);
-}
-.navds-file-item__icon--loading {
-  background-color: transparent;
-}
-.navds-file-item__file-info {
-  overflow-wrap: anywhere;
-}
-.navds-file-item__error {
-  color: var(--a-text-danger);
-  display: grid;
-  transition-property: grid-template-rows, padding-top;
-  transition-duration: 250ms;
-  transition-timing-function: cubic-bezier(0, 0.3, 0.15, 1);
-  overflow: hidden;
-  grid-template-rows: 0fr;
-}
-.navds-file-item--error .navds-file-item__error {
-  grid-template-rows: 1fr;
-  padding-top: var(--a-spacing-1);
-}
-.navds-file-item__error-content > svg {
-  flex-shrink: 0;
-  height: 1rem;
-  margin-top: 0.1rem;
-}
-.navds-file-item__error-content {
-  min-height: 0;
-  display: flex;
-  gap: var(--a-spacing-1);
-}
-.navds-form-field {
-  display: grid;
-  justify-items: start;
-  gap: var(--a-spacing-2);
-}
-.navds-form-field__description {
-  margin-top: -0.375rem;
-  color: var(--ac-form-description, var(--__ac-form-description, var(--a-text-subtle)));
-}
-.navds-form-field__description:empty {
-  display: none;
-}
-.navds-form-field--disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-}
-.navds-form-field__error:empty {
-  display: none;
-}
-.navds-form-field__subdescription {
-  color: var(--ac-form-subdescription, var(--a-text-subtle));
-}
-.navds-form-field--readonly > :where(.navds-form-field__label) {
-  display: inline-flex;
-}
-.navds-form-field__readonly-icon {
-  margin-top: var(--a-spacing-05);
-  margin-right: var(--a-spacing-2);
-  flex-shrink: 0;
-  align-self: flex-start;
-}
-@media (forced-colors: active) {
-  .navds-form-field--disabled {
-    opacity: 1;
+
+  .aksel-dropzone__area-icon {
+    padding: var(--__axc-dropzone-icon-padding);
+    visibility: hidden;
+    display: grid;
   }
-}
-.navds-error-summary {
-  background-color: var(--ac-error-summary-bg, var(--a-surface-default));
-  padding: var(--a-spacing-5);
-  border: 4px solid var(--ac-error-summary-border, var(--a-border-danger));
-  border-radius: var(--a-border-radius-large);
-}
-.navds-error-summary--small {
-  padding: var(--a-spacing-3);
-}
-.navds-error-summary__heading {
-  scroll-margin-top: var(--a-spacing-6);
-}
-.navds-error-summary--small .navds-error-summary__heading {
-  scroll-margin-top: var(--a-spacing-4);
-}
-.navds-error-summary__heading:focus {
-  outline: none;
-}
-.navds-error-summary:focus-visible,
-.navds-error-summary:has(.navds-error-summary__heading:focus-visible) {
-  box-shadow:
-    0 0 0 1px var(--a-border-on-inverted),
-    0 0 0 4px var(--a-border-focus);
-}
-@supports not selector(:focus-visible) {
-  .navds-error-summary:focus {
-    box-shadow: var(--a-shadow-focus);
-    outline: none;
+
+  .aksel-dropzone--error > .aksel-dropzone__area {
+    outline: 2px solid var(--ax-border-danger-strong);
+    outline-offset: -1px;
+    border-color: rgba(0, 0, 0, 0);
   }
-}
-.navds-error-summary__list {
-  margin: var(--a-spacing-3) 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--a-spacing-3);
-  padding-left: var(--a-spacing-6);
-  list-style: inherit;
-}
-.navds-error-summary__list > * {
-  color: var(--ac-error-summary-list-dot, var(--a-text-action));
-}
-.navds-error-summary--small > .navds-error-summary__list {
-  margin: var(--a-spacing-2) 0;
-  gap: var(--a-spacing-2);
-  padding-left: var(--a-spacing-5);
-}
-.navds-confirmation-panel__inner {
-  display: flex;
-  flex-direction: column;
-  gap: var(--a-spacing-3);
-  padding: var(--a-spacing-4);
-  border-radius: var(--a-border-radius-medium);
-  border: 1px solid var(--ac-confirmation-panel-border, var(--a-border-warning));
-  background-color: var(--ac-confirmation-panel-bg, var(--a-surface-warning-subtle));
-  transition: background-color linear 100ms;
-  justify-self: stretch;
-  position: relative;
-}
-.navds-confirmation-panel__content {
-  max-width: 80ch;
-}
-.navds-confirmation-panel--checked .navds-confirmation-panel__inner {
-  border-color: var(--ac-confirmation-panel-checked-border, var(--a-border-success));
-  background-color: var(--ac-confirmation-panel-checked-bg, var(--a-surface-success-subtle));
-}
-.navds-confirmation-panel--error .navds-confirmation-panel__inner {
-  border-color: var(--ac-confirmation-panel-error-border, var(--a-border-danger));
-  background-color: var(--ac-confirmation-panel-error-bg, var(--a-surface-danger-subtle));
-}
-.navds-confirmation-panel--error .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label {
-  color: var(--a-text-default);
-}
-@media (forced-colors: active) {
-  .navds-confirmation-panel__inner::before {
-    content: "";
+
+  .aksel-dropzone__area-release {
+    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);
+    display: grid;
     position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-    border-left: 8px solid;
-    border-color: orange;
-    forced-color-adjust: none;
-    border-start-start-radius: calc(var(--a-border-radius-medium) - 1px);
-    border-end-start-radius: calc(var(--a-border-radius-medium) - 1px);
   }
 
-  .navds-confirmation-panel--checked .navds-confirmation-panel__inner::before {
-    border-color: green;
+  .aksel-dropzone__area-release__icon {
+    padding: var(--__axc-dropzone-icon-padding);
+    border-radius: var(--ax-radius-full);
+    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;
   }
 
-  .navds-confirmation-panel--error .navds-confirmation-panel__inner::before {
-    border-color: red;
+  .aksel-dropzone--dragging .aksel-dropzone__area-release > .aksel-dropzone__area-release__icon {
+    background-color: rgba(0, 0, 0, 0);
+    font-size: 2rem;
   }
-}
-.navds-checkbox,
-.navds-radio {
-  position: relative;
-  width: fit-content;
-}
-.navds-checkbox__input,
-.navds-radio__input {
-  position: absolute;
-  width: 3rem;
-  height: 3rem;
-  top: 0;
-  left: -0.75rem;
-  z-index: 1;
-  opacity: 0;
-  cursor: pointer;
-}
-.navds-checkbox__label,
-.navds-radio__label {
-  padding: var(--a-spacing-3) 0;
-  cursor: pointer;
-  display: flex;
-  gap: var(--a-spacing-2);
-
-  --__ac-radio-checkbox-readonly-bg: var(--a-surface-subtle);
-  --__ac-radio-checkbox-readonly-border: var(--a-border-subtle);
-}
-.navds-checkbox__label::before,
-.navds-radio__label::before {
-  content: "";
-  background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
-  border-radius: var(--a-border-radius-small);
-  flex-shrink: 0;
-  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default));
-  width: calc(1.5rem - 0.25rem);
-  height: calc(1.5rem - 0.25rem);
-  margin-block: 2px;
-  margin-inline: 2px;
-}
-.navds-radio__label::before {
-  border-radius: var(--a-border-radius-full);
-}
-.navds-checkbox__content,
-.navds-radio__content {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-}
-.navds-checkbox--small > .navds-checkbox__input,
-.navds-radio--small > .navds-radio__input {
-  width: 2rem;
-  height: 2rem;
-  top: 0;
-  left: -0.375rem;
-}
-.navds-checkbox--small > .navds-checkbox__label,
-.navds-radio--small > .navds-radio__label {
-  padding: var(--a-spacing-1-alt) 0;
-}
-.navds-checkbox--small > .navds-checkbox__label::before,
-.navds-radio--small > .navds-radio__label::before {
-  width: calc(1.25rem - 0.25rem);
-  height: calc(1.25rem - 0.25rem);
-}
-.navds-checkbox__input:focus + .navds-checkbox__label::before,
-.navds-radio__input:focus + .navds-radio__label::before {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  box-shadow:
-    0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)),
-    0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
-    0 0 0 4px var(--a-border-focus);
-}
-.navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
-.navds-radio__input:hover:focus + .navds-radio__label::before {
-  box-shadow:
-    0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover)),
-    0 0 0 4px var(--a-border-focus);
-}
-/* Temp-fix to remove new darkside indeterminate node */
-.navds-checkbox__icon-indeterminate {
-  display: none;
-}
-.navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
-  content: "";
-  position: absolute;
-  top: var(--a-spacing-6);
-  transform: translate(var(--a-spacing-1-alt), -50%);
-  background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
-  width: 0.75rem;
-  height: 0.25rem;
-  border-radius: 1px;
-  flex-shrink: 0;
-}
-.navds-checkbox--small .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
-  transform: translate(0.25rem, -50%);
-  top: var(--a-spacing-4);
-}
-.navds-checkbox__input:where(:checked, :indeterminate) + .navds-checkbox__label::before {
-  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected));
-  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action-selected));
-}
-.navds-checkbox__input:where(:checked, :indeterminate):hover + .navds-checkbox__label::before {
-  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected-hover));
-  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action-selected-hover));
-}
-.navds-checkbox__input:where(:not(:checked)) + .navds-checkbox__label > .navds-checkbox__icon {
-  display: none;
-}
-.navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
-  color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
-  position: absolute;
-  height: 1.5rem;
-  transform: translate(var(--a-spacing-1-alt));
-  pointer-events: none;
-
-  /* Fixed edcase where when using in shadow-dom, svg will not center */
-  display: flex;
-  align-items: center;
-}
-.navds-checkbox--small .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
-  transform: translate(0.25rem, -10%);
-}
-/* Tailwind sets all svg to block */
-.navds-checkbox__icon > svg {
-  display: block;
 
-  /* Safari does not support inline rem-values in SVG */
-  width: 0.8125rem;
-  height: 0.625rem;
-}
-.navds-checkbox--small > .navds-checkbox__input:checked + .navds-checkbox__label::before {
-  background-position: 0.25rem center;
-}
-.navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
-.navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
-  box-shadow:
-    0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
-    0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
-    0 0 0 4px var(--a-border-focus);
-}
-.navds-radio__input:checked + .navds-radio__label::before {
-  box-shadow:
-    0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
-    inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default));
-  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action-selected));
-}
-.navds-radio__input:checked:focus + .navds-radio__label::before {
-  box-shadow:
-    0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
-    inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
-    0 0 0 4px var(--a-border-focus);
-}
-.navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
-.navds-radio__input:hover:not(:disabled) + .navds-radio__label {
-  color: var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
-}
-.navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate, :focus) + .navds-checkbox__label::before,
-.navds-radio__input:hover:not(:disabled, :checked, :focus) + .navds-radio__label::before {
-  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
-}
-.navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
-.navds-radio__input:hover:not(:disabled, :checked) + .navds-radio__label::before {
-  background-color: var(--ac-radio-checkbox-action-hover-bg, var(--a-surface-action-subtle));
-}
-.navds-checkbox--error > .navds-checkbox__input:not(:hover, :disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:not(:hover, :disabled, :checked) + .navds-radio__label::before {
-  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
-}
-.navds-checkbox--error
-  > .navds-checkbox__input:focus:not(:hover, :disabled, :checked, :indeterminate)
-  + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:focus:not(:hover, :disabled, :checked) + .navds-radio__label::before {
-  box-shadow:
-    0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
-    0 0 0 4px var(--a-border-focus);
-}
-.navds-checkbox--error
-  > .navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate, :focus)
-  + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:hover:not(:disabled, :checked, :focus) + .navds-radio__label::before {
-  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
-  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
-}
-.navds-checkbox--error
-  > .navds-checkbox__input:focus:hover:not(:disabled, :checked, :indeterminate)
-  + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:focus:hover:not(:disabled, :checked) + .navds-radio__label::before {
-  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
-  box-shadow:
-    0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
-    0 0 0 4px var(--a-border-focus);
-}
-.navds-checkbox--disabled,
-.navds-radio--disabled {
-  opacity: 0.3;
-}
-.navds-checkbox--disabled > .navds-checkbox__input,
-.navds-checkbox--disabled > .navds-checkbox__label,
-.navds-radio--disabled > .navds-radio__input,
-.navds-radio--disabled > .navds-radio__label {
-  cursor: not-allowed;
-}
-/* Readonly */
-.navds-checkbox--readonly > :where(.navds-checkbox__input, .navds-checkbox__label),
-.navds-radio--readonly > :where(.navds-radio__input, .navds-radio__label) {
-  cursor: default;
-}
-.navds-checkbox--readonly .navds-checkbox__label-text {
-  display: inline-flex;
-}
-.navds-checkbox--readonly > .navds-checkbox__input:hover + .navds-checkbox__label,
-.navds-radio--readonly > .navds-radio__input:hover + .navds-radio__label {
-  color: var(--a-text-default);
-}
-.navds-checkbox--readonly > .navds-checkbox__input:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
-.navds-checkbox--readonly > .navds-checkbox__input:hover:not(:checked, :indeterminate, :focus) + .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 {
-  background-color: var(--__ac-radio-checkbox-readonly-bg);
-  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
-}
-.navds-checkbox--readonly > .navds-checkbox__input:focus + .navds-checkbox__label::before,
-.navds-radio--readonly > .navds-radio__input:focus + .navds-radio__label::before {
-  --__ac-radio-checkbox-readonly-border: var(--a-border-subtle), var(--a-shadow-focus);
-}
-.navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label::before {
-  background-color: var(--__ac-radio-checkbox-readonly-bg);
-  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
-}
-.navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
-  color: var(--a-icon-subtle);
-}
-.navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
-  background-color: var(--a-icon-subtle);
-  box-shadow:
-    0 0 0 2px var(--__ac-radio-checkbox-readonly-border),
-    inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-bg);
-}
-.navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
-  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
-  background-color: var(--__ac-radio-checkbox-readonly-bg);
-}
-.navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
-  background-color: var(--a-icon-subtle);
-}
-@media screen and (forced-colors: active) {
-  .navds-checkbox__input:focus + .navds-checkbox__label::before,
-  .navds-radio__input:focus + .navds-radio__label::before {
-    outline-color: highlight;
+  .aksel-dropzone__area-release__text {
+    visibility: hidden;
   }
 
-  .navds-checkbox,
-  .navds-radio {
-    --__ac-radio-checkbox-high-contrast-bg: field;
-    --__ac-radio-checkbox-high-contrast-text: fieldtext;
-    --__ac-radio-checkbox-high-contrast-highlight: highlight;
+  .aksel-dropzone--dragging .aksel-dropzone__area-release > .aksel-dropzone__area-release__text {
+    transition: visibility var(--__axc-dropzone-animation-length-long) var(--__axc-dropzone-animation-over-under);
+    visibility: visible;
   }
 
-  .navds-checkbox__label::before,
-  .navds-radio__label::before {
-    border: 1px solid var(--__ac-radio-checkbox-high-contrast-text);
-    background-color: var(--__ac-radio-checkbox-high-contrast-bg);
+  .aksel-dropzone--dragging .aksel-dropzone__area-release {
+    color: var(--ax-text-subtle);
+    top: 50%;
+    transform: translateY(-50%);
   }
 
-  .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
-    color: var(--__ac-radio-checkbox-high-contrast-text);
+  .aksel-dropzone__area-disabled {
+    color: var(--ax-text-neutral-subtle);
+    align-items: center;
+    gap: var(--ax-space-8);
+    flex-direction: column;
+    display: flex;
   }
 
-  .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
-    background-color: var(--__ac-radio-checkbox-high-contrast-text);
+  .aksel-file-upload :is(ul, li), li.aksel-file-item {
+    margin: 0;
+    padding: 0;
+    list-style: none;
   }
 
-  .navds-radio__input:checked + .navds-radio__label::before {
-    border: 1px solid var(--__ac-radio-checkbox-high-contrast-text);
-    outline: 3px solid var(--__ac-radio-checkbox-high-contrast-bg);
-    outline-offset: -4px;
-    background-color: var(--__ac-radio-checkbox-high-contrast-text);
+  ul:has( > li.aksel-file-item) {
+    margin: 0;
+    padding: 0;
+    list-style: none;
   }
 
-  .navds-radio__input:checked:focus + .navds-radio__label::before {
-    border: 1px solid var(--__ac-radio-checkbox-high-contrast-bg);
-    outline: 2px solid highlight;
-    outline-offset: 2px;
+  .aksel-file-item__inner {
+    background-color: var(--ax-bg-raised);
+    border: 1px solid var(--ax-border-neutral-subtleA);
+    outline-offset: -1px;
+    border-radius: var(--ax-radius-12);
+    padding: var(--ax-space-16) var(--ax-space-20);
+    gap: var(--ax-space-12);
+    align-items: flex-start;
+    transition: outline-color .25s cubic-bezier(0, .3, .15, 1);
+    display: flex;
   }
 
-  :not(.navds-checkbox--readonly) > .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
-  :not(.navds-radio--readonly) > .navds-radio__input:hover:not(:disabled) + .navds-radio__label {
-    color: highlight;
+  .aksel-file-item__link {
+    align-items: flex-start;
+    gap: var(--ax-space-2);
+    width: fit-content;
+    display: flex;
   }
 
-  .navds-checkbox__input:focus + .navds-checkbox__label::before {
-    outline: 2px solid var(--__ac-radio-checkbox-high-contrast-highlight);
+  .aksel-file-item__link:is(a) {
+    color: var(--ax-text-subtle);
   }
 
-  .navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label::before {
-    border: 1px solid var(--__ac-radio-checkbox-high-contrast-text);
-    background-color: var(--__ac-radio-checkbox-high-contrast-bg);
+  .aksel-file-item--error > .aksel-file-item__inner {
+    outline: 2px solid var(--ax-border-danger-strong);
   }
 
-  .navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
-    background-color: var(--__ac-radio-checkbox-high-contrast-text);
+  .aksel-file-item__icon {
+    min-width: 1.5rem;
+    min-height: 1.5rem;
+    margin: var(--ax-space-2) 0;
+    place-content: center;
+    display: grid;
   }
 
-  .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
-    border: 1px solid var(--__ac-radio-checkbox-high-contrast-text);
-    outline: 3px solid var(--__ac-radio-checkbox-high-contrast-bg);
-    outline-offset: -4px;
-    background-color: var(--__ac-radio-checkbox-high-contrast-text);
+  .aksel-file-item__icon > svg {
+    width: 1.5rem;
+    height: 1.5rem;
   }
 
-  .navds-checkbox--disabled,
-  .navds-radio--disabled {
-    opacity: 1;
+  .aksel-file-item__icon--loading {
+    padding: var(--ax-space-12);
+    background-color: rgba(0, 0, 0, 0);
+    place-content: center;
+    display: grid;
+  }
 
-    --__ac-radio-checkbox-high-contrast-bg: field;
-    --__ac-radio-checkbox-high-contrast-text: graytext;
+  .aksel-file-item__file-info {
+    overflow-wrap: anywhere;
   }
 
-  :is(.navds-checkbox--disabled, .navds-radio--disabled) :is(.navds-checkbox__label, .navds-radio__label) {
-    color: graytext;
+  .aksel-file-item__error {
+    grid-template-rows: 0fr;
+    transition-property: grid-template-rows, padding-top;
+    transition-duration: .25s;
+    transition-timing-function: cubic-bezier(0, .3, .15, 1);
+    display: grid;
+    overflow: hidden;
   }
-}
-@media print {
-  .navds-checkbox__label::before,
-  .navds-radio__label::before {
-    border: 1px solid black;
+
+  .aksel-file-item--error .aksel-file-item__error {
+    padding-top: var(--ax-space-4);
+    grid-template-rows: 1fr;
   }
 
-  .navds-radio__input:checked + .navds-radio__label::before {
-    border: 1px solid black;
-    outline: 4px solid black;
-    outline-offset: -5px;
+  .aksel-form-field {
+    justify-items: start;
+    gap: var(--ax-space-8);
+    display: grid;
   }
 
-  .navds-checkbox__label::before {
-    outline: 2px solid black;
+  .aksel-form-field__description {
+    color: var(--ax-text-neutral-subtle);
+    margin-top: -.375rem;
   }
 
-  .navds-checkbox__icon {
-    height: calc(1.5rem - 4px) !important;
-    margin-top: 2px;
+  .aksel-form-field__description:empty {
+    display: none;
   }
 
-  .navds-checkbox--small .navds-checkbox__icon {
-    height: calc(1.5rem - 9px) !important;
-    margin-top: 4px;
+  .aksel-form-field--disabled {
+    opacity: var(--ax-opacity-disabled);
+    cursor: not-allowed;
   }
 
-  .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
-    outline: 2px solid black;
-    outline-offset: -2px;
+  .aksel-form-field__error:empty {
+    display: none;
   }
-}
-.navds-select__input {
-  appearance: none;
-  background-color: var(--ac-select-bg, var(--a-surface-default));
-  border-radius: var(--a-border-radius-medium);
-  border: 1px solid var(--ac-select-border, var(--a-border-default));
-  color: var(--ac-select-text, var(--a-text-default));
-  width: 100%;
-  box-sizing: border-box;
-  min-height: 3rem;
-  display: inline-block;
-  position: relative;
-  padding: 0.5rem;
-  padding-right: 2rem;
-  scroll-margin-block-start: 4rem;
-}
-@media (forced-colors: active) {
-  .navds-select__input.navds-select__input.navds-select__input {
-    background-color: ButtonFace;
-    border-color: ButtonText;
-    color: ButtonText;
-    forced-color-adjust: none;
-    box-shadow: none;
+
+  .aksel-form-field__subdescription {
+    color: var(--ax-text-neutral-subtle);
   }
 
-  .navds-select__input.navds-select__input.navds-select__input:focus {
-    outline: 2px solid highlight;
-    outline-offset: 2px;
+  .aksel-form-field--readonly > :where(.aksel-form-field__label) {
+    display: inline-flex;
   }
-}
-.navds-select__input:hover {
-  border-color: var(--ac-select-hover-border, var(--a-border-action-hover));
-  cursor: pointer;
-}
-.navds-select__input:focus {
-  outline: none;
-  border-color: var(--ac-select-active-border, var(--a-border-action-selected));
-  box-shadow: var(--a-shadow-focus);
-}
-.navds-select__container {
-  position: relative;
-  display: flex;
-  width: 100%;
-  color: var(--a-text-default);
-}
-.navds-select__chevron {
-  position: absolute;
-  font-size: 1.5rem;
-  right: var(--a-spacing-2);
-  pointer-events: none;
-  align-self: center;
-  color: var(--ac-select-text, var(--a-text-default));
-}
-@media (forced-colors: active) {
-  .navds-select__chevron {
-    color: ButtonText;
+
+  .aksel-form-field__readonly-icon {
+    margin-top: var(--ax-space-2);
+    margin-right: var(--ax-space-4);
+    flex-shrink: 0;
+    align-self: flex-start;
   }
-}
-.navds-form-field--small .navds-select__input {
-  min-height: 2rem;
-  padding: 0 var(--a-spacing-8) 0 var(--a-spacing-2);
-}
-.navds-form-field--small .navds-select__chevron {
-  right: var(--a-spacing-1-alt);
-}
-/**
-  Error handling
-*/
-.navds-select--error > * .navds-select__input:not(:hover, :disabled) {
-  box-shadow: 0 0 0 1px var(--ac-select-error-border, var(--a-surface-danger));
-  border-color: var(--ac-select-error-border, var(--a-surface-danger));
-}
-.navds-select--error .navds-select__input:focus {
-  box-shadow: var(--a-shadow-focus);
-}
-/**
-  Disabled
-*/
-.navds-select__input:disabled {
-  background-color: var(--ac-select-bg, var(--a-surface-default));
-  border: 1px solid var(--ac-select-border, var(--a-border-default));
-  box-shadow: none;
-  cursor: not-allowed;
-
-  /* Chrome-fix */
-  opacity: 1;
-  color: var(--a-text-default);
-}
-/* Chrome-fix */
-.navds-select__input:disabled > option {
-  color: var(--a-text-default);
-}
-.navds-select--readonly .navds-select__input {
-  background-color: var(--a-surface-subtle);
-  border-color: var(--a-border-subtle);
-  cursor: default;
-}
-.navds-select--readonly .navds-select__chevron {
-  color: var(--a-gray-500);
-}
-.navds-switch {
-  position: relative;
-  min-height: 3rem;
-  width: fit-content;
-}
-.navds-switch--right {
-  width: auto;
-}
-.navds-switch--small {
-  position: relative;
-  min-height: 2rem;
-}
-/* Input */
-.navds-switch__input {
-  cursor: pointer;
-  position: absolute;
-  z-index: 1;
-  width: 3rem;
-  height: 3rem;
-  opacity: 0;
-  top: 0;
-}
-.navds-switch--small > .navds-switch__input {
-  height: 2rem;
-  width: 2.5rem;
-  top: 0;
-}
-/* Label */
-.navds-switch__label-wrapper {
-  cursor: pointer;
-  color: var(--a-text-default);
-}
-.navds-switch__content {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-  padding: 0.75rem 0 0.75rem 3.25rem;
-}
-.navds-switch--right > .navds-switch__label-wrapper > .navds-switch__content {
-  padding: 0.75rem 3.25rem 0.75rem 0;
-}
-.navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
-  padding: calc(var(--a-spacing-2) - var(--a-spacing-05)) 0 calc(var(--a-spacing-2) - var(--a-spacing-05)) 2.75rem;
-}
-.navds-switch--right.navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
-  padding: calc(var(--a-spacing-2) - var(--a-spacing-05)) 2.75rem calc(var(--a-spacing-2) - var(--a-spacing-05)) 0;
-}
-.navds-switch--with-description,
-.navds-switch--small > .navds-switch__label-wrapper > .navds-switch--with-description {
-  padding-bottom: 0;
-}
-.navds-switch__input:hover ~ .navds-switch__label-wrapper,
-.navds-switch__label-wrapper:hover {
-  color: var(--ac-switch-action, var(--a-surface-action-selected));
-}
-.navds-switch__input:disabled:hover ~ .navds-switch__label-wrapper {
-  color: inherit;
-}
-/* Track */
-.navds-switch__track {
-  width: 2.75rem;
-  height: 1.5rem;
-  background-color: var(--ac-switch-bg, var(--a-surface-default));
-  border: 2px solid var(--a-border-default);
-  position: absolute;
-  top: var(--a-spacing-3);
-  left: 0;
-  border-radius: var(--a-border-radius-full);
-  transition-property: background-color, border-color;
-  transition-duration: 100ms;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-}
-.navds-switch--small > .navds-switch__track {
-  top: var(--a-spacing-1-alt);
-  width: 2.25rem;
-  height: 1.25rem;
-}
-.navds-switch--right > .navds-switch__input,
-.navds-switch--right > .navds-switch__track {
-  right: 0;
-  left: auto;
-}
-.navds-switch__input:checked ~ .navds-switch__track {
-  background-color: var(--ac-switch-checked-bg, var(--a-surface-action-selected));
-  border-color: var(--ac-switch-checked-bg, var(--a-surface-action-selected));
-}
-.navds-switch__input:hover ~ .navds-switch__track {
-  background-color: var(--ac-switch-hover-bg, var(--a-surface-subtle));
-}
-.navds-switch__input:hover:checked:not(:disabled) ~ .navds-switch__track {
-  background-color: var(--ac-switch-checked-hover-bg, var(--a-surface-action-selected-hover));
-  border-color: var(--ac-switch-checked-hover-bg, var(--a-surface-action-selected-hover));
-}
-.navds-switch__input:disabled ~ .navds-switch__track {
-  background-color: var(--ac-switch-bg, var(--a-surface-default));
-}
-.navds-switch__input:checked:disabled ~ .navds-switch__track {
-  background-color: var(--ac-switch-checked-bg, var(--a-border-action-selected));
-}
-.navds-switch__input:focus-visible ~ .navds-switch__track {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  box-shadow:
-    0 0 0 1px var(--a-surface-default),
-    var(--a-shadow-focus);
-}
-@supports not selector(:focus-visible) {
-  .navds-switch__input:focus ~ .navds-switch__track {
-    outline: 2px solid transparent;
-    box-shadow:
-      0 0 0 1px var(--a-surface-default),
-      var(--a-shadow-focus);
+
+  @media (forced-colors: active) {
+    .aksel-form-field--disabled {
+      opacity: 1;
+    }
   }
-}
-/* Thumb */
-.navds-switch__thumb {
-  background-color: var(--ac-switch-thumb-bg, var(--a-surface-neutral));
-  color: var(--ac-switch-thumb-icon, var(--a-icon-subtle));
-  border-radius: var(--a-border-radius-full);
-  width: 1.125rem;
-  height: 1.125rem;
-  position: absolute;
-  transform: translateX(0);
-  left: 0.0625rem;
-  top: 0.0625rem;
-  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.navds-switch--small .navds-switch__thumb {
-  width: 0.875rem;
-  height: 0.875rem;
-}
-.navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
-  transform: translateX(1.25rem);
-  color: var(--ac-switch-thumb-icon-checked, var(--a-icon-action-selected));
-  background-color: var(--a-surface-default);
-  width: 1.25rem;
-  height: 1.25rem;
-  left: 0;
-  top: 0;
-}
-.navds-switch--small > .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
-  transform: translateX(1rem);
-  width: 1rem;
-  height: 1rem;
-  left: 0;
-  top: 0;
-}
-@media (hover: hover) and (pointer: fine) {
-  .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
-    transform: translateX(0.125rem);
+
+  .aksel-error-summary {
+    background-color: var(--ax-bg-default);
+    padding: var(--ax-space-16) var(--ax-space-20);
+    border: 4px solid var(--ax-border-danger);
+    border-radius: var(--ax-radius-12);
+    outline-offset: 3px;
   }
 
-  .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
-    transform: translateX(1.125rem);
+  .aksel-error-summary:focus-visible {
+    outline: 3px solid var(--ax-border-focus);
   }
 
-  .navds-switch--small > .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
-    transform: translateX(0.875rem);
+  .aksel-error-summary:has(.aksel-error-summary__heading:focus-visible) {
+    outline: 3px solid var(--ax-border-focus);
   }
-}
-.navds-switch__input:disabled:hover ~ .navds-switch__track > .navds-switch__thumb {
-  transform: translateX(0);
-}
-.navds-switch__input:checked:disabled:hover ~ .navds-switch__track > .navds-switch__thumb {
-  transform: translateX(1.25rem);
-}
-.navds-switch--small > .navds-switch__input:checked:disabled:hover ~ .navds-switch__track > .navds-switch__thumb {
-  transform: translateX(1rem);
-}
-/* Disabled */
-.navds-switch__input:disabled {
-  appearance: none;
-}
-.navds-switch--disabled:not(.navds-switch--loading) {
-  opacity: 0.3;
-}
-.navds-switch__input:disabled,
-.navds-switch__input:disabled ~ .navds-switch__label-wrapper {
-  cursor: not-allowed;
-}
-/* Readonly */
-.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(--a-surface-neutral-moderate);
-  border-color: var(--a-border-subtle);
-}
-.navds-switch--readonly > .navds-switch__label-wrapper,
-.navds-switch--readonly > .navds-switch__input {
-  cursor: default;
-}
-.navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__label-wrapper,
-.navds-switch--readonly .navds-switch__label-wrapper:hover {
-  color: var(--a-text-default);
-}
-.navds-switch--readonly .navds-switch__label {
-  display: inline-flex;
-}
-.navds-switch--readonly .navds-switch__thumb {
-  background-color: var(--a-surface-neutral);
-}
-.navds-switch--readonly > .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
-  color: var(--a-icon-on-neutral);
-  background-color: var(--a-surface-neutral);
-}
-@media (hover: hover) and (pointer: fine) {
-  .navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
-    transform: translateX(0);
+
+  @supports not selector(:focus-visible) {
+    .aksel-error-summary:focus {
+      outline: 3px solid var(--ax-border-focus);
+    }
   }
 
-  .navds-switch--readonly > .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
-    transform: translateX(1.25rem);
+  .aksel-error-summary--small {
+    padding: var(--ax-space-12) var(--ax-space-16);
   }
-}
-@media (forced-colors: active) {
-  .navds-switch__input:hover ~ .navds-switch__label-wrapper,
-  .navds-switch__label-wrapper:hover {
-    color: highlight;
+
+  .aksel-error-summary--small .aksel-error-summary__heading {
+    scroll-margin-top: var(--ax-space-16);
   }
 
-  .navds-switch__thumb,
-  .navds-switch--readonly .navds-switch__thumb,
-  .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb,
-  .navds-switch--readonly .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
-    background-color: fieldtext;
+  .aksel-error-summary--small > .aksel-error-summary__list {
+    margin: var(--ax-space-8) 0;
+    gap: var(--ax-space-8);
+    padding-left: var(--ax-space-20);
   }
 
-  .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb,
-  .navds-switch--readonly .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
-    color: field;
+  .aksel-error-summary__heading {
+    scroll-margin-top: var(--ax-space-24);
   }
 
-  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
-    background-color: graytext;
+  .aksel-error-summary__heading:focus {
+    outline: none;
   }
 
-  .navds-switch__input:focus-visible ~ .navds-switch__track {
-    outline: 2px solid highlight;
-    outline-offset: 2px;
+  .aksel-error-summary__list {
+    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;
   }
 
-  .navds-switch--disabled:not(.navds-switch--loading) {
-    opacity: 1;
+  .aksel-confirmation-panel__inner {
+    gap: var(--ax-space-12);
+    padding: var(--ax-space-16);
+    border-radius: var(--ax-radius-8);
+    border: 1px solid var(--ax-border-default);
+    background-color: var(--ax-bg-moderate);
+    flex-direction: column;
+    justify-self: stretch;
+    transition: background-color .1s linear;
+    display: flex;
+    position: relative;
   }
 
-  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__thumb {
-    background-color: graytext;
-    border-color: graytext;
+  .aksel-confirmation-panel__content {
+    max-width: 80ch;
   }
 
-  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__track {
-    border-color: graytext;
+  @media (forced-colors: active) {
+    .aksel-confirmation-panel__inner:before {
+      content: "";
+      forced-color-adjust: none;
+      border-color: orange;
+      border-left-style: solid;
+      border-left-width: 8px;
+      border-start-start-radius: calc(var(--ax-radius-8)  - 1px);
+      border-end-start-radius: calc(var(--ax-radius-8)  - 1px);
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+
+    .aksel-confirmation-panel--checked .aksel-confirmation-panel__inner:before {
+      border-color: green;
+    }
+
+    .aksel-confirmation-panel--error .aksel-confirmation-panel__inner:before {
+      border-color: red;
+    }
   }
 
-  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__label-wrapper,
-  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__label-wrapper:hover {
-    color: graytext !important;
+  .aksel-checkbox, .aksel-radio {
+    --__axc-radio-checkbox-marker-size: 1.5rem;
+    --__axc-radio-checkbox-marker-target: 2.75rem;
+    gap: var(--ax-space-2) 0;
+    width: fit-content;
+    padding: var(--ax-space-12) 0;
+    grid-template-columns: auto 1fr;
+    display: grid;
+    position: relative;
   }
-}
-.navds-text-field__input {
-  appearance: none;
-  padding: var(--a-spacing-2);
-  background-color: var(--ac-textfield-bg, var(--__ac-textfield-bg, var(--a-surface-default)));
-  border-radius: var(--a-border-radius-medium);
-  border: 1px solid var(--ac-textfield-border, var(--__ac-textfield-border, var(--a-border-default)));
-  min-height: 3rem;
-  width: 100%;
-  color: var(--ac-textfield-text, var(--__ac-textfield-text, var(--a-text-default)));
-  scroll-margin-block-start: 4rem;
-}
-.navds-text-field__input[size] {
-  width: auto;
-}
-.navds-text-field__input::placeholder {
-  color: var(--ac-textfield-placeholder, var(--__ac-textfield-placeholder, var(--a-text-subtle)));
-}
-.navds-form-field--small .navds-text-field__input {
-  padding: 0 var(--a-spacing-2);
-  min-height: 2rem;
-}
-.navds-text-field__input:hover {
-  border-color: var(--ac-textfield-hover-border, var(--__ac-textfield-hover-border, var(--a-border-action-hover)));
-}
-.navds-text-field__input:focus-visible {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  box-shadow: var(--a-shadow-focus);
-  border-color: var(--ac-textfield-active-border, var(--a-border-action-selected));
-}
-@supports not selector(:focus-visible) {
-  .navds-text-field__input:focus {
-    outline: none;
-    box-shadow: var(--a-shadow-focus);
+
+  :is(.aksel-checkbox, .aksel-radio):focus-within:after {
+    content: "";
+    inset: var(--ax-space-12) 0;
+    pointer-events: none;
+    border-radius: var(--ax-radius-4);
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+    position: absolute;
   }
-}
-/**
-  Error handling
-*/
-.navds-text-field--error > .navds-text-field__input:not(:hover, :disabled) {
-  border-color: var(--ac-textfield-error-border, var(--__ac-textfield-error-border, var(--a-border-danger)));
-  box-shadow: 0 0 0 1px var(--ac-textfield-error-border, var(--__ac-textfield-error-border, var(--a-border-danger)));
-}
-.navds-text-field--error > .navds-text-field__input:focus-visible:not(:hover, :disabled) {
-  box-shadow:
-    0 0 0 1px var(--a-border-danger),
-    var(--a-shadow-focus);
-}
-@supports not selector(:focus-visible) {
-  .navds-text-field--error > .navds-text-field__input:focus:not(:hover, :disabled) {
-    box-shadow:
-      0 0 0 1px var(--a-border-danger),
-      var(--a-shadow-focus);
+
+  .aksel-checkbox--small, .aksel-radio--small {
+    --__axc-radio-checkbox-marker-size: 1.25rem;
+    --__axc-radio-checkbox-marker-target: 2rem;
+    padding: var(--ax-space-6) 0;
   }
-}
-/* Disabled handling */
-.navds-text-field__input:disabled {
-  background-color: var(--ac-textfield-bg, var(--__ac-textfield-bg, var(--a-surface-default)));
-  border-color: var(--ac-textfield-border, var(--__ac-textfield-border, var(--a-border-default)));
-  box-shadow: none;
-  cursor: not-allowed;
-}
-.navds-text-field--readonly .navds-text-field__input {
-  background-color: var(--a-surface-subtle);
-  border-color: var(--a-border-subtle);
-  cursor: default;
-}
-/**
-  * Removes default search icon
-  */
-.navds-text-field__input[type="search"]::-webkit-search-decoration,
-.navds-text-field__input[type="search"]::-webkit-search-cancel-button,
-.navds-text-field__input[type="search"]::-webkit-search-results-button,
-.navds-text-field__input[type="search"]::-webkit-search-results-decoration {
-  -webkit-appearance: none;
-}
-@media (forced-colors: active) {
-  .navds-text-field__input {
-    background-color: field;
-    color: fieldtext;
+
+  :is(.aksel-checkbox--small, .aksel-radio--small):focus-within:after {
+    inset: var(--ax-space-6) 0;
   }
-}
-.navds-textarea__input {
-  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
-  height: var(--__ac-textarea-height);
-  appearance: none;
-  padding: var(--a-spacing-2);
-  background-color: var(--ac-textarea-bg, var(--__ac-textarea-bg, var(--a-surface-default)));
-  border-radius: var(--a-border-radius-medium);
-  border: 1px solid var(--ac-textarea-border, var(--__ac-textarea-border, var(--a-border-default)));
-  resize: none;
-  width: 100%;
-  display: block;
-  color: var(--ac-textarea-text, var(--__ac-textarea-text, var(--a-text-default)));
-  scroll-margin-block-start: 4rem;
-  white-space: break-spaces;
-}
-.navds-textarea__input::placeholder {
-  color: var(--ac-textarea-placeholder, var(--__ac-textarea-placeholder, var(--a-text-subtle)));
-}
-.navds-textarea__input:hover {
-  border-color: var(--ac-textarea-hover-border, var(--__ac-textarea-hover-border, var(--a-border-action-hover)));
-}
-.navds-textarea__input:focus-visible {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  box-shadow: var(--a-shadow-focus);
-  border-color: var(--ac-textarea-active-border, var(--a-border-action-selected));
-}
-@supports not selector(:focus-visible) {
-  .navds-textarea__input:focus {
-    outline: 2px solid transparent;
-    outline-offset: 2px;
-    box-shadow: var(--a-shadow-focus);
+
+  .aksel-checkbox__label, .aksel-radio__label {
+    cursor: pointer;
   }
-}
-.navds-form-field--small .navds-textarea__input {
-  padding: var(--a-spacing-1-alt);
-}
-.navds-textarea__counter {
-  margin-top: -0.375rem;
-  color: var(--ac-textarea-counter-text, var(--__ac-textarea-counter-text, var(--a-text-subtle)));
-}
-.navds-textarea__counter--error {
-  color: var(--ac-textarea-counter-error-text, var(--__ac-textarea-counter-error-text, var(--a-text-danger)));
-}
-.navds-textarea__sr-counter {
-  display: none;
-}
-.navds-textarea__input:focus ~ .navds-textarea__sr-counter {
-  display: initial;
-}
-.navds-textarea--resize-both .navds-textarea__input {
-  resize: both;
-  border-end-end-radius: 0;
-}
-.navds-textarea--resize-horizontal .navds-textarea__input {
-  resize: horizontal;
-  border-end-end-radius: 0;
-}
-.navds-textarea--resize-vertical .navds-textarea__input {
-  resize: vertical;
-  border-end-end-radius: 0;
-}
-.navds-textarea--autoscrollbar,
-.navds-textarea--autoscrollbar .navds-textarea__wrapper {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-
-  /* Makes the box-shadow visible even though overflow is hidden: */
-  padding: 3px;
-  margin: -3px;
-}
-.navds-textarea--autoscrollbar .navds-textarea__input {
-  scrollbar-gutter: stable; /* Needed to prevent scrollbar from appearing too early */
-}
-/**
-  Error handling
-*/
-.navds-textarea--error .navds-textarea__input:not(:hover, :disabled) {
-  box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
-  border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
-}
-.navds-textarea--error .navds-textarea__input:focus-visible {
-  box-shadow: var(--a-shadow-focus);
-}
-.navds-textarea__input:disabled {
-  background-color: var(--ac-textarea-bg, var(--__ac-textarea-bg, var(--a-surface-default)));
-  border-color: var(--ac-textarea-border, var(--__ac-textarea-border, var(--a-border-default)));
-  box-shadow: none;
-  cursor: not-allowed;
-}
-.navds-textarea--readonly .navds-textarea__input {
-  background-color: var(--a-surface-subtle);
-  border-color: var(--a-border-subtle);
-  cursor: default;
-}
-@media (forced-colors: active) {
-  .navds-textarea__input {
-    background-color: field;
-    color: fieldtext;
+
+  .aksel-checkbox__description, .aksel-radio__description {
+    grid-column-start: 2;
+  }
+
+  .aksel-checkbox__label, .aksel-radio__label, .aksel-checkbox__description, .aksel-radio__description {
+    padding-left: var(--ax-space-8);
+  }
+
+  .aksel-checkbox__input-wrapper {
+    height: var(--__axc-radio-checkbox-marker-size);
+    position: relative;
+  }
+
+  .aksel-checkbox__input, .aksel-radio__input {
+    --__axc-radio-checkbox-marker-border: 2px;
+    appearance: none;
+    cursor: pointer;
+    width: var(--__axc-radio-checkbox-marker-size);
+    height: var(--__axc-radio-checkbox-marker-size);
+    background-color: var(--ax-bg-input);
+    border: var(--__axc-radio-checkbox-marker-border) solid var(--ax-border-neutral);
+    border-radius: var(--ax-radius-4);
+    outline: none;
+    position: relative;
+  }
+
+  .aksel-checkbox__input:before, .aksel-radio__input:before {
+    content: "";
+    inset: calc(-1 * ( var(--__axc-radio-checkbox-marker-border)  + (var(--__axc-radio-checkbox-marker-target)  - var(--__axc-radio-checkbox-marker-size)) / 2 ));
+    position: absolute;
+  }
+
+  .aksel-radio__input {
+    border-radius: var(--ax-radius-full);
+  }
+
+  .aksel-checkbox__input:indeterminate {
+    justify-content: center;
+    align-items: center;
+    display: flex;
+  }
+
+  .aksel-checkbox__input:indeterminate:after {
+    content: "";
+    background-color: var(--ax-bg-default);
+    border-radius: 1px;
+    width: .75rem;
+    height: .25rem;
+    position: absolute;
+  }
+
+  .aksel-checkbox__input:where(:checked, :indeterminate) {
+    background-color: var(--ax-bg-strong-pressed);
+    border-color: var(--ax-bg-strong-pressed);
+  }
+
+  .aksel-checkbox__input:where(:checked, :indeterminate):not(:disabled):hover {
+    border-color: var(--ax-bg-strong-hover);
+    background-color: var(--ax-bg-strong-hover);
+  }
+
+  .aksel-checkbox__input:where(:not(:checked)) + .aksel-checkbox__icon {
+    display: none;
+  }
+
+  .aksel-checkbox__icon {
+    color: var(--ax-bg-default);
+    pointer-events: none;
+    width: .8125rem;
+    height: var(--__axc-radio-checkbox-marker-size);
+    top: 0;
+    left: var(--ax-space-6);
+    position: absolute;
+  }
+
+  .aksel-checkbox--small .aksel-checkbox__input:checked + .aksel-checkbox__icon {
+    left: var(--ax-space-4);
+  }
+
+  .aksel-radio__input:checked {
+    --__axc-radio-checkbox-marker-border: 8px;
+    border-color: var(--ax-bg-strong-pressed);
+    background-color: var(--ax-bg-input);
+  }
+
+  .aksel-radio--small > .aksel-radio__input:checked {
+    --__axc-radio-checkbox-marker-border: 7px;
+  }
+
+  .aksel-checkbox__input:hover:not(:disabled, :checked, :indeterminate), .aksel-radio__input:hover:not(:disabled, :checked) {
+    border-color: var(--ax-border-strong);
+    background-color: var(--ax-bg-moderate-hoverA);
+  }
+
+  .aksel-checkbox--error .aksel-checkbox__input:not(:disabled, :checked, :indeterminate), .aksel-radio--error > .aksel-radio__input:not(:disabled, :checked) {
+    border-color: var(--ax-border-danger-strong);
+  }
+
+  .aksel-checkbox--disabled, .aksel-radio--disabled {
+    opacity: var(--ax-opacity-disabled);
+  }
+
+  .aksel-checkbox--disabled :where(.aksel-checkbox__input, .aksel-checkbox__label), .aksel-radio--disabled > :where(.aksel-radio__input, .aksel-radio__label) {
+    cursor: not-allowed;
+  }
+
+  .aksel-checkbox--readonly :where(.aksel-checkbox__input, .aksel-checkbox__label), .aksel-radio--readonly > :where(.aksel-radio__input, .aksel-radio__label) {
+    cursor: default;
+  }
+
+  .aksel-checkbox--readonly .aksel-checkbox__input:not(:disabled), .aksel-radio--readonly > .aksel-radio__input:not(:disabled) {
+    background-color: var(--ax-bg-neutral-moderate);
+    border-color: var(--ax-border-neutral-subtle);
+  }
+
+  .aksel-checkbox--readonly .aksel-checkbox__label {
+    display: inline-flex;
+  }
+
+  .aksel-checkbox--readonly .aksel-checkbox__input:checked + .aksel-checkbox__icon {
+    color: var(--ax-text-neutral-subtle);
+  }
+
+  .aksel-checkbox--readonly .aksel-checkbox__input:indeterminate:after {
+    background-color: var(--ax-text-neutral-subtle);
+  }
+
+  .aksel-radio--readonly > .aksel-radio__input:checked {
+    --__axc-radio-checkbox-marker-border: 0px;
+    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);
+  }
+
+  .aksel-radio--small.aksel-radio--readonly > .aksel-radio__input:checked {
+    box-shadow: inset 0 0 0 2px var(--ax-border-neutral-subtle), inset 0 0 0 7px var(--ax-bg-neutral-moderate);
+  }
+
+  @media screen and (forced-colors: active) {
+    :is(.aksel-checkbox, .aksel-checkbox--readonly) .aksel-checkbox__input:indeterminate:after {
+      background-color: fieldtext;
+    }
+
+    .aksel-radio:not(.aksel-radio--readonly) > .aksel-radio__input:hover:not(:disabled) + .aksel-radio__label {
+      color: highlight;
+    }
+
+    .aksel-checkbox:not(.aksel-checkbox--readonly):has(.aksel-checkbox__input:hover:not(:disabled)) > .aksel-checkbox__label {
+      color: highlight;
+    }
+
+    .aksel-checkbox:not(.aksel-checkbox--readonly) .aksel-checkbox__input:hover:not(:disabled), .aksel-radio:not(.aksel-radio--readonly) > .aksel-radio__input:hover:not(:disabled) {
+      border-color: highlight;
+    }
+
+    .aksel-checkbox--readonly .aksel-checkbox__input:checked + .aksel-checkbox__icon {
+      color: var(--ax-bg-default);
+    }
+
+    .aksel-radio--readonly > .aksel-radio__input:checked {
+      --__axc-radio-checkbox-marker-border: 8px;
+    }
+
+    .aksel-radio--small.aksel-radio--readonly > .aksel-radio__input:checked {
+      --__axc-radio-checkbox-marker-border: 7px;
+    }
+
+    .aksel-checkbox--disabled, .aksel-radio--disabled {
+      opacity: 1;
+    }
+
+    .aksel-checkbox--disabled .aksel-checkbox__input, .aksel-radio--disabled .aksel-radio__input {
+      background-color: field;
+      border-color: graytext;
+    }
+
+    .aksel-checkbox--disabled .aksel-checkbox__input:indeterminate:after {
+      background-color: graytext;
+    }
+
+    .aksel-checkbox--disabled :is(.aksel-checkbox__label, .aksel-checkbox__description, .aksel-checkbox__input:checked + .aksel-checkbox__icon), .aksel-radio--disabled :is(.aksel-radio__label, .aksel-radio__description) {
+      color: graytext;
+    }
+  }
+
+  @media print {
+    .aksel-checkbox__input:before, .aksel-radio__input:before {
+      z-index: -1;
+    }
+
+    .aksel-radio__input, .aksel-checkbox__input {
+      border-color: #000 !important;
+    }
+
+    .aksel-radio__input:checked.aksel-radio__input:checked {
+      --__axc-radio-checkbox-marker-border: 7px;
+      border-color: #000;
+    }
+
+    .aksel-checkbox__icon {
+      height: calc(var(--__axc-radio-checkbox-marker-size)  - 4px);
+      top: 2px;
+      bottom: 2px;
+    }
+
+    .aksel-checkbox__input:indeterminate:after {
+      outline-offset: -2px;
+      outline: 2px solid #000;
+    }
+  }
+
+  .aksel-select__input {
+    appearance: none;
+    background-color: var(--ax-bg-input);
+    border-radius: var(--ax-radius-8);
+    border: 1px solid var(--ax-border-neutral);
+    color: var(--ax-text-neutral);
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 3rem;
+    padding: var(--ax-space-8);
+    padding-right: var(--ax-space-40);
+    scroll-margin-block-start: 4rem;
+    display: inline-block;
+    position: relative;
+  }
+
+  .aksel-select__input:hover {
+    border-color: var(--ax-border-strong);
+    cursor: pointer;
+  }
+
+  .aksel-select__input:focus {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+    border-color: var(--ax-border-strong);
+  }
+
+  @media (forced-colors: active) {
+    .aksel-select__input {
+      color: buttontext;
+      background-color: buttonface;
+      border-color: buttontext;
+    }
+  }
+
+  .aksel-select__container {
+    width: 100%;
+    color: var(--ax-text-neutral);
+    display: flex;
+    position: relative;
+  }
+
+  .aksel-select__chevron {
+    right: var(--ax-space-8);
+    pointer-events: none;
+    color: var(--ax-text-neutral);
+    align-self: center;
+    font-size: 1.5rem;
+    position: absolute;
+  }
+
+  @media (forced-colors: active) {
+    .aksel-select__chevron {
+      color: buttontext;
+    }
+  }
+
+  .aksel-form-field--small .aksel-select__input {
+    min-height: 2rem;
+    padding-block: 0;
+  }
+
+  .aksel-select--error > * select, .aksel-select--error > * select:hover, .aksel-select--error > * select:focus {
+    box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
+    border-color: var(--ax-border-danger-strong);
+  }
+
+  .aksel-select__input:disabled {
+    background-color: var(--ax-bg-input);
+    border: 1px solid var(--ax-border-neutral);
+    box-shadow: none;
+    cursor: not-allowed;
+    opacity: 1;
+    color: var(--ax-text-neutral);
+  }
+
+  .aksel-select__input:disabled > option {
+    color: var(--ax-text-neutral);
+  }
+
+  @media (forced-colors: active) {
+    .aksel-select__input:disabled + .aksel-select__chevron {
+      color: graytext;
+    }
+  }
+
+  .aksel-select--readonly .aksel-select__input {
+    background-color: var(--ax-bg-neutral-moderate);
+    border-color: var(--ax-border-neutral-subtleA);
+    cursor: default;
+  }
+
+  @media (forced-colors: active) {
+    .aksel-select--readonly .aksel-select__input:is(:hover, :focus) {
+      color: buttontext;
+      background-color: buttonface;
+      border-color: buttontext;
+    }
+  }
+
+  .aksel-select--readonly .aksel-select__chevron {
+    color: var(--ax-text-neutral-subtle);
+  }
+
+  .aksel-switch {
+    width: fit-content;
+    min-height: 3rem;
+    position: relative;
+  }
+
+  .aksel-switch--small {
+    min-height: 2rem;
+  }
+
+  .aksel-switch__input {
+    cursor: pointer;
+    z-index: 1;
+    opacity: 0;
+    width: 3rem;
+    height: 3rem;
+    position: absolute;
+    top: 0;
+  }
+
+  .aksel-switch--small > .aksel-switch__input {
+    width: 2.5rem;
+    height: 2rem;
+    top: 0;
+  }
+
+  .aksel-switch__label-wrapper {
+    cursor: pointer;
+    color: var(--ax-text-neutral);
+  }
+
+  .aksel-switch__content {
+    --__axc-switch-block-padding: .75rem;
+    --__axc-switch-inline-padding: 3.25rem;
+    gap: var(--ax-space-2);
+    padding: var(--__axc-switch-block-padding) 0 var(--__axc-switch-block-padding) var(--__axc-switch-inline-padding);
+    flex-direction: column;
+    display: flex;
+    position: relative;
+  }
+
+  .aksel-switch--right .aksel-switch__content {
+    padding: var(--__axc-switch-block-padding) var(--__axc-switch-inline-padding) var(--__axc-switch-block-padding) 0;
+  }
+
+  .aksel-switch--small .aksel-switch__content {
+    --__axc-switch-block-padding: .375rem;
+    --__axc-switch-inline-padding: 2.75rem;
+  }
+
+  .aksel-switch__content.aksel-switch--with-description {
+    padding-bottom: 0;
+  }
+
+  .aksel-switch__input:focus ~ .aksel-switch__label-wrapper > .aksel-switch__content:after {
+    content: "";
+    width: 100%;
+    height: calc(100% - var(--__axc-switch-block-padding) * 2);
+    border-radius: var(--ax-radius-4);
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+    pointer-events: none;
+    position: absolute;
+    left: 0;
+  }
+
+  .aksel-switch__input:focus ~ .aksel-switch__label-wrapper > .aksel-switch__content.aksel-switch--with-description:after {
+    height: calc(100% - var(--__axc-switch-block-padding) * 1);
+  }
+
+  .aksel-switch__input:disabled:hover ~ .aksel-switch__label-wrapper {
+    color: inherit;
+  }
+
+  .aksel-switch__track {
+    background-color: var(--ax-bg-input);
+    width: 2.75rem;
+    height: 1.5rem;
+    top: var(--ax-space-12);
+    border-radius: var(--ax-radius-full);
+    border: 2px solid var(--ax-border-neutral);
+    transition-property: background-color, border-color;
+    transition-duration: .1s;
+    transition-timing-function: ease;
+    position: absolute;
+    left: 0;
+  }
+
+  .aksel-switch--small > .aksel-switch__track {
+    top: var(--ax-space-6);
+    width: 2.25rem;
+    height: 1.25rem;
+  }
+
+  .aksel-switch__input:checked ~ .aksel-switch__track {
+    background-color: var(--ax-bg-strong-pressed);
+    border-color: var(--ax-bg-strong-pressed);
+  }
+
+  .aksel-switch__input:hover ~ .aksel-switch__track {
+    background-color: var(--ax-bg-neutral-moderate-hover);
+  }
+
+  .aksel-switch__input:hover:checked ~ .aksel-switch__track {
+    background-color: var(--ax-bg-strong-hover);
+    border-color: var(--ax-bg-strong-hover);
+  }
+
+  .aksel-switch__input:disabled ~ .aksel-switch__track {
+    background-color: var(--ax-bg-input);
+    border-color: var(--ax-border-neutral);
+  }
+
+  .aksel-switch__input:checked:disabled ~ .aksel-switch__track {
+    background-color: var(--ax-bg-strong-pressed);
+    border-color: var(--ax-bg-strong-pressed);
+  }
+
+  .aksel-switch--standalone > .aksel-switch__input:focus ~ .aksel-switch__track {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+  }
+
+  .aksel-switch__thumb {
+    background-color: var(--ax-bg-neutral-strong);
+    border-radius: var(--ax-radius-full);
+    justify-content: center;
+    align-items: center;
+    width: 1.125rem;
+    height: 1.125rem;
+    transition: transform .15s cubic-bezier(.4, 0, .2, 1);
+    display: flex;
+    position: absolute;
+    top: .0625rem;
+    left: .0625rem;
+    transform: translateX(0);
+  }
+
+  .aksel-switch--small .aksel-switch__thumb {
+    width: .875rem;
+    height: .875rem;
+  }
+
+  .aksel-switch__input:checked ~ .aksel-switch__track > .aksel-switch__thumb {
+    background-color: var(--ax-bg-raised);
+    color: var(--ax-text-subtle);
+    width: 1.25rem;
+    height: 1.25rem;
+    top: 0;
+    left: 0;
+    transform: translateX(1.25rem);
+  }
+
+  .aksel-switch--small > .aksel-switch__input:checked ~ .aksel-switch__track > .aksel-switch__thumb {
+    width: 1rem;
+    height: 1rem;
+    top: 0;
+    left: 0;
+    transform: translateX(1rem);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .aksel-switch__input:hover:not(:disabled) ~ .aksel-switch__track > .aksel-switch__thumb {
+      transform: translateX(.17rem);
+    }
+
+    .aksel-switch__input:checked:hover:not(:disabled) ~ .aksel-switch__track > .aksel-switch__thumb {
+      transform: translateX(1.1rem);
+    }
+
+    .aksel-switch--small > .aksel-switch__input:checked:hover:not(:disabled) ~ .aksel-switch__track > .aksel-switch__thumb {
+      transform: translateX(.875rem);
+    }
+  }
+
+  .aksel-switch--right {
+    width: auto;
+  }
+
+  .aksel-switch--right .aksel-switch__input, .aksel-switch--right .aksel-switch__track {
+    left: auto;
+    right: 0;
+  }
+
+  .aksel-switch__input:disabled {
+    appearance: none;
+  }
+
+  .aksel-switch--disabled:not(.aksel-switch--loading) {
+    opacity: var(--ax-opacity-disabled);
+  }
+
+  .aksel-switch__input:disabled, .aksel-switch__input:disabled ~ .aksel-switch__label-wrapper {
+    cursor: not-allowed;
+  }
+
+  .aksel-switch--readonly > .aksel-switch__track, .aksel-switch--readonly > .aksel-switch__input:hover ~ .aksel-switch__track, .aksel-switch--readonly > .aksel-switch__input:checked ~ .aksel-switch__track, .aksel-switch--readonly > .aksel-switch__input:checked:hover ~ .aksel-switch__track {
+    background-color: var(--ax-bg-neutral-moderate);
+    border-color: var(--ax-border-neutral-subtleA);
+  }
+
+  .aksel-switch--readonly > .aksel-switch__label-wrapper, .aksel-switch--readonly > .aksel-switch__input {
+    cursor: default;
+  }
+
+  .aksel-switch--readonly .aksel-switch__label {
+    display: inline-flex;
+  }
+
+  .aksel-switch--readonly .aksel-switch__thumb {
+    background-color: var(--ax-bg-neutral-strong);
+  }
+
+  .aksel-switch--readonly > .aksel-switch__input:checked ~ .aksel-switch__track > .aksel-switch__thumb {
+    background-color: var(--ax-bg-neutral-strong);
+    color: var(--ax-text-neutral-contrast);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .aksel-switch--readonly > .aksel-switch__input:hover ~ .aksel-switch__track > .aksel-switch__thumb {
+      transform: translateX(0);
+    }
+
+    .aksel-switch--readonly > .aksel-switch__input:checked:hover ~ .aksel-switch__track > .aksel-switch__thumb {
+      transform: translateX(1.25rem);
+    }
+
+    .aksel-switch--readonly.aksel-switch--small > .aksel-switch__input:checked:hover ~ .aksel-switch__track > .aksel-switch__thumb {
+      transform: translateX(1rem);
+    }
+  }
+
+  @media (forced-colors: active) {
+    .aksel-switch__thumb, .aksel-switch--readonly .aksel-switch__thumb {
+      background-color: fieldtext !important;
+    }
+
+    .aksel-switch__input:checked ~ .aksel-switch__track > .aksel-switch__thumb, .aksel-switch--readonly .aksel-switch__input:checked ~ .aksel-switch__track > .aksel-switch__thumb {
+      color: field;
+    }
+
+    .aksel-switch__input:focus ~ .aksel-switch__label-wrapper > .aksel-switch__content:after, .aksel-switch--standalone > .aksel-switch__input:focus ~ .aksel-switch__track {
+      outline: 3px solid highlight;
+    }
+
+    .aksel-switch--disabled:not(.aksel-switch--loading) {
+      opacity: 1;
+    }
+
+    .aksel-switch--disabled:not(.aksel-switch--loading) .aksel-switch__thumb {
+      background-color: graytext !important;
+    }
+
+    .aksel-switch--disabled:not(.aksel-switch--loading) .aksel-switch__track {
+      border-color: graytext !important;
+    }
+
+    .aksel-switch--disabled:not(.aksel-switch--loading) .aksel-switch__label-wrapper, .aksel-switch--disabled:not(.aksel-switch--loading) .aksel-switch__label-wrapper:hover {
+      color: graytext !important;
+    }
+  }
+
+  .aksel-text-field__input {
+    appearance: none;
+    padding: var(--ax-space-8);
+    background: var(--ax-bg-input);
+    border-radius: var(--ax-radius-8);
+    border: 1px solid var(--ax-border-neutral);
+    width: 100%;
+    min-height: 3rem;
+    color: var(--ax-text-neutral);
+    scroll-margin-block-start: 4rem;
+  }
+
+  .aksel-text-field__input:hover {
+    border-color: var(--ax-border-strong);
+  }
+
+  .aksel-text-field__input:focus-visible {
+    border-color: var(--ax-border-strong);
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+  }
+
+  .aksel-text-field__input:disabled {
+    background-color: var(--ax-bg-input);
+    border-color: var(--ax-border-neutral);
+    cursor: not-allowed;
+  }
+
+  .aksel-text-field__input::placeholder {
+    color: var(--ax-text-neutral-subtle);
+  }
+
+  .aksel-text-field__input[size] {
+    width: auto;
+  }
+
+  .aksel-form-field--small .aksel-text-field__input {
+    padding: 0 var(--ax-space-8);
+    min-height: 2rem;
+  }
+
+  .aksel-text-field--error .aksel-text-field__input:not(:disabled) {
+    border-color: var(--ax-border-danger-strong);
+    box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
+  }
+
+  .aksel-text-field--readonly .aksel-text-field__input {
+    background-color: var(--ax-bg-neutral-moderate);
+    border-color: var(--ax-border-neutral-subtleA);
+    cursor: default;
+  }
+
+  .aksel-text-field__input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  .aksel-text-field__input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+  }
+
+  .aksel-text-field__input[type="search"]::-webkit-search-results-button {
+    -webkit-appearance: none;
+  }
+
+  .aksel-text-field__input[type="search"]::-webkit-search-results-decoration {
+    -webkit-appearance: none;
+  }
+
+  @media (forced-colors: active) {
+    .aksel-text-field__input {
+      color: fieldtext;
+      background-color: field;
+    }
+  }
+
+  .aksel-textarea__input {
+    height: var(--__axc-textarea-height);
+    appearance: none;
+    padding: var(--ax-space-8);
+    background-color: var(--ax-bg-input);
+    border-radius: var(--ax-radius-8);
+    border: 1px solid var(--ax-border-neutral);
+    resize: none;
+    width: 100%;
+    color: var(--ax-text-neutral);
+    white-space: break-spaces;
+    scroll-margin-block-start: 4rem;
+    display: block;
+  }
+
+  .aksel-textarea__input::placeholder {
+    color: var(--ax-text-neutral-subtle);
+  }
+
+  .aksel-textarea__input:hover {
+    border-color: var(--ax-border-strong);
+  }
+
+  .aksel-textarea__input:focus-visible {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+    border-color: var(--ax-border-strong);
+  }
+
+  .aksel-textarea__input:disabled {
+    background-color: var(--ax-bg-input);
+    border-color: var(--ax-border-neutral);
+    cursor: not-allowed;
+  }
+
+  .aksel-form-field--small .aksel-textarea__input {
+    padding: var(--ax-space-6);
+  }
+
+  .aksel-textarea--readonly .aksel-textarea__input {
+    background-color: var(--ax-bg-neutral-moderate);
+    border-color: var(--ax-border-neutral-subtleA);
+    cursor: default;
+  }
+
+  .aksel-textarea__counter {
+    color: var(--ax-text-neutral-subtle);
+    margin-top: -.25rem;
+  }
+
+  .aksel-textarea__counter--error {
+    color: var(--ax-text-danger-subtle);
+  }
+
+  .aksel-textarea__sr-counter {
+    display: none;
+  }
+
+  .aksel-textarea__input:focus ~ .aksel-textarea__sr-counter {
+    display: initial;
+  }
+
+  .aksel-textarea--resize-both .aksel-textarea__input {
+    resize: both;
+    border-end-end-radius: 0;
+  }
+
+  .aksel-textarea--resize-horizontal .aksel-textarea__input {
+    resize: horizontal;
+    border-end-end-radius: 0;
+  }
+
+  .aksel-textarea--resize-vertical .aksel-textarea__input {
+    resize: vertical;
+    border-end-end-radius: 0;
+  }
+
+  .aksel-textarea--autoscrollbar, .aksel-textarea--autoscrollbar .aksel-textarea__wrapper {
+    flex-direction: column;
+    margin: -3px;
+    padding: 3px;
+    display: flex;
+    overflow: hidden;
+  }
+
+  .aksel-textarea--autoscrollbar .aksel-textarea__input {
+    scrollbar-gutter: stable;
+  }
+
+  .aksel-textarea--error .aksel-textarea__input:not(:disabled) {
+    box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
+    border-color: var(--ax-border-danger-strong);
+  }
+
+  @media (forced-colors: active) {
+    .aksel-textarea__input {
+      color: fieldtext;
+      background-color: field;
+    }
+  }
+
+  .aksel-search {
+    flex-direction: column;
+    width: 100%;
+    display: flex;
+  }
+
+  .aksel-search__wrapper-inner {
+    width: 100%;
+    position: relative;
+  }
+
+  .aksel-search--with-size .aksel-search__wrapper-inner {
+    width: inherit;
+  }
+
+  .aksel-search--with-size .aksel-search__wrapper {
+    width: fit-content;
+  }
+
+  .aksel-search__wrapper {
+    border-radius: var(--ax-radius-8);
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .aksel-search__wrapper:has(.aksel-search__input:focus-visible) {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+  }
+
+  .aksel-search__input {
+    padding-right: var(--ax-space-40);
+  }
+
+  .aksel-search__input:focus-visible {
+    outline: none;
+  }
+
+  .aksel-search__input.aksel-search__input--primary, .aksel-search__input.aksel-search__input--secondary {
+    border-right: none;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .aksel-search__input--simple {
+    padding-left: var(--ax-space-40);
+  }
+
+  .aksel-form-field--small .aksel-search__input {
+    padding-right: var(--ax-space-28);
+  }
+
+  .aksel-form-field--small .aksel-search__input--simple {
+    padding-left: var(--ax-space-28);
+  }
+
+  .aksel-form-field--small .aksel-search__search-icon {
+    left: var(--ax-space-4);
+    font-size: 1.25rem;
+  }
+
+  .aksel-form-field--small .aksel-search__button-clear {
+    right: var(--ax-space-4);
+  }
+
+  .aksel-search__search-icon {
+    color: var(--ax-text-neutral);
+    left: var(--ax-space-8);
+    pointer-events: none;
+    font-size: 1.5rem;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .aksel-search--disabled .aksel-search__search-icon {
+    opacity: var(--ax-opacity-disabled);
+  }
+
+  .aksel-search__button-clear {
+    right: var(--ax-space-8);
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .aksel-search__button-search {
+    border-radius: 0;
+    border-top-right-radius: var(--ax-radius-8);
+    border-bottom-right-radius: var(--ax-radius-8);
+    flex-shrink: 0;
+  }
+
+  .aksel-search__button-search[data-variant="secondary"] {
+    --__axc-button-border-width: 1px;
+    --__axc-button-border-color: var(--ax-border-neutral);
+  }
+
+  .aksel-search__button-search[data-variant="secondary"]:not(:hover, :active) {
+    background-color: var(--ax-bg-input);
+  }
+
+  .aksel-search__button-search[data-variant="secondary"]:hover:not(:disabled) {
+    --__axc-button-border-color: var(--ax-border-strong);
+  }
+
+  .aksel-search:not(.aksel-search--error, .aksel-search--disabled) .aksel-search__wrapper:has(.aksel-search__input:is(:hover, :focus-visible)) .aksel-search__button-search[data-variant="secondary"]:not(:hover, :active) {
+    --__axc-button-border-color: var(--ax-border-strong);
+  }
+
+  .aksel-search--error .aksel-search__input:not(:disabled) {
+    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);
+  }
+
+  .aksel-search--error .aksel-search__input:not(:disabled).aksel-search__input--simple {
+    box-shadow: inset 0 0 0 1px var(--ax-border-danger-strong);
+  }
+
+  .aksel-search__input:focus-visible, .aksel-search__button-search:focus-visible {
+    z-index: 1;
+  }
+
+  .aksel-search--disabled .aksel-search__input {
+    opacity: var(--ax-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  .aksel-combobox__wrapper {
+    --__axc-combobox-icon-size: 1.5rem;
+    --__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-radius-8);
+    flex-direction: column;
+    width: 100%;
+    display: flex;
+    position: relative;
+  }
+
+  .aksel-form-field:not(:is(.aksel-combobox--disabled, .aksel-combobox--readonly)) .aksel-combobox__wrapper:hover {
+    border-color: var(--ax-border-strong);
+  }
+
+  .aksel-form-field--small .aksel-combobox__wrapper {
+    --__axc-combobox-icon-size: 1.25rem;
+    --__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;
+  }
+
+  .aksel-combobox--disabled {
+    opacity: var(--ax-opacity-disabled);
+  }
+
+  .aksel-combobox--disabled .aksel-combobox__wrapper:hover {
+    border-color: var(--ax-border-neutral);
+  }
+
+  .aksel-combobox--disabled .aksel-combobox__wrapper :hover {
+    cursor: not-allowed;
+  }
+
+  .aksel-combobox--disabled .aksel-combobox__selected-options, .aksel-combobox--disabled .aksel-combobox--readonly {
+    pointer-events: none;
   }
-}
-.navds-search {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-.navds-search__wrapper-inner {
-  position: relative;
-  width: 100%;
-}
-.navds-search--with-size :where(.navds-search__wrapper-inner) {
-  width: inherit;
-}
-.navds-search__wrapper {
-  display: inline-flex;
-  align-items: center;
-}
-.navds-search__input {
-  padding-right: var(--a-spacing-10);
-}
-.navds-form-field--small .navds-search__input {
-  padding-right: var(--a-spacing-8);
-}
-.navds-search__input--simple {
-  padding-left: var(--a-spacing-11);
-}
-.navds-form-field--small .navds-search__input--simple {
-  padding-left: var(--a-spacing-7);
-}
-.navds-search__input:not(.navds-search__input--simple) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.navds-search__search-icon {
-  position: absolute;
-  left: var(--a-spacing-3);
-  top: 50%;
-  transform: translateY(-50%);
-  pointer-events: none;
-  font-size: 1.5rem;
-}
-.navds-form-field--small .navds-search__search-icon {
-  left: var(--a-spacing-2);
-  font-size: 1rem;
-}
-.navds-search__button-clear {
-  position: absolute;
-  right: 0.75rem;
-  border-radius: var(--a-border-radius-medium);
-  color: var(--ac-search-clear-icon, var(--__ac-search-clear-icon, var(--a-text-default)));
-  height: 32px;
-  width: 32px;
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  background: none;
-  border: none;
-  font-size: 1.25rem;
-  padding: 0;
-}
-.navds-form-field--small .navds-search__button-clear {
-  right: 0.5rem;
-  height: 24px;
-  width: 24px;
-}
-.navds-search__button-clear:hover {
-  color: var(--ac-search-clear-icon-hover, var(--__ac-search-clear-icon-hover, var(--a-text-action-hover)));
-}
-.navds-search__button-clear:focus-visible {
-  outline: 2px solid transparent;
-  box-shadow: var(--a-shadow-focus);
-}
-@supports not selector(:focus-visible) {
-  .navds-search__button-clear:focus {
-    outline: 2px solid transparent;
-    box-shadow: var(--a-shadow-focus);
+
+  .aksel-combobox--readonly {
+    pointer-events: none;
   }
-}
-.navds-search__button-search {
-  flex-shrink: 0;
-  min-width: 4rem;
-  min-height: 2rem;
-  border-radius: 0;
-  border-top-right-radius: var(--a-border-radius-medium);
-  border-bottom-right-radius: var(--a-border-radius-medium);
-}
-.navds-form-field--small .navds-search__button-search svg {
-  font-size: 1rem;
-}
-.navds-form-field--small .navds-search__button-search {
-  min-width: 2.5rem;
-}
-.navds-search__button-search.navds-button--secondary {
-  box-shadow:
-    -1px 0 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
-    0 1px 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
-    0 -1px 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset;
-}
-.navds-search__button-search.navds-button--secondary:where(:hover, :active) {
-  box-shadow:
-    -1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
-    0 1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
-    0 -1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
-    -1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover)));
-  z-index: 1;
-}
-.navds-search__wrapper-inner:focus-within + .navds-search__button-search.navds-button--secondary:hover {
-  z-index: auto;
-}
-.navds-search__button-search.navds-button--secondary:focus-visible {
-  box-shadow:
-    0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
-    var(--a-shadow-focus);
-}
-.navds-search__button-search.navds-button--secondary:focus-visible:hover {
-  box-shadow:
-    0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
-    var(--a-shadow-focus);
-}
-.navds-search__button-search.navds-button--secondary:focus-visible:active {
-  box-shadow:
-    0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset,
-    var(--a-shadow-focus);
-}
-@supports not selector(:focus-visible) {
-  .navds-search__button-search.navds-button--secondary:focus {
-    box-shadow:
-      0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
-      var(--a-shadow-focus);
+
+  .aksel-combobox--readonly .aksel-combobox__selected-options .aksel-chips__chip {
+    background-color: var(--ax-bg-neutral-moderateA);
   }
 
-  .navds-search__button-search.navds-button--secondary:focus:hover {
-    box-shadow:
-      0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
-      var(--a-shadow-focus);
+  .aksel-combobox--readonly .aksel-combobox__button-toggle-list {
+    color: var(--ax-bg-neutral-moderate);
   }
 
-  .navds-search__button-search.navds-button--secondary:focus:active {
-    box-shadow:
-      0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset,
-      var(--a-shadow-focus);
+  .aksel-combobox--readonly .aksel-combobox__wrapper {
+    border-color: var(--ax-border-neutral-subtle);
+    overflow: clip;
   }
-}
-/* Error-handling */
-.navds-search--error .navds-search__input:not(:hover, :disabled) {
-  border-color: var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger)));
-  box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger)));
-}
-.navds-search--error .navds-search__input:focus-visible:not(:hover, :disabled) {
-  box-shadow:
-    inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
-    var(--a-shadow-focus);
-}
-/* Focus layering */
-.navds-search__input:focus-visible,
-.navds-search__button-clear,
-.navds-search__button-search:focus-visible {
-  z-index: 1;
-}
-@supports not selector(:focus-visible) {
-  .navds-search--error .navds-search__input:focus:not(:hover, :disabled) {
-    box-shadow:
-      inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
-      var(--a-shadow-focus);
+
+  .aksel-combobox--readonly .aksel-text-field__input, .aksel-combobox--readonly .aksel-combobox__input {
+    background-color: var(--ax-bg-neutral-moderate);
   }
 
-  .navds-search__input:focus,
-  .navds-search__button-search:focus {
-    z-index: 1;
+  .aksel-combobox__button-toggle-list svg, .aksel-combobox__list svg {
+    width: var(--__axc-combobox-icon-size);
+    height: var(--__axc-combobox-icon-size);
   }
-}
-@media (forced-colors: active) {
-  .navds-modal {
-    outline: 2px solid transparent;
+
+  .aksel-combobox__wrapper-inner {
+    border: 1px solid var(--ax-border-neutral);
+    border-radius: var(--ax-radius-8);
   }
 
-  .navds-search__button-clear:hover {
-    color: highlight;
+  .aksel-combobox__wrapper-inner:has(.aksel-combobox__input:focus-visible) {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+    border-color: var(--ax-border-strong);
   }
-}
-/* stylelint-disable csstools/value-no-unknown-custom-properties */
-.navds-combobox__wrapper {
-  --__ac-combobox-icon-size: 1.5rem;
-  --__ac-combobox-wrapper-inner-padding: var(--a-spacing-2);
-  --__ac-combobox-list-item-padding-block: var(--a-spacing-3);
-  --__ac-combobox-list-item-padding-inline: var(--a-spacing-3);
-  --__ac-combobox-border-width: 1px;
-  --__ac-combobox-input-height: 2rem;
-
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  position: relative;
-}
-.navds-form-field--small .navds-combobox__wrapper {
-  --__ac-combobox-icon-size: 1.25rem;
-  --__ac-combobox-wrapper-inner-padding: var(--a-spacing-1);
-  --__ac-combobox-list-item-padding-block: var(--a-spacing-1-alt);
-  --__ac-combobox-list-item-padding-inline: var(--a-spacing-2);
-  --__ac-combobox-input-height: 1.5rem;
-}
-.navds-combobox--disabled {
-  opacity: 0.3;
-}
-.navds-combobox--disabled .navds-combobox__wrapper *:hover {
-  cursor: not-allowed;
-}
-.navds-combobox--disabled .navds-text-field__input {
-  border: 1px solid var(--a-border-default);
-}
-.navds-combobox--disabled .navds-combobox__selected-options {
-  pointer-events: none;
-}
-.navds-combobox--readonly {
-  pointer-events: none;
-}
-.navds-combobox--readonly .navds-combobox__button-toggle-list {
-  color: var(--a-gray-500);
-}
-.navds-combobox--readonly .navds-text-field__input,
-.navds-combobox--readonly .navds-combobox__input {
-  background-color: var(--a-surface-subtle);
-  border-color: var(--a-border-subtle);
-}
-.navds-combobox__button-toggle-list svg,
-.navds-combobox__list svg {
-  width: var(--__ac-combobox-icon-size);
-  height: var(--__ac-combobox-icon-size);
-}
-.navds-combobox__wrapper-inner.navds-text-field__input {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding-block: calc(var(--__ac-combobox-wrapper-inner-padding) - var(--__ac-combobox-border-width));
-  padding-inline: var(--__ac-combobox-wrapper-inner-padding);
-}
-.navds-combobox__wrapper-inner > :first-child {
-  flex: 2;
-}
-.navds-combobox__wrapper-inner:hover {
-  cursor: text;
-}
-.navds-combobox--error .navds-text-field__input:not(:hover, :disabled) {
-  border-color: var(--ac-combobox-error-border, var(--a-border-danger));
-  box-shadow: 0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger));
-}
-.navds-combobox--error
-  .navds-text-field__input:not(:hover, :disabled, .navds-combobox__wrapper-inner--virtually-unfocused):focus-within {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  box-shadow:
-    0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger)),
-    var(--a-shadow-focus);
-}
-.navds-combobox__selected-options {
-  gap: 0;
-  align-items: center;
-}
-.navds-combobox__selected-options > li {
-  margin: auto 0;
-  border-radius: var(--a-border-radius-full);
-}
-.navds-combobox__selected-options > li:last-of-type {
-  display: flex;
-  flex: 1;
-}
-.navds-combobox__selected-options--no-bg {
-  font-family: inherit;
-  font-size: var(--a-font-size-large);
-  font-weight: var(--a-font-weight-regular);
-  letter-spacing: 0;
-  line-height: var(--a-font-line-height-large);
-  margin: 0;
-  padding-left: 0.25rem;
-}
-.navds-combobox__selected-options[data-type="multiple"] {
-  gap: var(--__ac-combobox-wrapper-inner-padding);
-}
-.navds-combobox__selected-options > li:only-child > .navds-combobox__input {
-  margin-left: var(--a-spacing-1);
-}
-.navds-combobox__input-wrapper {
-  width: 100%;
-}
-.navds-combobox__input {
-  flex: 1;
-  border: none;
-  padding: 0;
-  margin: 0;
-  min-width: 10ch;
-  width: 100%;
-  height: var(--__ac-combobox-input-height);
-}
-.navds-combobox__selected-options[data-type="single"] .navds-combobox__input {
-  min-width: auto;
-}
-.navds-combobox__input--hide-caret {
-  caret-color: transparent;
-}
-.navds-combobox__input:focus-visible {
-  outline: none;
-  border: none;
-  box-shadow: none;
-}
-.navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
-  box-shadow: var(--a-shadow-focus);
-  outline: 3px solid transparent;
-  outline-offset: 2px;
-}
-.navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible).navds-combobox__wrapper-inner--virtually-unfocused {
-  box-shadow: none;
-  outline: none;
-}
-@supports not selector(:focus-visible) {
-  .navds-combobox__input:focus {
+
+  .aksel-combobox__wrapper-inner:has(.aksel-combobox__input:focus-visible).aksel-combobox__wrapper-inner--virtually-unfocused {
+    border-color: var(--ax-border-neutral);
     outline: none;
-    border: none;
-    box-shadow: none;
   }
 
-  .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus) {
-    box-shadow: var(--a-shadow-focus);
-    outline: 3px solid transparent;
-    outline-offset: 2px;
+  .aksel-combobox__wrapper-inner.aksel-text-field__input {
+    width: 100%;
+    padding-block: calc(var(--__axc-combobox-wrapper-inner-padding)  - var(--__axc-combobox-border-width));
+    padding-inline: var(--__axc-combobox-wrapper-inner-padding);
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    display: flex;
+    position: relative;
   }
 
-  .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus).navds-combobox__wrapper-inner--virtually-unfocused {
-    box-shadow: none;
-    outline: none;
+  .aksel-combobox__wrapper-inner > :first-child {
+    flex: 2;
   }
-}
-@supports not selector(:has(*)) {
-  .navds-combobox--focused .navds-combobox__wrapper-inner {
-    box-shadow: var(--a-shadow-focus);
-    outline: 3px solid transparent;
-    outline-offset: 2px;
+
+  .aksel-combobox__wrapper-inner:hover {
+    cursor: text;
   }
 
-  .navds-combobox--focused .navds-combobox__wrapper-inner.navds-combobox__wrapper-inner--virtually-unfocused {
-    box-shadow: none;
-    outline: none;
+  .aksel-combobox--disabled .aksel-combobox__wrapper-inner:hover {
+    border-color: var(--ax-border-neutral);
   }
-}
-.navds-combobox__input::-webkit-search-cancel-button {
-  display: none;
-}
-.navds-combobox__button-toggle-list {
-  border-radius: var(--a-border-radius-medium);
-  color: var(--a-text-default);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  background: none;
-  border: none;
-  font-size: 1rem;
-  padding: 0;
-}
-.navds-combobox__button-toggle-list:active:hover {
-  color: var(--a-text-action);
-}
-.navds-combobox__button-toggle-list:hover {
-  color: var(--a-text-action-selected);
-}
-.navds-combobox__button-toggle-list:focus-visible {
-  box-shadow:
-    0 0 0 1px var(--a-surface-default) inset,
-    var(--a-shadow-focus);
-  box-shadow: var(--a-shadow-focus);
-  outline: none;
-}
-@supports not selector(:focus-visible) {
-  .navds-combobox__button-toggle-list:focus {
-    box-shadow:
-      0 0 0 1px var(--a-surface-default) inset,
-      var(--a-shadow-focus);
-    box-shadow: var(--a-shadow-focus);
-    outline: none;
+
+  .aksel-combobox--error .aksel-combobox__wrapper-inner {
+    border-color: var(--ax-border-danger-strong);
+    box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
   }
-}
-/* dropdown & non selectable dropdown items */
-.navds-combobox__list {
-  /* stylelint-disable-next-line aksel/design-token-exists */
-  width: var(--ac-floating-anchor-width);
-  overflow-y: auto;
-  border: 1px solid var(--ac-combobox-list-border-color, var(--a-border-divider));
-  display: flex;
-  flex-direction: column;
-  box-shadow: var(--a-shadow-small);
-  border-radius: var(--a-border-radius-medium);
-  background-color: var(--ac-combobox-list-bg, var(--a-surface-default));
-  color: var(--ac-combobox-list-text, var(--a-text-default));
-}
-.navds-combobox__list--closed {
-  display: none;
-}
-.navds-combobox__list_non-selectables {
-  position: sticky;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 1;
-}
-.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 {
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  padding-block: var(--__ac-combobox-list-item-padding-block);
-  padding-inline: var(--__ac-combobox-list-item-padding-inline);
-  width: 100%;
-  background-color: var(--ac-combobox-list-item-bg, var(--a-surface-default));
-}
-.navds-combobox__list:has(.navds-combobox__list_non-selectables) .navds-combobox__list-item {
-  scroll-margin-top: 48px;
-}
-.navds-combobox__list-item--loading {
-  justify-content: center;
-  background-color: var(--ac-combobox-list-item-loading-bg, var(--a-surface-default));
-}
-.navds-combobox__list-item--max-selected {
-  background: var(--ac-combobox-list-item-max-selected-bg, var(--a-surface-info-subtle));
-  border-start-start-radius: calc(var(--a-border-radius-medium) - 1px);
-  border-start-end-radius: calc(var(--a-border-radius-medium) - 1px);
-  border: 1px solid var(--ac-combobox-list-item-max-selected-border, var(--a-border-info));
-}
-.navds-combobox__list_non-selectables:hover {
-  cursor: default;
-}
-/* ul-list and selectable li-items */
-.navds-combobox__list-options {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  display: inherit;
-  flex-direction: inherit;
-  gap: inherit;
-  background-color: inherit;
-  align-items: flex-start;
-}
-.navds-combobox__list-item--focus,
-.navds-combobox__list--with-hover
-  .navds-combobox__list-item:where(:not([data-no-focus="true"], .navds-combobox__list-item--new-option)):hover {
-  background-color: var(--ac-combobox-list-item-hover-bg, var(--a-surface-hover));
-  cursor: pointer;
-  border-left: 4px solid var(--ac-combobox-list-item-hover-border-left, var(--a-border-strong));
-  padding-inline-start: calc(var(--__ac-combobox-list-item-padding-inline) - 4px);
-}
-.navds-combobox__list-item[data-no-focus="true"] {
-  cursor: not-allowed;
-  opacity: 0.4;
-}
-.navds-combobox__list-item--selected {
-  background-color: var(--ac-combobox-list-item-selected-bg, var(--a-surface-selected));
-}
-.navds-combobox__list-item--selected p {
-  font-weight: var(--a-font-weight-bold);
-}
-.navds-combobox__list-item--selected.navds-combobox__list-item--focus,
-.navds-combobox__list--with-hover .navds-combobox__list-item--selected:hover {
-  background-color: var(--ac-combobox-list-item-selected-hover-bg, var(--a-surface-action-subtle-hover));
-  border-left: 4px solid var(--ac-combobox-list-item-selected-hover-border-left, var(--a-border-focus));
-}
-.navds-combobox__list-item--new-option {
-  border-bottom: 1px solid var(--a-border-divider);
-  background: var(--a-surface-neutral-subtle);
-  cursor: pointer;
-  justify-content: flex-start;
-  gap: 0.25rem;
-}
-.navds-combobox__list--with-hover .navds-combobox__list-item--new-option:hover {
-  border-bottom: 1px solid var(--a-border-divider);
-  background: var(--a-surface-neutral-subtle-hover);
-}
-.navds-combobox__list-item--new-option--focus {
-  box-shadow:
-    var(--a-shadow-focus) inset,
-    var(--a-border-action) 0 0 0 5px inset;
-  border-radius: calc(var(--a-border-radius-medium) - 1px);
-}
-.navds-combobox__list-item mark {
-  background-color: transparent;
-  font-weight: bold;
-}
-/* Mobile */
-@media (max-width: 479px) {
-  .navds-combobox__button-toggle-list {
-    right: 0.5rem;
+
+  .aksel-combobox--error .aksel-combobox__wrapper-inner:has(.aksel-combobox__input:focus-visible) {
+    border-color: var(--ax-border-danger-strong);
   }
 
-  /* add bigger click area for input */
-  .navds-combobox__input {
-    min-width: min-content;
-    padding: 0.75rem 0;
+  .aksel-combobox__selected-options {
+    align-items: center;
+    gap: 0;
   }
 
-  .navds-combobox__selected-options {
-    gap: var(--a-spacing-1);
+  .aksel-combobox__selected-options > li {
+    border-radius: var(--ax-radius-full);
+    margin: auto 0;
   }
 
-  .navds-combobox__list {
-    overscroll-behavior: contain;
+  .aksel-combobox__selected-options > li:last-of-type {
+    flex: 1;
+    display: flex;
   }
-}
-@media (forced-colors: active) {
-  .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
-    outline-color: highlight;
+
+  .aksel-combobox__selected-options[data-type="multiple"] {
+    gap: var(--__axc-combobox-wrapper-inner-padding);
   }
 
-  .navds-combobox__list-item--focus,
-  .navds-combobox__list--with-hover
-    .navds-combobox__list-item:not([data-no-focus="true"], .navds-combobox__list-item--new-option):hover {
-    border-left-color: highlight;
-    color: highlight;
+  .aksel-combobox__selected-options--no-bg {
+    font-family: inherit;
+    font-size: var(--ax-font-size-large);
+    font-weight: var(--ax-font-weight-regular);
+    letter-spacing: 0;
+    line-height: var(--ax-font-line-height-large);
+    margin: 0;
+    padding-left: .25rem;
   }
 
-  .navds-combobox__list-item[data-no-focus="true"] {
-    opacity: 1;
-    color: graytext;
+  .aksel-combobox__input-wrapper {
+    width: 100%;
   }
 
-  .navds-combobox__list-item--selected {
-    background-color: selecteditem;
-    color: selecteditemtext;
+  .aksel-combobox__input {
+    width: 100%;
+    min-width: 10ch;
+    height: var(--__axc-combobox-input-height);
+    background: none;
+    border: none;
+    flex: 1;
+    margin: 0;
+    padding: 0;
   }
 
-  .navds-combobox__list-item--selected > * {
-    forced-color-adjust: none;
+  .aksel-combobox__input:focus-visible {
+    border: none;
+    outline: 0;
   }
 
-  .navds-combobox__list-item--selected.navds-combobox__list-item--focus,
-  .navds-combobox__list--with-hover .navds-combobox__list-item--selected:hover {
-    border-left-color: highlight;
-    color: highlight;
+  .aksel-combobox__selected-options > li:only-child > .aksel-combobox__input {
+    margin-left: var(--ax-space-4);
   }
 
-  .navds-combobox__list--with-hover .navds-combobox__list-item--new-option:hover {
-    color: highlight;
+  .aksel-combobox__selected-options[data-type="single"] .aksel-combobox__input {
+    min-width: auto;
   }
 
-  .navds-combobox__list-item--new-option--focus {
-    outline: 2px solid highlight;
-    outline-offset: -3px;
+  .aksel-combobox__input--hide-caret {
+    caret-color: rgba(0, 0, 0, 0);
   }
-}
-.navds-form-summary {
-  overflow: hidden;
-  border: 1px solid var(--a-border-subtle);
-  border-radius: var(--a-border-radius-large);
-  background: var(--a-surface-default);
-}
-.navds-form-summary__header {
-  background-color: var(--a-surface-subtle);
-  padding: var(--a-spacing-4) var(--a-spacing-6);
-  display: flex;
-  justify-content: space-between;
-  gap: 0 var(--a-spacing-2);
-}
-@media (max-width: 479px) {
-  .navds-form-summary__header {
-    padding: var(--a-spacing-3) var(--a-spacing-4);
+
+  @supports not selector(:focus-visible) {
+    .aksel-combobox__input:focus {
+      border: none;
+      outline: none;
+    }
+
+    .aksel-combobox__wrapper-inner:has(.aksel-combobox__input:focus) {
+      outline: none;
+    }
+
+    .aksel-combobox__wrapper-inner:has(.aksel-combobox__input:focus).aksel-combobox__wrapper-inner--virtually-unfocused {
+      outline: none;
+    }
+  }
+
+  .aksel-combobox__input::-webkit-search-cancel-button {
+    display: none;
+  }
+
+  .aksel-combobox__button-toggle-list {
+    color: var(--ax-text-neutral);
+    cursor: pointer;
+    background: none;
+    border: none;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    font-size: 1rem;
+    display: flex;
+  }
+
+  .aksel-combobox__button-toggle-list:hover {
+    color: var(--ax-text-subtle);
+  }
+
+  .aksel-combobox__button-toggle-list:hover:active {
+    color: var(--ax-text-default);
+  }
+
+  .aksel-combobox__list {
+    width: var(--__axc-floating-anchor-width);
+    border: 1px solid var(--ax-border-neutral-subtleA);
+    border-radius: var(--ax-radius-8);
+    background-color: var(--ax-bg-raised);
+    color: var(--ax-text-neutral);
+    box-shadow: var(--ax-shadow-dialog);
     flex-direction: column;
+    display: flex;
+    overflow: clip;
   }
-}
-.navds-form-summary__header .navds-form-summary__edit {
-  flex-shrink: 0;
-  align-self: flex-start;
-}
-.navds-form-summary > .navds-form-summary__answers {
-  border-top: 1px solid var(--a-border-subtle);
-}
-.navds-form-summary__answers {
-  padding: var(--a-spacing-5) var(--a-spacing-6) var(--a-spacing-6);
-  margin: 0;
-}
-@media (max-width: 479px) {
-  .navds-form-summary__answers {
-    padding: var(--a-spacing-4);
+
+  .aksel-combobox__list .aksel-combobox__list-options {
+    overflow-y: auto;
   }
-}
-.navds-form-summary__answer:not(:last-child) {
-  margin-bottom: var(--a-spacing-4);
-  padding-bottom: var(--a-spacing-4);
-  border-bottom: 1px solid var(--a-border-divider);
-}
-.navds-form-summary__answer:has(.navds-form-summary__answer) {
-  padding-bottom: var(--a-spacing-6);
-}
-.navds-form-summary__answer:has(.navds-form-summary__answer):last-child {
-  padding-bottom: 0;
-}
-@media (max-width: 479px) {
-  .navds-form-summary__answer:not(:last-child) {
-    margin-bottom: var(--a-spacing-3);
-    padding-bottom: var(--a-spacing-3);
+
+  .aksel-combobox__list--closed {
+    display: none;
   }
 
-  .navds-form-summary__answer:has(.navds-form-summary__answer) {
-    padding-bottom: var(--a-spacing-5);
+  .aksel-combobox__list-item, .aksel-combobox__list-item--loading, .aksel-combobox__list-item--no-options, .aksel-combobox__list-item--new-option, .aksel-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-radius-8);
+    margin-inline: var(--ax-space-8);
+    margin-block: var(--ax-space-2);
+    border: 0;
+    justify-content: space-between;
+    align-items: center;
+    scroll-margin-block: 8px;
+    display: flex;
   }
-}
-.navds-form-summary__value:first-of-type {
-  margin-top: var(--a-spacing-1);
-}
-.navds-form-summary__value :where(.navds-form-summary__answers) {
-  margin-top: var(--a-spacing-2);
-  padding: var(--a-spacing-4);
-  background: var(--a-surface-selected);
-  border-radius: var(--a-border-radius-large);
-}
-.navds-form-summary__footer {
-  display: flex;
-  padding: var(--a-spacing-5) var(--a-spacing-6);
-  background: var(--a-surface-default);
-  border-top: 1px solid var(--a-border-subtle);
-}
-@media (max-width: 479px) {
-  .navds-form-summary__footer {
-    padding: var(--a-spacing-3) var(--a-spacing-4);
+
+  .aksel-combobox__list-item--no-options {
+    margin: 0;
+  }
+
+  .aksel-combobox__list-item--loading {
+    justify-content: center;
+    margin: 0;
+  }
+
+  .aksel-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-space-8);
+    line-height: var(--ax-font-line-height-large);
+    border-radius: 0;
+    margin: 0;
+  }
+
+  .aksel-combobox__list-options {
+    display: inherit;
+    flex-direction: inherit;
+    gap: inherit;
+    background-color: inherit;
+    padding: 0;
+    padding-block: var(--ax-space-4);
+    align-items: stretch;
+    margin: 0;
+    list-style: none;
+  }
+
+  .aksel-combobox__list-item--focus {
+    cursor: pointer;
+    outline: 2px solid var(--ax-border-focus);
+  }
+
+  .aksel-combobox__list-item--focus, .aksel-combobox__list--with-hover .aksel-combobox__list-item:not([data-no-focus="true"], .aksel-combobox__list-item--new-option):hover {
+    cursor: pointer;
+  }
+
+  .aksel-combobox__list-item {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .aksel-combobox__list-item[data-no-focus="true"] {
+    cursor: not-allowed;
+    opacity: .4;
+  }
+
+  .aksel-combobox__list-item mark {
+    font-weight: var(--ax-font-weight-bold);
+    color: var(--ax-text-neutral);
+    background-color: rgba(0, 0, 0, 0);
+  }
+
+  .aksel-combobox__list-item svg {
+    color: var(--ax-text-neutral);
+  }
+
+  .aksel-combobox__list-item--selected {
+    background-color: var(--ax-bg-moderate-pressedA);
+  }
+
+  .aksel-combobox__list-item--selected p {
+    font-weight: var(--ax-font-weight-bold);
+  }
+
+  .aksel-combobox__list-item--new-option {
+    border-bottom: 1px solid var(--ax-border-subtleA);
+    background: var(--ax-bg-moderateA);
+    cursor: pointer;
+    margin: 0;
+    border-radius: 0;
+    justify-content: flex-start;
+    gap: .25rem;
+    margin-block-start: calc(var(--ax-space-4) * -1);
+  }
+
+  .aksel-combobox__list-item--new-option svg {
+    color: var(--ax-text-neutral);
+  }
+
+  .aksel-combobox__list-item--new-option:only-child {
+    margin-block: calc(var(--ax-space-4) * -1);
+    border: none;
+  }
+
+  .aksel-combobox__list-item--new-option--focus {
+    border-radius: calc(var(--ax-radius-8)  - 1px) calc(var(--ax-radius-8)  - 1px) 0 0;
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: -2px;
+  }
+
+  .aksel-combobox__list-item--new-option--focus:only-child {
+    border-radius: calc(var(--ax-radius-8)  - 1px);
+  }
+
+  @media (max-width: 479px) {
+    .aksel-combobox__button-toggle-list {
+      right: .5rem;
+    }
+
+    .aksel-combobox__input {
+      min-width: min-content;
+      padding: .75rem 0;
+    }
+
+    .aksel-combobox__selected-options {
+      gap: var(--ax-space-4);
+    }
+
+    .aksel-combobox__list {
+      overscroll-behavior: contain;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .aksel-combobox__wrapper-inner:has(.aksel-combobox__input:focus-visible) {
+      outline-color: highlight;
+    }
+
+    .aksel-combobox__list-item--focus, .aksel-combobox__list--with-hover .aksel-combobox__list-item:not([data-no-focus="true"], .aksel-combobox__list-item--new-option):hover {
+      color: highlight;
+      border-left-color: highlight;
+    }
+
+    .aksel-combobox__list-item[data-no-focus="true"] {
+      opacity: 1;
+      color: graytext;
+    }
+
+    .aksel-combobox__list-item--selected {
+      color: selecteditemtext;
+      background-color: highlight;
+    }
+
+    .aksel-combobox__list-item--selected * {
+      color: #000;
+    }
+
+    .aksel-combobox__list-item--selected > * {
+      forced-color-adjust: none;
+    }
+
+    .aksel-combobox__list-item--selected.aksel-combobox__list-item--focus, .aksel-combobox__list--with-hover .aksel-combobox__list-item--selected:hover {
+      color: highlight;
+      border-left-color: highlight;
+    }
+
+    .aksel-combobox__list--with-hover .aksel-combobox__list-item--new-option:hover {
+      color: highlight;
+    }
+
+    .aksel-combobox__list-item--new-option--focus {
+      outline-offset: 0;
+      outline: 2px solid highlight;
+    }
+
+    .aksel-combobox--disabled {
+      opacity: 1;
+    }
+
+    .aksel-combobox--disabled * {
+      color: graytext;
+      opacity: 1;
+      border-color: graytext;
+    }
+
+    .aksel-combobox__list-item--new-option svg {
+      color: canvastext;
+    }
+
+    .aksel-combobox__list-item--new-option:hover {
+      color: highlight;
+    }
+
+    .aksel-combobox__list-item--new-option:hover svg {
+      color: highlight;
+    }
+  }
+
+  .aksel-form-summary {
+    border: 1px solid var(--ax-border-neutral-subtleA);
+    border-radius: var(--ax-radius-12);
+    background: var(--ax-bg-raised);
+    overflow: hidden;
+  }
+
+  .aksel-form-summary__header {
+    background: var(--ax-bg-neutral-moderateA);
+    padding: var(--ax-space-16) var(--ax-space-20);
+    justify-content: space-between;
+    gap: 0 var(--ax-space-12);
+    display: flex;
+  }
+
+  @media (max-width: 479px) {
+    .aksel-form-summary__header {
+      padding: var(--ax-space-12) var(--ax-space-16);
+      flex-direction: column;
+    }
+  }
+
+  .aksel-form-summary__header .aksel-form-summary__edit {
+    flex-shrink: 0;
+    align-self: flex-start;
+  }
+
+  .aksel-form-summary > .aksel-form-summary__answers {
+    border-top: 1px solid var(--ax-border-neutral-subtleA);
+  }
+
+  .aksel-form-summary__answers {
+    padding: var(--ax-space-16) var(--ax-space-20) var(--ax-space-20) var(--ax-space-20);
+    margin: 0;
+  }
+
+  @media (max-width: 479px) {
+    .aksel-form-summary__answers {
+      padding: var(--ax-space-12) var(--ax-space-16) var(--ax-space-16) var(--ax-space-16);
+    }
+  }
+
+  .aksel-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-neutral-subtleA);
+  }
+
+  .aksel-form-summary__answer:has(.aksel-form-summary__answer) {
+    padding-bottom: var(--ax-space-24);
+  }
+
+  .aksel-form-summary__answer:has(.aksel-form-summary__answer):last-child {
+    padding-bottom: 0;
+  }
+
+  @media (max-width: 479px) {
+    .aksel-form-summary__answer:not(:last-child) {
+      margin-bottom: var(--ax-space-12);
+      padding-bottom: var(--ax-space-12);
+    }
+
+    .aksel-form-summary__answer:has(.aksel-form-summary__answer) {
+      padding-bottom: var(--ax-space-20);
+    }
+  }
+
+  .aksel-form-summary__value:first-of-type {
+    margin-top: var(--ax-space-4);
+  }
+
+  .aksel-form-summary__value .aksel-form-summary__answers {
+    margin-top: var(--ax-space-8);
+    padding: var(--ax-space-16);
+    background: var(--ax-bg-moderateA);
+    border-radius: var(--ax-radius-8);
+    border: 1px solid var(--ax-border-subtleA);
+  }
+
+  .aksel-form-summary__value .aksel-form-summary__answers .aksel-form-summary__answer {
+    border-color: var(--ax-border-subtleA);
+  }
+
+  .aksel-form-summary__footer {
+    padding: var(--ax-space-16) var(--ax-space-20);
+    background: var(--ax-bg-raised);
+    border-top: 1px solid var(--ax-border-neutral-subtleA);
+    display: flex;
+  }
+
+  @media (max-width: 479px) {
+    .aksel-form-summary__footer {
+      padding: var(--ax-space-12) var(--ax-space-16);
+    }
+  }
+
+  .aksel-form-progress__bar {
+    margin-bottom: var(--ax-space-8);
+  }
+
+  .aksel-form-progress__button:focus-visible {
+    z-index: 1;
+  }
+
+  .aksel-form-progress__button[data-state="open"] svg {
+    transform: rotate(-180deg);
+  }
+
+  .aksel-form-progress__button[data-state="closed"] .aksel-form-progress__btn-txt-hide, .aksel-form-progress__button[data-state="open"] .aksel-form-progress__btn-txt-show {
+    display: none;
+  }
+
+  .aksel-form-progress__collapsible {
+    visibility: hidden;
+    border: 1px solid var(--ax-border-neutral-subtleA);
+    border-radius: var(--ax-radius-12);
+    background: var(--ax-bg-raised);
+    padding-inline: var(--ax-space-20);
+    opacity: .001;
+    grid-template-rows: 0fr;
+    margin-top: -2px;
+    padding-block: 0;
+    transition-property: margin-top, opacity, visibility, padding-block-start, grid-template-rows;
+    transition-duration: .3s;
+    transition-timing-function: cubic-bezier(.2, 0, 0, 1);
+    display: grid;
+    overflow: hidden;
+  }
+
+  .aksel-form-progress__collapsible[hidden] {
+    display: grid;
+  }
+
+  .aksel-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;
+  }
+
+  .aksel-form-progress__collapsible-content {
+    min-height: 0;
   }
 }
-.navds-form-progress__bar {
-  margin-bottom: var(--a-spacing-2);
-}
-.navds-form-progress__button[data-state="closed"] .navds-form-progress__btn-txt-hide,
-.navds-form-progress__button[data-state="open"] .navds-form-progress__btn-txt-show {
-  display: none;
-}
-.navds-form-progress__button:hover svg {
-  transform: translateY(1px);
-}
-.navds-form-progress__button[data-state="open"] svg {
-  transform: rotate(-180deg);
-}
-.navds-form-progress__button[data-state="open"]:hover svg {
-  transform: translateY(-1px) rotate(-180deg);
-}
-.navds-form-progress__collapsible {
-  display: grid;
-  grid-template-rows: 0fr;
-  overflow: hidden;
-  transition: grid-template-rows 0.3s cubic-bezier(0.3, 0, 0.15, 1);
-}
-.navds-form-progress__collapsible[hidden] {
-  /* CSS-resets sets 'hidden' to display non with imporant */
-  display: grid !important;
-}
-.navds-form-progress__collapsible[data-state="open"] {
-  grid-template-rows: 1fr;
-}
-.navds-form-progress__collapsible-content {
-  min-height: 0;
-  transition: visibility 0.3s;
-  visibility: hidden;
-}
-.navds-form-progress__collapsible[data-state="open"] .navds-form-progress__collapsible-content {
-  visibility: visible;
-}
-.navds-form-progress__stepper {
-  border: 2px solid var(--a-border-subtle);
-  border-radius: var(--a-border-radius-large);
-  padding: var(--a-spacing-2) var(--a-spacing-4);
-  margin-top: var(--a-spacing-1);
-}
+
+@layer aksel.components.modules, aksel.layout;