@navikt/ds-css 8.3.0 → 8.4.0

package/package.json

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

package/src/action-menu.css

@@ -4,31 +4,16 @@
   border-radius: var(--ax-radius-12);
   border: 1px solid var(--ax-border-neutral-subtleA);
   box-shadow: var(--ax-shadow-dialog);
-  transition: transform 250ms cubic-bezier(0, 0, 0, 1) allow-discrete;
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+  transform-origin: var(--__axc-action-menu-content-transform-origin);
+  transition:
+    transform 150ms ease allow-discrete,
+    opacity 150ms ease allow-discrete;
 
   &[data-state="open"] {
-    &[data-side="bottom"] {
-      @starting-style {
-        transform: translateY(-4px);
-      }
-    }
-
-    &[data-side="top"] {
-      @starting-style {
-        transform: translateY(4px);
-      }
-    }
-
-    &[data-side="right"] {
-      @starting-style {
-        transform: translateX(-4px);
-      }
-    }
-
-    &[data-side="left"] {
-      @starting-style {
-        transform: translateX(4px);
-      }
+    @starting-style {
+      opacity: 0.8;
+      transform: scale3d(0.94, 0.94, 0.94);
     }
   }
 }
@@ -43,8 +28,6 @@
   background-color: var(--ax-bg-raised);
   min-width: 128px;
   max-width: min(95vw, 640px);
-  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
-  transform-origin: var(--__axc-action-menu-content-transform-origin);
   animation-duration: 160ms;
   animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
   padding: var(--__axc-action-menu-content-p);
@@ -133,7 +116,7 @@
 
 .aksel-action-menu__marker-icon {
   svg {
-    font-size: 18px;
+    font-size: 1.125rem;
     flex-shrink: 0;
   }
 
@@ -143,6 +126,13 @@
   }
 }
 
+.aksel-action-menu__sub-icon {
+  display: grid;
+  place-content: center;
+  font-size: 1.125rem;
+  margin-left: auto;
+}
+
 /* --------------------------- ActionMenu shortcut -------------------------- */
 .aksel-action-menu__shortcut {
   background-color: var(--ax-bg-neutral-moderateA);

package/src/data-table.css

@@ -1,43 +1,81 @@
-/* TODO: Overflow does not currently work with fixed table layout. No idea why... */
-.aksel-data-table__wrapper {
-  overflow-x: auto;
+.aksel-data-table__border-wrapper {
+  border: 1px solid var(--ax-border-neutral-subtle);
+  border-radius: var(--ax-radius-12);
+  overflow: hidden;
+  flex-grow: 1;
+}
+
+.aksel-data-table__scroll-wrapper {
+  overflow: auto;
   width: 100%;
+  height: 100%;
   position: relative;
 }
 
 .aksel-data-table {
   border-collapse: collapse;
   border-spacing: 0;
-  inline-size: 100%;
   table-layout: fixed;
-  width: 100%;
+  width: 1px; /* This is for some reason needed to make the browser respect the column width. TODO: Test in all browsers */
+
+  /*
+  We should NOT set min-width:100% b.c. it will cause inconsistencies in column resizing.
+  We could discuss whether it matters, though. But it feels buggy.
+  Downside is that it looks weird when the table is smaller than the container.
+  Maybe we could "manually" resize the other columns so that it fills the container? But that would add a lot of complexity.
+  We could have a toggle for the resize feature, and let the consumer decide which downside they prefer. Might need that anyways.
+  */
+
+  --__axc-data-table-density: var(--ax-space-16) 0;
+
+  &[data-density="condensed"] {
+    --__axc-data-table-density: 0 0;
+  }
+
+  &[data-density="spacious"] {
+    --__axc-data-table-density: var(--ax-space-32) 0;
+  }
+}
+
+.aksel-data-table--zebra-stripes {
+  & .aksel-data-table__tbody :where(.aksel-data-table__tr:nth-child(odd)) {
+    background-color: var(--ax-bg-neutral-softA);
+  }
+}
+
+.aksel-data-table--truncate-content {
+  .aksel-data-table__td > div {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
 }
 
 .aksel-data-table__thead {
   background-color: var(--ax-bg-raised);
+  position: sticky;
+  top: 0;
+  box-shadow: 0 1px 0 0 var(--ax-border-neutral-subtle);
 }
 
 .aksel-data-table__tbody {
-  inline-size: 100%;
   background-color: var(--ax-bg-raised);
 }
 
 .aksel-data-table__tr {
   border: none;
-  block-size: 3rem;
-  inline-size: 100%;
 }
 
 .aksel-data-table__th {
   position: relative;
   background-color: var(--ax-bg-neutral-soft);
   color: var(--ax-text-neutral);
-  padding-inline: var(--ax-space-16);
+  padding: var(--ax-space-8) var(--ax-space-16);
   text-align: start;
-  border-inline-end: 1px solid var(--ax-border-neutral-subtle);
+  border-block-end: 1px solid var(--ax-border-neutral-subtle);
   overflow: hidden;
 
-  &:first-child {
+  &:not(:first-child) {
     border-inline-start: 1px solid var(--ax-border-neutral-subtle);
   }
 }
@@ -52,16 +90,29 @@
   z-index: 2;
   position: absolute;
   inset-block: 0;
-  inset-inline-end: -3px;
+  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: 5px;
-  background: var(--ax-bg-neutral-strong);
+  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;
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: 0;
+    width: 4px;
+  }
 
-  &:hover {
-    background: var(--ax-bg-neutral-strong-pressed);
+  &:hover::after {
+    /* TODO: Consider if the resize-handle should be visible already when hovering the column header */
+    background: var(--ax-bg-accent-strong);
+  }
+
+  &:active::after {
+    background: var(--ax-bg-accent-strong-pressed);
   }
 }
 
@@ -75,7 +126,7 @@
     transition: none;
   }
 
-  &:not(.aksel-data-table__th:hover &, &:focus-visible, &[data-expanded="true"]) {
+  &:not(.aksel-data-table__th:is(:hover, :focus-within) &, &:focus-visible, &[data-expanded="true"]) {
     opacity: 0;
     min-width: 0;
     max-width: 0;
@@ -90,18 +141,31 @@
   border-block-end: 1px solid var(--ax-border-neutral-subtle);
   border-block-start: 1px solid var(--ax-bg-raised);
   color: var(--ax-text-neutral-subtle);
+  padding: var(--__axc-data-table-density);
   padding-inline: 1rem;
   overflow: hidden;
-  border-inline-end: 1px solid var(--ax-border-neutral-subtle);
 
-  &:first-child {
+  &:not(:first-child) {
     border-inline-start: 1px solid var(--ax-border-neutral-subtle);
   }
 
-  & > div {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
+  .aksel-data-table__tfoot .aksel-data-table__tr:last-child & {
+    border-block-end: none;
+  }
+
+  .aksel-data-table:not(:has(.aksel-data-table__tfoot)) .aksel-data-table__tr:last-child & {
+    border-block-end: none;
+  }
+}
+
+.aksel-data-table__td,
+.aksel-data-table__th {
+  scroll-margin-block: var(--ax-space-0);
+  scroll-margin-inline: var(--ax-space-0);
+
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: -4px;
   }
 }