@navikt/ds-css 7.14.3 → 7.16.0

package/darkside/table.darkside.css

@@ -1,116 +1,116 @@
-.navds-table {
+.aksel-table {
   width: 100%;
   border-collapse: collapse;
   display: table;
 }
 
-.navds-table__header {
+.aksel-table__header {
   display: table-header-group;
 }
 
-.navds-table__body {
+.aksel-table__body {
   display: table-row-group;
 
-  & .navds-table__row--shade-on-hover:not(.navds-table__expandable-row--expansion-disabled):hover {
+  & .aksel-table__row--shade-on-hover:not(.aksel-table__expandable-row--expansion-disabled):hover {
     background-color: var(--ax-bg-neutral-moderate-hoverA);
     transition: background-color 70ms cubic-bezier(0.2, 0, 0, 1);
   }
 
-  & .navds-table__row--shade-on-hover.navds-table__row--selected:hover {
+  & .aksel-table__row--shade-on-hover.aksel-table__row--selected:hover {
     background-color: var(--ax-bg-accent-moderate-hoverA);
   }
 }
 
-.navds-table__row {
+.aksel-table__row {
   display: table-row;
 }
 
-.navds-table__row--selected {
+.aksel-table__row--selected {
   background-color: var(--ax-bg-accent-softA);
 
-  & + .navds-table__expanded-row {
+  & + .aksel-table__expanded-row {
     background-color: var(--ax-bg-accent-softA);
   }
 }
 
-.navds-table--zebra-stripes {
-  & .navds-table__body :where(.navds-table__row:nth-child(odd):not(.navds-table__row--selected)) {
+.aksel-table--zebra-stripes {
+  & .aksel-table__body :where(.aksel-table__row:nth-child(odd):not(.aksel-table__row--selected)) {
     background-color: var(--ax-bg-neutral-softA);
   }
 
-  & .navds-table__body :where(.navds-table__expandable-row:nth-child(4n + 1):not(.navds-table__row--selected)) {
+  & .aksel-table__body :where(.aksel-table__expandable-row:nth-child(4n + 1):not(.aksel-table__row--selected)) {
     background-color: transparent;
   }
 
-  & .navds-table__body .navds-table__expanded-row:nth-child(4n) {
+  & .aksel-table__body .aksel-table__expanded-row:nth-child(4n) {
     background-color: var(--ax-bg-neutral-softA);
   }
 
-  & .navds-table__row--selected + .navds-table__expanded-row:nth-child(4n) {
+  & .aksel-table__row--selected + .aksel-table__expanded-row:nth-child(4n) {
     background-color: var(--ax-bg-accent-softA);
   }
 }
 
-.navds-table__header-cell,
-.navds-table__data-cell {
+.aksel-table__header-cell,
+.aksel-table__data-cell {
   display: table-cell;
   padding: var(--ax-space-12) var(--ax-space-8);
   border-bottom: 1px solid var(--ax-border-neutral-subtleA);
   text-align: left;
 }
 
-.navds-table__header .navds-table__header-cell,
-.navds-table__header .navds-table__data-cell {
+.aksel-table__header .aksel-table__header-cell,
+.aksel-table__header .aksel-table__data-cell {
   border-bottom-width: 2px;
 }
 
-.navds-table__header-cell--align-right,
-.navds-table__data-cell--align-right {
+.aksel-table__header-cell--align-right,
+.aksel-table__data-cell--align-right {
   text-align: right;
 }
 
-.navds-table__header-cell--align-center,
-.navds-table__data-cell--align-center {
+.aksel-table__header-cell--align-center,
+.aksel-table__data-cell--align-center {
   text-align: center;
 }
 
-:where(.navds-table__expandable-row--open:hover) .navds-table__data-cell {
+:where(.aksel-table__expandable-row--open:hover) .aksel-table__data-cell {
   border-bottom-color: transparent;
 }
 
-.navds-table--large .navds-table__header-cell,
-.navds-table--large .navds-table__data-cell {
+.aksel-table--large .aksel-table__header-cell,
+.aksel-table--large .aksel-table__data-cell {
   padding: var(--ax-space-16) var(--ax-space-8);
 }
 
-.navds-table--small .navds-table__header-cell,
-.navds-table--small .navds-table__data-cell {
+.aksel-table--small .aksel-table__header-cell,
+.aksel-table--small .aksel-table__data-cell {
   padding: var(--ax-space-4) var(--ax-space-8);
 }
 
 /* TODO: Look to handle "inline"-checkbox better than custom CSS-overrides in the future. */
-.navds-table :not(.navds-checkboxes) > .navds-checkbox .navds-checkbox__input {
+.aksel-table :not(.aksel-checkboxes) > .aksel-checkbox .aksel-checkbox__input {
   top: -0.75rem;
 }
 
-.navds-table :not(.navds-checkboxes) > .navds-checkbox--small .navds-checkbox__input {
+.aksel-table :not(.aksel-checkboxes) > .aksel-checkbox--small .aksel-checkbox__input {
   top: -0.375rem;
 }
 
-.navds-table :not(.navds-checkboxes) > .navds-checkbox .navds-checkbox__label {
+.aksel-table :not(.aksel-checkboxes) > .aksel-checkbox .aksel-checkbox__label {
   padding: 0;
 }
 
-.navds-table .navds-checkbox__input:focus + .navds-checkbox__label::after,
-.navds-table .navds-radio__input:focus + .navds-radio__label::after {
+.aksel-table .aksel-checkbox__input:focus + .aksel-checkbox__label::after,
+.aksel-table .aksel-radio__input:focus + .aksel-radio__label::after {
   height: 100%;
 }
 
-.navds-table__header-cell[aria-sort] {
+.aksel-table__header-cell[aria-sort] {
   padding: 0;
 }
 
-.navds-table__sort-button {
+.aksel-table__sort-button {
   appearance: none;
   background: none;
   color: var(--ax-text-accent-subtle);
@@ -126,68 +126,68 @@
   font-weight: inherit;
 }
 
-.navds-table--small .navds-table__sort-button {
+.aksel-table--small .aksel-table__sort-button {
   padding: var(--ax-space-8) var(--ax-space-12);
 }
 
-.navds-table__sort-button:hover {
+.aksel-table__sort-button:hover {
   background-color: var(--ax-bg-neutral-moderate-hoverA);
 }
 
-.navds-table__sort-button:focus-visible {
+.aksel-table__sort-button:focus-visible {
   outline: 3px solid var(--ax-border-focus);
   outline-offset: -5px;
 }
 
-.navds-table__header-cell[aria-sort="ascending"] .navds-table__sort-button,
-.navds-table__header-cell[aria-sort="descending"] .navds-table__sort-button {
+.aksel-table__header-cell[aria-sort="ascending"] .aksel-table__sort-button,
+.aksel-table__header-cell[aria-sort="descending"] .aksel-table__sort-button {
   background-color: var(--ax-bg-accent-moderate-pressedA);
   color: var(--ax-text-accent);
 }
 
-.navds-table__header-cell--align-right .navds-table__sort-button {
+.aksel-table__header-cell--align-right .aksel-table__sort-button {
   justify-content: flex-end;
 }
 
-.navds-table__header-cell--align-center .navds-table__sort-button {
+.aksel-table__header-cell--align-center .aksel-table__sort-button {
   justify-content: center;
 }
 
-.navds-table__sort-button svg {
+.aksel-table__sort-button svg {
   font-size: 1.5rem;
   flex-shrink: 0;
 }
 
-.navds-table__expandable-row:not(.navds-table__expandable-row--open) :where(.navds-table__data-cell, .navds-table__header-cell) {
+.aksel-table__expandable-row:not(.aksel-table__expandable-row--open) :where(.aksel-table__data-cell, .aksel-table__header-cell) {
   transition: border-bottom-color 150ms cubic-bezier(0.95, 0.05, 0.8, 0.04);
 }
 
-.navds-table__expandable-row.navds-table__expandable-row--clickable:not(.navds-table__expandable-row--expansion-disabled):hover {
+.aksel-table__expandable-row.aksel-table__expandable-row--clickable:not(.aksel-table__expandable-row--expansion-disabled):hover {
   cursor: pointer;
 }
 
-.navds-table__expandable-row--open :where(.navds-table__data-cell, .navds-table__header-cell) {
+.aksel-table__expandable-row--open :where(.aksel-table__data-cell, .aksel-table__header-cell) {
   border-bottom-color: transparent;
 }
 
-.navds-table__expandable-row--open .navds-table__toggle-expand-cell--open {
+.aksel-table__expandable-row--open .aksel-table__toggle-expand-cell--open {
   border-color: transparent;
 }
 
-.navds-table__toggle-expand-cell {
+.aksel-table__toggle-expand-cell {
   padding: 0;
   width: 3rem;
 }
 
-.navds-table--large .navds-table__toggle-expand-cell {
+.aksel-table--large .aksel-table__toggle-expand-cell {
   padding: 0 var(--ax-space-8);
 }
 
-.navds-table--small .navds-table__toggle-expand-cell {
+.aksel-table--small .aksel-table__toggle-expand-cell {
   padding: var(--ax-space-4) var(--ax-space-8);
 }
 
-.navds-table__toggle-expand-button {
+.aksel-table__toggle-expand-button {
   display: grid;
   place-content: center;
   cursor: pointer;
@@ -201,37 +201,37 @@
   transition: background-color 70ms cubic-bezier(0.2, 0, 0, 1);
 }
 
-.navds-table__expandable-icon {
+.aksel-table__expandable-icon {
   transition: transform 250ms cubic-bezier(0.2, 0, 0, 1);
 }
 
-.navds-table__expandable-row:not(.navds-table__expandable-row--expansion-disabled) .navds-table__toggle-expand-cell:hover {
+.aksel-table__expandable-row:not(.aksel-table__expandable-row--expansion-disabled) .aksel-table__toggle-expand-cell:hover {
   cursor: pointer;
 }
 
-.navds-table__toggle-expand-button:hover,
-.navds-table__toggle-expand-cell:hover > .navds-table__toggle-expand-button,
-.navds-table__expandable-row--clickable:hover .navds-table__toggle-expand-button {
+.aksel-table__toggle-expand-button:hover,
+.aksel-table__toggle-expand-cell:hover > .aksel-table__toggle-expand-button,
+.aksel-table__expandable-row--clickable:hover .aksel-table__toggle-expand-button {
   background-color: var(--ax-bg-neutral-moderate-hoverA);
 }
 
-& .navds-table__toggle-expand-button:hover,
-& .navds-table__toggle-expand-cell:hover > .navds-table__toggle-expand-button,
-& .navds-table__expandable-row--clickable:hover .navds-table__toggle-expand-button {
-  .navds-table__row--selected & {
+& .aksel-table__toggle-expand-button:hover,
+& .aksel-table__toggle-expand-cell:hover > .aksel-table__toggle-expand-button,
+& .aksel-table__expandable-row--clickable:hover .aksel-table__toggle-expand-button {
+  .aksel-table__row--selected & {
     background-color: var(--ax-bg-accent-moderate-hoverA);
   }
 }
 
-.navds-table__toggle-expand-cell--open > :where(.navds-table__toggle-expand-button) :where(.navds-table__expandable-icon) {
+.aksel-table__toggle-expand-cell--open > :where(.aksel-table__toggle-expand-button) :where(.aksel-table__expandable-icon) {
   transform: rotateX(180deg);
 }
 
-.navds-table__toggle-expand-button:focus-visible {
+.aksel-table__toggle-expand-button:focus-visible {
   outline: 3px solid var(--ax-border-focus);
 }
 
-.navds-table__expanded-row-cell {
+.aksel-table__expanded-row-cell {
   padding: 0;
 
   &:empty {
@@ -240,33 +240,33 @@
 }
 
 /* -------------------------- Table ExpandableRow -------------------------- */
-.navds-table__expanded-row-collapse:not([style*="height: 0px;"]),
-.navds-table__expanded-row-collapse[style*="transition:"] {
+.aksel-table__expanded-row-collapse:not([style*="height: 0px;"]),
+.aksel-table__expanded-row-collapse[style*="transition:"] {
   border-bottom: 1px solid var(--ax-border-neutral-subtleA);
 }
 
-.navds-table__expanded-row-content {
+.aksel-table__expanded-row-content {
   --__ac-table-expanded-row-pi: calc(var(--ax-space-8) + 3rem);
 
   padding-block: var(--ax-space-16);
 }
 
-.navds-table--small .navds-table__expanded-row-content {
+.aksel-table--small .aksel-table__expanded-row-content {
   padding-block: var(--ax-space-8);
 }
 
-.navds-table__expanded-row-content--gutter-both {
+.aksel-table__expanded-row-content--gutter-both {
   padding-inline: var(--__ac-table-expanded-row-pi);
 }
 
-.navds-table__expanded-row-content--gutter-left {
+.aksel-table__expanded-row-content--gutter-left {
   padding-inline: var(--__ac-table-expanded-row-pi) var(--ax-space-8);
 }
 
-.navds-table__expanded-row-content--gutter-right {
+.aksel-table__expanded-row-content--gutter-right {
   padding-inline: var(--ax-space-8) var(--__ac-table-expanded-row-pi);
 }
 
-.navds-table__expanded-row-content--gutter-none {
+.aksel-table__expanded-row-content--gutter-none {
   padding-inline: var(--ax-space-8);
 }

package/darkside/tabs.darkside.css

@@ -1,10 +1,10 @@
-.navds-tabs__tablist-wrapper {
+.aksel-tabs__tablist-wrapper {
   box-shadow: inset 0 -1px var(--ax-border-neutral-subtleA);
   width: 100%;
   display: flex;
 }
 
-.navds-tabs__tablist {
+.aksel-tabs__tablist {
   display: flex;
   max-width: 100%;
   width: 100%;
@@ -18,7 +18,7 @@
   }
 }
 
-.navds-tabs__scroll-button {
+.aksel-tabs__scroll-button {
   padding: var(--ax-space-12) var(--ax-space-16);
   width: 2.75rem;
   display: flex;
@@ -31,17 +31,17 @@
     flex-shrink: 0;
   }
 
-  .navds-tabs--small & {
+  .aksel-tabs--small & {
     padding: var(--ax-space-6) var(--ax-space-16);
     width: 2rem;
   }
 }
 
-.navds-tabs__scroll-button--hidden {
+.aksel-tabs__scroll-button--hidden {
   visibility: hidden;
 }
 
-.navds-tabs__tab {
+.aksel-tabs__tab {
   min-height: 3rem;
   padding: var(--ax-space-12) var(--ax-space-16);
   display: inline-flex;
@@ -73,7 +73,7 @@
   }
 }
 
-.navds-tabs__tab-inner {
+.aksel-tabs__tab-inner {
   display: flex;
   align-items: center;
   gap: var(--ax-space-4);
@@ -86,62 +86,62 @@
     flex-shrink: 0;
   }
 
-  .navds-tabs__tab-icon--top > & {
+  .aksel-tabs__tab-icon--top > & {
     flex-direction: column;
     gap: 0;
   }
 }
 
-.navds-tabs__tab--small {
+.aksel-tabs__tab--small {
   min-height: 2rem;
   padding: var(--ax-space-6) var(--ax-space-16);
 }
 
-.navds-tabs__tab-icon--top,
-.navds-tabs__tab--small.navds-tabs__tab-icon--top {
+.aksel-tabs__tab-icon--top,
+.aksel-tabs__tab--small.aksel-tabs__tab-icon--top {
   padding: var(--ax-space-4) var(--ax-space-16);
 }
 
-.navds-tabs__tab,
-.navds-tabs__tab--small.navds-tabs__tab--icon-only,
-.navds-tabs__tab--small.navds-tabs__tab-icon--top {
+.aksel-tabs__tab,
+.aksel-tabs__tab--small.aksel-tabs__tab--icon-only,
+.aksel-tabs__tab--small.aksel-tabs__tab-icon--top {
   & svg {
     font-size: 1.25rem;
   }
 }
 
-.navds-tabs__tab--small svg {
+.aksel-tabs__tab--small svg {
   font-size: 1rem;
 }
 
-.navds-tabs__tab--icon-only,
-.navds-tabs__tab-icon--top {
+.aksel-tabs__tab--icon-only,
+.aksel-tabs__tab-icon--top {
   & svg {
     font-size: 1.5rem;
   }
 }
 
-.navds-tabs__tab--fill {
+.aksel-tabs__tab--fill {
   flex: 1 1 100%;
 }
 
-.navds-tabs__tabpanel:focus-visible {
+.aksel-tabs__tabpanel:focus-visible {
   outline: 3px solid var(--ax-border-focus);
   outline-offset: -3px;
 }
 
 @media (forced-colors: active) {
-  .navds-tabs__tab[data-state="active"] {
+  .aksel-tabs__tab[data-state="active"] {
     border-bottom: 3px solid canvastext;
     padding-block-end: calc(var(--ax-space-12) - 3px);
   }
 
-  .navds-tabs__tab--small[data-state="active"] {
+  .aksel-tabs__tab--small[data-state="active"] {
     padding-block-end: calc(var(--ax-space-6) - 3px);
   }
 
-  .navds-tabs__tab-icon--top[data-state="active"],
-  .navds-tabs__tab--small.navds-tabs__tab-icon--top[data-state="active"] {
+  .aksel-tabs__tab-icon--top[data-state="active"],
+  .aksel-tabs__tab--small.aksel-tabs__tab-icon--top[data-state="active"] {
     padding-block-end: calc(var(--ax-space-4) - 3px);
   }
 }

package/darkside/tag.darkside.css

@@ -1,4 +1,4 @@
-.navds-tag {
+.aksel-tag {
   --__axc-tag-icon-size: 1.5rem;
   --__axc-tag-icon-margin: -2px;
   --__axc-tag-border: ;
@@ -15,13 +15,13 @@
   min-height: 2rem;
   line-height: 1;
 
-  &:has(.navds-tag__icon--left) {
+  &:has(.aksel-tag__icon--left) {
     gap: var(--ax-space-2);
   }
 }
 
-.navds-tag--info,
-.navds-tag--alt3 {
+.aksel-tag--info,
+.aksel-tag--alt3 {
   --__axc-tag-border: var(--ax-border-info);
   --__axc-tag-bg: var(--ax-bg-info-moderateA);
   --__axc-tag-bg-strong: var(--ax-bg-info-strong);
@@ -29,7 +29,7 @@
   --__axc-tag-text-strong: var(--ax-text-info-contrast);
 }
 
-.navds-tag--success {
+.aksel-tag--success {
   --__axc-tag-border: var(--ax-border-success);
   --__axc-tag-bg: var(--ax-bg-success-moderateA);
   --__axc-tag-bg-strong: var(--ax-bg-success-strong);
@@ -37,7 +37,7 @@
   --__axc-tag-text-strong: var(--ax-text-success-contrast);
 }
 
-.navds-tag--warning {
+.aksel-tag--warning {
   --__axc-tag-border: var(--ax-border-warning);
   --__axc-tag-bg: var(--ax-bg-warning-moderateA);
   --__axc-tag-bg-strong: var(--ax-bg-warning-strong);
@@ -45,7 +45,7 @@
   --__axc-tag-text-strong: var(--ax-text-warning-contrast);
 }
 
-.navds-tag--error {
+.aksel-tag--error {
   --__axc-tag-border: var(--ax-border-danger);
   --__axc-tag-bg: var(--ax-bg-danger-moderateA);
   --__axc-tag-bg-strong: var(--ax-bg-danger-strong);
@@ -53,7 +53,7 @@
   --__axc-tag-text-strong: var(--ax-text-danger-contrast);
 }
 
-.navds-tag--neutral {
+.aksel-tag--neutral {
   --__axc-tag-border: var(--ax-border-neutral);
   --__axc-tag-bg: var(--ax-bg-neutral-moderateA);
   --__axc-tag-bg-strong: var(--ax-bg-neutral-strong);
@@ -61,8 +61,8 @@
   --__axc-tag-text-strong: var(--ax-text-neutral-contrast);
 }
 
-.navds-tag--meta-purple,
-.navds-tag--alt1 {
+.aksel-tag--meta-purple,
+.aksel-tag--alt1 {
   --__axc-tag-border: var(--ax-border-meta-purple);
   --__axc-tag-bg: var(--ax-bg-meta-purple-moderateA);
   --__axc-tag-bg-strong: var(--ax-bg-meta-purple-strong);
@@ -70,8 +70,8 @@
   --__axc-tag-text-strong: var(--ax-text-meta-purple-contrast);
 }
 
-.navds-tag--meta-lime,
-.navds-tag--alt2 {
+.aksel-tag--meta-lime,
+.aksel-tag--alt2 {
   --__axc-tag-border: var(--ax-border-meta-lime);
   --__axc-tag-bg: var(--ax-bg-meta-lime-moderateA);
   --__axc-tag-bg-strong: var(--ax-bg-meta-lime-strong);
@@ -79,14 +79,14 @@
   --__axc-tag-text-strong: var(--ax-text-meta-lime-contrast);
 }
 
-.navds-tag--small {
+.aksel-tag--small {
   min-height: 1.5rem;
   padding: 0 var(--ax-space-6);
 
   --__axc-tag-icon-size: 1.25rem;
 }
 
-.navds-tag--xsmall {
+.aksel-tag--xsmall {
   min-height: 1.25rem;
   padding: 0 var(--ax-space-4);
 
@@ -94,39 +94,39 @@
   --__axc-tag-icon-margin: -1px;
 }
 
-.navds-tag__icon--left {
+.aksel-tag__icon--left {
   font-size: var(--__axc-tag-icon-size);
   margin-inline-start: var(--__axc-tag-icon-margin);
   display: flex;
 }
 
-.navds-tag--outline {
+.aksel-tag--outline {
   box-shadow: inset 0 0 0 1px var(--__axc-tag-border);
   background: var(--__axc-tag-bg);
   color: var(--__axc-tag-text);
 }
 
-.navds-tag--moderate {
+.aksel-tag--moderate {
   background: var(--__axc-tag-bg);
   color: var(--__axc-tag-text);
 }
 
-.navds-tag--strong {
+.aksel-tag--strong {
   background: var(--__axc-tag-bg-strong);
   color: var(--__axc-tag-text-strong);
 }
 
 @media (forced-colors: active) {
-  .navds-tag {
+  .aksel-tag {
     forced-color-adjust: none;
     color: canvastext;
   }
 
-  .navds-tag--moderate {
+  .aksel-tag--moderate {
     box-shadow: inset 0 0 0 1px var(--__axc-tag-bg-strong);
   }
 
-  .navds-tag--strong {
+  .aksel-tag--strong {
     color: canvas;
   }
 }

package/darkside/theme.darkside.css

@@ -1,4 +1,4 @@
-.navds-theme {
+.aksel-theme {
   color: var(--ax-text-neutral);
 
   &[data-background="true"] {