@navikt/ds-css 8.4.0 → 8.5.0

package/package.json

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

package/src/data-table.css

@@ -44,7 +44,7 @@
 }
 
 .aksel-data-table--truncate-content {
-  .aksel-data-table__td > div {
+  .aksel-data-table__td > div:not(:has(> .aksel-checkbox)) {
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
@@ -66,6 +66,24 @@
   border: none;
 }
 
+.aksel-data-table__tr--selected {
+  background-color: var(--ax-bg-softA);
+  box-shadow:
+    inset 1px 0 0 0 var(--ax-border-default),
+    inset -1px 0 0 0 var(--ax-border-default);
+
+  &:first-of-type {
+    box-shadow:
+      inset 1px 0 0 0 var(--ax-border-default),
+      inset -1px 0 0 0 var(--ax-border-default),
+      inset 0 1px 0 0 var(--ax-border-default);
+  }
+
+  & :is(.aksel-data-table__td, .aksel-data-table__th) {
+    border-color: var(--ax-border-default);
+  }
+}
+
 .aksel-data-table__th {
   position: relative;
   background-color: var(--ax-bg-neutral-soft);
@@ -73,14 +91,13 @@
   padding: var(--ax-space-8) var(--ax-space-16);
   text-align: start;
   border-block-end: 1px solid var(--ax-border-neutral-subtle);
-  overflow: hidden;
 
   &:not(:first-child) {
     border-inline-start: 1px solid var(--ax-border-neutral-subtle);
   }
 }
 
-.aksel-data-table__th-content {
+.aksel-data-table__th-content:not(:has(> .aksel-checkbox)) {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -89,30 +106,31 @@
 .aksel-data-table__th-resize-handle {
   z-index: 2;
   position: absolute;
-  inset-block: 0;
-  inset-inline-end: 0; /* TODO: See if we can make the handle appear right between the columns */
   cursor: col-resize;
   margin: 0;
   padding: 0;
-  width: 12px; /* TODO: Violation of WCAG SC 2.5.8 Target Size https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html */
   border: none;
   background: transparent;
+  display: flex;
+  justify-content: center;
+  inset-block: 0;
+  inset-inline-end: -10px;
+  width: 19px; /* TODO: Violation of WCAG SC 2.5.8 Target Size? https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html */
 
   &::after {
     content: "";
     position: absolute;
     inset-block: 0;
-    inset-inline-end: 0;
-    width: 4px;
+    width: 3px;
   }
 
   &:hover::after {
     /* TODO: Consider if the resize-handle should be visible already when hovering the column header */
-    background: var(--ax-bg-accent-strong);
+    background: var(--ax-bg-strong);
   }
 
   &:active::after {
-    background: var(--ax-bg-accent-strong-pressed);
+    background: var(--ax-bg-strong-pressed);
   }
 }
 
@@ -126,7 +144,8 @@
     transition: none;
   }
 
-  &:not(.aksel-data-table__th:is(:hover, :focus-within) &, &:focus-visible, &[data-expanded="true"]) {
+  &:not(.aksel-data-table__th:is(:hover, :focus-within) &, &:focus-visible, &[data-expanded="true"]),
+  .aksel-data-table__th:has(.aksel-data-table__th-resize-handle:hover:not(:focus)) & {
     opacity: 0;
     min-width: 0;
     max-width: 0;
@@ -143,7 +162,6 @@
   color: var(--ax-text-neutral-subtle);
   padding: var(--__axc-data-table-density);
   padding-inline: 1rem;
-  overflow: hidden;
 
   &:not(:first-child) {
     border-inline-start: 1px solid var(--ax-border-neutral-subtle);
@@ -153,7 +171,7 @@
     border-block-end: none;
   }
 
-  .aksel-data-table:not(:has(.aksel-data-table__tfoot)) .aksel-data-table__tr:last-child & {
+  .aksel-data-table:not(:has(.aksel-data-table__tfoot)) .aksel-data-table__tr:not(.aksel-data-table__tr--selected):last-child & {
     border-block-end: none;
   }
 }

package/src/form/combobox.css

@@ -157,6 +157,11 @@
   line-height: var(--ax-font-line-height-large);
   margin: 0;
   padding-left: 0.25rem;
+
+  .aksel-form-field--small & {
+    font-size: var(--ax-font-size-medium);
+    line-height: var(--ax-font-line-height-medium);
+  }
 }
 
 .aksel-combobox__input-wrapper {