Version Packages (#2616)

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

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname $0)/_/husky.sh"
 
-yarn pretty-quick --staged && yarn lint-staged
+yarn lint-staged

.prettierignore

@@ -1,2 +1,13 @@
 **/nais-dev.yaml
-**/nais-prod.yaml
+**/nais-prod.yaml
+**/codemod/**/tests/**/*.js
+node_modules
+.next
+dist
+public
+static
+cjs
+esm
+aksel-icons/template
+aksel-icons/icons/*.svg
+

.storybook/getting-started.stories.mdx

@@ -1,8 +1,8 @@
 import { Meta } from "@storybook/blocks";
 
 import AkselThumbnail from "./assets/aksel-thumbnail.png";
-import Setup from "./assets/setup.png";
 import Components from "./assets/components.png";
+import Setup from "./assets/setup.png";
 
 <Meta title="Getting started" />
 

.storybook/main.ts

@@ -10,7 +10,7 @@ module.exports = {
   ],
   addons: [
     "@storybook/addon-a11y",
-    "@whitespace/storybook-addon-html",
+    "@xfinx/storybook-addon-html",
     "@storybook/addon-interactions",
     {
       name: "@storybook/addon-storysource",

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @navikt/aksel-icons
 
+## 5.14.0
+
+## 5.13.0
+
+## 5.12.5
+
+## 5.12.4
+
 ## 5.12.3
 
 ## 5.12.2

@navikt/aksel-icons/__tests__/validate-files.js

@@ -16,7 +16,7 @@ describe(`Each SVG-file has a matching YML file`, () => {
     expect(
       ymlList
         .map((yml) => yml.replace(".yml", ".svg"))
-        .filter((file) => !svgList.includes(file))
+        .filter((file) => !svgList.includes(file)),
     ).toStrictEqual([]);
   });
 });
@@ -26,7 +26,7 @@ describe(`Each YML-file has a matching SVG file`, () => {
     expect(
       svgList
         .map((svg) => svg.replace(".svg", ".yml"))
-        .filter((file) => !ymlList.includes(file))
+        .filter((file) => !ymlList.includes(file)),
     ).toStrictEqual([]);
   });
 });

@navikt/aksel-icons/__tests__/validate-svg.mjs

@@ -1,9 +1,9 @@
-import { basename } from "path";
-import { unified } from "unified";
-import parse from "rehype-parse";
 import fastglob from "fast-glob";
 import { readFileSync } from "fs";
 import { select, selectAll } from "hast-util-select";
+import { basename } from "path";
+import parse from "rehype-parse";
+import { unified } from "unified";
 
 const basePath = "./icons";
 
@@ -20,11 +20,11 @@ describe(`Each icons has a valid code`, () => {
 
       it(`has valid attributes on root-node`, () => {
         const properties = Object.keys(
-          select(":root", iconAst).properties
+          select(":root", iconAst).properties,
         ).sort();
 
         expect(properties).toStrictEqual(
-          ["viewBox", "xmlns", "height", "width", "fill"].sort()
+          ["viewBox", "xmlns", "height", "width", "fill"].sort(),
         );
       });
 

@navikt/aksel-icons/config/figma/fetch-icons.mjs

@@ -8,7 +8,7 @@ export const fetchIcons = async () => {
         "Content-type": "application/json",
         "X-FIGMA-TOKEN": process.env.FIGMA_TOKEN,
       },
-    }
+    },
   )
     .then((x) => x.json())
     .catch((e) => {
@@ -33,7 +33,7 @@ export const fetchDownloadUrls = async (idArray) => {
           "Content-type": "application/json",
           "X-FIGMA-TOKEN": process.env.FIGMA_TOKEN,
         },
-      }
+      },
     )
       .then((x) => x.json())
       .then((x) => {

@navikt/aksel-icons/config/figma/icon-name.mjs

@@ -1,5 +1,5 @@
-import startCase from "lodash.startcase";
 import camelCase from "lodash.camelCase";
+import startCase from "lodash.startcase";
 
 export const resolveName = (icon) => {
   const isVariant = icon.name.startsWith("Variant=");

@navikt/aksel-icons/config/figma/index.mjs

@@ -1,10 +1,11 @@
 import { config } from "dotenv";
-import { fetchIcons, fetchDownloadUrls, fetchIcon } from "./fetch-icons.mjs";
-import { makeConfig } from "./make-configs.mjs";
-import { existsSync, writeFileSync, mkdirSync, rmSync, readdirSync } from "fs";
+import { existsSync, mkdirSync, readdirSync, rmSync, writeFileSync } from "fs";
 import { resolve } from "path";
+import { fetchDownloadUrls, fetchIcon, fetchIcons } from "./fetch-icons.mjs";
 import { resolveName } from "./icon-name.mjs";
+import { makeConfig } from "./make-configs.mjs";
 import { paginate } from "./paginate.mjs";
+
 config();
 /* https://www.figma.com/file/wEdyFjCQSBR3U7FvrMbPXa/Core-Icons-Next?node-id=277%3A1221&t=mUJzFvnsceYYXNL5-0 */
 
@@ -22,8 +23,8 @@ async function main() {
   const { images } = await fetchDownloadUrls(
     paginate(
       icons.map((x) => x.node_id),
-      400
-    ).map((x) => x.join(","))
+      400,
+    ).map((x) => x.join(",")),
   );
 
   if (existsSync(iconFolder)) {
@@ -46,7 +47,7 @@ async function main() {
         icon,
         {
           encoding: "utf8",
-        }
+        },
       );
   }
 

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

@@ -21,12 +21,14 @@ ymlList.forEach((file) => {
 
 fs.writeFileSync(
   path.resolve(__dirname, "../dist/metadata.js"),
-  `const metadata = ${JSON.stringify(metadata)};\n\n module.exports = metadata;`
+  `const metadata = ${JSON.stringify(
+    metadata,
+  )};\n\n module.exports = metadata;`,
 );
 
 fs.writeFileSync(
   path.resolve(__dirname, "../dist/metadata.mjs"),
-  `const metadata = ${JSON.stringify(metadata)};\n\n export default metadata;`
+  `const metadata = ${JSON.stringify(metadata)};\n\n export default metadata;`,
 );
 
 fs.writeFileSync(
@@ -46,5 +48,5 @@ fs.writeFileSync(
     [iconId: string]: AkselIcon;
   };
 
-  export default metadata;`
+  export default metadata;`,
 );

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

@@ -18,7 +18,7 @@ const template = (variables, { tpl }) => {
   });
 
   variables.props[0].properties.find(
-    (prop) => prop.key.name === "titleId"
+    (prop) => prop.key.name === "titleId",
   ).value = {
     type: "Identifier",
     name: "_titleId",

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

@@ -33,7 +33,7 @@ async function generateFile() {
       ymlData.category,
       categories.get(ymlData.category)
         ? [...categories.get(ymlData.category), ymlData.name]
-        : [ymlData.name]
+        : [ymlData.name],
     );
   });
 
@@ -42,8 +42,8 @@ async function generateFile() {
     value.forEach((icon) =>
       copyFileSync(
         `${basePath}/${icon}.svg`,
-        `${iconFolder}/${key}/${icon}.svg`
-      )
+        `${iconFolder}/${key}/${icon}.svg`,
+      ),
     );
   });
 }

@navikt/aksel-icons/figma-plugin/scripts/vite/vite-svgr-component.ts

@@ -1,4 +1,4 @@
-import { createFilter, FilterPattern } from "@rollup/pluginutils";
+import { FilterPattern, createFilter } from "@rollup/pluginutils";
 import type { Config } from "@svgr/core";
 import fs from "fs";
 import type { Plugin } from "vite";
@@ -27,7 +27,7 @@ export default function viteSvgr({
         const { transform } = await import("@svgr/core");
         const svgCode = await fs.promises.readFile(
           id.replace(/\?.*$/, ""),
-          "utf8"
+          "utf8",
         );
 
         const componentCode = await transform(svgCode, svgrOptions, {

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

@@ -1,7 +1,7 @@
 /* eslint-disable react/react-in-jsx-scope */
-import { Heading, Search, ToggleGroup } from "@navikt/ds-react";
 import Fuse from "fuse.js";
 import { useEffect, useMemo, useState } from "react";
+import { Heading, Search, ToggleGroup } from "@navikt/ds-react";
 import * as Icons from "../../../";
 import meta from "../../../dist/metadata";
 import "./app.css";
@@ -19,7 +19,7 @@ const fuseStroke = new Fuse(
       { name: "variant", weight: 1 },
     ],
     shouldSort: false,
-  }
+  },
 );
 
 const fuseFill = new Fuse(getFillIcon(Object.values(meta)), {
@@ -39,7 +39,7 @@ const App = () => {
   const [toggle, setToggle] = useState<"stroke" | "fill">("stroke");
 
   const [strokeIcons] = useState(
-    Object.values(meta).filter((x) => x.variant.toLowerCase() === "stroke")
+    Object.values(meta).filter((x) => x.variant.toLowerCase() === "stroke"),
   );
 
   const [fillIcons] = useState(getFillIcon(Object.values(meta)));
@@ -49,13 +49,13 @@ const App = () => {
       return categorizeIcons(
         query
           ? fuseFill.search(query).map((result) => result.item as any)
-          : fillIcons
+          : fillIcons,
       );
     }
     return categorizeIcons(
       query
         ? fuseStroke.search(query).map((result) => result.item as any)
-        : strokeIcons
+        : strokeIcons,
     );
   }, [toggle, query, strokeIcons, fillIcons]);
 
@@ -71,7 +71,7 @@ const App = () => {
           name,
         },
       },
-      "*"
+      "*",
     );
   };
 
@@ -95,7 +95,7 @@ const App = () => {
             name: e.target.id,
           },
         },
-        "*"
+        "*",
       );
     };
 

@navikt/aksel-icons/figma-plugin/src/ui/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

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

@@ -5,5 +5,5 @@ import App from "./App";
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 );

@navikt/aksel-icons/figma-plugin/src/ui/utils.ts

@@ -1,25 +1,25 @@
 import meta from "@navikt/aksel-icons/metadata";
 
 const subCategorizeIcons = (
-  icons: (typeof meta)[1][]
+  icons: (typeof meta)[1][],
 ): { sub_category: string; icons: (typeof meta)[1][] }[] => {
   const categories: { sub_category: string; icons: (typeof meta)[1][] }[] = [];
 
   for (const icon of icons) {
     const i = categories.findIndex(
-      ({ sub_category }) => icon.sub_category === sub_category
+      ({ sub_category }) => icon.sub_category === sub_category,
     );
     i !== -1
       ? categories[i].icons.push(icon)
       : categories.push({ sub_category: icon.sub_category, icons: [icon] });
   }
   return categories.sort((a, b) =>
-    a.sub_category.localeCompare(b.sub_category)
+    a.sub_category.localeCompare(b.sub_category),
   );
 };
 
 export const categorizeIcons = (
-  icons: (typeof meta)[1][]
+  icons: (typeof meta)[1][],
 ): {
   category: string;
   sub_categories: { sub_category: string; icons: (typeof meta)[1][] }[];
@@ -31,7 +31,7 @@ export const categorizeIcons = (
 
   for (const icon of icons) {
     const i = categories.findIndex(
-      ({ category }) => icon.category === category
+      ({ category }) => icon.category === category,
     );
     i !== -1
       ? categories[i].icons.push(icon)
@@ -44,13 +44,13 @@ export const categorizeIcons = (
 
 const noFill = (icon: (typeof meta)[1], icons: (typeof meta)[1][]) => {
   const foundFill = icons.find(
-    (x) => x.name.endsWith("Fill") && x.name.replace("Fill", "") === icon.name
+    (x) => x.name.endsWith("Fill") && x.name.replace("Fill", "") === icon.name,
   );
   return !foundFill;
 };
 
 export const getFillIcon = (icons: (typeof meta)[1][]) => {
   return icons.filter(
-    (x, _, z) => x.variant.toLowerCase() === "fill" || noFill(x, z)
+    (x, _, z) => x.variant.toLowerCase() === "fill" || noFill(x, z),
   );
 };

@navikt/aksel-icons/figma-plugin/vite.config.ui.ts

@@ -1,9 +1,7 @@
-import { defineConfig } from "vite";
-import path from "path";
-
-import { viteSingleFile } from "vite-plugin-singlefile";
 import react from "@vitejs/plugin-react";
-
+import path from "path";
+import { defineConfig } from "vite";
+import { viteSingleFile } from "vite-plugin-singlefile";
 import inlineSvg from "./scripts/vite/vite-inline-svg";
 import svgComponent from "./scripts/vite/vite-svgr-component";
 

@navikt/aksel-icons/icons.stories.tsx

@@ -1,7 +1,7 @@
-import * as AkselIcons from "@navikt/aksel-icons";
-import { StarFillIcon } from "@navikt/aksel-icons";
 import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
+import * as AkselIcons from "@navikt/aksel-icons";
+import { StarFillIcon } from "@navikt/aksel-icons";
 
 const meta = {
   title: "aksel-icons/Icons",

@navikt/aksel-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-icons",
-  "version": "5.12.3",
+  "version": "5.14.0",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/ikoner",
   "repository": {
@@ -51,7 +51,7 @@
     "!**/*.tsbuildinfo"
   ],
   "scripts": {
-    "create-icons": "svgr --silent --index-template config/index-template.js --out-dir src icons",
+    "create-icons": "svgr --no-prettier --silent --index-template config/index-template.js --out-dir src icons && prettier --write ./src",
     "parse-svg": "node -e 'require(\"./config/parse-svg.js\").main()'",
     "copy": "copyfiles util/* src",
     "update-metadata": "node config/metadata.js",
@@ -61,7 +61,7 @@
     "zip:icons": "node config/zip.js"
   },
   "devDependencies": {
-    "@svgr/cli": "6.2.1",
+    "@svgr/cli": "6.5.1",
     "adm-zip": "^0.5.10",
     "concurrently": "7.2.1",
     "copyfiles": "^2.4.1",

@navikt/aksel-stylelint/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @navikt/aksel-stylelint
 
+## 5.14.0
+
+## 5.13.0
+
+## 5.12.5
+
+## 5.12.4
+
+### Patch Changes
+
+- Stylelint: Støtter nå stylelint v16 ([#2591](https://github.com/navikt/aksel/pull/2591))
+
 ## 5.12.3
 
 ## 5.12.2

@navikt/aksel-stylelint/package.json

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

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

@@ -5,4 +5,4 @@ const rulesPlugins = Object.keys(rules).map((ruleName) => {
   return createPlugin(`${ruleName}`, rules[ruleName]);
 });
 
-export default rulesPlugins;
+module.exports = rulesPlugins;

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

@@ -2,11 +2,10 @@ import { readFileSync } from "node:fs";
 import { Node as PostCSSNode } from "postcss";
 import valueParser from "postcss-value-parser";
 import stylelint from "stylelint";
-
 import { isCustomProperty, tokenExists } from "../../utils";
 
 const packageJson = JSON.parse(
-  readFileSync(`${__dirname}/../../../package.json`).toString()
+  readFileSync(`${__dirname}/../../../package.json`).toString(),
 );
 
 const ruleName = "aksel/design-token-exists";
@@ -36,7 +35,7 @@ export const messages = stylelint.utils.ruleMessages(ruleName, {
 const checkDeclValue = (
   value: string,
   postcssResult: stylelint.PostcssResult,
-  rootNode: PostCSSNode
+  rootNode: PostCSSNode,
 ) => {
   valueParser(value).walk((node) => {
     if (
@@ -59,7 +58,7 @@ const checkDeclValue = (
 const checkDeclProp = (
   prop: string,
   postcssResult: stylelint.PostcssResult,
-  rootNode: PostCSSNode
+  rootNode: PostCSSNode,
 ) => {
   if (
     isCustomProperty(prop) &&

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

@@ -23,7 +23,7 @@ getTestRule()({
       description: "attempt to use '--ac-' token",
       message: messages.valueRefComponent(
         { prop: "width" },
-        "--ac-button-padding"
+        "--ac-button-padding",
       ),
       line: 1,
       endLine: 1,

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

@@ -1,7 +1,6 @@
-import stylelint from "stylelint";
 import { Node as PostCSSNode } from "postcss";
 import valueParser from "postcss-value-parser";
-
+import stylelint from "stylelint";
 import { getPackageVersion, isCustomProperty, tokenExists } from "../../utils";
 
 const ruleName = "aksel/design-token-no-component-reference";
@@ -23,7 +22,7 @@ const checkDeclValue = (
   controlledPrefixes: string[],
   value: string,
   postcssResult: stylelint.PostcssResult,
-  rootNode: PostCSSNode
+  rootNode: PostCSSNode,
 ) => {
   valueParser(value).walk((node) => {
     if (

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

@@ -1,11 +1,10 @@
-import stylelint from "stylelint";
 import { readFileSync } from "node:fs";
-
 import { Node as PostCSSNode } from "postcss";
+import stylelint from "stylelint";
 import { isCustomProperty } from "../../utils";
 
 const packageJson = JSON.parse(
-  readFileSync(`${__dirname}/../../../package.json`).toString()
+  readFileSync(`${__dirname}/../../../package.json`).toString(),
 );
 
 const ruleName = "aksel/design-token-no-global-override";
@@ -27,7 +26,7 @@ const checkDeclProp = (
   controlledPrefixes: string[],
   prop: string,
   postcssResult: stylelint.PostcssResult,
-  rootNode: PostCSSNode
+  rootNode: PostCSSNode,
 ) => {
   if (
     isCustomProperty(prop) &&

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

@@ -1,5 +1,5 @@
-import stylelint from "stylelint";
 import selectorParser from "postcss-selector-parser";
+import stylelint from "stylelint";
 
 const ruleName = "aksel/no-class-override";
 const url =

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

@@ -21,7 +21,7 @@ getTestRule()({
       description: "selector with deprecated class name 1",
       message: messages.unexpected(
         "navdsi-deprecated-example",
-        deprecations[0].message
+        deprecations[0].message,
       ),
       line: 2,
       endLine: 2,
@@ -33,7 +33,7 @@ getTestRule()({
       description: "selector with deprecated class name 2",
       message: messages.unexpected(
         "navdsi-other-deprecated-example",
-        deprecations[0].message
+        deprecations[0].message,
       ),
       line: 1,
       endLine: 1,
@@ -45,7 +45,7 @@ getTestRule()({
       description: "selector with deprecated class name 1",
       message: messages.unexpected(
         "navdsi-dropdown-example",
-        deprecations[1].message
+        deprecations[1].message,
       ),
       line: 2,
       endLine: 2,

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

@@ -1,5 +1,5 @@
-import stylelint from "stylelint";
 import selectorParser from "postcss-selector-parser";
+import stylelint from "stylelint";
 import { deprecations } from "../../deprecations";
 
 const ruleName = "aksel/no-deprecated-classes";
@@ -31,7 +31,7 @@ const ruleFunction: stylelint.Rule = () => {
             stylelint.utils.report({
               message: messages.unexpected(
                 className.value,
-                deprecation.message
+                deprecation.message,
               ),
               node,
               result: postcssResult,

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

@@ -1,5 +1,5 @@
-import stylelint from "stylelint";
 import valueParser from "postcss-value-parser";
+import stylelint from "stylelint";
 
 const ruleName = "aksel/no-internal-tokens";
 const url =

@navikt/aksel-stylelint/src/rules/index.ts

@@ -1,10 +1,10 @@
 import { Rule } from "stylelint";
 import designTokenExists from "./aksel-design-token-exists";
-import internalTokens from "./aksel-no-internal-tokens";
+import noComponentReference from "./aksel-design-token-no-component-reference";
+import noGlobalOverride from "./aksel-design-token-no-global-override";
 import classOverride from "./aksel-no-class-override";
 import deprecatedClasses from "./aksel-no-deprecated-classes";
-import noGlobalOverride from "./aksel-design-token-no-global-override";
-import noComponentReference from "./aksel-design-token-no-component-reference";
+import internalTokens from "./aksel-no-internal-tokens";
 
 export const rules: Record<string, Rule> = {
   "aksel/design-token-exists": designTokenExists,

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

@@ -94,7 +94,7 @@ const allowedTokenNames = [];
 
 export const tokenExists = (
   controlledPrefixes: string[],
-  inputToken: string
+  inputToken: string,
 ) => {
   // "singleton" if statement (attempt at caching file parsing)
   if (!allowedTokenNames.length) {
@@ -119,7 +119,7 @@ export const tokenExists = (
 };
 
 const packageJson = JSON.parse(
-  readFileSync(`${__dirname}/../package.json`).toString()
+  readFileSync(`${__dirname}/../package.json`).toString(),
 );
 
 export const getPackageVersion = () => {

@navikt/aksel/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @navikt/aksel
 
+## 5.14.0
+
+### Patch Changes
+
+- Updated dependencies [[`2fedeab60`](https://github.com/navikt/aksel/commit/2fedeab6050a69d2bb8d803c4e0d71739d443c7b), [`642f188fa`](https://github.com/navikt/aksel/commit/642f188fa7194226f68dc59ac18516d38e9733b5)]:
+  - @navikt/ds-css@5.14.0
+
+## 5.13.0
+
+### Patch Changes
+
+- Updated dependencies [[`145ce2e5f`](https://github.com/navikt/aksel/commit/145ce2e5f71d397acfa3306ed7b0e4253b9e02f6)]:
+  - @navikt/ds-css@5.13.0
+
+## 5.12.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.12.5
+
+## 5.12.4
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.12.4
+
 ## 5.12.3
 
 ### Patch Changes

@navikt/aksel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel",
-  "version": "5.12.3",
+  "version": "5.14.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 && jest",
-    "test:watch": "jest --watch"
+    "test": "yarn build && NODE_OPTIONS=--experimental-vm-modules yarn jest",
+    "test:watch": "NODE_OPTIONS=--experimental-vm-modules yarn jest --watch"
   },
   "bin": "./dist/index.js",
   "repository": {
@@ -29,7 +29,7 @@
   },
   "homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
   "dependencies": {
-    "@navikt/ds-css": "5.12.3",
+    "@navikt/ds-css": "5.14.0",
     "axios": "1.6.0",
     "chalk": "4.1.0",
     "clipboardy": "^2.3.0",

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

@@ -1,9 +1,9 @@
+import chalk from "chalk";
 import { Command } from "commander";
 import figlet from "figlet";
-import chalk from "chalk";
 import { getMigrationString } from "./migrations.js";
-import { validateGit, validateMigration } from "./validation.js";
 import { runCodeshift } from "./run-codeshift.js";
+import { validateGit, validateMigration } from "./validation.js";
 
 const program = new Command();
 
@@ -15,7 +15,7 @@ export function codemodCommand() {
     .addHelpText("beforeAll", figlet.textSync("Codemods"))
     .addHelpText(
       "afterAll",
-      chalk.gray(`\nAvailable migrations:\n${getMigrationString()}`)
+      chalk.gray(`\nAvailable migrations:\n${getMigrationString()}`),
     )
     .description("Migrations for Aksel components and more")
     .argument("<migration>", "Migration name")
@@ -23,18 +23,18 @@ export function codemodCommand() {
     .option("-e, --ext [extension]", "default: js,ts,jsx,tsx,css,scss,less")
     .option(
       "-g, --glob [glob]",
-      "Globbing pattern, overrides --ext! Run with 'noglob' if using zsh-terminal. "
+      "Globbing pattern, overrides --ext! Run with 'noglob' if using zsh-terminal. ",
     )
     .option("-d, --dry-run", "Dry run, no changes will be made")
     .option("-p, --print", "Print transformed files")
     .option(
       "-f, --force",
-      "Forcibly run migrations without checking git-changes"
+      "Forcibly run migrations without checking git-changes",
     )
     .addHelpText(
       "after",
       `\nExample:
-  $ npx @navikt/aksel --dry-run v2-css`
+  $ npx @navikt/aksel --dry-run v2-css`,
     )
     .action((str, options) => {
       validateMigration(str, program);

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

@@ -104,7 +104,7 @@ export function getWarning(str: string) {
 export function getMigrationNames() {
   return Object.values(migrations).reduce(
     (acc, val) => [...val.map((x) => x.value), ...acc],
-    [] as string[]
+    [] as string[],
   );
 }
 

@navikt/aksel/src/codemod/run-codeshift.ts

@@ -1,9 +1,9 @@
+import chalk from "chalk";
 import { Command } from "commander";
 import fg from "fast-glob";
 import * as jscodeshift from "jscodeshift/src/Runner";
 import path from "path";
 import { getMigrationPath, getWarning } from "./migrations";
-import chalk from "chalk";
 
 const ignoreNodeModules = [
   "**/node_modules/**",
@@ -16,11 +16,11 @@ const ignoreNodeModules = [
 export async function runCodeshift(
   input: string,
   options: any,
-  program: Command
+  program: Command,
 ) {
   const codemodPath = path.join(
     __dirname,
-    `./transforms/${getMigrationPath(input)}.js`
+    `./transforms/${getMigrationPath(input)}.js`,
   );
 
   const filepaths = fg.sync([options.glob ?? getDefaultGlob(options?.ext)], {

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

@@ -1,6 +1,6 @@
-import { getMigrationNames, getMigrationPath } from "../migrations";
-import path from "path";
 import fs from "fs";
+import path from "path";
+import { getMigrationNames, getMigrationPath } from "../migrations";
 
 describe("migrations", () => {
   const values = getMigrationNames();
@@ -10,7 +10,7 @@ describe("migrations", () => {
     const checkPath = path.join(
       process.cwd(),
       "dist/codemod",
-      `transforms/${x}.js`
+      `transforms/${x}.js`,
     );
     test(`Check transform-path: ${checkPath}`, () => {
       expect(fs.existsSync(checkPath)).toBeTruthy();

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

@@ -16,12 +16,12 @@ export default function transformer(file, api) {
       (attr) =>
         attr.type === "JSXAttribute" &&
         attr.name.name === "data-version" &&
-        attr.value.value === "v1"
+        attr.value.value === "v1",
     );
 
     if (!isMigrated) {
       attributes.push(
-        j.jsxAttribute(j.jsxIdentifier("data-version"), j.literal("v1"))
+        j.jsxAttribute(j.jsxIdentifier("data-version"), j.literal("v1")),
       );
     }
   }
@@ -30,12 +30,12 @@ export default function transformer(file, api) {
   function addExplicitStandardProp(node) {
     const attributes = node.openingElement.attributes;
     const variant = attributes.find(
-      (attr) => attr.type === "JSXAttribute" && attr.name.name === "size"
+      (attr) => attr.type === "JSXAttribute" && attr.name.name === "size",
     );
 
     if (!variant) {
       attributes.unshift(
-        j.jsxAttribute(j.jsxIdentifier("size"), j.literal("small"))
+        j.jsxAttribute(j.jsxIdentifier("size"), j.literal("small")),
       );
       addMigrationTag(node);
     }
@@ -59,7 +59,7 @@ export default function transformer(file, api) {
   if (j(file.source).findJSXElements(localName)) {
     root.findJSXElements(`${localName}`).forEach((parent) => {
       const skip = !!parent.value.openingElement?.attributes.find(
-        (x) => x.name.name === "data-version" && x.value.value === "v1"
+        (x) => x.name.name === "data-version" && x.value.value === "v1",
       );
 
       parent.value.openingElement?.attributes.forEach((x) => {

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

@@ -1,6 +1,6 @@
-import transformTabs from "../tabs/tabs";
 import transformChat from "../chat/chat";
 import transformPagination from "../pagination/pagination";
+import transformTabs from "../tabs/tabs";
 
 /**
  * @param {import('jscodeshift').FileInfo} file

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

@@ -1,4 +1,4 @@
-import { tokens } from "../../../tokens-map.mjs";
+import { tokens } from "../../../tokens-map.js";
 
 /**
  * @param {import('jscodeshift').FileInfo} file

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

@@ -1,5 +1,5 @@
 import type { JSCodeshift } from "jscodeshift";
-import { tokens } from "../../../tokens-map.mjs";
+import { tokens } from "../../../tokens-map.js";
 import {
   getImportSpecifier,
   getImportSpecifierName,
@@ -21,7 +21,7 @@ export default function transformer(file: JSCodeshift, api) {
 
   const jsImport = root.find(j.ImportDeclaration).filter((x) => {
     return ["@navikt/ds-tokens/dist/tokens"].includes(
-      x.node.source.value as string
+      x.node.source.value as string,
     );
   });
 
@@ -36,7 +36,7 @@ export default function transformer(file: JSCodeshift, api) {
     let foundName: string = "";
 
     getImportSpecifier(j, root, name, "@navikt/ds-tokens/dist/tokens").forEach(
-      (x) => (foundName = x.node.imported.name)
+      (x) => (foundName = x.node.imported.name),
     );
 
     if (name === foundName) {
@@ -45,7 +45,7 @@ export default function transformer(file: JSCodeshift, api) {
           j,
           root,
           name,
-          "@navikt/ds-tokens/dist/tokens"
+          "@navikt/ds-tokens/dist/tokens",
         ) || name;
 
       renameImportSpecifier(
@@ -53,7 +53,7 @@ export default function transformer(file: JSCodeshift, api) {
         root,
         name,
         out,
-        "@navikt/ds-tokens/dist/tokens"
+        "@navikt/ds-tokens/dist/tokens",
       );
 
       let code = root.toSource(getLineTerminator(file.source));

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

@@ -1,5 +1,5 @@
+import { tokens } from "../../../tokens-map.js";
 import { translateToken } from "../../../utils/translate-token";
-import { tokens } from "../../../tokens-map.mjs";
 
 /**
  * @param {import('jscodeshift').FileInfo} file

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

@@ -1,5 +1,5 @@
+import { tokens } from "../../../tokens-map.js";
 import { translateToken } from "../../../utils/translate-token";
-import { tokens } from "../../../tokens-map.mjs";
 
 /**
  * @param {import('jscodeshift').FileInfo} file

@navikt/aksel/src/codemod/transforms/v3.0.0/copybutton/copybutton.ts

@@ -1,7 +1,7 @@
 import chalk from "chalk";
+import { getLineTerminator } from "../../../utils/lineterminator";
 import moveAndRenameImport from "../../../utils/moveAndRenameImport";
 import removePropsFromComponent from "../../../utils/removeProps";
-import { getLineTerminator } from "../../../utils/lineterminator";
 
 /**
  * @param {import('jscodeshift').FileInfo} file
@@ -48,22 +48,22 @@ export default function transformer(file, api) {
       if (
         children.length > 0 &&
         !node.node.openingElement.attributes.some(
-          (attr) => attr.name.name === "text"
+          (attr) => attr.name.name === "text",
         )
       ) {
         if (children.length === 1 && children[0].type === "JSXText") {
           node.node.openingElement.attributes.push(
             j.jsxAttribute(
               j.jsxIdentifier("text"),
-              j.literal(children[0].value.trim())
-            )
+              j.literal(children[0].value.trim()),
+            ),
           );
         } else {
           flagged = true;
           console.log(
             chalk.yellow(
-              `\n\nWarning: Detected advanced children-type!\nCodemod can't convert into "text" prop so you will need to update this manually.`
-            )
+              `\n\nWarning: Detected advanced children-type!\nCodemod can't convert into "text" prop so you will need to update this manually.`,
+            ),
           );
         }
       }

@navikt/aksel/src/codemod/transforms/v4.0.0/internal-css/tests/complete.input.css

@@ -338,8 +338,10 @@ button.navdsi-header__title:active,
   border: none;
   cursor: pointer;
   background: var(--a-surface-default);
-  box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
-    0 0 0 4px var(--ac-timeline-pin-bg, var(--a-surface-danger)), 0 0 0 5px var(--a-surface-default);
+  box-shadow:
+    inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+    0 0 0 4px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+    0 0 0 5px var(--a-surface-default);
   z-index: 2;
   border-radius: var(--a-border-radius-full);
   padding: 3.5px;
@@ -358,34 +360,44 @@ button.navdsi-header__title:active,
 }
 
 .navdsi-timeline__pin-button:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
-    0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)), 0 0 0 4px var(--a-surface-default),
+  box-shadow:
+    inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+    0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+    0 0 0 4px var(--a-surface-default),
     0 0 0 6px var(--a-border-focus);
   outline: none;
 }
 
 .navdsi-timeline__pin-button:hover {
-  box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
-    0 0 0 4px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)), 0 0 0 5px var(--a-surface-default);
+  box-shadow:
+    inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+    0 0 0 4px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+    0 0 0 5px var(--a-surface-default);
 }
 
 .navdsi-timeline__pin-button:hover:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
-    0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)), 0 0 0 4px var(--a-surface-default),
+  box-shadow:
+    inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+    0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+    0 0 0 4px var(--a-surface-default),
     0 0 0 6px var(--a-border-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navdsi-timeline__pin-button:focus {
-    box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
-      0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)), 0 0 0 4px var(--a-surface-default),
+    box-shadow:
+      inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+      0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+      0 0 0 4px var(--a-surface-default),
       0 0 0 6px var(--a-border-focus);
     outline: none;
   }
 
   .navdsi-timeline__pin-button:hover:focus {
-    box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
-      0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)), 0 0 0 4px var(--a-surface-default),
+    box-shadow:
+      inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+      0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+      0 0 0 4px var(--a-surface-default),
       0 0 0 6px var(--a-border-focus);
   }
 }
@@ -444,7 +456,8 @@ button.navdsi-header__title:active,
 }
 
 .navdsi-timeline__period--selected:focus-visible {
-  box-shadow: inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
+  box-shadow:
+    inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
     0 0 0 2px var(--a-border-focus);
   z-index: 3;
 }
@@ -454,7 +467,9 @@ button.navdsi-header__title:active,
 }
 
 .navdsi-timeline__zoom-button:focus-visible {
-  box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 3px var(--a-border-focus);
+  box-shadow:
+    0 0 0 1px var(--a-surface-default),
+    0 0 0 3px var(--a-border-focus);
   border-width: 1px;
 }
 
@@ -471,13 +486,16 @@ button.navdsi-header__title:active,
   }
 
   .navdsi-timeline__period--selected:focus {
-    box-shadow: inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
+    box-shadow:
+      inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
       0 0 0 2px var(--a-border-focus);
     z-index: 3;
   }
 
   .navdsi-timeline__zoom-button:focus {
-    box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 3px var(--a-border-focus);
+    box-shadow:
+      0 0 0 1px var(--a-surface-default),
+      0 0 0 3px var(--a-border-focus);
     border-width: 1px;
   }
 

@navikt/aksel/src/codemod/transforms/v4.0.0/internal-css/tests/complete.output.css

@@ -337,8 +337,10 @@ button.navds-internalheader__title:active,
   border: none;
   cursor: pointer;
   background: var(--a-surface-default);
-  box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
-    0 0 0 4px var(--ac-timeline-pin-bg, var(--a-surface-danger)), 0 0 0 5px var(--a-surface-default);
+  box-shadow:
+    inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+    0 0 0 4px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+    0 0 0 5px var(--a-surface-default);
   z-index: 2;
   border-radius: var(--a-border-radius-full);
   padding: 3.5px;
@@ -357,34 +359,44 @@ button.navds-internalheader__title:active,
 }
 
 .navds-timeline__pin-button:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
-    0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)), 0 0 0 4px var(--a-surface-default),
+  box-shadow:
+    inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+    0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+    0 0 0 4px var(--a-surface-default),
     0 0 0 6px var(--a-border-focus);
   outline: none;
 }
 
 .navds-timeline__pin-button:hover {
-  box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
-    0 0 0 4px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)), 0 0 0 5px var(--a-surface-default);
+  box-shadow:
+    inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+    0 0 0 4px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+    0 0 0 5px var(--a-surface-default);
 }
 
 .navds-timeline__pin-button:hover:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
-    0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)), 0 0 0 4px var(--a-surface-default),
+  box-shadow:
+    inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+    0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+    0 0 0 4px var(--a-surface-default),
     0 0 0 6px var(--a-border-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-timeline__pin-button:focus {
-    box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
-      0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)), 0 0 0 4px var(--a-surface-default),
+    box-shadow:
+      inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+      0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+      0 0 0 4px var(--a-surface-default),
       0 0 0 6px var(--a-border-focus);
     outline: none;
   }
 
   .navds-timeline__pin-button:hover:focus {
-    box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
-      0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)), 0 0 0 4px var(--a-surface-default),
+    box-shadow:
+      inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+      0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+      0 0 0 4px var(--a-surface-default),
       0 0 0 6px var(--a-border-focus);
   }
 }
@@ -443,7 +455,8 @@ button.navds-internalheader__title:active,
 }
 
 .navds-timeline__period--selected:focus-visible {
-  box-shadow: inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
+  box-shadow:
+    inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
     0 0 0 2px var(--a-border-focus);
   z-index: 3;
 }
@@ -453,7 +466,9 @@ button.navds-internalheader__title:active,
 }
 
 .navds-timeline__zoom-button:focus-visible {
-  box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 3px var(--a-border-focus);
+  box-shadow:
+    0 0 0 1px var(--a-surface-default),
+    0 0 0 3px var(--a-border-focus);
   border-width: 1px;
 }
 
@@ -470,13 +485,16 @@ button.navds-internalheader__title:active,
   }
 
   .navds-timeline__period--selected:focus {
-    box-shadow: inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
+    box-shadow:
+      inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
       0 0 0 2px var(--a-border-focus);
     z-index: 3;
   }
 
   .navds-timeline__zoom-button:focus {
-    box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 3px var(--a-border-focus);
+    box-shadow:
+      0 0 0 1px var(--a-surface-default),
+      0 0 0 3px var(--a-border-focus);
     border-width: 1px;
   }
 

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

@@ -1,10 +1,8 @@
+import { applyTransform } from "jscodeshift/dist/testUtils";
 import fs from "node:fs";
 import path from "node:path";
-
 import prettier from "prettier";
 
-import { applyTransform } from "jscodeshift/dist/testUtils";
-
 interface TestT {
   fixture: string;
   migration: string;
@@ -14,7 +12,7 @@ interface TestT {
 
 export function check(
   dirName: string,
-  { fixture, migration, extension = "js", options = {} }: TestT
+  { fixture, migration, extension = "js", options = {} }: TestT,
 ) {
   describe(migration, () => {
     it(fixture, async () => {
@@ -24,7 +22,7 @@ export function check(
       const source = fs.readFileSync(inputPath, "utf8");
       const expected = fs.readFileSync(
         path.join(fixtureDir, `${fixture}.output.${extension}`),
-        "utf8"
+        "utf8",
       );
       // Assumes transform is one level up from tests directory
       const module = await import(path.join(dirName, "..", migration));
@@ -34,13 +32,13 @@ export function check(
 
       // Format output and expected with prettier for white spaces and line breaks consistency
       expect(
-        prettier.format(output, {
+        await prettier.format(output, {
           parser: parser === "js" ? "typescript" : parser,
-        })
+        }),
       ).toBe(
-        prettier.format(expected, {
+        await prettier.format(expected, {
           parser: parser === "js" ? "typescript" : parser,
-        })
+        }),
       );
     });
   });

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

@@ -4,7 +4,7 @@ export function getImportSpecifier(
   j: core.JSCodeshift,
   source: Collection<any>,
   specifier: string,
-  sourcePath: string
+  sourcePath: string,
 ) {
   return source
     .find(j.ImportDeclaration)
@@ -18,10 +18,10 @@ export function renameImportSpecifier(
   source: Collection<any>,
   specifier: string,
   newSpecifier: string,
-  sourcePath: string
+  sourcePath: string,
 ) {
   getImportSpecifier(j, source, specifier, sourcePath).replaceWith(
-    j.importSpecifier(j.identifier(newSpecifier))
+    j.importSpecifier(j.identifier(newSpecifier)),
   );
 }
 
@@ -29,7 +29,7 @@ export function getImportSpecifierName(
   j: core.JSCodeshift,
   source: Collection<any>,
   specifier: string,
-  sourcePath: string
+  sourcePath: string,
 ) {
   const specifiers = getImportSpecifier(j, source, specifier, sourcePath);
 

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

@@ -15,7 +15,7 @@ export default function moveAndRenameImport(
     fromName: string;
     toName: string;
     ignoreAlias?: boolean;
-  }
+  },
 ) {
   /* Does package-name exist */
   const existingFromImport = root.find(j.ImportDeclaration, {
@@ -36,7 +36,7 @@ export default function moveAndRenameImport(
         localname = node.local.name;
       }
       return node.imported.name === fromName;
-    }
+    },
   );
 
   if (!existingFromImport.length || !existingFromImportSpecifier?.length) {
@@ -79,7 +79,7 @@ export default function moveAndRenameImport(
     } else {
       const newImport = j.importDeclaration(
         [newImportSpecifier],
-        j.stringLiteral(toImport)
+        j.stringLiteral(toImport),
       );
 
       const lastImport = root.find(j.ImportDeclaration).at(-1);

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

@@ -4,7 +4,7 @@ export default function removePropsFromComponent(
   j: core.JSCodeshift,
   root: Collection<any>,
   componentName: string,
-  propsToRemove: string[]
+  propsToRemove: string[],
 ) {
   const component = root.findJSXElements(componentName);
 

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

@@ -20,12 +20,12 @@ const tokens = [
 describe("Translating tokens to correct format", () => {
   test("To scss", () => {
     tokens.forEach((x) =>
-      expect(translateToken(x.name, "scss")).toEqual(x.scss)
+      expect(translateToken(x.name, "scss")).toEqual(x.scss),
     );
   });
   test("To less", () => {
     tokens.forEach((x) =>
-      expect(translateToken(x.name, "less")).toEqual(x.less)
+      expect(translateToken(x.name, "less")).toEqual(x.less),
     );
   });
   test("To js", () => {

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

@@ -2,9 +2,9 @@ import chalk from "chalk";
 import { Command } from "commander";
 import isGitClean from "is-git-clean";
 import {
-  getMigrationString,
   getMigrationNames,
   getMigrationPath,
+  getMigrationString,
 } from "./migrations.js";
 
 export function validateMigration(str: string, program: Command) {
@@ -12,9 +12,9 @@ export function validateMigration(str: string, program: Command) {
     program.error(
       chalk.red(
         `Migration <${str}> not found!\n${chalk.gray(
-          `\nAvailable migrations:\n${getMigrationString()}`
-        )}`
-      )
+          `\nAvailable migrations:\n${getMigrationString()}`,
+        )}`,
+      ),
     );
   }
   const path = getMigrationPath(str);
@@ -22,9 +22,9 @@ export function validateMigration(str: string, program: Command) {
     program.error(
       chalk.red(
         `Code for migration <${str}> not found!\n${chalk.gray(
-          `\nContact creator (Aksel) to get it fixed!\n`
-        )}`
-      )
+          `\nContact creator (Aksel) to get it fixed!\n`,
+        )}`,
+      ),
     );
   }
 }
@@ -51,8 +51,8 @@ export function validateGit(options: any, program: Command) {
   if (!clean) {
     program.error(
       `${chalk.yellow(
-        "\nBefore we continue, please stash or commit your git changes."
-      )}${"\nYou can use the --force flag to override this safety check."}`
+        "\nBefore we continue, please stash or commit your git changes.",
+      )}${"\nYou can use the --force flag to override this safety check."}`,
     );
   }
 }

@navikt/aksel/src/css-imports/generate-output.ts

@@ -1,18 +1,18 @@
-import { AnswersT, ComponentPrefix, layerSuffix } from "./config.js";
-import {
-  formCss,
-  typoCss,
-  componentsCss,
-  StyleMappings,
-  componentDir,
-  rootDir,
-  globalDir,
-  primitivesCss,
-} from "@navikt/ds-css/config/_mappings";
-import { inquiry } from "./inquiry";
+import chalk from "chalk";
 import clipboard from "clipboardy";
 import lodash from "lodash";
-import chalk from "chalk";
+import {
+  StyleMappings,
+  componentDir,
+  componentsCss,
+  formCss,
+  globalDir,
+  primitivesCss,
+  rootDir,
+  typoCss,
+} from "@navikt/ds-css/config/_mappings";
+import { AnswersT, ComponentPrefix, layerSuffix } from "./config.js";
+import { inquiry } from "./inquiry";
 
 export async function generateImportOutput(answers: AnswersT) {
   const useCdn = answers.cdn === "yes";
@@ -39,7 +39,7 @@ export async function generateImportOutput(answers: AnswersT) {
   answers["config-type"] === "regular"
     ? imports.push(simpleOutput(useCdn, answers.layers === "yes", version))
     : imports.push(
-        ...advancedOutput(answers, useCdn, answers.layers === "yes", version)
+        ...advancedOutput(answers, useCdn, answers.layers === "yes", version),
       );
 
   if (useTailwind) {
@@ -63,7 +63,7 @@ ${imports.join("\n")}
     console.log(
       `We recommend using Static imports, then uploading the your bundled static-files to your own CDN-instance.
 ✔︎ This allows you to control the version of the CSS-files with package.json, and avoids desync between ds-react/ds-css.
-✔︎ Remember to add 'https://cdn.nav.no' to your applications CSP!`
+✔︎ Remember to add 'https://cdn.nav.no' to your applications CSP!`,
     );
   }
 
@@ -71,17 +71,17 @@ ${imports.join("\n")}
     console.log(chalk.bold.underline.cyan(`\nNotes on Tailwind-use 📝`));
     console.log(
       `When using tailwind with Aksel, you will need to add the postcss plugin ${chalk.cyan(
-        "postcss-import"
+        "postcss-import",
       )}
 ✔︎ NPM: https://www.npmjs.com/package/postcss-import
-✔︎ Read more here: https://aksel.nav.no/grunnleggende/kode/tailwind`
+✔︎ Read more here: https://aksel.nav.no/grunnleggende/kode/tailwind`,
     );
   }
 
   if (answers.layers === "yes") {
     console.log(chalk.bold.underline.cyan(`\nNotes on Layers 📝`));
     console.log(
-      `Layers is not yet supported in Safari <= 15.3. (https://caniuse.com/css-cascade-layers)`
+      `Layers is not yet supported in Safari <= 15.3. (https://caniuse.com/css-cascade-layers)`,
     );
   }
 
@@ -101,11 +101,11 @@ function advancedOutput(
   answers: AnswersT,
   cdn: boolean,
   layers: boolean,
-  version: string
+  version: string,
 ) {
   const imports = ["/* Defaults */"];
   const baselineImports = answers.imports.filter(
-    (x) => !x.startsWith(ComponentPrefix) && x !== "default"
+    (x) => !x.startsWith(ComponentPrefix) && x !== "default",
   );
 
   const componentImports = answers.imports
@@ -146,7 +146,7 @@ function advancedOutput(
 
   if (componentImportsList.find((x) => x === primitivesCss)) {
     componentImportsList = componentImportsList.filter(
-      (x) => x !== primitivesCss
+      (x) => x !== primitivesCss,
     );
     componentImportsList.unshift(primitivesCss);
   }

@navikt/aksel/src/css-imports/get-directories.ts

@@ -17,6 +17,6 @@ export async function getDirectories() {
   directories.sort((a, b) => a.length - b.length);
 
   return [baseDir, ...directories].map((x) =>
-    x.replace(baseDir, path.basename(baseDir))
+    x.replace(baseDir, path.basename(baseDir)),
   );
 }

@navikt/aksel/src/css-imports/get-version.ts

@@ -3,7 +3,7 @@ import axios from "axios";
 export async function getAllVersions() {
   try {
     const npmPackageData = await axios.get(
-      `https://registry.npmjs.org/@navikt/ds-css`
+      `https://registry.npmjs.org/@navikt/ds-css`,
     );
     return Object.keys(npmPackageData.data["versions"]);
   } catch (e) {

@navikt/aksel/src/css-imports/index.ts

@@ -1,13 +1,11 @@
-import { StyleMappings } from "@navikt/ds-css/config/_mappings";
-import { generateImportOutput } from "./generate-output";
-import { AnswersT, ComponentPrefix } from "./config";
-
-import { inquiry } from "./inquiry";
-import { exec } from "child_process";
-
 import chalk from "chalk";
+import { exec } from "child_process";
+import { StyleMappings } from "@navikt/ds-css/config/_mappings";
+import { AnswersT, ComponentPrefix } from "./config";
+import { generateImportOutput } from "./generate-output";
 import { getDirectories } from "./get-directories";
 import { getAllVersions } from "./get-version";
+import { inquiry } from "./inquiry";
 
 export async function cssImportsCommand() {
   const answers: AnswersT = {
@@ -36,10 +34,10 @@ export async function cssImportsCommand() {
       footer() {
         return chalk.grey(
           `${chalk.cyan(
-            `\n  Documentation:`
+            `\n  Documentation:`,
           )}\n  Regular: https://aksel.nav.no/grunnleggende/kode/css-import
   Partial: https://aksel.nav.no/grunnleggende/kode/css-import#h64650b1a4ad6
-  Full: https://aksel.nav.no/grunnleggende/kode/css-import#h4037598416ef\n`
+  Full: https://aksel.nav.no/grunnleggende/kode/css-import#h4037598416ef\n`,
         );
       },
     },
@@ -94,7 +92,7 @@ export async function cssImportsCommand() {
         choices: versions,
         footer() {
           return chalk.grey(
-            'Remember to match version with @navikt/ds-react!\nNote: CDN was introduced in v2.9.0, older versions not available.\nUse "static" import instead.'
+            'Remember to match version with @navikt/ds-react!\nNote: CDN was introduced in v2.9.0, older versions not available.\nUse "static" import instead.',
           );
         },
       },
@@ -131,7 +129,7 @@ export async function cssImportsCommand() {
         choices: getDirectories(),
         footer() {
           return chalk.grey(
-            "filtered out: node_moduels, dist, build, lib, .* (dotfiles)"
+            "filtered out: node_moduels, dist, build, lib, .* (dotfiles)",
           );
         },
       },
@@ -143,7 +141,7 @@ export async function cssImportsCommand() {
     foundComponents = await new Promise((resolve) => {
       exec(`node ${__dirname}/scan-code.js ${answers.scandir}`, (_, stdout) => {
         resolve(
-          stdout ? JSON.parse(stdout.trim().split("\n").slice(1).join("")) : []
+          stdout ? JSON.parse(stdout.trim().split("\n").slice(1).join("")) : [],
         );
       });
     });

@navikt/aksel/src/css-imports/inquiry.ts

@@ -1,6 +1,6 @@
+import chalk from "chalk";
 import Enquirer from "enquirer";
 import { AnswersT } from "./config";
-import chalk from "chalk";
 
 export async function inquiry(answers: AnswersT, questions: any[]) {
   return await Enquirer.prompt(
@@ -8,9 +8,9 @@ export async function inquiry(answers: AnswersT, questions: any[]) {
       ...x,
       cancel: () => process.exit(1),
       header: `\n${chalk.gray(
-        "Command 'css-imports' will not edit your files directly!"
+        "Command 'css-imports' will not edit your files directly!",
       )}\n`,
-    }))
+    })),
   )
     .then((a) => {
       Object.entries(a).forEach(([key, value]) => {
@@ -20,7 +20,7 @@ export async function inquiry(answers: AnswersT, questions: any[]) {
     .catch((error) => {
       if (error.isTtyError) {
         console.log(
-          "Oops, something went wrong! Looks like @navikt/aksel-cli can't run in this terminal. Contact Aksel"
+          "Oops, something went wrong! Looks like @navikt/aksel-cli can't run in this terminal. Contact Aksel",
         );
       } else {
         console.error(error);

@navikt/aksel/src/help.ts

@@ -6,7 +6,7 @@ export function helpCommand() {
   console.log(`
 📝 Documentation
    - ${chalk.blueBright(
-     "https://aksel.nav.no/grunnleggende/kode/kommandolinje"
+     "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
    )}
 
 💻 Commands:
@@ -16,7 +16,7 @@ export function helpCommand() {
    ✔︎ Handles cascading, tailwind and @layer rules
 
    - ${chalk.cyan(
-     `npx @navikt/aksel ${chalk.green("codemod")} ${chalk.gray("<migration>")}`
+     `npx @navikt/aksel ${chalk.green("codemod")} ${chalk.gray("<migration>")}`,
    )}
    ✔︎ Code-transformations for breaking changes when updating Aksel
    ✔︎ Run with ${chalk.cyan(`${chalk.green("--help")}`)} to get started!

@navikt/aksel/src/index.ts

@@ -1,9 +1,9 @@
 #!/usr/bin/env node
 import chalk from "chalk";
-import { helpCommand } from "./help";
-import { cssImportsCommand } from "./css-imports/index";
-import { codemodCommand } from "./codemod/index";
 import fs from "fs";
+import { codemodCommand } from "./codemod/index";
+import { cssImportsCommand } from "./css-imports/index";
+import { helpCommand } from "./help";
 
 run();
 
@@ -19,7 +19,7 @@ async function run() {
     return;
   } else if (process.argv[2] === "-v" || process.argv[2] === "--version") {
     const pkg = JSON.parse(
-      fs.readFileSync("./package.json").toString()
+      fs.readFileSync("./package.json").toString(),
     ).version;
     console.log(pkg);
     return;
@@ -27,9 +27,9 @@ async function run() {
     console.log(
       chalk.red(
         `Unknown command: ${process.argv[2]}.\nRun ${chalk.cyan(
-          "npx @navikt/aksel help"
-        )} for all available commands.`
-      )
+          "npx @navikt/aksel help",
+        )} for all available commands.`,
+      ),
     );
   }
 }

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @navikt/ds-css
 
+## 5.14.0
+
+### Minor Changes
+
+- Tag: Har nå innebygd støtte for ikoner ([#2611](https://github.com/navikt/aksel/pull/2611))
+
+### Patch Changes
+
+- Table: Checkbox nested i CheckboxGroup mister nå ikke padding ([#2612](https://github.com/navikt/aksel/pull/2612))
+
+## 5.13.0
+
+### Patch Changes
+
+- Page: Lagt til ny bakgrunnsfarge `surface-subtle` og ny maksbredde på Page.Block `text` ([#2572](https://github.com/navikt/aksel/pull/2572))
+
+## 5.12.5
+
+## 5.12.4
+
 ## 5.12.3
 
 ### Patch Changes

@navikt/core/css/accordion.css

@@ -48,16 +48,24 @@
 }
 
 .navds-accordion__item:last-child > :where(.navds-accordion__header) {
-  box-shadow: var(--__ac-accordion-header-shadow), inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
+  box-shadow:
+    var(--__ac-accordion-header-shadow),
+    inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
 }
 
 .navds-accordion__item:last-child:where(.navds-accordion__item--open) :where(.navds-accordion__header) {
-  box-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent), inset 0 2px 0 0 var(--a-transparent),
+  box-shadow:
+    inset 2px 0 0 0 var(--a-transparent),
+    inset -2px 0 0 0 var(--a-transparent),
+    inset 0 2px 0 0 var(--a-transparent),
     inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
 }
 
 .navds-accordion__item:last-child:where(.navds-accordion__item--open) {
-  box-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent), inset 0 2px 0 0 var(--a-transparent),
+  box-shadow:
+    inset 2px 0 0 0 var(--a-transparent),
+    inset -2px 0 0 0 var(--a-transparent),
+    inset 0 2px 0 0 var(--a-transparent),
     inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
 }
 

@navikt/core/css/button.css

@@ -139,15 +139,15 @@
 }
 
 .navds-button--primary:focus-visible {
-  box-shadow: inset 0 0 0 1px
-      var(--ac-button-primary-focus-border, var(--__ac-button-primary-focus-border, var(--a-surface-default))),
+  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);
 }
 
 @supports not selector(:focus-visible) {
   .navds-button--primary:focus {
-    box-shadow: inset 0 0 0 1px
-        var(--ac-button-primary-focus-border, var(--__ac-button-primary-focus-border, var(--a-surface-default))),
+    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);
   }
 }
@@ -175,12 +175,16 @@
 }
 
 .navds-button--primary-neutral:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
+  box-shadow:
+    inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)),
+    var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-button--primary-neutral:focus {
-    box-shadow: inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
+    box-shadow:
+      inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)),
+      var(--a-shadow-focus);
   }
 }
 
@@ -208,15 +212,15 @@
 }
 
 .navds-button--secondary:focus-visible {
-  box-shadow: inset 0 0 0 2px
-      var(--ac-button-secondary-focus-border, var(--__ac-button-secondary-focus-border, var(--a-border-action))),
+  box-shadow:
+    inset 0 0 0 2px var(--ac-button-secondary-focus-border, var(--__ac-button-secondary-focus-border, var(--a-border-action))),
     var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-button--secondary:focus {
-    box-shadow: inset 0 0 0 2px
-        var(--ac-button-secondary-focus-border, var(--__ac-button-secondary-focus-border, var(--a-border-action))),
+    box-shadow:
+      inset 0 0 0 2px var(--ac-button-secondary-focus-border, var(--__ac-button-secondary-focus-border, var(--a-border-action))),
       var(--a-shadow-focus);
   }
 }
@@ -228,14 +232,16 @@
 }
 
 .navds-button--secondary:focus-visible:active {
-  box-shadow: inset 0 0 0 1px
+  box-shadow:
+    inset 0 0 0 1px
       var(--ac-button-secondary-active-focus-border, var(--__ac-button-secondary-active-focus-border, var(--a-surface-default))),
     var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-button--secondary:focus:active {
-    box-shadow: inset 0 0 0 1px
+    box-shadow:
+      inset 0 0 0 1px
         var(--ac-button-secondary-active-focus-border, var(--__ac-button-secondary-active-focus-border, var(--a-surface-default))),
       var(--a-shadow-focus);
   }
@@ -264,13 +270,17 @@
 
 .navds-button--secondary-neutral:focus-visible {
   color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
-  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
+  box-shadow:
+    inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)),
+    var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-button--secondary-neutral:focus {
     color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
-    box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
+    box-shadow:
+      inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)),
+      var(--a-shadow-focus);
   }
 }
 
@@ -281,13 +291,15 @@
 }
 
 .navds-button--secondary-neutral:focus-visible:active {
-  box-shadow: inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)),
+  box-shadow:
+    inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)),
     var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-button--secondary-neutral:focus:active {
-    box-shadow: inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)),
+    box-shadow:
+      inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)),
       var(--a-shadow-focus);
   }
 }
@@ -314,12 +326,16 @@
 }
 
 .navds-button--tertiary:focus-visible {
-  box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
+  box-shadow:
+    inset 0 0 0 2px var(--ac-button-tertiary-focus-border, var(--a-border-action)),
+    var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-button--tertiary:focus {
-    box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
+    box-shadow:
+      inset 0 0 0 2px var(--ac-button-tertiary-focus-border, var(--a-border-action)),
+      var(--a-shadow-focus);
   }
 }
 
@@ -333,12 +349,16 @@
 }
 
 .navds-button--tertiary:focus-visible:active {
-  box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+  box-shadow:
+    inset 0 0 0 1px var(--a-surface-default),
+    var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-button--tertiary:focus:active {
-    box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+    box-shadow:
+      inset 0 0 0 1px var(--a-surface-default),
+      var(--a-shadow-focus);
   }
 }
 
@@ -365,12 +385,16 @@
 }
 
 .navds-button--tertiary-neutral:focus-visible {
-  box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
+  box-shadow:
+    inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)),
+    var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-button--tertiary-neutral:focus {
-    box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
+    box-shadow:
+      inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)),
+      var(--a-shadow-focus);
   }
 }
 
@@ -384,12 +408,16 @@
 }
 
 .navds-button--tertiary-neutral:focus-visible:active {
-  box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+  box-shadow:
+    inset 0 0 0 1px var(--a-surface-default),
+    var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-button--tertiary-neutral:focus:active {
-    box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+    box-shadow:
+      inset 0 0 0 1px var(--a-surface-default),
+      var(--a-shadow-focus);
   }
 }
 
@@ -420,12 +448,16 @@
 }
 
 .navds-button--danger:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+  box-shadow:
+    inset 0 0 0 1px var(--a-surface-default),
+    var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-button--danger:focus {
-    box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+    box-shadow:
+      inset 0 0 0 1px var(--a-surface-default),
+      var(--a-shadow-focus);
   }
 }
 

@navikt/core/css/chips.css

@@ -82,7 +82,9 @@
 
 .navds-chips__toggle[aria-pressed="true"]:focus-visible,
 .navds-chips__toggle:active:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
+  box-shadow:
+    inset 0 0 0 1px var(--a-surface-default),
+    0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
 }
 
 @supports not selector(:focus-visible) {
@@ -93,7 +95,9 @@
 
   .navds-chips__toggle[aria-pressed="true"]:focus,
   .navds-chips__toggle:active:focus {
-    box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
+    box-shadow:
+      inset 0 0 0 1px var(--a-surface-default),
+      0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
   }
 }
 
@@ -144,7 +148,9 @@
 }
 
 .navds-chips__removable--action:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--a-border-focus);
+  box-shadow:
+    inset 0 0 0 1px var(--a-surface-default),
+    0 0 0 2px var(--a-border-focus);
 }
 
 .navds-chips__removable--neutral:focus-visible {
@@ -154,7 +160,9 @@
 @supports not selector(:focus-visible) {
   .navds-chips__removable--action:focus {
     outline: none;
-    box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--a-border-focus);
+    box-shadow:
+      inset 0 0 0 1px var(--a-surface-default),
+      0 0 0 2px var(--a-border-focus);
   }
 
   .navds-chips__removable--neutral:focus {

@navikt/core/css/config/bundle.js

@@ -73,7 +73,7 @@ async function bundleComponents() {
     {
       from: indexSrc,
       to: indexDist,
-    }
+    },
   );
 
   fs.writeFileSync(indexDist, result.css);
@@ -108,7 +108,7 @@ function buildFragmentFiles() {
         __dirname,
         `../${componentDir}/${camelCase(x.replace("css", ""))
           .toLowerCase()
-          .replace(/ /g, "")}.css`
+          .replace(/ /g, "")}.css`,
       ),
     }));
 

@navikt/core/css/date.css

@@ -89,13 +89,17 @@
 
 .navds-date .rdp-button.rdp-day_selected:not([disabled]):focus-visible,
 .navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus-visible {
-  box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+  box-shadow:
+    inset 0 0 0 1px var(--a-surface-default),
+    var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-date .rdp-button.rdp-day_selected:not([disabled]):focus,
   .navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus {
-    box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+    box-shadow:
+      inset 0 0 0 1px var(--a-surface-default),
+      var(--a-shadow-focus);
   }
 }
 
@@ -203,12 +207,16 @@
 }
 
 .navds-date__field--error .navds-date__field-input:focus-visible:not(:hover):not(:disabled) {
-  box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+  box-shadow:
+    inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)),
+    var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-date__field--error .navds-date__field-input:focus:not(:hover):not(:disabled) {
-    box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+    box-shadow:
+      inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)),
+      var(--a-shadow-focus);
   }
 }
 

@navikt/core/css/expansioncard.css

@@ -60,7 +60,9 @@
 
 .navds-expansioncard--open > :where(.navds-expansioncard__header):hover {
   background-color: var(--ac-expansioncard-header-bg-hover, var(--a-surface-hover));
-  box-shadow: 1px 0 0 0 var(--__ac-expansioncard-border-color), -1px 0 0 0 var(--__ac-expansioncard-border-color),
+  box-shadow:
+    1px 0 0 0 var(--__ac-expansioncard-border-color),
+    -1px 0 0 0 var(--__ac-expansioncard-border-color),
     0 -1px 0 0 var(--__ac-expansioncard-border-color);
 }
 
@@ -190,7 +192,9 @@
 }
 
 :where(.navds-expansioncard__header):hover + .navds-expansioncard__content {
-  box-shadow: 1px 0 0 0 var(--__ac-expansioncard-border-color), -1px 0 0 0 var(--__ac-expansioncard-border-color),
+  box-shadow:
+    1px 0 0 0 var(--__ac-expansioncard-border-color),
+    -1px 0 0 0 var(--__ac-expansioncard-border-color),
     0 1px 0 0 var(--__ac-expansioncard-border-color);
 }
 

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

@@ -39,7 +39,9 @@
 
 .navds-combobox--error
   .navds-text-field__input:not(:hover):not(:disabled):not(.navds-combobox__wrapper-inner--virtually-unfocused):focus-within {
-  box-shadow: 0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+  box-shadow:
+    0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger)),
+    var(--a-shadow-focus);
 }
 
 .navds-combobox__selected-options {
@@ -89,7 +91,9 @@
 }
 
 .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:
+    0 0 0 1px var(--a-surface-default) inset,
+    var(--a-shadow-focus);
   box-shadow: var(--a-shadow-focus);
 }
 
@@ -105,7 +109,9 @@
   }
 
   .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:
+      0 0 0 1px var(--a-surface-default) inset,
+      var(--a-shadow-focus);
     box-shadow: var(--a-shadow-focus);
   }
 
@@ -116,7 +122,9 @@
 
 @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:
+      0 0 0 1px var(--a-surface-default) inset,
+      var(--a-shadow-focus);
     box-shadow: var(--a-shadow-focus);
   }
 
@@ -171,14 +179,18 @@
 }
 
 .navds-combobox__button-toggle-list:focus-visible {
-  box-shadow: 0 0 0 1px var(--a-surface-default) inset, var(--a-shadow-focus);
+  box-shadow:
+    0 0 0 1px var(--a-surface-default) inset,
+    var(--a-shadow-focus);
   box-shadow: var(--a-shadow-focus);
   outline: none;
 }
 
 @supports not selector(:focus-visible) {
   .navds-combobox__button-toggle-list:focus {
-    box-shadow: 0 0 0 1px var(--a-surface-default) inset, var(--a-shadow-focus);
+    box-shadow:
+      0 0 0 1px var(--a-surface-default) inset,
+      var(--a-shadow-focus);
     box-shadow: var(--a-shadow-focus);
     outline: none;
   }
@@ -297,7 +309,9 @@
 }
 
 .navds-combobox__list-item__new-option--focus {
-  box-shadow: var(--a-shadow-focus) inset, var(--a-border-action) 0 0 0 5px inset;
+  box-shadow:
+    var(--a-shadow-focus) inset,
+    var(--a-border-action) 0 0 0 5px inset;
   border-radius: calc(var(--a-border-radius-medium) - 1px);
 }
 

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

@@ -72,26 +72,34 @@
 
 .navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
 .navds-radio__input:focus-visible + .navds-radio__label::before {
-  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)),
-    0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
+  box-shadow:
+    0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)),
+    0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
+    0 0 0 4px var(--a-border-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-checkbox__input:focus + .navds-checkbox__label::before,
   .navds-radio__input:focus + .navds-radio__label::before {
-    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), 0 0 0 4px var(--a-border-focus);
+    box-shadow:
+      0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)),
+      0 0 0 4px var(--a-border-focus);
   }
 }
 
 .navds-checkbox__input:hover:focus-visible + .navds-checkbox__label::before,
 .navds-radio__input:hover:focus-visible + .navds-radio__label::before {
-  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), 0 0 0 4px var(--a-border-focus);
+  box-shadow:
+    0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+    0 0 0 4px var(--a-border-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
   .navds-radio__input:hover:focus + .navds-radio__label::before {
-    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), 0 0 0 4px var(--a-border-focus);
+    box-shadow:
+      0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+      0 0 0 4px var(--a-border-focus);
   }
 }
 
@@ -149,33 +157,42 @@
 
 .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 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
+  box-shadow:
+    0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+    0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
+    0 0 0 4px var(--a-border-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
   .navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
-    box-shadow: 0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action)),
-      0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
+    box-shadow:
+      0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+      0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
+      0 0 0 4px var(--a-border-focus);
   }
 }
 
 .navds-radio__input:checked + .navds-radio__label::before {
-  box-shadow: 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)),
     inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default));
   background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
 }
 
 .navds-radio__input:checked:focus-visible + .navds-radio__label::before {
-  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
-    inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
+  box-shadow:
+    0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+    inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
+    0 0 0 4px var(--a-border-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-radio__input:checked:focus + .navds-radio__label::before {
-    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
-      inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
+    box-shadow:
+      0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+      inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
+      0 0 0 4px var(--a-border-focus);
   }
 }
 
@@ -213,7 +230,9 @@
   > .navds-checkbox__input:focus-visible:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
   + .navds-checkbox__label::before,
 .navds-radio--error > .navds-radio__input:focus-visible:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
-  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
+  box-shadow:
+    0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
+    0 0 0 4px var(--a-border-focus);
 }
 
 @supports not selector(:focus-visible) {
@@ -221,7 +240,9 @@
     > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
     + .navds-checkbox__label::before,
   .navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
-    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
+    box-shadow:
+      0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
+      0 0 0 4px var(--a-border-focus);
   }
 }
 
@@ -238,7 +259,9 @@
   + .navds-checkbox__label::before,
 .navds-radio--error > .navds-radio__input:focus-visible:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
   background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
-  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
+  box-shadow:
+    0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
+    0 0 0 4px var(--a-border-focus);
 }
 
 @supports not selector(:focus-visible) {
@@ -255,7 +278,9 @@
     + .navds-checkbox__label::before,
   .navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
     background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
-    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
+    box-shadow:
+      0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
+      0 0 0 4px var(--a-border-focus);
   }
 }
 
@@ -314,7 +339,9 @@
 
 .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
   background-color: var(--a-icon-subtle);
-  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border), inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-bg);
+  box-shadow:
+    0 0 0 2px var(--__ac-radio-checkbox-readonly-border),
+    inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-bg);
 }
 
 .navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::before {

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

@@ -128,14 +128,15 @@
 }
 
 .navds-search__button-search.navds-button--secondary {
-  box-shadow: -1px 0 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
+  box-shadow:
+    -1px 0 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
     0 1px 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
     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 {
-  box-shadow: -1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action)))
-      inset,
+  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)));
@@ -147,33 +148,40 @@
 }
 
 .navds-search__button-search.navds-button--secondary:focus-visible {
-  box-shadow: 0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
+  box-shadow:
+    0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
     var(--a-shadow-focus);
 }
 
 .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,
+  box-shadow:
+    0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
     var(--a-shadow-focus);
 }
 
 .navds-search__button-search.navds-button--secondary:focus-visible:active {
-  box-shadow: 0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset, var(--a-shadow-focus);
+  box-shadow:
+    0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset,
+    var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-search__button-search.navds-button--secondary:focus {
-    box-shadow: 0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
+    box-shadow:
+      0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
       var(--a-shadow-focus);
   }
 
   .navds-search__button-search.navds-button--secondary:focus:hover {
-    box-shadow: 0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action)))
-        inset,
+    box-shadow:
+      0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
       var(--a-shadow-focus);
   }
 
   .navds-search__button-search.navds-button--secondary:focus:active {
-    box-shadow: 0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset, var(--a-shadow-focus);
+    box-shadow:
+      0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset,
+      var(--a-shadow-focus);
   }
 }
 
@@ -184,7 +192,8 @@
 }
 
 .navds-search--error .navds-search__input:focus-visible:not(:hover):not(:disabled) {
-  box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
+  box-shadow:
+    inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
     var(--a-shadow-focus);
 }
 
@@ -197,7 +206,8 @@
 
 @supports not selector(:focus-visible) {
   .navds-search--error .navds-search__input:focus:not(:hover):not(:disabled) {
-    box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
+    box-shadow:
+      inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
       var(--a-shadow-focus);
   }
 

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

@@ -111,12 +111,16 @@
 }
 
 .navds-switch__input:focus-visible ~ .navds-switch__track {
-  box-shadow: 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+  box-shadow:
+    0 0 0 1px var(--a-surface-default),
+    var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-switch__input:focus ~ .navds-switch__track {
-    box-shadow: 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+    box-shadow:
+      0 0 0 1px var(--a-surface-default),
+      var(--a-shadow-focus);
   }
 }
 

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

@@ -65,12 +65,16 @@
 }
 
 .navds-text-field--error > .navds-text-field__input:focus-visible:not(:hover):not(:disabled) {
-  box-shadow: 0 0 0 1px var(--a-border-danger), var(--a-shadow-focus);
+  box-shadow:
+    0 0 0 1px var(--a-border-danger),
+    var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-text-field--error > .navds-text-field__input:focus:not(:hover):not(:disabled) {
-    box-shadow: 0 0 0 1px var(--a-border-danger), var(--a-shadow-focus);
+    box-shadow:
+      0 0 0 1px var(--a-border-danger),
+      var(--a-shadow-focus);
   }
 }
 

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

@@ -14,13 +14,17 @@
 
 .navds-help-text__button:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 1px var(--a-border-focus), inset 0 0 0 1px var(--a-border-focus);
+  box-shadow:
+    0 0 0 1px var(--a-border-focus),
+    inset 0 0 0 1px var(--a-border-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-help-text__button:focus {
     outline: none;
-    box-shadow: 0 0 0 1px var(--a-border-focus), inset 0 0 0 1px var(--a-border-focus);
+    box-shadow:
+      0 0 0 1px var(--a-border-focus),
+      inset 0 0 0 1px var(--a-border-focus);
   }
 }
 

@navikt/core/css/package.json

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

@navikt/core/css/pagination.css

@@ -36,12 +36,16 @@
 }
 
 .navds-pagination__item[aria-current="true"]:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+  box-shadow:
+    inset 0 0 0 1px var(--a-surface-default),
+    var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-pagination__item[aria-current="true"]:focus {
-    box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+    box-shadow:
+      inset 0 0 0 1px var(--a-surface-default),
+      var(--a-shadow-focus);
   }
 }
 

@navikt/core/css/primitives/page.css

@@ -10,6 +10,9 @@
 
 /* Page.Block */
 .navds-pageblock {
+  /* stylelint-disable-next-line length-zero-no-unit */
+  --__ac-page-padding-inline: 0px;
+
   margin-inline: auto;
   width: 100%;
 }
@@ -27,6 +30,10 @@
   padding-block-end: var(--a-spacing-8);
 }
 
+.navds-pageblock--text {
+  max-width: calc(var(--a-text-width-max) + var(--__ac-page-padding-inline) + var(--__ac-page-padding-inline));
+}
+
 .navds-pageblock--md {
   max-width: 768px;
 }
@@ -44,11 +51,13 @@
 }
 
 .navds-pageblock--gutters {
-  padding-inline: var(--a-spacing-4);
+  --__ac-page-padding-inline: var(--a-spacing-4);
+
+  padding-inline: var(--__ac-page-padding-inline);
 }
 
 @media (min-width: 1024px) {
   .navds-pageblock--gutters {
-    padding-inline: var(--a-spacing-12);
+    --__ac-page-padding-inline: var(--a-spacing-12);
   }
 }

@navikt/core/css/table.css

@@ -84,15 +84,15 @@
   padding: var(--a-spacing-1) var(--a-spacing-2);
 }
 
-.navds-table .navds-checkbox .navds-checkbox__input {
+.navds-table :not(.navds-checkboxes) > .navds-checkbox .navds-checkbox__input {
   top: -0.75rem;
 }
 
-.navds-table .navds-checkbox--small .navds-checkbox__input {
+.navds-table :not(.navds-checkboxes) > .navds-checkbox--small .navds-checkbox__input {
   top: -0.375rem;
 }
 
-.navds-table .navds-checkbox .navds-checkbox__label {
+.navds-table :not(.navds-checkboxes) > .navds-checkbox .navds-checkbox__label {
   padding: 0;
 }
 

@navikt/core/css/tag.css

@@ -1,4 +1,7 @@
 .navds-tag {
+  --__ac-tag-icon-size: 1.5rem;
+  --__ac-tag-icon-margin: -2px;
+
   border: 1px solid;
   border-radius: var(--a-border-radius-small);
   display: inline-flex;
@@ -12,11 +15,26 @@
 .navds-tag--small {
   min-height: 1.5rem;
   padding: 0 var(--a-spacing-1-alt);
+
+  --__ac-tag-icon-size: 1.25rem;
 }
 
 .navds-tag--xsmall {
   min-height: 1.25rem;
   padding: 0 var(--a-spacing-1);
+
+  --__ac-tag-icon-size: 1rem;
+  --__ac-tag-icon-margin: -1px;
+}
+
+.navds-tag:has(.navds-tag__icon--left) {
+  gap: var(--a-spacing-05);
+}
+
+.navds-tag__icon--left {
+  font-size: var(--__ac-tag-icon-size);
+  margin-inline-start: var(--__ac-tag-icon-margin);
+  display: flex;
 }
 
 .navds-tag--error {

@navikt/core/css/timeline.css

@@ -178,8 +178,10 @@
   border: none;
   cursor: pointer;
   background: var(--a-surface-default);
-  box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
-    0 0 0 4px var(--ac-timeline-pin-bg, var(--a-surface-danger)), 0 0 0 5px var(--a-surface-default);
+  box-shadow:
+    inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+    0 0 0 4px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+    0 0 0 5px var(--a-surface-default);
   z-index: 2;
   border-radius: var(--a-border-radius-full);
   padding: var(--a-spacing-1);
@@ -198,34 +200,44 @@
 }
 
 .navds-timeline__pin-button:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
-    0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)), 0 0 0 4px var(--a-surface-default),
+  box-shadow:
+    inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+    0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+    0 0 0 4px var(--a-surface-default),
     0 0 0 6px var(--a-border-focus);
   outline: none;
 }
 
 .navds-timeline__pin-button:hover {
-  box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
-    0 0 0 4px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)), 0 0 0 5px var(--a-surface-default);
+  box-shadow:
+    inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+    0 0 0 4px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+    0 0 0 5px var(--a-surface-default);
 }
 
 .navds-timeline__pin-button:hover:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
-    0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)), 0 0 0 4px var(--a-surface-default),
+  box-shadow:
+    inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+    0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+    0 0 0 4px var(--a-surface-default),
     0 0 0 6px var(--a-border-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-timeline__pin-button:focus {
-    box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
-      0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)), 0 0 0 4px var(--a-surface-default),
+    box-shadow:
+      inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+      0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+      0 0 0 4px var(--a-surface-default),
       0 0 0 6px var(--a-border-focus);
     outline: none;
   }
 
   .navds-timeline__pin-button:hover:focus {
-    box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
-      0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)), 0 0 0 4px var(--a-surface-default),
+    box-shadow:
+      inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+      0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+      0 0 0 4px var(--a-surface-default),
       0 0 0 6px var(--a-border-focus);
   }
 }
@@ -284,7 +296,8 @@
 }
 
 .navds-timeline__period--selected:focus-visible {
-  box-shadow: inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
+  box-shadow:
+    inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
     0 0 0 2px var(--a-border-focus);
   z-index: 3;
 }
@@ -294,7 +307,9 @@
 }
 
 .navds-timeline__zoom-button:focus-visible {
-  box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 3px var(--a-border-focus);
+  box-shadow:
+    0 0 0 1px var(--a-surface-default),
+    0 0 0 3px var(--a-border-focus);
   border-width: 1px;
 }
 
@@ -311,13 +326,16 @@
   }
 
   .navds-timeline__period--selected:focus {
-    box-shadow: inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
+    box-shadow:
+      inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
       0 0 0 2px var(--a-border-focus);
     z-index: 3;
   }
 
   .navds-timeline__zoom-button:focus {
-    box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 3px var(--a-border-focus);
+    box-shadow:
+      0 0 0 1px var(--a-surface-default),
+      0 0 0 3px var(--a-border-focus);
     border-width: 1px;
   }
 

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

@@ -66,34 +66,44 @@
 
 .navds-toggle-group__button:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
+  box-shadow:
+    0 0 0 1px var(--a-surface-default),
+    0 0 0 4px var(--a-border-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-toggle-group__button:focus {
     outline: none;
-    box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
+    box-shadow:
+      0 0 0 1px var(--a-surface-default),
+      0 0 0 4px var(--a-border-focus);
   }
 }
 
 .navds-toggle-group__button:focus-visible:hover[aria-pressed="false"] {
-  box-shadow: 0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)), 0 0 0 4px var(--a-border-focus);
+  box-shadow:
+    0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)),
+    0 0 0 4px var(--a-border-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
-    box-shadow: 0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)), 0 0 0 4px var(--a-border-focus);
+    box-shadow:
+      0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)),
+      0 0 0 4px var(--a-border-focus);
   }
 }
 
 .navds-toggle-group--neutral > .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
-  box-shadow: 0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
+  box-shadow:
+    0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
     0 0 0 4px var(--a-border-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-toggle-group--neutral > .navds-toggle-group__button:focus-visible:hover[aria-pressed="false"] {
-    box-shadow: 0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
+    box-shadow:
+      0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
       0 0 0 4px var(--a-border-focus);
   }
 }

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,61 @@
 # @navikt/ds-react
 
+## 5.14.0
+
+### Minor Changes
+
+- Intern state: Komponenter respekterer nå `e.preventDefault()` bedre når event overskrives internt i komponent. ([#2610](https://github.com/navikt/aksel/pull/2610))
+
+- Tag: Har nå innebygd støtte for ikoner ([#2611](https://github.com/navikt/aksel/pull/2611))
+
+- Table: Table.DataCell og Table.HeaderCell har nå `textSize`-prop for å justere font-size mellom 18px og 16px. ([#2613](https://github.com/navikt/aksel/pull/2613))
+
+### Patch Changes
+
+- Internt API: Oppdatert intern import/export av hooks og typer fra utils ([#2618](https://github.com/navikt/aksel/pull/2618))
+
+- Intern-API: Erstattet `mergeRefs` i `useMemo` med lokal `useMergeRefs`-hook ([#2609](https://github.com/navikt/aksel/pull/2609))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.14.0
+  - @navikt/aksel-icons@5.14.0
+
+## 5.13.0
+
+### Minor Changes
+
+- Accordion.Item, Dropdown, ReadMore og Tooltip: Har en ny prop `onOpenChange?: (open: boolean) => void;` som forteller nå-state når `open`-state endrer seg. Dette vil være nyttig hvis man ikke bruker controlled-state, men fortsatt ønsker å vite om komponenten er `open` eller ikke (f.eks logging). ([#2585](https://github.com/navikt/aksel/pull/2585))
+
+- Controlled-state: Accordion.Item, Dropdown, ReadMore, Table.ExpandableRow og Tooltip har oppdatert intern håndtering av controlled state. Endringen skal ikke påvirke dagens API. ([#2585](https://github.com/navikt/aksel/pull/2585))
+
+### Patch Changes
+
+- Page: Lagt til ny bakgrunnsfarge `surface-subtle` og ny maksbredde på Page.Block `text` ([#2572](https://github.com/navikt/aksel/pull/2572))
+
+- Updated dependencies [[`145ce2e5f`](https://github.com/navikt/aksel/commit/145ce2e5f71d397acfa3306ed7b0e4253b9e02f6)]:
+  - @navikt/ds-tokens@5.13.0
+  - @navikt/aksel-icons@5.13.0
+
+## 5.12.5
+
+### Patch Changes
+
+- MonthPicker: MonthCaption satt forrige/neste-knapper til `disabled` når de skulle være `enabled`. ([#2601](https://github.com/navikt/aksel/pull/2601))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.12.5
+  - @navikt/aksel-icons@5.12.5
+
+## 5.12.4
+
+### Patch Changes
+
+- Accessibility improvements to Radio and Checkbox component, so each label is only announced once with screen readers ([#2562](https://github.com/navikt/aksel/pull/2562))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.12.4
+  - @navikt/aksel-icons@5.12.4
+
 ## 5.12.3
 
 ### Patch Changes

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

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

@navikt/core/react/package.json

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

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

@@ -1,9 +1,9 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import AccordionItem, { AccordionItemProps } from "./AccordionItem";
 import AccordionContent, { AccordionContentProps } from "./AccordionContent";
-import AccordionHeader, { AccordionHeaderProps } from "./AccordionHeader";
 import { AccordionContext } from "./AccordionContext";
+import AccordionHeader, { AccordionHeaderProps } from "./AccordionHeader";
+import AccordionItem, { AccordionItemProps } from "./AccordionItem";
 
 interface AccordionComponent
   extends React.ForwardRefExoticComponent<
@@ -83,7 +83,7 @@ export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
       indent = true,
       ...rest
     },
-    ref
+    ref,
   ) => {
     return (
       <AccordionContext.Provider
@@ -100,13 +100,13 @@ export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
             "navds-accordion",
             className,
             `navds-accordion--${size}`,
-            { "navds-accordion--indent": indent }
+            { "navds-accordion--indent": indent },
           )}
           ref={ref}
         />
       </AccordionContext.Provider>
     );
-  }
+  },
 ) as AccordionComponent;
 
 Accordion.Header = AccordionHeader;

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

@@ -17,7 +17,7 @@ const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(
 
     if (context === null) {
       console.error(
-        "<Accordion.Content> has to be used within an <Accordion.Item>"
+        "<Accordion.Content> has to be used within an <Accordion.Item>",
       );
       return null;
     }
@@ -32,7 +32,7 @@ const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(
           {
             "navds-accordion__content--closed": !context.open,
           },
-          className
+          className,
         )}
         aria-hidden={
           !context.open || undefined
@@ -41,7 +41,7 @@ const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(
         {children}
       </BodyLong>
     );
-  }
+  },
 );
 
 export default AccordionContent;

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

@@ -1,7 +1,8 @@
-import { ChevronDownIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
+import { ChevronDownIcon } from "@navikt/aksel-icons";
 import { Heading } from "../typography";
+import { composeEventHandlers } from "../util/composeEventHandlers";
 import { AccordionContext } from "./AccordionContext";
 import { AccordionItemContext } from "./AccordionItem";
 
@@ -20,7 +21,7 @@ const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(
 
     if (itemContext === null) {
       console.error(
-        "<Accordion.Header> has to be used within an <Accordion.Item>, which in turn must be within an <Accordion>"
+        "<Accordion.Header> has to be used within an <Accordion.Item>, which in turn must be within an <Accordion>",
       );
       return null;
     }
@@ -30,10 +31,7 @@ const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(
         ref={ref}
         {...rest}
         className={cl("navds-accordion__header", className)}
-        onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-          itemContext.toggleOpen();
-          onClick && onClick(e);
-        }}
+        onClick={composeEventHandlers(onClick, itemContext.toggleOpen)}
         aria-expanded={itemContext.open}
         type="button"
       >
@@ -53,7 +51,7 @@ const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(
         </Heading>
       </button>
     );
-  }
+  },
 );
 
 export default AccordionHeader;

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

@@ -1,13 +1,8 @@
 import cl from "clsx";
-import React, {
-  createContext,
-  forwardRef,
-  useContext,
-  useRef,
-  useState,
-} from "react";
-import { AccordionContext } from "./AccordionContext";
+import React, { createContext, forwardRef, useContext, useRef } from "react";
 import { omit } from "../util";
+import { useControllableState } from "../util/hooks/useControllableState";
+import { AccordionContext } from "./AccordionContext";
 
 export interface AccordionItemProps
   extends React.HTMLAttributes<HTMLDivElement> {
@@ -26,6 +21,10 @@ export interface AccordionItemProps
    * @default false
    */
   defaultOpen?: boolean;
+  /**
+   * Callback for current open-state
+   */
+  onOpenChange?: (open: boolean) => void;
 }
 
 export interface AccordionItemContextProps {
@@ -37,20 +36,21 @@ export const AccordionItemContext =
   createContext<AccordionItemContextProps | null>(null);
 
 const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
-  ({ children, className, open, defaultOpen = false, ...rest }, ref) => {
-    const [internalOpen, setInternalOpen] = useState<boolean>(defaultOpen);
-    const context = useContext(AccordionContext);
+  (
+    { children, className, open, defaultOpen = false, onOpenChange, ...rest },
+    ref,
+  ) => {
+    const [_open, _setOpen] = useControllableState({
+      defaultValue: defaultOpen,
+      value: open,
+      onChange: onOpenChange,
+    });
 
-    const [_open, _setOpen] = useState(defaultOpen);
+    const context = useContext(AccordionContext);
     const shouldAnimate = useRef<boolean>(!(Boolean(open) || defaultOpen));
+
     const handleOpen = () => {
-      if (open === undefined) {
-        const newOpen = !_open;
-        _setOpen(newOpen);
-        setInternalOpen(newOpen);
-      } else {
-        setInternalOpen(!open);
-      }
+      _setOpen((x) => !x);
       shouldAnimate.current = true;
     };
 
@@ -61,7 +61,7 @@ const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
     return (
       <div
         className={cl("navds-accordion__item", className, {
-          "navds-accordion__item--open": open ?? internalOpen,
+          "navds-accordion__item--open": _open,
           "navds-accordion__item--neutral": context?.variant === "neutral",
           "navds-accordion__item--no-animation": !shouldAnimate.current,
         })}
@@ -70,7 +70,7 @@ const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
       >
         <AccordionItemContext.Provider
           value={{
-            open: open ?? internalOpen,
+            open: _open,
             toggleOpen: handleOpen,
           }}
         >
@@ -78,7 +78,7 @@ const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
         </AccordionItemContext.Provider>
       </div>
     );
-  }
+  },
 );
 
 export default AccordionItem;

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

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
+import { Accordion, AccordionProps } from ".";
+import { Table } from "..";
 import AccordionContent from "./AccordionContent";
 import AccordionHeader from "./AccordionHeader";
 import AccordionItem from "./AccordionItem";
-import { Accordion, AccordionProps } from ".";
-import { Table } from "..";
 
 export default {
   title: "ds-react/Accordion",
@@ -78,7 +78,10 @@ const Item = (props) => {
 
   if (props.defaultOpen) {
     return (
-      <Accordion.Item defaultOpen={props.defaultOpen}>
+      <Accordion.Item
+        defaultOpen={props.defaultOpen}
+        onOpenChange={console.log}
+      >
         <Accordion.Header>Accordion header text</Accordion.Header>
         <SmallContent />
       </Accordion.Item>
@@ -86,14 +89,14 @@ const Item = (props) => {
   }
 
   return props.controlled ? (
-    <Accordion.Item open={open}>
+    <Accordion.Item open={open} onOpenChange={console.log}>
       <Accordion.Header onClick={() => setOpen(!open)}>
         Accordion header text
       </Accordion.Header>
       <Content />
     </Accordion.Item>
   ) : (
-    <Accordion.Item>
+    <Accordion.Item onOpenChange={console.log}>
       <Accordion.Header>Accordion header text</Accordion.Header>
       <Content />
     </Accordion.Item>

@navikt/core/react/src/alert/Alert.tsx

@@ -1,14 +1,14 @@
-import {
-  InformationSquareFillIcon,
-  CheckmarkCircleFillIcon,
-  ExclamationmarkTriangleFillIcon,
-  XMarkOctagonFillIcon,
-  XMarkIcon,
-} from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { BodyLong } from "../typography";
+import {
+  CheckmarkCircleFillIcon,
+  ExclamationmarkTriangleFillIcon,
+  InformationSquareFillIcon,
+  XMarkIcon,
+  XMarkOctagonFillIcon,
+} from "@navikt/aksel-icons";
 import { Button } from "../button";
+import { BodyLong } from "../typography";
 
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
@@ -88,7 +88,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
       onClose,
       ...rest
     },
-    ref
+    ref,
   ) => {
     return (
       <div
@@ -103,7 +103,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
             "navds-alert--full-width": fullWidth,
             "navds-alert--inline": inline,
             "navds-alert--close-button": closeButton,
-          }
+          },
         )}
       >
         <Icon variant={variant} className="navds-alert__icon" />
@@ -124,7 +124,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
         )}
       </div>
     );
-  }
+  },
 );
 
 export default Alert;

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

@@ -1,9 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { expect, userEvent, within } from "@storybook/test";
 import React from "react";
 import { Alert, AlertProps } from ".";
 import { BodyLong, Heading as DsHeading, Link } from "..";
-import { within, userEvent } from "@storybook/testing-library";
-import { expect } from "@storybook/jest";
 
 const meta: Meta<typeof Alert> = {
   title: "ds-react/Alert",
@@ -55,7 +54,7 @@ export const Small: Story = {
             closeButton={props.closeButton}
           >
             {new Array(i + 1).fill(
-              "Id elit esse enim reprehenderit enim nisi veniam nostrud."
+              "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
             )}
           </Alert>
         ))}
@@ -74,14 +73,14 @@ export const FullWidth = () => {
       {variants.map((variant, i) => (
         <Alert key={variant} variant={variant} fullWidth>
           {new Array(i + 1).fill(
-            "Id elit esse enim reprehenderit enim nisi veniam nostrud."
+            "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
           )}
         </Alert>
       ))}
       {variants.map((variant, i) => (
         <Alert key={variant} variant={variant} fullWidth size="small">
           {new Array(i + 1).fill(
-            "Id elit esse enim reprehenderit enim nisi veniam nostrud."
+            "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
           )}
         </Alert>
       ))}
@@ -95,14 +94,14 @@ export const Inline = () => {
       {variants.map((variant, i) => (
         <Alert key={variant} variant={variant} inline>
           {new Array(i + 1).fill(
-            "Id elit esse enim reprehenderit enim nisi veniam nostrud."
+            "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
           )}
         </Alert>
       ))}
       {variants.map((variant, i) => (
         <Alert key={variant} variant={variant} inline size="small">
           {new Array(i + 1).fill(
-            "Id elit esse enim reprehenderit enim nisi veniam nostrud."
+            "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
           )}
         </Alert>
       ))}

@navikt/core/react/src/button/Button.tsx

@@ -1,13 +1,12 @@
 import cl from "clsx";
-import React, { forwardRef, useMemo, useRef, useState } from "react";
+import React, { forwardRef, useRef, useState } from "react";
 import { Loader } from "../loader";
 import { Label } from "../typography";
-import {
-  OverridableComponent,
-  mergeRefs,
-  omit,
-  useClientLayoutEffect,
-} from "../util";
+import { omit } from "../util";
+import { composeEventHandlers } from "../util/composeEventHandlers";
+import { useClientLayoutEffect } from "../util/hooks";
+import { useMergeRefs } from "../util/hooks/useMergeRefs";
+import { OverridableComponent } from "../util/types";
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -79,18 +78,18 @@ export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
         iconPosition = "left",
         ...rest
       },
-      ref
+      ref,
     ) => {
       const buttonRef = useRef<HTMLButtonElement | null>(null);
       const [widthOverride, setWidthOverride] = useState<number>();
 
-      const mergedRef = useMemo(() => mergeRefs([buttonRef, ref]), [ref]);
+      const mergedRef = useMergeRefs(buttonRef, ref);
 
       useClientLayoutEffect(() => {
         if (loading) {
           const requestID = window.requestAnimationFrame(() => {
             setWidthOverride(
-              buttonRef?.current?.getBoundingClientRect()?.width
+              buttonRef?.current?.getBoundingClientRect()?.width,
             );
           });
           return () => {
@@ -103,22 +102,18 @@ export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
       const filterProps: React.ButtonHTMLAttributes<HTMLButtonElement> =
         disabled ?? widthOverride ? omit(rest, ["href"]) : rest;
 
+      const handleKeyUp = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+        if (e.key === " " && !disabled && !widthOverride) {
+          e.currentTarget.click();
+        }
+      };
+
       return (
         <Component
           {...(Component !== "button" ? { role: "button" } : {})}
           {...filterProps}
           ref={mergedRef}
-          onKeyUp={(e: React.KeyboardEvent<HTMLButtonElement>) => {
-            filterProps.onKeyUp?.(e);
-            if (
-              e.key === " " &&
-              !disabled &&
-              !widthOverride &&
-              !e.isDefaultPrevented()
-            ) {
-              e.currentTarget.click();
-            }
-          }}
+          onKeyUp={composeEventHandlers(filterProps.onKeyUp, handleKeyUp)}
           className={cl(
             className,
             "navds-button",
@@ -128,7 +123,7 @@ export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
               "navds-button--loading": widthOverride,
               "navds-button--icon-only": !!icon && !children,
               "navds-button--disabled": disabled ?? widthOverride,
-            }
+            },
           )}
           style={{
             ...style,
@@ -155,7 +150,7 @@ export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
           )}
         </Component>
       );
-    }
+    },
   );
 
 export default Button;

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

@@ -1,5 +1,5 @@
-import { StarIcon } from "@navikt/aksel-icons";
 import React from "react";
+import { StarIcon } from "@navikt/aksel-icons";
 import { Button } from "./index";
 
 export default {

@navikt/core/react/src/chat/Bubble.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "clsx";
+import React, { HTMLAttributes, forwardRef } from "react";
 import { Detail } from "../typography";
 
 export interface BubbleProps extends HTMLAttributes<HTMLDivElement> {
@@ -37,7 +37,7 @@ const Bubble = forwardRef<HTMLDivElement, BubbleProps>(
       toptextPosition,
       ...rest
     },
-    ref
+    ref,
   ) => {
     return (
       <div
@@ -50,7 +50,7 @@ const Bubble = forwardRef<HTMLDivElement, BubbleProps>(
           <h3
             className={cl(
               `navds-chat__top-text`,
-              toptextPosition && `navds-chat__top-text--${toptextPosition}`
+              toptextPosition && `navds-chat__top-text--${toptextPosition}`,
             )}
           >
             {name && <Detail as="span">{name}</Detail>}
@@ -65,7 +65,7 @@ const Bubble = forwardRef<HTMLDivElement, BubbleProps>(
         {children}
       </div>
     );
-  }
+  },
 );
 
 export default Bubble;

@navikt/core/react/src/chat/Chat.tsx

@@ -1,7 +1,7 @@
-import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "clsx";
-import Bubble from "./Bubble";
+import React, { HTMLAttributes, forwardRef } from "react";
 import { BodyLong } from "../typography";
+import Bubble from "./Bubble";
 
 export const POSITIONS = ["left", "right"] as const;
 export const SIZES = ["medium", "small"] as const;
@@ -99,7 +99,7 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
       size = "medium",
       ...rest
     }: ChatProps,
-    ref
+    ref,
   ) => (
     <div
       ref={ref}
@@ -109,7 +109,7 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
         `navds-chat--${position}`,
         `navds-chat--top-text-${toptextPosition ?? position}`,
         `navds-chat--${size}`,
-        `navds-chat--${variant}`
+        `navds-chat--${variant}`,
       )}
       {...rest}
     >
@@ -139,7 +139,7 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
         })}
       </ol>
     </div>
-  )
+  ),
 ) as ChatComponent;
 
 Chat.Bubble = Bubble;

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

@@ -1,6 +1,6 @@
+import { Meta } from "@storybook/react";
 import React from "react";
 import { Chat } from "../index";
-import { Meta } from "@storybook/react";
 import { POSITIONS, SIZES } from "./Chat";
 
 export default {

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

@@ -1,8 +1,8 @@
 import cl from "clsx";
-import React, { forwardRef, HTMLAttributes } from "react";
-import ToggleChips, { ToggleChipsProps } from "./Toggle";
+import React, { HTMLAttributes, forwardRef } from "react";
+import { OverridableComponent } from "../util/types";
 import RemovableChips, { RemovableChipsProps } from "./Removable";
-import { OverridableComponent } from "../util";
+import ToggleChips, { ToggleChipsProps } from "./Toggle";
 
 export interface ChipsProps extends HTMLAttributes<HTMLUListElement> {
   children: React.ReactNode;
@@ -74,7 +74,7 @@ export const Chips: ChipsComponent = forwardRef<HTMLUListElement, ChipsProps>(
         })}
       </ul>
     );
-  }
+  },
 ) as ChipsComponent;
 
 Chips.Toggle = ToggleChips;

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

@@ -1,6 +1,7 @@
-import { XMarkIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef } from "react";
+import { XMarkIcon } from "@navikt/aksel-icons";
+import { composeEventHandlers } from "../util/composeEventHandlers";
 
 export interface RemovableChipsProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -33,9 +34,10 @@ export const RemovableChips = forwardRef<
       removeLabel = "slett",
       onDelete,
       type = "button",
+      onClick,
       ...rest
     },
-    ref
+    ref,
   ) => {
     return (
       <button
@@ -45,13 +47,10 @@ export const RemovableChips = forwardRef<
         className={cl(
           "navds-chips__chip navds-chips__removable navds-chips--icon-right",
           className,
-          `navds-chips__removable--${variant}`
+          `navds-chips__removable--${variant}`,
         )}
         aria-label={`${children} ${removeLabel}`}
-        onClick={(e) => {
-          onDelete?.();
-          rest?.onClick?.(e);
-        }}
+        onClick={composeEventHandlers(onClick, onDelete)}
       >
         <span className="navds-chips__chip-text">{children}</span>
         <span className="navds-chips__removable-icon">
@@ -59,7 +58,7 @@ export const RemovableChips = forwardRef<
         </span>
       </button>
     );
-  }
+  },
 );
 
 export default RemovableChips;