@navikt/ds-css 7.14.3 → 7.16.0

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

@@ -1,11 +1,11 @@
-.navds-checkbox,
-.navds-radio {
+.aksel-checkbox,
+.aksel-radio {
   position: relative;
   width: fit-content;
 }
 
-.navds-checkbox__input,
-.navds-radio__input {
+.aksel-checkbox__input,
+.aksel-radio__input {
   position: absolute;
   width: 3rem;
   height: 3rem;
@@ -16,8 +16,8 @@
   cursor: pointer;
 }
 
-.navds-checkbox__label,
-.navds-radio__label {
+.aksel-checkbox__label,
+.aksel-radio__label {
   padding: var(--ax-space-12) 0;
   cursor: pointer;
   display: flex;
@@ -27,8 +27,8 @@
   --__axc-radio-checkbox-readonly-border: var(--ax-border-neutral-subtle);
 }
 
-.navds-checkbox__label::before,
-.navds-radio__label::before {
+.aksel-checkbox__label::before,
+.aksel-radio__label::before {
   content: "";
   border-radius: var(--ax-border-radius-medium);
   background-color: var(--ax-bg-input);
@@ -38,38 +38,38 @@
   border: 2px solid var(--ax-border-neutral);
 }
 
-.navds-radio__label::before {
+.aksel-radio__label::before {
   border-radius: var(--ax-border-radius-full);
 }
 
-.navds-checkbox__content,
-.navds-radio__content {
+.aksel-checkbox__content,
+.aksel-radio__content {
   display: flex;
   flex-direction: column;
   gap: 0.125rem;
 }
 
-.navds-checkbox--small > .navds-checkbox__input,
-.navds-radio--small > .navds-radio__input {
+.aksel-checkbox--small > .aksel-checkbox__input,
+.aksel-radio--small > .aksel-radio__input {
   width: 2rem;
   height: 2rem;
   top: 0;
   left: -0.375rem;
 }
 
-.navds-checkbox--small > .navds-checkbox__label,
-.navds-radio--small > .navds-radio__label {
+.aksel-checkbox--small > .aksel-checkbox__label,
+.aksel-radio--small > .aksel-radio__label {
   padding: var(--ax-space-6) 0;
 }
 
-.navds-checkbox--small > .navds-checkbox__label::before,
-.navds-radio--small > .navds-radio__label::before {
+.aksel-checkbox--small > .aksel-checkbox__label::before,
+.aksel-radio--small > .aksel-radio__label::before {
   width: 1.25rem;
   height: 1.25rem;
 }
 
-.navds-checkbox__input:focus + .navds-checkbox__label::after,
-.navds-radio__input:focus + .navds-radio__label::after {
+.aksel-checkbox__input:focus + .aksel-checkbox__label::after,
+.aksel-radio__input:focus + .aksel-radio__label::after {
   content: "";
   position: absolute;
   width: 100%;
@@ -80,16 +80,16 @@
   pointer-events: none;
 }
 
-.navds-checkbox--small > .navds-checkbox__input:focus + .navds-checkbox__label::after,
-.navds-radio--small > .navds-radio__input:focus + .navds-radio__label::after {
+.aksel-checkbox--small > .aksel-checkbox__input:focus + .aksel-checkbox__label::after,
+.aksel-radio--small > .aksel-radio__input:focus + .aksel-radio__label::after {
   height: calc(100% - var(--ax-space-12));
 }
 
-.navds-checkbox__icon-indeterminate {
+.aksel-checkbox__icon-indeterminate {
   display: none;
 }
 
-.navds-checkbox__input:indeterminate + .navds-checkbox__label > .navds-checkbox__icon-indeterminate {
+.aksel-checkbox__input:indeterminate + .aksel-checkbox__label > .aksel-checkbox__icon-indeterminate {
   display: block;
   width: 0.75rem;
   height: 0.25rem;
@@ -101,26 +101,26 @@
   pointer-events: none;
 }
 
-.navds-checkbox--small .navds-checkbox__input:indeterminate + .navds-checkbox__label > .navds-checkbox__icon-indeterminate {
+.aksel-checkbox--small .aksel-checkbox__input:indeterminate + .aksel-checkbox__label > .aksel-checkbox__icon-indeterminate {
   transform: translate(var(--ax-space-4), -50%);
   height: 0.1875rem;
 }
 
-.navds-checkbox__input:where(:checked, :indeterminate) + .navds-checkbox__label::before {
+.aksel-checkbox__input:where(:checked, :indeterminate) + .aksel-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 {
+.aksel-checkbox__input:where(:checked, :indeterminate):not(:disabled):hover + .aksel-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 {
+.aksel-checkbox__input:where(:not(:checked)) + .aksel-checkbox__label > .aksel-checkbox__icon {
   display: none;
 }
 
-.navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
+.aksel-checkbox__input:checked + .aksel-checkbox__label > .aksel-checkbox__icon {
   color: var(--ax-bg-default);
   position: absolute;
   height: 1.5rem;
@@ -132,104 +132,104 @@
   align-items: center;
 }
 
-.navds-checkbox--small .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
+.aksel-checkbox--small .aksel-checkbox__input:checked + .aksel-checkbox__label > .aksel-checkbox__icon {
   transform: translate(0.25rem, -10%);
 }
 
 /* Tailwind sets all svg to block */
-.navds-checkbox__icon > svg {
+.aksel-checkbox__icon > svg {
   display: inline;
   vertical-align: initial;
 }
 
-.navds-checkbox--small > .navds-checkbox__input:checked + .navds-checkbox__label::before {
+.aksel-checkbox--small > .aksel-checkbox__input:checked + .aksel-checkbox__label::before {
   background-position: 0.25rem center;
 }
 
-.navds-radio__input:checked + .navds-radio__label::before {
+.aksel-radio__input:checked + .aksel-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 {
+.aksel-radio--small > .aksel-radio__input:checked + .aksel-radio__label::before {
   border-width: 6px;
 }
 
-.navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
-.navds-radio__input:hover:not(:disabled, :checked) + .navds-radio__label {
+.aksel-checkbox__input:hover:not(:disabled) + .aksel-checkbox__label,
+.aksel-radio__input:hover:not(:disabled, :checked) + .aksel-radio__label {
   color: var(--ax-text-accent-subtle);
 }
 
-.navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
-.navds-radio__input:hover:not(:disabled, :checked) + .navds-radio__label::before {
+.aksel-checkbox__input:hover:not(:disabled, :checked, :indeterminate) + .aksel-checkbox__label::before,
+.aksel-radio__input:hover:not(:disabled, :checked) + .aksel-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 {
+.aksel-checkbox--error > .aksel-checkbox__input:not(:disabled, :checked, :indeterminate) + .aksel-checkbox__label::before,
+.aksel-radio--error > .aksel-radio__input:not(:disabled, :checked) + .aksel-radio__label::before {
   border-color: var(--ax-border-danger-strong);
 }
 
-.navds-checkbox--error > .navds-checkbox__input:not(:disabled, :checked, :indeterminate):hover + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:not(:disabled, :checked):hover + .navds-radio__label::before {
+.aksel-checkbox--error > .aksel-checkbox__input:not(:disabled, :checked, :indeterminate):hover + .aksel-checkbox__label::before,
+.aksel-radio--error > .aksel-radio__input:not(:disabled, :checked):hover + .aksel-radio__label::before {
   background-color: var(--ax-bg-danger-moderate-hoverA);
 }
 
-.navds-checkbox--error > .navds-checkbox__input:is(:checked, :indeterminate):not(:disabled) + .navds-checkbox__label::before {
+.aksel-checkbox--error > .aksel-checkbox__input:is(:checked, :indeterminate):not(:disabled) + .aksel-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 {
+.aksel-radio--error > .aksel-radio__input:checked + .aksel-radio__label::before {
   border-color: var(--ax-bg-danger-strong-pressed);
 }
 
-.navds-checkbox--disabled,
-.navds-radio--disabled {
+.aksel-checkbox--disabled,
+.aksel-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 {
+.aksel-checkbox--disabled > .aksel-checkbox__input,
+.aksel-checkbox--disabled > .aksel-checkbox__label,
+.aksel-radio--disabled > .aksel-radio__input,
+.aksel-radio--disabled > .aksel-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) {
+.aksel-checkbox--readonly > :where(.aksel-checkbox__input, .aksel-checkbox__label),
+.aksel-radio--readonly > :where(.aksel-radio__input, .aksel-radio__label) {
   cursor: default;
 }
 
-.navds-checkbox--readonly .navds-checkbox__label-text {
+.aksel-checkbox--readonly .aksel-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 {
+.aksel-checkbox--readonly > .aksel-checkbox__input:hover + .aksel-checkbox__label,
+.aksel-radio--readonly > .aksel-radio__input:hover + .aksel-radio__label {
   color: var(--ax-text-neutral);
 }
 
-.navds-checkbox--readonly > .navds-checkbox__input:not(:disabled) + .navds-checkbox__label::before,
-.navds-checkbox--readonly > .navds-checkbox__input:hover .navds-checkbox__label::before,
-.navds-radio--readonly > .navds-radio__input:not(:disabled, :checked) + .navds-radio__label::before,
-.navds-radio--readonly > .navds-radio__input:hover:not(:checked, :focus) + .navds-radio__label::before {
+.aksel-checkbox--readonly > .aksel-checkbox__input:not(:disabled) + .aksel-checkbox__label::before,
+.aksel-checkbox--readonly > .aksel-checkbox__input:hover .aksel-checkbox__label::before,
+.aksel-radio--readonly > .aksel-radio__input:not(:disabled, :checked) + .aksel-radio__label::before,
+.aksel-radio--readonly > .aksel-radio__input:hover:not(:checked, :focus) + .aksel-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 {
+.aksel-checkbox--readonly > .aksel-checkbox__input:where(:checked, :indeterminate) + .aksel-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 {
+.aksel-checkbox--readonly > .aksel-checkbox__input:checked + .aksel-checkbox__label > .aksel-checkbox__icon {
   color: var(--ax-text-neutral-subtle);
 }
 
-.navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
+.aksel-radio--readonly > .aksel-radio__input:checked + .aksel-radio__label::before {
   background-color: var(--ax-bg-neutral-strong);
   border-width: 0;
   box-shadow:
@@ -237,13 +237,13 @@
     inset 0 0 0 8px var(--ax-bg-neutral-moderate);
 }
 
-.navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label > .navds-checkbox__icon-indeterminate {
+.aksel-checkbox--readonly > .aksel-checkbox__input:indeterminate + .aksel-checkbox__label > .aksel-checkbox__icon-indeterminate {
   background-color: var(--ax-text-neutral-subtle);
 }
 
 @media (forced-colors: active) {
-  .navds-checkbox,
-  .navds-radio {
+  .aksel-checkbox,
+  .aksel-radio {
     --__axc-radio-checkbox-high-contrast-bg: field;
     --__axc-radio-checkbox-high-contrast-text: fieldtext;
     --__axc-radio-checkbox-high-contrast-highlight: highlight;
@@ -252,54 +252,54 @@
     --ax-border-focus: Highlight;
   }
 
-  .navds-checkbox__label::before,
-  .navds-radio__label::before {
+  .aksel-checkbox__label::before,
+  .aksel-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 {
+  .aksel-checkbox__input:checked + .aksel-checkbox__label > .aksel-checkbox__icon {
     color: var(--__axc-radio-checkbox-high-contrast-text);
   }
 
-  .navds-checkbox__input:indeterminate + .navds-checkbox__label > .navds-checkbox__icon-indeterminate {
+  .aksel-checkbox__input:indeterminate + .aksel-checkbox__label > .aksel-checkbox__icon-indeterminate {
     background-color: var(--__axc-radio-checkbox-high-contrast-text);
   }
 
-  .navds-radio__input:checked + .navds-radio__label::before {
+  .aksel-radio__input:checked + .aksel-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 {
+  :not(.aksel-checkbox--readonly) > .aksel-checkbox__input:hover:not(:disabled) + .aksel-checkbox__label,
+  :not(.aksel-radio--readonly) > .aksel-radio__input:hover:not(:disabled) + .aksel-radio__label {
     color: highlight;
   }
 
-  .navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label::before {
+  .aksel-checkbox--readonly > .aksel-checkbox__input:checked + .aksel-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
-    > .navds-checkbox__icon-indeterminate {
+  .aksel-checkbox--readonly
+    > .aksel-checkbox__input:indeterminate
+    + .aksel-checkbox__label
+    > .aksel-checkbox__icon-indeterminate {
     background-color: var(--__axc-radio-checkbox-high-contrast-text);
   }
 
-  .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
+  .aksel-radio--readonly > .aksel-radio__input:checked + .aksel-radio__label::before {
     border-width: 6px;
   }
 
-  .navds-checkbox--disabled,
-  .navds-radio--disabled {
+  .aksel-checkbox--disabled,
+  .aksel-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) {
+  :is(.aksel-checkbox--disabled, .aksel-radio--disabled) :is(.aksel-checkbox__label, .aksel-radio__label) {
     color: graytext;
   }
 }

package/darkside/form/search.darkside.css

@@ -1,78 +1,78 @@
-.navds-search {
+.aksel-search {
   display: flex;
   flex-direction: column;
   width: 100%;
 }
 
-.navds-search__wrapper-inner {
+.aksel-search__wrapper-inner {
   position: relative;
   width: 100%;
 }
 
-.navds-search--with-size {
-  & .navds-search__wrapper-inner {
+.aksel-search--with-size {
+  & .aksel-search__wrapper-inner {
     width: inherit;
   }
 
-  & .navds-search__wrapper {
+  & .aksel-search__wrapper {
     width: fit-content;
   }
 }
 
-.navds-search__wrapper {
+.aksel-search__wrapper {
   display: inline-flex;
   align-items: center;
   border-radius: var(--ax-border-radius-large);
 
   /* We have to outline the whole container to include the Search-buttons */
-  &:has(.navds-search__input:focus-visible) {
+  &:has(.aksel-search__input:focus-visible) {
     outline: 3px solid var(--ax-border-focus);
     outline-offset: 3px;
   }
 }
 
 /* ------------------------------ Search input ------------------------------ */
-.navds-search__input {
+.aksel-search__input {
   padding-right: var(--ax-space-40);
 
   &:focus-visible {
     outline: none;
   }
 
-  &.navds-search__input--primary,
-  &.navds-search__input--secondary {
+  &.aksel-search__input--primary,
+  &.aksel-search__input--secondary {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
     border-right: none;
   }
 }
 
-.navds-search__input--simple {
+.aksel-search__input--simple {
   padding-left: var(--ax-space-40);
 }
 
 /* ------------------------------ Search sizing ----------------------------- */
-.navds-form-field--small {
-  & .navds-search__input {
+.aksel-form-field--small {
+  & .aksel-search__input {
     padding-right: var(--ax-space-28);
   }
 
-  & .navds-search__input--simple {
+  & .aksel-search__input--simple {
     padding-left: var(--ax-space-28);
   }
 
-  & .navds-search__search-icon {
+  & .aksel-search__search-icon {
     left: var(--ax-space-4);
     font-size: 1.25rem;
   }
 
-  & .navds-search__button-clear {
+  & .aksel-search__button-clear {
     right: var(--ax-space-4);
   }
 }
 
 /* ------------------------------- Search icon ------------------------------ */
-.navds-search__search-icon {
+.aksel-search__search-icon {
   position: absolute;
   left: var(--ax-space-8);
   top: 50%;
@@ -80,13 +80,13 @@
   pointer-events: none;
   font-size: 1.5rem;
 
-  .navds-search--disabled & {
+  .aksel-search--disabled & {
     opacity: var(--ax-opacity-disabled);
   }
 }
 
 /* --------------------------- Search Clear-button -------------------------- */
-.navds-search__button-clear {
+.aksel-search__button-clear {
   position: absolute;
   right: var(--ax-space-8);
   top: 50%;
@@ -94,14 +94,14 @@
 }
 
 /* ------------------------------ Search Button ----------------------------- */
-.navds-search__button-search {
+.aksel-search__button-search {
   flex-shrink: 0;
   border-radius: 0;
   border-top-right-radius: var(--ax-border-radius-large);
   border-bottom-right-radius: var(--ax-border-radius-large);
 }
 
-.navds-search__button-search.navds-button--secondary {
+.aksel-search__button-search.aksel-button--secondary {
   --__axc-button-border-width: 1px;
   --__axc-button-border-color: var(--ax-border-neutral);
 
@@ -115,35 +115,35 @@
 }
 
 /* Special-case where we hover/focus input, and want the secondary-button to match input-border */
-.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) {
+.aksel-search:not(.aksel-search--error, .aksel-search--disabled)
+  .aksel-search__wrapper:has(.aksel-search__input:is(:hover, :focus-visible))
+  .aksel-search__button-search.aksel-button--secondary:not(:hover, :active) {
   --__axc-button-border-color: var(--ax-border-accent-strong);
 }
 
 /* --------------------------- Search Error-state --------------------------- */
-.navds-search--error .navds-search__input:not(:disabled) {
+.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);
 
-  &.navds-search__input--simple {
+  &.aksel-search__input--simple {
     box-shadow: inset 0 0 0 1px var(--ax-border-danger-strong);
   }
 }
 
 /* -------------------------- Search Focus layering ------------------------- */
-.navds-search__input:focus-visible,
-.navds-search__button-search:focus-visible {
+.aksel-search__input:focus-visible,
+.aksel-search__button-search:focus-visible {
   z-index: 1;
 }
 
 /* -------------------------- Search disabled state ------------------------- */
 
 /* We can't re-use disabled-state for form-fields since opacity multiplies on search-button */
-.navds-search--disabled {
-  .navds-search__input {
+.aksel-search--disabled {
+  .aksel-search__input {
     opacity: var(--ax-opacity-disabled);
     cursor: not-allowed;
   }

package/darkside/form/select.darkside.css

@@ -1,4 +1,4 @@
-.navds-select__input {
+.aksel-select__input {
   appearance: none;
   background-color: var(--ax-bg-input);
   border-radius: var(--ax-border-radius-large);
@@ -32,7 +32,7 @@
   }
 }
 
-.navds-select__container {
+.aksel-select__container {
   position: relative;
   display: flex;
   width: 100%;
@@ -40,7 +40,7 @@
 }
 
 /* ------------------------------- Select Icon ------------------------------ */
-.navds-select__chevron {
+.aksel-select__chevron {
   position: absolute;
   font-size: 1.5rem;
   right: var(--ax-space-8);
@@ -56,15 +56,15 @@
 }
 
 /* ------------------------------ Select Sizing ----------------------------- */
-.navds-form-field--small {
-  & .navds-select__input {
+.aksel-form-field--small {
+  & .aksel-select__input {
     min-height: 2rem;
     padding-block: 0;
   }
 }
 
 /* --------------------------- Select Error-state --------------------------- */
-.navds-select--error {
+.aksel-select--error {
   > * select {
     box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
     border-color: var(--ax-border-danger-strong);
@@ -78,7 +78,7 @@
 }
 
 /* ----------------------------- Select disabled ---------------------------- */
-.navds-select__input:disabled {
+.aksel-select__input:disabled {
   background-color: var(--ax-bg-input);
   border: 1px solid var(--ax-border-neutral);
   box-shadow: none;
@@ -93,15 +93,15 @@
   }
 
   @media (forced-colors: active) {
-    & + .navds-select__chevron {
+    & + .aksel-select__chevron {
       color: GrayText;
     }
   }
 }
 
 /* ----------------------------- Select Readonly ---------------------------- */
-.navds-select--readonly {
-  & .navds-select__input {
+.aksel-select--readonly {
+  & .aksel-select__input {
     background-color: var(--ax-bg-neutral-moderate);
     border-color: var(--ax-border-neutral-subtleA);
     cursor: default;
@@ -115,7 +115,7 @@
     }
   }
 
-  & .navds-select__chevron {
+  & .aksel-select__chevron {
     color: var(--ax-text-neutral-subtle);
   }
 }