Version Packages (#2746)

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

.eslintrc.js

@@ -46,7 +46,8 @@ module.exports = {
     },
     {
       files: ["**/*.test.*", "**/__tests__/*"],
-      extends: ["plugin:jest/recommended", "plugin:testing-library/react"],
+      plugins: ["vitest"],
+      extends: ["plugin:vitest/recommended", "plugin:testing-library/react"],
     },
 
     {

.github/PULL_REQUEST_TEMPLATE.md

@@ -21,7 +21,7 @@ add links to project-tasks, slack discussions etc here
 - Check that only needed components and types are exported from `@navikt/core/react/src/index.ts`
 - Add JSDoc to component (see other components for reference)
 - Create storybook-stories for relevant component variations and compositions. Stories are used for [visual regression testing](https://www.chromatic.com/docs/), so make sure they are complete.
-- Is the component sufficiently complex to warrant tests? Add some unit-tests for jest.
+- Is the component sufficiently complex to warrant tests? Add some unit-tests for vitest.
 
 #### Component-updates 🎉
 

.github/workflows/aksel-prod.yml

@@ -75,7 +75,7 @@ jobs:
         run: yarn boot
 
       - name: Tests
-        run: yarn workspace aksel.nav.no test
+        run: yarn workspace website test
 
       - name: Build application
         run: yarn workspace aksel.nav.no build:next

.github/workflows/chromatic.yml

@@ -11,6 +11,10 @@ on:
     paths:
       - "@navikt/**"
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
   visual_regression_test:
     if: ${{ !contains(github.event.pull_request.labels.*.name, 'ignore-chromatic') }}
@@ -55,7 +59,9 @@ jobs:
           exitZeroOnChanges: false
           buildScriptName: "build:storybook"
           onlyChanged: true
+          untraced: "**/package.json|yarn.lock|**/*.md"
           externals: \@navikt/core/css/**/*.css
+          traceChanged: true
         env:
           STORYBOOK_GITHUB_SHA: ${{ github.sha }}
 

.github/workflows/release.yml

@@ -2,6 +2,9 @@ name: Release
 
 on:
   push:
+    paths:
+      - ".changeset/**"
+      - "@navikt/**"
     branches:
       - main
   workflow_dispatch:

.github/workflows/update-article-views.yml

@@ -0,0 +1,42 @@
+name: Redeploy Naisjob (update-article-views)
+on:
+  workflow_dispatch:
+jobs:
+  execute:
+    runs-on: ubuntu-latest
+    permissions:
+      packages: "write"
+      contents: "read"
+      id-token: "write"
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 1
+      - uses: denoland/setup-deno@v1
+        with:
+          deno-version: v1.x
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-build-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-build-
+      - name: add tokens to .env
+        run: |
+          echo "SANITY_WRITE_KEY=${{ secrets.SANITY_UTILITY_WRITE }}" >> scripts/article-views/.env
+      - uses: nais/docker-build-push@v0
+        id: docker-push
+        with:
+          team: designsystem
+          push_image: true
+          dockerfile: scripts/article-views/Dockerfile.update-article-views
+          project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}
+          identity_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}
+      - name: start naisjob prod-gcp
+        uses: nais/deploy/actions/deploy@master
+        env:
+          APIKEY: ${{ secrets.NAIS_DEPLOY_APIKEY }}
+          RESOURCE: scripts/article-views/nais-update-views-job.yml
+          CLUSTER: prod-gcp
+          IMAGE: ${{ steps.docker-push.outputs.image }}

.prettierignore

@@ -1,5 +1,5 @@
-**/nais-dev.yaml
-**/nais-prod.yaml
+**/nais*.yaml
+**/nais*.yml
 **/codemod/**/tests/**/*.js
 node_modules
 .next

.storybook/main.ts

@@ -1,7 +1,7 @@
 import { mergeConfig } from "vite";
 import turbosnap from "vite-plugin-turbosnap";
 
-module.exports = {
+export default {
   staticDirs: ["./public"],
 
   stories: () => [

.storybook/preview.jsx

@@ -10,7 +10,7 @@ export const parameters = {
         "Getting started",
         "ds-react",
         ["Primitives"],
-        ["Default"],
+        ["Default", "Controls"],
         "Aksel-icons",
       ],
     },

.vscode/extensions.json

@@ -0,0 +1,13 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "denoland.vscode-deno",
+    "esbenp.prettier-vscode",
+    "github.vscode-github-actions",
+    "ms-playwright.playwright",
+    "sanity-io.vscode-sanity",
+    "stylelint.vscode-stylelint",
+    "vunguyentuan.vscode-css-variables",
+    "bradlc.vscode-tailwindcss"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,15 @@
+{
+  "cssVariables.lookupFiles": ["@navikt/core/css/dist/index.css"],
+  "eslint.problems.shortenToSingleLine": true,
+  "deno.enablePaths": ["scripts/article-views", "scripts/changelog"],
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "deno.lint": true,
+  "files.watcherExclude": {
+    "**/.yarn/**": true,
+    "**/dist": true,
+    "**/esm": true,
+    "**/cjs": true
+  },
+  "playwright.reuseBrowser": true,
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @navikt/aksel-icons
 
+## 6.1.0
+
+## 6.0.0
+
+### Major Changes
+
+- ESM: ds-react og aksel-icons støtter nå native ESM 🎉 ([#2623](https://github.com/navikt/aksel/pull/2623))
+
+### Minor Changes
+
+- SSR: ds-react og aksel-icons støtter nå `use client` og kan brukes i nextjs app-router uten lokal re-eksportering. ([#2623](https://github.com/navikt/aksel/pull/2623))
+
+## 5.18.3
+
+## 5.18.2
+
+## 5.18.1
+
+## 5.18.0
+
+## 5.17.5
+
+## 5.17.4
+
+## 5.17.3
+
+## 5.17.2
+
+## 5.17.1
+
+## 5.17.0
+
+## 5.16.0
+
+### Patch Changes
+
+- Ikoner: Nytt ikon `LocationPin` ✨ ([#2672](https://github.com/navikt/aksel/pull/2672))
+
 ## 5.15.1
 
 ## 5.15.0

@navikt/aksel-icons/__tests__/validate-config.test.ts

@@ -1,7 +1,8 @@
-const fastglob = require("fast-glob");
-const path = require("path");
-const jsYaml = require("js-yaml");
-const fs = require("fs");
+import fastglob from "fast-glob";
+import fs from "fs";
+import jsYaml from "js-yaml";
+import path from "path";
+import { describe, expect, test } from "vitest";
 
 const basePath = path.resolve(__dirname, "../icons");
 
@@ -11,7 +12,7 @@ const ymlList = fastglob
 
 describe(`Each icons YML-config is valid`, () => {
   ymlList.forEach((file) => {
-    it(`${file} has valid YML-config`, () => {
+    test(`${file} has valid YML-config`, () => {
       const ymlData = jsYaml.load(fs.readFileSync(`${basePath}/${file}`), {
         schema: jsYaml.JSON_SCHEMA,
       });

@navikt/aksel-icons/__tests__/validate-files.test.ts

@@ -1,5 +1,6 @@
-const fastglob = require("fast-glob");
-const path = require("path");
+import fastglob from "fast-glob";
+import path from "path";
+import { describe, expect, test } from "vitest";
 
 const basePath = path.resolve(__dirname, "../icons");
 
@@ -12,7 +13,7 @@ const ymlList = fastglob
   .map((fileN) => path.basename(fileN));
 
 describe(`Each SVG-file has a matching YML file`, () => {
-  it(`must have a corresponding YML file`, () => {
+  test(`must have a corresponding YML file`, () => {
     expect(
       ymlList
         .map((yml) => yml.replace(".yml", ".svg"))
@@ -22,7 +23,7 @@ describe(`Each SVG-file has a matching YML file`, () => {
 });
 
 describe(`Each YML-file has a matching SVG file`, () => {
-  it(`must have a corresponding SVG file`, () => {
+  test(`must have a corresponding SVG file`, () => {
     expect(
       svgList
         .map((svg) => svg.replace(".svg", ".yml"))

@navikt/aksel-icons/__tests__/validate-svg-parsing.test.ts

@@ -1,3 +1,4 @@
+import { describe, expect, test } from "vitest";
 import { parseIcon } from "../config/parse-svg";
 
 describe(`SVG should be correctly parsed`, () => {
@@ -27,7 +28,7 @@ describe(`SVG should be correctly parsed`, () => {
   </svg>
   `;
 
-  it("a", () => {
+  test("a", () => {
     expect(parseIcon(simpleSvg)).toEqual(simpleSvgResult);
     expect(parseIcon(advancedSvg)).toEqual(advancedSvgResult);
   });

@navikt/aksel-icons/__tests__/validate-svg.test.ts

@@ -4,6 +4,7 @@ import { select, selectAll } from "hast-util-select";
 import { basename } from "path";
 import parse from "rehype-parse";
 import { unified } from "unified";
+import { describe, expect, test } from "vitest";
 
 const basePath = "./icons";
 
@@ -18,39 +19,44 @@ describe(`Each icons has a valid code`, () => {
         .use(parse, { fragment: true, space: "svg" })
         .parse(readFileSync(`${basePath}/${file}`));
 
-      it(`has valid attributes on root-node`, () => {
-        const properties = Object.keys(
-          select(":root", iconAst).properties,
-        ).sort();
+      test(`has valid attributes on root-node`, () => {
+        const root = select(":root", iconAst);
+        const properties =
+          root && root.properties ? Object.keys(root.properties).sort() : [];
 
         expect(properties).toStrictEqual(
           ["viewBox", "xmlns", "height", "width", "fill"].sort(),
         );
       });
 
-      it(`has valid xml-attr`, () => {
-        const xmlns = select(":root", iconAst).properties.xmlns;
+      test(`has valid xml-attr`, () => {
+        const root = select(":root", iconAst);
+        const xmlns = root && root.properties ? root.properties.xmlns : null;
         expect(xmlns).toBe("http://www.w3.org/2000/svg");
       });
 
-      it(`has valid viewbox`, () => {
-        const viewbox = select(":root", iconAst).properties.viewBox;
+      test(`has valid viewbox`, () => {
+        const root = select(":root", iconAst);
+        const viewbox =
+          root && root.properties ? root.properties.viewBox : null;
         expect(viewbox).toBe("0 0 24 24");
       });
 
-      it(`root fill is none`, () => {
-        const fill = select(":root", iconAst).properties.fill;
+      test(`root fill is none`, () => {
+        const root = select(":root", iconAst);
+        const fill = root && root.properties ? root.properties.fill : null;
         expect(fill).toBe("none");
       });
 
-      it(`has valid width and height`, () => {
-        const width = select(":root", iconAst).properties.width;
-        const height = select(":root", iconAst).properties.height;
+      test(`has valid width and height`, () => {
+        const root = select(":root", iconAst);
+        const width = root && root.properties ? root.properties.width : null;
+        const height = root && root.properties ? root.properties.height : null;
         expect(width).toBe("24");
         expect(height).toBe("24");
       });
 
-      it(`has valid stroke`, () => {
+      test(`has valid stroke`, () => {
         const nodes = selectAll("*", iconAst);
 
         nodes.forEach((n) => {
@@ -59,7 +65,7 @@ describe(`Each icons has a valid code`, () => {
         });
       });
 
-      it(`has valid stroke-width`, () => {
+      test(`has valid stroke-width`, () => {
         const nodes = selectAll("*", iconAst);
         nodes.forEach((n) => {
           n.properties?.strokeWidth &&

@navikt/aksel-icons/config/template.js

@@ -25,6 +25,7 @@ const template = (variables, { tpl }) => {
   };
 
   return tpl`
+"use client";
 ${imports};
 
 ${variables.interfaces};

@navikt/aksel-icons/figma-plugin/package.json

@@ -13,23 +13,23 @@
   "dependencies": {
     "@navikt/ds-css": "*",
     "@navikt/ds-react": "*",
-    "fuse.js": "^6.6.2",
+    "fuse.js": "^7.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@figma/plugin-typings": "^1.62.0",
-    "@svgr/core": "^6.5.1",
+    "@figma/plugin-typings": "^1.84.0",
+    "@svgr/core": "^8.1.0",
     "@types/node": "^18.15.11",
-    "@types/postcss-url": "^10.0.0",
+    "@types/postcss-url": "^10.0.4",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
-    "@vitejs/plugin-react": "^3.1.0",
+    "@vitejs/plugin-react": "^4.2.1",
     "postcss": "^8.4.31",
     "postcss-url": "^10.1.3",
     "typescript": "^5.1.6",
-    "vite": "^4.5.1",
-    "vite-plugin-singlefile": "^0.13.3",
-    "vite-plugin-svgr": "^2.4.0"
+    "vite": "^5.0.12",
+    "vite-plugin-singlefile": "^1.0.0",
+    "vite-plugin-svgr": "^4.2.0"
   }
 }

@navikt/aksel-icons/figma-plugin/src/ui/App.tsx

@@ -170,7 +170,7 @@ const App = () => {
                               className="icon-classname icon-button"
                             >
                               <T
-                                font-size="2rem"
+                                fontSize="2rem"
                                 title={i.id}
                                 id={`icon-id-${i.id}`}
                               />

@navikt/aksel-icons/icons/LocationPin.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.58075 5.58058C10.0215 3.13981 13.9788 3.13981 16.4196 5.58058C18.829 7.98999 18.7208 11.7547 16.3826 14.4592C15.8985 15.0192 14.6522 16.5427 13.5371 17.9135C12.9773 18.6017 12.4472 19.2555 12.0572 19.7371L12.0002 19.8075L11.9432 19.7371C11.5531 19.2555 11.0231 18.6017 10.4633 17.9135C9.34813 16.5427 8.1019 15.0192 7.61778 14.4592C5.27952 11.7547 5.17135 7.98999 7.58075 5.58058ZM12.0002 21C12.5836 21.4713 12.5836 21.4713 12.5837 21.4712L12.0002 21ZM11.4167 21.4712L11.416 21.4704L11.2433 21.2567C11.1321 21.1193 10.9723 20.9217 10.7775 20.6811C10.3879 20.2 9.85856 19.5472 9.29965 18.8601C8.17735 17.4805 6.9487 15.9788 6.48307 15.4403C3.72084 12.2453 3.46216 7.57786 6.52009 4.51992C9.54666 1.49336 14.4537 1.49336 17.4802 4.51992C20.5382 7.57786 20.2795 12.2453 17.5173 15.4403C17.0516 15.9788 15.823 17.4805 14.7007 18.8601C14.1418 19.5472 13.6125 20.2 13.2229 20.6811C13.0281 20.9217 12.8682 21.1193 12.7571 21.2567L12.5837 21.4712C12.4413 21.6475 12.2268 21.75 12.0002 21.75C11.7736 21.75 11.5591 21.6475 11.4167 21.4712ZM12.0002 21L11.4167 21.4712C11.4167 21.4713 11.4168 21.4713 12.0002 21ZM9.75 10C9.75 8.75736 10.7574 7.75 12 7.75C13.2426 7.75 14.25 8.75736 14.25 10C14.25 11.2426 13.2426 12.25 12 12.25C10.7574 12.25 9.75 11.2426 9.75 10ZM12 6.25C9.92893 6.25 8.25 7.92893 8.25 10C8.25 12.0711 9.92893 13.75 12 13.75C14.0711 13.75 15.75 12.0711 15.75 10C15.75 7.92893 14.0711 6.25 12 6.25Z" fill="#23262A"/>
+</svg>

@navikt/aksel-icons/icons/LocationPin.yml

@@ -0,0 +1,13 @@
+name: LocationPin
+category: Transportation
+sub_category: Travel
+keywords:
+  - kart
+  - pin
+  - sted
+  - map
+  - location
+  - lokasjon
+variant: Stroke
+updated_at: 26.01.2024
+created_at: 07.03.2023

@navikt/aksel-icons/icons/LocationPinFill.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.7572 21.2567C12.8684 21.1193 13.0282 20.9217 13.223 20.6811C13.6126 20.2 14.1419 19.5472 14.7008 18.8601C15.8231 17.4805 17.0518 15.9788 17.5174 15.4403C20.2796 12.2453 20.5383 7.57786 17.4804 4.51992C14.4538 1.49336 9.54679 1.49336 6.52022 4.51992C3.46229 7.57786 3.72097 12.2453 6.4832 15.4403C6.94883 15.9788 8.17749 17.4805 9.29978 18.8601C9.85869 19.5472 10.388 20.2 10.7776 20.6811C10.9724 20.9217 11.1323 21.1193 11.2434 21.2567L11.4162 21.4704L11.4168 21.4712C11.5592 21.6475 11.7737 21.75 12.0003 21.75C12.2269 21.75 12.4414 21.6475 12.5838 21.4712L12.7572 21.2567ZM12 6.25C9.92893 6.25 8.25 7.92893 8.25 10C8.25 12.0711 9.92893 13.75 12 13.75C14.0711 13.75 15.75 12.0711 15.75 10C15.75 7.92893 14.0711 6.25 12 6.25Z" fill="#23262A"/>
+</svg>

@navikt/aksel-icons/icons/LocationPinFill.yml

@@ -0,0 +1,13 @@
+name: LocationPinFill
+category: Transportation
+sub_category: Travel
+keywords:
+  - kart
+  - pin
+  - sted
+  - map
+  - location
+  - lokasjon
+variant: Fill
+updated_at: 26.01.2024
+created_at: 07.03.2023

@navikt/aksel-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-icons",
-  "version": "5.15.1",
+  "version": "6.1.0",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/ikoner",
   "repository": {
@@ -20,24 +20,28 @@
     "access": "public",
     "provenance": true
   },
-  "sideEffects": [
-    "*.svg"
-  ],
+  "sideEffects": false,
   "license": "MIT",
   "main": "./dist/react/cjs/index.js",
   "module": "./dist/react/esm/index.js",
   "typings": "./dist/react/esm/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/react/esm/index.d.ts",
-      "import": "./dist/react/esm/index.js",
-      "require": "./dist/react/cjs/index.js"
+      "import": {
+        "types": "./dist/react/esm/index.d.ts",
+        "default": "./dist/react/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/react/cjs/index.d.ts",
+        "default": "./dist/react/cjs/index.js"
+      }
     },
-    "./svg/*.svg": "./dist/svg/*.svg",
     "./metadata": {
       "types": "./dist/metadata.d.ts",
       "default": "./dist/metadata.js"
-    }
+    },
+    "./svg/*.svg": "./dist/svg/*.svg",
+    "./package.json": "./package.json"
   },
   "typesVersions": {
     "*": {
@@ -55,10 +59,12 @@
     "parse-svg": "node -e 'require(\"./config/parse-svg.js\").main()'",
     "copy": "copyfiles util/* src",
     "update-metadata": "node config/metadata.js",
-    "build": "yarn copy && yarn create-icons && concurrently \"tsc\" \"tsc -p tsconfig.esm.json\" && node config/cleanTypes.js && yarn update-metadata && yarn parse-svg",
-    "test": "NODE_OPTIONS=--experimental-vm-modules jest",
+    "write-packagejson": "echo '{\"type\": \"module\"}' > dist/react/esm/package.json",
+    "build": "yarn copy && yarn create-icons && concurrently \"tsc\" \"tsc -p tsconfig.esm.json && tsc-alias -p tsconfig.esm.json && yarn write-packagejson\" && node config/cleanTypes.js && yarn update-metadata && yarn parse-svg",
     "fetch-new:icons": "node config/figma/index.mjs",
-    "zip:icons": "node config/zip.js"
+    "zip:icons": "node config/zip.js",
+    "test": "vitest run",
+    "test:watch": "vitest watch"
   },
   "devDependencies": {
     "@svgr/cli": "6.5.1",
@@ -69,22 +75,14 @@
     "dotenv": "^10.0.0",
     "fast-glob": "3.2.11",
     "hast-util-select": "5.0.5",
-    "jest": "^29.0.0",
     "js-yaml": "^4.1.0",
     "lodash.camelcase": "4.3.0",
     "lodash.startcase": "4.4.0",
     "react": "^18.0.0",
     "rehype-parse": "8.0.4",
+    "tsc-alias": "1.8.8",
     "typescript": "^5.1.6",
-    "unified": "10.1.2"
-  },
-  "jest": {
-    "transformIgnorePatterns": [
-      "node_modules/unified/*"
-    ],
-    "testMatch": [
-      "**/__tests__/*.js",
-      "**/__tests__/*.mjs"
-    ]
+    "unified": "10.1.2",
+    "vitest": "^1.2.2"
   }
 }

@navikt/aksel-icons/tsconfig.esm.json

@@ -3,7 +3,11 @@
   "compilerOptions": {
     "outDir": "./dist/react/esm",
     "module": "esnext",
-    "sourceMap": false,
+    "sourceMap": true,
     "declaration": true
+  },
+  "tsc-alias": {
+    "resolveFullPaths": true,
+    "verbose": false
   }
 }

@navikt/aksel-icons/tsconfig.json

@@ -3,7 +3,9 @@
   "compilerOptions": {
     "outDir": "./dist/react/cjs",
     "module": "commonjs",
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "declaration": true,
+    "sourceMap": true
   },
   "exclude": ["./util", "./__tests__", "**/*.stories.*"],
   "include": ["./src"]

@navikt/aksel-stylelint/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @navikt/aksel-stylelint
 
+## 6.1.0
+
+## 6.0.0
+
+### Major Changes
+
+- Textarea: Fjernet div med klassen navds-textarea\_\_wrapper ([#2623](https://github.com/navikt/aksel/pull/2623))
+
+## 5.18.3
+
+## 5.18.2
+
+## 5.18.1
+
+## 5.18.0
+
+## 5.17.5
+
+## 5.17.4
+
+## 5.17.3
+
+## 5.17.2
+
+## 5.17.1
+
+## 5.17.0
+
+## 5.16.0
+
 ## 5.15.1
 
 ## 5.15.0

@navikt/aksel-stylelint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-stylelint",
-  "version": "5.15.1",
+  "version": "6.1.0",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
   "repository": {
@@ -26,7 +26,7 @@
     "/dist"
   ],
   "scripts": {
-    "test": "jest",
+    "test": "yarn build && node --import tsx --test ./dist/**/*.test.js",
     "copy-css": "node -e \"require('fs').copyFileSync('../core/css/dist/index.css','dist/index.css')\"",
     "copy-tokens": "node -e \"require('fs').copyFileSync('../core/css/tokens.json','dist/tokens.json')\"",
     "copy": "yarn copy-css && yarn copy-tokens",
@@ -35,26 +35,15 @@
     "dev": "yarn watch:lint"
   },
   "devDependencies": {
-    "@navikt/ds-css": "^5.15.1",
-    "@navikt/ds-tokens": "^5.15.1",
-    "@types/jest": "^29.0.0",
+    "@navikt/ds-css": "^6.1.0",
+    "@navikt/ds-tokens": "^6.1.0",
     "concurrently": "7.2.1",
     "copyfiles": "2.4.1",
-    "jest": "^29.0.0",
-    "jest-preset-stylelint": "^6.1.0",
     "postcss-selector-parser": "^6.0.13",
     "postcss-value-parser": "^4.2.0",
     "stylelint": "^14.8.5",
-    "ts-jest": "^29.0.0",
+    "stylelint-test-rule-node": "^0.2.1",
+    "tsx": "^4.7.1",
     "typescript": "^5.1.6"
-  },
-  "jest": {
-    "preset": "jest-preset-stylelint",
-    "testMatch": [
-      "**/*.test.ts"
-    ],
-    "transform": {
-      "^.+\\.ts?$": "ts-jest"
-    }
   }
 }

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

@@ -50,4 +50,14 @@ export const deprecations: DeprecatedList = [
     message:
       "There is no 1:1 replacement for this, the size will depend on the 'poster' prop and the viewport width",
   },
+  {
+    classes: ["navds-grid", "navds-content-container"],
+    deprecatePrefix: true,
+    message:
+      "Components were replaced by `HGrid` and `Page.Block` in version 6",
+  },
+  {
+    classes: ["navds-textarea__wrapper"],
+    message: "Removed in v6.0.0",
+  },
 ];

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

@@ -1,7 +1,7 @@
-import { getTestRule } from "jest-preset-stylelint";
+import { testRule } from "stylelint-test-rule-node";
 import rule, { messages } from ".";
 
-getTestRule()({
+testRule({
   plugins: ["./dist/index.js"],
   ruleName: rule.ruleName,
   config: true,

@navikt/aksel-stylelint/src/rules/aksel-design-token-no-component-reference/index.test.ts

@@ -1,7 +1,7 @@
-import { getTestRule } from "jest-preset-stylelint";
+import { testRule } from "stylelint-test-rule-node";
 import rule, { messages } from ".";
 
-getTestRule()({
+testRule({
   plugins: ["./dist/index.js"],
   ruleName: rule.ruleName,
   config: true,

@navikt/aksel-stylelint/src/rules/aksel-design-token-no-global-override/index.test.ts

@@ -1,7 +1,7 @@
-import { getTestRule } from "jest-preset-stylelint";
+import { testRule } from "stylelint-test-rule-node";
 import rule, { messages } from ".";
 
-getTestRule()({
+testRule({
   plugins: ["./dist/index.js"],
   ruleName: rule.ruleName,
   config: true,

@navikt/aksel-stylelint/src/rules/aksel-no-class-override/index.test.ts

@@ -1,7 +1,7 @@
-import { getTestRule } from "jest-preset-stylelint";
+import { testRule } from "stylelint-test-rule-node";
 import rule, { messages } from ".";
 
-getTestRule()({
+testRule({
   plugins: ["./dist/index.js"],
   ruleName: rule.ruleName,
   config: true,

@navikt/aksel-stylelint/src/rules/aksel-no-deprecated-classes/index.test.ts

@@ -1,8 +1,8 @@
-import { getTestRule } from "jest-preset-stylelint";
+import { testRule } from "stylelint-test-rule-node";
 import rule, { messages } from ".";
 import { deprecations } from "../../deprecations";
 
-getTestRule()({
+testRule({
   plugins: ["./dist/index.js"],
   ruleName: rule.ruleName,
   config: true,

@navikt/aksel-stylelint/src/rules/aksel-no-internal-tokens/index.test.ts

@@ -1,7 +1,7 @@
-import { getTestRule } from "jest-preset-stylelint";
+import { testRule } from "stylelint-test-rule-node";
 import rule, { messages } from ".";
 
-getTestRule()({
+testRule({
   plugins: ["./dist/index.js"],
   ruleName: rule.ruleName,
   config: true,

@navikt/aksel-stylelint/tsconfig.json

@@ -6,7 +6,7 @@
     "target": "es2020",
     "preserveWatchOutput": true,
     "declaration": false,
-    "types": ["node", "jest", "@types/jest"],
+    "types": ["node"],
     "outDir": "dist",
     "rootDir": "./src",
     "resolveJsonModule": true,

@navikt/aksel/CHANGELOG.md

@@ -1,5 +1,100 @@
 # @navikt/aksel
 
+## 6.1.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@6.1.0
+
+## 6.0.0
+
+### Major Changes
+
+- Chat: Fjernet deprecated props `backgroundColor` og `avatarBgColor`. Bruk prop `variant` som erstatning. ([#2623](https://github.com/navikt/aksel/pull/2623))
+
+### Patch Changes
+
+- Updated dependencies [[`636c1ad49`](https://github.com/navikt/aksel/commit/636c1ad49b8afde54b0a1105fecdc6d47f333522), [`636c1ad49`](https://github.com/navikt/aksel/commit/636c1ad49b8afde54b0a1105fecdc6d47f333522), [`636c1ad49`](https://github.com/navikt/aksel/commit/636c1ad49b8afde54b0a1105fecdc6d47f333522), [`636c1ad49`](https://github.com/navikt/aksel/commit/636c1ad49b8afde54b0a1105fecdc6d47f333522), [`636c1ad49`](https://github.com/navikt/aksel/commit/636c1ad49b8afde54b0a1105fecdc6d47f333522)]:
+  - @navikt/ds-css@6.0.0
+
+## 5.18.3
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.18.3
+
+## 5.18.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.18.2
+
+## 5.18.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.18.1
+
+## 5.18.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.18.0
+
+## 5.17.5
+
+### Patch Changes
+
+- Updated dependencies [[`dcca2a956`](https://github.com/navikt/aksel/commit/dcca2a95600152cb84c3b79ba5bb3894ac63e881)]:
+  - @navikt/ds-css@5.17.5
+
+## 5.17.4
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.17.4
+
+## 5.17.3
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.17.3
+
+## 5.17.2
+
+### Patch Changes
+
+- Updated dependencies [[`fdfdebfa9`](https://github.com/navikt/aksel/commit/fdfdebfa99e594099bcea7b5addde9cdabc727a7)]:
+  - @navikt/ds-css@5.17.2
+
+## 5.17.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.17.1
+
+## 5.17.0
+
+### Patch Changes
+
+- Updated dependencies [[`d3fb3d4d9`](https://github.com/navikt/aksel/commit/d3fb3d4d962fac028e7d803dc7c50315d48b4987)]:
+  - @navikt/ds-css@5.17.0
+
+## 5.16.0
+
+### Patch Changes
+
+- Updated dependencies [[`23c472e60`](https://github.com/navikt/aksel/commit/23c472e60b03fa07a82ac5eed9298b535f8e341c)]:
+  - @navikt/ds-css@5.16.0
+
 ## 5.15.1
 
 ### Patch Changes

@navikt/aksel/jest.config.js

@@ -1,8 +0,0 @@
-const config = {
-  transform: { "^.+\\.js?$": "ts-jest", "^.+\\.ts?$": "ts-jest" },
-  testMatch: ["**/tests/*.test.ts"],
-  verbose: true,
-  rootDir: ".",
-};
-
-module.exports = config;

@navikt/aksel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel",
-  "version": "5.15.1",
+  "version": "6.1.0",
   "description": "Aksel command line interface. Handles css-imports, codemods and more",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -18,8 +18,8 @@
     "clean": "rimraf dist",
     "build": "yarn clean && tsc -p tsconfig.json",
     "dev": "tsc --watch -p tsconfig.json",
-    "test": "yarn build && NODE_OPTIONS=--experimental-vm-modules yarn jest",
-    "test:watch": "NODE_OPTIONS=--experimental-vm-modules yarn jest --watch"
+    "test": "vitest run",
+    "test:watch": "vitest watch"
   },
   "bin": "./dist/index.js",
   "repository": {
@@ -29,7 +29,7 @@
   },
   "homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
   "dependencies": {
-    "@navikt/ds-css": "5.15.1",
+    "@navikt/ds-css": "6.1.0",
     "axios": "1.6.0",
     "chalk": "4.1.0",
     "clipboardy": "^2.3.0",
@@ -44,12 +44,9 @@
     "react-scanner": "^1.1.0"
   },
   "devDependencies": {
-    "@types/inquirer": "^9.0.3",
-    "@types/jest": "^29.0.0",
-    "jest": "^29.0.0",
     "rimraf": "3.0.2",
-    "ts-jest": "^29.0.0",
-    "typescript": "^5.1.6"
+    "typescript": "^5.1.6",
+    "vitest": "^1.2.2"
   },
   "sideEffects": false,
   "engines": {

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

@@ -87,6 +87,16 @@ export const migrations: {
       path: "v4.0.0/date/date",
     },
   ],
+  "v6.0.0": [
+    {
+      description:
+        "Removes `backgroundColor` and `avatarBgColor` properties from `Chat` and `Chat.Bubble`",
+      value: "v6-chat",
+      path: "v6.0.0/chat/chat",
+      warning:
+        "Remember to update use of `variant`-prop to match previous use of colors. If needed the component exposes css-variables for custom overrides",
+    },
+  ],
 };
 
 export function getMigrationPath(str: string) {

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

@@ -1,5 +1,6 @@
 import fs from "fs";
 import path from "path";
+import { describe, expect, test } from "vitest";
 import { getMigrationNames, getMigrationPath } from "../migrations";
 
 describe("migrations", () => {

@navikt/aksel/src/codemod/transforms/v6.0.0/chat/chat.ts

@@ -0,0 +1,75 @@
+import { getLineTerminator } from "../../../utils/lineterminator";
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  let localName = "Chat";
+
+  const root = j(file.source);
+
+  /* Finds used name for Chat component */
+  root
+    .find(j.ImportDeclaration)
+    .filter((path) => path.node.source.value === "@navikt/ds-react")
+    .forEach((imp) => {
+      imp.value.specifiers.forEach((x) => {
+        if (x.imported.name === "Chat" && x.local.name !== x.imported.name) {
+          localName = x.local.name;
+        }
+      });
+    });
+
+  root
+    .find(j.JSXElement, {
+      openingElement: {
+        name: {
+          name: localName,
+        },
+      },
+    })
+    .forEach((path) => {
+      j(path)
+        .find(j.JSXAttribute, {
+          name: {
+            name: "backgroundColor",
+          },
+        })
+        .remove();
+      j(path)
+        .find(j.JSXAttribute, {
+          name: {
+            name: "avatarBgColor",
+          },
+        })
+        .remove();
+    });
+
+  root
+    .find(j.JSXElement, {
+      openingElement: {
+        name: {
+          type: "JSXMemberExpression",
+          object: {
+            name: localName,
+          },
+          property: {
+            name: "Bubble",
+          },
+        },
+      },
+    })
+    .forEach((path) => {
+      j(path)
+        .find(j.JSXAttribute, {
+          name: {
+            name: "backgroundColor",
+          },
+        })
+        .remove();
+    });
+
+  return root.toSource(getLineTerminator(file.source));
+}

@navikt/aksel/src/codemod/transforms/v6.0.0/chat/tests/chat.test.ts

@@ -0,0 +1,12 @@
+import { check } from "../../../../utils/check";
+
+const migration = "chat";
+const fixtures = ["import-alias", "idempotent"];
+
+for (const fixture of fixtures) {
+  check(__dirname, {
+    fixture,
+    migration,
+    extension: "js",
+  });
+}

@navikt/aksel/src/codemod/transforms/v6.0.0/chat/tests/idempotent.input.js

@@ -0,0 +1,17 @@
+import {
+  Chat,
+  Button,
+} from "@navikt/ds-react";
+
+export const Demo = () => (
+  <Chat avatar="ON" name="Ola Normann" timestamp="01.01.21 14:00">
+    <Chat.Bubble>
+      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+    </Chat.Bubble>
+    <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
+    <Chat.Bubble>
+      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+      labore nisi ut.
+    </Chat.Bubble>
+  </Chat>
+);

@navikt/aksel/src/codemod/transforms/v6.0.0/chat/tests/idempotent.output.js

@@ -0,0 +1,17 @@
+import {
+  Chat,
+  Button,
+} from "@navikt/ds-react";
+
+export const Demo = () => (
+  <Chat avatar="ON" name="Ola Normann" timestamp="01.01.21 14:00">
+    <Chat.Bubble>
+      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+    </Chat.Bubble>
+    <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
+    <Chat.Bubble>
+      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+      labore nisi ut.
+    </Chat.Bubble>
+  </Chat>
+);

@navikt/aksel/src/codemod/transforms/v6.0.0/chat/tests/import-alias.input.js

@@ -0,0 +1,17 @@
+import {
+  Chat as DsChat,
+  Button,
+} from "@navikt/ds-react";
+
+export const Demo = () => (
+  <DsChat avatar="ON" name="Ola Normann" backgroundColor="#321" timestamp="01.01.21 14:00" avatarBgColor="#123" >
+    <DsChat.Bubble>
+      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+    </DsChat.Bubble>
+    <DsChat.Bubble backgroundColor="#fff">Tempor fugiat amet eu sint in in ullamco.</DsChat.Bubble>
+    <DsChat.Bubble backgroundColor="#111">
+      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+      labore nisi ut.
+    </DsChat.Bubble>
+  </DsChat>
+);

@navikt/aksel/src/codemod/transforms/v6.0.0/chat/tests/import-alias.output.js

@@ -0,0 +1,17 @@
+import {
+  Chat as DsChat,
+  Button,
+} from "@navikt/ds-react";
+
+export const Demo = () => (
+  <DsChat avatar="ON" name="Ola Normann" timestamp="01.01.21 14:00">
+    <DsChat.Bubble>
+      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+    </DsChat.Bubble>
+    <DsChat.Bubble>Tempor fugiat amet eu sint in in ullamco.</DsChat.Bubble>
+    <DsChat.Bubble>
+      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+      labore nisi ut.
+    </DsChat.Bubble>
+  </DsChat>
+);

@navikt/aksel/src/codemod/transforms/v6.0.0/chat/tests/import.input.js

@@ -0,0 +1,17 @@
+import {
+  Chat,
+  Button,
+} from "@navikt/ds-react";
+
+export const Demo = () => (
+  <Chat avatar="ON" name="Ola Normann" backgroundColor="#321" timestamp="01.01.21 14:00" avatarBgColor="#123" >
+    <Chat.Bubble>
+      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+    </Chat.Bubble>
+    <Chat.Bubble backgroundColor="#fff">Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
+    <Chat.Bubble backgroundColor="#111">
+      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+      labore nisi ut.
+    </Chat.Bubble>
+  </Chat>
+);

@navikt/aksel/src/codemod/transforms/v6.0.0/chat/tests/import.output.js

@@ -0,0 +1,17 @@
+import {
+  Chat,
+  Button,
+} from "@navikt/ds-react";
+
+export const Demo = () => (
+  <Chat avatar="ON" name="Ola Normann" timestamp="01.01.21 14:00">
+    <Chat.Bubble>
+      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+    </Chat.Bubble>
+    <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
+    <Chat.Bubble>
+      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+      labore nisi ut.
+    </Chat.Bubble>
+  </Chat>
+);

@navikt/aksel/src/codemod/utils/check.ts

@@ -2,6 +2,7 @@ import { applyTransform } from "jscodeshift/dist/testUtils";
 import fs from "node:fs";
 import path from "node:path";
 import prettier from "prettier";
+import { describe, expect, test } from "vitest";
 
 interface TestT {
   fixture: string;
@@ -15,7 +16,7 @@ export function check(
   { fixture, migration, extension = "js", options = {} }: TestT,
 ) {
   describe(migration, () => {
-    it(fixture, async () => {
+    test(fixture, async () => {
       const fixtureDir = path.join(dirName);
       const inputPath = path.join(fixtureDir, `${fixture}.input.${extension}`);
       const parser = extension;

@navikt/aksel/src/codemod/utils/tests/translate-token.test.ts

@@ -1,7 +1,6 @@
+import { describe, expect, test } from "vitest";
 import { translateToken } from "../translate-token";
 
-jest.autoMockOff();
-
 const tokens = [
   {
     name: "--navds-global-color-red-100",

@navikt/aksel/tsconfig.json

@@ -6,12 +6,13 @@
     "target": "es2015",
     "preserveWatchOutput": true,
     "declaration": false,
-    "types": ["node", "jest"],
+    "types": ["node"],
     "outDir": "dist",
     "rootDir": "./src",
     "resolveJsonModule": true,
-    "allowJs": true
+    "allowJs": true,
+    "skipLibCheck": true
   },
   "include": ["src/**/*.ts"],
-  "exclude": ["node_modules", "dist", "jest.config.js", "**/tests/**"]
+  "exclude": ["node_modules", "dist", "**/tests/**"]
 }

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,59 @@
 # @navikt/ds-css
 
+## 6.1.0
+
+## 6.0.0
+
+### Major Changes
+
+- Tokens: La til nytt brekkpunkt `2xl` for `1440px`. Alle primitives er oppdatert for å reflektere oppdateringen. Brukere av Tailwind vil måtte sjekke at overskriving av `screen: "2xl"` ikke brekker app. ([#2623](https://github.com/navikt/aksel/pull/2623))
+
+- Grid, ContentContainer: Komponenter er fjernet fra systemet. [Se migreringsguide](https://aksel.nav.no/grunnleggende/kode/migrering#dd2cfa9fb1d1). ([#2623](https://github.com/navikt/aksel/pull/2623))
+
+- CSS: Oppdatert bruk av action-farger i systemet. Dette påvirker komponentene: Button, CopyButton, Dropdown, Combobox, ConfirmationPanel, Radio, Checkbox, Search, Select, TextField, Textarea, Helptext, LinkPanel, Link, ReadMore, Stepper og Tabs. Endringen skal ikke brekke noe så lenge man ikke har overskrevet farger manuelt. ([#2623](https://github.com/navikt/aksel/pull/2623))
+
+- Tokens: Nye tokens `--a-text-action-hover`,`--a-icon-action-hover` og `--a-border-action-hover` ([#2623](https://github.com/navikt/aksel/pull/2623))
+
+- Textarea: Fjernet div med klassen navds-textarea\_\_wrapper ([#2623](https://github.com/navikt/aksel/pull/2623))
+
+## 5.18.3
+
+## 5.18.2
+
+## 5.18.1
+
+## 5.18.0
+
+## 5.17.5
+
+### Patch Changes
+
+- ExpansionCard: Padding-top for Content er justert opp 8px (medium) og 4px (small) ([#2699](https://github.com/navikt/aksel/pull/2699))
+
+## 5.17.4
+
+## 5.17.3
+
+## 5.17.2
+
+### Patch Changes
+
+- Checkbox: I noen edgecaser ved bruk av shadow-dom ble ikke checkmark sentert i Checkbox ([#2682](https://github.com/navikt/aksel/pull/2682))
+
+## 5.17.1
+
+## 5.17.0
+
+### Minor Changes
+
+- Høykontrast: Komponenter støtter nå standard høykontrast-modus på Windows ([#2680](https://github.com/navikt/aksel/pull/2680))
+
+## 5.16.0
+
+### Minor Changes
+
+- :sparkles: Combobox: Mulighet for å begrense hvor mange valg bruker kan ta ([#2260](https://github.com/navikt/aksel/pull/2260))
+
 ## 5.15.1
 
 ## 5.15.0

@navikt/core/css/accordion.css

@@ -74,7 +74,8 @@
 }
 
 .navds-accordion__header:focus-visible {
-  outline: none;
+  outline: 2px solid transparent;
+  outline-offset: 3px;
   box-shadow: var(--a-shadow-focus);
   border-radius: var(--a-border-radius-large);
 }
@@ -185,3 +186,17 @@
     transform: translateY(0);
   }
 }
+
+@media (forced-colors: active) {
+  .navds-accordion__header {
+    border: 1px solid buttonborder;
+    background-color: canvas;
+    color: canvastext;
+  }
+
+  .navds-accordion__header:hover {
+    background-color: canvas;
+    border: 1px solid highlight;
+    color: highlight;
+  }
+}

@navikt/core/css/alert.css

@@ -33,7 +33,7 @@
   font-size: 1.5rem;
   align-self: flex-start;
   height: var(--a-font-line-height-xlarge);
-  background: radial-gradient(circle, var(--a-surface-default) 50%, 0, transparent);
+  background: radial-gradient(circle, var(--a-surface-default) 47%, 0, transparent);
 }
 
 .navds-alert--small > .navds-alert__icon {
@@ -64,7 +64,7 @@
 }
 
 .navds-alert--warning > .navds-alert__icon {
-  background: radial-gradient(circle at 50% 57%, var(--a-surface-default) 32%, 0, transparent);
+  background: radial-gradient(circle at 50% 57%, var(--a-surface-default) 30%, 0, transparent);
   color: var(--ac-alert-icon-warning-color, var(--a-icon-warning));
 }
 
@@ -99,3 +99,11 @@
   flex-flow: row nowrap;
   justify-content: flex-end;
 }
+
+@media (forced-colors: active) {
+  .navds-alert {
+    border: 1px solid canvastext;
+    background-color: canvas;
+    color: canvastext;
+  }
+}

@navikt/core/css/button.css

@@ -81,7 +81,8 @@
 }
 
 .navds-button:focus-visible {
-  outline: none;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
   box-shadow: var(--a-shadow-focus);
 }
 
@@ -130,6 +131,17 @@
   color: var(--ac-button-primary-text, var(--__ac-button-primary-text, var(--a-text-on-action)));
 }
 
+@media (forced-colors: active) {
+  .navds-button.navds-button--primary {
+    background-color: highlight;
+    color: highlighttext;
+  }
+
+  .navds-button.navds-button--primary span {
+    forced-color-adjust: none;
+  }
+}
+
 .navds-button--primary:hover {
   background-color: var(--ac-button-primary-hover-bg, var(--__ac-button-primary-hover-bg, var(--a-surface-action-hover)));
 }
@@ -139,10 +151,17 @@
 }
 
 .navds-button--primary:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
   box-shadow:
     inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--__ac-button-primary-focus-border, var(--a-surface-default))),
     var(--a-shadow-focus);
 }
+@media (forced-colors: active) {
+  .navds-button--primary:focus-visible {
+    box-shadow: none;
+  }
+}
 
 @supports not selector(:focus-visible) {
   .navds-button--primary:focus {
@@ -209,6 +228,7 @@
     --ac-button-secondary-hover-bg,
     var(--__ac-button-secondary-hover-bg, var(--a-surface-action-subtle-hover))
   );
+  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-hover-border, var(--a-border-action-hover));
 }
 
 .navds-button--secondary:focus-visible {
@@ -478,6 +498,7 @@
   opacity: 0.3;
 }
 
+/* Loader overrides */
 .navds-button .navds-loader .navds-loader__foreground {
   stroke: var(--ac-button-loader-stroke, currentColor);
 }
@@ -486,3 +507,36 @@
 .navds-button--danger .navds-loader .navds-loader__background {
   stroke: var(--ac-button-primary-loader-stroke-bg, rgb(255 255 255 / 0.3));
 }
+
+@media (forced-colors: active) {
+  .navds-button:not(.navds-button--loading):where(:disabled, .navds-button--disabled) {
+    opacity: 1;
+    color: GrayText;
+  }
+
+  .navds-button {
+    border: 1px solid transparent;
+    color: ButtonText;
+    background-color: ButtonFace;
+  }
+
+  .navds-button:hover {
+    background-color: highlighttext;
+    border-color: highlight;
+    color: highlight;
+    box-shadow: none;
+  }
+
+  .navds-button:hover span {
+    forced-color-adjust: none;
+  }
+
+  .navds-button .navds-loader .navds-loader__foreground {
+    stroke: canvas;
+  }
+
+  .navds-button--primary .navds-loader .navds-loader__background,
+  .navds-button--danger .navds-loader .navds-loader__background {
+    stroke: canvastext;
+  }
+}

@navikt/core/css/chat.css

@@ -105,3 +105,16 @@
 .navds-chat--right .navds-chat__top-text--left {
   align-self: flex-start;
 }
+
+@media (forced-colors: active) {
+  .navds-chat__bubble,
+  .navds-chat__avatar {
+    border: 1px solid canvastext;
+    background-color: canvas;
+    color: canvastext;
+  }
+
+  .navds-chat__avatar svg {
+    forced-color-adjust: none;
+  }
+}

@navikt/core/css/chips.css

@@ -191,3 +191,44 @@
 .navds-chips--small .navds-chips--icon-right {
   padding-right: var(--a-spacing-05);
 }
+
+@media (forced-colors: active) {
+  .navds-chips__chip {
+    border: 1px solid transparent;
+  }
+
+  .navds-chips__chip:hover {
+    background-color: highlighttext;
+    color: highlight;
+  }
+
+  .navds-chips__chip:focus-visible {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+
+  .navds-chips__chip:where([aria-pressed="true"], :active, :hover) > span {
+    forced-color-adjust: none;
+  }
+
+  .navds-chips__toggle:active {
+    background-color: highlight;
+    color: highlighttext;
+  }
+
+  .navds-chips__toggle[aria-pressed="true"] {
+    background-color: selecteditem;
+    color: selecteditemtext;
+    border: 1px solid selecteditem;
+  }
+
+  .navds-chips__toggle[aria-pressed="true"]:hover {
+    background-color: selecteditemtext;
+    color: selecteditem;
+  }
+
+  .navds-chips__toggle[aria-pressed="true"]:active {
+    background-color: highlight;
+    color: highlighttext;
+  }
+}

@navikt/core/css/content-container.css

@@ -1,17 +0,0 @@
-:root,
-:host {
-  --navds-content-container-max-width: 79.5rem;
-}
-
-.navds-content-container {
-  margin-left: auto;
-  margin-right: auto;
-  max-width: var(--navds-content-container-max-width);
-  padding: var(--a-spacing-4);
-}
-
-@media (min-width: 448px) {
-  .navds-content-container {
-    padding: var(--a-spacing-6);
-  }
-}

@navikt/core/css/copybutton.css

@@ -28,6 +28,21 @@
   place-content: center;
 }
 
+@media (forced-colors: active) {
+  .navds-copybutton {
+    background-color: ButtonFace;
+    border-color: ButtonText;
+    border: solid 1px ButtonText;
+    color: ButtonText;
+  }
+
+  .navds-copybutton.navds-copybutton:focus-visible {
+    box-shadow: none;
+    outline: 2px solid highlight;
+    outline-offset: 2px;
+  }
+}
+
 .navds-copybutton--icon-right {
   --__ac-copybutton-padding: var(--a-spacing-3) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-5);
 }
@@ -130,7 +145,7 @@
 }
 
 .navds-copybutton--action:hover {
-  color: var(--ac-copybutton-action-hover-text, var(--__ac-copybutton-action-text, var(--a-text-action)));
+  color: var(--ac-copybutton-action-hover-text, var(--__ac-copybutton-action-text, var(--a-text-action-hover)));
   background-color: var(--ac-copybutton-action-hover-bg, var(--__ac-copybutton-bg-hover, var(--a-surface-hover)));
 }
 
@@ -201,3 +216,10 @@
   cursor: not-allowed;
   opacity: 0.3;
 }
+
+@media (forced-colors: active) {
+  .navds-copybutton:where(:disabled) {
+    opacity: 1;
+    border-color: GrayText;
+  }
+}

@navikt/core/css/dropdown.css

@@ -50,6 +50,7 @@
 
 .navds-dropdown__item:hover {
   background-color: var(--ac-dropdown-item-hover-bg, var(--a-surface-action-subtle-hover));
+  color: var(--ac-dropdown-item-hover-text, var(--a-text-action-hover));
 }
 
 .navds-dropdown__item:active {
@@ -58,13 +59,15 @@
 }
 
 .navds-dropdown__item:focus-visible {
-  outline: none;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
   box-shadow: inset 0 0 0 2px var(--a-border-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-dropdown__item:focus {
-    outline: none;
+    outline: 2px solid transparent;
+    outline-offset: -2px;
     box-shadow: inset 0 0 0 2px var(--a-border-focus);
   }
 }
@@ -75,3 +78,14 @@
   background: transparent;
   cursor: not-allowed;
 }
+
+@media (forced-colors: active) {
+  .navds-dropdown__item:hover {
+    color: highlight;
+  }
+
+  .navds-dropdown__item:disabled {
+    opacity: 1;
+    color: graytext;
+  }
+}

@navikt/core/css/expansioncard.css

@@ -145,13 +145,13 @@
 }
 
 .navds-expansioncard__header-button:focus-visible {
-  outline: none;
+  outline: 3px solid transparent;
   box-shadow: var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-expansioncard__header-button:focus {
-    outline: none;
+    outline: 3px solid transparent;
     box-shadow: var(--a-shadow-focus);
   }
 }
@@ -177,7 +177,7 @@
  * Content *
  *************************/
 .navds-expansioncard__content {
-  --__ac-expansioncard-padding-block: var(--a-spacing-3);
+  --__ac-expansioncard-padding-block: var(--a-spacing-5);
 
   border-end-end-radius: var(--__ac-expansioncard-border-radius);
   border-end-start-radius: var(--__ac-expansioncard-border-radius);
@@ -187,6 +187,10 @@
   border-top: none;
 }
 
+.navds-expansioncard--small .navds-expansioncard__content {
+  --__ac-expansioncard-padding-block: var(--a-spacing-4);
+}
+
 .navds-expansioncard__content--closed {
   display: none;
 }
@@ -221,3 +225,11 @@
     transform: translateY(0);
   }
 }
+
+@media (forced-colors: active) {
+  .navds-expansioncard:hover {
+    --__ac-expansioncard-border-color: highlight;
+
+    outline: 1px solid highlight;
+  }
+}

@navikt/core/css/form/combobox.css

@@ -39,6 +39,8 @@
 
 .navds-combobox--error
   .navds-text-field__input:not(:hover):not(:disabled):not(.navds-combobox__wrapper-inner--virtually-unfocused):focus-within {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
   box-shadow:
     0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger)),
     var(--a-shadow-focus);
@@ -74,7 +76,6 @@
 }
 
 .navds-combobox__input {
-  z-index: 1;
   flex: 1;
   border: none;
   padding: 0;
@@ -91,14 +92,14 @@
 }
 
 .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
-  box-shadow:
-    0 0 0 1px var(--a-surface-default) inset,
-    var(--a-shadow-focus);
   box-shadow: var(--a-shadow-focus);
+  outline: 3px solid transparent;
+  outline-offset: 2px;
 }
 
 .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible).navds-combobox__wrapper-inner--virtually-unfocused {
   box-shadow: none;
+  outline: none;
 }
 
 @supports not selector(:focus-visible) {
@@ -109,27 +110,27 @@
   }
 
   .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus) {
-    box-shadow:
-      0 0 0 1px var(--a-surface-default) inset,
-      var(--a-shadow-focus);
     box-shadow: var(--a-shadow-focus);
+    outline: 3px solid transparent;
+    outline-offset: 2px;
   }
 
   .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus).navds-combobox__wrapper-inner--virtually-unfocused {
     box-shadow: none;
+    outline: none;
   }
 }
 
 @supports not selector(:has) {
   .navds-combobox--focused .navds-combobox__wrapper-inner {
-    box-shadow:
-      0 0 0 1px var(--a-surface-default) inset,
-      var(--a-shadow-focus);
     box-shadow: var(--a-shadow-focus);
+    outline: 3px solid transparent;
+    outline-offset: 2px;
   }
 
   .navds-combobox--focused .navds-combobox__wrapper-inner.navds-combobox__wrapper-inner--virtually-unfocused {
     box-shadow: none;
+    outline: none;
   }
 }
 
@@ -208,7 +209,7 @@
   height: 1.25rem;
 }
 
-/* dropdown list */
+/* dropdown & non selectable dropdown items */
 
 .navds-combobox__list {
   max-height: 290px;
@@ -216,20 +217,16 @@
   position: absolute;
   left: 0;
   right: 0;
-  z-index: 9999;
+  z-index: var(--a-z-index-popover);
   top: calc(100% + var(--a-spacing-2));
-  list-style: none;
-  margin: 0;
   border: 1px solid var(--ac-combobox-list-border-color, var(--a-border-divider));
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  padding: 0;
   box-shadow: var(--a-shadow-small);
   border-radius: var(--a-border-radius-medium);
-  gap: var(--a-spacing-1) 0;
   background-color: var(--ac-combobox-list-bg, var(--a-surface-default));
   color: var(--ac-combobox-list-text, var(--a-text-default));
+  gap: var(--a-spacing-1) 0;
 }
 
 .navds-combobox__list--closed {
@@ -241,34 +238,70 @@
   width: 1.5rem;
 }
 
+.navds-combobox__list_non-selectables {
+  position: sticky;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+}
+
 .navds-combobox__list-item,
-.navds-combobox__list-item__no-options,
-.navds-combobox__list-item__new-option {
+.navds-combobox__list-item--loading,
+.navds-combobox__list-item--no-options,
+.navds-combobox__list-item--new-option,
+.navds-combobox__list-item--max-selected {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  align-items: center;
   padding: var(--a-spacing-3);
   width: 100%;
   background-color: var(--ac-combobox-list-item-bg, var(--a-surface-default));
+  scroll-margin-top: 50px;
 }
 
 .navds-form-field--small .navds-combobox__list-item,
-.navds-form-field--small .navds-combobox__list-item__no-options,
-.navds-form-field--small .navds-combobox__list-item__new-option {
+.navds-form-field--small .navds-combobox__list-item--loading,
+.navds-form-field--small .navds-combobox__list-item--no-options,
+.navds-form-field--small .navds-combobox__list-item--new-option,
+.navds-form-field--small .navds-combobox__list-item--max-selected {
   padding: calc(var(--a-spacing-3) / 2) var(--a-spacing-2);
 }
 
 .navds-combobox__list-item--loading {
-  display: flex;
   justify-content: center;
-  padding: var(--a-spacing-3);
   background-color: var(--ac-combobox-list-item-loading-bg, var(--a-surface-default));
+}
+
+.navds-combobox__list-item--max-selected {
+  background: var(--ac-combobox-list-item-max-selected-bg, var(--a-surface-info-subtle));
+  border-start-start-radius: calc(var(--a-border-radius-medium) - 1px);
+  border-start-end-radius: calc(var(--a-border-radius-medium) - 1px);
+  border: 1px solid var(--ac-combobox-list-item-max-selected-border, var(--a-border-info));
+  margin-bottom: calc(var(--a-spacing-1) * -1);
+}
+
+.navds-combobox__list_non-selectables:hover {
+  cursor: default;
+}
+
+/* ul-list and selectable li-items */
+
+.navds-combobox__list-options {
+  list-style: none;
+  margin: 0;
+  padding: 0;
   width: 100%;
+  display: inherit;
+  flex-direction: inherit;
+  gap: inherit;
+  background-color: inherit;
+  align-items: flex-start;
 }
 
 .navds-combobox__list-item--focus,
-.navds-combobox__list--with-hover .navds-combobox__list-item:hover {
+.navds-combobox__list--with-hover
+  .navds-combobox__list-item:where(:not([data-no-focus="true"], .navds-combobox__list-item--new-option)):hover {
   background-color: var(--ac-combobox-list-item-hover-bg, var(--a-surface-hover));
   cursor: pointer;
   border-left: 4px solid var(--ac-combobox-list-item-hover-border-left, var(--a-border-strong));
@@ -280,6 +313,11 @@
   padding-left: calc(var(--a-spacing-2) - 4px);
 }
 
+.navds-combobox__list-item[data-no-focus="true"] {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
 .navds-combobox__list-item--selected {
   background-color: var(--ac-combobox-list-item-selected-bg, var(--a-surface-selected));
 }
@@ -295,7 +333,7 @@
   padding-left: calc(var(--a-spacing-3) - 4px);
 }
 
-.navds-combobox__list-item__new-option {
+.navds-combobox__list-item--new-option {
   border-bottom: 1px solid var(--a-border-divider);
   background: var(--a-surface-neutral-subtle);
   cursor: pointer;
@@ -303,12 +341,12 @@
   gap: 0.25rem;
 }
 
-.navds-combobox__list--with-hover .navds-combobox__list-item__new-option:hover {
+.navds-combobox__list--with-hover .navds-combobox__list-item--new-option:hover {
   border-bottom: 1px solid var(--a-border-divider);
   background: var(--a-surface-neutral-subtle-hover);
 }
 
-.navds-combobox__list-item__new-option--focus {
+.navds-combobox__list-item--new-option--focus {
   box-shadow:
     var(--a-shadow-focus) inset,
     var(--a-border-action) 0 0 0 5px inset;
@@ -332,3 +370,49 @@
     gap: var(--a-spacing-1);
   }
 }
+
+@media (forced-colors: active) {
+  .navds-combobox__button-clear:hover {
+    color: highlight;
+  }
+
+  .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
+    outline-color: highlight;
+  }
+
+  .navds-combobox__list-item--focus,
+  .navds-combobox__list--with-hover
+    .navds-combobox__list-item:not([data-no-focus="true"], .navds-combobox__list-item--new-option):hover {
+    border-left-color: highlight;
+    color: highlight;
+  }
+
+  .navds-combobox__list-item[data-no-focus="true"] {
+    opacity: 1;
+    color: graytext;
+  }
+
+  .navds-combobox__list-item--selected {
+    background-color: selecteditem;
+    color: selecteditemtext;
+  }
+
+  .navds-combobox__list-item--selected > * {
+    forced-color-adjust: none;
+  }
+
+  .navds-combobox__list-item--selected.navds-combobox__list-item--focus,
+  .navds-combobox__list--with-hover .navds-combobox__list-item--selected:hover {
+    border-left-color: highlight;
+    color: highlight;
+  }
+
+  .navds-combobox__list--with-hover .navds-combobox__list-item--new-option:hover {
+    color: highlight;
+  }
+
+  .navds-combobox__list-item--new-option--focus {
+    outline: 2px solid highlight;
+    outline-offset: -3px;
+  }
+}

@navikt/core/css/form/confirmation-panel.css

@@ -8,6 +8,7 @@
   background-color: var(--ac-confirmation-panel-bg, var(--a-surface-warning-subtle));
   transition: background-color linear 100ms;
   justify-self: stretch;
+  position: relative;
 }
 
 .navds-confirmation-panel__content {
@@ -23,3 +24,30 @@
   border-color: var(--ac-confirmation-panel-error-border, var(--a-border-danger));
   background-color: var(--ac-confirmation-panel-error-bg, var(--a-surface-danger-subtle));
 }
+
+.navds-confirmation-panel--error .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label {
+  color: var(--a-text-default);
+}
+
+@media (forced-colors: active) {
+  .navds-confirmation-panel__inner::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    border-left: 8px solid;
+    border-color: orange;
+    forced-color-adjust: none;
+    border-start-start-radius: calc(var(--a-border-radius-medium) - 1px);
+    border-end-start-radius: calc(var(--a-border-radius-medium) - 1px);
+  }
+
+  .navds-confirmation-panel--checked .navds-confirmation-panel__inner::before {
+    border-color: green;
+  }
+
+  .navds-confirmation-panel--error .navds-confirmation-panel__inner::before {
+    border-color: red;
+  }
+}

@navikt/core/css/form/error-summary.css

@@ -9,11 +9,17 @@
   padding: var(--a-spacing-3);
 }
 
-.navds-error-summary:focus-visible {
-  box-shadow: var(--a-shadow-focus);
+.navds-error-summary__heading:focus {
   outline: none;
 }
 
+.navds-error-summary:focus-visible,
+.navds-error-summary:has(.navds-error-summary__heading:focus-visible) {
+  box-shadow:
+    0 0 0 1px var(--a-border-on-inverted),
+    0 0 0 4px var(--a-border-focus);
+}
+
 @supports not selector(:focus-visible) {
   .navds-error-summary:focus {
     box-shadow: var(--a-shadow-focus);

@navikt/core/css/form/fieldset.css

@@ -42,3 +42,10 @@
 .navds-fieldset:disabled > .navds-fieldset__description {
   opacity: 0.3;
 }
+
+@media (forced-colors: active) {
+  .navds-fieldset:disabled > .navds-fieldset__legend,
+  .navds-fieldset:disabled > .navds-fieldset__description {
+    opacity: 1;
+  }
+}

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

@@ -51,3 +51,9 @@
   flex-shrink: 0;
   align-self: flex-start;
 }
+
+@media (forced-colors: active) {
+  .navds-form-field--disabled {
+    opacity: 1;
+  }
+}

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

@@ -72,6 +72,8 @@
 
 .navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
 .navds-radio__input:focus-visible + .navds-radio__label::before {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
   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)),
@@ -81,6 +83,8 @@
 @supports not selector(:focus-visible) {
   .navds-checkbox__input:focus + .navds-checkbox__label::before,
   .navds-radio__input:focus + .navds-radio__label::before {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
     box-shadow:
       0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)),
       0 0 0 4px var(--a-border-focus);
@@ -90,7 +94,7 @@
 .navds-checkbox__input:hover:focus-visible + .navds-checkbox__label::before,
 .navds-radio__input:hover:focus-visible + .navds-radio__label::before {
   box-shadow:
-    0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+    0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover)),
     0 0 0 4px var(--a-border-focus);
 }
 
@@ -98,16 +102,11 @@
   .navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
   .navds-radio__input:hover:focus + .navds-radio__label::before {
     box-shadow:
-      0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+      0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover)),
       0 0 0 4px var(--a-border-focus);
   }
 }
 
-.navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
-  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));
-}
-
 .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
   content: "";
   position: absolute;
@@ -124,9 +123,14 @@
   transform: translate(0.25rem, -50%);
 }
 
-.navds-checkbox__input:checked + .navds-checkbox__label::before {
-  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));
+.navds-checkbox__input:where(:checked, :indeterminate) + .navds-checkbox__label::before {
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected));
+  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action-selected));
+}
+
+.navds-checkbox__input:where(:checked, :indeterminate):hover + .navds-checkbox__label::before {
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected-hover));
+  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action-selected-hover));
 }
 
 .navds-checkbox__input:where(:not(:checked)) + .navds-checkbox__label > .navds-checkbox__icon {
@@ -139,6 +143,10 @@
   height: 1.5rem;
   transform: translate(var(--a-spacing-1-alt));
   pointer-events: none;
+
+  /* Fixed edcase where when using in shadow-dom, svg will not center */
+  display: flex;
+  align-items: center;
 }
 
 .navds-checkbox--small .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
@@ -158,7 +166,7 @@
 .navds-checkbox__input:indeterminate:focus-visible + .navds-checkbox__label::before,
 .navds-checkbox__input:checked:focus-visible + .navds-checkbox__label::before {
   box-shadow:
-    0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+    0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
     0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
     0 0 0 4px var(--a-border-focus);
 }
@@ -167,7 +175,7 @@
   .navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
   .navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
     box-shadow:
-      0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+      0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
       0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
       0 0 0 4px var(--a-border-focus);
   }
@@ -175,14 +183,14 @@
 
 .navds-radio__input:checked + .navds-radio__label::before {
   box-shadow:
-    0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+    0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
     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));
+  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action-selected));
 }
 
 .navds-radio__input:checked:focus-visible + .navds-radio__label::before {
   box-shadow:
-    0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+    0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
     inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
     0 0 0 4px var(--a-border-focus);
 }
@@ -198,19 +206,19 @@
 
 .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
 .navds-radio__input:hover:not(:disabled) + .navds-radio__label {
-  color: var(--ac-radio-checkbox-action, var(--a-surface-action));
+  color: var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
 }
 
 .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: 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-hover));
 }
 
 @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: 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-hover));
   }
 }
 
@@ -352,3 +360,81 @@
 .navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
   background-color: var(--a-icon-subtle);
 }
+
+@media (forced-colors: active) {
+  .navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
+  .navds-radio__input:focus-visible + .navds-radio__label::before {
+    outline-color: highlight;
+  }
+
+  .navds-checkbox,
+  .navds-radio {
+    --__ac-radio-checkbox-high-contrast-bg: field;
+    --__ac-radio-checkbox-high-contrast-text: fieldtext;
+    --__ac-radio-checkbox-high-contrast-highlight: highlight;
+  }
+
+  .navds-checkbox__label::before,
+  .navds-radio__label::before {
+    border: 1px solid var(--__ac-radio-checkbox-high-contrast-text);
+    background-color: var(--__ac-radio-checkbox-high-contrast-bg);
+  }
+
+  .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
+    color: var(--__ac-radio-checkbox-high-contrast-text);
+  }
+
+  .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+    background-color: var(--__ac-radio-checkbox-high-contrast-text);
+  }
+
+  .navds-radio__input:checked + .navds-radio__label::before {
+    border: 1px solid var(--__ac-radio-checkbox-high-contrast-text);
+    outline: 3px solid var(--__ac-radio-checkbox-high-contrast-bg);
+    outline-offset: -4px;
+    background-color: var(--__ac-radio-checkbox-high-contrast-text);
+  }
+
+  .navds-radio__input:checked:focus-visible + .navds-radio__label::before {
+    border: 1px solid var(--__ac-radio-checkbox-high-contrast-bg);
+    outline: 2px solid highlight;
+    outline-offset: 2px;
+  }
+
+  :not(.navds-checkbox--readonly) > .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
+  :not(.navds-radio--readonly) > .navds-radio__input:hover:not(:disabled) + .navds-radio__label {
+    color: highlight;
+  }
+
+  .navds-checkbox__input:focus-visible + .navds-checkbox__label::before {
+    outline: 2px solid var(--__ac-radio-checkbox-high-contrast-highlight);
+  }
+
+  .navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label::before {
+    border: 1px solid var(--__ac-radio-checkbox-high-contrast-text);
+    background-color: var(--__ac-radio-checkbox-high-contrast-bg);
+  }
+
+  .navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+    background-color: var(--__ac-radio-checkbox-high-contrast-text);
+  }
+
+  .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
+    border: 1px solid var(--__ac-radio-checkbox-high-contrast-text);
+    outline: 3px solid var(--__ac-radio-checkbox-high-contrast-bg);
+    outline-offset: -4px;
+    background-color: var(--__ac-radio-checkbox-high-contrast-text);
+  }
+
+  .navds-checkbox--disabled,
+  .navds-radio--disabled {
+    opacity: 1;
+
+    --__ac-radio-checkbox-high-contrast-bg: field;
+    --__ac-radio-checkbox-high-contrast-text: graytext;
+  }
+
+  :is(.navds-checkbox--disabled, .navds-radio--disabled) :is(.navds-checkbox__label, .navds-radio__label) {
+    color: graytext;
+  }
+}

@navikt/core/css/form/search.css

@@ -95,18 +95,18 @@
 }
 
 .navds-search__button-clear:hover {
-  color: var(--ac-search-clear-icon-hover, var(--__ac-search-clear-icon-hover, var(--a-text-action)));
+  color: var(--ac-search-clear-icon-hover, var(--__ac-search-clear-icon-hover, var(--a-text-action-hover)));
 }
 
 .navds-search__button-clear:focus-visible {
+  outline: 2px solid transparent;
   box-shadow: var(--a-shadow-focus);
-  outline: none;
 }
 
 @supports not selector(:focus-visible) {
   .navds-search__button-clear:focus {
+    outline: 2px solid transparent;
     box-shadow: var(--a-shadow-focus);
-    outline: none;
   }
 }
 
@@ -134,12 +134,12 @@
     0 -1px 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset;
 }
 
-.navds-search__button-search.navds-button--secondary:hover {
+.navds-search__button-search.navds-button--secondary:where(:hover, :active) {
   box-shadow:
-    -1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
-    0 1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
-    0 -1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
-    -1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action)));
+    -1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
+    0 1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
+    0 -1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
+    -1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover)));
   z-index: 1;
 }
 
@@ -155,7 +155,7 @@
 
 .navds-search__button-search.navds-button--secondary:focus-visible:hover {
   box-shadow:
-    0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
+    0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
     var(--a-shadow-focus);
 }
 
@@ -216,3 +216,13 @@
     z-index: 1;
   }
 }
+
+@media (forced-colors: active) {
+  .navds-modal {
+    outline: 2px solid transparent;
+  }
+
+  .navds-search__button-clear:hover {
+    color: highlight;
+  }
+}

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

@@ -13,13 +13,29 @@
   padding-right: 2rem;
 }
 
+@media (forced-colors: active) {
+  .navds-select__input.navds-select__input.navds-select__input {
+    background-color: ButtonFace;
+    border-color: ButtonText;
+    color: ButtonText;
+    forced-color-adjust: none;
+    box-shadow: none;
+  }
+
+  .navds-select__input.navds-select__input.navds-select__input:focus-visible {
+    outline: 2px solid highlight;
+    outline-offset: 2px;
+  }
+}
+
 .navds-select__input:hover {
-  border-color: var(--ac-select-hover-bg, var(--a-border-action));
+  border-color: var(--ac-select-hover-border, var(--a-border-action-hover));
   cursor: pointer;
 }
 
 .navds-select__input:focus-visible {
   outline: none;
+  border-color: var(--ac-select-active-border, var(--a-border-action-selected));
   box-shadow: var(--a-shadow-focus);
 }
 
@@ -46,6 +62,12 @@
   color: var(--ac-select-text, var(--a-text-default));
 }
 
+@media (forced-colors: active) {
+  .navds-select__chevron {
+    color: ButtonText;
+  }
+}
+
 .navds-form-field--small .navds-select__input {
   min-height: 2rem;
   padding: 0 var(--a-spacing-8) 0 var(--a-spacing-2);

@navikt/core/css/form/switch.css

@@ -111,6 +111,8 @@
 }
 
 .navds-switch__input:focus-visible ~ .navds-switch__track {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
   box-shadow:
     0 0 0 1px var(--a-surface-default),
     var(--a-shadow-focus);
@@ -118,6 +120,7 @@
 
 @supports not selector(:focus-visible) {
   .navds-switch__input:focus ~ .navds-switch__track {
+    outline: 2px solid transparent;
     box-shadow:
       0 0 0 1px var(--a-surface-default),
       var(--a-shadow-focus);
@@ -218,3 +221,49 @@
     transform: translateX(1.25rem);
   }
 }
+
+@media (forced-colors: active) {
+  .navds-switch__input:hover ~ .navds-switch__label-wrapper,
+  .navds-switch__label-wrapper:hover {
+    color: highlight;
+  }
+
+  .navds-switch__thumb,
+  .navds-switch--readonly .navds-switch__thumb {
+    background-color: fieldtext;
+  }
+
+  .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb,
+  .navds-switch--readonly .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+    color: field;
+  }
+
+  .navds-switch__track {
+    width: calc(2.75rem + 4px);
+    height: calc(1.5rem + 4px);
+    top: var(--a-spacing-3);
+    border: 2px solid fieldtext;
+  }
+
+  .navds-switch__input:focus-visible ~ .navds-switch__track {
+    outline: 2px solid highlight;
+    outline-offset: 2px;
+  }
+
+  .navds-switch--disabled:not(.navds-switch--loading) {
+    opacity: 1;
+  }
+
+  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__thumb {
+    background-color: graytext;
+  }
+
+  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__track {
+    border-color: graytext;
+  }
+
+  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__label-wrapper,
+  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__label-wrapper:hover {
+    color: graytext !important;
+  }
+}

@navikt/core/css/form/text-field.css

@@ -41,12 +41,14 @@
 }
 
 .navds-text-field__input:hover {
-  border-color: var(--ac-textfield-hover-border, var(--__ac-textfield-hover-border, var(--a-border-action)));
+  border-color: var(--ac-textfield-hover-border, var(--__ac-textfield-hover-border, var(--a-border-action-hover)));
 }
 
 .navds-text-field__input:focus-visible {
-  outline: none;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
   box-shadow: var(--a-shadow-focus);
+  border-color: var(--ac-textfield-active-border, var(--a-border-action-selected));
 }
 
 @supports not selector(:focus-visible) {
@@ -101,3 +103,10 @@
 .navds-text-field__input[type="search"]::-webkit-search-results-decoration {
   -webkit-appearance: none;
 }
+
+@media (forced-colors: active) {
+  .navds-text-field__input {
+    background-color: field;
+    color: fieldtext;
+  }
+}

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

@@ -20,18 +20,9 @@
   --__ac-textarea-counter-error-text: initial;
 }
 
-.navds-textarea__wrapper {
-  --__ac-textarea-height: initial;
-
-  position: relative;
-  min-width: 100%;
-}
-
-.navds-textarea__input:first-child {
-  height: var(--__ac-textarea-height);
-}
-
 .navds-textarea__input {
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+  height: var(--__ac-textarea-height);
   appearance: none;
   padding: var(--a-spacing-2);
   background-color: var(--ac-textarea-bg, var(--__ac-textarea-bg, var(--a-surface-default)));
@@ -48,17 +39,20 @@
 }
 
 .navds-textarea__input:hover {
-  border-color: var(--ac-textarea-hover-border, var(--__ac-textarea-hover-border, var(--a-border-action)));
+  border-color: var(--ac-textarea-hover-border, var(--__ac-textarea-hover-border, var(--a-border-action-hover)));
 }
 
 .navds-textarea__input:focus-visible {
-  outline: none;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
   box-shadow: var(--a-shadow-focus);
+  border-color: var(--ac-textarea-active-border, var(--a-border-action-selected));
 }
 
 @supports not selector(:focus-visible) {
   .navds-textarea__input:focus {
-    outline: none;
+    outline: 2px solid transparent;
+    outline-offset: 2px;
     box-shadow: var(--a-shadow-focus);
   }
 }
@@ -68,7 +62,7 @@
 }
 
 .navds-textarea__counter {
-  margin-top: var(--a-spacing-05);
+  margin-top: -0.375rem;
   color: var(--ac-textarea-counter-text, var(--__ac-textarea-counter-text, var(--a-text-subtle)));
 }
 
@@ -80,7 +74,7 @@
   display: none;
 }
 
-.navds-textarea__wrapper:focus-within .navds-textarea__sr-counter {
+.navds-textarea__input:focus ~ .navds-textarea__sr-counter {
   display: initial;
 }
 
@@ -141,3 +135,10 @@
   border-color: var(--a-border-subtle);
   cursor: default;
 }
+
+@media (forced-colors: active) {
+  .navds-textarea__input {
+    background-color: field;
+    color: fieldtext;
+  }
+}

@navikt/core/css/grid.css

@@ -1,217 +0,0 @@
-/**************************
- * .navds-grid *
- **************************/
-
-.navds-grid {
-  display: grid;
-  grid-template-columns: repeat(12, minmax(0, 1fr));
-  grid-gap: var(--a-spacing-4);
-}
-
-@media (min-width: 448px) {
-  .navds-grid {
-    grid-gap: var(--a-spacing-6);
-  }
-}
-
-/**************************
- * .navds-grid__cell *
- **************************/
-
-.navds-grid__cell--xs-1 {
-  grid-column: span 1;
-}
-
-.navds-grid__cell--xs-2 {
-  grid-column: span 2;
-}
-
-.navds-grid__cell--xs-3 {
-  grid-column: span 3;
-}
-
-.navds-grid__cell--xs-4 {
-  grid-column: span 4;
-}
-
-.navds-grid__cell--xs-5 {
-  grid-column: span 5;
-}
-
-.navds-grid__cell--xs-6 {
-  grid-column: span 6;
-}
-
-.navds-grid__cell--xs-7 {
-  grid-column: span 7;
-}
-
-.navds-grid__cell--xs-8 {
-  grid-column: span 8;
-}
-
-.navds-grid__cell--xs-9 {
-  grid-column: span 9;
-}
-
-.navds-grid__cell--xs-10 {
-  grid-column: span 10;
-}
-
-.navds-grid__cell--xs-11 {
-  grid-column: span 11;
-}
-
-.navds-grid__cell--xs-12 {
-  grid-column: span 12;
-}
-
-@media (min-width: 448px) {
-  .navds-grid__cell--sm-1 {
-    grid-column: span 1;
-  }
-
-  .navds-grid__cell--sm-2 {
-    grid-column: span 2;
-  }
-
-  .navds-grid__cell--sm-3 {
-    grid-column: span 3;
-  }
-
-  .navds-grid__cell--sm-4 {
-    grid-column: span 4;
-  }
-
-  .navds-grid__cell--sm-5 {
-    grid-column: span 5;
-  }
-
-  .navds-grid__cell--sm-6 {
-    grid-column: span 6;
-  }
-
-  .navds-grid__cell--sm-7 {
-    grid-column: span 7;
-  }
-
-  .navds-grid__cell--sm-8 {
-    grid-column: span 8;
-  }
-
-  .navds-grid__cell--sm-9 {
-    grid-column: span 9;
-  }
-
-  .navds-grid__cell--sm-10 {
-    grid-column: span 10;
-  }
-
-  .navds-grid__cell--sm-11 {
-    grid-column: span 11;
-  }
-
-  .navds-grid__cell--sm-12 {
-    grid-column: span 12;
-  }
-}
-
-@media (min-width: 648px) {
-  .navds-grid__cell--md-1 {
-    grid-column: span 1;
-  }
-
-  .navds-grid__cell--md-2 {
-    grid-column: span 2;
-  }
-
-  .navds-grid__cell--md-3 {
-    grid-column: span 3;
-  }
-
-  .navds-grid__cell--md-4 {
-    grid-column: span 4;
-  }
-
-  .navds-grid__cell--md-5 {
-    grid-column: span 5;
-  }
-
-  .navds-grid__cell--md-6 {
-    grid-column: span 6;
-  }
-
-  .navds-grid__cell--md-7 {
-    grid-column: span 7;
-  }
-
-  .navds-grid__cell--md-8 {
-    grid-column: span 8;
-  }
-
-  .navds-grid__cell--md-9 {
-    grid-column: span 9;
-  }
-
-  .navds-grid__cell--md-10 {
-    grid-column: span 10;
-  }
-
-  .navds-grid__cell--md-11 {
-    grid-column: span 11;
-  }
-
-  .navds-grid__cell--md-12 {
-    grid-column: span 12;
-  }
-}
-
-@media (min-width: 960px) {
-  .navds-grid__cell--lg-1 {
-    grid-column: span 1;
-  }
-
-  .navds-grid__cell--lg-2 {
-    grid-column: span 2;
-  }
-
-  .navds-grid__cell--lg-3 {
-    grid-column: span 3;
-  }
-
-  .navds-grid__cell--lg-4 {
-    grid-column: span 4;
-  }
-
-  .navds-grid__cell--lg-5 {
-    grid-column: span 5;
-  }
-
-  .navds-grid__cell--lg-6 {
-    grid-column: span 6;
-  }
-
-  .navds-grid__cell--lg-7 {
-    grid-column: span 7;
-  }
-
-  .navds-grid__cell--lg-8 {
-    grid-column: span 8;
-  }
-
-  .navds-grid__cell--lg-9 {
-    grid-column: span 9;
-  }
-
-  .navds-grid__cell--lg-10 {
-    grid-column: span 10;
-  }
-
-  .navds-grid__cell--lg-11 {
-    grid-column: span 11;
-  }
-
-  .navds-grid__cell--lg-12 {
-    grid-column: span 12;
-  }
-}

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

@@ -13,7 +13,7 @@
 }
 
 .navds-help-text__button:focus-visible {
-  outline: none;
+  outline: 2px solid transparent;
   box-shadow:
     0 0 0 1px var(--a-border-focus),
     inset 0 0 0 1px var(--a-border-focus);
@@ -21,7 +21,7 @@
 
 @supports not selector(:focus-visible) {
   .navds-help-text__button:focus {
-    outline: none;
+    outline: 2px solid transparent;
     box-shadow:
       0 0 0 1px var(--a-border-focus),
       inset 0 0 0 1px var(--a-border-focus);
@@ -53,6 +53,11 @@
 
 .navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon--filled {
   display: inherit;
+  color: var(--ac-help-text-button-hover-color, var(--a-surface-action-hover));
+}
+
+.navds-help-text__button[aria-expanded="true"] > .navds-help-text__icon--filled {
+  color: var(--ac-help-text-button-active-color, var(--a-surface-action-active));
 }
 
 @supports not selector(:focus-visible) {
@@ -64,3 +69,17 @@
     display: inherit;
   }
 }
+
+@media (forced-colors: active) {
+  .navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon {
+    display: inherit;
+  }
+
+  .navds-help-text__button:hover > .navds-help-text__icon {
+    color: highlight;
+  }
+
+  .navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon--filled {
+    display: none;
+  }
+}

@navikt/core/css/index.css

@@ -1,11 +1,9 @@
 @charset "UTF-8";
 @import "baseline/index.css";
 @import "typography.css";
-@import "grid.css";
 @import "accordion.css";
 @import "alert.css";
 @import "button.css";
-@import "content-container.css";
 @import "chat.css";
 @import "chips.css";
 @import "copybutton.css";

@navikt/core/css/internalheader.css

@@ -7,6 +7,27 @@
   --navds-internalheader-focus: inset 0 0 0 2px var(--a-border-focus-on-inverted);
 }
 
+@media (forced-colors: active) {
+  .navds-internalheader {
+    background-color: ButtonFace;
+    border-color: ButtonText;
+    border: solid 1px ButtonText;
+    color: ButtonText;
+  }
+
+  .navds-internalheader a:focus-visible {
+    box-shadow: none;
+    outline: 2px solid highlight;
+    outline-offset: 2px;
+  }
+
+  .navds-internalheader .navds-internalheader__button:focus-visible {
+    box-shadow: none;
+    outline: 2px solid highlight;
+    outline-offset: 2px;
+  }
+}
+
 .navds-internalheader__title {
   border: none;
   overflow: visible;

@navikt/core/css/link-panel.css

@@ -9,23 +9,25 @@
 
 .navds-link-panel:hover .navds-link-panel__title {
   text-decoration: underline;
-  color: var(--ac-link-panel-hover-text, var(--a-text-action));
+  color: var(--ac-link-panel-hover-text, var(--a-text-action-hover));
 }
 
 .navds-link-panel:hover {
   box-shadow: var(--a-shadow-small);
-  border-color: var(--ac-link-panel-hover-border, var(--a-border-action));
+  border-color: var(--ac-link-panel-hover-border, var(--a-border-action-hover));
 }
 
 .navds-link-panel:focus-visible {
+  outline: 3px solid transparent;
+  outline-offset: 2px;
   box-shadow: var(--a-shadow-focus);
-  outline: none;
 }
 
 @supports not selector(:focus-visible) {
   .navds-link-panel:focus {
+    outline: 3px solid transparent;
+    outline-offset: 2px;
     box-shadow: var(--a-shadow-focus);
-    outline: none;
   }
 }
 

@navikt/core/css/link.css

@@ -20,6 +20,7 @@
 
 .navds-link:hover {
   text-decoration: none;
+  color: var(--ac-link-hover-text, var(--a-text-action-hover));
 }
 
 .navds-link.navds-link--remove-underline {
@@ -36,7 +37,7 @@
 }
 
 .navds-link:focus-visible {
-  outline: none;
+  outline: 2px solid transparent;
   color: var(--ac-link-focus-text, var(--a-text-on-action));
   text-decoration: none;
   background-color: var(--ac-link-focus-bg, var(--a-border-focus));
@@ -45,7 +46,7 @@
 
 @supports not selector(:focus-visible) {
   .navds-link:focus {
-    outline: none;
+    outline: 2px solid transparent;
     color: var(--ac-link-focus-text, var(--a-text-on-action));
     text-decoration: none;
     background-color: var(--ac-link-focus-bg, var(--a-border-focus));
@@ -54,7 +55,7 @@
 }
 
 .navds-link:active {
-  outline: none;
+  outline: 2px solid transparent;
   color: var(--ac-link-active-text, var(--a-text-on-action));
   text-decoration: none;
   background-color: var(--ac-link-active-bg, var(--a-border-focus));

@navikt/core/css/loader.css

@@ -111,3 +111,9 @@
     stroke-dashoffset: -120px;
   }
 }
+
+@media (forced-colors: active) {
+  .navds-loader__background {
+    stroke: canvastext;
+  }
+}

@navikt/core/css/modal.css

@@ -168,3 +168,9 @@
     opacity: 1;
   }
 }
+
+@media (forced-colors: active) {
+  .navds-modal {
+    outline: 2px solid transparent;
+  }
+}

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "5.15.1",
+  "version": "6.1.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.15.1",
+    "@navikt/ds-tokens": "^6.1.0",
     "cssnano": "6.0.0",
     "fast-glob": "3.2.11",
     "lodash": "4.17.21",

@navikt/core/css/popover.css

@@ -59,3 +59,26 @@
   border-right-color: transparent;
   border-top-color: transparent;
 }
+
+@media (forced-colors: active) {
+  .navds-popover[data-placement^="top"] > .navds-popover__arrow {
+    border-left-color: canvas;
+    border-top-color: canvas;
+  }
+
+  /* prettier-ignore */
+  .navds-popover[data-placement^="bottom"] > .navds-popover__arrow {
+    border-bottom-color: canvas;
+    border-right-color: canvas;
+  }
+
+  .navds-popover[data-placement^="left"] > .navds-popover__arrow {
+    border-left-color: canvas;
+    border-bottom-color: canvas;
+  }
+
+  .navds-popover[data-placement^="right"] > .navds-popover__arrow {
+    border-right-color: canvas;
+    border-top-color: canvas;
+  }
+}

@navikt/core/css/primitives/bleed.css

@@ -4,11 +4,13 @@
   --__ac-bleed-margin-inline-md: var(--__ac-bleed-margin-inline-sm);
   --__ac-bleed-margin-inline-lg: var(--__ac-bleed-margin-inline-md);
   --__ac-bleed-margin-inline-xl: var(--__ac-bleed-margin-inline-lg);
+  --__ac-bleed-margin-inline-2xl: var(--__ac-bleed-margin-inline-xl);
   --__ac-bleed-margin-block-xs: initial;
   --__ac-bleed-margin-block-sm: var(--__ac-bleed-margin-block-xs);
   --__ac-bleed-margin-block-md: var(--__ac-bleed-margin-block-sm);
   --__ac-bleed-margin-block-lg: var(--__ac-bleed-margin-block-md);
   --__ac-bleed-margin-block-xl: var(--__ac-bleed-margin-block-lg);
+  --__ac-bleed-margin-block-2xl: var(--__ac-bleed-margin-block-xl);
 
   /** defaults */
   --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-xs);
@@ -24,11 +26,13 @@
   --__ac-bleed-padding-inline-md: var(--__ac-bleed-padding-inline-sm);
   --__ac-bleed-padding-inline-lg: var(--__ac-bleed-padding-inline-md);
   --__ac-bleed-padding-inline-xl: var(--__ac-bleed-padding-inline-lg);
+  --__ac-bleed-padding-inline-2xl: var(--__ac-bleed-padding-inline-xl);
   --__ac-bleed-padding-block-xs: initial;
   --__ac-bleed-padding-block-sm: var(--__ac-bleed-padding-block-xs);
   --__ac-bleed-padding-block-md: var(--__ac-bleed-padding-block-sm);
   --__ac-bleed-padding-block-lg: var(--__ac-bleed-padding-block-md);
   --__ac-bleed-padding-block-xl: var(--__ac-bleed-padding-block-lg);
+  --__ac-bleed-padding-block-2xl: var(--__ac-bleed-padding-block-xl);
 
   /** defaults */
   --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-xs);
@@ -85,3 +89,15 @@
     --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-xl);
   }
 }
+
+@media (min-width: 1440px) {
+  .navds-bleed {
+    --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-2xl);
+    --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-2xl);
+  }
+
+  .navds-bleed--padding {
+    --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-2xl);
+    --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-2xl);
+  }
+}

@navikt/core/css/primitives/box.css

@@ -4,16 +4,19 @@
   --__ac-box-padding-md: var(--__ac-box-padding-sm);
   --__ac-box-padding-lg: var(--__ac-box-padding-md);
   --__ac-box-padding-xl: var(--__ac-box-padding-lg);
+  --__ac-box-padding-2xl: var(--__ac-box-padding-xl);
   --__ac-box-padding-inline-xs: initial;
   --__ac-box-padding-inline-sm: var(--__ac-box-padding-inline-xs);
   --__ac-box-padding-inline-md: var(--__ac-box-padding-inline-sm);
   --__ac-box-padding-inline-lg: var(--__ac-box-padding-inline-md);
   --__ac-box-padding-inline-xl: var(--__ac-box-padding-inline-lg);
+  --__ac-box-padding-inline-2xl: var(--__ac-box-padding-inline-xl);
   --__ac-box-padding-block-xs: initial;
   --__ac-box-padding-block-sm: var(--__ac-box-padding-block-xs);
   --__ac-box-padding-block-md: var(--__ac-box-padding-block-sm);
   --__ac-box-padding-block-lg: var(--__ac-box-padding-block-md);
   --__ac-box-padding-block-xl: var(--__ac-box-padding-block-lg);
+  --__ac-box-padding-block-2xl: var(--__ac-box-padding-block-xl);
   --__ac-box-padding: var(--__ac-box-padding-xs);
   --__ac-box-padding-inline: var(--__ac-box-padding-inline-xs);
   --__ac-box-padding-block: var(--__ac-box-padding-block-xs);
@@ -26,6 +29,7 @@
   --__ac-box-border-radius-md: var(--__ac-box-border-radius-sm);
   --__ac-box-border-radius-lg: var(--__ac-box-border-radius-md);
   --__ac-box-border-radius-xl: var(--__ac-box-border-radius-lg);
+  --__ac-box-border-radius-2xl: var(--__ac-box-border-radius-xl);
   --__ac-box-border-radius: var(--__ac-box-border-radius-xs);
 
   padding-inline: var(--__ac-box-padding-inline, var(--__ac-box-padding));
@@ -73,3 +77,12 @@
     --__ac-box-border-radius: var(--__ac-box-border-radius-xl);
   }
 }
+
+@media (min-width: 1440px) {
+  .navds-box {
+    --__ac-box-padding: var(--__ac-box-padding-2xl);
+    --__ac-box-padding-inline: var(--__ac-box-padding-inline-2xl);
+    --__ac-box-padding-block: var(--__ac-box-padding-block-2xl);
+    --__ac-box-border-radius: var(--__ac-box-border-radius-2xl);
+  }
+}

@navikt/core/css/primitives/hgrid.css

@@ -4,12 +4,14 @@
   --__ac-hgrid-columns-md: initial;
   --__ac-hgrid-columns-lg: initial;
   --__ac-hgrid-columns-xl: initial;
+  --__ac-hgrid-columns-2xl: initial;
   --__ac-hgrid-columns: var(--__ac-hgrid-columns-xs);
   --__ac-hgrid-gap-xs: initial;
   --__ac-hgrid-gap-sm: initial;
   --__ac-hgrid-gap-md: initial;
   --__ac-hgrid-gap-lg: initial;
   --__ac-hgrid-gap-xl: initial;
+  --__ac-hgrid-gap-2xl: initial;
   --__ac-hgrid-gap: var(--__ac-hgrid-gap-xs);
   --__ac-hgrid-align: initial;
 
@@ -55,3 +57,22 @@
     );
   }
 }
+
+@media (min-width: 1440px) {
+  .navds-hgrid {
+    --__ac-hgrid-columns: var(
+      --__ac-hgrid-columns-2xl,
+      var(
+        --__ac-hgrid-columns-xl,
+        var(--__ac-hgrid-columns-lg, var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs))))
+      )
+    );
+    --__ac-hgrid-gap: var(
+      --__ac-hgrid-gap-2xl,
+      var(
+        --__ac-hgrid-gap-xl,
+        var(--__ac-hgrid-gap-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))))
+      )
+    );
+  }
+}

@navikt/core/css/primitives/responsive.css

@@ -45,3 +45,15 @@
     display: none !important;
   }
 }
+
+@media (min-width: 1440px) {
+  .navds-responsive__below--2xl {
+    display: none !important;
+  }
+}
+
+@media (max-width: 1439px) {
+  .navds-responsive__above--2xl {
+    display: none !important;
+  }
+}

@navikt/core/css/primitives/stack.css

@@ -5,24 +5,28 @@
   --__ac-stack-gap-md: var(--__ac-stack-gap-sm);
   --__ac-stack-gap-lg: var(--__ac-stack-gap-md);
   --__ac-stack-gap-xl: var(--__ac-stack-gap-lg);
+  --__ac-stack-gap-2xl: var(--__ac-stack-gap-xl);
   --__ac-stack-gap: var(--__ac-stack-gap-xs);
   --__ac-stack-justify-xs: initial;
   --__ac-stack-justify-sm: var(--__ac-stack-justify-xs);
   --__ac-stack-justify-md: var(--__ac-stack-justify-sm);
   --__ac-stack-justify-lg: var(--__ac-stack-justify-md);
   --__ac-stack-justify-xl: var(--__ac-stack-justify-lg);
+  --__ac-stack-justify-2xl: var(--__ac-stack-justify-xl);
   --__ac-stack-justify: var(--__ac-stack-justify-xs);
   --__ac-stack-align-xs: initial;
   --__ac-stack-align-sm: var(--__ac-stack-align-xs);
   --__ac-stack-align-md: var(--__ac-stack-align-sm);
   --__ac-stack-align-lg: var(--__ac-stack-align-md);
   --__ac-stack-align-xl: var(--__ac-stack-align-lg);
+  --__ac-stack-align-2xl: var(--__ac-stack-align-xl);
   --__ac-stack-align: var(--__ac-stack-align-xs);
   --__ac-stack-direction-xs: initial;
   --__ac-stack-direction-sm: var(--__ac-stack-direction-xs);
   --__ac-stack-direction-md: var(--__ac-stack-direction-sm);
   --__ac-stack-direction-lg: var(--__ac-stack-direction-md);
   --__ac-stack-direction-xl: var(--__ac-stack-direction-lg);
+  --__ac-stack-direction-2xl: var(--__ac-stack-direction-xl);
   --__ac-stack-direction: var(--__ac-stack-direction-xs);
 
   gap: var(--__ac-stack-gap);
@@ -78,3 +82,12 @@
     --__ac-stack-direction: var(--__ac-stack-direction-xl);
   }
 }
+
+@media (min-width: 1440px) {
+  .navds-stack {
+    --__ac-stack-gap: var(--__ac-stack-gap-2xl);
+    --__ac-stack-align: var(--__ac-stack-align-2xl);
+    --__ac-stack-justify: var(--__ac-stack-justify-2xl);
+    --__ac-stack-direction: var(--__ac-stack-direction-2xl);
+  }
+}

@navikt/core/css/read-more.css

@@ -16,8 +16,24 @@
   padding: var(--a-spacing-05) var(--a-spacing-1) var(--a-spacing-05) var(--a-spacing-05);
 }
 
+@media (forced-colors: active) {
+  .navds-read-more__button {
+    background-color: ButtonFace;
+    border-color: ButtonText;
+    border: solid 1px ButtonText;
+    color: ButtonText;
+  }
+
+  .navds-read-more__button.navds-read-more__button:focus-visible {
+    box-shadow: none;
+    outline: 2px solid highlight;
+    outline-offset: 2px;
+  }
+}
+
 .navds-read-more__button:hover {
   background-color: var(--ac-read-more-hover-bg, var(--a-surface-hover));
+  color: var(--ac-read-more-hover-text, var(--a-text-action-hover));
 }
 
 .navds-read-more__button:active {

@navikt/core/css/skeleton.css

@@ -57,3 +57,11 @@
     opacity: 0.4;
   }
 }
+
+@media (forced-colors: active) {
+  .navds-skeleton {
+    forced-color-adjust: none;
+    background-color: var(--a-surface-neutral);
+    animation-duration: 2s;
+  }
+}

@navikt/core/css/stepper.css

@@ -70,6 +70,41 @@
   margin: calc(var(--navds-stepper-border-width) * -1) calc(var(--navds-stepper-border-width) * -1) 1.75rem;
 }
 
+@media (forced-colors: active) {
+  .navds-stepper__step {
+    background-color: ButtonFace;
+    color: ButtonText;
+  }
+
+  .navds-stepper__circle.navds-stepper__circle {
+    border: 0;
+  }
+
+  .navds-stepper__step .navds-stepper__circle {
+    forced-color-adjust: none;
+    background-color: ButtonText;
+    border-color: ButtonText;
+    color: ButtonFace;
+  }
+
+  .navds-stepper__step.navds-stepper__step:focus-visible {
+    box-shadow: none;
+    outline: 2px solid highlight;
+    outline-offset: 2px;
+  }
+
+  .navds-stepper__step.navds-stepper__step--active .navds-stepper__circle {
+    forced-color-adjust: none;
+    background-color: highlight;
+    border-color: highlighttext;
+    color: highlighttext;
+  }
+
+  .navds-stepper__line {
+    background-color: ButtonText;
+  }
+}
+
 button.navds-stepper__step {
   appearance: none;
   border: none;
@@ -185,6 +220,10 @@ button.navds-stepper__step {
   color: var(--ac-stepper-active, var(--a-text-action-selected));
 }
 
+.navds-stepper__step:hover:where(:not(.navds-stepper__step--non-interactive)) {
+  color: var(--ac-stepper-hover-active, var(--a-text-action-hover));
+}
+
 :where(.navds-stepper__step:hover) .navds-stepper__content {
   text-decoration: underline;
 }
@@ -204,8 +243,7 @@ button.navds-stepper__step {
 }
 
 :where(.navds-stepper__step:not(.navds-stepper__step--active):hover) .navds-stepper__circle--success {
-  color: var(--ac-stepper-hover-bg, var(--a-surface-action-subtle-hover));
-  background-color: var(--ac-stepper-text, var(--a-surface-action));
+  background-color: var(--ac-stepper-text, var(--a-surface-action-hover));
 }
 
 /* Non-interactive */

@navikt/core/css/table.css

@@ -264,3 +264,29 @@
 .navds-table--small .navds-table__expanded-row-content {
   padding: var(--a-spacing-2) calc(var(--a-spacing-2) + 3rem);
 }
+
+@media (forced-colors: active) {
+  .navds-date.navds-date button.rdp-day_selected {
+    forced-color-adjust: none;
+    background-color: highlight;
+    color: highlighttext;
+    box-shadow: none;
+  }
+
+  .navds-date.navds-date button {
+    color: buttontext;
+    forced-color-adjust: none;
+    outline: none;
+    box-shadow: none;
+  }
+
+  .navds-date button:focus-visible {
+    color: buttontext;
+    forced-color-adjust: none;
+    outline: 2px solid highlight;
+  }
+
+  .navds-date.navds-date button.rdp-day_disabled {
+    color: GrayText;
+  }
+}

@navikt/core/css/tabs.css

@@ -58,19 +58,20 @@
 }
 
 .navds-tabs__tab[aria-selected="true"] {
-  box-shadow: inset 0 -3px 0 0 var(--ac-tabs-selected-border, var(--a-border-action));
+  box-shadow: inset 0 -3px 0 0 var(--ac-tabs-selected-border, var(--a-border-action-selected));
   color: var(--ac-tabs-selected-text, var(--a-text-default));
 }
 
 .navds-tabs__tab:focus-visible {
-  outline: none;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
   box-shadow: inset var(--a-shadow-focus);
   color: var(--ac-tabs-focus-text, var(--a-text-default));
 }
 
 @supports not selector(:focus-visible) {
   .navds-tabs__tab:focus {
-    outline: none;
+    outline: 2px solid transparent;
     box-shadow: inset var(--a-shadow-focus);
     color: var(--ac-tabs-focus-text, var(--a-text-default));
   }
@@ -117,13 +118,29 @@
 }
 
 .navds-tabs__tabpanel:focus-visible {
-  outline: none;
+  outline: 2px solid transparent;
   box-shadow: inset 0 0 0 2px var(--a-border-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-tabs__tabpanel:focus {
-    outline: none;
+    outline: 2px solid transparent;
     box-shadow: inset 0 0 0 2px var(--a-border-focus);
   }
 }
+
+@media (forced-colors: active) {
+  .navds-tabs__tab[aria-selected="true"] {
+    border-bottom: 3px solid canvastext;
+    padding-block-end: calc(var(--a-spacing-3) - 3px);
+  }
+
+  .navds-tabs__tab--small[aria-selected="true"] {
+    padding-block-end: calc(var(--a-spacing-1-alt) - 3px);
+  }
+
+  .navds-tabs__tab-icon--top[aria-selected="true"],
+  .navds-tabs__tab--small.navds-tabs__tab-icon--top[aria-selected="true"] {
+    padding-block-end: calc(var(--a-spacing-1) - 3px);
+  }
+}

@navikt/core/css/tag.css

@@ -180,3 +180,15 @@
   background-color: var(--ac-tag-alt-3-moderate-bg, var(--a-surface-alt-3-moderate));
   color: var(--ac-tag-alt-3-moderate-text, var(--a-text-default));
 }
+
+@media (forced-colors: active) {
+  .navds-tag {
+    forced-color-adjust: none;
+  }
+
+  .navds-tag--neutral,
+  .navds-tag--neutral-moderate {
+    border-color: canvastext;
+    color: canvastext;
+  }
+}

@navikt/core/css/timeline.css

@@ -393,3 +393,57 @@
   border-right-color: transparent;
   border-top-color: transparent;
 }
+
+@media (forced-colors: active) {
+  .navds-timeline__period:focus {
+    outline: 2px solid highlight;
+    outline-offset: 2px;
+  }
+
+  .navds-timeline__period--success,
+  .navds-timeline__period--warning,
+  .navds-timeline__period--info,
+  .navds-timeline__period--neutral,
+  .navds-timeline__period--danger {
+    forced-color-adjust: none;
+  }
+
+  .navds-timeline__row {
+    border: 1px solid transparent;
+  }
+
+  .navds-timeline__pin-wrapper::before {
+    border: 1px solid transparent;
+  }
+
+  .navds-timeline__pin-button {
+    outline: 4px solid transparent;
+  }
+
+  .navds-timeline__pin-button:focus,
+  .navds-timeline__pin-button:focus-visible {
+    outline: 4px solid highlight;
+    outline-offset: 2px;
+    box-shadow: none;
+  }
+
+  .navds-timeline__popover[data-placement^="top"] > .navds-timeline__popover-arrow {
+    border-left-color: canvas;
+    border-top-color: canvas;
+  }
+
+  .navds-timeline__popover[data-placement^="bottom"] > .navds-timeline__popover-arrow {
+    border-bottom-color: canvas;
+    border-right-color: canvas;
+  }
+
+  .navds-timeline__popover[data-placement^="left"] > .navds-timeline__popover-arrow {
+    border-left-color: canvas;
+    border-bottom-color: canvas;
+  }
+
+  .navds-timeline__popover[data-placement^="right"] > .navds-timeline__popover-arrow {
+    border-right-color: canvas;
+    border-top-color: canvas;
+  }
+}

@navikt/core/css/toggle-group.css

@@ -65,7 +65,8 @@
 }
 
 .navds-toggle-group__button:focus-visible {
-  outline: none;
+  outline: 2px solid transparent;
+  outline-offset: 1px;
   box-shadow:
     0 0 0 1px var(--a-surface-default),
     0 0 0 4px var(--a-border-focus);
@@ -73,7 +74,8 @@
 
 @supports not selector(:focus-visible) {
   .navds-toggle-group__button:focus {
-    outline: none;
+    outline: 2px solid transparent;
+    outline-offset: 1px;
     box-shadow:
       0 0 0 1px var(--a-surface-default),
       0 0 0 4px var(--a-border-focus);
@@ -144,3 +146,32 @@
 .navds-toggle-group--small > .navds-toggle-group__button > .navds-toggle-group__button-inner > svg {
   font-size: 1.125rem;
 }
+
+@media (forced-colors: active) {
+  .navds-toggle-group {
+    border: 2px solid transparent;
+  }
+
+  .navds-toggle-group__button:hover {
+    color: highlight;
+  }
+
+  .navds-toggle-group__button[aria-checked="true"],
+  .navds-toggle-group__button[aria-pressed="true"] {
+    background-color: selecteditem;
+    color: selecteditemtext;
+  }
+
+  .navds-toggle-group__button[aria-checked="true"] > *,
+  .navds-toggle-group__button[aria-pressed="true"] > * {
+    forced-color-adjust: none;
+  }
+
+  .navds-toggle-group__button:active {
+    background-color: none !important;
+  }
+
+  .navds-toggle-group__button:focus-visible {
+    outline-color: highlight;
+  }
+}

@navikt/core/css/tokens.json

@@ -40,6 +40,7 @@
     "--ac-button-secondary-border": "--a-border-action",
     "--ac-button-secondary-hover-text": "--a-text-action-on-action-subtle",
     "--ac-button-secondary-hover-bg": "--a-surface-action-subtle-hover",
+    "--ac-button-secondary-hover-border": "--a-border-action-hover",
     "--ac-button-secondary-focus-border": "--a-border-action",
     "--ac-button-secondary-active-text": "--a-text-on-action",
     "--ac-button-secondary-active-bg": "--a-surface-action-active",
@@ -117,7 +118,7 @@
     "--ac-copybutton-border-radius": "--a-border-radius-medium",
     "--ac-copybutton-action-text": "--a-text-action",
     "--ac-copybutton-action-bg": "--a-surface-transparent",
-    "--ac-copybutton-action-hover-text": "--a-text-action",
+    "--ac-copybutton-action-hover-text": "--a-text-action-hover",
     "--ac-copybutton-action-hover-bg": "--a-surface-hover",
     "--ac-copybutton-action-active-text": "--a-icon-success",
     "--ac-copybutton-neutral-text": "--a-text-subtle",
@@ -161,16 +162,19 @@
     "--ac-guide-panel-illustration-bg": "--a-surface-alt-3-subtle"
   },
   "helptext": {
+    "--ac-help-text-popover-bg": "--a-surface-info-subtle",
     "--ac-help-text-button-color": "--a-surface-action",
-    "--ac-help-text-popover-bg": "--a-surface-info-subtle"
+    "--ac-help-text-button-hover-color": "--a-surface-action-hover",
+    "--ac-help-text-button-active-color": "--a-surface-action-active"
   },
   "linkpanel": {
     "--ac-link-panel-text": "--a-text-default",
-    "--ac-link-panel-hover-text": "--a-text-action",
-    "--ac-link-panel-hover-border": "--a-border-action"
+    "--ac-link-panel-hover-text": "--a-text-action-hover",
+    "--ac-link-panel-hover-border": "--a-border-action-hover"
   },
   "link": {
     "--ac-link-text": "--a-text-action",
+    "--ac-link-hover-text": "--a-text-action-hover",
     "--ac-link-focus-text": "--a-text-on-action",
     "--ac-link-focus-bg": "--a-border-focus",
     "--ac-link-focus-border": "--a-border-focus",
@@ -217,6 +221,7 @@
   "readmore": {
     "--ac-read-more-text": "--a-text-action",
     "--ac-read-more-hover-bg": "--a-surface-hover",
+    "--ac-read-more-hover-text": "--a-text-action-hover",
     "--ac-read-more-active-bg": "--a-surface-active",
     "--ac-read-more-line": "--a-border-divider"
   },
@@ -232,6 +237,7 @@
     "--ac-stepper-active-bg": "--a-surface-action-selected",
     "--ac-stepper-active-border": "--a-border-action-selected",
     "--ac-stepper-active-text": "--a-text-on-action",
+    "--ac-stepper-hover-active": "--a-text-action-hover",
     "--ac-stepper-hover-bg": "--a-surface-action-subtle-hover",
     "--ac-stepper-non-interactive-completed-bg": "--a-surface-subtle",
     "--ac-stepper-non-interactive-line-completed": "--a-border-strong",
@@ -258,7 +264,7 @@
     "--ac-tabs-border": "--a-border-divider",
     "--ac-tabs-text": "--a-text-default",
     "--ac-tabs-hover-border": "--a-border-subtle-hover",
-    "--ac-tabs-selected-border": "--a-border-action",
+    "--ac-tabs-selected-border": "--a-border-action-selected",
     "--ac-tabs-selected-text": "--a-text-default",
     "--ac-tabs-focus-text": "--a-text-default"
   },
@@ -361,7 +367,7 @@
   "checkbox-radio": {
     "--ac-radio-checkbox-bg": "--a-surface-default",
     "--ac-radio-checkbox-border": "--a-border-default",
-    "--ac-radio-checkbox-action": "--a-surface-action",
+    "--ac-radio-checkbox-action": "--a-surface-action-selected",
     "--ac-radio-checkbox-action-hover-bg": "--a-surface-action-subtle",
     "--ac-radio-checkbox-error-border": "--a-border-danger",
     "--ac-radio-checkbox-error-hover-bg": "--a-surface-danger-subtle"
@@ -372,9 +378,9 @@
   },
   "search": {
     "--ac-search-button-border": "--a-border-default",
-    "--ac-search-button-border-hover": "--a-border-action",
+    "--ac-search-button-border-hover": "--a-border-action-hover",
     "--ac-search-clear-icon": "--a-text-default",
-    "--ac-search-clear-icon-hover": "--a-text-action",
+    "--ac-search-clear-icon-hover": "--a-text-action-hover",
     "--ac-search-button-focus-active-border": "--a-surface-default",
     "--ac-search-error-border": "--a-border-danger"
   },
@@ -392,13 +398,16 @@
     "--ac-combobox-list-item-loading-bg": "--a-surface-default",
     "--ac-combobox-list-item-hover-border-left": "--a-border-strong",
     "--ac-combobox-list-item-selected-hover-border-left": "--a-border-focus",
+    "--ac-combobox-list-item-max-selected-bg": "--a-surface-info-subtle",
+    "--ac-combobox-list-item-max-selected-border": "--a-border-info",
     "--ac-combobox-error-border": "--a-border-danger"
   },
   "select": {
     "--ac-select-bg": "--a-surface-default",
     "--ac-select-text": "--a-text-default",
     "--ac-select-border": "--a-border-default",
-    "--ac-select-hover-bg": "--a-border-action",
+    "--ac-select-hover-border": "--a-border-action-hover",
+    "--ac-select-active-border": "--a-border-action-selected",
     "--ac-select-error-border": "--a-surface-danger"
   },
   "switch": {
@@ -416,7 +425,8 @@
     "--ac-textfield-border": "--a-border-default",
     "--ac-textfield-text": "--a-text-default",
     "--ac-textfield-placeholder": "--a-text-subtle",
-    "--ac-textfield-hover-border": "--a-border-action",
+    "--ac-textfield-hover-border": "--a-border-action-hover",
+    "--ac-textfield-active-border": "--a-border-action-selected",
     "--ac-textfield-error-border": "--a-border-danger"
   },
   "textarea": {
@@ -424,7 +434,8 @@
     "--ac-textarea-border": "--a-border-default",
     "--ac-textarea-text": "--a-text-default",
     "--ac-textarea-placeholder": "--a-text-subtle",
-    "--ac-textarea-hover-border": "--a-border-action",
+    "--ac-textarea-hover-border": "--a-border-action-hover",
+    "--ac-textarea-active-border": "--a-border-action-selected",
     "--ac-textarea-counter-text": "--a-text-subtle",
     "--ac-textarea-counter-error-text": "--a-text-danger",
     "--ac-textarea-error-border": "--a-border-danger"
@@ -433,6 +444,7 @@
     "--ac-dropdown-text": "--a-text-default",
     "--ac-dropdown-item-text": "--a-text-action",
     "--ac-dropdown-item-hover-bg": "--a-surface-action-subtle-hover",
+    "--ac-dropdown-item-hover-text": "--a-text-action-hover",
     "--ac-dropdown-item-active-bg": "--a-surface-action-active",
     "--ac-dropdown-item-active-text": "--a-text-on-active"
   },

@navikt/core/css/tooltip.css

@@ -51,3 +51,31 @@
   align-items: center;
   justify-content: center;
 }
+
+@media (forced-colors: active) {
+  .navds-tooltip {
+    --__a-tooltip-high-contrast-border: 1px solid transparent;
+
+    border: var(--__a-tooltip-high-contrast-border);
+  }
+
+  .navds-tooltip[data-side="top"] .navds-tooltip__arrow {
+    border-bottom: var(--__a-tooltip-high-contrast-border);
+    border-right: var(--__a-tooltip-high-contrast-border);
+  }
+
+  .navds-tooltip[data-side="right"] .navds-tooltip__arrow {
+    border-bottom: var(--__a-tooltip-high-contrast-border);
+    border-left: var(--__a-tooltip-high-contrast-border);
+  }
+
+  .navds-tooltip[data-side="bottom"] .navds-tooltip__arrow {
+    border-left: var(--__a-tooltip-high-contrast-border);
+    border-top: var(--__a-tooltip-high-contrast-border);
+  }
+
+  .navds-tooltip[data-side="left"] .navds-tooltip__arrow {
+    border-top: var(--__a-tooltip-high-contrast-border);
+    border-right: var(--__a-tooltip-high-contrast-border);
+  }
+}

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,171 @@
 # @navikt/ds-react
 
+## 6.1.0
+
+### Minor Changes
+
+- Komponenter støtter nå lokal import `@navikt/ds-react/Button`, [Dokumentasjon](https://aksel.nav.no/grunnleggende/kode/nextjs). ([#2745](https://github.com/navikt/aksel/pull/2745))
+
+### Patch Changes
+
+- Modal: Bedre feilmeldinger ved feil bruk av props ([#2744](https://github.com/navikt/aksel/pull/2744))
+
+- Modal: Ikke opphev scroll lock ved lukking av nesta modal (DatePicker) ([#2743](https://github.com/navikt/aksel/pull/2743))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@6.1.0
+  - @navikt/aksel-icons@6.1.0
+
+## 6.0.0
+
+### Major Changes
+
+- Chat: Fjernet deprecated props `backgroundColor` og `avatarBgColor`. Bruk prop `variant` som erstatning. ([#2623](https://github.com/navikt/aksel/pull/2623))
+
+- Search: Fjern 'type' fra SearchProps ([#2623](https://github.com/navikt/aksel/pull/2623))
+
+- Tokens: La til nytt brekkpunkt `2xl` for `1440px`. Alle primitives er oppdatert for å reflektere oppdateringen. Brukere av Tailwind vil måtte sjekke at overskriving av `screen: "2xl"` ikke brekker app. ([#2623](https://github.com/navikt/aksel/pull/2623))
+
+- ESM: ds-react og aksel-icons støtter nå native ESM 🎉 ([#2623](https://github.com/navikt/aksel/pull/2623))
+
+- OverridableComponent: Fikset feil som tillot vilkårlige props ([#2623](https://github.com/navikt/aksel/pull/2623))
+
+- Grid, ContentContainer: Komponenter er fjernet fra systemet. [Se migreringsguide](https://aksel.nav.no/grunnleggende/kode/migrering#dd2cfa9fb1d1). ([#2623](https://github.com/navikt/aksel/pull/2623))
+
+- Table: SortState.direction har nå `none` tilgjengelig: `"ascending" | "descending" | "none"` ([#2623](https://github.com/navikt/aksel/pull/2623))
+
+- Textarea: Fjernet div med klassen navds-textarea\_\_wrapper ([#2623](https://github.com/navikt/aksel/pull/2623))
+
+- Modal: Strengere prop-typer ([#2623](https://github.com/navikt/aksel/pull/2623))
+
+### Minor Changes
+
+- SSR: ds-react og aksel-icons støtter nå `use client` og kan brukes i nextjs app-router uten lokal re-eksportering. ([#2623](https://github.com/navikt/aksel/pull/2623))
+
+### Patch Changes
+
+- Updated dependencies [[`636c1ad49`](https://github.com/navikt/aksel/commit/636c1ad49b8afde54b0a1105fecdc6d47f333522), [`636c1ad49`](https://github.com/navikt/aksel/commit/636c1ad49b8afde54b0a1105fecdc6d47f333522), [`636c1ad49`](https://github.com/navikt/aksel/commit/636c1ad49b8afde54b0a1105fecdc6d47f333522), [`636c1ad49`](https://github.com/navikt/aksel/commit/636c1ad49b8afde54b0a1105fecdc6d47f333522)]:
+  - @navikt/ds-tokens@6.0.0
+  - @navikt/aksel-icons@6.0.0
+
+## 5.18.3
+
+### Patch Changes
+
+- Tooltip: Fikset regresjon der bruk av Tooltip ga hydration-error i nextjs ([#2738](https://github.com/navikt/aksel/pull/2738))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.18.3
+  - @navikt/aksel-icons@5.18.3
+
+## 5.18.2
+
+### Patch Changes
+
+- Modal: Oppdatert intern håntering av context i komponent ([#2714](https://github.com/navikt/aksel/pull/2714))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.18.2
+  - @navikt/aksel-icons@5.18.2
+
+## 5.18.1
+
+### Patch Changes
+
+- Panel: Komponent er nå markert som deprecated. Bruk `Box` i fremtiden. ([#2712](https://github.com/navikt/aksel/pull/2712))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.18.1
+  - @navikt/aksel-icons@5.18.1
+
+## 5.18.0
+
+### Minor Changes
+
+- Portal: Ny komponent `Portal` som lar deg enkelt bruke `createPortal`, også på serversiden ([#2697](https://github.com/navikt/aksel/pull/2697))
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.18.0
+  - @navikt/aksel-icons@5.18.0
+
+## 5.17.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.17.5
+  - @navikt/aksel-icons@5.17.5
+
+## 5.17.4
+
+### Patch Changes
+
+- Bleed: `marginInline='full'` og `reflectivePadding` kan nå brukes sammen. ([#2695](https://github.com/navikt/aksel/pull/2695))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.17.4
+  - @navikt/aksel-icons@5.17.4
+
+## 5.17.3
+
+### Patch Changes
+
+- :bug: Textarea: maxLength virker nå selv om man sender inn onChange uten å sende inn value ([#2690](https://github.com/navikt/aksel/pull/2690))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.17.3
+  - @navikt/aksel-icons@5.17.3
+
+## 5.17.2
+
+### Patch Changes
+
+- :bug: Textarea: Sett riktig høyde når brukt i Modal + StrictMode ([#2679](https://github.com/navikt/aksel/pull/2679))
+
+- DatePicker: Knapper fikk ikke riktig aria-label ([#2678](https://github.com/navikt/aksel/pull/2678))
+
+- Textarea: debounce ResizeObserver for å unngå feilmelding ([#2685](https://github.com/navikt/aksel/pull/2685))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.17.2
+  - @navikt/aksel-icons@5.17.2
+
+## 5.17.1
+
+### Patch Changes
+
+- Eksponer variabelen "role" i Search-komponenten ([#2667](https://github.com/navikt/aksel/pull/2667))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.17.1
+  - @navikt/aksel-icons@5.17.1
+
+## 5.17.0
+
+### Minor Changes
+
+- Høykontrast: Komponenter støtter nå standard høykontrast-modus på Windows ([#2680](https://github.com/navikt/aksel/pull/2680))
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.17.0
+  - @navikt/aksel-icons@5.17.0
+
+## 5.16.0
+
+### Minor Changes
+
+- :sparkles: Combobox: Mulighet for å begrense hvor mange valg bruker kan ta ([#2260](https://github.com/navikt/aksel/pull/2260))
+
+### Patch Changes
+
+- Updated dependencies [[`eff9b5ecc`](https://github.com/navikt/aksel/commit/eff9b5ecce2817e3823ce61be7635359eec98451)]:
+  - @navikt/aksel-icons@5.16.0
+  - @navikt/ds-tokens@5.16.0
+
 ## 5.15.1
 
 ### Patch Changes
@@ -950,7 +1116,7 @@
 
 ### Patch Changes
 
-- CopyButton: Fjernet use-client directive fra komponent. (warning i vite/rollup)
+- CopyButton: Fjernet use client directive fra komponent. (warning i vite/rollup)
 
 ## 3.2.0
 

@navikt/core/react/jest-setup.ts

@@ -1,7 +0,0 @@
-import "@testing-library/jest-dom/extend-expect";
-
-global.ResizeObserver = jest.fn().mockImplementation(() => ({
-  observe: jest.fn(),
-  unobserve: jest.fn(),
-  disconnect: jest.fn(),
-}));