Version Packages (#2414)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.eslintrc.js

@@ -39,6 +39,7 @@ module.exports = {
       files: ["**/*.ts?(x)"],
       extends: ["plugin:@typescript-eslint/recommended"],
       rules: {
+        "@typescript-eslint/no-shadow": ["error", { hoist: "all" }], // TODO: Consider { builtinGlobals: true }
         "@typescript-eslint/no-explicit-any": "off", // Temporary
       },
     },

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @navikt/aksel-icons
 
+## 5.8.0
+
+## 5.7.6
+
+## 5.7.5
+
+## 5.7.4
+
+## 5.7.3
+
+## 5.7.2
+
 ## 5.7.1
 
 ## 5.7.0

@navikt/aksel-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-icons",
-  "version": "5.7.1",
+  "version": "5.8.0",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/ikoner",
   "repository": {

@navikt/aksel-stylelint/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @navikt/aksel-stylelint
 
+## 5.8.0
+
+## 5.7.6
+
+## 5.7.5
+
+## 5.7.4
+
+## 5.7.3
+
+## 5.7.2
+
 ## 5.7.1
 
 ## 5.7.0

@navikt/aksel-stylelint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-stylelint",
-  "version": "5.7.1",
+  "version": "5.8.0",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
   "repository": {
@@ -35,8 +35,8 @@
     "dev": "yarn watch:lint"
   },
   "devDependencies": {
-    "@navikt/ds-css": "^5.7.1",
-    "@navikt/ds-tokens": "^5.7.1",
+    "@navikt/ds-css": "^5.8.0",
+    "@navikt/ds-tokens": "^5.8.0",
     "@types/jest": "^29.0.0",
     "concurrently": "7.2.1",
     "copyfiles": "2.4.1",

@navikt/aksel-stylelint/src/rules/aksel-design-token-exists/index.ts

@@ -1,7 +1,7 @@
-import stylelint from "stylelint";
-import valueParser from "postcss-value-parser";
 import { readFileSync } from "node:fs";
 import { Node as PostCSSNode } from "postcss";
+import valueParser from "postcss-value-parser";
+import stylelint from "stylelint";
 
 import { isCustomProperty, tokenExists } from "../../utils";
 
@@ -34,7 +34,6 @@ export const messages = stylelint.utils.ruleMessages(ruleName, {
 });
 
 const checkDeclValue = (
-  controlledPrefixes: string[],
   value: string,
   postcssResult: stylelint.PostcssResult,
   rootNode: PostCSSNode
@@ -58,7 +57,6 @@ const checkDeclValue = (
 };
 
 const checkDeclProp = (
-  controlledPrefixes: string[],
   prop: string,
   postcssResult: stylelint.PostcssResult,
   rootNode: PostCSSNode
@@ -81,8 +79,8 @@ const checkDeclProp = (
 const ruleFunction: stylelint.Rule = () => {
   return (postcssRoot, postcssResult) => {
     postcssRoot.walkDecls((node) => {
-      checkDeclValue(controlledPrefixes, node.value, postcssResult, node);
-      checkDeclProp(controlledPrefixes, node.prop, postcssResult, node);
+      checkDeclValue(node.value, postcssResult, node);
+      checkDeclProp(node.prop, postcssResult, node);
     });
   };
 };

@navikt/aksel-stylelint/src/utils.ts

@@ -92,16 +92,6 @@ const tokenJsonFile = "./tokens.json";
 
 const allowedTokenNames = [];
 
-export const addTokens = (
-  tokenJSONFile: string,
-  allowedTokenNames: string[]
-) => {
-  const jsonFileBuffer = readFileSync(`${__dirname}/${tokenJSONFile}`);
-  const fileString = jsonFileBuffer.toString();
-  const flattened = flattenObject(JSON.parse(fileString));
-  flattened.forEach((token) => allowedTokenNames.push(token));
-};
-
 export const tokenExists = (
   controlledPrefixes: string[],
   inputToken: string
@@ -110,7 +100,6 @@ export const tokenExists = (
   if (!allowedTokenNames.length) {
     const cssFileBuffer = readFileSync(`${__dirname}/${tokenCSSFile}`);
     const cssFileString = cssFileBuffer.toString();
-
     valueParser(cssFileString).walk((node) => {
       if (
         node.type === "word" &&
@@ -121,7 +110,9 @@ export const tokenExists = (
       }
     });
 
-    addTokens(tokenJsonFile, allowedTokenNames);
+    const jsonFileBuffer = readFileSync(`${__dirname}/${tokenJsonFile}`);
+    const flattened = flattenObject(JSON.parse(jsonFileBuffer.toString()));
+    flattened.forEach((token) => allowedTokenNames.push(token));
   }
 
   return allowedTokenNames.includes(inputToken);

@navikt/aksel/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @navikt/aksel
 
+## 5.8.0
+
+### Patch Changes
+
+- Updated dependencies [[`0c7fc0493`](https://github.com/navikt/aksel/commit/0c7fc04935b96946b8ed1178c700077b6a1fcefd)]:
+  - @navikt/ds-css@5.8.0
+
+## 5.7.6
+
+### Patch Changes
+
+- Updated dependencies [[`6d6e6443d`](https://github.com/navikt/aksel/commit/6d6e6443dd00464183b03fad6f822e5f3efab100)]:
+  - @navikt/ds-css@5.7.6
+
+## 5.7.5
+
+### Patch Changes
+
+- Updated dependencies [[`3d1b0ac20`](https://github.com/navikt/aksel/commit/3d1b0ac2041bbc289536fa5a0dc65b2170dfc6fa)]:
+  - @navikt/ds-css@5.7.5
+
+## 5.7.4
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.7.4
+
+## 5.7.3
+
+### Patch Changes
+
+- Updated dependencies [[`3d3e90760`](https://github.com/navikt/aksel/commit/3d3e9076088c5e72ed89fb97109b75dcf6e09d96), [`d8a4097c8`](https://github.com/navikt/aksel/commit/d8a4097c82ceee95bd216b36e1dc8eb99e75d7ee), [`a6b673386`](https://github.com/navikt/aksel/commit/a6b67338612b7944dc4e6b3d541244f521e94500)]:
+  - @navikt/ds-css@5.7.3
+
+## 5.7.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.7.2
+
 ## 5.7.1
 
 ### Patch Changes

@navikt/aksel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel",
-  "version": "5.7.1",
+  "version": "5.8.0",
   "description": "Aksel command line interface. Handles css-imports, codemods and more",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -29,7 +29,7 @@
   },
   "homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
   "dependencies": {
-    "@navikt/ds-css": "5.7.1",
+    "@navikt/ds-css": "5.8.0",
     "axios": "1.3.6",
     "chalk": "4.1.0",
     "clipboardy": "^2.3.0",

@navikt/aksel/src/codemod/migrations.ts

@@ -111,9 +111,9 @@ export function getMigrationNames() {
 export function getMigrationString() {
   let str = "";
 
-  Object.entries(migrations).forEach(([version, migrations]) => {
+  Object.entries(migrations).forEach(([version, vMigrations]) => {
     str += `\n${chalk.underline(version)}\n`;
-    migrations.forEach((migration) => {
+    vMigrations.forEach((migration) => {
       str += `${chalk.blue(migration.value)}: ${migration.description}\n`;
     });
   });

@navikt/aksel/src/codemod/transforms/v1.0.0/pagination/pagination.ts

@@ -13,10 +13,10 @@ export default function transformer(file, api) {
   function addMigrationTag(node) {
     const attributes = node.openingElement.attributes;
     const isMigrated = attributes.find(
-      (node) =>
-        node.type === "JSXAttribute" &&
-        node.name.name === "data-version" &&
-        node.value.value === "v1"
+      (attr) =>
+        attr.type === "JSXAttribute" &&
+        attr.name.name === "data-version" &&
+        attr.value.value === "v1"
     );
 
     if (!isMigrated) {
@@ -30,7 +30,7 @@ export default function transformer(file, api) {
   function addExplicitStandardProp(node) {
     const attributes = node.openingElement.attributes;
     const variant = attributes.find(
-      (node) => node.type === "JSXAttribute" && node.name.name === "size"
+      (attr) => attr.type === "JSXAttribute" && attr.name.name === "size"
     );
 
     if (!variant) {

@navikt/aksel/src/codemod/transforms/v2.0.0/update-js-tokens/update-js-tokens.ts

@@ -1,12 +1,12 @@
 import type { JSCodeshift } from "jscodeshift";
+import { tokens } from "../../../tokens-map.mjs";
 import {
   getImportSpecifier,
   getImportSpecifierName,
   renameImportSpecifier,
 } from "../../../utils/imports";
-import { translateToken } from "../../../utils/translate-token";
-import { tokens } from "../../../tokens-map.mjs";
 import { getLineTerminator } from "../../../utils/lineterminator";
+import { translateToken } from "../../../utils/translate-token";
 
 /**
  * @param {import('jscodeshift').FileInfo} file
@@ -29,9 +29,9 @@ export default function transformer(file: JSCodeshift, api) {
     return src;
   }
 
-  tokens.forEach((x) => {
-    const name = translateToken(x[0], "js");
-    const out = translateToken(x[1], "js");
+  tokens.forEach((token) => {
+    const name = translateToken(token[0], "js");
+    const out = translateToken(token[1], "js");
 
     let foundName: string = "";
 

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @navikt/ds-css
 
+## 5.8.0
+
+### Patch Changes
+
+- :bug: Modal: Bedre støtte for Tooltip i Modal ([#2429](https://github.com/navikt/aksel/pull/2429))
+
+## 5.7.6
+
+### Patch Changes
+
+- :lipstick: Chips.Toggle: Ikon i uvalgt tilstand ([#2395](https://github.com/navikt/aksel/pull/2395))
+
+## 5.7.5
+
+### Patch Changes
+
+- Checkbox, Radio: Transparent-border fungerer nå bedre på mørkere bakgrunner ([#2388](https://github.com/navikt/aksel/pull/2388))
+
+## 5.7.4
+
+## 5.7.3
+
+### Patch Changes
+
+- Ny spacing token på 0.375rem ([#2370](https://github.com/navikt/aksel/pull/2370))
+
+- Select: Tokenstøtte for å endre chevronfarge sammen med tekst ([#2383](https://github.com/navikt/aksel/pull/2383))
+
+- HelpText: Knapp er visuelt mindre. Klikkflate er fortsatt 24px ([#2376](https://github.com/navikt/aksel/pull/2376))
+
+## 5.7.2
+
 ## 5.7.1
 
 ### Patch Changes

@navikt/core/css/chips.css

@@ -20,7 +20,7 @@
   cursor: pointer;
   align-items: center;
   justify-content: center;
-  gap: var(--a-spacing-1);
+  gap: var(--a-spacing-05);
   margin: 0;
   padding: 0 var(--a-spacing-3);
   text-decoration: none;
@@ -97,6 +97,19 @@
   }
 }
 
+.navds-chips--medium .navds-chips__toggle--with-checkmark {
+  padding-left: var(--a-spacing-1-alt);
+}
+
+.navds-chips--small .navds-chips__toggle--with-checkmark {
+  padding-left: var(--a-spacing-1);
+}
+
+.navds-chips--small .navds-chips__toggle-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .navds-chips__removable {
   gap: 0;
 }
@@ -160,11 +173,11 @@
 }
 
 .navds-chips--icon-left {
-  padding-left: 0.375rem;
+  padding-left: var(--a-spacing-1-alt);
 }
 
 .navds-chips--icon-right {
-  padding-right: 0.375rem;
+  padding-right: var(--a-spacing-1-alt);
 }
 
 .navds-chips--small .navds-chips--icon-right {

@navikt/core/css/copybutton.css

@@ -175,7 +175,7 @@
 }
 
 .navds-copybutton--small > .navds-copybutton__content {
-  gap: 0.375rem;
+  gap: var(--a-spacing-1-alt);
 }
 
 .navds-copybutton--xsmall > .navds-copybutton__content {

@navikt/core/css/form/radio-checkbox.css

@@ -31,11 +31,13 @@
 .navds-radio__label::before {
   content: "";
   background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default));
-  width: 1.5rem;
-  height: 1.5rem;
-  border-radius: var(--a-border-radius-medium);
+  border-radius: var(--a-border-radius-small);
   flex-shrink: 0;
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default));
+  width: calc(1.5rem - 0.25rem);
+  height: calc(1.5rem - 0.25rem);
+  margin-block: 2px;
+  margin-inline: 2px;
 }
 
 .navds-radio__label::before {
@@ -59,41 +61,42 @@
 
 .navds-checkbox--small > .navds-checkbox__label,
 .navds-radio--small > .navds-radio__label {
-  padding: 0.375rem 0;
+  padding: var(--a-spacing-1-alt) 0;
 }
 
 .navds-checkbox--small > .navds-checkbox__label::before,
 .navds-radio--small > .navds-radio__label::before {
-  width: 1.25rem;
-  height: 1.25rem;
+  width: calc(1.25rem - 0.25rem);
+  height: calc(1.25rem - 0.25rem);
 }
 
 .navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
 .navds-radio__input:focus-visible + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)),
+    0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-checkbox__input:focus + .navds-checkbox__label::before,
   .navds-radio__input:focus + .navds-radio__label::before {
-    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
+    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), 0 0 0 4px var(--a-border-focus);
   }
 }
 
 .navds-checkbox__input:hover:focus-visible + .navds-checkbox__label::before,
 .navds-radio__input:hover:focus-visible + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), var(--a-shadow-focus);
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), 0 0 0 4px var(--a-border-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
   .navds-radio__input:hover:focus + .navds-radio__label::before {
-    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), var(--a-shadow-focus);
+    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), 0 0 0 4px var(--a-border-focus);
   }
 }
 
 .navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
-  box-shadow: none;
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
   background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
 }
 
@@ -101,7 +104,7 @@
   content: "";
   position: absolute;
   top: 50%;
-  transform: translate(0.375rem, -50%);
+  transform: translate(var(--a-spacing-1-alt), -50%);
   background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
   width: 0.75rem;
   height: 0.25rem;
@@ -114,7 +117,7 @@
 }
 
 .navds-checkbox__input:checked + .navds-checkbox__label::before {
-  box-shadow: none;
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
   background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
 }
 
@@ -126,7 +129,7 @@
   color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
   position: absolute;
   height: 1.5rem;
-  transform: translate(0.375rem);
+  transform: translate(var(--a-spacing-1-alt));
   pointer-events: none;
 }
 
@@ -146,31 +149,33 @@
 
 .navds-checkbox__input:indeterminate:focus-visible + .navds-checkbox__label::before,
 .navds-checkbox__input:checked:focus-visible + .navds-checkbox__label::before {
-  box-shadow: inset 0 0 0 1px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
+  box-shadow: 0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+    0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
   .navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
-    box-shadow: inset 0 0 0 1px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
+    box-shadow: 0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+      0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
   }
 }
 
 .navds-radio__input:checked + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
-    inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default));
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+    inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default));
   background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
 }
 
 .navds-radio__input:checked:focus-visible + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
-    inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+    inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-radio__input:checked:focus + .navds-radio__label::before {
-    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
-      inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
+    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+      inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
   }
 }
 
@@ -182,13 +187,13 @@
 .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus-visible)
   + .navds-checkbox__label::before,
 .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
 }
 
 @supports not selector(:focus-visible) {
   .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus) + .navds-checkbox__label::before,
   .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
-    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
+    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
   }
 }
 
@@ -201,14 +206,14 @@
   > .navds-checkbox__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
   + .navds-checkbox__label::before,
 .navds-radio--error > .navds-radio__input:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
 }
 
 .navds-checkbox--error
   > .navds-checkbox__input:focus-visible:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
   + .navds-checkbox__label::before,
 .navds-radio--error > .navds-radio__input:focus-visible:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
 }
 
 @supports not selector(:focus-visible) {
@@ -216,7 +221,7 @@
     > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
     + .navds-checkbox__label::before,
   .navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
-    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
   }
 }
 
@@ -225,7 +230,7 @@
   + .navds-checkbox__label::before,
 .navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
   background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
 }
 
 .navds-checkbox--error
@@ -233,7 +238,7 @@
   + .navds-checkbox__label::before,
 .navds-radio--error > .navds-radio__input:focus-visible:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
   background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
 }
 
 @supports not selector(:focus-visible) {
@@ -242,7 +247,7 @@
     + .navds-checkbox__label::before,
   .navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
     background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
-    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
+    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
   }
 
   .navds-checkbox--error
@@ -250,7 +255,7 @@
     + .navds-checkbox__label::before,
   .navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
     background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
-    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
   }
 }
 
@@ -290,7 +295,7 @@
 .navds-radio--readonly > .navds-radio__input:not(:disabled):not(:checked) + .navds-radio__label::before,
 .navds-radio--readonly > .navds-radio__input:hover:not(:checked):not(:focus-visible) + .navds-radio__label::before {
   background-color: var(--__ac-radio-checkbox-readonly-bg);
-  box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
+  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
 }
 
 .navds-checkbox--readonly > .navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
@@ -299,8 +304,8 @@
 }
 
 .navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label::before {
-  box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
   background-color: var(--__ac-radio-checkbox-readonly-bg);
+  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
 }
 
 .navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
@@ -308,12 +313,12 @@
 }
 
 .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border), inset 0 0 0 4px var(--__ac-radio-checkbox-readonly-bg);
   background-color: var(--a-icon-subtle);
+  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border), inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-bg);
 }
 
 .navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
-  box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
+  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
   background-color: var(--__ac-radio-checkbox-readonly-bg);
 }
 

@navikt/core/css/form/select.css

@@ -43,6 +43,7 @@
   right: var(--a-spacing-2);
   pointer-events: none;
   align-self: center;
+  color: var(--ac-select-text, var(--a-text-default));
 }
 
 .navds-form-field--small .navds-select__input {
@@ -51,7 +52,7 @@
 }
 
 .navds-form-field--small .navds-select__chevron {
-  right: 0.375rem;
+  right: var(--a-spacing-1-alt);
 }
 
 /**

@navikt/core/css/form/textarea.css

@@ -62,7 +62,7 @@
 }
 
 .navds-form-field--small .navds-textarea__input {
-  padding: 0.375rem;
+  padding: var(--a-spacing-1-alt);
 }
 
 .navds-form-field--small .navds-textarea--counter.navds-textarea__input {

@navikt/core/css/help-text.css

@@ -1,6 +1,5 @@
 .navds-help-text__button {
   margin: 0;
-  padding: 0;
   border: 0;
   cursor: pointer;
   background-color: transparent;
@@ -9,17 +8,19 @@
   justify-content: center;
   align-items: center;
   color: var(--ac-help-text-button-color, var(--a-surface-action));
-  font-size: 1.5rem;
+  font-size: 1.25rem;
+  padding: calc(var(--a-spacing-1) / 2);
 }
 
 .navds-help-text__button:focus-visible {
-  box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
+  outline: none;
+  box-shadow: 0 0 0 1px var(--a-border-focus), inset 0 0 0 1px var(--a-border-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-help-text__button:focus {
     outline: none;
-    box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
+    box-shadow: 0 0 0 1px var(--a-border-focus), inset 0 0 0 1px var(--a-border-focus);
   }
 }
 

@navikt/core/css/modal.css

@@ -23,7 +23,6 @@
 .navds-modal--polyfilled {
   top: 50%;
   transform: translate(0, -50%);
-  overflow: auto;
 
   /* From polyfill (dialog-polyfill/dist/dialog-polyfill.css): */
   left: 0;
@@ -33,6 +32,10 @@
   margin: auto;
 }
 
+.navds-modal--polyfilled .navds-modal--polyfilled {
+  overflow: auto;
+}
+
 .navds-modal--polyfilled:not([open]) {
   display: none; /* from polyfill */
 }

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "5.7.1",
+  "version": "5.8.0",
   "description": "CSS for NAV Designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -27,7 +27,7 @@
     "css:get-version": "node config/get-version.js"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^5.7.1",
+    "@navikt/ds-tokens": "^5.8.0",
     "cssnano": "6.0.0",
     "fast-glob": "3.2.11",
     "lodash": "4.17.21",

@navikt/core/css/pagination.css

@@ -52,8 +52,7 @@
 }
 
 .navds-pagination--small .navds-pagination__prev-next:where(.navds-pagination--prev-next--with-text) {
-  padding-left: 0.375rem;
-  padding-right: 0.375rem;
+  padding-inline: var(--a-spacing-1-alt);
 }
 
 .navds-pagination--xsmall .navds-pagination__prev-next:where(.navds-pagination--prev-next--with-text) {

@navikt/core/css/tabs.css

@@ -37,7 +37,7 @@
 }
 
 .navds-tabs--small .navds-tabs__scroll-button {
-  padding: 0.375rem var(--a-spacing-4);
+  padding: var(--a-spacing-1-alt) var(--a-spacing-4);
   width: 2rem;
 }
 
@@ -93,7 +93,7 @@
 
 .navds-tabs__tab--small {
   min-height: 2rem;
-  padding: 0.375rem var(--a-spacing-4);
+  padding: var(--a-spacing-1-alt) var(--a-spacing-4);
 }
 
 .navds-tabs__tab-icon--top,

@navikt/core/css/tag.css

@@ -11,7 +11,7 @@
 
 .navds-tag--small {
   min-height: 1.5rem;
-  padding: 0 0.375rem;
+  padding: 0 var(--a-spacing-1-alt);
 }
 
 .navds-tag--xsmall {

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,75 @@
 # @navikt/ds-react
 
+## 5.8.0
+
+### Minor Changes
+
+- :sparkles: Modal: Støtte for å lukke ved klikk utenfor ([#2386](https://github.com/navikt/aksel/pull/2386))
+
+### Patch Changes
+
+- Autocomplete in combobox will not change formatting of the letters while being typed, but will use the casing of the autocompleted word when selecting the option. ([#2207](https://github.com/navikt/aksel/pull/2207))
+
+- Accordion: Fikset dom-validering ved bruk av `div` i `button`. ([#2426](https://github.com/navikt/aksel/pull/2426))
+
+- :bug: Modal: Bedre støtte for Tooltip i Modal ([#2429](https://github.com/navikt/aksel/pull/2429))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.8.0
+  - @navikt/aksel-icons@5.8.0
+
+## 5.7.6
+
+### Patch Changes
+
+- :lipstick: Chips.Toggle: Ikon i uvalgt tilstand ([#2395](https://github.com/navikt/aksel/pull/2395))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.7.6
+  - @navikt/aksel-icons@5.7.6
+
+## 5.7.5
+
+### Patch Changes
+
+- Loader: Har nå riktig `ref`-type. ([#2391](https://github.com/navikt/aksel/pull/2391))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.7.5
+  - @navikt/aksel-icons@5.7.5
+
+## 5.7.4
+
+### Patch Changes
+
+- Datepicker: Fungerer nå bedre i Modal ([#2400](https://github.com/navikt/aksel/pull/2400))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.7.4
+  - @navikt/aksel-icons@5.7.4
+
+## 5.7.3
+
+### Patch Changes
+
+- Forms: Fikset bug der size='small' ikke oppdaterte typografi. ([#2372](https://github.com/navikt/aksel/pull/2372))
+
+- HelpText: Knapp er visuelt mindre. Klikkflate er fortsatt 24px ([#2376](https://github.com/navikt/aksel/pull/2376))
+
+- Updated dependencies [[`3d3e90760`](https://github.com/navikt/aksel/commit/3d3e9076088c5e72ed89fb97109b75dcf6e09d96)]:
+  - @navikt/ds-tokens@5.7.3
+  - @navikt/aksel-icons@5.7.3
+
+## 5.7.2
+
+### Patch Changes
+
+- MonthPicker: Fikset tastaturnavigasjon ([#2374](https://github.com/navikt/aksel/pull/2374))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.7.2
+  - @navikt/aksel-icons@5.7.2
+
 ## 5.7.1
 
 ### Patch Changes

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "5.7.1",
+  "version": "5.8.0",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -38,8 +38,8 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.25.4",
-    "@navikt/aksel-icons": "^5.7.1",
-    "@navikt/ds-tokens": "^5.7.1",
+    "@navikt/aksel-icons": "^5.8.0",
+    "@navikt/ds-tokens": "^5.8.0",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

@navikt/core/react/src/accordion/AccordionHeader.tsx

@@ -1,9 +1,9 @@
+import { ChevronDownIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import { Heading } from "../typography";
 import { AccordionContext } from "./AccordionContext";
 import { AccordionItemContext } from "./AccordionItem";
-import { ChevronDownIcon } from "@navikt/aksel-icons";
 
 export interface AccordionHeaderProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -37,13 +37,13 @@ const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(
         aria-expanded={itemContext.open}
         type="button"
       >
-        <div className="navds-accordion__icon-wrapper">
+        <span className="navds-accordion__icon-wrapper">
           <ChevronDownIcon
             className="navds-accordion__header-chevron"
             title="Vis mer"
             aria-hidden
           />
-        </div>
+        </span>
         <Heading
           size={accordionContext?.headingSize ?? "small"}
           as="span"

@navikt/core/react/src/chips/Toggle.tsx

@@ -6,7 +6,7 @@ export interface ToggleChipsProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: string;
   /**
-   * Toggles aria-pressed and visual-changes
+   * Toggles aria-pressed and visual changes
    */
   selected?: boolean;
   /**
@@ -44,28 +44,38 @@ export const ToggleChips: OverridableComponent<
         className={cl(
           "navds-chips__chip navds-chips__toggle",
           className,
-          `navds-chips__toggle--${variant}`
+          `navds-chips__toggle--${variant}`,
+          { "navds-chips__toggle--with-checkmark": checkmark }
         )}
         aria-pressed={selected}
       >
-        {selected && checkmark && (
+        {checkmark && (
           <svg
             aria-hidden
             className="navds-chips__toggle-icon"
-            width="10"
-            height="8"
-            viewBox="0 0 10 8"
+            width="1.25em"
+            height="1.25em"
+            viewBox="0 0 20 20"
             fill="none"
             xmlns="http://www.w3.org/2000/svg"
             focusable={false}
             role="img"
           >
-            <path
-              fillRule="evenodd"
-              clipRule="evenodd"
-              d="M9.51894 0.45851C9.81799 0.745107 9.8281 1.21987 9.5415 1.51893L3.7915 7.51893C3.51247 7.81009 3.05315 7.82848 2.75174 7.56056L0.501735 5.56056C0.192148 5.28537 0.164263 4.81132 0.439451 4.50173C0.71464 4.19214 1.18869 4.16426 1.49828 4.43944L3.20835 5.95951L8.45852 0.481072C8.74511 0.182015 9.21988 0.171913 9.51894 0.45851Z"
-              fill="currentColor"
-            />
+            {selected ? (
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M10 18.125C14.4873 18.125 18.125 14.4873 18.125 10C18.125 5.51269 14.4873 1.875 10 1.875C5.51269 1.875 1.875 5.51269 1.875 10C1.875 14.4873 5.51269 18.125 10 18.125ZM14.128 7.72904C14.3695 7.44357 14.3339 7.01635 14.0485 6.7748C13.763 6.53326 13.3358 6.56886 13.0942 6.85432L8.60428 12.1606L6.41627 9.97263C6.15185 9.70822 5.72315 9.70822 5.45873 9.97263C5.19431 10.2371 5.19431 10.6658 5.45873 10.9302L8.16706 13.6385C8.30095 13.7724 8.48479 13.8441 8.67397 13.8362C8.86316 13.8284 9.0404 13.7416 9.16271 13.5971L14.128 7.72904Z"
+                fill="currentColor"
+              />
+            ) : (
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M10 3.125C6.20304 3.125 3.125 6.20304 3.125 10C3.125 13.797 6.20304 16.875 10 16.875C13.797 16.875 16.875 13.797 16.875 10C16.875 6.20304 13.797 3.125 10 3.125ZM1.875 10C1.875 5.51269 5.51269 1.875 10 1.875C14.4873 1.875 18.125 5.51269 18.125 10C18.125 14.4873 14.4873 18.125 10 18.125C5.51269 18.125 1.875 14.4873 1.875 10Z"
+                fill="var(--a-border-default)"
+              />
+            )}
           </svg>
         )}
         <span className="navds-chips__chip-text">{children}</span>

@navikt/core/react/src/chips/chips.stories.tsx

@@ -1,24 +1,12 @@
+import { Meta } from "@storybook/react";
 import React, { useState } from "react";
 import { Chips } from ".";
 
-export default {
+const meta: Meta<typeof Chips> = {
   title: "ds-react/Chips",
   component: Chips,
-  argTypes: {
-    type: {
-      control: {
-        type: "radio",
-        options: ["toggle", "removable"],
-      },
-    },
-    size: {
-      control: {
-        type: "radio",
-        options: ["medium", "small"],
-      },
-    },
-  },
 };
+export default meta;
 
 const options = ["Norsk", "Dansk", "Svensk", "Tysk", "Spansk"];
 
@@ -61,12 +49,22 @@ export const Default = (props) => {
     </Chips>
   );
 };
+Default.argTypes = {
+  type: {
+    control: { type: "radio" },
+    options: ["toggle", "removable"],
+  },
+  size: {
+    control: { type: "radio" },
+    options: ["medium", "small"],
+  },
+};
 
-export const Toggle = () => {
+export const Toggle = ({ size }) => {
   const [selected, setSelected] = useState<number[]>([2, 4]);
   return (
     <div className="colgap">
-      <Chips>
+      <Chips size={size}>
         {options.map((c, y) => (
           <Chips.Toggle
             selected={selected.includes(y)}
@@ -83,7 +81,7 @@ export const Toggle = () => {
           </Chips.Toggle>
         ))}
       </Chips>
-      <Chips>
+      <Chips size={size}>
         {options.map((c, y) => (
           <Chips.Toggle
             variant="neutral"
@@ -104,6 +102,12 @@ export const Toggle = () => {
     </div>
   );
 };
+Toggle.argTypes = {
+  size: {
+    control: { type: "radio" },
+    options: ["medium", "small"],
+  },
+};
 
 export const ToggleNoCheckmark = () => {
   const [selected, setSelected] = useState<number>(2);

@navikt/core/react/src/date/datepicker/DatePicker.tsx

@@ -97,17 +97,17 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     const mode = rest.mode ?? ("single" as any);
 
     /**
-     * @param selected Date | Date[] | DateRange | undefined
+     * @param newSelected Date | Date[] | DateRange | undefined
      */
-    const handleSelect = (selected) => {
-      setSelectedDates(selected);
+    const handleSelect = (newSelected) => {
+      setSelectedDates(newSelected);
 
       if (rest.mode === "single") {
-        selected && (onClose?.() ?? setOpen(false));
+        newSelected && (onClose?.() ?? setOpen(false));
       } else if (rest.mode === "range") {
-        selected?.from && selected?.to && (onClose?.() ?? setOpen(false));
+        newSelected?.from && newSelected?.to && (onClose?.() ?? setOpen(false));
       }
-      rest?.onSelect?.(selected);
+      rest?.onSelect?.(newSelected);
     };
 
     return (

@navikt/core/react/src/date/datepicker/DatePickerStandalone.tsx

@@ -71,11 +71,11 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
     const mode = rest.mode ?? ("single" as any);
 
     /**
-     * @param selected Date | Date[] | DateRange | undefined
+     * @param newSelected Date | Date[] | DateRange | undefined
      */
-    const handleSelect = (selected) => {
-      setSelectedDates(selected);
-      onSelect?.(selected);
+    const handleSelect = (newSelected) => {
+      setSelectedDates(newSelected);
+      onSelect?.(newSelected);
     };
 
     return (

@navikt/core/react/src/date/datepicker/datepicker.stories.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import { Meta, StoryObj } from "@storybook/react";
+import isSameDay from "date-fns/isSameDay";
 import React, { useId, useState } from "react";
 import { useDatepicker, useRangeDatepicker } from "..";
-import { Button, HGrid, VStack } from "../..";
+import { BodyLong, Button, HGrid, HStack, Modal, VStack } from "../..";
 import DatePicker, { DatePickerProps } from "./DatePicker";
-import isSameDay from "date-fns/isSameDay";
 
 const disabledDays = [
   new Date("Oct 10 2022"),
@@ -432,3 +432,42 @@ export const WeekDayClick = () => {
     </VStack>
   );
 };
+
+export const ModalDemo = () => {
+  const { datepickerProps, inputProps } = useDatepicker({
+    fromDate: new Date("Aug 23 2019"),
+    toDate: new Date("Feb 23 2024"),
+    onDateChange: console.log,
+  });
+
+  return (
+    <Modal open header={{ heading: "Modal-demo" }} width="1024px">
+      <Modal.Body style={{ position: "relative" }}>
+        <BodyLong>
+          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maiores nisi
+          incidunt ipsum cupiditate nostrum nesciunt, corrupti nihil at atque
+          animi ab aut. Quam iusto harum eligendi magnam nulla repudiandae
+          molestias.
+        </BodyLong>
+
+        <HGrid gap="6" columns={{ xs: 1, lg: 2 }}>
+          <HStack justify="center" align="start">
+            <DatePicker.Standalone
+              fromDate={new Date("Aug 23 2019")}
+              toDate={new Date("Feb 23 2024")}
+            />
+          </HStack>
+          <DatePicker {...datepickerProps} dropdownCaption>
+            <DatePicker.Input {...inputProps} label="Velg dato" />
+          </DatePicker>
+          <HStack justify="center">
+            <DatePicker.Standalone
+              fromDate={new Date("Aug 23 2019")}
+              toDate={new Date("Feb 23 2024")}
+            />
+          </HStack>
+        </HGrid>
+      </Modal.Body>
+    </Modal>
+  );
+};

@navikt/core/react/src/date/hooks/useDatepicker.tsx

@@ -164,9 +164,10 @@ export const useDatepicker = (
   const [inputValue, setInputValue] = useState(defaultInputValue);
 
   const handleOpen = useCallback(
-    (open: boolean) => {
-      setOpen(open);
-      open && setMonth(selectedDay ?? defaultSelected ?? defaultMonth ?? today);
+    (newOpen: boolean) => {
+      setOpen(newOpen);
+      newOpen &&
+        setMonth(selectedDay ?? defaultSelected ?? defaultMonth ?? today);
     },
     [defaultMonth, defaultSelected, selectedDay, today]
   );
@@ -310,7 +311,7 @@ export const useDatepicker = (
 
   const datepickerProps = {
     month,
-    onMonthChange: (month) => setMonth(month),
+    onMonthChange: setMonth,
     onDayClick: handleDayClick,
     selected: selectedDay ?? new Date("Invalid date"),
     locale: _locale,

@navikt/core/react/src/date/hooks/useMonthPicker.tsx

@@ -161,9 +161,10 @@ export const useMonthpicker = (
   const [inputValue, setInputValue] = useState(defaultInputValue);
 
   const handleOpen = useCallback(
-    (open: boolean) => {
-      setOpen(open);
-      open && setYear(selectedMonth ?? defaultSelected ?? defaultYear ?? today);
+    (newOpen: boolean) => {
+      setOpen(newOpen);
+      newOpen &&
+        setYear(selectedMonth ?? defaultSelected ?? defaultYear ?? today);
     },
     [defaultSelected, defaultYear, selectedMonth, today]
   );

@navikt/core/react/src/date/hooks/useRangeDatepicker.tsx

@@ -1,5 +1,5 @@
 import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
-import isBefore from "date-fns/isBefore";
+import checkIsBefore from "date-fns/isBefore";
 import isWeekend from "date-fns/isWeekend";
 import React, { useRef, useState } from "react";
 import { DateRange, isMatch } from "react-day-picker";
@@ -382,7 +382,7 @@ export const useRangeDatepicker = (
     const prevToRange =
       !selectedRange?.from && selectedRange?.to ? selectedRange?.to : range?.to;
 
-    const resetTo = isBefore(prevToRange, range?.from);
+    const resetTo = checkIsBefore(prevToRange, range?.from);
 
     range?.from
       ? setFromInputValue(
@@ -535,7 +535,7 @@ export const useRangeDatepicker = (
 
   const datepickerProps = {
     month,
-    onMonthChange: (month) => setMonth(month),
+    onMonthChange: setMonth,
     onSelect: handleSelect,
     selected: selectedRange,
     locale: _locale,

@navikt/core/react/src/date/monthpicker/MonthButton.tsx

@@ -1,8 +1,8 @@
 import cl from "clsx";
-import format from "date-fns/format";
-import isSameMonth from "date-fns/isSameMonth";
 import compareAsc from "date-fns/compareAsc";
 import compareDesc from "date-fns/compareDesc";
+import format from "date-fns/format";
+import isSameMonth from "date-fns/isSameMonth";
 import setYear from "date-fns/setYear";
 import React, { useEffect, useRef } from "react";
 import { useDayPicker } from "react-day-picker";

@navikt/core/react/src/date/monthpicker/MonthCaption.tsx

@@ -1,14 +1,14 @@
 import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
+import { isAfter, isBefore } from "date-fns";
 import setYear from "date-fns/setYear";
 import startOfMonth from "date-fns/startOfMonth";
 import startOfYear from "date-fns/startOfYear";
 import React from "react";
 import { useDayPicker } from "react-day-picker";
-import { useSharedMonthContext } from "../context";
-import { labelNextYear, labelPrevYear } from "../utils";
-import { isAfter, isBefore } from "date-fns";
 import { Button } from "../../button";
 import { Select } from "../../form/Select";
+import { useSharedMonthContext } from "../context";
+import { labelNextYear, labelPrevYear } from "../utils";
 
 export const MonthCaption = () => {
   const {
@@ -24,9 +24,9 @@ export const MonthCaption = () => {
 
   if (hasDropdown && fromDate && toDate) {
     const fromYear = fromDate.getFullYear();
-    const toYear = toDate.getFullYear();
-    for (let year = fromYear; year <= toYear; year++) {
-      years.push(setYear(startOfYear(new Date()), year));
+    const toDateYear = toDate.getFullYear();
+    for (let currYear = fromYear; currYear <= toDateYear; currYear++) {
+      years.push(setYear(startOfYear(new Date()), currYear));
     }
 
     if (!years.map((x) => x.getFullYear()).includes(year.getFullYear())) {
@@ -75,9 +75,9 @@ export const MonthCaption = () => {
           onChange={handleYearChange}
           className="navds-date__caption__year"
         >
-          {years.map((year) => (
-            <option key={year.getFullYear()} value={year.getFullYear()}>
-              {formatYearCaption(year, { locale })}
+          {years.map((yearOpt) => (
+            <option key={yearOpt.getFullYear()} value={yearOpt.getFullYear()}>
+              {formatYearCaption(yearOpt, { locale })}
             </option>
           ))}
         </Select>

@navikt/core/react/src/date/monthpicker/MonthSelector.tsx

@@ -62,9 +62,9 @@ export const MonthSelector = () => {
   return (
     <BodyShort as="table" className="rdp-table">
       <tbody className="rdp-tbody">
-        {tableMonths.map((months, i) => (
+        {tableMonths.map((tableRow, i) => (
           <tr className="rdp-row" key={i}>
-            {months.map((month: Date) => {
+            {tableRow.map((month: Date) => {
               return (
                 <td key={month.toDateString()} className="rdp-cell">
                   <MonthButton

@navikt/core/react/src/date/monthpicker/monthpicker.stories.tsx

@@ -1,8 +1,10 @@
 import { Meta, StoryFn } from "@storybook/react";
+import setYear from "date-fns/setYear";
 import React, { useId, useState } from "react";
 import { Button, DateInputProps } from "../..";
 import { useMonthpicker } from "../hooks";
-import MonthPicker, { MonthPickerProps } from "./MonthPicker";
+import MonthPicker from "./MonthPicker";
+import { MonthPickerProps } from "./types";
 
 export default {
   title: "ds-react/Monthpicker",
@@ -147,3 +149,28 @@ export const UserControlled = () => {
     </div>
   );
 };
+
+export const FollowYear = () => {
+  const { monthpickerProps, inputProps, selectedMonth, setSelected } =
+    useMonthpicker({
+      fromDate: new Date("Aug 23 2019"),
+      toDate: new Date("Aug 23 2025"),
+      onMonthChange: console.log,
+    });
+
+  const customYearChange = (yearDate?: Date) => {
+    monthpickerProps.onYearChange?.(yearDate);
+    if (selectedMonth && yearDate) {
+      setSelected(setYear(selectedMonth, yearDate.getFullYear()));
+    }
+  };
+
+  return (
+    <div className="min-h-96">
+      <MonthPicker {...monthpickerProps} onYearChange={customYearChange}>
+        <MonthPicker.Input {...inputProps} label="Velg månede" />
+      </MonthPicker>
+      {selectedMonth && <div className="pt-4">{selectedMonth.getMonth()}</div>}
+    </div>
+  );
+};

@navikt/core/react/src/date/utils/__tests__/get-month-weeks.test.ts

@@ -1,13 +1,12 @@
 /* https://github.com/gpbl/react-day-picker/blob/main/src/components/Table/utils/getMonthWeeks.test.ts */
-import { nb, enGB } from "date-fns/locale";
+import { enGB, nb } from "date-fns/locale";
 
 import { getMonthWeeks } from "../get-month-weeks";
 
 describe('when using the "nB" locale', () => {
   const locale = nb;
   describe("when getting the weeks for January 2022", () => {
-    const date = new Date(2022, 0);
-    const weeks = getMonthWeeks(date, { locale });
+    const weeks = getMonthWeeks(new Date(2022, 0), { locale });
     test("the first week should be the last of the previous year", () => {
       const weekNumbers = weeks.map((week) => week.weekNumber);
       expect(weekNumbers[0]).toEqual(52);
@@ -29,8 +28,10 @@ describe('when using the "enGB" locale', () => {
   describe("when using fixed weeks", () => {
     const useFixedWeeks = true;
     describe("when getting the weeks for December 2022", () => {
-      const date = new Date(2022, 11);
-      const weeks = getMonthWeeks(date, { useFixedWeeks, locale });
+      const weeks = getMonthWeeks(new Date(2022, 11), {
+        useFixedWeeks,
+        locale,
+      });
       test("should return 48 - 1 week numbers", () => {
         const weekNumbers = weeks.map((week) => week.weekNumber);
         const expectedResult = [48, 49, 50, 51, 52, 1];
@@ -67,8 +68,10 @@ describe('when using the "nb" locale', () => {
   describe("when using fixed weeks", () => {
     const useFixedWeeks = true;
     describe("when getting the weeks for December 2022", () => {
-      const date = new Date(2022, 11);
-      const weeks = getMonthWeeks(date, { useFixedWeeks, locale });
+      const weeks = getMonthWeeks(new Date(2022, 11), {
+        useFixedWeeks,
+        locale,
+      });
       test("should return 48 - 1 week numbers", () => {
         const weekNumbers = weeks.map((week) => week.weekNumber);
         const expectedResult = [48, 49, 50, 51, 52, 1];

@navikt/core/react/src/date/utils/navigation.ts

@@ -15,27 +15,27 @@ export const nextEnabled = (
   const currentIndex = currentMonth.getMonth();
 
   if (key === "Home") {
-    const nextEnabled = nextOnRow(
+    const nextDate = nextOnRow(
       currentIndex,
       months,
       yearState,
       disabled,
       "home"
     );
-    if (nextEnabled) {
-      return nextEnabled;
+    if (nextDate) {
+      return nextDate;
     }
   }
   if (key === "End") {
-    const nextEnabled = nextOnRow(
+    const nextDate = nextOnRow(
       currentIndex,
       months,
       yearState,
       disabled,
       "end"
     );
-    if (nextEnabled) {
-      return nextEnabled;
+    if (nextDate) {
+      return nextDate;
     }
   }
   if (key === "PageUp") {

@navikt/core/react/src/form/Select.tsx

@@ -136,7 +136,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
             className={cl(
               "navds-select__input",
               "navds-body-short",
-              `navds-body--${size ?? "medium"}`
+              `navds-body-short--${size ?? "medium"}`
             )}
             size={htmlSize}
           >

@navikt/core/react/src/form/TextField.tsx

@@ -116,7 +116,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           className={cl(
             "navds-text-field__input",
             "navds-body-short",
-            `navds-body-${size ?? "medium"}`
+            `navds-body-short--${size ?? "medium"}`
           )}
           size={htmlSize}
         />

@navikt/core/react/src/form/Textarea.tsx

@@ -162,7 +162,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
             className={cl(
               "navds-textarea__input",
               "navds-body-short",
-              `navds-body-${size ?? "medium"}`,
+              `navds-body-short--${size ?? "medium"}`,
               {
                 "navds-textarea--counter": hasMaxLength,
               }

@navikt/core/react/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx

@@ -95,8 +95,7 @@ export const FilteredOptionsProvider = ({ children, value: props }) => {
       shouldAutocomplete &&
       normalizeText(searchTerm) !== "" &&
       (previousSearchTerm?.length || 0) < searchTerm.length &&
-      filteredOptions.length > 0 &&
-      !isValueInList(searchTerm, filteredOptions)
+      filteredOptions.length > 0
     ) {
       setValue(
         `${searchTerm}${filteredOptions[0].substring(searchTerm.length)}`

@navikt/core/react/src/form/combobox/Input/Input.tsx

@@ -31,6 +31,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       allowNewValues,
       currentOption,
       filteredOptions,
+      isValueNew,
       toggleIsListOpen,
       isListOpen,
       filteredOptionsIndex,
@@ -46,29 +47,43 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
 
     const onEnter = useCallback(
       (event: React.KeyboardEvent) => {
+        const isTextInSelectedOptions = (text: string) => {
+          return selectedOptions.find(
+            (item) => item.toLocaleLowerCase() === text.toLocaleLowerCase()
+          );
+        };
+
         if (currentOption) {
           event.preventDefault();
           // Selecting a value from the dropdown / FilteredOptions
           toggleOption(currentOption, event);
-          if (!isMultiSelect && !selectedOptions.includes(currentOption))
+          if (!isMultiSelect && !isTextInSelectedOptions(currentOption))
             toggleIsListOpen(false);
-        } else if (shouldAutocomplete && selectedOptions.includes(value)) {
+        } else if (shouldAutocomplete && isTextInSelectedOptions(value)) {
           event.preventDefault();
           // Trying to set the same value that is already set, so just clearing the input
           clearInput(event);
         } else if ((allowNewValues || shouldAutocomplete) && value !== "") {
           event.preventDefault();
           // Autocompleting or adding a new value
-          toggleOption(value, event);
-          if (!isMultiSelect && !selectedOptions.includes(value))
+          const selectedValue =
+            allowNewValues && isValueNew ? value : filteredOptions[0];
+          toggleOption(selectedValue, event);
+          if (
+            !isMultiSelect &&
+            !isTextInSelectedOptions(filteredOptions[0] || selectedValue)
+          ) {
             toggleIsListOpen(false);
+          }
         }
       },
       [
         allowNewValues,
         clearInput,
         currentOption,
+        filteredOptions,
         isMultiSelect,
+        isValueNew,
         selectedOptions,
         shouldAutocomplete,
         toggleIsListOpen,
@@ -176,7 +191,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           inputClassName,
           "navds-combobox__input",
           "navds-body-short",
-          `navds-body-${size}`
+          `navds-body-short--${size}`
         )}
       />
     );

@navikt/core/react/src/form/combobox/Input/inputContext.tsx

@@ -8,8 +8,8 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { useFormField, FormFieldType } from "../../useFormField";
 import { useClientLayoutEffect } from "../../../util";
+import { FormFieldType, useFormField } from "../../useFormField";
 
 interface InputContextType extends FormFieldType {
   clearInput: (event: React.PointerEvent | React.KeyboardEvent) => void;
@@ -63,10 +63,10 @@ export const InputContextProvider = ({ children, value: props }) => {
 
   const onChange = useCallback(
     (event: ChangeEvent<HTMLInputElement>) => {
-      const value = event.currentTarget.value;
-      externalValue ?? setInternalValue(value);
+      const newValue = event.currentTarget.value;
+      externalValue ?? setInternalValue(newValue);
       externalOnChange?.(event);
-      setSearchTerm(value);
+      setSearchTerm(newValue);
     },
     [externalValue, externalOnChange]
   );

@navikt/core/react/src/form/combobox/SelectedOptions/selectedOptionsContext.tsx

@@ -7,8 +7,8 @@ import React, {
 } from "react";
 import usePrevious from "../../../util/usePrevious";
 import { useInputContext } from "../Input/inputContext";
-import { ComboboxProps } from "../types";
 import { useCustomOptionsContext } from "../customOptionsContext";
+import { ComboboxProps } from "../types";
 
 type SelectedOptionsContextType = {
   addSelectedOption: (option: string) => void;
@@ -71,8 +71,8 @@ export const SelectedOptionsProvider = ({
         allowNewValues && addCustomOption(option);
         !isMultiSelect && setSelectedOptions([]);
       } else if (isMultiSelect) {
-        setSelectedOptions((prevSelectedOptions) => [
-          ...prevSelectedOptions,
+        setSelectedOptions((oldSelectedOptions) => [
+          ...oldSelectedOptions,
           option,
         ]);
       } else {
@@ -97,8 +97,8 @@ export const SelectedOptionsProvider = ({
       if (isCustomOption) {
         removeCustomOption(option);
       } else {
-        setSelectedOptions((prevSelectedOptions) =>
-          prevSelectedOptions.filter(
+        setSelectedOptions((oldSelectedOptions) =>
+          oldSelectedOptions.filter(
             (selectedOption) => selectedOption !== option
           )
         );

@navikt/core/react/src/form/combobox/combobox.stories.tsx

@@ -467,6 +467,50 @@ export const TestThatCallbacksOnlyFireWhenExpected: StoryObj<{
   },
 };
 
+export const TestCasingWhenAutoCompleting = {
+  args: {
+    onChange: jest.fn(),
+    onClear: jest.fn(),
+    onToggleSelected: jest.fn(),
+  },
+  render: (props) => {
+    return (
+      <UNSAFE_Combobox
+        options={["Camel Case", "lowercase", "UPPERCASE"]}
+        label="Liker du best store eller små bokstaver?"
+        shouldAutocomplete
+        allowNewValues
+        {...props}
+      />
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByRole<HTMLInputElement>("combobox");
+
+    // With exisiting option
+    userEvent.click(input);
+    await userEvent.type(input, "cAmEl CaSe", { delay: 250 });
+    await sleep(250);
+    expect(input.value).toBe("cAmEl CaSe");
+    await userEvent.type(input, "{Enter}");
+    await sleep(250);
+    const chips = canvas.getAllByRole("list")[0];
+    const selectedUpperCaseChip = within(chips).getAllByRole("listitem")[0];
+    expect(selectedUpperCaseChip).toHaveTextContent("Camel Case"); // A weird issue is preventing the accessible name from being used in the test, even if it works in VoiceOver
+
+    // With custom option
+    userEvent.click(input);
+    await userEvent.type(input, "cAmEl{Backspace}", { delay: 250 });
+    await sleep(250);
+    expect(input.value).toBe("cAmEl");
+    await userEvent.type(input, "{Enter}");
+    await sleep(250);
+    const selectedNewValueChip = within(chips).getAllByRole("listitem")[0];
+    expect(selectedNewValueChip).toHaveTextContent("cAmEl"); // A weird issue is preventing the accessible name from being used in the test, even if it works in VoiceOver
+  },
+};
+
 export const TestHoverAndFocusSwitching: StoryObject = {
   render: () => {
     return (

@navikt/core/react/src/form/search/Search.tsx

@@ -212,7 +212,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
                 `navds-search__input--${variant}`,
                 "navds-text-field__input",
                 "navds-body-short",
-                `navds-body-${size}`
+                `navds-body-short--${size}`
               )}
               {...(htmlSize ? { size: Number(htmlSize) } : {})}
             />

@navikt/core/react/src/form/stories/textarea.stories.tsx

@@ -1,52 +1,36 @@
-import { Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { Textarea } from "../index";
-export default {
+
+const meta: Meta<typeof Textarea> = {
   title: "ds-react/Textarea",
   component: Textarea,
-  argTypes: {
-    size: {
-      control: {
-        type: "radio",
-        options: ["medium", "small"],
-      },
-    },
-    description: {
-      type: "string",
-    },
-    error: {
-      type: "string",
-    },
-    hideLabel: {
-      type: "boolean",
-    },
-    disabled: {
-      type: "boolean",
-    },
-    maxRows: {
-      type: "number",
-    },
-    minRows: {
-      type: "number",
-    },
-  },
-} as Meta;
+};
+export default meta;
 
-export const Default = {
+export const Default: StoryObj<typeof Textarea> = {
   render: (props) => {
-    return (
-      <Textarea
-        {...props}
-        maxLength={props?.maxLength ?? 100}
-        label="Ipsum enim quis culpa"
-      />
-    );
+    return <Textarea {...props} />;
   },
 
   args: {
     maxLength: 100,
+    label: "Ipsum enim quis culpa",
     resize: false,
   },
+
+  argTypes: {
+    size: {
+      control: { type: "radio" },
+      options: ["medium", "small"],
+    },
+    description: { type: "string" },
+    error: { type: "string" },
+    hideLabel: { type: "boolean" },
+    disabled: { type: "boolean" },
+    maxRows: { type: "number" },
+    minRows: { type: "number" },
+  },
 };
 
 export const Small = () => {

@navikt/core/react/src/help-text/HelpText.tsx

@@ -90,6 +90,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
           anchorEl={buttonRef.current}
           placement={placement}
           strategy={strategy}
+          offset={12}
         >
           <Popover.Content className="navds-body-short">
             {children}

@navikt/core/react/src/help-text/HelpTextIcon.tsx

@@ -30,7 +30,7 @@ export const HelpTextIcon = ({
         cx="12"
         cy="12"
         r="11"
-        strokeWidth="2"
+        strokeWidth="1.5"
         stroke="currentColor"
         fill={filled ? "currentColor" : "transparent"}
       />

@navikt/core/react/src/layout/bleed/Bleed.tsx

@@ -1,10 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import {
-  ResponsiveProp,
-  SpacingScale,
-  getResponsiveProps,
-} from "../utilities/css";
+import { getResponsiveProps } from "../utilities/css";
+import { ResponsiveProp, SpacingScale } from "../utilities/types";
 import { Slot } from "../../util/Slot";
 
 export type BleedSpacingInline = "0" | "full" | "px" | SpacingScale;

@navikt/core/react/src/layout/box/Box.tsx

@@ -1,13 +1,11 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { OverridableComponent } from "../../util/OverridableComponent";
+import { getResponsiveProps } from "../utilities/css";
 import {
   SpaceDelimitedAttribute,
   ResponsiveProp,
   SpacingScale,
-  getResponsiveProps,
-} from "../utilities/css";
-import {
   BackgroundToken,
   BorderColorToken,
   ShadowToken,

@navikt/core/react/src/layout/grid/HGrid.tsx

@@ -1,11 +1,7 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "clsx";
-import {
-  getResponsiveProps,
-  getResponsiveValue,
-  ResponsiveProp,
-  SpacingScale,
-} from "../utilities/css";
+import { getResponsiveProps, getResponsiveValue } from "../utilities/css";
+import { ResponsiveProp, SpacingScale } from "../utilities/types";
 
 export interface HGridProps extends HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;

@navikt/core/react/src/layout/responsive/Responsive.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef, HTMLAttributes } from "react";
-import { BreakpointsAlias } from "../utilities/css";
+import { BreakpointsAlias } from "../utilities/types";
 import { Slot } from "../../util/Slot";
 
 export interface ResponsiveProps extends HTMLAttributes<HTMLDivElement> {

@navikt/core/react/src/layout/sidemal-test/Sidebar.tsx

@@ -1,8 +1,8 @@
 import React from "react";
+import { Link } from "../../link";
 import { Heading, Label } from "../../typography";
 import { Box } from "../box";
 import { VStack } from "../stack";
-import { Link } from "../../link";
 
 const LinkElement = ({ children }) => {
   return (

@navikt/core/react/src/layout/stack/Stack.tsx

@@ -1,12 +1,8 @@
 import cl from "clsx";
 import React, { forwardRef, HTMLAttributes } from "react";
 import { OverridableComponent } from "../../util/OverridableComponent";
-import {
-  getResponsiveProps,
-  getResponsiveValue,
-  ResponsiveProp,
-  SpacingScale,
-} from "../utilities/css";
+import { getResponsiveProps, getResponsiveValue } from "../utilities/css";
+import { ResponsiveProp, SpacingScale } from "../utilities/types";
 
 export interface StackProps extends HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;

@navikt/core/react/src/layout/utilities/css.ts

@@ -1,38 +1,4 @@
-export type BreakpointsAlias = "xs" | "sm" | "md" | "lg" | "xl";
-
-export type SpacingScale =
-  | "0"
-  | "05"
-  | "1"
-  | "2"
-  | "3"
-  | "4"
-  | "5"
-  | "6"
-  | "7"
-  | "8"
-  | "9"
-  | "10"
-  | "11"
-  | "12"
-  | "14"
-  | "16"
-  | "18"
-  | "20"
-  | "24"
-  | "32";
-
-export type SpaceDelimitedAttribute<T extends string> =
-  | T
-  | `${T} ${T}`
-  | `${T} ${T} ${T}`
-  | `${T} ${T} ${T} ${T}`;
-
-type FixedResponsiveT<T> = {
-  [Breakpoint in BreakpointsAlias]?: T;
-};
-
-export type ResponsiveProp<T> = T | FixedResponsiveT<T>;
+import { ResponsiveProp } from "./types";
 
 export function getResponsiveValue<T = string>(
   componentName: string,

@navikt/core/react/src/layout/utilities/types.ts

@@ -3,6 +3,7 @@ import surfaceColors from "@navikt/ds-tokens/src/colors-surface.json";
 import borderColors from "@navikt/ds-tokens/src/colors-border.json";
 import borderRadii from "@navikt/ds-tokens/src/border.json";
 import shadows from "@navikt/ds-tokens/src/shadow.json";
+import Spacing from "@navikt/ds-tokens/src/spacing.json";
 
 export type BackgroundToken =
   | keyof typeof bgColors.a
@@ -12,3 +13,18 @@ export type BorderRadiiToken =
   | keyof (typeof borderRadii.a)["border-radius"]
   | "0";
 export type ShadowToken = keyof typeof shadows.a.shadow;
+
+export type BreakpointsAlias = "xs" | "sm" | "md" | "lg" | "xl";
+
+export type SpacingScale = keyof (typeof Spacing)["a"]["spacing"];
+
+export type SpaceDelimitedAttribute<T extends string> =
+  | T
+  | `${T} ${T}`
+  | `${T} ${T} ${T}`
+  | `${T} ${T} ${T} ${T}`;
+type FixedResponsiveT<T> = {
+  [Breakpoint in BreakpointsAlias]?: T;
+};
+
+export type ResponsiveProp<T> = T | FixedResponsiveT<T>;

@navikt/core/react/src/loader/Loader.tsx

@@ -2,7 +2,7 @@ import cl from "clsx";
 import React, { forwardRef, SVGProps } from "react";
 import { omit, useId } from "../util";
 
-export interface LoaderProps extends SVGProps<SVGSVGElement> {
+export interface LoaderProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
   /**
    * Changes Loader width/height
    * 88px | 64px | 40px | 32px | 24px | 20px | 16px
@@ -31,6 +31,12 @@ export interface LoaderProps extends SVGProps<SVGSVGElement> {
    * @default "neutral"
    */
   variant?: "neutral" | "interaction" | "inverted";
+  /**
+   * Allows getting a ref to the component instance.
+   * Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
+   * @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
+   */
+  ref?: React.Ref<SVGSVGElement>;
 }
 
 /* Workaround for @types/react v17/v18 feil */
@@ -46,7 +52,7 @@ export type LoaderType = React.ForwardRefExoticComponent<
  *
  * @example
  * ```jsx
- * <Loader size="3xlarge" title="venter..." />
+ * <Loader size="3xlarge" title="Venter..." />
  * ```
  */
 export const Loader: LoaderType = forwardRef<SVGSVGElement, LoaderProps>(

@navikt/core/react/src/loader/loader.stories.tsx

@@ -1,6 +1,6 @@
-import React from "react";
-import { Loader } from "..";
 import { Meta } from "@storybook/react";
+import React from "react";
+import { Loader, LoaderProps } from "..";
 export default {
   title: "ds-react/Loader",
   component: Loader,
@@ -29,7 +29,7 @@ export default {
 } as Meta;
 
 export const Default = {
-  render: (props: any) => {
+  render: (props: LoaderProps) => {
     return <Loader {...props} />;
   },
 

@navikt/core/react/src/modal/Modal.tsx

@@ -82,11 +82,13 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       open,
       onBeforeClose,
       onCancel,
+      closeOnBackdropClick,
       width,
       portal,
       className,
       "aria-labelledby": ariaLabelledby,
       style,
+      onClick,
       ...rest
     }: ModalProps,
     ref
@@ -108,6 +110,11 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       if (needPolyfill && modalRef.current && portalNode) {
         dialogPolyfill.registerDialog(modalRef.current);
       }
+      // We set autofocus on the dialog element to prevent the default behavior where first focusable element gets focus when modal is opened.
+      // This is mainly to fix an edge case where having a Tooltip as the first focusable element would make it activate when you open the modal.
+      // We have to use JS because it doesn't work to set it with a prop (React bug?)
+      // Currently doesn't seem to work in Chrome. See also Tooltip.tsx
+      if (modalRef.current && portalNode) modalRef.current.autofocus = true;
     }, [modalRef, portalNode]);
 
     useEffect(() => {
@@ -128,34 +135,57 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
     const isWidthPreset =
       typeof width === "string" && ["small", "medium"].includes(width);
 
+    const mergedClassName = cl("navds-modal", className, {
+      "navds-modal--polyfilled": needPolyfill,
+      "navds-modal--autowidth": !width,
+      [`navds-modal--${width}`]: isWidthPreset,
+    });
+
+    const mergedStyle = {
+      ...style,
+      ...(!isWidthPreset ? { width } : {}),
+    };
+
+    const mergedOnCancel: React.DialogHTMLAttributes<HTMLDialogElement>["onCancel"] =
+      (event) => {
+        if (onBeforeClose && onBeforeClose() === false) {
+          event.preventDefault();
+        } else if (onCancel) onCancel(event);
+      };
+
+    const mergedOnClick =
+      closeOnBackdropClick && !needPolyfill // closeOnBackdropClick has issues on polyfill when nesting modals (DatePicker)
+        ? (event: React.MouseEvent<HTMLDialogElement>) => {
+            onClick && onClick(event);
+            if (
+              event.target === modalRef.current &&
+              (!onBeforeClose || onBeforeClose() !== false)
+            ) {
+              modalRef.current.close();
+            }
+          }
+        : onClick;
+
+    const mergedAriaLabelledBy =
+      !ariaLabelledby && !rest["aria-label"] && header
+        ? ariaLabelId
+        : ariaLabelledby;
+
     const component = (
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
       <dialog
         {...rest}
         ref={mergedRef}
-        className={cl("navds-modal", className, {
-          "navds-modal--polyfilled": needPolyfill,
-          "navds-modal--autowidth": !width,
-          [`navds-modal--${width}`]: isWidthPreset,
-        })}
-        style={{
-          ...style,
-          ...(!isWidthPreset ? { width } : {}),
-        }}
-        onCancel={(event) => {
-          // FYI: onCancel fires when you press Esc
-          if (onBeforeClose && onBeforeClose() === false) {
-            event.preventDefault();
-          } else if (onCancel) onCancel(event);
-        }}
-        aria-labelledby={
-          !ariaLabelledby && !rest["aria-label"] && header
-            ? ariaLabelId
-            : ariaLabelledby
-        }
+        className={mergedClassName}
+        style={mergedStyle}
+        onCancel={mergedOnCancel} // FYI: onCancel fires when you press Esc
+        onClick={mergedOnClick}
+        aria-labelledby={mergedAriaLabelledBy}
       >
         <ModalContext.Provider
           value={{
             closeHandler: getCloseHandler(modalRef, header, onBeforeClose),
+            ref: modalRef,
           }}
         >
           {header && (

@navikt/core/react/src/modal/ModalContext.ts

@@ -2,5 +2,6 @@ import React from "react";
 
 interface ModalContextProps {
   closeHandler?: React.MouseEventHandler<HTMLButtonElement>;
+  ref: React.RefObject<HTMLDialogElement>;
 }
 export const ModalContext = React.createContext<ModalContextProps | null>(null);

@navikt/core/react/src/modal/modal.stories.tsx

@@ -1,6 +1,6 @@
-import React, { useRef, useState } from "react";
 import { FileIcon } from "@navikt/aksel-icons";
-import { BodyLong, Button, Heading } from "..";
+import React, { useRef, useState } from "react";
+import { BodyLong, Button, Heading, Tooltip } from "..";
 import Modal from "./Modal";
 
 export default {
@@ -27,6 +27,7 @@ export const WithUseRef = () => {
           heading: "Title",
           size: "small",
         }}
+        closeOnBackdropClick
       >
         <Modal.Body>
           <BodyLong spacing>
@@ -45,6 +46,7 @@ export const WithUseRef = () => {
             onBeforeClose={() =>
               window.confirm("Are you sure you want to close the modal?")
             }
+            closeOnBackdropClick
             aria-labelledby="heading123"
           >
             <Modal.Header>
@@ -111,6 +113,7 @@ export const WithUseState = () => {
               e.stopPropagation(); // onClose wil propagate to parent modal if not stopped
               setOpen2(false);
             }}
+            closeOnBackdropClick
             aria-label="Nested modal"
             width={800}
           >
@@ -165,3 +168,28 @@ export const MediumWithPortal = () => (
     <Modal.Body>Lorem ipsum dolor sit amet.</Modal.Body>
   </Modal>
 );
+
+export const WithTooltip = () => {
+  const ref = useRef<HTMLDialogElement>(null);
+
+  return (
+    <div>
+      <Button onClick={() => ref.current?.showModal()}>Open Modal</Button>
+      <Modal
+        open={ref.current ? undefined : true /* initially open */}
+        ref={ref}
+      >
+        <Modal.Body>
+          <div style={{ marginBottom: "1rem" }}>
+            <Tooltip content="This_is_the_first_tooltip">
+              <Button>Test 1</Button>
+            </Tooltip>
+          </div>
+          <Tooltip content="This is the second tooltip">
+            <Button>Test 2</Button>
+          </Tooltip>
+        </Modal.Body>
+      </Modal>
+    </div>
+  );
+};

@navikt/core/react/src/modal/types.ts

@@ -42,6 +42,13 @@ export interface ModalProps
    * Called when the user presses the Esc key, unless `onBeforeClose()` returns `false`.
    */
   onCancel?: React.ReactEventHandler<HTMLDialogElement>;
+  /**
+   * Whether to close when clicking on the backdrop.
+   *
+   * **WARNING:** Users may click outside by accident. Don't use if closing can cause data loss, or the modal contains important info.
+   * @default false
+   */
+  closeOnBackdropClick?: boolean;
   /**
    * @default fit-content (up to 700px)
    * */

@navikt/core/react/src/popover/Popover.tsx

@@ -133,6 +133,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
     const arrowRef = useRef<HTMLDivElement | null>(null);
     const isInModal = useContext(ModalContext) !== null;
     const chosenStrategy = userStrategy ?? (isInModal ? "fixed" : "absolute");
+    const chosenFlip = isInModal ? true : _flip;
 
     const {
       x,
@@ -150,7 +151,8 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       onOpenChange: () => onClose(),
       middleware: [
         flOffset(offset ?? (arrow ? 16 : 4)),
-        _flip && flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
+        chosenFlip &&
+          flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
         shift({ padding: 12 }),
         flArrow({ element: arrowRef, padding: 8 }),
       ],

@navikt/core/react/src/table/ExpandableRow.tsx

@@ -1,10 +1,10 @@
+import { ChevronDownIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef, useState } from "react";
 import { useId } from "../util";
 import AnimateHeight from "../util/AnimateHeight";
 import DataCell from "./DataCell";
 import Row, { RowProps } from "./Row";
-import { ChevronDownIcon } from "@navikt/aksel-icons";
 
 export interface ExpandableRowProps extends Omit<RowProps, "content"> {
   /**
@@ -76,7 +76,7 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
     const expansionHandler = (e) => {
       onOpenChange?.(!isOpen);
       if (open === undefined) {
-        setInternalOpen((open) => !open);
+        setInternalOpen((oldOpen) => !oldOpen);
       }
       e.stopPropagation();
     };

@navikt/core/react/src/table/stories/table-async.stories.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
 import useSWR from "swr";
-import people from "./people.json";
-import { Table } from "../index";
 import { Loader, Pagination, SortState } from "../..";
+import { Table } from "../index";
+import peopleJson from "./people.json";
 
 export default {
   title: "ds-react/Table",
@@ -44,8 +44,8 @@ const updateData = async (url: string) => {
   );
 
   return {
-    count: people.length,
-    results: people
+    count: peopleJson.length,
+    results: peopleJson
       .slice()
       .sort((a, b) => {
         if (sort) {

@navikt/core/react/src/table/stories/table-expandable.stories.tsx

@@ -19,15 +19,15 @@ export const Expandable = () => {
         </Table.Row>
       </Table.Header>
       <Table.Body>
-        {data.map((data) => (
+        {data.map((row) => (
           <Table.ExpandableRow
-            expansionDisabled={data.animal === "Sel"}
-            content={data.content}
-            key={data.name}
+            expansionDisabled={row.animal === "Sel"}
+            content={row.content}
+            key={row.name}
             togglePlacement="right"
           >
             {columns.map(({ key }) => (
-              <Table.DataCell key={key}>{data[key]}</Table.DataCell>
+              <Table.DataCell key={key}>{row[key]}</Table.DataCell>
             ))}
           </Table.ExpandableRow>
         ))}
@@ -49,22 +49,22 @@ export const ExpandableLarge = () => {
         </Table.Row>
       </Table.Header>
       <Table.Body>
-        {data.slice(0, 1).map((data) => (
-          <Table.ExpandableRow content={data.content} key={data.name}>
+        {data.slice(0, 1).map((row) => (
+          <Table.ExpandableRow content={row.content} key={row.name}>
             {columns.map(({ key }) => (
-              <Table.DataCell key={key}>{data[key]}</Table.DataCell>
+              <Table.DataCell key={key}>{row[key]}</Table.DataCell>
             ))}
           </Table.ExpandableRow>
         ))}
-        {data.slice(1, 2).map((data) => (
+        {data.slice(1, 2).map((row) => (
           <Table.ExpandableRow
-            content={data.content}
-            key={data.name}
+            content={row.content}
+            key={row.name}
             open={open}
-            onOpenChange={(open) => setOpen(open)}
+            onOpenChange={setOpen}
           >
             {columns.map(({ key }) => (
-              <Table.DataCell key={key}>{data[key]}</Table.DataCell>
+              <Table.DataCell key={key}>{row[key]}</Table.DataCell>
             ))}
           </Table.ExpandableRow>
         ))}
@@ -86,22 +86,22 @@ export const ExpandableSmall = () => {
         </Table.Row>
       </Table.Header>
       <Table.Body>
-        {data.slice(0, 1).map((data) => (
-          <Table.ExpandableRow content={data.content} key={data.name}>
+        {data.slice(0, 1).map((row) => (
+          <Table.ExpandableRow content={row.content} key={row.name}>
             {columns.map(({ key }) => (
-              <Table.DataCell key={key}>{data[key]}</Table.DataCell>
+              <Table.DataCell key={key}>{row[key]}</Table.DataCell>
             ))}
           </Table.ExpandableRow>
         ))}
-        {data.slice(1, 2).map((data) => (
+        {data.slice(1, 2).map((row) => (
           <Table.ExpandableRow
-            content={data.content}
-            key={data.name}
+            content={row.content}
+            key={row.name}
             open={open}
-            onOpenChange={(open) => setOpen(open)}
+            onOpenChange={setOpen}
           >
             {columns.map(({ key }) => (
-              <Table.DataCell key={key}>{data[key]}</Table.DataCell>
+              <Table.DataCell key={key}>{row[key]}</Table.DataCell>
             ))}
           </Table.ExpandableRow>
         ))}
@@ -247,16 +247,16 @@ export const ExpandableOpen = () => {
         </Table.Row>
       </Table.Header>
       <Table.Body>
-        {data.map((data) => (
+        {data.map((row) => (
           <Table.ExpandableRow
-            expansionDisabled={data.animal === "Sel"}
-            content={data.content}
-            key={data.name}
+            expansionDisabled={row.animal === "Sel"}
+            content={row.content}
+            key={row.name}
             togglePlacement="right"
             defaultOpen
           >
             {columns.map(({ key }) => (
-              <Table.DataCell key={key}>{data[key]}</Table.DataCell>
+              <Table.DataCell key={key}>{row[key]}</Table.DataCell>
             ))}
           </Table.ExpandableRow>
         ))}

@navikt/core/react/src/table/stories/table.stories.tsx

@@ -161,10 +161,10 @@ const SelectionTable = ({ size = "medium" }: { size?: "small" | "medium" }) => {
     return [
       list,
       (value) =>
-        setList((list) =>
-          list.includes(value)
-            ? list.filter((id) => id !== value)
-            : [...list, value]
+        setList((oldList) =>
+          oldList.includes(value)
+            ? oldList.filter((id) => id !== value)
+            : [...oldList, value]
         ),
     ];
   };

@navikt/core/react/src/tabs/TabList.tsx

@@ -39,10 +39,10 @@ export const TabList = forwardRef<HTMLDivElement, TabListProps>(
           const showStartScroll = scrollLeft > 1;
           const showEndScroll = scrollLeft < scrollWidth - clientWidth - 1;
 
-          setDisplayScroll((displayScroll) =>
-            showStartScroll === displayScroll.start &&
-            showEndScroll === displayScroll.end
-              ? displayScroll
+          setDisplayScroll((oldDisplayScroll) =>
+            showStartScroll === oldDisplayScroll.start &&
+            showEndScroll === oldDisplayScroll.end
+              ? oldDisplayScroll
               : { start: showStartScroll, end: showEndScroll }
           );
         }),

@navikt/core/react/src/timeline/Timeline.tsx

@@ -1,6 +1,8 @@
 import { endOfDay, isSameDay, startOfDay } from "date-fns";
 import React, { forwardRef, useMemo, useRef, useState } from "react";
 import { AxisLabels } from "./AxisLabels";
+import Pin, { PinType } from "./Pin";
+import TimelineRow, { TimelineRowType } from "./TimelineRow";
 import { RowContext } from "./hooks/useRowContext";
 import { TimelineContext } from "./hooks/useTimelineContext";
 import {
@@ -9,11 +11,9 @@ import {
   useTimelineRows,
 } from "./hooks/useTimelineRows";
 import Period, { PeriodType } from "./period";
-import Pin, { PinType } from "./Pin";
-import TimelineRow, { TimelineRowType } from "./TimelineRow";
 import { parseRows } from "./utils/timeline";
-import Zoom, { ZoomType } from "./zoom";
 import { AxisLabelTemplates } from "./utils/types.external";
+import Zoom, { ZoomType } from "./zoom";
 
 export interface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
@@ -187,10 +187,10 @@ export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
       }
     };
 
-    const addFocusable = (ref: HTMLButtonElement | null, id: number) => {
+    const addFocusable = (btnRef: HTMLButtonElement | null, id: number) => {
       let items = firstFocusabled.current;
       items = items.filter((x) => x.id !== id);
-      items.push({ ref, id });
+      items.push({ ref: btnRef, id });
       firstFocusabled.current = items;
     };
 
@@ -212,8 +212,8 @@ export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
           <div className="navds-timeline">
             <AxisLabels templates={axisLabelTemplates} />
 
-            {pins.map((Pin, i) => (
-              <Pin key={`pin-${i}`} />
+            {pins.map((PinChild, i) => (
+              <PinChild key={`pin-${i}`} />
             ))}
 
             {processedRows.map((row, i) => {
@@ -238,7 +238,7 @@ export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
               );
             })}
           </div>
-          {zoomComponent && zoomComponent}
+          {zoomComponent}
         </div>
       </TimelineContext.Provider>
     );

@navikt/core/react/src/timeline/hooks/useTimelineRows.ts

@@ -101,8 +101,7 @@ export const useTimelineRows = (
 ): InternalSimpleTimeline[] =>
   useMemo(
     () =>
-      rows.map((periods: InternalSimpleTimeline, i: number) => {
-        const rowIndex = i;
+      rows.map((periods: InternalSimpleTimeline, rowIndex: number) => {
         const timelinePeriods = periods.periods
           .sort((a: Period, b: Period) => a.start.valueOf() - b.start.valueOf())
           .map((period: Period & { restProps?: any; ref?: any }, i) => ({

@navikt/core/react/src/tooltip/Tooltip.tsx

@@ -1,8 +1,8 @@
 import {
-  arrow as flArrow,
-  autoUpdate,
-  flip,
   FloatingPortal,
+  autoUpdate,
+  arrow as flArrow,
+  flip,
   offset,
   safePolygon,
   shift,
@@ -14,16 +14,18 @@ import {
 } from "@floating-ui/react";
 import cl from "clsx";
 import React, {
+  HTMLAttributes,
   cloneElement,
   forwardRef,
-  HTMLAttributes,
+  useContext,
   useMemo,
   useRef,
   useState,
 } from "react";
+import { ModalContext } from "../modal/ModalContext";
+import { useProvider } from "../provider";
 import { Detail } from "../typography";
 import { mergeRefs, useId } from "../util";
-import { useProvider } from "../provider";
 
 export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -110,7 +112,11 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
   ) => {
     const [open, setOpen] = useState(defaultOpen);
     const arrowRef = useRef<HTMLDivElement | null>(null);
-    const rootElement = useProvider()?.rootElement;
+    const modalContext = useContext(ModalContext);
+    const providerRootElement = useProvider()?.rootElement;
+    const rootElement = modalContext
+      ? modalContext.ref.current
+      : providerRootElement;
 
     const {
       x,
@@ -133,7 +139,13 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
         flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
         flArrow({ element: arrowRef, padding: 5 }),
       ],
-      whileElementsMounted: autoUpdate,
+      whileElementsMounted: modalContext
+        ? (reference, floating, update) =>
+            // Reduces jumping in Chrome when used in a Modal and it's the first focusable element.
+            // Can be removed when autofocus starts working on <dialog> in Chrome. See also Modal.tsx
+            autoUpdate(reference, floating, update, { animationFrame: true })
+        : autoUpdate,
+      strategy: modalContext ? "fixed" : undefined,
     });
 
     const { getReferenceProps, getFloatingProps } = useInteractions([

@navikt/core/react/src/util/omit.ts

@@ -2,8 +2,8 @@ export const omit = (obj: object, props: string[]) =>
   Object.entries(obj)
     .filter(([key]) => !props.includes(key))
     .reduce(
-      (obj, [key, value]) => ({
-        ...obj,
+      (prevObj, [key, value]) => ({
+        ...prevObj,
         [key]: value,
       }),
       {}

@navikt/core/tailwind/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @navikt/ds-tailwind
 
+## 5.8.0
+
+## 5.7.6
+
+## 5.7.5
+
+## 5.7.4
+
+## 5.7.3
+
+## 5.7.2
+
 ## 5.7.1
 
 ## 5.7.0

@navikt/core/tailwind/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tailwind",
-  "version": "5.7.1",
+  "version": "5.8.0",
   "description": "Tailwind config based on @navikt/ds-tokens",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -22,7 +22,7 @@
     "directory": "@navikt/core/tailwind"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^5.7.1",
+    "@navikt/ds-tokens": "^5.8.0",
     "@types/jest": "^29.0.0",
     "color": "4.2.3",
     "jest": "^29.0.0",

@navikt/core/tokens/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @navikt/ds-tokens
 
+## 5.8.0
+
+## 5.7.6
+
+## 5.7.5
+
+## 5.7.4
+
+## 5.7.3
+
+### Patch Changes
+
+- Ny spacing token på 0.375rem ([#2370](https://github.com/navikt/aksel/pull/2370))
+
+## 5.7.2
+
 ## 5.7.1
 
 ## 5.7.0

@navikt/core/tokens/docs.json

@@ -508,6 +508,7 @@
     { "name": "--a-spacing-0", "value": "0" },
     { "name": "--a-spacing-05", "value": "0.125rem" },
     { "name": "--a-spacing-1", "value": "0.25rem" },
+    { "name": "--a-spacing-1-alt", "value": "0.375rem" },
     { "name": "--a-spacing-2", "value": "0.5rem" },
     { "name": "--a-spacing-3", "value": "0.75rem" },
     { "name": "--a-spacing-4", "value": "1rem" },

@navikt/core/tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tokens",
-  "version": "5.7.1",
+  "version": "5.8.0",
   "description": "Design-tokens for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [

@navikt/core/tokens/src/spacing.json

@@ -10,6 +10,9 @@
       "1": {
         "value": "0.25rem"
       },
+      "1-alt": {
+        "value": "0.375rem"
+      },
       "2": {
         "value": "0.5rem"
       },

@navikt/core/tokens/stories/spacing.stories.tsx

@@ -1,7 +1,7 @@
-import React from "react";
-import { Meta } from "@storybook/react";
-import * as tokens from "../dist/tokens.js";
 import { Tooltip } from "@navikt/ds-react";
+import { Meta } from "@storybook/react";
+import React from "react";
+import * as tokens from "../dist/tokens.js";
 
 export default {
   title: "ds-tokens/Spacing",
@@ -14,24 +14,15 @@ export const Spacing = () => {
     {}
   );
 
-  const sortObject = Object.fromEntries(
-    Object.entries(allSpacing).sort((a, b) => {
-      if (a[0].endsWith("05"))
-        return 0.5 - Number(b[0].replace("ASpacing", ""));
-      if (b[0].endsWith("05"))
-        return Number(a[0].replace("ASpacing", "")) - 0.5;
-      return (
-        Number(a[0].replace("ASpacing", "")) -
-        Number(b[0].replace("ASpacing", ""))
-      );
-    })
+  const sorted = Object.entries(allSpacing).sort(
+    (a, b) => Number(a[1].replace("rem", "")) - Number(b[1].replace("rem", ""))
   );
 
   const fontSize = 16;
 
   return (
     <div className="colgap">
-      {Object.entries(sortObject).map(([key, val]) => (
+      {sorted.map(([key, val]) => (
         <div
           key={key}
           style={{

aksel.nav.no/package.json

@@ -15,11 +15,11 @@
     "website"
   ],
   "dependencies": {
-    "@navikt/aksel-icons": "^5.7.1",
-    "@navikt/ds-css": "^5.7.1",
-    "@navikt/ds-react": "^5.7.1",
-    "@navikt/ds-tailwind": "^5.7.1",
-    "@navikt/ds-tokens": "^5.7.1"
+    "@navikt/aksel-icons": "^5.8.0",
+    "@navikt/ds-css": "^5.8.0",
+    "@navikt/ds-react": "^5.8.0",
+    "@navikt/ds-tailwind": "^5.8.0",
+    "@navikt/ds-tokens": "^5.8.0"
   },
   "devDependencies": {
     "prettier-plugin-tailwindcss": "^0.2.3"

aksel.nav.no/website/components/SanityBlockContent.tsx

@@ -1,3 +1,4 @@
+import { amplitudeLogNavigation } from "@/logging";
 import { BodyLong, Detail, Heading, Link } from "@navikt/ds-react";
 import {
   PortableText,
@@ -27,7 +28,6 @@ import {
   TokenTable,
   UuFeedback,
   Video,
-  logNav,
 } from ".";
 
 const serializers: Partial<PortableTextReactComponents> = {
@@ -130,14 +130,11 @@ const serializers: Partial<PortableTextReactComponents> = {
 
       return (
         <Link
+          as={NextLink}
           href={href}
           inlineText
           onClick={(e) =>
-            logNav(
-              "link",
-              window.location.pathname,
-              e.currentTarget.getAttribute("href")
-            )
+            amplitudeLogNavigation("link", e.currentTarget.getAttribute("href"))
           }
           {...(href.startsWith("http") &&
           !href.startsWith("https://aksel.nav.no/")
@@ -160,11 +157,7 @@ const serializers: Partial<PortableTextReactComponents> = {
           href={href}
           inlineText
           onClick={(e) =>
-            logNav(
-              "link",
-              window.location.pathname,
-              e.currentTarget.getAttribute("href")
-            )
+            amplitudeLogNavigation("link", e.currentTarget.getAttribute("href"))
           }
         >
           {text}

aksel.nav.no/website/components/layout/WithSidebar.tsx

@@ -111,9 +111,7 @@ export const WithSidebar = ({
           </div>
 
           <div className={cl("sm:px-6 md:px-10", { flex: variant === "page" })}>
-            {variant === "page" && (
-              <TableOfContentsv2 changedState={pageProps["content"]} />
-            )}
+            {variant === "page" && <TableOfContentsv2 />}
             <div className="w-full">
               {children}
               <Feedback docId={pageProps?._id} docType={pageProps?._type} />

aksel.nav.no/website/components/layout/footer/Footer.tsx

@@ -1,7 +1,7 @@
+import { amplitudeLogNavigation } from "@/logging";
 import { BodyShort, Heading, Link } from "@navikt/ds-react";
 import { FigmaIcon, GithubIcon, SlackIcon } from "components/assets";
 import Logo from "components/assets/Logo";
-import { logNav } from "components/website-modules/utils/amplitude";
 import dynamic from "next/dynamic";
 /* import FooterForm from "./FooterForm"; */
 
@@ -119,11 +119,7 @@ function FooterLink({ children, href }) {
         className="text-text-on-inverted focus:shadow-focus focus:text-text-default flex w-fit items-center gap-1 underline hover:no-underline focus:bg-blue-200 focus:shadow-blue-200"
         href={href}
         onClick={(e) =>
-          logNav(
-            "footer",
-            window.location.pathname,
-            e.currentTarget.getAttribute("href")
-          )
+          amplitudeLogNavigation("footer", e.currentTarget.getAttribute("href"))
         }
       >
         {children}

aksel.nav.no/website/components/layout/header/Hamburger.tsx

@@ -1,11 +1,11 @@
 import { MenuHamburgerIcon } from "@navikt/aksel-icons";
 
+import { amplitudeLogNavigation } from "@/logging";
 import { Modal } from "@navikt/ds-react";
 import cl from "clsx";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useState } from "react";
-import { logNav } from "../..";
 
 const LinkElement = ({ name, href, onClick }) => {
   const { asPath } = useRouter();
@@ -23,9 +23,8 @@ const LinkElement = ({ name, href, onClick }) => {
           }
         )}
         onClick={(e) => {
-          logNav(
+          amplitudeLogNavigation(
             "header",
-            window.location.pathname,
             e.currentTarget.getAttribute("href")
           );
           onClick();

aksel.nav.no/website/components/layout/header/Header.tsx

@@ -1,12 +1,12 @@
+import { amplitudeLogNavigation } from "@/logging";
+import { MagnifyingGlassIcon } from "@navikt/aksel-icons";
+import { Button } from "@navikt/ds-react";
 import cl from "clsx";
 import Logo from "components/assets/Logo";
 import { Hamburger } from "components/layout/header/Hamburger";
+import dynamic from "next/dynamic";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { logNav } from "../..";
-import { Button } from "@navikt/ds-react";
-import dynamic from "next/dynamic";
-import { MagnifyingGlassIcon } from "@navikt/aksel-icons";
 
 export const GlobalSearch = dynamic(() => import("./search"), {
   loading: () => (
@@ -46,11 +46,7 @@ const LinkElement = ({ name, href, prefetch = undefined }) => {
           }
         )}
         onClick={(e) =>
-          logNav(
-            "header",
-            window.location.pathname,
-            e.currentTarget.getAttribute("href")
-          )
+          amplitudeLogNavigation("header", e.currentTarget.getAttribute("href"))
         }
       >
         {name}
@@ -87,9 +83,8 @@ export const Header = ({
               href="/"
               passHref
               onClick={(e) =>
-                logNav(
+                amplitudeLogNavigation(
                   "header",
-                  window.location.pathname,
                   e.currentTarget.getAttribute("href")
                 )
               }

aksel.nav.no/website/components/layout/header/search/HitCollection.tsx

@@ -1,9 +1,9 @@
 import { GroupedHitsT, SearchHitT, searchOptions } from "@/types";
 import { Heading } from "@navikt/ds-react";
+import cl from "clsx";
 import { Tag } from "components/sanity-modules/frontpage-blocks/Tag";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { Hit } from "./Hit";
-import cl from "clsx";
 
 export function CollectionMapper({
   groups,
@@ -28,7 +28,8 @@ export function CollectionMapper({
           ) => {
             const prev = arr.slice(0, index);
             const total =
-              prev.reduce((prev, cur) => prev + cur[1].length, 0) + startIndex;
+              prev.reduce((prev2, cur) => prev2 + cur[1].length, 0) +
+              startIndex;
 
             return (
               <Collection

aksel.nav.no/website/components/layout/header/search/hooks/useSearch.ts

@@ -1,10 +1,10 @@
+import { amplitude, AmplitudeEvents } from "@/logging";
 import { allArticleDocuments } from "@/sanity/config";
 import { SearchResultsT } from "@/types";
+import { debounce } from "@navikt/ds-react";
 import { useMemo, useState } from "react";
 import useSWRImmutable from "swr/immutable";
 import { createSearchResult, formatResults, fuseSearch } from "../utils";
-import { debounce } from "@navikt/ds-react";
-import { logSearch } from "@/utils";
 
 export const useSearch = () => {
   const [fuseResults, setFuseResults] = useState<SearchResultsT>(null);
@@ -35,7 +35,7 @@ export const useSearch = () => {
           ...createSearchResult(formatedResults, rawResults),
           query: value,
         });
-        logSearch({
+        amplitude.track(AmplitudeEvents.søk, {
           type: "standard",
           searchedFromUrl: window.location.pathname,
           query: value,

aksel.nav.no/website/components/layout/header/search/providers/SearchLoggingProvider.tsx

@@ -1,4 +1,4 @@
-import { logSearch } from "@/utils";
+import { AmplitudeEvents, amplitude } from "@/logging";
 import { createContext, useCallback, useContext } from "react";
 import { useSearch } from "../hooks";
 import { SearchContext } from "./SearchProvider";
@@ -32,7 +32,7 @@ export const SearchLoggingProvider = ({
         accuracy: (100 - index / context?.results?.totalHits).toFixed(0),
         topResult: index <= context?.results?.topResults?.length,
       };
-      logSearch(data);
+      amplitude.track(AmplitudeEvents.søk, data);
     },
     [
       query,

aksel.nav.no/website/components/layout/sidebar/Sidebar.tsx

@@ -1,5 +1,5 @@
+import { amplitudeLogNavigation } from "@/logging";
 import { AkselSidebarT } from "@/types";
-import { logNav } from "@/utils";
 import {
   ChevronDownIcon,
   SparklesIcon,
@@ -15,22 +15,19 @@ import { useSection } from "./useSection";
 
 const NavItem = ({
   link,
-  asPath,
 }: {
   link: { heading: string; slug: string; kategori: string; tag?: string };
-  asPath: string;
 }) => {
-  const isActive = asPath === `/${link.slug}`;
+  const { asPath } = useRouter();
+  const isActive = asPath.split("#")[0] === `/${link.slug}`;
+
   return (
     <li>
       <Link
+        aria-current={isActive ? "page" : undefined}
         href={`/${link.slug}`}
         onClick={(e) => {
-          logNav(
-            "meny",
-            window.location.pathname,
-            e.currentTarget.getAttribute("href")
-          );
+          amplitudeLogNavigation("meny", e.currentTarget.getAttribute("href"));
         }}
         className={cl(
           "hover:text-deepblue-800 focus-visible:shadow-focus text-medium pr-05 relative flex overflow-hidden py-1 pl-4 leading-snug before:rounded-full hover:before:transition-colors focus:outline-none focus-visible:z-10 focus-visible:rounded-sm",
@@ -81,7 +78,6 @@ const Dropdown = ({
   links: AkselSidebarT;
 }) => {
   const [open, setOpen] = useState(true);
-  const { asPath } = useRouter();
 
   return (
     <li className="peer w-full peer-data-[open=true]:mt-6" data-open={open}>
@@ -107,7 +103,7 @@ const Dropdown = ({
 
       <ul hidden={!open} className="pl-2">
         {links.map((z) => (
-          <NavItem link={z} key={z?.heading} asPath={asPath} />
+          <NavItem link={z} key={z?.heading} />
         ))}
       </ul>
     </li>

aksel.nav.no/website/components/sanity-modules/ComponentOverview.tsx

@@ -1,10 +1,10 @@
-import { Heading } from "@navikt/ds-react";
-import Nextlink from "next/link";
-import cl from "clsx";
-import Image from "next/legacy/image";
-import { StatusTag } from "components/website-modules/StatusTag";
-import { ArticleListT } from "@/types";
 import { urlFor } from "@/sanity/interface";
+import { ArticleListT } from "@/types";
+import { Heading } from "@navikt/ds-react";
+import cl from "clsx";
+import { StatusTag } from "components/website-modules/StatusTag";
+import Image from "next/legacy/image";
+import Nextlink from "next/link";
 
 const ComponentOverview = ({ node }: { node: ArticleListT }) => {
   if (!node || node.length === 0) {
@@ -26,6 +26,16 @@ const ComponentOverview = ({ node }: { node: ArticleListT }) => {
       } else if (b?.status?.tag === "deprecated") {
         return -1;
       }
+
+      if (a.sidebarindex !== null || b.sidebarindex !== null) {
+        if (a.sidebarindex !== null && b.sidebarindex !== null) {
+          return a.sidebarindex - b.sidebarindex;
+        } else if (a.sidebarindex !== null) {
+          return -1;
+        } else {
+          return 1;
+        }
+      }
       return a?.heading?.localeCompare(b?.heading);
     });
 

aksel.nav.no/website/components/sanity-modules/Tabell.stories.tsx

@@ -0,0 +1,39 @@
+import { AkselTheme, getKey } from "@/sb-util";
+import type { Meta, StoryObj } from "@storybook/react";
+import Tabell from "./Tabell";
+
+const meta = {
+  title: "Sanity-modules/Tabell",
+  component: Tabell,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Tabell>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const args = {
+  node: {
+    rows: [
+      {
+        _key: getKey(),
+        cells: ["Tablehead 1", "Tablehead 2", "Tablehead 3"],
+      },
+      {
+        _key: getKey(),
+        cells: ["Cell 1", "Cell 2", "Cell 3"],
+      },
+      {
+        _key: getKey(),
+        cells: ["Cell 1", "Cell 2", "Cell 3"],
+      },
+    ],
+  },
+};
+export const Aksel: Story = {
+  args,
+  decorators: [AkselTheme],
+};
+
+export const Designsystem: Story = {
+  args,
+};

aksel.nav.no/website/components/sanity-modules/cards/ArtikkelCard.tsx

@@ -1,5 +1,6 @@
 import { withErrorBoundary } from "@/error-boundary";
 
+import { amplitudeLogNavigation } from "@/logging";
 import {
   AkselGodPraksisDocT,
   ResolveContributorsSingleT,
@@ -9,7 +10,7 @@ import {
 import { BodyShort, Detail, Heading } from "@navikt/ds-react";
 import { useFormatedDate } from "components/website-modules/utils/getDate";
 import NextLink from "next/link";
-import { abbrName, logNav } from "../..";
+import { abbrName } from "../..";
 
 const ArtikkelCard = ({
   slug,
@@ -42,9 +43,8 @@ const ArtikkelCard = ({
         passHref
         className="after:absolute after:inset-0 after:z-10 after:rounded-lg focus:outline-none"
         onClick={(e) =>
-          logNav(
+          amplitudeLogNavigation(
             "artikkel-kort",
-            window.location.pathname,
             e.currentTarget.getAttribute("href")
           )
         }

aksel.nav.no/website/components/sanity-modules/cards/BloggCard.tsx

@@ -1,9 +1,10 @@
 import { withErrorBoundary } from "@/error-boundary";
+import { amplitudeLogNavigation } from "@/logging";
 import { AkselBloggDocT, ResolveContributorsT, ResolveSlugT } from "@/types";
+import { getAuthors } from "@/utils";
 import { BodyLong, BodyShort, Heading, Link } from "@navikt/ds-react";
 import { useFormatedDate } from "components/website-modules/utils/getDate";
 import NextLink from "next/link";
-import { getAuthors, logNav } from "@/utils";
 
 const BloggCard = ({
   blog,
@@ -21,9 +22,8 @@ const BloggCard = ({
           <Link
             className="text-deepblue-500 underline hover:no-underline"
             onClick={(e) =>
-              logNav(
+              amplitudeLogNavigation(
                 "blogg-card",
-                window.location.pathname,
                 e.currentTarget.getAttribute("href")
               )
             }

aksel.nav.no/website/components/sanity-modules/cards/GodPraksisCard.tsx

@@ -1,7 +1,7 @@
 import { withErrorBoundary } from "@/error-boundary";
+import { amplitudeLogNavigation } from "@/logging";
 import { urlFor } from "@/sanity/interface";
 import { AkselTemaT } from "@/types";
-import { logNav } from "@/utils";
 import { BodyShort } from "@navikt/ds-react";
 import cl from "clsx";
 import Image from "next/legacy/image";
@@ -33,11 +33,7 @@ const GodPraksisCard = ({ node }: { node: AkselTemaT }) => {
         href={`/god-praksis/${node.slug.current}`}
         passHref
         onClick={(e) =>
-          logNav(
-            "card",
-            window.location.pathname,
-            e.currentTarget.getAttribute("href")
-          )
+          amplitudeLogNavigation("card", e.currentTarget.getAttribute("href"))
         }
         className="navds-heading--medium text-deepblue-700 navds-heading  mb-4 underline after:absolute after:inset-0 after:rounded-lg focus:outline-none group-hover:no-underline"
       >