@navikt/ds-css 8.10.2 → 8.10.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "8.10.2",
+  "version": "8.10.4",
   "description": "CSS for Nav Designsystem",
   "author": "Aksel | Nav designsystem team",
   "keywords": [
@@ -14,7 +14,9 @@
   "files": [
     "*",
     "!dist/version",
-    "!config/bundle.js"
+    "!config",
+    "!.gitignore",
+    "!CHANGELOG.md"
   ],
   "repository": {
     "type": "git",
@@ -30,7 +32,7 @@
     "css:get-version": "node config/get-version.js"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^8.10.2",
+    "@navikt/ds-tokens": "^8.10.4",
     "browserslist": "^4.25.0",
     "esbuild": "^0.27.4",
     "fast-glob": "3.3.3",
@@ -46,9 +48,13 @@
   ],
   "main": "./dist/index.css",
   "exports": {
-    ".": "./dist/index.css",
-    "./dist/*": "./dist/*",
-    "./tokens.json": "./tokens.json",
-    "./config/_mappings": "./config/_mappings.js"
+    ".": {
+      "types": "./types.d.ts",
+      "default": "./dist/index.css"
+    },
+    "./dist/*": {
+      "types": "./types.d.ts",
+      "default": "./dist/*"
+    }
   }
 }

package/src/data-table.css

@@ -11,6 +11,7 @@
   overflow: auto;
   width: 100%;
   position: relative;
+  scroll-timeline: --horizontal-table-scroll inline;
 }
 
 .aksel-data-table {
@@ -104,15 +105,17 @@
     position: sticky;
     top: 0;
     z-index: 3;
+    box-shadow: 1px 1px 0 0 var(--ax-border-neutral-subtle);
 
-    &::after {
+    /* 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);
-    }
+    } */
   }
 }
 
@@ -146,6 +149,27 @@
   box-shadow: 0 1px 0 0 var(--ax-border-neutral-subtle);
 }
 
+@keyframes scroll-shadow-fade-start {
+  0% {
+    opacity: 0;
+  }
+
+  10%,
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes scroll-shadow-fade-end {
+  90% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
 .aksel-data-table__cell {
   /* border doesn't work on sticky thead when we have collapsed borders, so using box-shadow instead */
   box-shadow: inset 1px 1px 0 0 var(--ax-border-neutral-subtle);
@@ -195,6 +219,24 @@
     &[data-sticky="start"] {
       left: 0;
 
+      &::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        box-shadow: 4px 0 8px 1px var(--ax-border-neutral-subtleA);
+        clip-path: inset(0 -24px 0 0);
+        opacity: 0;
+      }
+
+      .aksel-data-table[data-scroll] &::before {
+        opacity: 1;
+        animation: scroll-shadow-fade-start 1s linear;
+        animation-timeline: --horizontal-table-scroll;
+      }
+
       &::after {
         inset-inline: 0 -1px;
         border-right-width: 1px;
@@ -203,10 +245,32 @@
 
     &[data-sticky="end"] {
       right: 0;
+
+      &::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        box-shadow: -4px 0 8px 1px var(--ax-border-neutral-subtleA);
+        clip-path: inset(0 0 0 -24px);
+        opacity: 0;
+      }
+
+      .aksel-data-table[data-scroll] &::before {
+        opacity: 1;
+        animation: scroll-shadow-fade-end 1s linear;
+        animation-timeline: --horizontal-table-scroll;
+      }
     }
 
     background-color: var(--ax-bg-raised);
 
+    .aksel-data-table__tr[data-selected="true"] & {
+      background-color: var(--ax-bg-soft);
+    }
+
     .aksel-data-table__thead & {
       background-color: var(--ax-bg-neutral-soft);
     }
@@ -234,11 +298,11 @@
   &:not([data-selectable="true"]) > div {
     padding-block: var(--__axc-data-table-density);
     padding-inline: var(--__axc-data-table-pi-cell);
+    overflow: hidden;
 
     .aksel-data-table[data-truncate-content="true"] & {
       text-overflow: ellipsis;
       white-space: nowrap;
-      overflow: hidden;
     }
   }
 }
@@ -444,9 +508,9 @@
 }
 
 .aksel-data-table__filler-cell {
-  width: auto;
   display: table-cell;
   padding: 0;
+  width: auto;
 }
 
 .aksel-data-drag-and-drop__drag-handler__button {
@@ -593,3 +657,7 @@ html[data-dragging-cursor="true"] *::after {
   display: flex;
   align-items: center;
 }
+
+.aksel-data-table__details-panel-row {
+  box-shadow: inset 1px 1px 0 0 var(--ax-border-neutral-subtle);
+}

package/types.d.ts

@@ -0,0 +1 @@
+declare module "@navikt/ds-css" {}

package/.gitignore

@@ -1 +0,0 @@
-!*.d.ts