@navikt/ds-css 7.14.3 → 7.16.0

package/darkside/date.darkside.css

@@ -1,4 +1,4 @@
-.navds-date {
+.aksel-date {
   padding: var(--ax-space-16) var(--ax-space-12);
 
   .rdp-day_range_middle {
@@ -20,7 +20,7 @@
     gap: var(--ax-space-20);
   }
 
-  .navds-date__caption-label {
+  .aksel-date__caption-label {
     text-transform: capitalize;
   }
 
@@ -50,7 +50,7 @@
     border-radius: var(--ax-border-radius-large);
   }
 
-  .navds-date__field {
+  .aksel-date__field {
     display: flex;
     flex-direction: column;
     width: 100%;
@@ -58,7 +58,7 @@
   }
 
   .rdp-day_selected,
-  .navds-monthpicker__month--selected {
+  .aksel-monthpicker__month--selected {
     color: var(--ax-text-accent-contrast);
     background: var(--ax-bg-accent-strong-pressed);
     cursor: pointer;
@@ -72,7 +72,7 @@
   }
 
   .rdp-button:where(:not(.rdp-day_selected, [disabled])):hover,
-  .navds-date__month-button:where(:not(.rdp-day_selected, [disabled])):hover {
+  .aksel-date__month-button:where(:not(.rdp-day_selected, [disabled])):hover {
     background: var(--ax-bg-accent-moderate-hoverA);
     cursor: pointer;
   }
@@ -106,16 +106,16 @@
     pointer-events: none;
   }
 
-  .navds-date__modal & {
+  .aksel-date__modal & {
     padding: 0;
   }
 
-  .navds-date__modal-body > & {
+  .aksel-date__modal-body > & {
     padding: 0;
   }
 }
 
-.navds-date__caption {
+.aksel-date__caption {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -123,18 +123,18 @@
   padding-inline: var(--ax-space-4);
 }
 
-.navds-date__caption-button {
+.aksel-date__caption-button {
   width: 2rem;
   height: 2rem;
   color: var(--ax-text-neutral);
 }
 
-.navds-date__caption__month .navds-select__container select {
+.aksel-date__caption__month .aksel-select__container select {
   text-transform: capitalize;
 }
 
 /* Monthpicker */
-.navds-date__month-button {
+.aksel-date__month-button {
   all: unset;
   text-align: center;
   width: 3rem;
@@ -144,18 +144,18 @@
   cursor: pointer;
 }
 
-.navds-date__year-label {
+.aksel-date__year-label {
   display: flex;
   align-items: center;
 }
 
-.navds-date__wrapper,
-.navds-date__standalone-wrapper {
+.aksel-date__wrapper,
+.aksel-date__standalone-wrapper {
   height: fit-content;
   width: fit-content;
 
   .rdp-cell > button.rdp-day,
-  button.navds-date__month-button {
+  button.aksel-date__month-button {
     &:focus-visible {
       outline: 3px solid var(--ax-border-focus);
       outline-offset: 3px;
@@ -168,17 +168,17 @@
   }
 }
 
-.navds-date__field-input {
-  &.navds-text-field__input {
+.aksel-date__field-input {
+  &.aksel-text-field__input {
     padding-right: var(--ax-space-48);
   }
 
-  .navds-form-field--small & {
+  .aksel-form-field--small & {
     padding-right: var(--ax-space-32);
   }
 }
 
-.navds-date__field-button {
+.aksel-date__field-button {
   position: absolute;
   right: 0.0625rem;
   top: 50%;
@@ -199,17 +199,17 @@
   border-start-start-radius: 0;
   border-end-start-radius: 0;
 
-  .navds-form-field--small & {
+  .aksel-form-field--small & {
     padding: var(--ax-space-4);
   }
 
-  .navds-form-field--disabled & {
+  .aksel-form-field--disabled & {
     opacity: 1;
     cursor: not-allowed;
   }
 
   /* Readonly */
-  .navds-date__field--readonly & {
+  .aksel-date__field--readonly & {
     cursor: default;
   }
 
@@ -218,29 +218,29 @@
   }
 }
 
-.navds-date__field-wrapper {
+.aksel-date__field-wrapper {
   display: inline-flex;
   align-items: center;
   position: relative;
   width: fit-content;
 }
 
-.navds-date__week-row {
+.aksel-date__week-row {
   display: flex;
   align-items: center;
   gap: var(--ax-space-2);
 }
 
-.navds-date__weeknumber {
+.aksel-date__weeknumber {
   --__axc-button-border-width: 1px;
 }
 
-.navds-date__weeknumber-number {
+.aksel-date__weeknumber-number {
   font-size: 0.875rem;
   color: var(--ax-text-neutral-subtle);
 }
 
-.navds-date__week-wrapper {
+.aksel-date__week-wrapper {
   width: 2.5rem;
   display: flex;
   align-items: center;
@@ -248,7 +248,7 @@
   margin: 0;
 }
 
-.navds-date__modal-body {
+.aksel-date__modal-body {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
@@ -257,20 +257,20 @@
 }
 
 @media (min-width: 480px) {
-  .navds-date {
+  .aksel-date {
     padding: var(--ax-space-20) var(--ax-space-16);
   }
 
-  .navds-date__modal-body {
+  .aksel-date__modal-body {
     padding: var(--ax-space-24);
   }
 
-  .navds-date__caption {
+  .aksel-date__caption {
     gap: var(--ax-space-8);
   }
 
-  .navds-date .rdp-button,
-  .navds-date__caption-button {
+  .aksel-date .rdp-button,
+  .aksel-date__caption-button {
     width: 3rem;
     height: 3rem;
   }

package/darkside/dropdown.darkside.css

@@ -1,4 +1,4 @@
-.navds-dropdown__menu {
+.aksel-dropdown__menu {
   overflow: hidden;
   padding: var(--ax-space-8);
   color: var(--ax-text-neutral);
@@ -7,32 +7,32 @@
   overflow-y: auto;
 }
 
-.navds-dropdown__divider {
+.aksel-dropdown__divider {
   margin: var(--ax-space-12) 0;
   border: none;
   border-bottom: 1px solid var(--ax-border-neutral-subtle);
 }
 
-.navds-dropdown__menu > :not(.navds-dropdown__divider, .navds-dropdown__list) {
+.aksel-dropdown__menu > :not(.aksel-dropdown__divider, .aksel-dropdown__list) {
   margin: 0 var(--ax-space-16) var(--ax-space-12);
 }
 
-.navds-dropdown__list {
+.aksel-dropdown__list {
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
-.navds-dropdown__list-item {
+.aksel-dropdown__list-item {
   margin: 0;
 }
 
-.navds-dropdown__list-heading {
+.aksel-dropdown__list-heading {
   margin-block: var(--ax-space-4) var(--ax-space-12);
   margin-inline: var(--ax-space-4);
 }
 
-.navds-dropdown__item {
+.aksel-dropdown__item {
   border: none;
   margin: 0;
   overflow: visible;
@@ -70,11 +70,11 @@
 }
 
 @media (forced-colors: active) {
-  .navds-dropdown__item:hover {
+  .aksel-dropdown__item:hover {
     color: highlight;
   }
 
-  .navds-dropdown__item:disabled {
+  .aksel-dropdown__item:disabled {
     opacity: 1;
     color: graytext;
   }

package/darkside/expansioncard.darkside.css

@@ -1,4 +1,4 @@
-.navds-expansioncard {
+.aksel-expansioncard {
   --__axc-expansioncard-border-radius: calc(var(--ax-border-radius-xlarge) - 1px);
   --__axc-expansioncard-padding-block: var(--ax-space-20);
   --__axc-expansioncard-padding-inline: var(--ax-space-20);
@@ -8,33 +8,33 @@
   height: fit-content;
   border: 1px solid var(--ax-border-neutral);
 
-  &:has(.navds-expansioncard__header:hover) {
+  &:has(.aksel-expansioncard__header:hover) {
     box-shadow: 0 0 0 1px var(--ax-border-neutral-strong);
     border-color: var(--ax-border-neutral-strong);
   }
 }
 
 /* ------------------------ ExpansionCard Small-size ------------------------ */
-.navds-expansioncard--small {
+.aksel-expansioncard--small {
   --__axc-expansioncard-padding-inline: var(--ax-space-16);
   --__axc-expansioncard-padding-block: var(--ax-space-16);
 
-  & > .navds-expansioncard__header .navds-expansioncard__title--small {
+  & > .aksel-expansioncard__header .aksel-expansioncard__title--small {
     margin-top: var(--ax-space-2);
   }
 
-  & :is(.navds-expansioncard__title--medium, .navds-expansioncard__title--large) {
+  & :is(.aksel-expansioncard__title--medium, .aksel-expansioncard__title--large) {
     margin-top: 0;
   }
 
-  & > .navds-expansioncard__header > .navds-expansioncard__header-button {
+  & > .aksel-expansioncard__header > .aksel-expansioncard__header-button {
     min-height: 2rem;
     min-width: 2rem;
   }
 }
 
 /* -------------------------- ExpansionCard Header -------------------------- */
-.navds-expansioncard__header {
+.aksel-expansioncard__header {
   width: 100%;
   display: flex;
   gap: var(--ax-space-16);
@@ -71,20 +71,20 @@
 }
 
 /* --------------------- ExpansionCard Header typography -------------------- */
-.navds-expansioncard__title--small {
+.aksel-expansioncard__title--small {
   margin-top: 0.625rem;
 }
 
-.navds-expansioncard__title--medium {
+.aksel-expansioncard__title--medium {
   margin-top: var(--ax-space-8);
 }
 
-.navds-expansioncard__title--large {
+.aksel-expansioncard__title--large {
   margin-top: var(--ax-space-4);
 }
 
 /* ----------------------- ExpansionCard Header Button ---------------------- */
-.navds-expansioncard__header-button {
+.aksel-expansioncard__header-button {
   display: grid;
   place-content: center;
   cursor: pointer;
@@ -113,25 +113,25 @@
   }
 }
 
-.navds-expansioncard__header:hover > .navds-expansioncard__header-button {
+.aksel-expansioncard__header:hover > .aksel-expansioncard__header-button {
   background-color: var(--ax-bg-neutral-moderate-hoverA);
 }
 
-.navds-expansioncard__header-chevron {
+.aksel-expansioncard__header-chevron {
   transition: transform 250ms cubic-bezier(0.2, 0, 0, 1);
 }
 
-.navds-expansioncard__header[data-open="true"] .navds-expansioncard__header-chevron {
+.aksel-expansioncard__header[data-open="true"] .aksel-expansioncard__header-chevron {
   transform: rotateX(-180deg);
 }
 
 /* Even if animation always takes 250ms, the perceived effect of current timing function makes the 'closing'-animation take longer */
-.navds-expansioncard__header[data-open="false"] .navds-expansioncard__header-chevron {
+.aksel-expansioncard__header[data-open="false"] .aksel-expansioncard__header-chevron {
   transition-duration: 400ms;
 }
 
 /* -------------------------- ExpansionCard Content ------------------------- */
-.navds-expansioncard__content {
+.aksel-expansioncard__content {
   border-end-end-radius: var(--__axc-expansioncard-border-radius);
   border-end-start-radius: var(--__axc-expansioncard-border-radius);
   padding-inline: var(--__axc-expansioncard-padding-inline);
@@ -149,21 +149,21 @@
     visibility: visible;
     padding-block: var(--__axc-expansioncard-padding-block);
 
-    & .navds-expansioncard__content-inner {
+    & .aksel-expansioncard__content-inner {
       opacity: 1;
     }
   }
 }
 
-.navds-expansioncard__content-inner {
+.aksel-expansioncard__content-inner {
   min-height: 0;
   opacity: 0;
   transition: opacity 250ms cubic-bezier(0.2, 0, 0, 1);
 }
 
 /* ---------------- ExpansionCard No Animation (defaultOpen) ---------------- */
-.navds-expansioncard--no-animation {
-  & :is(.navds-expansioncard__content, .navds-expansioncard__content-inner) {
+.aksel-expansioncard--no-animation {
+  & :is(.aksel-expansioncard__content, .aksel-expansioncard__content-inner) {
     transition: none;
   }
 }