@navikt/ds-css 8.10.5 → 8.11.0

package/package.json

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

package/src/alert.css

@@ -215,13 +215,17 @@
   display: flex;
   align-items: flex-start;
   gap: var(--ax-space-8);
-  padding: var(--ax-space-12) var(--ax-space-16);
+  padding: var(--ax-space-16) var(--ax-space-20);
 
   & > .aksel-base-alert__icon {
     margin-top: var(--ax-space-2);
   }
 
-  .aksel-base-alert[data-size="small"] & > .aksel-base-alert__icon {
-    margin-top: 0;
+  .aksel-base-alert[data-size="small"] & {
+    padding: var(--ax-space-12) var(--ax-space-16);
+
+    & > .aksel-base-alert__icon {
+      margin-top: 0;
+    }
   }
 }

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;
@@ -35,14 +43,20 @@
     min-width: 100%;
   }
 
-  --__axc-data-table-density: var(--ax-space-16);
+  /* 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: var(--ax-space-12);
+
+  &[data-text-size="small"] {
+    --__axc-data-table-text-size: var(--ax-font-size-medium);
+  }
 
-  &[data-density="condensed"] {
-    --__axc-data-table-density: var(--ax-space-8);
+  &[data-density="tight"] {
+    --__axc-data-table-density: var(--ax-space-6);
   }
 
-  &[data-density="spacious"] {
-    --__axc-data-table-density: var(--ax-space-32);
+  &[data-density="loose"] {
+    --__axc-data-table-density: var(--ax-space-20);
   }
 
   &[data-zebra-stripes="true"] {
@@ -177,11 +191,16 @@
   vertical-align: middle;
   scroll-margin: var(--ax-space-0);
   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;
 
-    & > div {
+    & > .aksel-data-table__cell-content {
       margin-inline-start: calc(32px + 8px + calc(var(--__axc-data-table-nested-depth) * var(--ax-space-16)));
     }
   }
@@ -219,7 +238,7 @@
     &[data-sticky="start"] {
       left: 0;
 
-      &::before {
+      &[data-sticky-last]::before {
         content: "";
         position: absolute;
         inset: 0;
@@ -231,13 +250,13 @@
         opacity: 0;
       }
 
-      .aksel-data-table[data-scroll] &::before {
+      .aksel-data-table[data-scroll] &[data-sticky-last]::before {
         opacity: 1;
         animation: scroll-shadow-fade-start 1s linear;
         animation-timeline: --horizontal-table-scroll;
       }
 
-      &::after {
+      &[data-sticky-last]::after {
         inset-inline: 0 -1px;
         border-right-width: 1px;
       }
@@ -284,10 +303,10 @@
     outline-offset: -4px;
   }
 
-  &[data-selectable="true"] {
+  &[data-cell-type="action"] {
     padding: 0;
 
-    & > div {
+    & > .aksel-data-table__cell-content {
       display: grid;
       place-content: center;
     }
@@ -295,7 +314,7 @@
 
   --__axc-data-table-pi-cell: var(--ax-space-16);
 
-  &:not([data-selectable="true"]) > div {
+  &:not([data-cell-type="action"]) > .aksel-data-table__cell-content {
     padding-block: var(--__axc-data-table-density);
     padding-inline: var(--__axc-data-table-pi-cell);
     overflow: hidden;
@@ -316,11 +335,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);
   }
 
@@ -346,6 +365,11 @@
   &:focus-visible {
     outline: none;
   }
+
+  &:disabled {
+    color: inherit;
+    cursor: default;
+  }
 }
 
 .aksel-data-table__th-sort-icon {
@@ -356,7 +380,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;
   }
 
@@ -441,11 +465,11 @@
       transform: translateY(-50%);
       height: 1.5rem;
 
-      &.aksel-data-table__th-resize-handle-indicator--start {
+      &:first-child {
         right: 12px;
       }
 
-      &.aksel-data-table__th-resize-handle-indicator--end {
+      &:last-child {
         left: 12px;
       }
     }
@@ -493,10 +517,10 @@
     outline-offset: -4px;
   }
 
-  &[data-selectable="true"] {
+  &[data-cell-type="action"] {
     padding: 0;
 
-    & > div {
+    & > .aksel-data-table__cell-content {
       display: grid;
       place-content: center;
     }
@@ -545,21 +569,11 @@
     background-color: var(--ax-bg-default);
   }
 
-  /* TODO - might be removable */
-  &[data-keyboard-dragging="true"] {
-    .aksel-data-drag-and-drop__drag-handler__button {
-      outline: 2px solid var(--ax-border-focus);
-      outline-offset: -1px;
-      border-radius: var(--ax-radius-8);
-    }
-  }
-
   &[data-drop-target="true"]:not([data-overlay="true"]) {
     background: var(--ax-bg-neutral-moderate);
   }
 }
 
-.aksel-data-drag-and-drop__drag-handler__legacy,
 .aksel-data-drag-and-drop__drag-handler {
   position: relative;
   height: 1.5rem;

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);