@navikt/ds-css 8.10.6 → 8.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "8.10.6",
+  "version": "8.11.1",
   "description": "CSS for Nav Designsystem",
   "author": "Aksel | Nav designsystem team",
   "keywords": [
@@ -32,7 +32,7 @@
     "css:get-version": "node config/get-version.js"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^8.10.6",
+    "@navikt/ds-tokens": "^8.11.1",
     "browserslist": "^4.25.0",
     "esbuild": "^0.28.0",
     "fast-glob": "3.3.3",

package/src/{data-table.css → data-grid-preview.css}

@@ -1,6 +1,14 @@
 /* stylelint-disable csstools/value-no-unknown-custom-properties */
 /* stylelint-disable no-duplicate-selectors */
 
+.aksel-data-grid {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  overflow: hidden;
+}
+
 .aksel-data-table__border-wrapper {
   /* display:flex and max-height:100% is needed for a "no page scroll" layout */
   display: flex;
@@ -37,21 +45,18 @@
 
   /* Default font size is prop "medium", which is variable --ax-font-size-large */
   --__axc-data-table-text-size: var(--ax-font-size-large);
-  --__axc-data-table-density-base: var(--ax-space-16);
-  --__axc-data-table-density-scale: 1;
-  --__axc-data-table-density: calc(var(--__axc-data-table-density-base) * var(--__axc-data-table-density-scale));
+  --__axc-data-table-density: var(--ax-space-12);
 
   &[data-text-size="small"] {
     --__axc-data-table-text-size: var(--ax-font-size-medium);
-    --__axc-data-table-density-scale: 0.8889; /* 16/18 */
   }
 
-  &[data-density="condensed"] {
-    --__axc-data-table-density-base: var(--ax-space-8);
+  &[data-density="tight"] {
+    --__axc-data-table-density: var(--ax-space-6);
   }
 
-  &[data-density="spacious"] {
-    --__axc-data-table-density-base: var(--ax-space-32);
+  &[data-density="loose"] {
+    --__axc-data-table-density: var(--ax-space-20);
   }
 
   &[data-zebra-stripes="true"] {
@@ -63,16 +68,23 @@
 
 .aksel-data-table__thead {
   background-color: var(--ax-bg-raised);
+  position: relative; /* Shadow ends up behind loading/empty-state without, consider after-element instead like with sticky */
+  box-shadow: 0 1px 0 0 var(--ax-border-neutral-subtle);
 
   .aksel-data-table[data-loading="true"] &::after {
     content: "";
     position: absolute;
     block-size: 2px;
-    inset-block-end: -2px;
     background-color: var(--ax-bg-strong);
     animation: animateDataTableLoading 1s linear infinite;
     z-index: 11;
   }
+
+  &[data-sticky="true"] {
+    position: sticky;
+    top: 0;
+    z-index: 3;
+  }
 }
 
 .aksel-data-table__tbody {
@@ -80,12 +92,7 @@
   position: relative;
 
   &[inert] {
-    transition: opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
     opacity: var(--ax-opacity-disabled);
-
-    @starting-style {
-      opacity: 0.001;
-    }
   }
 
   &[inert]::after {
@@ -93,15 +100,8 @@
     position: absolute;
     inset: 0;
     background-color: var(--ax-bg-overlay);
-    transition: opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
-    z-index: 10;
+    z-index: 2;
     opacity: 0.2;
-
-    /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
-
-    @starting-style {
-      opacity: 0.001;
-    }
   }
 }
 
@@ -109,23 +109,6 @@
   &[data-selected="true"] {
     background-color: var(--ax-bg-softA);
   }
-
-  .aksel-data-table__thead &[data-sticky="true"] {
-    position: sticky;
-    top: 0;
-    z-index: 3;
-    box-shadow: 1px 1px 0 0 var(--ax-border-neutral-subtle);
-
-    /* This breaks filler-cells ⬇️. Trying box-shadow instead ⬆️ */
-    /* &::after {
-      content: "";
-      position: absolute;
-      inset-inline: 0;
-      bottom: -1px;
-      pointer-events: none;
-      border-bottom: 1px solid var(--ax-border-neutral-subtle);
-    } */
-  }
 }
 
 /* BORDER STYLING START */
@@ -153,11 +136,6 @@
   border-bottom: 1px solid var(--ax-border-neutral-subtle);
 }
 
-.aksel-data-table__thead {
-  position: relative; /* Shadow ends up behind loading/empty-state without, consider after-element instead like with sticky */
-  box-shadow: 0 1px 0 0 var(--ax-border-neutral-subtle);
-}
-
 @keyframes scroll-shadow-fade-start {
   0% {
     opacity: 0;
@@ -188,6 +166,10 @@
   padding: 0;
   font-size: var(--__axc-data-table-text-size);
 
+  &:not(.aksel-data-table__column-header) {
+    overflow: hidden; /* Needed for cases where left margin is added to cell-content (nested rows) */
+  }
+
   &[data-nested="true"] {
     position: relative;
 
@@ -313,21 +295,6 @@
     .aksel-data-table[data-truncate-content="true"] & {
       text-overflow: ellipsis;
       white-space: nowrap;
-
-      /* TODO: Too magical? Consider prop instead */
-      > :is(.aksel-tag, .aksel-button) {
-        vertical-align: top;
-
-        &:not(:last-child) {
-          margin-right: var(--ax-space-8);
-        }
-      }
-    }
-
-    .aksel-data-table[data-truncate-content="false"] &:has(.aksel-tag, .aksel-button) {
-      display: flex;
-      gap: var(--ax-space-8);
-      flex-wrap: wrap;
     }
   }
 }
@@ -341,11 +308,11 @@
   position: relative;
   font-weight: var(--ax-font-weight-bold);
 
-  &:has(.aksel-data-table__th-sort-button:hover) {
+  &:has(.aksel-data-table__th-sort-button:hover:not(:disabled)) {
     background-color: var(--ax-bg-neutral-moderate-hover);
   }
 
-  &:has(.aksel-data-table__th-sort-button:active) {
+  &:has(.aksel-data-table__th-sort-button:active:not(:disabled)) {
     background-color: var(--ax-bg-neutral-moderate-pressed);
   }
 
@@ -371,6 +338,11 @@
   &:focus-visible {
     outline: none;
   }
+
+  &:disabled {
+    color: inherit;
+    cursor: default;
+  }
 }
 
 .aksel-data-table__th-sort-icon {
@@ -381,7 +353,7 @@
     visibility: hidden;
   }
 
-  .aksel-data-table__th-sort-button:is(:hover, :focus-visible, :focus-within) & {
+  .aksel-data-table__th-sort-button:is(:hover, :focus-visible, :focus-within):not(:disabled) & {
     visibility: visible;
   }
 

package/src/index.css

@@ -31,6 +31,7 @@
 @import "./chat.css" layer(aksel.components.modules);
 @import "./copybutton.css" layer(aksel.components.modules);
 @import "./date.css" layer(aksel.components.modules);
+@import "./data-grid-preview.css" layer(aksel.components.modules);
 @import "./dialog.css" layer(aksel.components.modules);
 @import "./dropdown.css" layer(aksel.components.modules);
 @import "./action-menu.css" layer(aksel.components.modules);