@navikt/ds-css 7.15.0 → 7.16.1

package/darkside/link-panel.darkside.css

@@ -1,4 +1,4 @@
-.navds-link-panel {
+.aksel-link-panel {
   text-decoration: none;
   color: var(--ax-text-neutral);
   display: flex;
@@ -9,7 +9,7 @@
   &:hover {
     border-color: var(--ax-border-accent);
 
-    & .navds-link-panel__title {
+    & .aksel-link-panel__title {
       text-decoration: underline;
       color: var(--ax-text-accent-subtle);
     }
@@ -21,17 +21,17 @@
   }
 }
 
-.navds-link-panel__chevron {
+.aksel-link-panel__chevron {
   flex-shrink: 0;
   font-size: 1.5rem;
   transition: transform 200ms;
 }
 
-.navds-link-panel:hover > .navds-link-panel__chevron,
-.navds-link-panel:focus-within > .navds-link-panel__chevron {
+.aksel-link-panel:hover > .aksel-link-panel__chevron,
+.aksel-link-panel:focus-within > .aksel-link-panel__chevron {
   transform: translateX(4px);
 }
 
-.navds-link-panel__description {
+.aksel-link-panel__description {
   margin-top: var(--a-space-4);
 }

package/darkside/link.darkside.css

@@ -1,4 +1,4 @@
-.navds-link {
+.aksel-link {
   color: var(--ax-text-accent-subtle);
   display: inline-flex;
   align-items: center;
@@ -18,7 +18,7 @@
     border-radius: 1px;
   }
 
-  &.navds-link--inline-text {
+  &.aksel-link--inline-text {
     display: inline;
 
     & > svg {
@@ -30,7 +30,7 @@
     }
   }
 
-  &.navds-link--remove-underline {
+  &.aksel-link--remove-underline {
     text-decoration: none;
 
     &:hover {
@@ -44,21 +44,21 @@
   }
 }
 
-.navds-alert:not(.navds-alert--inline),
-.navds-confirmation-panel {
-  & .navds-link {
+.aksel-alert:not(.aksel-alert--inline),
+.aksel-confirmation-panel {
+  & .aksel-link {
     color: var(--ax-text-neutral);
   }
 }
 
-.navds-link--action {
+.aksel-link--action {
   color: var(--ax-text-accent-subtle);
 }
 
-.navds-link--neutral {
+.aksel-link--neutral {
   color: var(--ax-text-neutral);
 }
 
-.navds-link--subtle {
+.aksel-link--subtle {
   color: var(--ax-text-neutral-subtle);
 }

package/darkside/list.darkside.css

@@ -1,11 +1,11 @@
-.navds-list ul,
-.navds-list ol {
+.aksel-list ul,
+.aksel-list ol {
   padding: 0;
   margin: 0;
 }
 
-.navds-list {
-  & .navds-list :where(ul, ol) {
+.aksel-list {
+  & .aksel-list :where(ul, ol) {
     margin-block: var(--ax-space-8) 0;
   }
 
@@ -13,7 +13,7 @@
     list-style: decimal; /* This is the default value, but some frameworks have `ol,ul { list-style:none }` */
     padding-left: 1.7rem;
 
-    & > .navds-list__item {
+    & > .aksel-list__item {
       padding-left: 0.3rem;
     }
 
@@ -23,13 +23,13 @@
   }
 
   & ul {
-    & > .navds-list__item {
+    & > .aksel-list__item {
       display: grid;
       grid-template-columns: auto 1fr;
       gap: var(--ax-space-8);
     }
 
-    & > li > .navds-list__item-marker {
+    & > li > .aksel-list__item-marker {
       display: flex;
       align-items: center;
       height: var(--ax-font-line-height-xlarge);
@@ -42,20 +42,20 @@
 
 _::-webkit-full-page-media,
 _:future,
-:root .navds-list ol {
+:root .aksel-list ol {
   padding-left: 2.1rem;
 }
 
 _::-webkit-full-page-media,
 _:future,
-:root .navds-list ol .navds-list__item {
+:root .aksel-list ol .aksel-list__item {
   padding-left: 0;
 }
 
 /* SAFARI HACK END */
 /* stylelint-enable selector-type-no-unknown */
 
-.navds-list__item {
+.aksel-list__item {
   margin-block-end: var(--ax-space-8);
 
   &:last-child {
@@ -63,19 +63,19 @@ _:future,
   }
 }
 
-.navds-list__item-marker {
+.aksel-list__item-marker {
   width: 1.5rem;
 }
 
-.navds-list--small ul > li > .navds-list__item-marker {
+.aksel-list--small ul > li > .aksel-list__item-marker {
   height: var(--ax-font-line-height-large);
 }
 
-.navds-list__item-marker--bullet {
+.aksel-list__item-marker--bullet {
   padding-left: 0.8rem;
 }
 
-.navds-list__item-marker--icon {
+.aksel-list__item-marker--icon {
   font-size: 1.5rem;
   justify-content: center;
 }

package/darkside/loader.darkside.css

@@ -1,4 +1,4 @@
-.navds-loader {
+.aksel-loader {
   width: 1.5rem;
   display: inline-block;
   position: relative;
@@ -7,49 +7,49 @@
 
   --__axc-loader-stroke-width: 5.9;
 
-  &.navds-loader--3xlarge {
+  &.aksel-loader--3xlarge {
     width: 5.5rem;
     stroke-width: 5;
 
     --__axc-loader-stroke-width: 4.8;
   }
 
-  &.navds-loader--2xlarge {
+  &.aksel-loader--2xlarge {
     width: 4rem;
     stroke-width: 6;
 
     --__axc-loader-stroke-width: 5.8;
   }
 
-  &.navds-loader--xlarge {
+  &.aksel-loader--xlarge {
     width: 2.5rem;
     stroke-width: 6;
 
     --__axc-loader-stroke-width: 5.8;
   }
 
-  &.navds-loader--large {
+  &.aksel-loader--large {
     width: 2rem;
     stroke-width: 7;
 
     --__axc-loader-stroke-width: 6.8;
   }
 
-  &.navds-loader--medium {
+  &.aksel-loader--medium {
     width: 1.5rem;
     stroke-width: 7;
 
     --__axc-loader-stroke-width: 6.8;
   }
 
-  &.navds-loader--small {
+  &.aksel-loader--small {
     width: 1.25rem;
     stroke-width: 8;
 
     --__axc-loader-stroke-width: 7.8;
   }
 
-  &.navds-loader--xsmall {
+  &.aksel-loader--xsmall {
     width: 1rem;
     stroke-width: 8;
 
@@ -57,7 +57,7 @@
   }
 }
 
-.navds-loader__foreground {
+.aksel-loader__foreground {
   animation: loader-dasharray 1.5s ease-in-out infinite;
   stroke-dasharray: 80px, 200px;
   stroke-dashoffset: 0;
@@ -66,39 +66,39 @@
   stroke-width: var(--__axc-loader-stroke-width);
 }
 
-.navds-loader__background {
+.aksel-loader__background {
   stroke: var(--ax-border-neutral-subtleA);
   stroke-width: var(--__axc-loader-stroke-width);
 }
 
-.navds-loader--neutral {
-  & .navds-loader__foreground {
+.aksel-loader--neutral {
+  & .aksel-loader__foreground {
     stroke: var(--ax-border-neutral-strong);
   }
 }
 
-.navds-loader--interaction {
-  & .navds-loader__foreground {
+.aksel-loader--interaction {
+  & .aksel-loader__foreground {
     stroke: var(--ax-border-accent-strong);
   }
 
-  & .navds-loader__background {
+  & .aksel-loader__background {
     stroke: var(--ax-border-accent-subtleA);
   }
 }
 
-.navds-loader--inverted {
-  & .navds-loader__foreground {
+.aksel-loader--inverted {
+  & .aksel-loader__foreground {
     stroke: var(--ax-border-neutral-subtle);
   }
 
-  & .navds-loader__background {
+  & .aksel-loader__background {
     stroke: var(--ax-border-neutral-strong);
   }
 }
 
-.navds-loader--transparent {
-  & .navds-loader__background {
+.aksel-loader--transparent {
+  & .aksel-loader__background {
     stroke: transparent;
   }
 }
@@ -127,7 +127,7 @@
 }
 
 @media (forced-colors: active) {
-  .navds-loader__background {
+  .aksel-loader__background {
     stroke: canvastext;
   }
 }

package/darkside/modal.darkside.css

@@ -1,8 +1,8 @@
-.navds-modal__document-body {
+.aksel-modal__document-body {
   overflow: hidden;
 }
 
-.navds-modal {
+.aksel-modal {
   --__axc-modal-bg: var(--ax-bg-raised);
 
   background-color: var(--__axc-modal-bg);
@@ -23,7 +23,7 @@
   }
 }
 
-.navds-modal--polyfilled {
+.aksel-modal--polyfilled {
   top: 50%;
   transform: translate(0, -50%);
 
@@ -38,7 +38,7 @@
     display: none; /* from polyfill */
   }
 
-  & .navds-modal--polyfilled {
+  & .aksel-modal--polyfilled {
     overflow: auto;
   }
 }
@@ -53,48 +53,48 @@
   left: 0;
 }
 
-.navds-modal--medium {
+.aksel-modal--medium {
   width: 700px;
 }
 
-.navds-modal--small {
+.aksel-modal--small {
   width: 450px;
 
-  & .navds-modal__header {
+  & .aksel-modal__header {
     padding: var(--ax-space-12) var(--ax-space-16);
   }
 
-  & .navds-modal__body {
+  & .aksel-modal__body {
     padding: var(--ax-space-12) var(--ax-space-16);
   }
 
-  & .navds-modal__footer {
+  & .aksel-modal__footer {
     padding: var(--ax-space-12) var(--ax-space-16);
   }
 }
 
 @media (min-width: 480px) {
-  .navds-modal {
+  .aksel-modal {
     max-width: calc(100% - 2em);
   }
 
-  .navds-modal--autowidth {
+  .aksel-modal--autowidth {
     max-width: min(700px, calc(100% - 2em));
   }
 }
 
 @media (min-height: 480px) {
-  .navds-modal {
+  .aksel-modal {
     max-height: calc(100% - 2em);
   }
 
-  .navds-modal--top {
+  .aksel-modal--top {
     margin-top: 2em;
     max-height: calc(100% - 4em);
   }
 }
 
-.navds-modal::backdrop {
+.aksel-modal::backdrop {
   /*
    * Cannot use --ax-bg-overlay because ::backdrop does not inherit from anything but itself.
    * TODO: Consider adding `::backdrop` to global token definitions.
@@ -104,7 +104,7 @@
   animation: akselModalBackdropFadeIn 0.35s cubic-bezier(0.15, 1, 0.3, 1);
 }
 
-.navds-modal--polyfilled + .backdrop /* Cannot be combined with ::backdrop selector */ {
+.aksel-modal--polyfilled + .backdrop /* Cannot be combined with ::backdrop selector */ {
   background: #0214317d;
 
   /* From polyfill: */
@@ -116,16 +116,16 @@
   left: 0;
 }
 
-.navds-modal__button {
+.aksel-modal__button {
   margin-left: var(--ax-space-16);
   float: right;
 }
 
-.navds-modal__header {
+.aksel-modal__header {
   padding: var(--ax-space-16) var(--ax-space-20);
 }
 
-.navds-modal__header-icon {
+.aksel-modal__header-icon {
   & svg {
     display: inline;
     vertical-align: -0.25rem;
@@ -133,12 +133,12 @@
   }
 }
 
-.navds-modal__label {
+.aksel-modal__label {
   font-weight: var(--ax-font-weight-bold);
   color: var(--ax-text-neutral-subtle);
 }
 
-.navds-modal__body {
+.aksel-modal__body {
   padding: var(--ax-space-16) var(--ax-space-20);
   overflow: auto;
   overscroll-behavior: contain;
@@ -157,23 +157,23 @@
   background-repeat: no-repeat;
 }
 
-.navds-modal__header + .navds-modal__body {
+.aksel-modal__header + .aksel-modal__body {
   padding-top: var(--ax-space-0);
 }
 
-.navds-modal__footer {
+.aksel-modal__footer {
   display: flex;
   flex-flow: row-reverse wrap;
   gap: var(--ax-space-16);
   padding: var(--ax-space-16) var(--ax-space-20);
 }
 
-.navds-modal__footer :nth-of-type(2) {
+.aksel-modal__footer :nth-of-type(2) {
   margin-left: auto;
 }
 
 /* When Datepicker is used nested inside a Modal */
-.navds-modal--polyfilled .navds-modal--polyfilled.navds-date__nested-modal {
+.aksel-modal--polyfilled .aksel-modal--polyfilled.aksel-date__nested-modal {
   min-width: fit-content;
   max-width: 100vw;
   max-height: 100vh;
@@ -206,7 +206,7 @@
 }
 
 @media (forced-colors: active) {
-  .navds-modal {
+  .aksel-modal {
     outline: 2px solid transparent;
   }
 }

package/darkside/pagination.darkside.css

@@ -1,8 +1,8 @@
-.navds-pagination {
+.aksel-pagination {
   position: relative;
 }
 
-.navds-pagination__list {
+.aksel-pagination__list {
   margin: 0;
   padding: 0;
   list-style: none;
@@ -15,7 +15,7 @@
   }
 }
 
-.navds-pagination__ellipsis {
+.aksel-pagination__ellipsis {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -23,19 +23,19 @@
   cursor: default;
 }
 
-.navds-pagination--small .navds-pagination__ellipsis {
+.aksel-pagination--small .aksel-pagination__ellipsis {
   width: 2rem;
 }
 
-.navds-pagination--xsmall .navds-pagination__ellipsis {
+.aksel-pagination--xsmall .aksel-pagination__ellipsis {
   width: 1.5rem;
 }
 
-.navds-pagination__item[data-selected="true"] {
+.aksel-pagination__item[data-selected="true"] {
   background-color: var(--ax-bg-neutral-strong-pressed);
   color: var(--ax-text-neutral-contrast);
 }
 
-.navds-pagination--invisible {
+.aksel-pagination--invisible {
   visibility: hidden;
 }

package/darkside/panel.darkside.css

@@ -1,10 +1,10 @@
-.navds-panel {
+.aksel-panel {
   background-color: var(--ax-bg-default);
   padding: var(--ax-space-16);
   border-radius: var(--ax-border-radius-small);
   border: 1px solid transparent;
 }
 
-.navds-panel--border {
+.aksel-panel--border {
   border-color: var(--ax-border-neutral);
 }

package/darkside/popover.darkside.css

@@ -1,4 +1,4 @@
-.navds-popover {
+.aksel-popover {
   z-index: 1000;
   background: var(--ax-bg-raised);
   box-shadow: var(--ax-shadow-dialog);
@@ -9,16 +9,16 @@
   max-width: calc(100vw - var(--ax-space-24));
 }
 
-.navds-popover__content {
+.aksel-popover__content {
   padding: var(--ax-space-16);
 }
 
 @media (min-width: 480px) {
-  .navds-popover__content {
+  .aksel-popover__content {
     padding: var(--ax-space-20);
   }
 }
 
-.navds-popover--hidden {
+.aksel-popover--hidden {
   display: none;
 }