@navikt/ds-css 7.14.3 → 7.16.0

package/darkside/form/file-upload.darkside.css

@@ -1,5 +1,5 @@
 /* --------------------------- FileUpload Dropzone -------------------------- */
-.navds-dropzone__area {
+.aksel-dropzone__area {
   --__axc-dropzone-background: var(--ax-bg-input);
   --__axc-dropzone-icon-padding: var(--ax-space-8);
   --__axc-dropzone-animation-length-long: 400ms;
@@ -25,14 +25,14 @@
   &:hover:not([data-disabled="true"]) {
     border-color: var(--ax-border-accent-strong);
 
-    & > .navds-dropzone__area-button {
+    & > .aksel-dropzone__area-button {
       background-color: var(--ax-bg-accent-moderate-hover);
       box-shadow: inset 0 0 0 2px var(--ax-bg-accent-strong-hover);
     }
   }
 
   &:active:not([data-disabled="true"]) {
-    & > .navds-dropzone__area-button {
+    & > .aksel-dropzone__area-button {
       background-color: var(--ax-bg-accent-strong-pressed);
       color: var(--ax-text-accent-contrast);
       box-shadow: none;
@@ -47,12 +47,12 @@
   }
 }
 
-.navds-dropzone--dragging {
-  & > .navds-dropzone__area {
+.aksel-dropzone--dragging {
+  & > .aksel-dropzone__area {
     --__axc-dropzone-background: var(--ax-bg-input);
   }
 
-  & > .navds-dropzone__area::after {
+  & > .aksel-dropzone__area::after {
     color: var(--ax-text-accent);
     background-color: var(--ax-bg-accent-moderateA);
     content: "";
@@ -85,19 +85,19 @@
   }
 }
 
-.navds-dropzone__area-icon {
+.aksel-dropzone__area-icon {
   display: grid;
   padding: var(--__axc-dropzone-icon-padding);
   visibility: hidden;
 }
 
-.navds-dropzone--error > .navds-dropzone__area {
+.aksel-dropzone--error > .aksel-dropzone__area {
   border-color: transparent;
   outline: 2px solid var(--ax-border-danger-strong);
   outline-offset: -1px;
 }
 
-.navds-dropzone__area-release {
+.aksel-dropzone__area-release {
   top: var(--ax-space-16);
   display: grid;
   position: absolute;
@@ -108,7 +108,7 @@
     transform var(--__axc-dropzone-animation-length-long) var(--__axc-dropzone-animation-over-under);
 }
 
-.navds-dropzone__area-release__icon {
+.aksel-dropzone__area-release__icon {
   display: grid;
   padding: var(--__axc-dropzone-icon-padding);
   border-radius: var(--ax-border-radius-full);
@@ -119,27 +119,27 @@
   font-size: 1.5rem;
 }
 
-.navds-dropzone--dragging .navds-dropzone__area-release > .navds-dropzone__area-release__icon {
+.aksel-dropzone--dragging .aksel-dropzone__area-release > .aksel-dropzone__area-release__icon {
   background-color: transparent;
   font-size: 2rem;
 }
 
-.navds-dropzone__area-release__text {
+.aksel-dropzone__area-release__text {
   visibility: hidden;
 }
 
-.navds-dropzone--dragging .navds-dropzone__area-release > .navds-dropzone__area-release__text {
+.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-dropzone--dragging .navds-dropzone__area-release {
+.aksel-dropzone--dragging .aksel-dropzone__area-release {
   color: var(--ax-text-accent-subtle);
   top: 50%;
   transform: translateY(-50%);
 }
 
-.navds-dropzone__area-disabled {
+.aksel-dropzone__area-disabled {
   color: var(--ax-text-neutral-subtle);
   display: flex;
   align-items: center;
@@ -148,15 +148,15 @@
 }
 
 /* ----------------------------- FileUpload Item ---------------------------- */
-.navds-file-upload :is(ul, li),
-ul:has(> li.navds-file-item),
-li.navds-file-item {
+.aksel-file-upload :is(ul, li),
+ul:has(> li.aksel-file-item),
+li.aksel-file-item {
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
-.navds-file-item__inner {
+.aksel-file-item__inner {
   background-color: var(--ax-bg-raised);
   border: 1px solid var(--ax-border-neutral-subtleA);
   outline-offset: -1px;
@@ -168,11 +168,11 @@ li.navds-file-item {
   align-items: flex-start;
 }
 
-.navds-file-item--error > .navds-file-item__inner {
+.aksel-file-item--error > .aksel-file-item__inner {
   outline: 2px solid var(--ax-border-danger-strong);
 }
 
-.navds-file-item__icon {
+.aksel-file-item__icon {
   background-color: var(--ax-bg-neutral-moderateA);
   color: var(--ax-text-neutral);
   border-radius: var(--ax-border-radius-full);
@@ -189,19 +189,19 @@ li.navds-file-item {
   }
 }
 
-.navds-file-item__icon--loading {
+.aksel-file-item__icon--loading {
   background-color: transparent;
 }
 
-.navds-file-item__file-info {
+.aksel-file-item__file-info {
   word-break: break-word;
 }
 
-.navds-file-item__button {
+.aksel-file-item__button {
   margin-left: auto;
 }
 
-.navds-file-item__error {
+.aksel-file-item__error {
   display: grid;
   transition-property: grid-template-rows, padding-top;
   transition-duration: 250ms;
@@ -209,7 +209,7 @@ li.navds-file-item {
   overflow: hidden;
   grid-template-rows: 0fr;
 
-  .navds-file-item--error & {
+  .aksel-file-item--error & {
     grid-template-rows: 1fr;
     padding-top: var(--ax-space-4);
   }

package/darkside/form/form-progress.darkside.css

@@ -1,8 +1,8 @@
-.navds-form-progress__bar {
+.aksel-form-progress__bar {
   margin-bottom: var(--ax-space-8);
 }
 
-.navds-form-progress__button {
+.aksel-form-progress__button {
   &:focus-visible {
     z-index: 1;
   }
@@ -14,12 +14,12 @@
   }
 }
 
-.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 {
+.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;
 }
 
-.navds-form-progress__collapsible {
+.aksel-form-progress__collapsible {
   display: grid;
   visibility: hidden;
   overflow: hidden;
@@ -50,6 +50,6 @@
   }
 }
 
-.navds-form-progress__collapsible-content {
+.aksel-form-progress__collapsible-content {
   min-height: 0;
 }

package/darkside/form/form-summary.darkside.css

@@ -1,11 +1,11 @@
-.navds-form-summary {
+.aksel-form-summary {
   overflow: hidden;
   border: 1px solid var(--ax-border-neutral-subtleA);
   border-radius: var(--ax-border-radius-xlarge);
   background: var(--ax-bg-raised);
 }
 
-.navds-form-summary__header {
+.aksel-form-summary__header {
   background: var(--ax-bg-neutral-moderateA);
   padding: var(--ax-space-20) var(--ax-space-20) var(--ax-space-16) var(--ax-space-20);
   display: flex;
@@ -14,70 +14,70 @@
 }
 
 @media (max-width: 479px) {
-  .navds-form-summary__header {
+  .aksel-form-summary__header {
     padding: var(--ax-space-16) var(--ax-space-16) var(--ax-space-12) var(--ax-space-16);
     flex-direction: column;
   }
 }
 
-.navds-form-summary__edit {
+.aksel-form-summary__edit {
   flex-shrink: 0;
   margin-top: var(--ax-space-4);
   align-self: flex-start;
 }
 
-.navds-form-summary > .navds-form-summary__answers {
+.aksel-form-summary > .aksel-form-summary__answers {
   border-top: 1px solid var(--ax-border-neutral-subtleA);
 }
 
-.navds-form-summary__answers {
+.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) {
-  .navds-form-summary__answers {
+  .aksel-form-summary__answers {
     padding: var(--ax-space-12) var(--ax-space-16) var(--ax-space-16) var(--ax-space-16);
   }
 }
 
-.navds-form-summary__answer:not(:last-child) {
+.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);
 }
 
-.navds-form-summary__answer:has(.navds-form-summary__answer) {
+.aksel-form-summary__answer:has(.aksel-form-summary__answer) {
   padding-bottom: var(--ax-space-24);
 }
 
-.navds-form-summary__answer:has(.navds-form-summary__answer):last-child {
+.aksel-form-summary__answer:has(.aksel-form-summary__answer):last-child {
   padding-bottom: 0;
 }
 
 @media (max-width: 479px) {
-  .navds-form-summary__answer:not(:last-child) {
+  .aksel-form-summary__answer:not(:last-child) {
     margin-bottom: var(--ax-space-12);
     padding-bottom: var(--ax-space-12);
   }
 
-  .navds-form-summary__answer:has(.navds-form-summary__answer) {
+  .aksel-form-summary__answer:has(.aksel-form-summary__answer) {
     padding-bottom: var(--ax-space-20);
   }
 }
 
-.navds-form-summary__value:first-of-type {
+.aksel-form-summary__value:first-of-type {
   margin-top: var(--ax-space-4);
 }
 
-.navds-form-summary__value .navds-form-summary__answers {
+.aksel-form-summary__value .aksel-form-summary__answers {
   margin-top: var(--ax-space-8);
   padding: var(--ax-space-16) var(--ax-space-20);
   background: var(--ax-bg-info-moderateA);
   border-radius: var(--ax-border-radius-large);
   border: 1px solid var(--ax-border-info-subtleA);
 
-  & .navds-form-summary__answer {
+  & .aksel-form-summary__answer {
     border-color: var(--ax-border-info-subtleA);
   }
 }

package/darkside/form/form.darkside.css

@@ -1,32 +1,32 @@
-.navds-form-field {
+.aksel-form-field {
   display: grid;
   justify-items: start;
   gap: var(--ax-space-8);
 }
 
-.navds-form-field__description {
+.aksel-form-field__description {
   margin-top: -0.375rem;
   color: var(--ax-text-neutral-subtle);
 }
 
-.navds-form-field--disabled {
+.aksel-form-field--disabled {
   opacity: var(--ax-opacity-disabled);
   cursor: not-allowed;
 }
 
-.navds-form-field__error:empty {
+.aksel-form-field__error:empty {
   display: none;
 }
 
-.navds-form-field__subdescription {
+.aksel-form-field__subdescription {
   color: var(--ax-text-neutral-subtle);
 }
 
-.navds-form-field--readonly > :where(.navds-form-field__label) {
+.aksel-form-field--readonly > :where(.aksel-form-field__label) {
   display: inline-flex;
 }
 
-.navds-form-field__readonly-icon {
+.aksel-form-field__readonly-icon {
   margin-top: var(--ax-space-2);
   margin-right: var(--ax-space-4);
   flex-shrink: 0;
@@ -34,7 +34,7 @@
 }
 
 @media (forced-colors: active) {
-  .navds-form-field--disabled {
+  .aksel-form-field--disabled {
     opacity: 1;
   }
 }