@navikt/ds-css 7.14.3 → 7.16.0

package/darkside/timeline.darkside.css

@@ -1,4 +1,4 @@
-.navds-timeline {
+.aksel-timeline {
   position: relative;
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
@@ -7,7 +7,7 @@
   align-items: center;
 }
 
-.navds-timeline__axislabels {
+.aksel-timeline__axislabels {
   position: relative;
   height: 1rem;
   box-sizing: content-box;
@@ -15,7 +15,7 @@
   margin-bottom: var(--ax-space-4);
 }
 
-.navds-timeline__row-label {
+.aksel-timeline__row-label {
   white-space: nowrap;
   width: auto;
   margin-right: var(--ax-space-16);
@@ -26,43 +26,43 @@
   gap: var(--ax-space-8);
 }
 
-.navds-timeline__row-label:where(:nth-last-child(2)) {
+.aksel-timeline__row-label:where(:nth-last-child(2)) {
   align-self: flex-end;
 }
 
-.navds-timeline__axislabels-label {
+.aksel-timeline__axislabels-label {
   position: absolute;
   color: var(--ax-text-neutral-subtle);
   white-space: nowrap;
 }
 
-.navds-timeline__row {
+.aksel-timeline__row {
   display: flex;
   background: var(--ax-bg-neutral-softA);
   margin: var(--ax-space-16) 0;
   grid-column: 2;
 }
 
-.navds-timeline__row--active {
+.aksel-timeline__row--active {
   background: var(--ax-bg-accent-moderate);
 }
 
-.navds-timeline__row:last-of-type {
+.aksel-timeline__row:last-of-type {
   margin-bottom: 0;
 }
 
-.navds-timeline__row-periods {
+.aksel-timeline__row-periods {
   min-height: 1.5rem;
   position: relative;
   width: 100%;
   margin: 0;
 }
 
-.navds-timeline__row-periods > li {
+.aksel-timeline__row-periods > li {
   list-style-type: none;
 }
 
-.navds-timeline__period:focus-visible {
+.aksel-timeline__period:focus-visible {
   z-index: 4;
   outline: 3px solid var(--ax-border-focus);
   outline-offset: 3px;
@@ -72,7 +72,7 @@
   }
 }
 
-.navds-timeline__period {
+.aksel-timeline__period {
   height: 100%;
   border-radius: var(--ax-border-radius-full);
   position: absolute;
@@ -84,7 +84,7 @@
   font-size: 1rem;
 }
 
-.navds-timeline__period--inner {
+.aksel-timeline__period--inner {
   margin: 0 var(--ax-space-8);
   overflow: hidden;
   white-space: nowrap;
@@ -94,114 +94,114 @@
   align-items: center;
 }
 
-.navds-timeline__period--inner svg {
+.aksel-timeline__period--inner svg {
   flex-shrink: 0;
 }
 
-.navds-timeline__period--clickable {
+.aksel-timeline__period--clickable {
   cursor: pointer;
 }
 
-.navds-timeline__period--success {
+.aksel-timeline__period--success {
   background: var(--ax-bg-success-moderate);
   border: solid 1px var(--ax-border-success);
   color: var(--ax-text-success-icon);
 
-  &.navds-timeline__period--clickable:hover {
+  &.aksel-timeline__period--clickable:hover {
     background: var(--ax-bg-success-moderate-hover);
     border-color: var(--ax-border-success-strong);
   }
 
-  &.navds-timeline__period--clickable.navds-timeline__period--selected {
+  &.aksel-timeline__period--clickable.aksel-timeline__period--selected {
     background: var(--ax-bg-success-strong-pressed);
     border: none;
     color: var(--ax-text-success-contrast);
   }
 }
 
-.navds-timeline__period--warning {
+.aksel-timeline__period--warning {
   background: var(--ax-bg-warning-moderate);
   border: solid 1px var(--ax-border-warning);
   color: var(--ax-text-warning-icon);
 
-  &.navds-timeline__period--clickable:hover {
+  &.aksel-timeline__period--clickable:hover {
     background: var(--ax-bg-warning-moderate-hover);
     border-color: var(--ax-border-warning-strong);
   }
 
-  &.navds-timeline__period--clickable.navds-timeline__period--selected {
+  &.aksel-timeline__period--clickable.aksel-timeline__period--selected {
     background: var(--ax-bg-warning-strong-pressed);
     border: none;
     color: var(--ax-text-warning-contrast);
   }
 }
 
-.navds-timeline__period--danger {
+.aksel-timeline__period--danger {
   background: var(--ax-bg-danger-moderate);
   border: solid 1px var(--ax-border-danger);
   color: var(--ax-text-danger-icon);
 
-  &.navds-timeline__period--clickable:hover {
+  &.aksel-timeline__period--clickable:hover {
     background: var(--ax-bg-danger-moderate-hover);
     border-color: var(--ax-border-danger-strong);
   }
 
-  &.navds-timeline__period--clickable.navds-timeline__period--selected {
+  &.aksel-timeline__period--clickable.aksel-timeline__period--selected {
     background: var(--ax-bg-danger-strong-pressed);
     border: none;
     color: var(--ax-text-danger-contrast);
   }
 }
 
-.navds-timeline__period--info {
+.aksel-timeline__period--info {
   background: var(--ax-bg-info-moderate);
   border: solid 1px var(--ax-border-info);
   color: var(--ax-text-info-icon);
 
-  &.navds-timeline__period--clickable:hover {
+  &.aksel-timeline__period--clickable:hover {
     background: var(--ax-bg-info-moderate-hover);
     border-color: var(--ax-border-info-strong);
   }
 
-  &.navds-timeline__period--clickable.navds-timeline__period--selected {
+  &.aksel-timeline__period--clickable.aksel-timeline__period--selected {
     background: var(--ax-bg-info-strong-pressed);
     border: none;
     color: var(--ax-text-info-contrast);
   }
 }
 
-.navds-timeline__period--neutral {
+.aksel-timeline__period--neutral {
   background: var(--ax-bg-neutral-moderate);
   border: solid 1px var(--ax-border-neutral);
   color: var(--ax-text-neutral-icon);
 
-  &.navds-timeline__period--clickable:hover {
+  &.aksel-timeline__period--clickable:hover {
     background: var(--ax-bg-neutral-moderate-hover);
     border-color: var(--ax-border-neutral-strong);
   }
 
-  &.navds-timeline__period--clickable.navds-timeline__period--selected {
+  &.aksel-timeline__period--clickable.aksel-timeline__period--selected {
     background: var(--ax-bg-neutral-strong-pressed);
     border: none;
     color: var(--ax-text-neutral-contrast);
   }
 }
 
-.navds-timeline__period--connected-both {
+.aksel-timeline__period--connected-both {
   border-radius: 0;
 }
 
-.navds-timeline__period--connected-right {
+.aksel-timeline__period--connected-right {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
 
-.navds-timeline__period--connected-left {
+.aksel-timeline__period--connected-left {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
 }
 
-.navds-timeline__pin-wrapper {
+.aksel-timeline__pin-wrapper {
   position: absolute;
   grid-column: 2;
   top: 0;
@@ -210,11 +210,9 @@
   display: flex;
   flex-direction: column-reverse;
   isolation: isolate;
-
-  --navdsc-timeline-pin-size: 0.9rem;
 }
 
-.navds-timeline__pin-button {
+.aksel-timeline__pin-button {
   border: none;
   cursor: pointer;
   background: var(--ax-bg-default);
@@ -248,23 +246,23 @@
   }
 }
 
-.navds-timeline__pin-wrapper::before {
+.aksel-timeline__pin-wrapper::before {
   content: "";
-  top: var(--navdsc-timeline-pin-size);
-  height: calc(100% - var(--navdsc-timeline-pin-size) * 2);
+  top: 0.9rem;
+  height: calc(100% - 0.9rem * 2);
   width: 1px;
   margin: 0 auto;
   background: var(--ax-border-neutral-strong);
 }
 
-.navds-timeline__zoom {
+.aksel-timeline__zoom {
   margin-top: var(--ax-space-24);
   float: right;
   display: flex;
   list-style-type: none;
 }
 
-.navds-timeline__zoom-button {
+.aksel-timeline__zoom-button {
   all: unset;
   cursor: pointer;
   padding: 6px 9px 6px 8px;
@@ -273,41 +271,41 @@
   background: var(--ax-bg-default);
 }
 
-.navds-timeline__zoom li:first-child .navds-timeline__zoom-button {
+.aksel-timeline__zoom li:first-child .aksel-timeline__zoom-button {
   border-radius: var(--ax-border-radius-medium) 0 0 var(--ax-border-radius-medium);
 }
 
-.navds-timeline__zoom li:last-child .navds-timeline__zoom-button {
+.aksel-timeline__zoom li:last-child .aksel-timeline__zoom-button {
   border-width: 1px;
   border-radius: 0 var(--ax-border-radius-medium) var(--ax-border-radius-medium) 0;
 }
 
-.navds-timeline__zoom li:only-child .navds-timeline__zoom-button {
+.aksel-timeline__zoom li:only-child .aksel-timeline__zoom-button {
   border-radius: var(--ax-border-radius-medium);
 }
 
-.navds-timeline__zoom-button:not([aria-pressed="true"]):hover {
+.aksel-timeline__zoom-button:not([aria-pressed="true"]):hover {
   background: var(--ax-bg-neutral-moderate-hoverA);
 }
 
-.navds-timeline__zoom-button[aria-pressed="true"] {
+.aksel-timeline__zoom-button[aria-pressed="true"] {
   background: var(--ax-bg-neutral-strong-pressed);
   border-color: var(--ax-bg-neutral-strong-pressed);
   color: var(--ax-text-neutral-contrast);
 }
 
-.navds-timeline__zoom li:focus-within {
+.aksel-timeline__zoom li:focus-within {
   z-index: 5;
 }
 
-.navds-timeline__zoom-button:focus-visible {
+.aksel-timeline__zoom-button:focus-visible {
   box-shadow:
     0 0 0 1px var(--ax-bg-default),
     0 0 0 4px var(--ax-border-focus);
   border-width: 1px;
 }
 
-.navds-timeline__zoom li:not(:last-child) .navds-timeline__zoom-button:focus-visible {
+.aksel-timeline__zoom li:not(:last-child) .aksel-timeline__zoom-button:focus-visible {
   margin-right: 2px;
   padding-right: 6px;
 }
@@ -316,7 +314,7 @@
 * Timeline Popover
 */
 
-.navds-timeline__popover {
+.aksel-timeline__popover {
   z-index: 5;
   background-color: var(--ax-bg-raised);
   box-shadow: var(--ax-shadow-dialog);
@@ -327,33 +325,33 @@
 }
 
 @media (forced-colors: active) {
-  .navds-timeline__period:focus {
+  .aksel-timeline__period:focus {
     outline: 3px solid highlight;
     outline-offset: 3px;
   }
 
-  .navds-timeline__period--success,
-  .navds-timeline__period--warning,
-  .navds-timeline__period--info,
-  .navds-timeline__period--neutral,
-  .navds-timeline__period--danger {
+  .aksel-timeline__period--success,
+  .aksel-timeline__period--warning,
+  .aksel-timeline__period--info,
+  .aksel-timeline__period--neutral,
+  .aksel-timeline__period--danger {
     forced-color-adjust: none;
   }
 
-  .navds-timeline__row {
+  .aksel-timeline__row {
     border: 1px solid transparent;
   }
 
-  .navds-timeline__pin-wrapper::before {
+  .aksel-timeline__pin-wrapper::before {
     border: 1px solid transparent;
   }
 
-  .navds-timeline__pin-button {
+  .aksel-timeline__pin-button {
     outline: 4px solid transparent;
   }
 
-  .navds-timeline__pin-button:focus,
-  .navds-timeline__pin-button:focus-visible {
+  .aksel-timeline__pin-button:focus,
+  .aksel-timeline__pin-button:focus-visible {
     outline: 4px solid highlight;
     outline-offset: 3px;
     box-shadow: none;

package/darkside/toggle-group.darkside.css

@@ -1,15 +1,15 @@
-.navds-toggle-group__wrapper {
+.aksel-toggle-group__wrapper {
   display: grid;
   justify-items: start;
   gap: var(--ax-space-8);
 }
 
-.navds-toggle-group__wrapper--fill {
+.aksel-toggle-group__wrapper--fill {
   justify-items: initial;
 }
 
 /* Main Togglegroup */
-.navds-toggle-group {
+.aksel-toggle-group {
   border-radius: var(--ax-border-radius-large);
   background-color: transparent;
   box-shadow: inset 0 0 0 1px var(--ax-border-neutral);
@@ -20,7 +20,7 @@
 }
 
 /* Button */
-.navds-toggle-group__button {
+.aksel-toggle-group__button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -61,7 +61,7 @@
   }
 }
 
-.navds-toggle-group__button-inner {
+.aksel-toggle-group__button-inner {
   display: flex;
   align-items: center;
   gap: var(--ax-space-8);
@@ -76,7 +76,7 @@
 }
 
 /* Modifier neutral variant */
-:where(.navds-toggle-group--neutral) .navds-toggle-group__button {
+:where(.aksel-toggle-group--neutral) .aksel-toggle-group__button {
   &:hover {
     background-color: var(--ax-bg-neutral-moderate-hoverA);
   }
@@ -88,36 +88,36 @@
 }
 
 /* Modifier small size */
-.navds-toggle-group--small {
-  & .navds-toggle-group__button {
+.aksel-toggle-group--small {
+  & .aksel-toggle-group__button {
     padding: var(--ax-space-2) var(--ax-space-12);
     min-height: 2rem;
   }
 
-  & .navds-toggle-group__button-inner > svg {
+  & .aksel-toggle-group__button-inner > svg {
     font-size: var(--ax-font-size-xlarge);
   }
 }
 
 /* High contrast */
 @media (forced-colors: active) {
-  .navds-toggle-group {
+  .aksel-toggle-group {
     border: 2px solid transparent;
   }
 
-  .navds-toggle-group__button:hover {
+  .aksel-toggle-group__button:hover {
     background-color: highlighttext;
     color: highlight;
     outline: 1px solid highlight;
   }
 
-  .navds-toggle-group__button[data-selected="true"] {
+  .aksel-toggle-group__button[data-selected="true"] {
     background-color: selecteditem;
     color: selecteditemtext;
     forced-color-adjust: none;
   }
 
-  .navds-toggle-group__button:focus-visible {
+  .aksel-toggle-group__button:focus-visible {
     outline-color: highlight;
   }
 }

package/darkside/tooltip.darkside.css

@@ -1,4 +1,4 @@
-.navds-tooltip {
+.aksel-tooltip {
   z-index: 3000;
   background-color: var(--ax-bg-neutral-strong);
   color: var(--ax-text-neutral-contrast);
@@ -34,19 +34,19 @@
   }
 }
 
-.navds-tooltip:where([data-state="open"]):where([data-side="bottom"]) {
+.aksel-tooltip:where([data-state="open"]):where([data-side="bottom"]) {
   animation-name: aksel-tooltip-from-bottom, aksel-tooltip-fade-in;
 }
 
-.navds-tooltip:where([data-state="open"]):where([data-side="top"]) {
+.aksel-tooltip:where([data-state="open"]):where([data-side="top"]) {
   animation-name: aksel-tooltip-from-top, aksel-tooltip-fade-in;
 }
 
-.navds-tooltip:where([data-state="open"]):where([data-side="left"]) {
+.aksel-tooltip:where([data-state="open"]):where([data-side="left"]) {
   animation-name: aksel-tooltip-from-left, aksel-tooltip-fade-in;
 }
 
-.navds-tooltip:where([data-state="open"]):where([data-side="right"]) {
+.aksel-tooltip:where([data-state="open"]):where([data-side="right"]) {
   animation-name: aksel-tooltip-from-right, aksel-tooltip-fade-in;
 }
 
@@ -100,13 +100,13 @@
   }
 }
 
-.navds-tooltip__keys {
+.aksel-tooltip__keys {
   padding-bottom: var(--ax-space-4);
   display: flex;
   gap: var(--ax-space-4);
 }
 
-.navds-tooltip__key {
+.aksel-tooltip__key {
   font-family: var(--ax-font-family);
   color: var(--ax-text-neutral);
   padding: 0 var(--ax-space-4);