@navikt/ds-css 7.8.0 → 7.8.1

package/dist/darkside/version/7.8.1/component/form.css

@@ -0,0 +1,1871 @@
+@layer aksel.components {
+  .navds-fieldset {
+    border: 0;
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+  }
+
+  .navds-fieldset > :not(:first-child, :empty) {
+    margin-top: var(--ax-spacing-2);
+  }
+
+  .navds-fieldset__description {
+    color: var(--ax-text-subtle);
+  }
+
+  .navds-fieldset > .navds-fieldset__description:not(:empty) {
+    margin-top: .125rem;
+  }
+
+  .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: var(--ax-opacity-disabled);
+  }
+
+  @media (forced-colors: active) {
+    .navds-fieldset:disabled > .navds-fieldset__legend, .navds-fieldset:disabled > .navds-fieldset__description {
+      opacity: 1;
+    }
+  }
+
+  .navds-dropzone__area {
+    --__axc-dropzone-background: var(--ax-bg-input);
+    --__axc-dropzone-icon-padding: var(--ax-spacing-2);
+    --__axc-dropzone-animation-length-long: .4s;
+    --__axc-dropzone-animation-length-short: .25s;
+    --__axc-dropzone-animation-ease-out: cubic-bezier(.3, 1, .3, 1);
+    --__axc-dropzone-animation-over-under: cubic-bezier(.3, 1, .3, 1);
+    align-items: center;
+    gap: var(--ax-spacing-4);
+    text-align: center;
+    width: 100%;
+    padding: var(--ax-spacing-4) var(--ax-spacing-5);
+    border: 1px dashed var(--ax-border-default);
+    border-radius: var(--ax-border-radius-xlarge);
+    background-color: var(--__axc-dropzone-background);
+    color: var(--ax-text-default);
+    transition: background-color var(--__axc-dropzone-animation-length-short) var(--__axc-dropzone-animation-ease-out);
+    cursor: pointer;
+    flex-direction: column;
+    display: flex;
+    position: relative;
+  }
+
+  .navds-dropzone__area:hover:not([data-disabled="true"]) {
+    border-color: var(--ax-border-accent-strong);
+  }
+
+  .navds-dropzone__area:hover:not([data-disabled="true"]) > .navds-dropzone__area-button {
+    color: var(--ax-text-accent-strong);
+    background-color: var(--ax-bg-accent-moderate-hover);
+    box-shadow: inset 0 0 0 2px var(--ax-bg-accent-strong-hover);
+  }
+
+  .navds-dropzone__area:active .navds-dropzone__area-button {
+    background-color: var(--ax-bg-accent-strong-pressed);
+    color: var(--ax-text-accent-contrast);
+    box-shadow: none;
+  }
+
+  .navds-dropzone__area[data-disabled="true"] {
+    cursor: default;
+  }
+
+  .navds-dropzone--dragging > .navds-dropzone__area {
+    --__axc-dropzone-background: var(--ax-bg-input);
+  }
+
+  .navds-dropzone--dragging > .navds-dropzone__area:after {
+    color: var(--ax-text-accent-strong);
+    background-color: var(--ax-bg-accent-moderateA);
+    content: "";
+    border: 1px dashed var(--ax-border-accent-strong);
+    -webkit-backdrop-filter: blur(8px);
+    backdrop-filter: blur(8px);
+    border-radius: var(--ax-border-radius-xlarge);
+    animation: akselDropzoneDragoverAnimation var(--__axc-dropzone-animation-length-short) var(--__axc-dropzone-animation-ease-out);
+    margin: -1px;
+    position: absolute;
+    inset: 0;
+  }
+
+  @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-accent-moderateA);
+    }
+  }
+
+  .navds-dropzone__area-icon {
+    padding: var(--__axc-dropzone-icon-padding);
+    visibility: hidden;
+    display: grid;
+  }
+
+  .navds-dropzone--error > .navds-dropzone__area {
+    outline: 2px solid var(--ax-border-danger);
+    outline-offset: -1px;
+    border-color: rgba(0, 0, 0, 0);
+  }
+
+  .navds-dropzone__area-release {
+    top: var(--ax-spacing-4);
+    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;
+  }
+
+  .navds-dropzone__area-release__icon {
+    padding: var(--__axc-dropzone-icon-padding);
+    border-radius: var(--ax-border-radius-full);
+    background-color: var(--ax-bg-neutral-moderateA);
+    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-dropzone--dragging .navds-dropzone__area-release > .navds-dropzone__area-release__icon {
+    background-color: rgba(0, 0, 0, 0);
+    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(--__axc-dropzone-animation-length-long) var(--__axc-dropzone-animation-over-under);
+    visibility: visible;
+  }
+
+  .navds-dropzone--dragging .navds-dropzone__area-release {
+    color: var(--ax-text-accent-strong);
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .navds-dropzone__area-disabled {
+    color: var(--ax-text-subtle);
+    align-items: center;
+    gap: var(--ax-spacing-2);
+    flex-direction: column;
+    display: flex;
+  }
+
+  .navds-file-upload :is(ul, li), ul:has( > li.navds-file-item), li.navds-file-item {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .navds-file-item__inner {
+    background-color: var(--ax-bg-raised);
+    border: 1px solid var(--ax-border-subtleA);
+    outline-offset: -1px;
+    border-radius: var(--ax-border-radius-xlarge);
+    padding: var(--ax-spacing-3) var(--ax-spacing-4);
+    gap: var(--ax-spacing-3);
+    align-items: flex-start;
+    transition: outline-color .25s cubic-bezier(0, .3, .15, 1);
+    display: flex;
+  }
+
+  .navds-file-item--error > .navds-file-item__inner {
+    outline: 2px solid var(--ax-border-danger);
+  }
+
+  .navds-file-item__icon {
+    background-color: var(--ax-bg-neutral-moderateA);
+    color: var(--ax-text-default);
+    border-radius: var(--ax-border-radius-full);
+    min-width: 2.5rem;
+    min-height: 2.5rem;
+    margin-top: var(--ax-spacing-05);
+    place-content: center;
+    transition: background-color .25s cubic-bezier(0, .3, .15, 1);
+    display: grid;
+  }
+
+  .navds-file-item__icon > svg {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .navds-file-item__icon--loading {
+    background-color: rgba(0, 0, 0, 0);
+  }
+
+  .navds-file-item__file-info {
+    word-break: break-word;
+  }
+
+  .navds-file-item__button {
+    margin-left: auto;
+  }
+
+  .navds-file-item__error {
+    color: var(--ax-text-danger);
+    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;
+  }
+
+  .navds-file-item__error .navds-file-item__error {
+    padding-top: var(--ax-spacing-1);
+    grid-template-rows: 1fr;
+  }
+
+  .navds-file-item__error-content {
+    gap: var(--ax-spacing-1);
+    min-height: 0;
+    display: flex;
+  }
+
+  .navds-file-item__error-content > svg {
+    flex-shrink: 0;
+    height: 1rem;
+    margin-top: .1rem;
+  }
+
+  .navds-form-field {
+    justify-items: start;
+    gap: var(--ax-spacing-2);
+    display: grid;
+  }
+
+  .navds-form-field__description {
+    color: var(--ax-text-subtle);
+    margin-top: -.375rem;
+  }
+
+  .navds-form-field .navds-error-message, .navds-fieldset .navds-error-message, .navds-file-item .navds-error-message {
+    gap: var(--ax-spacing-2);
+    display: flex;
+  }
+
+  .navds-form-field .navds-error-message:before, .navds-fieldset .navds-error-message:before, .navds-file-item .navds-error-message:before {
+    content: "•";
+  }
+
+  .navds-form-field--disabled {
+    opacity: var(--ax-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  .navds-form-field__error:empty {
+    display: none;
+  }
+
+  .navds-form-field__subdescription {
+    color: var(--ax-text-subtle);
+  }
+
+  .navds-form-field--readonly > :where(.navds-form-field__label) {
+    display: inline-flex;
+  }
+
+  .navds-form-field__readonly-icon {
+    margin-top: var(--ax-spacing-05);
+    margin-right: var(--ax-spacing-1);
+    flex-shrink: 0;
+    align-self: flex-start;
+  }
+
+  @media (forced-colors: active) {
+    .navds-form-field--disabled {
+      opacity: 1;
+    }
+  }
+
+  .navds-error-summary {
+    background-color: var(--ax-bg-default);
+    padding: var(--ax-spacing-4) var(--ax-spacing-5);
+    border: 4px solid var(--ax-border-danger);
+    border-radius: var(--ax-border-radius-xlarge);
+    outline-offset: 2px;
+  }
+
+  .navds-error-summary:focus-visible, .navds-error-summary:has(.navds-error-summary__heading:focus-visible) {
+    outline: 2px solid var(--ax-border-focus);
+  }
+
+  @supports not selector(:focus-visible) {
+    .navds-error-summary:focus {
+      outline: 2px solid var(--ax-border-focus);
+    }
+  }
+
+  .navds-error-summary--small {
+    padding: var(--ax-spacing-3) var(--ax-spacing-4);
+  }
+
+  .navds-error-summary--small .navds-error-summary__heading {
+    scroll-margin-top: var(--ax-spacing-4);
+  }
+
+  .navds-error-summary--small > .navds-error-summary__list {
+    margin: var(--ax-spacing-2) 0;
+    gap: var(--ax-spacing-2);
+    padding-left: var(--ax-spacing-5);
+  }
+
+  .navds-error-summary__heading {
+    scroll-margin-top: var(--ax-spacing-6);
+  }
+
+  .navds-error-summary__heading:focus {
+    outline: none;
+  }
+
+  .navds-error-summary__list {
+    margin: var(--ax-spacing-3) 0;
+    gap: var(--ax-spacing-3);
+    padding-left: var(--ax-spacing-6);
+    list-style: inherit;
+    flex-direction: column;
+    display: flex;
+  }
+
+  .navds-confirmation-panel__inner {
+    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));
+    flex-direction: column;
+    justify-self: stretch;
+    transition: background-color .1s linear;
+    display: flex;
+    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: "";
+      forced-color-adjust: none;
+      border-color: orange;
+      border-left-style: solid;
+      border-left-width: 8px;
+      border-start-start-radius: calc(var(--a-border-radius-medium)  - 1px);
+      border-end-start-radius: calc(var(--a-border-radius-medium)  - 1px);
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+
+    .navds-confirmation-panel--checked .navds-confirmation-panel__inner:before {
+      border-color: green;
+    }
+
+    .navds-confirmation-panel--error .navds-confirmation-panel__inner:before {
+      border-color: red;
+    }
+  }
+
+  .navds-checkbox, .navds-radio {
+    width: fit-content;
+    position: relative;
+  }
+
+  .navds-checkbox__input, .navds-radio__input {
+    z-index: 1;
+    opacity: 0;
+    cursor: pointer;
+    width: 3rem;
+    height: 3rem;
+    position: absolute;
+    top: 0;
+    left: -.75rem;
+  }
+
+  .navds-checkbox__label, .navds-radio__label {
+    padding: var(--ax-spacing-3) 0;
+    cursor: pointer;
+    gap: var(--ax-spacing-2);
+    --__axc-radio-checkbox-readonly-bg: var(--ax-bg-neutral-moderate);
+    --__axc-radio-checkbox-readonly-border: var(--ax-border-subtle);
+    display: flex;
+  }
+
+  .navds-checkbox__label:before, .navds-radio__label:before {
+    content: "";
+    border-radius: var(--ax-border-radius-medium);
+    background-color: var(--ax-bg-input);
+    border: 2px solid var(--ax-border-default);
+    flex-shrink: 0;
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .navds-radio__label:before {
+    border-radius: var(--ax-border-radius-full);
+  }
+
+  .navds-checkbox__content, .navds-radio__content {
+    flex-direction: column;
+    gap: .125rem;
+    display: flex;
+  }
+
+  .navds-checkbox--small > .navds-checkbox__input, .navds-radio--small > .navds-radio__input {
+    width: 2rem;
+    height: 2rem;
+    top: 0;
+    left: -.375rem;
+  }
+
+  .navds-checkbox--small > .navds-checkbox__label, .navds-radio--small > .navds-radio__label {
+    padding: var(--ax-spacing-1-alt) 0;
+  }
+
+  .navds-checkbox--small > .navds-checkbox__label:before, .navds-radio--small > .navds-radio__label:before {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .navds-checkbox__input:focus + .navds-checkbox__label:before, .navds-radio__input:focus + .navds-radio__label:before {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+  }
+
+  .navds-checkbox__input:indeterminate + .navds-checkbox__label:after {
+    content: "";
+    transform: translate(var(--ax-spacing-1-alt), -50%);
+    background-color: var(--ax-bg-default);
+    border-radius: 1px;
+    flex-shrink: 0;
+    width: .75rem;
+    height: .25rem;
+    position: absolute;
+    top: 50%;
+  }
+
+  .navds-checkbox--small .navds-checkbox__input:indeterminate + .navds-checkbox__label:after {
+    transform: translate(.25rem, -50%);
+  }
+
+  .navds-checkbox__input:where(:checked, :indeterminate) + .navds-checkbox__label:before {
+    background-color: var(--ax-bg-accent-strong-pressed);
+    border-color: var(--ax-bg-accent-strong-pressed);
+  }
+
+  .navds-checkbox__input:where(:checked, :indeterminate):not(:disabled):hover + .navds-checkbox__label:before {
+    border-color: var(--ax-bg-accent-strong-hover);
+    background-color: var(--ax-bg-accent-strong-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(--ax-bg-default);
+    height: 1.5rem;
+    transform: translate(var(--ax-spacing-1-alt));
+    pointer-events: none;
+    align-items: center;
+    display: flex;
+    position: absolute;
+  }
+
+  .navds-checkbox--small .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
+    transform: translate(.25rem, -10%);
+  }
+
+  .navds-checkbox__icon > svg {
+    vertical-align: initial;
+    display: inline;
+  }
+
+  .navds-checkbox--small > .navds-checkbox__input:checked + .navds-checkbox__label:before {
+    background-position: .25rem;
+  }
+
+  .navds-radio__input:checked + .navds-radio__label:before {
+    background-color: var(--ax-bg-input);
+    border: 8px solid var(--ax-bg-accent-strong-pressed);
+  }
+
+  .navds-radio--small > .navds-radio__input:checked + .navds-radio__label:before {
+    border-width: 6px;
+  }
+
+  .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label, .navds-radio__input:hover:not(:disabled) + .navds-radio__label {
+    color: var(--ax-text-accent-strong);
+  }
+
+  .navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label:before, .navds-radio__input:hover:not(:disabled, :checked) + .navds-radio__label:before {
+    border-color: var(--ax-border-accent-strong);
+    background-color: var(--ax-bg-accent-moderate-hoverA);
+  }
+
+  .navds-checkbox--error > .navds-checkbox__input:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label:before, .navds-radio--error > .navds-radio__input:not(:disabled, :checked) + .navds-radio__label:before {
+    border-color: var(--ax-border-danger);
+  }
+
+  .navds-checkbox--error > .navds-checkbox__input:not(:disabled, :checked, :indeterminate):hover + .navds-checkbox__label:before, .navds-radio--error > .navds-radio__input:not(:disabled, :checked):hover + .navds-radio__label:before {
+    background-color: var(--ax-bg-danger-moderate-hoverA);
+    border-color: var(--ax-border-danger-strong);
+  }
+
+  .navds-checkbox--error > .navds-checkbox__input:is(:checked, :indeterminate):not(:disabled) + .navds-checkbox__label:before {
+    background-color: var(--ax-bg-danger-strong-pressed);
+    border-color: var(--ax-bg-danger-strong-pressed);
+  }
+
+  .navds-radio--error > .navds-radio__input:checked + .navds-radio__label:before {
+    border-color: var(--ax-bg-danger-strong-pressed);
+  }
+
+  .navds-checkbox--disabled, .navds-radio--disabled {
+    opacity: var(--ax-opacity-disabled);
+  }
+
+  .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;
+  }
+
+  .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(--ax-text-default);
+  }
+
+  .navds-checkbox--readonly > .navds-checkbox__input:not(:disabled) + .navds-checkbox__label:before, .navds-checkbox--readonly > .navds-checkbox__input:hover .navds-checkbox__label:before, .navds-radio--readonly > .navds-radio__input:not(:disabled, :checked) + .navds-radio__label:before, .navds-radio--readonly > .navds-radio__input:hover:not(:checked, :focus) + .navds-radio__label:before {
+    background-color: var(--__axc-radio-checkbox-readonly-bg);
+    border-color: var(--__axc-radio-checkbox-readonly-border);
+  }
+
+  .navds-checkbox--readonly > .navds-checkbox__input:where(:checked, :indeterminate) + .navds-checkbox__label:before {
+    border-color: var(--__axc-radio-checkbox-readonly-border);
+    background-color: var(--__axc-radio-checkbox-readonly-bg);
+  }
+
+  .navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
+    color: var(--ax-text-subtle);
+  }
+
+  .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label:before {
+    background-color: var(--ax-bg-neutral-strong);
+    box-shadow: inset 0 0 0 2px var(--ax-border-subtle), inset 0 0 0 8px var(--ax-bg-neutral-moderate);
+    border-width: 0;
+  }
+
+  .navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label:after {
+    background-color: var(--ax-text-subtle);
+  }
+
+  @media (forced-colors: active) {
+    .navds-checkbox, .navds-radio {
+      --__axc-radio-checkbox-high-contrast-bg: field;
+      --__axc-radio-checkbox-high-contrast-text: fieldtext;
+      --__axc-radio-checkbox-high-contrast-highlight: highlight;
+      --ax-border-focus: Highlight;
+    }
+
+    .navds-checkbox__label:before, .navds-radio__label:before {
+      border: 1px solid var(--__axc-radio-checkbox-high-contrast-text);
+      background-color: var(--__axc-radio-checkbox-high-contrast-bg);
+    }
+
+    .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
+      color: var(--__axc-radio-checkbox-high-contrast-text);
+    }
+
+    .navds-checkbox__input:indeterminate + .navds-checkbox__label:after {
+      background-color: var(--__axc-radio-checkbox-high-contrast-text);
+    }
+
+    .navds-radio__input:checked + .navds-radio__label:before {
+      border: 6px solid var(--__axc-radio-checkbox-high-contrast-text);
+    }
+
+    :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;
+    }
+
+    .navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label:before {
+      border: 1px solid var(--__axc-radio-checkbox-high-contrast-text);
+      background-color: var(--__axc-radio-checkbox-high-contrast-bg);
+    }
+
+    .navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label:after {
+      background-color: var(--__axc-radio-checkbox-high-contrast-text);
+    }
+
+    .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label:before {
+      border-width: 6px;
+    }
+
+    .navds-checkbox--disabled, .navds-radio--disabled {
+      opacity: 1;
+      --__axc-radio-checkbox-high-contrast-bg: field;
+      --__axc-radio-checkbox-high-contrast-text: graytext;
+    }
+
+    :is(.navds-checkbox--disabled, .navds-radio--disabled) :is(.navds-checkbox__label, .navds-radio__label) {
+      color: graytext;
+    }
+  }
+
+  .navds-select__input {
+    appearance: none;
+    background-color: var(--ax-bg-input);
+    border-radius: var(--ax-border-radius-medium);
+    border: 1px solid var(--ax-border-default);
+    color: var(--ax-text-default);
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 3rem;
+    padding: var(--ax-spacing-2);
+    padding-right: var(--ax-spacing-10);
+    display: inline-block;
+    position: relative;
+  }
+
+  .navds-select__input:hover {
+    border-color: var(--ax-border-accent-strong);
+    cursor: pointer;
+  }
+
+  .navds-select__input:focus {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+    border-color: var(--ax-border-accent-strong);
+  }
+
+  @media (forced-colors: active) {
+    .navds-select__input {
+      color: buttontext;
+      background-color: buttonface;
+      border-color: buttontext;
+    }
+  }
+
+  .navds-select__container {
+    width: 100%;
+    color: var(--ax-text-default);
+    display: flex;
+    position: relative;
+  }
+
+  .navds-select__chevron {
+    right: var(--ax-spacing-2);
+    pointer-events: none;
+    color: var(--ax-text-default);
+    align-self: center;
+    font-size: 1.5rem;
+    position: absolute;
+  }
+
+  @media (forced-colors: active) {
+    .navds-select__chevron {
+      color: buttontext;
+    }
+  }
+
+  .navds-form-field--small .navds-select__input {
+    min-height: 2rem;
+    padding-block: 0;
+  }
+
+  .navds-select--error > * select {
+    box-shadow: 0 0 0 1px var(--ax-border-danger);
+    border-color: var(--ax-border-danger);
+  }
+
+  .navds-select--error > * select:hover, .navds-select--error > * select:focus {
+    box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
+    border-color: var(--ax-border-danger-strong);
+  }
+
+  .navds-select__input:disabled {
+    background-color: var(--ax-bg-input);
+    border: 1px solid var(--ax-border-default);
+    box-shadow: none;
+    cursor: not-allowed;
+    opacity: 1;
+    color: var(--ax-text-default);
+  }
+
+  .navds-select__input:disabled > option {
+    color: var(--ax-text-default);
+  }
+
+  @media (forced-colors: active) {
+    .navds-select__input:disabled + .navds-select__chevron {
+      color: graytext;
+    }
+  }
+
+  .navds-select--readonly .navds-select__input {
+    background-color: var(--ax-bg-neutral-moderate);
+    border-color: var(--ax-border-neutral-subtleA);
+    cursor: default;
+  }
+
+  @media (forced-colors: active) {
+    .navds-select--readonly .navds-select__input:is(:hover, :focus) {
+      color: buttontext;
+      background-color: buttonface;
+      border-color: buttontext;
+    }
+  }
+
+  .navds-select--readonly .navds-select__chevron {
+    color: var(--ax-text-subtle);
+  }
+
+  .navds-switch {
+    width: fit-content;
+    min-height: 3rem;
+    position: relative;
+  }
+
+  .navds-switch--small {
+    min-height: 2rem;
+  }
+
+  .navds-switch__input {
+    cursor: pointer;
+    z-index: 1;
+    opacity: 0;
+    width: 3rem;
+    height: 3rem;
+    position: absolute;
+    top: 0;
+  }
+
+  .navds-switch--small > .navds-switch__input {
+    height: 2rem;
+    top: 0;
+  }
+
+  .navds-switch__label-wrapper {
+    cursor: pointer;
+    color: var(--ax-text-default);
+  }
+
+  .navds-switch__content {
+    flex-direction: column;
+    gap: .125rem;
+    padding: .75rem 0 .75rem 3.25rem;
+    display: flex;
+  }
+
+  .navds-switch--right .navds-switch__content {
+    padding: .75rem 3.25rem .75rem 0;
+  }
+
+  .navds-switch--small .navds-switch__content {
+    padding: calc(var(--ax-spacing-2)  - var(--ax-spacing-05)) 0 calc(var(--ax-spacing-2)  - var(--ax-spacing-05)) 3.25rem;
+  }
+
+  .navds-switch--right.navds-switch--small .navds-switch__content {
+    padding: calc(var(--ax-spacing-2)  - var(--ax-spacing-05)) 3.25rem calc(var(--ax-spacing-2)  - var(--ax-spacing-05)) 0;
+  }
+
+  .navds-switch--with-description {
+    padding-bottom: 0;
+  }
+
+  .navds-switch__input:hover ~ .navds-switch__label-wrapper, .navds-switch__label-wrapper:hover {
+    color: var(--ax-text-accent-strong);
+  }
+
+  .navds-switch__input:disabled:hover ~ .navds-switch__label-wrapper {
+    color: inherit;
+  }
+
+  .navds-switch__track {
+    background-color: var(--ax-bg-input);
+    width: 2.75rem;
+    height: 1.5rem;
+    top: var(--ax-spacing-3);
+    border-radius: var(--ax-border-radius-full);
+    border: 2px solid var(--ax-border-default);
+    transition-property: background-color, border-color;
+    transition-duration: .1s;
+    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+    position: absolute;
+    left: 0;
+  }
+
+  .navds-switch--small > .navds-switch__track {
+    top: var(--ax-spacing-1);
+  }
+
+  .navds-switch__input:checked ~ .navds-switch__track {
+    background-color: var(--ax-bg-accent-strong-pressed);
+    border-color: var(--ax-bg-accent-strong-pressed);
+  }
+
+  .navds-switch__input:hover:checked ~ .navds-switch__track {
+    background-color: var(--ax-bg-accent-strong-hover);
+    border-color: var(--ax-bg-accent-strong-hover);
+  }
+
+  .navds-switch__input:disabled ~ .navds-switch__track {
+    background-color: var(--ax-bg-input);
+    border-color: var(--ax-border-default);
+  }
+
+  .navds-switch__input:checked:disabled ~ .navds-switch__track {
+    background-color: var(--ax-bg-accent-strong-pressed);
+    border-color: var(--ax-bg-accent-strong-pressed);
+  }
+
+  .navds-switch__input:focus-visible ~ .navds-switch__track {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+  }
+
+  .navds-switch__thumb {
+    background-color: var(--ax-bg-neutral-strong);
+    border-radius: var(--ax-border-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);
+  }
+
+  .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+    background-color: var(--ax-bg-raised);
+    color: var(--ax-text-accent-strong);
+    width: 1.25rem;
+    height: 1.25rem;
+    top: 0;
+    left: 0;
+    transform: translateX(1.25rem);
+  }
+
+  .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb > .navds-switch__checkmark {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  .navds-switch__checkmark {
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity .15s cubic-bezier(.4, 0, .2, 1);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .navds-switch__input:hover:not(:disabled) ~ .navds-switch__track > .navds-switch__thumb {
+      transform: translateX(.0625rem);
+    }
+
+    .navds-switch__input:checked:hover:not(:disabled) ~ .navds-switch__track > .navds-switch__thumb {
+      transform: translateX(1.19rem);
+    }
+  }
+
+  .navds-switch--right {
+    width: auto;
+  }
+
+  .navds-switch--right .navds-switch__input, .navds-switch--right .navds-switch__track {
+    left: auto;
+    right: 0;
+  }
+
+  .navds-switch__input:disabled {
+    appearance: none;
+  }
+
+  .navds-switch--disabled:not(.navds-switch--loading) {
+    opacity: var(--ax-opacity-disabled);
+  }
+
+  .navds-switch__input:disabled, .navds-switch__input:disabled ~ .navds-switch__label-wrapper {
+    cursor: not-allowed;
+  }
+
+  .navds-switch--readonly > .navds-switch__track, .navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__track, .navds-switch--readonly > .navds-switch__input:checked ~ .navds-switch__track, .navds-switch--readonly > .navds-switch__input:checked:hover ~ .navds-switch__track {
+    background-color: var(--ax-bg-neutral-moderate);
+    border-color: var(--ax-border-neutral-subtleA);
+  }
+
+  .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(--ax-text-default);
+  }
+
+  .navds-switch--readonly .navds-switch__label {
+    display: inline-flex;
+  }
+
+  .navds-switch--readonly .navds-switch__thumb {
+    background-color: var(--ax-bg-neutral-strong);
+  }
+
+  .navds-switch--readonly > .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+    background-color: var(--ax-bg-neutral-strong);
+    color: var(--ax-text-neutral-contrast);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
+      transform: translateX(0);
+    }
+
+    .navds-switch--readonly > .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
+      transform: translateX(1.25rem);
+    }
+  }
+
+  @media (forced-colors: active) {
+    .navds-switch__input:hover ~ .navds-switch__label-wrapper, .navds-switch__label-wrapper:hover {
+      color: highlight;
+    }
+
+    .navds-switch__thumb, .navds-switch--readonly .navds-switch__thumb {
+      background-color: fieldtext !important;
+    }
+
+    .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;
+    }
+
+    .navds-switch__input:focus-visible ~ .navds-switch__track {
+      outline-offset: 2px;
+      outline: 2px solid highlight;
+    }
+
+    .navds-switch--disabled:not(.navds-switch--loading) {
+      opacity: 1;
+    }
+
+    .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__thumb {
+      background-color: graytext;
+    }
+
+    .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__track {
+      border-color: graytext !important;
+    }
+
+    .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;
+    }
+  }
+
+  .navds-text-field__input {
+    appearance: none;
+    padding: var(--ax-spacing-2);
+    background: var(--ax-bg-input);
+    border-radius: var(--ax-border-radius-medium);
+    border: 1px solid var(--ax-border-default);
+    width: 100%;
+    min-height: 3rem;
+    color: var(--ax-text-default);
+  }
+
+  .navds-text-field__input:hover {
+    border-color: var(--ax-border-accent-strong);
+  }
+
+  .navds-text-field__input:focus-visible {
+    border-color: var(--ax-border-accent-strong);
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+  }
+
+  .navds-text-field__input:disabled {
+    background-color: var(--ax-bg-input);
+    border-color: var(--ax-border-default);
+    cursor: not-allowed;
+  }
+
+  .navds-text-field__input::placeholder {
+    color: var(--ax-text-neutral);
+  }
+
+  .navds-text-field__input[size] {
+    width: auto;
+  }
+
+  .navds-form-field--small .navds-text-field__input {
+    padding: 0 var(--ax-spacing-2);
+    min-height: 2rem;
+  }
+
+  .navds-text-field--error .navds-text-field__input:not(:disabled) {
+    border-color: var(--ax-border-danger);
+    box-shadow: 0 0 0 1px var(--ax-border-danger);
+  }
+
+  .navds-text-field--readonly .navds-text-field__input {
+    background-color: var(--ax-bg-neutral-moderate);
+    border-color: var(--ax-border-neutral-subtleA);
+    cursor: default;
+  }
+
+  .navds-text-field__input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  .navds-text-field__input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+  }
+
+  .navds-text-field__input[type="search"]::-webkit-search-results-button {
+    -webkit-appearance: none;
+  }
+
+  .navds-text-field__input[type="search"]::-webkit-search-results-decoration {
+    -webkit-appearance: none;
+  }
+
+  @media (forced-colors: active) {
+    .navds-text-field__input {
+      color: fieldtext;
+      background-color: field;
+    }
+  }
+
+  .navds-textarea__input {
+    height: var(--__axc-textarea-height);
+    appearance: none;
+    padding: var(--ax-spacing-2);
+    background-color: var(--ax-bg-input);
+    border-radius: var(--ax-border-radius-medium);
+    border: 1px solid var(--ax-border-default);
+    resize: none;
+    width: 100%;
+    color: var(--ax-text-default);
+    display: block;
+  }
+
+  .navds-textarea__input::placeholder {
+    color: var(--ax-text-subtle);
+  }
+
+  .navds-textarea__input:hover {
+    border-color: var(--ax-border-accent-strong);
+  }
+
+  .navds-textarea__input:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+    border-color: var(--ax-border-accent-strong);
+  }
+
+  .navds-textarea__input:disabled {
+    background-color: var(--ax-bg-input);
+    border-color: var(--ax-border-default);
+    cursor: not-allowed;
+  }
+
+  .navds-form-field--small .navds-textarea__input {
+    padding: var(--ax-spacing-1-alt);
+  }
+
+  .navds-textarea--readonly .navds-textarea__input {
+    background-color: var(--ax-bg-neutral-moderate);
+    border-color: var(--ax-border-neutral-subtleA);
+    cursor: default;
+  }
+
+  .navds-textarea__counter {
+    color: var(--ax-text-subtle);
+    margin-top: -.25rem;
+  }
+
+  .navds-textarea__counter--error {
+    color: var(--ax-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 {
+    flex-direction: column;
+    margin: -3px;
+    padding: 3px;
+    display: flex;
+    overflow: hidden;
+  }
+
+  .navds-textarea--autoscrollbar .navds-textarea__input {
+    scrollbar-gutter: stable;
+  }
+
+  .navds-textarea--error .navds-textarea__input:not(:disabled) {
+    box-shadow: 0 0 0 1px var(--ax-border-danger);
+    border-color: var(--ax-border-danger);
+  }
+
+  @media (forced-colors: active) {
+    .navds-textarea__input {
+      color: fieldtext;
+      background-color: field;
+    }
+  }
+
+  .navds-search {
+    flex-direction: column;
+    width: 100%;
+    display: flex;
+  }
+
+  .navds-search__wrapper-inner {
+    width: 100%;
+    position: relative;
+  }
+
+  .navds-search--with-size .navds-search__wrapper-inner {
+    width: inherit;
+  }
+
+  .navds-search--with-size .navds-search__wrapper {
+    width: fit-content;
+  }
+
+  .navds-search__wrapper {
+    border-radius: var(--ax-border-radius-medium);
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .navds-search__wrapper:has(.navds-search__input:focus-visible) {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+  }
+
+  .navds-search__input {
+    padding-right: var(--ax-spacing-10);
+  }
+
+  .navds-search__input:focus-visible {
+    outline: none;
+  }
+
+  .navds-search__input.navds-search__input--primary, .navds-search__input.navds-search__input--secondary {
+    border-right: none;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .navds-search__input--simple {
+    padding-left: var(--ax-spacing-10);
+  }
+
+  .navds-form-field--small .navds-search__input {
+    padding-right: var(--ax-spacing-7);
+  }
+
+  .navds-form-field--small .navds-search__input--simple {
+    padding-left: var(--ax-spacing-7);
+  }
+
+  .navds-form-field--small .navds-search__search-icon {
+    left: var(--ax-spacing-1);
+    font-size: 1.25rem;
+  }
+
+  .navds-form-field--small .navds-search__button-clear {
+    right: var(--ax-spacing-1);
+  }
+
+  .navds-search__search-icon {
+    left: var(--ax-spacing-2);
+    pointer-events: none;
+    font-size: 1.5rem;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .navds-search--disabled .navds-search__search-icon {
+    opacity: var(--ax-opacity-disabled);
+  }
+
+  .navds-search__button-clear {
+    right: var(--ax-spacing-2);
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .navds-search__button-search {
+    border-radius: 0;
+    border-top-right-radius: var(--ax-border-radius-medium);
+    border-bottom-right-radius: var(--ax-border-radius-medium);
+    flex-shrink: 0;
+  }
+
+  .navds-search__button-search.navds-button--secondary {
+    --__axc-button-border-width: 1px;
+    --__axc-button-border-color: var(--ax-border-default);
+  }
+
+  .navds-search__button-search.navds-button--secondary:not(:hover, :active) {
+    background-color: var(--ax-bg-input);
+  }
+
+  .navds-search__button-search.navds-button--secondary:hover:not(:disabled) {
+    --__axc-button-border-color: var(--ax-border-accent-strong);
+  }
+
+  .navds-search__button-search.navds-button--secondary:active:not(:disabled) {
+    --__axc-button-border-color: transparent;
+  }
+
+  .navds-search:not(.navds-search--error, .navds-search--disabled) .navds-search__wrapper:has(.navds-search__input:is(:hover, :focus-visible)) .navds-search__button-search.navds-button--secondary:not(:hover, :active) {
+    --__axc-button-border-color: var(--ax-border-accent-strong);
+  }
+
+  .navds-search--error .navds-search__input:not(:disabled) {
+    border-color: var(--ax-border-danger);
+    box-shadow: inset -2px 0 0 0 var(--ax-border-danger), inset 0 0 0 1px var(--ax-border-danger);
+  }
+
+  .navds-search--error .navds-search__input:not(:disabled).navds-search__input--simple {
+    box-shadow: inset 0 0 0 1px var(--ax-border-danger);
+  }
+
+  .navds-search__input:focus-visible, .navds-search__button-search:focus-visible {
+    z-index: 1;
+  }
+
+  .navds-search--disabled .navds-search__input {
+    opacity: var(--ax-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  .navds-combobox__wrapper {
+    --__axc-combobox-icon-size: 1.5rem;
+    --__axc-combobox-wrapper-inner-padding: var(--ax-spacing-2);
+    --__axc-combobox-list-item-padding-block: var(--ax-spacing-3);
+    --__axc-combobox-list-item-padding-inline: var(--ax-spacing-3);
+    --__axc-combobox-border-width: 1px;
+    --__axc-combobox-input-height: 2rem;
+    border-radius: var(--ax-border-radius-medium);
+    flex-direction: column;
+    width: 100%;
+    display: flex;
+    position: relative;
+  }
+
+  .navds-form-field:not(:is(.navds-combobox--disabled, .navds-combobox--readonly)) .navds-combobox__wrapper:hover {
+    border-color: var(--ax-border-focus);
+  }
+
+  .navds-form-field--small .navds-combobox__wrapper {
+    --__axc-combobox-icon-size: 1.25rem;
+    --__axc-combobox-wrapper-inner-padding: var(--ax-spacing-1);
+    --__axc-combobox-list-item-padding-block: var(--ax-spacing-1-alt);
+    --__axc-combobox-list-item-padding-inline: var(--ax-spacing-2);
+    --__axc-combobox-input-height: 1.5rem;
+  }
+
+  .navds-combobox--disabled {
+    opacity: var(--ax-opacity-disabled);
+  }
+
+  .navds-combobox--disabled .navds-combobox__wrapper :hover {
+    cursor: not-allowed;
+  }
+
+  .navds-combobox--disabled .navds-combobox__selected-options, .navds-combobox--disabled .navds-combobox--readonly {
+    pointer-events: none;
+  }
+
+  .navds-combobox--readonly {
+    pointer-events: none;
+  }
+
+  .navds-combobox--readonly .navds-combobox__selected-options .navds-chips__chip {
+    background-color: var(--ax-bg-neutral-moderateA);
+  }
+
+  .navds-combobox--readonly .navds-combobox__button-toggle-list {
+    color: var(--ax-bg-neutral-moderate);
+  }
+
+  .navds-combobox--readonly .navds-combobox__wrapper {
+    border-color: var(--ax-border-subtle);
+    overflow: clip;
+  }
+
+  .navds-combobox--readonly .navds-text-field__input, .navds-combobox--readonly .navds-combobox__input {
+    background-color: var(--ax-bg-neutral-moderate);
+  }
+
+  .navds-combobox__button-toggle-list svg, .navds-combobox__list svg {
+    width: var(--__axc-combobox-icon-size);
+    height: var(--__axc-combobox-icon-size);
+  }
+
+  .navds-combobox__wrapper-inner {
+    border: 1px solid var(--ax-border-default);
+    border-radius: var(--ax-border-radius-medium);
+  }
+
+  .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+    border-color: var(--ax-border-focus);
+  }
+
+  .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible).navds-combobox__wrapper-inner--virtually-unfocused {
+    border-color: var(--ax-border-default);
+    outline: none;
+  }
+
+  .navds-combobox__wrapper-inner.navds-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 > :first-child {
+    flex: 2;
+  }
+
+  .navds-combobox__wrapper-inner > :last-child {
+    flex-flow: row;
+    display: flex;
+  }
+
+  .navds-combobox__wrapper-inner:hover {
+    cursor: text;
+  }
+
+  .navds-combobox--error .navds-combobox__wrapper-inner {
+    border-color: var(--ax-border-danger);
+    box-shadow: 0 0 0 1px var(--ax-border-danger);
+  }
+
+  .navds-combobox--error .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
+    border-color: var(--ax-border-danger);
+  }
+
+  .navds-combobox__selected-options {
+    align-items: center;
+    gap: 0;
+  }
+
+  .navds-combobox__selected-options > li {
+    border-radius: var(--ax-border-radius-full);
+    margin: auto 0;
+  }
+
+  .navds-combobox__selected-options > li:last-of-type {
+    flex: 1;
+    display: flex;
+  }
+
+  .navds-combobox__selected-options[data-type="multiple"] {
+    gap: var(--__axc-combobox-wrapper-inner-padding);
+  }
+
+  .navds-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__input-wrapper {
+    width: 100%;
+  }
+
+  .navds-combobox__input {
+    width: 100%;
+    min-width: 10ch;
+    height: var(--__axc-combobox-input-height);
+    background: var(--ax-bg-input);
+    border: none;
+    flex: 1;
+    margin: 0;
+    padding: 0;
+  }
+
+  .navds-combobox__input:focus-visible {
+    border: none;
+    outline: 0;
+  }
+
+  .navds-combobox__selected-options > li:only-child > .navds-combobox__input {
+    margin-left: var(--ax-spacing-1);
+  }
+
+  .navds-combobox__input--hide-caret {
+    caret-color: rgba(0, 0, 0, 0);
+  }
+
+  @supports not selector(:focus-visible) {
+    .navds-combobox__input:focus {
+      border: none;
+      outline: none;
+    }
+
+    .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus), .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus).navds-combobox__wrapper-inner--virtually-unfocused {
+      outline: none;
+    }
+  }
+
+  .navds-combobox__input::-webkit-search-cancel-button {
+    display: none;
+  }
+
+  .navds-combobox__button-toggle-list {
+    border-radius: var(--ax-border-radius-medium);
+    color: var(--ax-text-default);
+    cursor: pointer;
+    background: none;
+    border: none;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    font-size: 1rem;
+    display: flex;
+  }
+
+  .navds-combobox__button-toggle-list:hover {
+    color: var(--ax-text-accent);
+  }
+
+  .navds-combobox__button-toggle-list:hover:active {
+    color: var(--ax-text-accent-strong);
+  }
+
+  .navds-combobox__list {
+    z-index: 10;
+    max-height: 290px;
+    left: 0;
+    right: 0;
+    top: calc(100% + var(--ax-spacing-2));
+    border: 1px solid var(--ax-border-subtleA);
+    border-radius: var(--ax-border-radius-large);
+    background-color: var(--ax-bg-raised);
+    color: var(--ax-text-default);
+    overscroll-behavior: contain;
+    box-shadow: var(--ax-shadow-dialog);
+    flex-direction: column;
+    display: flex;
+    position: absolute;
+    overflow: clip;
+  }
+
+  .navds-combobox__list .navds-combobox__list-options {
+    overflow-y: auto;
+  }
+
+  .navds-combobox__list--closed {
+    display: none;
+  }
+
+  .navds-combobox__list-item, .navds-combobox__list-item--loading, .navds-combobox__list-item--no-options, .navds-combobox__list-item--new-option, .navds-combobox__list-item--max-selected {
+    padding-block: var(--__axc-combobox-list-item-padding-block);
+    padding-inline: var(--__axc-combobox-list-item-padding-inline);
+    border-radius: var(--ax-border-radius-medium);
+    margin-inline: var(--ax-spacing-2);
+    margin-block: var(--ax-spacing-1);
+    border: 0;
+    justify-content: space-between;
+    align-items: center;
+    scroll-margin-block: 8px;
+    display: flex;
+  }
+
+  .navds-combobox__list-item--no-options {
+    margin: 0;
+  }
+
+  .navds-combobox__list-item--loading {
+    justify-content: center;
+    margin: 0;
+  }
+
+  .navds-combobox__list-item--max-selected {
+    background-color: var(--ax-bg-neutral-moderateA);
+    border-bottom: 1px solid var(--ax-border-neutral-subtle);
+    padding-block: var(--ax-spacing-2);
+    line-height: var(--ax-font-line-height-large);
+    border-radius: 0;
+    margin: 0;
+  }
+
+  .navds-combobox__list-options {
+    display: inherit;
+    flex-direction: inherit;
+    gap: inherit;
+    background-color: inherit;
+    padding: 0;
+    padding-block: var(--ax-spacing-1);
+    align-items: stretch;
+    margin: 0;
+    list-style: none;
+  }
+
+  .navds-combobox__list-item--focus {
+    cursor: pointer;
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+  }
+
+  .navds-combobox__list-item {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .navds-combobox__list-item[data-no-focus="true"] {
+    cursor: not-allowed;
+    opacity: .4;
+  }
+
+  .navds-combobox__list-item mark {
+    font-weight: var(--ax-font-weight-bold);
+    background-color: rgba(0, 0, 0, 0);
+  }
+
+  .navds-combobox__list-item svg {
+    color: var(--ax-text-accent);
+  }
+
+  .navds-combobox__list-item--selected {
+    background-color: var(--ax-bg-accent-moderate-pressedA);
+  }
+
+  .navds-combobox__list-item--selected p {
+    font-weight: var(--ax-font-weight-bold);
+  }
+
+  .navds-combobox__list-item--new-option {
+    border-bottom: 1px solid var(--ax-border-accent-subtleA);
+    background: var(--ax-bg-accent-moderateA);
+    cursor: pointer;
+    margin: 0;
+    margin-block: calc(var(--ax-spacing-1) * -1);
+    padding-block: var(--ax-spacing-4);
+    border-radius: 0;
+    justify-content: flex-start;
+    gap: .25rem;
+  }
+
+  .navds-combobox__list-item--new-option svg {
+    color: var(--ax-text-default);
+  }
+
+  .navds-combobox__list-item--new-option:only-child {
+    border: none;
+  }
+
+  .navds-combobox__list-item--new-option--focus {
+    border-radius: calc(var(--ax-border-radius-large)  - 1px) calc(var(--ax-border-radius-large)  - 1px) 0 0;
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: -2px;
+  }
+
+  .navds-combobox__list-item--new-option--focus:only-child {
+    border-radius: calc(var(--ax-border-radius-large)  - 1px);
+  }
+
+  @media (max-width: 479px) {
+    .navds-combobox__button-toggle-list {
+      right: .5rem;
+    }
+
+    .navds-combobox__input {
+      min-width: min-content;
+      padding: .75rem 0;
+    }
+
+    .navds-combobox__selected-options {
+      gap: var(--ax-spacing-1);
+    }
+  }
+
+  @media (forced-colors: active) {
+    .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
+      outline-color: highlight;
+    }
+
+    .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 {
+      color: highlight;
+      border-left-color: highlight;
+    }
+
+    .navds-combobox__list-item[data-no-focus="true"] {
+      opacity: 1;
+      color: graytext;
+    }
+
+    .navds-combobox__list-item--selected {
+      color: selecteditemtext;
+      background-color: highlight;
+    }
+
+    .navds-combobox__list-item--selected * {
+      color: #000;
+    }
+
+    .navds-combobox__list-item--selected > * {
+      forced-color-adjust: none;
+    }
+
+    .navds-combobox__list-item--selected.navds-combobox__list-item--focus, .navds-combobox__list--with-hover .navds-combobox__list-item--selected:hover {
+      color: highlight;
+      border-left-color: highlight;
+    }
+
+    .navds-combobox__list--with-hover .navds-combobox__list-item--new-option:hover {
+      color: highlight;
+    }
+
+    .navds-combobox__list-item--new-option--focus {
+      outline-offset: 0;
+      outline: 2px solid highlight;
+    }
+
+    .navds-combobox--disabled {
+      opacity: 1;
+    }
+
+    .navds-combobox--disabled * {
+      color: graytext;
+      opacity: 1;
+      border-color: graytext;
+    }
+
+    .navds-combobox__list-item--new-option svg {
+      color: canvastext;
+    }
+
+    .navds-combobox__list-item--new-option:hover {
+      color: highlight;
+    }
+
+    .navds-combobox__list-item--new-option:hover svg {
+      color: highlight;
+    }
+  }
+
+  .navds-form-summary {
+    border: 1px solid var(--ax-border-neutral-subtleA);
+    border-radius: var(--ax-border-radius-xlarge);
+    background: var(--ax-bg-raised);
+    overflow: hidden;
+  }
+
+  .navds-form-summary__header {
+    background: var(--ax-bg-neutral-moderateA);
+    padding: var(--ax-spacing-4) var(--ax-spacing-6);
+    justify-content: space-between;
+    gap: 0 var(--ax-spacing-3);
+    display: flex;
+  }
+
+  @media (max-width: 479px) {
+    .navds-form-summary__header {
+      padding: var(--ax-spacing-3) var(--ax-spacing-4);
+      flex-direction: column;
+    }
+  }
+
+  .navds-form-summary__edit {
+    margin-top: var(--ax-spacing-1);
+    flex-shrink: 0;
+    align-self: flex-start;
+  }
+
+  .navds-form-summary > .navds-form-summary__answers {
+    border-top: 1px solid var(--ax-border-subtleA);
+  }
+
+  .navds-form-summary__answers {
+    padding: var(--ax-spacing-4) var(--ax-spacing-5);
+    margin: 0;
+  }
+
+  @media (max-width: 479px) {
+    .navds-form-summary__answers {
+      padding: var(--ax-spacing-4);
+    }
+  }
+
+  .navds-form-summary__answer:not(:last-child) {
+    margin-bottom: var(--ax-spacing-4);
+    padding-bottom: var(--ax-spacing-4);
+    border-bottom: 1px solid var(--ax-border-subtleA);
+  }
+
+  .navds-form-summary__answer:has(.navds-form-summary__answer) {
+    padding-bottom: var(--ax-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(--ax-spacing-3);
+      padding-bottom: var(--ax-spacing-3);
+    }
+
+    .navds-form-summary__answer:has(.navds-form-summary__answer) {
+      padding-bottom: var(--ax-spacing-5);
+    }
+  }
+
+  .navds-form-summary__value:first-of-type {
+    margin-top: var(--ax-spacing-1);
+  }
+
+  .navds-form-summary__value .navds-form-summary__answers {
+    margin-top: var(--ax-spacing-2);
+    padding: var(--ax-spacing-4) var(--ax-spacing-5);
+    background: var(--ax-bg-info-moderateA);
+    border-radius: var(--ax-border-radius-large);
+    border: 1px solid var(--ax-border-info-subtleA);
+  }
+
+  .navds-form-summary__value .navds-form-summary__answers .navds-form-summary__answer {
+    border-color: var(--ax-border-info-subtleA);
+  }
+
+  .navds-form-progress__bar {
+    margin-bottom: var(--ax-spacing-2);
+  }
+
+  .navds-form-progress__button:focus-visible {
+    z-index: 1;
+  }
+
+  .navds-form-progress__button[data-state="open"] svg {
+    transform: rotate(-180deg);
+  }
+
+  .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__collapsible {
+    grid-template-rows: 0fr;
+    transition: grid-template-rows .25s cubic-bezier(.2, 0, 0, 1);
+    display: grid;
+    overflow: hidden;
+  }
+
+  .navds-form-progress__collapsible[hidden] {
+    display: grid !important;
+  }
+
+  .navds-form-progress__collapsible[data-state="open"] {
+    grid-template-rows: 1fr;
+  }
+
+  .navds-form-progress__collapsible-content {
+    opacity: .01;
+    visibility: hidden;
+    min-height: 0;
+    transition-property: opacity, visibility;
+    transition-duration: .25s;
+    transition-timing-function: cubic-bezier(.2, 0, 0, 1);
+  }
+
+  .navds-form-progress__collapsible[data-state="open"] .navds-form-progress__collapsible-content {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  .navds-form-progress__stepper {
+    border: 1px solid var(--ax-border-subtle);
+    border-radius: var(--ax-border-radius-large);
+    padding: var(--ax-spacing-4) var(--ax-spacing-5);
+    margin-top: var(--ax-spacing-1);
+    background: var(--ax-bg-raised);
+  }
+}