@navikt/ds-css 8.11.0 → 8.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "8.11.0",
+  "version": "8.12.0",
   "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.11.0",
+    "@navikt/ds-tokens": "^8.12.0",
     "browserslist": "^4.25.0",
     "esbuild": "^0.28.0",
     "fast-glob": "3.3.3",

package/src/action-menu.css

@@ -1,5 +1,19 @@
 /* --------------------------- ActionMenu content --------------------------- */
 .aksel-action-menu__content {
+  --__axc-action-menu-content-p-block: var(--ax-space-6);
+  --__axc-action-menu-content-p-inline: var(--ax-space-8);
+  --__axc-action-menu-item-height: 2rem;
+  --__axc-action-menu-item-font-size: var(--ax-font-size-medium);
+  --__axc-action-menu-content-group-label-pt: var(--ax-space-2);
+
+  &[data-size="medium"] {
+    --__axc-action-menu-content-p-block: var(--ax-space-8);
+    --__axc-action-menu-content-p-inline: var(--ax-space-12);
+    --__axc-action-menu-item-height: var(--ax-space-40);
+    --__axc-action-menu-item-font-size: var(--ax-font-size-large);
+    --__axc-action-menu-content-group-label-pt: var(--ax-space-4);
+  }
+
   overflow: hidden;
   border-radius: var(--ax-radius-12);
   border: 1px solid var(--ax-border-neutral-subtleA);
@@ -19,10 +33,8 @@
 }
 
 .aksel-action-menu__content > .aksel-action-menu__content-inner {
-  --__axc-action-menu-content-p: var(--ax-space-8);
   --__axc-action-menu-item-pr: var(--ax-space-8);
   --__axc-action-menu-item-pl: var(--ax-space-8);
-  --__axc-action-menu-item-height: 2rem;
 
   border-radius: var(--ax-radius-12);
   background-color: var(--ax-bg-raised);
@@ -30,7 +42,8 @@
   max-width: min(95vw, 640px);
   animation-duration: 160ms;
   animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-  padding: var(--__axc-action-menu-content-p);
+  padding-block: var(--__axc-action-menu-content-p-block);
+  padding-inline: var(--__axc-action-menu-content-p-inline);
   overflow: auto;
   /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
   max-height: var(--__axc-action-menu-content-available-height);
@@ -47,8 +60,8 @@
   position: relative;
   padding-left: var(--__axc-action-menu-item-pl);
   padding-right: var(--__axc-action-menu-item-pr);
-  font-size: var(--ax-font-size-medium);
-  scroll-margin-block: var(--__axc-action-menu-content-p);
+  font-size: var(--__axc-action-menu-item-font-size);
+  scroll-margin-block: var(--__axc-action-menu-content-p-block);
   line-height: 1.5;
   color: var(--ax-text-neutral);
   text-decoration: none;
@@ -68,8 +81,14 @@
     pointer-events: none;
   }
 
+  /* Indent items with left marker or if data-indent is set to true */
+  &[data-indent="true"],
   &[data-marker="left"] {
-    --__axc-action-menu-item-pl: var(--ax-space-24);
+    --__axc-action-menu-item-pl: var(--ax-space-28); /* 28px */
+
+    .aksel-action-menu__content[data-size="medium"] & {
+      --__axc-action-menu-item-pl: var(--ax-space-32); /* 32px */
+    }
   }
 }
 
@@ -152,19 +171,23 @@
 .aksel-action-menu__label {
   display: flex;
   align-items: center;
-  min-height: calc(var(--__axc-action-menu-item-height) - 6px);
+  min-height: var(--__axc-action-menu-item-height);
   padding-right: var(--__axc-action-menu-item-pr);
   padding-left: var(--__axc-action-menu-item-pl);
-  color: var(--ax-text-neutral-subtle);
   border-radius: var(--ax-radius-4);
   user-select: none;
   cursor: default;
-  font-size: var(--ax-font-size-small);
+  font-size: var(--ax-font-size-medium);
+  font-weight: var(--ax-font-weight-bold);
+}
+
+.aksel-action-menu__group:not(:first-child) .aksel-action-menu__label {
+  padding-top: var(--__axc-action-menu-content-group-label-pt);
 }
 
 .aksel-action-menu__divider {
   height: 1px;
-  margin-block: var(--ax-space-8);
+  margin-block: var(--ax-space-4);
   background-color: var(--ax-border-neutral-subtleA);
 }
 

package/src/data-grid-preview.css

@@ -68,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 {
@@ -85,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 {
@@ -98,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;
-    }
   }
 }
 
@@ -114,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 */
@@ -158,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;