@navikt/ds-css 7.14.3 → 7.16.0

package/darkside/read-more.darkside.css

@@ -1,4 +1,4 @@
-.navds-read-more {
+.aksel-read-more {
   --__axc-read-more-icon-size: 1.5rem;
   --__axc-read-more-pi-start: 0px;
   --__axc-read-more-pi-end: var(--ax-space-4);
@@ -6,7 +6,7 @@
 }
 
 /* ----------------------------- ReadMore Button ---------------------------- */
-.navds-read-more__button {
+.aksel-read-more__button {
   cursor: pointer;
   margin: 0;
   border: none;
@@ -24,13 +24,13 @@
     outline-offset: 3px;
   }
 
-  &[data-state="open"] .navds-read-more__expand-icon {
+  &[data-state="open"] .aksel-read-more__expand-icon {
     transform: rotateX(-180deg);
   }
 }
 
-.navds-read-more:is([data-volume="low"], :not([data-volume])) {
-  & .navds-read-more__button {
+.aksel-read-more:is([data-volume="low"], :not([data-volume])) {
+  & .aksel-read-more__button {
     border-radius: var(--ax-border-radius-medium);
 
     &:hover {
@@ -39,8 +39,8 @@
   }
 }
 
-.navds-read-more[data-volume="high"] {
-  & .navds-read-more__button {
+.aksel-read-more[data-volume="high"] {
+  & .aksel-read-more__button {
     background-color: var(--ax-bg-accent-moderate);
     border-radius: var(--ax-border-radius-full);
 
@@ -50,20 +50,20 @@
     }
   }
 
-  &.navds-read-more--large {
+  &.aksel-read-more--large {
     --__axc-read-more-pi-start: var(--ax-space-12);
     --__axc-read-more-pi-end: var(--ax-space-24);
   }
 
-  &.navds-read-more--small,
-  &.navds-read-more--medium {
+  &.aksel-read-more--small,
+  &.aksel-read-more--medium {
     --__axc-read-more-pi-start: var(--ax-space-8);
     --__axc-read-more-pi-end: var(--ax-space-16);
   }
 }
 
 /* ---------------------------- ReadMore Content ---------------------------- */
-.navds-read-more__content {
+.aksel-read-more__content {
   margin-top: var(--ax-space-8);
   border-left: 2px solid var(--ax-border-neutral-subtleA);
   color: var(--ax-text-neutral);
@@ -75,25 +75,25 @@
   }
 }
 
-.navds-read-more__expand-icon {
+.aksel-read-more__expand-icon {
   font-size: var(--__axc-read-more-icon-size);
   flex-shrink: 0;
   transition: transform 100ms cubic-bezier(0.2, 0, 0, 1);
 }
 
 /* ----------------------------- ReadMore Sizes ----------------------------- */
-.navds-read-more--large {
+.aksel-read-more--large {
   --__axc-read-more-pb: var(--ax-space-12);
 }
 
-.navds-read-more--small {
+.aksel-read-more--small {
   --__axc-read-more-icon-size: 1.25rem;
   --__axc-read-more-pb: var(--ax-space-2);
 }
 
 /* ------------------------- ReadMore high-contrast ------------------------- */
 @media (forced-colors: active) {
-  .navds-read-more__button {
+  .aksel-read-more__button {
     background-color: ButtonFace;
     border: solid 1px ButtonText;
     color: ButtonText;

package/darkside/skeleton.darkside.css

@@ -1,31 +1,31 @@
-.navds-skeleton {
+.aksel-skeleton {
   background-color: var(--ax-bg-neutral-moderateA);
   height: 1.3em;
   animation: akselSkeletonAnimation 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   pointer-events: none;
 }
 
-.navds-skeleton--inline {
+.aksel-skeleton--inline {
   display: inline-block;
 }
 
-.navds-skeleton--has-children {
+.aksel-skeleton--has-children {
   color: transparent;
 
   & > * {
     visibility: hidden;
   }
 
-  &.navds-skeleton--no-height {
+  &.aksel-skeleton--no-height {
     height: auto;
   }
 
-  &.navds-skeleton--no-width {
+  &.aksel-skeleton--no-width {
     width: fit-content;
   }
 }
 
-.navds-skeleton--text {
+.aksel-skeleton--text {
   height: auto;
   transform-origin: 0 55%;
   transform: scale(1, 0.6);
@@ -36,15 +36,15 @@
   }
 }
 
-.navds-skeleton--circle {
+.aksel-skeleton--circle {
   border-radius: var(--ax-border-radius-full);
 }
 
-.navds-skeleton--rectangle {
+.aksel-skeleton--rectangle {
   border-radius: 0;
 }
 
-.navds-skeleton--rounded {
+.aksel-skeleton--rounded {
   border-radius: var(--ax-border-radius-xlarge);
 }
 
@@ -55,7 +55,7 @@
 }
 
 @media (forced-colors: active) {
-  .navds-skeleton {
+  .aksel-skeleton {
     forced-color-adjust: none;
     background-color: canvastext;
     animation-duration: 2s;

package/darkside/stepper.darkside.css

@@ -1,4 +1,4 @@
-.navds-stepper {
+.aksel-stepper {
   --__axc-stepper-circle-size: 1.75rem;
   --__axc-stepper-border-width: 2px;
   --__axc-stepper-line-length: 1rem;
@@ -11,7 +11,7 @@
   margin: 0;
 }
 
-.navds-stepper__item {
+.aksel-stepper__item {
   display: grid;
   grid-template-rows:
     [line-1] auto [step-start] var(--__axc-stepper-circle-size)
@@ -21,7 +21,7 @@
   gap: var(--ax-space-8);
 }
 
-.navds-stepper__line {
+.aksel-stepper__line {
   background-color: var(--ax-border-accent);
   width: var(--__axc-stepper-border-width);
   height: 100%;
@@ -29,33 +29,33 @@
   justify-self: center;
   grid-column: 1;
 
-  .navds-stepper__item--non-interactive & {
+  .aksel-stepper__item--non-interactive & {
     background-color: var(--ax-border-neutral-strong);
   }
 }
 
 /* Line before non-interactive step */
-.navds-stepper__item:has(+ .navds-stepper__item > .navds-stepper__step[data-interactive="false"]) {
-  .navds-stepper__line--2 {
+.aksel-stepper__item:has(+ .aksel-stepper__item > .aksel-stepper__step[data-interactive="false"]) {
+  .aksel-stepper__line--2 {
     background-color: var(--ax-border-neutral-strong);
   }
 }
 
-.navds-stepper__line--1 {
+.aksel-stepper__line--1 {
   grid-row: line-1;
   display: none;
 }
 
-.navds-stepper__line--2 {
+.aksel-stepper__line--2 {
   grid-row: line-2;
 
   /* Hide last line under item */
-  .navds-stepper__item:last-of-type & {
+  .aksel-stepper__item:last-of-type & {
     display: none;
   }
 }
 
-.navds-stepper__step {
+.aksel-stepper__step {
   grid-row: 2 / -1;
   grid-column: 1 / -1;
   display: grid;
@@ -77,7 +77,7 @@
   }
 
   /* Remove last item bottom margin */
-  .navds-stepper__item:last-child & {
+  .aksel-stepper__item:last-child & {
     margin-bottom: 0;
   }
 
@@ -91,7 +91,7 @@
   }
 }
 
-.navds-stepper__circle {
+.aksel-stepper__circle {
   grid-column: circle;
   display: inline-grid;
   place-items: center;
@@ -102,17 +102,17 @@
   line-height: 1;
 }
 
-.navds-stepper__circle--success {
+.aksel-stepper__circle--success {
   background: none;
   font-size: var(--__axc-stepper-circle-size);
 }
 
-.navds-stepper__step[data-interactive="true"] {
+.aksel-stepper__step[data-interactive="true"] {
   color: var(--ax-text-accent-subtle);
   border-radius: var(--ax-border-radius-medium);
   text-decoration: none;
 
-  & .navds-stepper__content {
+  & .aksel-stepper__content {
     text-decoration: underline;
     text-underline-offset: 0.1em;
     text-decoration-thickness: 0.05em;
@@ -120,22 +120,22 @@
 
   &:hover,
   &:active {
-    & .navds-stepper__content {
+    & .aksel-stepper__content {
       text-decoration-thickness: 0.111em;
     }
   }
 
-  & .navds-stepper__circle {
+  & .aksel-stepper__circle {
     color: var(--ax-text-accent-subtle);
     border-color: var(--ax-border-accent-strong);
   }
 
   &[data-active="true"] {
-    & .navds-stepper__content {
+    & .aksel-stepper__content {
       text-decoration: none;
     }
 
-    & .navds-stepper__circle {
+    & .aksel-stepper__circle {
       color: var(--ax-text-accent-contrast);
       background-color: var(--ax-bg-accent-strong-pressed);
       border-color: var(--ax-bg-accent-strong-pressed);
@@ -144,7 +144,7 @@
 
   &[data-active="false"] {
     &:hover {
-      & .navds-stepper__circle {
+      & .aksel-stepper__circle {
         background-color: var(--ax-bg-accent-moderate-hoverA);
         border-color: var(--ax-border-accent-strong);
       }
@@ -152,16 +152,16 @@
   }
 }
 
-.navds-stepper__step[data-interactive="false"] {
+.aksel-stepper__step[data-interactive="false"] {
   color: var(--ax-text-neutral-subtle);
   cursor: default;
 
-  & .navds-stepper__circle {
+  & .aksel-stepper__circle {
     border-color: var(--ax-border-neutral-strong);
   }
 
   &[data-active="true"] {
-    & .navds-stepper__circle {
+    & .aksel-stepper__circle {
       color: var(--ax-text-neutral-contrast);
       background-color: var(--ax-bg-neutral-strong-pressed);
       border-color: var(--ax-bg-neutral-strong-pressed);
@@ -169,7 +169,7 @@
   }
 }
 
-.navds-stepper__content {
+.aksel-stepper__content {
   min-width: fit-content;
   line-height: 1.5;
   grid-column: content;
@@ -177,12 +177,12 @@
 }
 
 /* Horizontal */
-.navds-stepper[data-orientation="horizontal"] {
+.aksel-stepper[data-orientation="horizontal"] {
   display: flex;
   align-items: flex-start;
   text-align: center;
 
-  & .navds-stepper__line {
+  & .aksel-stepper__line {
     height: var(--__axc-stepper-border-width);
     width: 100%;
     min-height: auto;
@@ -191,28 +191,28 @@
     align-self: center;
   }
 
-  & .navds-stepper__line--1 {
+  & .aksel-stepper__line--1 {
     grid-column: line-1;
   }
 
-  & .navds-stepper__line--2 {
+  & .aksel-stepper__line--2 {
     grid-column: line-2;
   }
 
-  & .navds-stepper__item {
+  & .aksel-stepper__item {
     flex: 1 1 100%;
     grid-template-columns:
       [line-1-start] 1fr [step-start] auto [line-1-end] var(--__axc-stepper-circle-size)
       [line-2-start] auto [step-end] 1fr [line-2-end];
     grid-template-rows: var(--__axc-stepper-circle-size) auto;
 
-    &:first-of-type .navds-stepper__line--1,
-    &:last-of-type .navds-stepper__line--2 {
+    &:first-of-type .aksel-stepper__line--1,
+    &:last-of-type .aksel-stepper__line--2 {
       visibility: hidden;
     }
   }
 
-  & .navds-stepper__step {
+  & .aksel-stepper__step {
     grid-row: 1 / -1;
     grid-column: step;
     display: grid;
@@ -224,12 +224,12 @@
     margin-bottom: 0;
   }
 
-  & .navds-stepper__circle {
+  & .aksel-stepper__circle {
     grid-row: circle;
     grid-column: 2;
   }
 
-  & .navds-stepper__content {
+  & .aksel-stepper__content {
     grid-row: content;
     grid-column: 1 / -1;
     max-width: 24ch;
@@ -237,18 +237,18 @@
 }
 
 @media (forced-colors: active) {
-  .navds-stepper__circle.navds-stepper__circle {
+  .aksel-stepper__circle.aksel-stepper__circle {
     border: 0;
     outline: 2px solid ButtonText;
     outline-offset: 2px;
   }
 
-  .navds-stepper__line.navds-stepper__line {
+  .aksel-stepper__line.aksel-stepper__line {
     background-color: ButtonText;
   }
 
-  .navds-stepper__step[data-active="true"][data-interactive] {
-    .navds-stepper__circle {
+  .aksel-stepper__step[data-active="true"][data-interactive] {
+    .aksel-stepper__circle {
       forced-color-adjust: none;
       background-color: highlight;
       color: highlighttext;