Version Packages (#3270 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Better support for React 19 (#3268 )
2026-10-13 09:12:03 +00:00 · 2024-10-24 09:15:01 +02:00 · 2024-10-24 09:07:26 +02:00 · 2024-10-23 15:42:26 +02:00 · 2024-10-23 13:48:46 +02:00 · 2024-10-23 09:44:11 +02:00
402 changed files with 25134 additions and 13327 deletions
@@ -1,4 +1,19 @@
-// TODO: Convert to new format: https://eslint.org/docs/latest/use/configure/migration-guide
+/**
+ * TODO:
+ * - Convert to new format (v9): https://eslint.org/docs/latest/use/configure/migration-guide
+ * - Look into opinionated stylistic plugin
+ * - Replace @typescript-eslint/recommended with @typescript-eslint/recommended-type-checked
+ * - We should add "plugin:react/jsx-runtime", but not sure if this will cause problems for projects not using the new JSX transform
+ * - Consider adding the rule "id-length"
+ */
+
+/**
+ * V9 migration WIP
+ * - eslint-plugin-storybook does not support v9 yet: https://github.com/storybookjs/eslint-plugin-storybook/issues/157
+ * - eslint-plugin-testing-library does not support v9 yet: https://github.com/testing-library/eslint-plugin-testing-library/issues?q=is%3Aissue+is%3Aopen+v9
+ * - @vitest/eslint-plugin supports v9, just need to replace @vitest/legacy-recommended: https://github.com/vitest-dev/eslint-plugin-vitest?tab=readme-ov-file#usage
+ * - Looks like @typescript-eslint/eslint-plugin and @typescript-eslint/parser can both be replaced by just typescript-eslint in v9: https://typescript-eslint.io/getting-started#step-2-configuration
+ */
 module.exports = {
  env: {
    browser: true,
@@ -8,15 +23,13 @@ module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
-    //"plugin:react/jsx-runtime", // Not sure if this will cause problems for projects not using the new JSX transform
    "plugin:react-hooks/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:import/recommended",
    "plugin:import/typescript",
    "plugin:storybook/recommended",
-    // TODO: Look into opinionated stylistic plugin
-    // TODO: Replace @typescript-eslint/recommended with @typescript-eslint/recommended-type-checked
  ],
+  /* Allows eslint-plugin-react to detect installed react-version */
  settings: { react: { version: "detect" } },
  rules: {
    "import/no-unresolved": "off",
@@ -26,12 +39,6 @@ module.exports = {
    ],
    "array-callback-return": "error",
    "object-shorthand": "error",
-    // TODO: Consider adding the rule "id-length"
-    // Temporary:
-    "react/prop-types": "off",
-    "react/display-name": "off",
-    "import/no-named-as-default": "off",
-    // "import/no-cycle": [1],
    "no-else-return": "error",
    "no-console": [
      "warn",
@@ -53,7 +60,12 @@ module.exports = {
        ],
      },
    ],
+    /* Temporarily turned off until code is updated */
+    "react/prop-types": "off",
+    "react/display-name": "off",
+    "import/no-named-as-default": "off",
  },
+  /* https://eslint.org/docs/latest/use/configure/rules#report-unused-eslint-disable-comments */
  reportUnusedDisableDirectives: true,
  overrides: [
    {
@@ -66,15 +78,28 @@ module.exports = {
      files: ["**/*.ts?(x)"],
      extends: ["plugin:@typescript-eslint/recommended"],
      rules: {
-        "@typescript-eslint/no-shadow": ["error", { hoist: "all" }], // TODO: Consider { builtinGlobals: true }
+        /*
+         * TODO:
+         * - Consider { builtinGlobals: true }
+         */
+        "@typescript-eslint/no-shadow": ["error", { hoist: "all" }],
        "@typescript-eslint/no-explicit-any": "off", // Temporary
        "@typescript-eslint/array-type": "error",
+        "@typescript-eslint/no-unused-expressions": [
+          "error",
+          /* https://eslint.org/docs/latest/rules/no-unused-expressions#allowshortcircuit-and-allowternary */
+          { allowShortCircuit: true, allowTernary: true },
+        ],
      },
    },
    {
      files: ["**/*.test.*", "**/__tests__/*"],
-      plugins: ["vitest"],
-      extends: ["plugin:vitest/recommended", "plugin:testing-library/react"],
+      plugins: ["@vitest"],
+      extends: [
+        "plugin:testing-library/react",
+        /* Needed to support v8 eslint config-syntax */
+        "plugin:@vitest/legacy-recommended",
+      ],
    },

    {
@@ -153,5 +178,6 @@ module.exports = {
    "**/codemod/**/*.js",
    "!.storybook",
    "**/playwright-report/**",
+    "**/tokens/**/plugin.js",
  ],
 };
@@ -1,45 +1,17 @@
 ### Description

-<!-- PR description/motivation
-add links to project-tasks, slack discussions etc here
-->
+<!-- PR description/motivation, summary of changes, links to issue/slack discussion etc. -->

-### Change summary
+### Component Checklist 📝

-<!-- Short summary of changes in PR
- added variant x
- fixed bug in y
-->
-
-### PR Checklist 📝 (Remove fields after check!)
-
-#### New component? ✨
-
- Check that component-styling is correctly configured in `@navikt/core/css/config/_mappings.js`. This is needed for correct build and CDN upload.
- Check that styling is correctly exported from `@navikt/core/css/index.css`
- Check that correct tokens for component is documented in `@navikt/core/css/tokens.json`
- Check that only needed components and types are exported from `@navikt/core/react/src/index.ts`
- Check that component is exported from `@navikt/core/react/package.json`
- Add JSDoc to component (see other components for reference)
- Create storybook-stories for relevant component variations and compositions. Stories are used for [visual regression testing](https://www.chromatic.com/docs/), so make sure they are complete.
- Is the component sufficiently complex to warrant tests? Add some unit-tests for vitest.
-
-#### Component-updates 🎉
-
- Revalidate if everything under `New component` is still accounted for
- Deprecating/removing a CSS class? Add it to `@navikt/aksel-stylelint/src/deprecations.ts` with a suitable description. This helps stylelint-users keep their code clean and bug-free.
-
-#### Documentation 📝
-
- Add/update component-demos for component `aksel.nav.no/website/pages/eksempler`
- Create/Update documentation in sanity if needed
-  Note: Props, tokens and examples only updates to sanity on merge to main
-
-#### Versioning 🏷️
-
- Run `yarn changeset` to generate a version-entry for change.
- - Bug/hotfix: Patch
- - New feature: Minor
- - Breaking change: Major
- Adding breaking changes? Consider adding a codemod for easier migration.
- Breaking changes also needs documentation under "Migration"-page on website
+- [ ] JSDoc
+- [ ] Examples
+- [ ] Documentation
+- [ ] Storybook
+- [ ] Style mappings (`@navikt/core/css/config/_mappings.js`)
+- [ ] Component tokens (`@navikt/core/css/tokens.json`)
+- [ ] CSS class deprecations (`@navikt/aksel-stylelint/src/deprecations.ts`)
+- [ ] Exports (`@navikt/core/react/src/index.ts` and `@navikt/core/react/package.json`)
+- [ ] New component? CSS import (`@navikt/core/css/index.css`)
+- [ ] Breaking change? Update migration guide. Consider codemod.
+- [ ] Changeset (Format: `<Component>: <gitmoji?> <Text>.` E.g. "Button: :sparkles: Add feature xyz.")
@@ -34,6 +34,9 @@ jobs:
      - name: Install dependencies
        run: yarn

+      - name: Create empty .env file (Can be removed when env-file-if-exists is implemented in node v22)
+        run: echo "" > ./aksel.nav.no/website/.env
+
      - name: Build application
        env:
          SANITY_READ: ${{ secrets.SANITY_READ }}
@@ -32,6 +32,9 @@ jobs:
          yarn boot
          yarn docgen

+      - name: Create empty .env file (Can be removed when env-file-if-exists is implemented in node v22)
+        run: echo "" > ./aksel.nav.no/website/.env
+
      - name: Update sanity sync
        env:
          SANITY_WRITE: ${{ secrets.SANITY_WRITE }}
@@ -68,6 +71,9 @@ jobs:
      - name: Tests
        run: yarn workspace website test

+      - name: Create empty .env file (Can be removed when env-file-if-exists is implemented in node v22)
+        run: echo "" > ./aksel.nav.no/website/.env
+
      - name: Build application
        env:
          SANITY_READ: ${{ secrets.SANITY_READ }}
@@ -23,6 +23,9 @@ jobs:
      - name: Install dependencies
        run: cd aksel.nav.no/website && yarn

+      - name: Create empty .env file (Can be removed when env-file-if-exists is implemented in node v22)
+        run: echo "" > ./aksel.nav.no/website/.env
+
      - name: Export dataset
        env:
          SANITY_READ: ${{ secrets.SANITY_READ }}
@@ -13,7 +13,7 @@ jobs:
  playwright:
    runs-on: ubuntu-latest
    container:
-      image: mcr.microsoft.com/playwright:v1.35.1-jammy
+      image: mcr.microsoft.com/playwright:v1.48.1-jammy
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
@@ -31,6 +31,9 @@ jobs:
        run: |
          yarn boot

+      - name: Create empty .env file (Can be removed when env-file-if-exists is implemented in node v22)
+        run: echo "" > ./aksel.nav.no/website/.env
+
      - name: Build application
        env:
          SANITY_READ: ${{ secrets.SANITY_READ }}
@@ -0,0 +1,50 @@
+name: "Update remote token config for figma variables plugin"
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - "main"
+    paths:
+      - "@navikt/core/tokens/**"
+
+jobs:
+  upload:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: "read"
+      id-token: "write"
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          cache: yarn
+      - name: set-env for yarn install to @navikt scope
+        shell: bash
+        run: echo "NPM_AUTH_TOKEN=${{ secrets.READER_TOKEN }}" >> $GITHUB_ENV
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Build tokens
+        run: yarn workspace @navikt/ds-tokens build
+
+      - id: upload
+        uses: nais/deploy/actions/cdn-upload/v2@master
+        with:
+          team: designsystem
+          source: "./@navikt/core/tokens/figma-config.json"
+          destination: "./@navikt/tokens"
+          project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}
+          identity_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}
+          source_keep_parent_name: false
+          no_cache_paths: "@navikt/tokens/figma-config.json"
+
+      - run: echo uploaded file ${{ steps.upload.outputs.uploaded }}
+        shell: bash
@@ -0,0 +1,37 @@
+name: Deploy referansesider SPA
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: "read"
+      id-token: "write"
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          cache: yarn
+
+      - run: yarn install
+        env:
+          NPM_AUTH_TOKEN: ${{ secrets.READER_TOKEN }}
+      - run: yarn boot
+      - run: cd ./examples/referansesider && yarn && yarn build
+      - uses: nais/deploy/actions/spa-deploy/v2@master
+        with:
+          app: aksel-referansesider
+          team: designsystem
+          source: ./examples/referansesider/dist
+          ingress: https://aksel-referansesider.ansatt.dev.nav.no
+          environment: dev
+          project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}
+          identity_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}
@@ -5,24 +5,11 @@ jobs:
  execute:
    runs-on: ubuntu-latest
    permissions:
-      packages: "write"
-      contents: "read"
      id-token: "write"
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 1
-      - uses: denoland/setup-deno@v1
-        with:
-          deno-version: v1.x
-      - name: Restore cache
-        uses: actions/cache@v4
-        with:
-          path: "**/node_modules"
-          key: ${{ runner.os }}-build-${{ github.sha }}
-          restore-keys: |
-            ${{ runner.os }}-build-
-
      - uses: nais/docker-build-push@v0
        id: docker-push
        with:
@@ -136,34 +136,34 @@ import Setup from "./assets/setup.png";
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
-    grid-gap: var(--a-spacing-6);
+    grid-gap: 1.5rem;
  }

  .sb-link{
    text-decoration: underline;
-    color: var(--a-text-default);
+    color: #111;
  }

  img {
    object-fit: cover;
-    padding-bottom: var(--a-spacing-5);
+    padding-bottom: 1.25rem;
    border-radius: 8px;
  }

  .sb-section-title {
-    margin-bottom: var(--a-spacing-8);
+    margin-bottom: 2rem;
  }



  .sb-section-item-heading {
-    padding-bottom: var(--a-spacing-1);
+    padding-bottom: 0.25rem
    margin: 0 !important;
  }

  .sb-section-item-paragraph {
    margin: 0;
-    padding-bottom: var(--a-spacing-3);
+    padding-bottom: 0.75rem;
  }

  @media screen and (max-width: 768px) {
@@ -53,6 +53,7 @@ export default {
    "@storybook/addon-a11y",
    "@whitespace/storybook-addon-html",
    "@storybook/addon-interactions",
+    "@storybook/addon-themes",
    {
      name: "@storybook/addon-storysource",
      options: {
@@ -1,5 +1,7 @@
-import React from "react";
-import "@navikt/ds-css/index.css";
+import { withThemeByClassName } from "@storybook/addon-themes";
+import React, { useLayoutEffect } from "react";
+import darksideCss from "@navikt/ds-css/darkside/index.css?inline";
+import defaultCss from "@navikt/ds-css/index.css?inline";
 import "./layout.css";

 export const parameters = {
@@ -16,44 +18,61 @@ export const parameters = {
    },
  },
  layout: "centered",
-  backgrounds: {
-    values: [
-      {
-        name: "Canvas",
-        value: "#ffffff",
-      },
-      {
-        name: "Darkmode",
-        value: "#23262a",
-      },
-    ],
-  },
+  backgrounds: { disable: true },
 };

 export const globalTypes = {
-  theme: {
-    name: "Theme",
+  mode: {
+    name: "Darkside",
    toolbar: {
-      icon: "circlehollow",
      items: [
-        { value: "light", icon: "circlehollow", title: "light" },
-        { value: "dark", icon: "circle", title: "dark" },
+        {
+          value: "default",
+          icon: "hourglass",
+          title: "Default (old)",
+        },
+        { value: "darkside", icon: "beaker", title: "Darkside (new)" },
      ],
      showName: true,
+      dynamicTitle: true,
    },
  },
 };

-export const withTheme = (StoryFn, context) => {
-  return (
-    <div
-      data-theme={context.parameters.theme || context.globals.theme || "light"}
-      lang="no"
-      id="root"
-    >
-      <StoryFn />
-    </div>
-  );
+export const initialGlobals = {
+  mode: "default",
 };

-export const decorators = [withTheme];
+const ModeDecorator = ({ children, mode }) => {
+  useLayoutEffect(() => {
+    const style = document.createElement("style");
+    style.innerHTML = mode === "darkside" ? darksideCss : defaultCss;
+    document.head.appendChild(style);
+
+    if (mode === "darkside") {
+      document.body.style.setProperty("background", "var(--a-bg-default)");
+    }
+
+    return () => {
+      document.head.removeChild(style);
+      document.body.style.removeProperty("background");
+    };
+  }, [mode]);
+
+  return children;
+};
+
+export const decorators = [
+  (StoryFn, context) => (
+    <ModeDecorator mode={context.globals.mode}>
+      <StoryFn />
+    </ModeDecorator>
+  ),
+  withThemeByClassName({
+    themes: {
+      light: "light",
+      dark: "dark",
+    },
+    defaultTheme: "light",
+  }),
+];
@@ -1,5 +1,23 @@
 # @navikt/aksel-icons

+## 7.4.0
+
+## 7.3.1
+
+## 7.3.0
+
+## 7.2.1
+
+## 7.2.0
+
+## 7.1.2
+
+## 7.1.1
+
+## 7.1.0
+
+## 7.0.1
+
 ## 7.0.0

 ### Major Changes
@@ -0,0 +1,16 @@
+import { describe, expect, test } from "vitest";
+import { splitIntoParts } from "../config/figma/fetch-icons";
+
+describe("splitIntoParts", () => {
+  test("should split array into parts correctly with odd count array", () => {
+    const arr = ["a", "b", "c", "d", "e"];
+    const result = splitIntoParts(arr, 4);
+    expect(result).toEqual(["a,b", "c,d", "e"]);
+  });
+
+  test("should split array into parts correctly with even count array", () => {
+    const arr = ["a", "b", "c", "d", "e", "f"];
+    const result = splitIntoParts(arr, 4);
+    expect(result).toEqual(["a,b", "c,d", "e,f"]);
+  });
+});
@@ -1,8 +1,9 @@
 import fastglob from "fast-glob";
 import fs from "fs";
-import jsYaml from "js-yaml";
+import { JSON_SCHEMA, load } from "js-yaml";
 import path from "path";
 import { describe, expect, test } from "vitest";
+import { IconYml } from "../config/figma/make-configs";

 const basePath = path.resolve(__dirname, "../icons");

@@ -13,9 +14,10 @@ const ymlList = fastglob
 describe(`Each icons YML-config is valid`, () => {
  ymlList.forEach((file) => {
    test(`${file} has valid YML-config`, () => {
-      const ymlData = jsYaml.load(fs.readFileSync(`${basePath}/${file}`), {
-        schema: jsYaml.JSON_SCHEMA,
-      });
+      const ymlData = load(fs.readFileSync(`${basePath}/${file}`).toString(), {
+        schema: JSON_SCHEMA,
+      }) as IconYml;
+
      expect(ymlData.name).toBeTruthy();
      expect(ymlData.category).toBeTruthy();
      expect(ymlData.sub_category).toBeTruthy();
@@ -30,7 +32,7 @@ describe(`Each icons YML-config is valid`, () => {
  });
 });

-function isDate(dateStr) {
+function isDate(dateStr: string) {
  return !Number.isNaN(
    new Date(dateStr.split(".").reverse().join(".")).getDate(),
  );
@@ -21,8 +21,7 @@ describe(`Each icons has a valid code`, () => {

      test(`has valid attributes on root-node`, () => {
        const root = select(":root", iconAst);
-        const properties =
-          root && root.properties ? Object.keys(root.properties).sort() : [];
+        const properties = Object.keys(root?.properties ?? []).sort();

        expect(properties).toStrictEqual(
          ["viewBox", "xmlns", "height", "width", "fill"].sort(),
@@ -31,45 +30,41 @@ describe(`Each icons has a valid code`, () => {

      test(`has valid xml-attr`, () => {
        const root = select(":root", iconAst);
-        const xmlns = root && root.properties ? root.properties.xmlns : null;
-        expect(xmlns).toBe("http://www.w3.org/2000/svg");
+        expect(root?.properties?.xmlns).toBe("http://www.w3.org/2000/svg");
      });

      test(`has valid viewbox`, () => {
        const root = select(":root", iconAst);
-        const viewbox =
-          root && root.properties ? root.properties.viewBox : null;
-        expect(viewbox).toBe("0 0 24 24");
+        expect(root?.properties?.viewBox).toBe("0 0 24 24");
      });

      test(`root fill is none`, () => {
        const root = select(":root", iconAst);
-        const fill = root && root.properties ? root.properties.fill : null;
-        expect(fill).toBe("none");
+        expect(root?.properties?.fill).toBe("none");
      });

      test(`has valid width and height`, () => {
        const root = select(":root", iconAst);
-        const width = root && root.properties ? root.properties.width : null;
-        const height = root && root.properties ? root.properties.height : null;
-        expect(width).toBe("24");
-        expect(height).toBe("24");
+        expect(root?.properties?.width).toBe("24");
+        expect(root?.properties?.height).toBe("24");
      });

      test(`has valid stroke`, () => {
        const nodes = selectAll("*", iconAst);

        nodes.forEach((n) => {
-          n.properties?.stroke &&
+          if (n.properties?.stroke) {
            expect(n.properties.stroke).toEqual("#23262A");
+          }
        });
      });

      test(`has valid stroke-width`, () => {
        const nodes = selectAll("*", iconAst);
        nodes.forEach((n) => {
-          n.properties?.strokeWidth &&
+          if (n.properties?.strokeWidth) {
            expect(n.properties?.strokeWidth).toEqual("1.5");
+          }
        });
      });
    });
@@ -1,58 +0,0 @@
-const file_key = "wEdyFjCQSBR3U7FvrMbPXa";
-
-export const fetchIcons = async () => {
-  const data = await fetch(
-    `https://api.figma.com/v1/files/${file_key}/components`,
-    {
-      headers: {
-        "Content-type": "application/json",
-        "X-FIGMA-TOKEN": process.env.FIGMA_TOKEN,
-      },
-    },
-  )
-    .then((x) => x.json())
-    .catch((e) => {
-      throw e.message;
-    });
-
-  if (!data?.meta?.components || data?.meta?.components.length === 0) {
-    throw new Error("Fant ingen publiserte ikoner");
-  }
-
-  return data?.meta?.components;
-};
-
-export const fetchDownloadUrls = async (idArray) => {
-  const urls = { images: null };
-
-  for (let ids of idArray) {
-    await fetch(
-      `https://api.figma.com/v1/images/${file_key}/?ids=${ids}&format=svg`,
-      {
-        headers: {
-          "Content-type": "application/json",
-          "X-FIGMA-TOKEN": process.env.FIGMA_TOKEN,
-        },
-      },
-    )
-      .then((x) => x.json())
-      .then((x) => {
-        urls.images = {
-          ...urls.images,
-          ...x.images,
-        };
-      })
-      .catch((e) => {
-        throw e.message;
-      });
-  }
-  return urls;
-};
-
-export const fetchIcon = async (url) => {
-  return await fetch(url)
-    .then((x) => x.text())
-    .catch((e) => {
-      throw e.message;
-    });
-};
@@ -0,0 +1,114 @@
+import {
+  BadRequestErrorResponseWithErrMessage,
+  ErrorResponsePayloadWithErrMessage,
+  GetFileComponentsResponse,
+  GetImagesResponse,
+  PublishedComponent,
+} from "@figma/rest-api-spec";
+
+/* https://www.figma.com/developers/api#library-items */
+const FIGMA_FILE_KEY = "wEdyFjCQSBR3U7FvrMbPXa";
+
+export const fetchIcons = async (): Promise<PublishedComponent[]> => {
+  console.group("Fetching list of published icons from Figma...");
+  const data:
+    | GetFileComponentsResponse
+    | BadRequestErrorResponseWithErrMessage = await fetch(
+    `https://api.figma.com/v1/files/${FIGMA_FILE_KEY}/components`,
+    {
+      headers: {
+        "Content-type": "application/json",
+        "X-FIGMA-TOKEN": process.env.FIGMA_TOKEN ?? "",
+      },
+    },
+  )
+    .then((x) => x.json())
+    .catch((e) => {
+      throw e.message;
+    });
+
+  if (data.status !== 200) {
+    throw new Error(data.err);
+  }
+
+  if (data.meta.components.length === 0) {
+    throw new Error("No published icons found");
+  }
+
+  /* Filtes out any 'random' icons not meant for the icon-library */
+  const validIcons = data.meta.components.filter((icon) => {
+    const validIcon =
+      !!icon.containing_frame?.pageName && !!icon.containing_frame?.name;
+
+    if (!validIcon) {
+      console.warn(`Ignoring icon '${icon.name}' as it is missing metadata`);
+    }
+    return validIcon;
+  });
+
+  console.info(
+    `Found ${validIcons.length} published icons in Figma. ${
+      data.meta.components.length - validIcons.length
+    } icons were ignored due to missing metadata.`,
+  );
+
+  console.groupEnd();
+
+  return validIcons;
+};
+
+export const fetchDownloadUrls = async (
+  nodeIds: string[],
+): Promise<Record<string, string>> => {
+  /* Would just using Record be better here? Yes. But is a self-referencing return kinda cool? Also yes */
+  const idUrlPairs: Awaited<ReturnType<typeof fetchDownloadUrls>> = {};
+
+  /* Figma accepts a comma-separated list of ids: GET /v1/images/:key?ids=1:2,1:3,1:4 */
+  const paginatedNodeIds = splitIntoParts(nodeIds, 5);
+
+  for (const ids of paginatedNodeIds) {
+    const data: GetImagesResponse | ErrorResponsePayloadWithErrMessage =
+      await fetch(
+        `https://api.figma.com/v1/images/${FIGMA_FILE_KEY}/?ids=${ids}&format=svg`,
+        {
+          headers: {
+            "Content-type": "application/json",
+            "X-FIGMA-TOKEN": process.env.FIGMA_TOKEN ?? "",
+          },
+        },
+      )
+        .then((x) => x.json())
+        .catch((e) => {
+          throw e.message;
+        });
+
+    if (data.err !== null) {
+      throw new Error(data.err);
+    }
+
+    for (const [key, value] of Object.entries(data.images)) {
+      if (!value) {
+        console.warn(`No image found for ${key}`);
+        continue;
+      }
+      idUrlPairs[key] = value;
+    }
+  }
+  return idUrlPairs;
+};
+
+/**
+ * Splits an array of strings into parts where each part is a comma-separated string of all the strings for that part.
+ * @returns An array of comma-separated strings.
+ */
+export function splitIntoParts(arr: string[], parts: number): string[] {
+  const partSize = Math.ceil(arr.length / parts);
+  const blocks: string[] = [];
+
+  for (let i = 0; i < parts && i * partSize < arr.length; i++) {
+    const part = arr.slice(i * partSize, (i + 1) * partSize);
+    blocks.push(part.join(","));
+  }
+
+  return blocks;
+}
@@ -1,15 +0,0 @@
-import camelCase from "lodash.camelCase";
-import startCase from "lodash.startcase";
-
-export const resolveName = (icon) => {
-  const isVariant = icon.name.startsWith("Variant=");
-
-  if (isVariant) {
-    const variant = icon.name.replace("Variant=", "").replace("Stroke", "");
-    const actualName = icon["containing_frame"]?.["containingStateGroup"]?.name;
-    const name = `${actualName}${variant}`;
-    return `${startCase(camelCase(name)).replace(/ /g, "")}.svg`;
-  }
-
-  return `${startCase(camelCase(icon.name)).replace(/ /g, "")}.svg`;
-};
@@ -0,0 +1,17 @@
+import { PublishedComponent } from "@figma/rest-api-spec";
+import { camelCase, startCase } from "lodash";
+
+export const resolveName = (icon: PublishedComponent) => {
+  const isVariant = icon.name.startsWith("Variant=");
+
+  if (isVariant) {
+    const variant = icon.name.replace("Variant=", "").replace("Stroke", "");
+
+    /* @ts-expect-error Figma now includes the key:value pair `containingStateGroup: { name: string, nodeId: string }` */
+    const actualName = icon.containing_frame?.containingStateGroup?.name;
+    const name = `${actualName}${variant}`;
+    return `${startCase(camelCase(name)).replace(/ /g, "")}.svg`;
+  }
+
+  return `${startCase(camelCase(icon.name)).replace(/ /g, "")}.svg`;
+};
@@ -1,65 +0,0 @@
-import { config } from "dotenv";
-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 */
-
-const iconFolder = "./icons";
-
-if (!process.env.FIGMA_TOKEN) {
-  throw new Error("FIGMA_TOKEN not set in .env");
-}
-
-async function main() {
-  let icons = await fetchIcons();
-
-  const totalIcons = icons.length;
-
-  const { images } = await fetchDownloadUrls(
-    paginate(
-      icons.map((x) => x.node_id),
-      400,
-    ).map((x) => x.join(",")),
-  );
-
-  if (existsSync(iconFolder)) {
-    rmSync(iconFolder, { recursive: true, force: true });
-  }
-
-  mkdirSync(iconFolder);
-
-  console.info(`Laster ned ${Object.keys(images).length} ikoner`);
-
-  for (const [key, value] of Object.entries(images)) {
-    const icon = await fetchIcon(value).catch((e) => {
-      throw e;
-    });
-    await new Promise((r) => setTimeout(r, 20));
-
-    icon &&
-      writeFileSync(
-        resolve(iconFolder, resolveName(icons.find((x) => x.node_id === key))),
-        icon,
-        {
-          encoding: "utf8",
-        },
-      );
-  }
-
-  makeConfig(icons, iconFolder);
-
-  readdirSync(iconFolder, (_, files) => {
-    if (files.length * 2 !== totalIcons) {
-      throw new Error(`Ikoner mangler!`);
-    }
-  });
-
-  console.info(`Success! ${Object.keys(images).length} ikoner lastet ned`);
-}
-
-main();
@@ -0,0 +1,106 @@
+import { existsSync, mkdirSync, readdirSync, rmSync, writeFileSync } from "fs";
+import { resolve } from "path";
+import { fetchDownloadUrls, fetchIcons } from "./fetch-icons";
+import { resolveName } from "./icon-name";
+import { makeConfig } from "./make-configs";
+
+/**
+ * https://www.figma.com/file/wEdyFjCQSBR3U7FvrMbPXa/Core-Icons-Next?node-id=277%3A1221&t=mUJzFvnsceYYXNL5-0
+ * This is the current source for all icons we are working with.
+ */
+
+const iconFolder = "./icons";
+
+if (!process.env.FIGMA_TOKEN) {
+  throw new Error("FIGMA_TOKEN not set in .env");
+}
+
+main();
+
+async function main() {
+  console.info("Started icon-update from Figma");
+  /* Icons are published as 'components' in Figma */
+  const publishedIconComponents = await fetchIcons();
+
+  /* When we have all the published icons, we can ask figma for URL's for downloading them as assets */
+  const imagesUrls = await fetchDownloadUrls(
+    publishedIconComponents.map((x) => x.node_id),
+  );
+
+  /* Lets do a clean install */
+  if (existsSync(iconFolder)) {
+    rmSync(iconFolder, { recursive: true, force: true });
+  }
+  mkdirSync(iconFolder);
+
+  console.group(`Processing ${Object.keys(imagesUrls).length} icons...`);
+
+  const fileNames = new Set<string>();
+
+  await Promise.all(
+    Object.entries(imagesUrls).map(async ([nodeId, iconUrl]) => {
+      /* Each icon is now a raw string for a complete SVG */
+      const iconSvg = await fetch(iconUrl)
+        .then((x) => x.text())
+        .catch((e) => {
+          throw e.message;
+        });
+
+      const matchingIcon = publishedIconComponents.find(
+        (x) => x.node_id === nodeId,
+      );
+
+      if (!matchingIcon) {
+        throw new Error(
+          `No matching icon found for ${nodeId}. It should not be possible to dowload icon without a matching icon in the list of icons fetched from Figma.`,
+        );
+      }
+
+      const fileName = resolveName(matchingIcon);
+
+      /*
+       * In some cases if multiple icons are published in Figma with the same name,
+       * we will end up overwriting the icon with the same name.
+       */
+      if (fileNames.has(fileName)) {
+        console.warn(`Duplicate name detected: ${fileName}.`);
+      }
+
+      fileNames.add(fileName);
+
+      writeFileSync(resolve(iconFolder, resolveName(matchingIcon)), iconSvg, {
+        encoding: "utf8",
+      });
+    }),
+  );
+
+  if (fileNames.size !== publishedIconComponents.length) {
+    console.warn(
+      `Duplicate icon names from Figma leads to them being overwritten. This will cause the icon-library to be out of sync with Figma.`,
+    );
+  }
+
+  console.info(`Completed processing 🎉`);
+  console.groupEnd();
+
+  makeConfig(publishedIconComponents, iconFolder);
+
+  const filesInDir = readdirSync(iconFolder);
+  const svgFiles = filesInDir.filter((x) => x.endsWith(".svg"));
+  const ymlFiles = filesInDir.filter((x) => x.endsWith(".yml"));
+
+  if (
+    svgFiles.length !== publishedIconComponents.length ||
+    ymlFiles.length !== publishedIconComponents.length
+  ) {
+    throw new Error(
+      `Icons (${svgFiles.length}) and configs (${ymlFiles.length}) written to directory does not match the expected amount of icons located in Figma (${publishedIconComponents.length}).\nThis is most likely caused by duplicate icon names from figma.`,
+    );
+  }
+
+  console.info(
+    `Success! A total of ${
+      Object.keys(imagesUrls).length
+    } were fetched and downloaded from Figma 🎉`,
+  );
+}
@@ -1,17 +1,40 @@
+import { PublishedComponent } from "@figma/rest-api-spec";
 import { writeFileSync } from "fs";
-import jsYaml from "js-yaml";
+import { dump } from "js-yaml";
 import { resolve } from "path";
-import { resolveName } from "./icon-name.mjs";
+import { resolveName } from "./icon-name";

-export const makeConfig = (icons, folder) => {
-  icons.forEach((icon) => {
+export type IconYml = {
+  name: string;
+  category: string;
+  sub_category: string;
+  keywords: string[];
+  variant: string;
+  updated_at: string;
+  created_at: string;
+};
+
+export const makeConfig = (
+  icons: PublishedComponent[],
+  dirLocation: string,
+) => {
+  console.group("Creating icon yml...");
+
+  let counter = 0;
+  for (const icon of icons) {
    const name = resolveName(icon).replace(".svg", "");
    const keywords = icon.description
      .split(",")
      .map((x) => x.trim())
      .filter(Boolean);

-    const config = {
+    if (!icon.containing_frame?.pageName || !icon.containing_frame?.name) {
+      throw new Error(
+        `Missing containing_frame.pageName or containing_frame.name for icon ${name}`,
+      );
+    }
+
+    const config: IconYml = {
      name,
      category: icon.containing_frame.pageName,
      sub_category: icon.containing_frame.name,
@@ -33,14 +56,18 @@ export const makeConfig = (icons, folder) => {
        .join("."),
    };

-    const yml = jsYaml.dump(config, {
+    const yml = dump(config, {
      noRefs: true,
      skipInvalid: false,
      quotingType: '"',
    });

-    writeFileSync(resolve(folder, `${config.name}.yml`), yml, {
+    writeFileSync(resolve(dirLocation, `${config.name}.yml`), yml, {
      encoding: "utf8",
    });
-  });
+    counter++;
+  }
+
+  console.info(`Created ${counter} icon yml files`);
+  console.groupEnd();
 };
@@ -1,12 +0,0 @@
-export function paginate(arr, size) {
-  return arr.reduce((acc, val, i) => {
-    let idx = Math.floor(i / size);
-    if (!acc[idx]) {
-      acc[idx] = [];
-    }
-    let page = acc[idx];
-    page.push(val);
-
-    return acc;
-  }, []);
-}
@@ -15,6 +15,7 @@ ymlList.forEach((file) => {
  const ymlData = jsYaml.load(fs.readFileSync(`${basePath}/${file}`), {
    schema: jsYaml.JSON_SCHEMA,
  });
+  // biome-ignore lint/complexity/useOptionalChain: optional chain not supported in enviroment. Consider revriting to Typescript
  if (ymlData.keywords && ymlData.keywords.includes("[ignore-docs]")) {
    return;
  }
@@ -18,7 +18,7 @@
    "react-dom": "^18.0.0"
  },
  "devDependencies": {
-    "@figma/plugin-typings": "^1.84.0",
+    "@figma/plugin-typings": "^1.100.2",
    "@svgr/core": "^8.1.0",
    "@types/node": "^18.15.11",
    "@types/postcss-url": "^10.0.4",
@@ -27,8 +27,8 @@
    "@vitejs/plugin-react": "^4.2.1",
    "postcss": "^8.4.31",
    "postcss-url": "^10.1.3",
-    "typescript": "^5.1.6",
-    "vite": "^5.1.7",
+    "typescript": "5.5.4",
+    "vite": "^5.4.6",
    "vite-plugin-singlefile": "^1.0.0",
    "vite-plugin-svgr": "^4.2.0"
  }
@@ -109,7 +109,7 @@ const App = () => {
        icon.removeEventListener("dragend", dragEvent);
      }
    };
-  }, [categories]);
+  }, []);

  return (
    <main tabIndex={-1} className="wrapper">
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-icons",
-  "version": "7.0.0",
+  "version": "7.4.0",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -62,28 +62,30 @@
    "update-metadata": "node config/metadata.js",
    "write-packagejson": "echo '{\"type\": \"module\"}' > dist/react/esm/package.json",
    "build": "yarn copy && yarn create-icons && concurrently \"tsc\" \"tsc -p tsconfig.esm.json && tsc-alias -p tsconfig.esm.json && yarn write-packagejson\" && node config/cleanTypes.js && yarn update-metadata && yarn parse-svg",
-    "fetch-new:icons": "node config/figma/index.mjs",
+    "fetch-new:icons": "tsx --env-file=.env config/figma/index.ts",
    "zip:icons": "node config/zip.js",
    "test": "vitest run",
    "test:watch": "vitest watch"
  },
  "devDependencies": {
+    "@figma/rest-api-spec": "^0.19.0",
    "@svgr/cli": "8.1.0",
+    "@types/js-yaml": "^4.0.9",
+    "@types/react": "^18.3.11",
    "adm-zip": "^0.5.10",
-    "concurrently": "7.2.1",
+    "concurrently": "9.0.1",
    "copyfiles": "^2.4.1",
    "cross-zip-cli": "1.0.0",
-    "dotenv": "^10.0.0",
    "fast-glob": "3.2.11",
    "hast-util-select": "5.0.5",
    "js-yaml": "^4.1.0",
-    "lodash.camelcase": "4.3.0",
-    "lodash.startcase": "4.4.0",
+    "lodash": "^4.17.21",
    "prettier": "3.1.1",
    "react": "^18.0.0",
    "rehype-parse": "8.0.4",
    "tsc-alias": "1.8.8",
-    "typescript": "^5.1.6",
+    "tsx": "^4.7.1",
+    "typescript": "5.5.4",
    "unified": "10.1.2",
    "vitest": "^1.2.2"
  }
@@ -1,5 +1,31 @@
 # @navikt/aksel-stylelint

+## 7.4.0
+
+## 7.3.1
+
+## 7.3.0
+
+## 7.2.1
+
+## 7.2.0
+
+## 7.1.2
+
+## 7.1.1
+
+### Patch Changes
+
+- List: :boom: Removed class names "navds-list--nested" and "navds-list\_\_item-content" ([#3184](https://github.com/navikt/aksel/pull/3184))
+
+## 7.1.0
+
+### Minor Changes
+
+- Pagination: :boom: Added some classNames to list of deprecated (removed) classes. ([#3164](https://github.com/navikt/aksel/pull/3164))
+
+## 7.0.1
+
 ## 7.0.0

 ## 6.17.0
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-stylelint",
-  "version": "7.0.0",
+  "version": "7.4.0",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
  "repository": {
@@ -35,14 +35,14 @@
    "dev": "yarn watch:lint"
  },
  "devDependencies": {
-    "@navikt/ds-css": "^7.0.0",
-    "@navikt/ds-tokens": "^7.0.0",
-    "concurrently": "7.2.1",
+    "@navikt/ds-css": "^7.4.0",
+    "@navikt/ds-tokens": "^7.4.0",
+    "concurrently": "9.0.1",
    "postcss-selector-parser": "^6.0.13",
    "postcss-value-parser": "^4.2.0",
    "stylelint": "^14.8.5",
    "stylelint-test-rule-node": "^0.2.1",
    "tsx": "^4.7.1",
-    "typescript": "^5.1.6"
+    "typescript": "5.5.4"
  }
 }
@@ -60,4 +60,16 @@ export const deprecations: DeprecatedList = [
    classes: ["navds-textarea__wrapper"],
    message: "Removed in v6.0.0",
  },
+  {
+    classes: [
+      "navds-pagination__prev-next-icon",
+      "navds-pagination__next-text",
+      "navds-pagination__prev-text",
+    ],
+    message: "These classes had no effect and were removed in v7.1.0",
+  },
+  {
+    classes: ["navds-list--nested", "navds-list__item-content"],
+    message: "Removed in v7.1.1",
+  },
 ];
@@ -1,5 +1,68 @@
 # @navikt/aksel

+## 7.4.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@7.4.0
+
+## 7.3.1
+
+### Patch Changes
+
+- Updated dependencies [[`64aab73`](https://github.com/navikt/aksel/commit/64aab7361a512af93d93825c0b5c98a6fd39cf95)]:
+  - @navikt/ds-css@7.3.1
+
+## 7.3.0
+
+### Patch Changes
+
+- Updated dependencies [[`20ced9b`](https://github.com/navikt/aksel/commit/20ced9b084a1f4bb56a1e1c07ef92010c9f4d71c), [`536f088`](https://github.com/navikt/aksel/commit/536f088b97ab9ae139d6974deb2a3c69e4fb6db3)]:
+  - @navikt/ds-css@7.3.0
+
+## 7.2.1
+
+### Patch Changes
+
+- Updated dependencies [[`6ddea4eaf`](https://github.com/navikt/aksel/commit/6ddea4eaf2e37f20f93d75e1a3a327b038fb209b)]:
+  - @navikt/ds-css@7.2.1
+
+## 7.2.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@7.2.0
+
+## 7.1.2
+
+### Patch Changes
+
+- Updated dependencies [[`95c84e1d0`](https://github.com/navikt/aksel/commit/95c84e1d014d880bc22eb0053a875771e8399540)]:
+  - @navikt/ds-css@7.1.2
+
+## 7.1.1
+
+### Patch Changes
+
+- Updated dependencies [[`ca1d9be88`](https://github.com/navikt/aksel/commit/ca1d9be88f45f936ee8546af146f8783d8c43db2), [`73b2bca15`](https://github.com/navikt/aksel/commit/73b2bca156072c945c2fc4e4e849f50a00398eb6), [`d278060e5`](https://github.com/navikt/aksel/commit/d278060e59b17638cbda22dc194e89b01dc2113e)]:
+  - @navikt/ds-css@7.1.1
+
+## 7.1.0
+
+### Patch Changes
+
+- Updated dependencies [[`9c1eba445`](https://github.com/navikt/aksel/commit/9c1eba44508f295cc6261ff96822b18557bd7ddc)]:
+  - @navikt/ds-css@7.1.0
+
+## 7.0.1
+
+### Patch Changes
+
+- Updated dependencies [[`057bfe85b`](https://github.com/navikt/aksel/commit/057bfe85be772d7a483dac096982630922bdd736)]:
+  - @navikt/ds-css@7.0.1
+
 ## 7.0.0

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel",
-  "version": "7.0.0",
+  "version": "7.4.0",
  "description": "Aksel command line interface. Handles css-imports, codemods and more",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -29,7 +29,7 @@
  },
  "homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
  "dependencies": {
-    "@navikt/ds-css": "7.0.0",
+    "@navikt/ds-css": "7.4.0",
    "axios": "1.7.4",
    "chalk": "4.1.0",
    "clipboardy": "^2.3.0",
@@ -45,7 +45,7 @@
  },
  "devDependencies": {
    "rimraf": "6.0.1",
-    "typescript": "^5.1.6",
+    "typescript": "5.5.4",
    "vitest": "^1.2.2"
  },
  "sideEffects": false,
@@ -1,6 +1,7 @@
 import { applyTransform } from "jscodeshift/dist/testUtils";
 import fs from "node:fs";
 import path from "node:path";
+// eslint-disable-next-line import/default
 import prettier from "prettier";
 import { describe, expect, test } from "vitest";

@@ -43,7 +43,7 @@ export function validateGit(options: any, program: Command) {
  try {
    clean = isGitClean.sync(process.cwd());
  } catch (err: any) {
-    if (err && err.stderr && err.stderr.indexOf("Not a git repository") >= 0) {
+    if (err?.stderr && err.stderr.indexOf("Not a git repository") >= 0) {
      clean = true;
    }
  }
@@ -5,7 +5,7 @@ export async function getAllVersions() {
    const npmPackageData = await axios.get(
      `https://registry.npmjs.org/@navikt/ds-css`,
    );
-    return Object.keys(npmPackageData.data["versions"]);
+    return Object.keys(npmPackageData.data.versions);
  } catch (e) {
    console.error(e);
    return [];
@@ -137,7 +137,7 @@ export async function cssImportsCommand() {

  let foundComponents: string[] = [];

-  if (answers["autoscan"] === "yes") {
+  if (answers.autoscan === "yes") {
    foundComponents = await new Promise((resolve) => {
      exec(`node ${__dirname}/scan-code.js ${answers.scandir}`, (_, stdout) => {
        resolve(
@@ -1,5 +1,59 @@
 # @navikt/ds-css

+## 7.4.0
+
+## 7.3.1
+
+### Patch Changes
+
+- Updated to Selectors Level 4 syntax. ([#3250](https://github.com/navikt/aksel/pull/3250))
+
+## 7.3.0
+
+### Minor Changes
+
+- ActionMenu: :tada: New component! Replaces DropdownMenu as the go-to solution for floating menus. Includes support for grouping, sub-menus, checkboxes, radios and dividers. Read more in the [documentation](https://aksel.nav.no/komponenter/core/actionmenu). ([#3081](https://github.com/navikt/aksel/pull/3081))
+
+### Patch Changes
+
+- List.Item: Center icon horizontally inside it's container ([#3253](https://github.com/navikt/aksel/pull/3253))
+
+## 7.2.1
+
+### Patch Changes
+
+- Combobox: Support PageUp/PageDown in dropdown list. ([#3158](https://github.com/navikt/aksel/pull/3158))
+
+## 7.2.0
+
+## 7.1.2
+
+### Patch Changes
+
+- List: Explicitly set list-style on ol to override reset-CSS ([#3202](https://github.com/navikt/aksel/pull/3202))
+
+## 7.1.1
+
+### Patch Changes
+
+- List: Add indentation and remove overly verbose aria attributes ([#3184](https://github.com/navikt/aksel/pull/3184))
+
+- Datepicker/Select: :lipstick: dim non-interactable icons when readonly is set. ([#3187](https://github.com/navikt/aksel/pull/3187))
+
+- Combobox: :bug: implement missing readonly and disabled ([#3180](https://github.com/navikt/aksel/pull/3180))
+
+## 7.1.0
+
+### Patch Changes
+
+- Accordion: Remove 'relative' positioning when focused. This resolves some issues where floating elements like popover ended up clipping. ([`9c1eba445`](https://github.com/navikt/aksel/commit/9c1eba44508f295cc6261ff96822b18557bd7ddc))
+
+## 7.0.1
+
+### Patch Changes
+
+- List: :lipstick: make icons 24x24px large ([#3148](https://github.com/navikt/aksel/pull/3148))
+
 ## 7.0.0

 ### Patch Changes
@@ -2,10 +2,6 @@
  --__ac-accordion-header-shadow-color: var(--ac-accordion-header-border, var(--a-border-divider));
 }

-.navds-accordion__item:focus-within {
-  position: relative;
-}
-
 /*************************
 * Header *
 *************************/
@@ -0,0 +1,227 @@
+.navds-action-menu__content {
+  overflow: hidden;
+  box-shadow: var(--a-shadow-medium);
+  border-radius: var(--a-border-radius-large);
+}
+
+/* stylelint-disable csstools/value-no-unknown-custom-properties */
+.navds-action-menu__content > .navds-action-menu__content-inner {
+  --__ac-action-menu-content-p: var(--a-spacing-2);
+  --__ac-action-menu-item-pr: var(--a-spacing-3);
+  --__ac-action-menu-item-pl: var(--a-spacing-2);
+  --__ac-action-menu-item-height: 2rem;
+
+  border-radius: var(--a-border-radius-large);
+  background-color: var(--a-surface-default);
+  min-width: 128px;
+  max-width: min(95vw, 640px);
+  transform-origin: var(--__ac-action-menu-content-transform-origin);
+  animation-duration: 160ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  padding: var(--__ac-action-menu-content-p);
+  overflow: auto;
+  max-height: var(--__ac-action-menu-content-available-height);
+}
+
+.navds-action-menu__content:where([data-state="open"]):where([data-side="bottom"]) {
+  animation-name: aksel-action-from-bottom, aksel-action-fade-in;
+}
+
+.navds-action-menu__content:where([data-state="open"]):where([data-side="top"]) {
+  animation-name: aksel-action-from-top, aksel-action-fade-in;
+}
+
+.navds-action-menu__content:where([data-state="open"]):where([data-side="left"]) {
+  animation-name: aksel-action-from-left, aksel-action-fade-in;
+}
+
+.navds-action-menu__content:where([data-state="open"]):where([data-side="right"]) {
+  animation-name: aksel-action-from-right, aksel-action-fade-in;
+}
+
+@keyframes aksel-action-from-bottom {
+  from {
+    transform: translateY(-4px);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes aksel-action-from-top {
+  from {
+    transform: translateY(4px);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes aksel-action-from-left {
+  from {
+    transform: translateX(4px);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes aksel-action-from-right {
+  from {
+    transform: translateX(-4px);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes aksel-action-fade-in {
+  from {
+    opacity: 0.01;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.navds-action-menu__item {
+  display: flex;
+  align-items: center;
+  gap: var(--a-spacing-2);
+  min-height: var(--__ac-action-menu-item-height);
+  cursor: default;
+  border-radius: var(--a-border-radius-medium);
+  position: relative;
+  padding-left: var(--__ac-action-menu-item-pl);
+  padding-right: var(--__ac-action-menu-item-pr);
+  font-size: var(--a-font-size-medium);
+  scroll-margin-block: var(--__ac-action-menu-content-p);
+  line-height: 1.5;
+  color: var(--a-text-default);
+  text-decoration: none;
+}
+
+.navds-action-menu__item svg {
+  flex-shrink: 0;
+}
+
+.navds-action-menu__item--has-icon {
+  --__ac-action-menu-item-pl: var(--a-spacing-6);
+}
+
+.navds-action-menu__sub-trigger {
+  --__ac-action-menu-item-pr: var(--a-spacing-05);
+}
+
+.navds-action-menu__item:focus {
+  outline: none;
+  background-color: var(--a-surface-action-subtle-hover);
+  color: var(--a-text-default);
+}
+
+.navds-action-menu__item--danger {
+  color: var(--a-text-danger);
+}
+
+.navds-action-menu__item--danger:focus {
+  background-color: var(--a-surface-danger-subtle);
+}
+
+.navds-action-menu__marker {
+  display: flex;
+  align-items: center;
+  gap: var(--a-spacing-1);
+}
+
+.navds-action-menu__marker--right {
+  margin-left: auto;
+  padding-left: var(--a-spacing-4);
+}
+
+.navds-action-menu__marker--left {
+  position: absolute;
+  left: 0;
+  width: var(--__ac-action-menu-item-pl);
+  display: inline-flex;
+  justify-content: center;
+}
+
+.navds-action-menu__marker-icon svg {
+  font-size: 18px;
+  flex-shrink: 0;
+}
+
+.navds-action-menu__shortcut {
+  background-color: var(--a-surface-neutral-subtle);
+  color: var(--a-text-default);
+  border-radius: var(--a-border-radius-small);
+  padding: 0 var(--a-spacing-1);
+  min-width: 1.125rem;
+  height: 1.125rem;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--a-font-size-small);
+}
+
+.navds-action-menu__label {
+  display: flex;
+  align-items: center;
+  min-height: calc(var(--__ac-action-menu-item-height) - 6px);
+  padding-right: var(--__ac-action-menu-item-pr);
+  padding-left: var(--__ac-action-menu-item-pl);
+  color: var(--a-text-subtle);
+  border-radius: var(--a-border-radius-medium);
+  user-select: none;
+  cursor: default;
+  font-size: var(--a-font-size-small);
+}
+
+.navds-action-menu__divider {
+  height: 1px;
+  margin-block: var(--a-spacing-2);
+  background-color: var(--a-border-divider);
+}
+
+.navds-action-menu__indicator {
+  display: grid;
+  place-content: center;
+}
+
+.navds-action-menu__indicator-icon {
+  font-size: 14px;
+}
+
+.navds-action-menu__indicator-icon--unchecked,
+.navds-action-menu__indicator-icon--checked,
+.navds-action-menu__indicator-icon--indeterminate {
+  display: none;
+}
+
+.navds-action-menu__indicator[data-state="unchecked"] .navds-action-menu__indicator-icon--unchecked {
+  display: block;
+}
+
+.navds-action-menu__indicator:where([data-state="checked"]) .navds-action-menu__indicator-icon--checked {
+  display: block;
+}
+
+.navds-action-menu__indicator:where([data-state="indeterminate"]) .navds-action-menu__indicator-icon--indeterminate {
+  display: block;
+}
+
+.navds-action-menu__item:where([aria-disabled="true"]) {
+  color: var(--a-text-subtle);
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.navds-action-menu__sub-trigger:where([data-state="open"]) {
+  background-color: var(--a-surface-neutral-subtle);
+}
@@ -47,6 +47,8 @@ legend {
  white-space: normal;
 }

+/* Make elements with the HTML hidden attribute stay hidden by default. */
+
 [hidden] {
-  display: none;
+  display: none !important;
 }
@@ -1,6 +1,6 @@
 /* https://web.dev/prefers-reduced-motion/ */
@media (prefers-reduced-motion: reduce) {
-  *:not(.navds-loader *):not(.navds-loader):not(.navds-progress-bar *):not(.navds-progress-bar),
+  *:not(.navds-loader *, .navds-loader, .navds-progress-bar *, .navds-progress-bar),
  ::before,
  ::after {
    animation-delay: -1ms !important;
@@ -154,6 +154,7 @@
    inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--__ac-button-primary-focus-border, var(--a-surface-default))),
    var(--a-shadow-focus);
 }
+
@media (forced-colors: active) {
  .navds-button--primary:focus-visible {
    box-shadow: none;
@@ -69,6 +69,11 @@ const StyleMappings = {
      dependencies: [typoCss],
    },
    { component: "Alert", main: "alert.css", dependencies: [typoCss] },
+    {
+      component: "ActionMenu",
+      main: "action-menu.css",
+      dependencies: [typoCss],
+    },
    {
      component: "BodyLong",
      main: typoCss,
@@ -31,7 +31,6 @@
@media (forced-colors: active) {
  .navds-copybutton {
    background-color: ButtonFace;
-    border-color: ButtonText;
    border: solid 1px ButtonText;
    color: ButtonText;
  }
@@ -0,0 +1,25 @@
+# Template for writing new CSS
+
+## File setup
+
+1. Create new CSS-file for component: "alert.darkside.css", "button.darkside.css" etc. Remember to add `.darkside.` for easier lookup.
+2. Import file in "darkside/index.css": `@import "./alert.darkside.css`
+
+Files will not be included in `/dist` for now to avoid it potentially polluting production-code. This will need to be revisited when we want to expose the new systems outside the team.
+
+## Development
+
+1. Write new CSS for component. Use same prefix `.navds` as before.
+2. Run storybook and change from "Default (old)" to "Darkside (new)" in toolbar. You are now developing new CSS 🎉
+
+## Syntax
+
+- Test using outline + outline-offset for focus-markings.
+
+## Checklist
+
+- Add new CSS-files under `core/css/darkside`.
+- New files should include `.darkside.` for easier lookup.
+- Import new CSS-files in `core/css/darkside/index.css`
+- New CSS-selectors should have `.navds` as prefix, same as original code.
+- Test changes in Storybook by changing mode in toolbar from "default (old)" -> "darkside (new)"
@@ -0,0 +1,129 @@
+/* cyrillic-ext */
+@font-face {
+  font-family: "Source Sans 3";
+  font-style: italic;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic-cyrillic_ext.woff2) format("woff2");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+  font-family: "Source Sans 3";
+  font-style: italic;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic-cyrillic.woff2) format("woff2");
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: "Source Sans 3";
+  font-style: italic;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic-latin_ext.woff2) format("woff2");
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
+    U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: "Source Sans 3";
+  font-style: italic;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+  font-family: "Source Sans 3";
+  font-style: normal;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal-cyrillic_ext.woff2) format("woff2");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+  font-family: "Source Sans 3";
+  font-style: normal;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal-cyrillic.woff2) format("woff2");
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: "Source Sans 3";
+  font-style: normal;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal-latin_ext.woff2) format("woff2");
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
+    U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: "Source Sans 3";
+  font-style: normal;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* Legacy support */
+
+/* latin-ext */
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: italic;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic-latin_ext.woff2) format("woff2");
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
+    U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: italic;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal-latin_ext.woff2) format("woff2");
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
+    U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
@@ -0,0 +1,75 @@
+/* ==========================================================================
+   Print styles copied from https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/style.css
+   Inlined to avoid the additional HTTP request:
+   https://www.phpied.com/delay-loading-your-print-css/
+   ========================================================================== */
+
+@media print {
+  *,
+  *::before,
+  *::after {
+    background: #fff !important;
+    color: #000 !important;
+
+    /* Black prints faster */
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+
+  a,
+  a:visited {
+    text-decoration: underline;
+  }
+
+  a[href]::after {
+    content: " (" attr(href) ")";
+  }
+
+  abbr[title]::after {
+    content: " (" attr(title) ")";
+  }
+
+  /*
+     * Don't show links that are fragment identifiers,
+     * or use the `javascript:` pseudo protocol
+     */
+  a[href^="#"]::after,
+  a[href^="javascript:"]::after {
+    content: "";
+  }
+
+  pre {
+    white-space: pre-wrap !important;
+  }
+
+  pre,
+  blockquote {
+    border: 1px solid #999;
+    page-break-inside: avoid;
+  }
+
+  /*
+     * Printing Tables:
+     * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
+     */
+  thead {
+    display: table-header-group;
+  }
+
+  tr,
+  img {
+    page-break-inside: avoid;
+  }
+
+  p,
+  h2,
+  h3 {
+    orphans: 3;
+    widows: 3;
+  }
+
+  h2,
+  h3 {
+    page-break-after: avoid;
+  }
+}
@@ -0,0 +1,148 @@
+/* Modern-normalize: https://github.com/sindresorhus/modern-normalize/blob/main/modern-normalize.css */
+
+/* Better box-model */
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  line-height: 1.15; /* Correct the line height in all browsers. */
+  -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. */
+  tab-size: 4; /* Use a more readable tab size (opinionated). */
+}
+
+body {
+  margin: 0; /* Remove the margin in all browsers. */
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+2. Correct the odd 'em' font sizing in all browsers.
+*/
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+Add the correct font size in all browsers.
+*/
+small {
+  font-size: 80%;
+}
+
+/**
+Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
+*/
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/**
+Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
+*/
+table {
+  border-color: currentColor;
+}
+
+/**
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+*/
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+Correct the inability to style clickable types in iOS and Safari.
+*/
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
+*/
+legend {
+  padding: 0;
+}
+
+/**
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+progress {
+  vertical-align: baseline;
+}
+
+/**
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to 'inherit' in Safari.
+*/
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+summary {
+  display: list-item;
+}
@@ -0,0 +1,10 @@
+/* To support nested theming, we want to declare color on each scoped elements */
+:root,
+:host,
+.light {
+  color: var(--a-text-default);
+}
+
+.dark {
+  color: var(--a-text-default);
+}
@@ -0,0 +1,65 @@
+[hidden] {
+  display: none !important;
+}
+
+/* https://web.dev/prefers-reduced-motion/ */
+@media (prefers-reduced-motion: reduce) {
+  *:not(.navds-loader *, .navds-loader, .navds-progress-bar *, .navds-progress-bar),
+  ::before,
+  ::after {
+    animation-delay: -1ms !important;
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    background-attachment: initial !important;
+    scroll-behavior: auto !important;
+    transition-duration: 0s !important;
+    transition-delay: 0s !important;
+  }
+}
+
+/*
+ * From https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/style.css
+ *
+ * Hide only visually, but have it available for screen readers:
+ * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+ *
+ * 1. For long content, line feeds are not interpreted as spaces and small width
+ *    causes content to wrap 1 word per line:
+ *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
+ */
+
+.sr-only,
+.navds-sr-only {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+/*
+* From https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/style.css
+*
+* Extends the .sr-only class to allow the element
+* to be focusable when navigated to via the keyboard:
+* https://www.drupal.org/node/897638
+*/
+
+.sr-only.focusable:active,
+.sr-only.focusable:focus,
+.navds-sr-only.focusable:active,
+.navds-sr-only.focusable:focus {
+  clip: auto;
+  clip-path: none;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  position: static;
+  white-space: inherit;
+  width: auto;
+}
@@ -0,0 +1,6 @@
+/* stylelint-disable csstools/value-no-unknown-custom-properties */
+/* stylelint-disable aksel/design-token-exists */
+
+.navds-button {
+  background-color: var(--a-bg-accent-strong);
+}
@@ -0,0 +1,17 @@
+@charset "UTF-8";
+
+@layer aksel.reset, aksel.typography, aksel.theme, aksel.components, aksel.utilities;
+
+/* CSS foundations */
+@import "./baseline/reset.darkside.css" layer(aksel.reset);
+@import "./baseline/print.darkside.css" layer(aksel.reset);
+@import "./baseline/fonts.darkside.css" layer(aksel.typography);
+@import "./baseline/theme.darkside.css" layer(aksel.theme);
+@import "./typography.darkside.css" layer(aksel.typography);
+@import "./baseline/utilities.darkside.css" layer(aksel.utilities);
+
+/* Theming */
+@import "@navikt/ds-tokens/dist/darkside/tokens.css" layer(aksel.theme);
+
+/* Components */
+@import "./button.darkside.css" layer(aksel.components);
@@ -0,0 +1,6 @@
+body,
+:host {
+  font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
+  line-height: 1.333;
+  font-size: 1.125rem;
+}
@@ -75,14 +75,14 @@
  border-radius: var(--a-border-radius-xlarge);
 }

-.navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus-visible,
-.navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus-visible {
+.navds-date .rdp-button:not(.rdp-day_selected, [disabled]):focus-visible,
+.navds-date .navds-date__month-button:not(.rdp-day_selected, [disabled]):focus-visible {
  box-shadow: var(--a-shadow-focus);
 }

@supports not selector(:focus-visible) {
-  .navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus,
-  .navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus {
+  .navds-date .rdp-button:not(.rdp-day_selected, [disabled]):focus,
+  .navds-date .navds-date__month-button:not(.rdp-day_selected, [disabled]):focus {
    box-shadow: var(--a-shadow-focus);
  }
 }
@@ -167,8 +167,8 @@
  color: var(--ac-date-disabled-text, var(--a-text-subtle));
 }

-.navds-date .rdp-button:where(:not(.rdp-day_selected):not([disabled])):hover,
-.navds-date__month-button:where(:not(.rdp-day_selected):not([disabled])):hover {
+.navds-date .rdp-button:where(:not(.rdp-day_selected, [disabled])):hover,
+.navds-date__month-button:where(:not(.rdp-day_selected, [disabled])):hover {
  background: var(--ac-date-hover-bg, var(--a-surface-action-subtle-hover));
  cursor: pointer;
 }
@@ -201,19 +201,19 @@
 }

 /* Error-handling */
-.navds-date__field--error .navds-date__field-input:not(:hover):not(:disabled) {
+.navds-date__field--error .navds-date__field-input:not(:hover, :disabled) {
  border-color: var(--ac-date-input-error-border, var(--a-border-danger));
  box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger));
 }

-.navds-date__field--error .navds-date__field-input:focus-visible:not(:hover):not(:disabled) {
+.navds-date__field--error .navds-date__field-input:focus-visible:not(:hover, :disabled) {
  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) {
+  .navds-date__field--error .navds-date__field-input:focus:not(:hover, :disabled) {
    box-shadow:
      inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)),
      var(--a-shadow-focus);
@@ -281,6 +281,7 @@
 /* Readonly */
 .navds-date__field--readonly .navds-date__field-button {
  cursor: default;
+  color: var(--a-gray-500);
 }

 .navds-date__caption-button {
@@ -13,7 +13,7 @@
  border-bottom: 1px solid var(--a-border-divider);
 }

-.navds-dropdown__menu > :not(.navds-dropdown__divider):not(.navds-dropdown__list) {
+.navds-dropdown__menu > :not(.navds-dropdown__divider, .navds-dropdown__list) {
  margin: 0 var(--a-spacing-4) var(--a-spacing-3);
 }

@@ -20,6 +20,36 @@
  --__ac-combobox-input-height: 1.5rem;
 }

+.navds-combobox--disabled {
+  opacity: 0.3;
+}
+
+.navds-combobox--disabled .navds-combobox__wrapper *:hover {
+  cursor: not-allowed;
+}
+
+.navds-combobox--disabled .navds-text-field__input {
+  border: 1px solid var(--a-border-default);
+}
+
+.navds-combobox--disabled .navds-combobox__selected-options {
+  pointer-events: none;
+}
+
+.navds-combobox--readonly {
+  pointer-events: none;
+}
+
+.navds-combobox--readonly .navds-combobox__button-toggle-list {
+  color: var(--a-gray-500);
+}
+
+.navds-combobox--readonly .navds-text-field__input,
+.navds-combobox--readonly .navds-combobox__input {
+  background-color: var(--a-surface-subtle);
+  border-color: var(--a-border-subtle);
+}
+
 .navds-combobox__button-clear svg,
 .navds-combobox__button-toggle-list svg,
 .navds-combobox__list svg {
@@ -51,13 +81,13 @@
  cursor: text;
 }

-.navds-combobox--error .navds-text-field__input:not(:hover):not(:disabled) {
+.navds-combobox--error .navds-text-field__input:not(:hover, :disabled) {
  border-color: var(--ac-combobox-error-border, var(--a-border-danger));
  box-shadow: 0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger));
 }

 .navds-combobox--error
-  .navds-text-field__input:not(:hover):not(:disabled):not(.navds-combobox__wrapper-inner--virtually-unfocused):focus-within {
+  .navds-text-field__input:not(:hover, :disabled, .navds-combobox__wrapper-inner--virtually-unfocused):focus-within {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow:
@@ -233,6 +263,7 @@
  border-radius: var(--a-border-radius-medium);
  background-color: var(--ac-combobox-list-bg, var(--a-surface-default));
  color: var(--ac-combobox-list-text, var(--a-text-default));
+  overscroll-behavior: contain;
 }

 .navds-combobox__list--closed {
@@ -341,6 +372,11 @@
  border-radius: calc(var(--a-border-radius-medium) - 1px);
 }

+.navds-combobox__list-item mark {
+  background-color: transparent;
+  font-weight: bold;
+}
+
 /* Mobile */

@media (max-width: 479px) {
@@ -13,7 +13,7 @@
  min-width: 0;
 }

-.navds-fieldset > :not(:first-child):not(:empty) {
+.navds-fieldset > :not(:first-child, :empty) {
  margin-top: var(--a-spacing-2);
 }

@@ -26,7 +26,7 @@
 }

 /* Applied when hideLegend is applied to fieldset */
-.navds-fieldset > .navds-sr-only + :not(:first-child):not(:empty) {
+.navds-fieldset > .navds-sr-only + :not(:first-child, :empty) {
  margin-top: 0;
 }

@@ -170,44 +170,42 @@
  color: var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
 }

-.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus) + .navds-checkbox__label::before,
-.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
+.navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate, :focus) + .navds-checkbox__label::before,
+.navds-radio__input:hover:not(:disabled, :checked, :focus) + .navds-radio__label::before {
  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
 }

-.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate) + .navds-checkbox__label::before,
-.navds-radio__input:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
+.navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
+.navds-radio__input:hover:not(:disabled, :checked) + .navds-radio__label::before {
  background-color: var(--ac-radio-checkbox-action-hover-bg, var(--a-surface-action-subtle));
 }

-.navds-checkbox--error
-  > .navds-checkbox__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
-  + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
+.navds-checkbox--error > .navds-checkbox__input:not(:hover, :disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
+.navds-radio--error > .navds-radio__input:not(:hover, :disabled, :checked) + .navds-radio__label::before {
  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
 }

 .navds-checkbox--error
-  > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
+  > .navds-checkbox__input:focus:not(:hover, :disabled, :checked, :indeterminate)
  + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
+.navds-radio--error > .navds-radio__input:focus:not(:hover, :disabled, :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);
 }

 .navds-checkbox--error
-  > .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
+  > .navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate, :focus)
  + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
+.navds-radio--error > .navds-radio__input:hover:not(:disabled, :checked, :focus) + .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));
 }

 .navds-checkbox--error
-  > .navds-checkbox__input:focus:hover:not(:disabled):not(:checked):not(:indeterminate)
+  > .navds-checkbox__input:focus:hover:not(:disabled, :checked, :indeterminate)
  + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
+.navds-radio--error > .navds-radio__input:focus:hover:not(:disabled, :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)),
@@ -241,14 +239,10 @@
  color: var(--a-text-default);
 }

-.navds-checkbox--readonly
-  > .navds-checkbox__input:not(:disabled):not(:checked):not(:indeterminate)
-  + .navds-checkbox__label::before,
-.navds-checkbox--readonly
-  > .navds-checkbox__input:hover:not(:checked):not(:indeterminate):not(:focus)
-  + .navds-checkbox__label::before,
-.navds-radio--readonly > .navds-radio__input:not(:disabled):not(:checked) + .navds-radio__label::before,
-.navds-radio--readonly > .navds-radio__input:hover:not(:checked):not(:focus) + .navds-radio__label::before {
+.navds-checkbox--readonly > .navds-checkbox__input:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
+.navds-checkbox--readonly > .navds-checkbox__input:hover:not(:checked, :indeterminate, :focus) + .navds-checkbox__label::before,
+.navds-radio--readonly > .navds-radio__input:not(:disabled, :checked) + .navds-radio__label::before,
+.navds-radio--readonly > .navds-radio__input:hover:not(:checked, :focus) + .navds-radio__label::before {
  background-color: var(--__ac-radio-checkbox-readonly-bg);
  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
 }
@@ -186,12 +186,12 @@
 }

 /* Error-handling */
-.navds-search--error .navds-search__input:not(:hover):not(:disabled) {
+.navds-search--error .navds-search__input:not(:hover, :disabled) {
  border-color: 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)));
 }

-.navds-search--error .navds-search__input:focus-visible:not(:hover):not(:disabled) {
+.navds-search--error .navds-search__input:focus-visible:not(:hover, :disabled) {
  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);
@@ -205,7 +205,7 @@
 }

@supports not selector(:focus-visible) {
-  .navds-search--error .navds-search__input:focus:not(:hover):not(:disabled) {
+  .navds-search--error .navds-search__input:focus:not(:hover, :disabled) {
    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);
@@ -80,7 +80,7 @@
 /**
  Error handling
 */
-.navds-select--error > * select:not(:hover):not(:focus):not(:disabled) {
+.navds-select--error > * select:not(:hover, :focus, :disabled) {
  box-shadow: 0 0 0 1px var(--ac-select-error-border, var(--a-surface-danger));
  border-color: var(--ac-select-error-border, var(--a-surface-danger));
 }
@@ -109,3 +109,7 @@
  border-color: var(--a-border-subtle);
  cursor: default;
 }
+
+.navds-select--readonly .navds-select__chevron {
+  color: var(--a-gray-500);
+}
@@ -61,19 +61,19 @@
 /**
  Error handling
 */
-.navds-text-field--error > .navds-text-field__input:not(:hover):not(:disabled) {
+.navds-text-field--error > .navds-text-field__input:not(:hover, :disabled) {
  border-color: var(--ac-textfield-error-border, var(--__ac-textfield-error-border, var(--a-border-danger)));
  box-shadow: 0 0 0 1px var(--ac-textfield-error-border, var(--__ac-textfield-error-border, var(--a-border-danger)));
 }

-.navds-text-field--error > .navds-text-field__input:focus-visible:not(:hover):not(:disabled) {
+.navds-text-field--error > .navds-text-field__input:focus-visible:not(:hover, :disabled) {
  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) {
+  .navds-text-field--error > .navds-text-field__input:focus:not(:hover, :disabled) {
    box-shadow:
      0 0 0 1px var(--a-border-danger),
      var(--a-shadow-focus);
@@ -111,13 +111,13 @@
 /**
  Error handling
 */
-.navds-textarea--error .navds-textarea__input:not(:hover):not(:focus-visible):not(:disabled) {
+.navds-textarea--error .navds-textarea__input:not(:hover, :focus-visible, :disabled) {
  box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
  border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
 }

@supports not selector(:focus-visible) {
-  .navds-textarea--error .navds-textarea__input:not(:hover):not(:focus):not(:disabled) {
+  .navds-textarea--error .navds-textarea__input:not(:hover, :focus, :disabled) {
    box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
    border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
  }
@@ -1,4 +1,5 @@
@charset "UTF-8";
+
@import "baseline/index.css";
@import "typography.css";
@import "accordion.css";
@@ -8,6 +9,7 @@
@import "chips.css";
@import "copybutton.css";
@import "dropdown.css";
+@import "action-menu.css";
@import "expansioncard.css";
@import "guide-panel.css";
@import "form/index.css";
@@ -10,7 +10,6 @@
@media (forced-colors: active) {
  .navds-internalheader {
    background-color: ButtonFace;
-    border-color: ButtonText;
    border: solid 1px ButtonText;
    color: ButtonText;
  }
@@ -4,91 +4,82 @@
  margin-block: var(--a-spacing-4);
 }

-.navds-list--nested ul,
-.navds-list--nested ol {
-  margin-block: var(--a-spacing-2);
-}
-
 .navds-list--small ul,
 .navds-list--small ol {
  margin-block: var(--a-spacing-3);
 }

-.navds-list li {
-  margin-block-end: var(--a-spacing-2);
-}
-
-.navds-list:last-child > ul > li:last-child,
-.navds-list:last-child > ol > li:last-child {
-  margin-bottom: 0;
-}
-
-.navds-list ul .navds-list__item {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  gap: var(--a-spacing-3);
-  padding-left: 0;
-}
-
-.navds-list ul .navds-list__item::marker {
-  content: none;
-}
-
-.navds-list ol .navds-list__item-marker--icon {
-  grid-column: 1 / 2;
-  display: flex;
-}
-
-.navds-list .navds-list__item-marker--bullet {
-  display: flex;
-  align-items: center;
-  height: var(--a-font-line-height-xlarge);
-  grid-column: 1 / 2;
-  color: var(--ac-list-marker-ul-color, var(--ac-list-marker-color, var(--a-icon-default)));
-}
-
-.navds-list--small .navds-list__item-marker--bullet {
-  height: var(--a-font-line-height-large);
-}
-
-.navds-list__item-marker--icon {
-  color: var(--ac-list-marker-icon-color, var(--ac-list-marker-color, var(--a-icon-default)));
-  display: flex;
-  align-items: center;
-  height: var(--a-font-line-height-xlarge);
-  padding-block-end: 1px;
-}
-
-.navds-list--small .navds-list__item-marker--icon {
-  height: var(--a-font-line-height-large);
-}
-
-.navds-list__item-marker--icon svg {
-  flex-shrink: 0;
-}
-
-.navds-list ul .navds-list__item-content {
-  grid-column: 2 / 3;
+.navds-list .navds-list :where(ul, ol) {
+  margin-block: var(--a-spacing-2) 0;
 }

 .navds-list ol {
-  padding-left: var(--a-spacing-2);
-  list-style: decimal;
+  list-style: decimal; /* This is the default value, but some frameworks have `ol,ul { list-style:none }` */
+  padding-left: 1.7rem;
 }

-.navds-list ol li {
-  padding-left: var(--a-spacing-1);
-  margin-left: var(--a-spacing-2);
+.navds-list ol > .navds-list__item {
+  padding-left: 0.3rem;
+}
+
+/* SAFARI HACK START */
+/* stylelint-disable selector-type-no-unknown */
+
+_::-webkit-full-page-media,
+_:future,
+:root .navds-list ol {
+  padding-left: 2.1rem;
+}
+
+_::-webkit-full-page-media,
+_:future,
+:root .navds-list ol .navds-list__item {
+  padding-left: 0;
+}
+
+/* SAFARI HACK END */
+/* stylelint-enable selector-type-no-unknown */
+
+.navds-list__item {
+  margin-block-end: var(--a-spacing-2);
+}
+
+.navds-list__item:last-child {
+  margin-block-end: 0;
+}
+
+.navds-list ul > .navds-list__item {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--a-spacing-2);
 }

 .navds-list ol li::marker {
  font-weight: var(--a-font-weight-bold);
-  font-size: var(--a-font-size-large);
  color: var(--ac-list-marker-ol-color, var(--ac-list-marker-color, var(--a-icon-default)));
-  line-height: var(--a-font-line-height-xlarge);
 }

-.navds-list--small ol li::marker {
-  font-size: var(--a-font-size-small);
-  line-height: var(--a-font-line-height-large);
+.navds-list__item-marker {
+  width: 1.5rem;
+}
+
+.navds-list ul > li > .navds-list__item-marker {
+  display: flex;
+  align-items: center;
+  height: var(--a-font-line-height-xlarge);
+}
+
+.navds-list--small ul > li > .navds-list__item-marker {
+  height: var(--a-font-line-height-large);
+}
+
+.navds-list__item-marker--bullet {
+  padding-left: 0.8rem;
+  color: var(--ac-list-marker-ul-color, var(--ac-list-marker-color, var(--a-icon-default)));
+}
+
+.navds-list__item-marker--icon {
+  font-size: 1.5rem;
+  justify-content: center;
+  color: var(--ac-list-marker-icon-color, var(--ac-list-marker-color, var(--a-icon-default)));
 }
@@ -46,8 +46,9 @@
  /* From polyfill */
  position: fixed;
  top: 0;
-  right: 0;
  bottom: 0;
+  right: 0;
+  /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
  left: 0;
 }

@@ -96,8 +97,9 @@
  /* From polyfill: */
  position: fixed;
  top: 0;
-  right: 0;
  bottom: 0;
+  right: 0;
+  /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
  left: 0;
 }

@@ -176,7 +178,7 @@
 }

@keyframes akselModalFadeIn {
-  from {
+  0% {
    opacity: 0.0001; /* Safari will not set focus inside the modal when it opens if we set this to 0 */
    transform: translate3d(0, calc(5% + 4px), 0);
  }
@@ -185,7 +187,7 @@
    opacity: 1;
  }

-  to {
+  100% {
    transform: none;
  }
 }
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "7.0.0",
+  "version": "7.4.0",
  "description": "CSS for NAV Designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -27,10 +27,11 @@
    "css:get-version": "node config/get-version.js"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^7.0.0",
+    "@navikt/ds-tokens": "^7.4.0",
+    "autoprefixer": "^10.4.20",
    "cssnano": "6.0.0",
    "fast-glob": "3.2.11",
-    "lodash": "4.17.21",
+    "lodash": "^4.17.21",
    "nodemon": "^3.0.1",
    "normalize.css": "^8.0.1",
    "postcss": "^8.4.31",
@@ -56,8 +56,7 @@

 .navds-stack__spacer {
  flex: 1;
-  justify-self: stretch;
-  align-self: stretch;
+  place-content: stretch stretch;
 }

 .navds-stack > .navds-stack__spacer {
@@ -19,7 +19,6 @@
@media (forced-colors: active) {
  .navds-read-more__button {
    background-color: ButtonFace;
-    border-color: ButtonText;
    border: solid 1px ButtonText;
    color: ButtonText;
  }
@@ -203,8 +203,7 @@ button.navds-stepper__step {
  grid-template-columns:
    [content-start] auto [circle] var(--navds-stepper-circle-size)
    [content-end] auto;
-  justify-items: center;
-  align-items: center;
+  place-items: center center;
  margin-bottom: 0;
 }

@@ -172,7 +172,7 @@
  }

  .navds-toggle-group__button:active {
-    background-color: none !important;
+    background-color: unset !important;
  }

  .navds-toggle-group__button:focus-visible {
@@ -1,5 +1,125 @@
 # @navikt/ds-react

+## 7.4.0
+
+### Minor Changes
+
+- Combobox: Enable option to add a new value while autocompleting and highlight matches in FilteredOptions. ([#3225](https://github.com/navikt/aksel/pull/3225))
+
+### Patch Changes
+
+- Date/MonthPicker: Upgrade react-day-picker to fix issue with React 19 ([#3268](https://github.com/navikt/aksel/pull/3268))
+
+- Combobox: Don't scroll when browsing list with mouse ([#3265](https://github.com/navikt/aksel/pull/3265))
+
+- Avoid warning about element.ref in React 19 ([#3268](https://github.com/navikt/aksel/pull/3268))
+
+- Checkbox: Remove redundant attribute aria-checked ([#3274](https://github.com/navikt/aksel/pull/3274))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@7.4.0
+  - @navikt/aksel-icons@7.4.0
+
+## 7.3.1
+
+### Patch Changes
+
+- Combobox: :bug: Remove virtual focus on input blur instead of moving it ([#3261](https://github.com/navikt/aksel/pull/3261))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@7.3.1
+  - @navikt/aksel-icons@7.3.1
+
+## 7.3.0
+
+### Minor Changes
+
+- ActionMenu: :tada: New component! Replaces DropdownMenu as the go-to solution for floating menus. Includes support for grouping, sub-menus, checkboxes, radios and dividers. Read more in the [documentation](https://aksel.nav.no/komponenter/core/actionmenu). ([#3081](https://github.com/navikt/aksel/pull/3081))
+
+### Patch Changes
+
+- Accordion: Remove redundant icon title ([#3230](https://github.com/navikt/aksel/pull/3230))
+
+- Modal: Close button now avoids triggering when repeated keystrokes are detected. This helps stop accidental closing of Modal when 'Enter'-key is held down. ([#3081](https://github.com/navikt/aksel/pull/3081))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@7.3.0
+  - @navikt/aksel-icons@7.3.0
+
+## 7.2.1
+
+### Patch Changes
+
+- Combobox: Disable autocomple in Firefox on Android to prevent bug ([#3201](https://github.com/navikt/aksel/pull/3201))
+
+- Combobox: Support PageUp/PageDown in dropdown list. ([#3158](https://github.com/navikt/aksel/pull/3158))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@7.2.1
+  - @navikt/aksel-icons@7.2.1
+
+## 7.2.0
+
+### Minor Changes
+
+- FileUpload: :boom: Remove UNSAFE-prefix ([#3205](https://github.com/navikt/aksel/pull/3205))
+
+- List: :sparkles: New size 'large' ([#3207](https://github.com/navikt/aksel/pull/3207))
+
+### Patch Changes
+
+- Performance: :zap: Optimized memoization for rerendring in some components. ([#3197](https://github.com/navikt/aksel/pull/3197))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@7.2.0
+  - @navikt/aksel-icons@7.2.0
+
+## 7.1.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@7.1.2
+  - @navikt/aksel-icons@7.1.2
+
+## 7.1.1
+
+### Patch Changes
+
+- List: Add indentation and remove overly verbose aria attributes ([#3184](https://github.com/navikt/aksel/pull/3184))
+
+- Combobox: :bug: implement missing readonly and disabled ([#3180](https://github.com/navikt/aksel/pull/3180))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@7.1.1
+  - @navikt/aksel-icons@7.1.1
+
+## 7.1.0
+
+### Minor Changes
+
+- Pagination: :lipstick: Updated font-weight to 600 and marked 'page'-prop on 'Item' as deprecated. ([#3164](https://github.com/navikt/aksel/pull/3164))
+
+### Patch Changes
+
+- Combobox: :label: Better typing for maxSelected prop ([#3169](https://github.com/navikt/aksel/pull/3169))
+
+- ErrorSummary: Remove aria-attributes. ([#3171](https://github.com/navikt/aksel/pull/3171))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@7.1.0
+  - @navikt/aksel-icons@7.1.0
+
+## 7.0.1
+
+### Patch Changes
+
+- Combobox: Fix issue with whitespace in the ID of options with multiple spaces ([#3162](https://github.com/navikt/aksel/pull/3162))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@7.0.1
+  - @navikt/aksel-icons@7.0.1
+
 ## 7.0.0

 ### Major Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "7.0.0",
+  "version": "7.4.0",
  "description": "React components from the Norwegian Labour and Welfare Administration.",
  "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
  "license": "MIT",
@@ -50,6 +50,16 @@
        "default": "./cjs/accordion/index.js"
      }
    },
+    "./ActionMenu": {
+      "import": {
+        "types": "./esm/overlays/action-menu/index.d.ts",
+        "default": "./esm/overlays/action-menu/index.js"
+      },
+      "require": {
+        "types": "./cjs/overlays/action-menu/index.d.ts",
+        "default": "./cjs/overlays/action-menu/index.js"
+      }
+    },
    "./Alert": {
      "import": {
        "types": "./esm/alert/index.d.ts",
@@ -583,7 +593,7 @@
    "./package.json": "./package.json"
  },
  "scripts": {
-    "docgen": "yarn ts-node ../../../scripts/docgen.ts",
+    "docgen": "yarn tsx ../../../scripts/docgen.ts",
    "write-packagejson": "echo '{\"type\": \"module\"}' > esm/package.json",
    "clean": "rimraf cjs esm",
    "build": "concurrently \"tsc -p tsconfig.build.json\" \"tsc -p tsconfig.esm.json && tsc-alias -p tsconfig.esm.json && yarn write-packagejson\" ",
@@ -594,29 +604,27 @@
  "dependencies": {
    "@floating-ui/react": "0.25.4",
    "@floating-ui/react-dom": "^2.0.9",
-    "@navikt/aksel-icons": "^7.0.0",
-    "@navikt/ds-tokens": "^7.0.0",
+    "@navikt/aksel-icons": "^7.4.0",
+    "@navikt/ds-tokens": "^7.4.0",
    "clsx": "^2.1.0",
    "date-fns": "^3.0.0",
-    "react-day-picker": "8.10.0"
+    "react-day-picker": "8.10.1"
  },
  "devDependencies": {
    "@testing-library/dom": "9.3.4",
    "@testing-library/jest-dom": "^5.16.0",
    "@testing-library/react": "^15.0.7",
    "@testing-library/user-event": "^14.2.0",
-    "@types/faker": "5.5.8",
-    "concurrently": "7.2.1",
-    "faker": "5.5.3",
+    "concurrently": "9.0.1",
    "fast-glob": "3.2.11",
    "jsdom": "24.0.0",
    "react-dom": "^18.0.0",
    "react-router-dom": "^6.3.0",
    "rimraf": "6.0.1",
    "swr": "^1.1.2",
-    "ts-node": "^10.9.1",
    "tsc-alias": "1.8.8",
-    "typescript": "^5.1.6",
+    "tsx": "^4.19.1",
+    "typescript": "5.5.4",
    "vitest": "^1.2.2"
  },
  "peerDependencies": {
@@ -38,7 +38,6 @@ const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(
        <span className="navds-accordion__icon-wrapper">
          <ChevronDownIcon
            className="navds-accordion__header-chevron"
-            title="Vis mer"
            aria-hidden
          />
        </span>
@@ -9,6 +9,7 @@ import {
 } from "@navikt/aksel-icons";
 import { Button } from "../button";
 import { BodyLong } from "../typography";
+import { useI18n } from "../util/i18n/i18n.context";

 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
  /**
@@ -54,25 +55,13 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
  onClose?: () => void;
 }

-const Icon = ({ variant, ...props }) => {
-  switch (variant) {
-    case "error":
-      return <XMarkOctagonFillIcon title="Feil" {...props} />;
-    case "warning":
-      return <ExclamationmarkTriangleFillIcon title="Advarsel" {...props} />;
-    case "info":
-      return <InformationSquareFillIcon title="Informasjon" {...props} />;
-    case "success":
-      return <CheckmarkCircleFillIcon title="Suksess" {...props} />;
-    default:
-      return null;
-  }
+const IconMap = {
+  error: XMarkOctagonFillIcon,
+  warning: ExclamationmarkTriangleFillIcon,
+  info: InformationSquareFillIcon,
+  success: CheckmarkCircleFillIcon,
 };

-export interface AlertContextProps {
-  size: "medium" | "small";
-}
-
 /**
 * A component for displaying alerts
 * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/alert)
@@ -98,6 +87,8 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
    },
    ref,
  ) => {
+    const translate = useI18n("Alert");
+    const Icon = IconMap[variant];
    return (
      <div
        {...rest}
@@ -114,7 +105,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
          },
        )}
      >
-        <Icon variant={variant} className="navds-alert__icon" />
+        <Icon title={translate(variant)} className="navds-alert__icon" />
        <BodyLong
          as="div"
          size={size}
@@ -137,8 +128,8 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
                <XMarkIcon
                  title={
                    ["error", "warning"].includes(variant)
-                      ? "Lukk varsel"
-                      : "Lukk melding"
+                      ? translate("closeAlert")
+                      : translate("closeMessage")
                  }
                />
              }
@@ -190,3 +190,19 @@ export const ChromaticForcedColors: Story = {
    chromatic: { disable: false, forcedColors: "active" },
  },
 };
+
+export const ChromaticDarksideDark: Story = {
+  render: Chromatic.render,
+  parameters: {
+    chromatic: { disable: false },
+  },
+  globals: { theme: "dark", mode: "darkside" },
+};
+
+export const ChromaticDarksideLight: Story = {
+  render: Chromatic.render,
+  parameters: {
+    chromatic: { disable: false },
+  },
+  globals: { theme: "light", mode: "darkside" },
+};
@@ -58,7 +58,7 @@ export const Size: Story = {
  render: () => (
    <VStack gap="4">
      {SIZES.map((size) => (
-        <>
+        <React.Fragment key={size}>
          <h3>{size}</h3>
          <Chat
            avatar="ON"
@@ -75,7 +75,7 @@ export const Size: Story = {
              laboris labore nisi ut.
            </Chat.Bubble>
          </Chat>
-        </>
+        </React.Fragment>
      ))}
    </VStack>
  ),
@@ -85,7 +85,7 @@ export const Variants: Story = {
  render: () => (
    <VStack gap="4">
      {VARIANTS.map((variant) => (
-        <>
+        <React.Fragment key={variant}>
          <h3>{variant}</h3>
          <Chat
            avatar="NAV"
@@ -97,7 +97,7 @@ export const Variants: Story = {
              Aute minim nisi sunt mollit duis sunt nulla minim non proident.
            </Chat.Bubble>
          </Chat>
-        </>
+        </React.Fragment>
      ))}
    </VStack>
  ),
@@ -2,6 +2,7 @@ import cl from "clsx";
 import React, { forwardRef } from "react";
 import { XMarkIcon } from "@navikt/aksel-icons";
 import { composeEventHandlers } from "../util/composeEventHandlers";
+import { useI18n } from "../util/i18n/i18n.context";

 export interface ChipsRemovableProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -11,15 +12,15 @@ export interface ChipsRemovableProps
   * @default "action"
   */
  variant?: "action" | "neutral";
-  /**
-   * Replaces label read for screen-readers
-   * @default "slett filter"
-   */
-  removeLabel?: string;
  /**
   * Click callback
   */
  onDelete?: () => void;
+  /**
+   * Replaces label read for screen-readers
+   * @default "slett"
+   */
+  removeLabel?: string;
 }

 export const RemovableChips = forwardRef<
@@ -28,17 +29,18 @@ export const RemovableChips = forwardRef<
 >(
  (
    {
-      className,
      children,
      variant = "action",
-      removeLabel = "slett",
      onDelete,
-      type = "button",
+      removeLabel,
+      className,
      onClick,
+      type = "button",
      ...rest
    },
    ref,
  ) => {
+    const translate = useI18n("Chips");
    return (
      <button
        {...rest}
@@ -49,7 +51,9 @@ export const RemovableChips = forwardRef<
          className,
          `navds-chips__removable--${variant}`,
        )}
-        aria-label={`${children} ${removeLabel}`}
+        aria-label={`${children} ${
+          removeLabel ?? translate("Removable.labelSuffix")
+        }`}
        onClick={composeEventHandlers(onClick, onDelete)}
      >
        <span className="navds-chips__chip-text">{children}</span>
@@ -27,8 +27,8 @@ interface DatePickerComponent
   * ```jsx
   * <DatePicker.Standalone
   *   dropdownCaption
-   *   fromDate={new Date("2020-10-01")}
-   *   toDate={new Date("2024-10-01")}
+   *   fromDate={new Date("2022-10-01")}
+   *   toDate={new Date("2026-10-01")}
   * />
   * ```
   */
@@ -73,40 +73,35 @@ export const Default: StoryObj<DefaultStoryProps> = {
          locale={props.locale}
          disableWeekends={props.disableWeekends}
        >
-          {!props.standalone && (
-            <>
-              {props.inputfield && props.mode !== "multiple" ? (
-                <>
-                  {props.mode === "range" ? (
-                    <div style={{ display: "flex", gap: "1rem" }}>
-                      <DatePicker.Input
-                        label="Fra"
-                        size={props?.size}
-                        {...rangeCtx.fromInputProps}
-                      />
-                      <DatePicker.Input
-                        label="Til"
-                        size={props?.size}
-                        {...rangeCtx.toInputProps}
-                      />
-                    </div>
-                  ) : (
-                    <>
-                      <DatePicker.Input
-                        label="Velg dato"
-                        size={props?.size}
-                        {...singleCtx.inputProps}
-                      />
-                    </>
-                  )}
-                </>
-              ) : (
-                <Button onClick={() => setOpen((x) => !x)}>
-                  Åpne datovelger
-                </Button>
-              )}
-            </>
-          )}
+          {!props.standalone &&
+            (props.inputfield && props.mode !== "multiple" ? (
+              <>
+                {props.mode === "range" ? (
+                  <div style={{ display: "flex", gap: "1rem" }}>
+                    <DatePicker.Input
+                      label="Fra"
+                      size={props?.size}
+                      {...rangeCtx.fromInputProps}
+                    />
+                    <DatePicker.Input
+                      label="Til"
+                      size={props?.size}
+                      {...rangeCtx.toInputProps}
+                    />
+                  </div>
+                ) : (
+                  <DatePicker.Input
+                    label="Velg dato"
+                    size={props?.size}
+                    {...singleCtx.inputProps}
+                  />
+                )}
+              </>
+            ) : (
+              <Button onClick={() => setOpen((x) => !x)}>
+                Åpne datovelger
+              </Button>
+            ))}
        </Comp>
      </div>
    );
@@ -19,7 +19,7 @@ const App = () => {
 };

 describe("Render datepicker", () => {
-  // eslint-disable-next-line vitest/expect-expect
+  // eslint-disable-next-line @vitest/expect-expect
  test("Should not crash when e.target is window", async () => {
    render(<App />);

@@ -19,8 +19,8 @@ interface MonthPickerComponent
   * ```jsx
   * <MonthPicker.Standalone
   *   dropdownCaption
-   *   fromDate={new Date("1 Oct 2020")}
-   *   toDate={new Date("1 Oct 2024")}
+   *   fromDate={new Date("1 Oct 2022")}
+   *   toDate={new Date("1 Oct 2026")}
   * />
   * ```
   */
@@ -4,29 +4,29 @@ import { describe, expect, test } from "vitest";
 import { isValidDate, parseDate } from "..";

 const check = (inp: string) =>
-  // eslint-disable-next-line vitest/valid-expect
+  // eslint-disable-next-line @vitest/valid-expect
  expect(isValidDate(parseDate(inp, new Date(), nb, "date", false)));

 const checkTwoDigit = (inp: string) =>
-  // eslint-disable-next-line vitest/valid-expect
+  // eslint-disable-next-line @vitest/valid-expect
  expect(isValidDate(parseDate(inp, new Date(), nb, "date", true)));

 const parse = (inp: string) => parseDate(inp, new Date(), nb, "date", false);

 describe("Parse date-inputs with 4-digit years", () => {
-  // eslint-disable-next-line vitest/expect-expect
+  // eslint-disable-next-line @vitest/expect-expect
  test("No spaces", () => {
    check("11052022").toBeTruthy();
    check("15052022").toBeTruthy();
  });

-  // eslint-disable-next-line vitest/expect-expect
+  // eslint-disable-next-line @vitest/expect-expect
  test(". divider", () => {
    check("1.5.2022").toBeTruthy();
    check("11.05.2022").toBeTruthy();
  });

-  // eslint-disable-next-line vitest/expect-expect
+  // eslint-disable-next-line @vitest/expect-expect
  test("/ divider", () => {
    check("1/5/2022").toBeTruthy();
    check("10/5/2022").toBeTruthy();
@@ -34,7 +34,7 @@ describe("Parse date-inputs with 4-digit years", () => {
    check("10/05/2022").toBeTruthy();
  });

-  // eslint-disable-next-line vitest/expect-expect
+  // eslint-disable-next-line @vitest/expect-expect
  test("- divider", () => {
    check("1-5-2022").toBeTruthy();
    check("10-5-2022").toBeTruthy();
@@ -44,19 +44,19 @@ describe("Parse date-inputs with 4-digit years", () => {
 });

 describe("Parse date-inputs with 2-digit years", () => {
-  // eslint-disable-next-line vitest/expect-expect
+  // eslint-disable-next-line @vitest/expect-expect
  test("No spaces", () => {
    checkTwoDigit("110522").toBeTruthy();
    checkTwoDigit("150522").toBeTruthy();
  });

-  // eslint-disable-next-line vitest/expect-expect
+  // eslint-disable-next-line @vitest/expect-expect
  test(". divider", () => {
    checkTwoDigit("1.5.22").toBeTruthy();
    checkTwoDigit("11.05.22").toBeTruthy();
  });

-  // eslint-disable-next-line vitest/expect-expect
+  // eslint-disable-next-line @vitest/expect-expect
  test("/ divider", () => {
    checkTwoDigit("1/5/22").toBeTruthy();
    checkTwoDigit("10/5/22").toBeTruthy();
@@ -64,7 +64,7 @@ describe("Parse date-inputs with 2-digit years", () => {
    checkTwoDigit("10/05/22").toBeTruthy();
  });

-  // eslint-disable-next-line vitest/expect-expect
+  // eslint-disable-next-line @vitest/expect-expect
  test("- divider", () => {
    checkTwoDigit("1-5-22").toBeTruthy();
    checkTwoDigit("10-5-22").toBeTruthy();
@@ -72,14 +72,14 @@ describe("Parse date-inputs with 2-digit years", () => {
    checkTwoDigit("10-05-22").toBeTruthy();
  });

-  // eslint-disable-next-line vitest/expect-expect
+  // eslint-disable-next-line @vitest/expect-expect
  test("Dissallow 1 and 3 digit years", () => {
    checkTwoDigit("11052").toBeFalsy();
    checkTwoDigit("1105222").toBeFalsy();
    checkTwoDigit("1105999").toBeFalsy();
  });

-  // eslint-disable-next-line vitest/expect-expect
+  // eslint-disable-next-line @vitest/expect-expect
  test("Dissallow date before year 1000", () => {
    checkTwoDigit("11050999").toBeFalsy();
    checkTwoDigit("11050010").toBeFalsy();
@@ -82,7 +82,7 @@ export const Menu = forwardRef<HTMLDivElement, DropdownMenuProps>(
        open={isOpen}
        onClose={() => {
          handleToggle(false);
-          onClose && onClose();
+          onClose?.();
        }}
      />
    );
@@ -65,33 +65,29 @@ const Content = () => (

 type DefaultStoryProps = ExpansionCardProps & { description: boolean };
 type DefaultStory = StoryFn<DefaultStoryProps>;
-export const Default: DefaultStory = (props: DefaultStoryProps) => {
-  return (
-    <ExpansionCard
-      {...props}
-      open={props.open || undefined}
-      aria-label="default-demo"
-    >
-      <ExpansionCard.Header>
-        <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
-        {props.description && (
-          <ExpansionCard.Description>
-            For at yrkesskadedekningen skal gjelde, er det som hovedregel krav
-            til tid, sted og arbeidsoppgaver
-          </ExpansionCard.Description>
-        )}
-      </ExpansionCard.Header>
-      <Content />
-    </ExpansionCard>
-  );
-};
+export const Default: DefaultStory = ({
+  description,
+  ...rest
+}: DefaultStoryProps) => (
+  <ExpansionCard {...rest} aria-label="default-demo">
+    <ExpansionCard.Header>
+      <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
+      {description && (
+        <ExpansionCard.Description>
+          For at yrkesskadedekningen skal gjelde, er det som hovedregel krav til
+          tid, sted og arbeidsoppgaver
+        </ExpansionCard.Description>
+      )}
+    </ExpansionCard.Header>
+    <Content />
+  </ExpansionCard>
+);
 Default.args = {
-  open: false,
-  size: "medium",
  description: false,
 };
 Default.argTypes = {
  size: { control: "radio", options: ["medium", "small"] },
+  open: { control: "boolean" },
 };

 export const Description = () => (
@@ -1,5 +1,4 @@
 import { fireEvent, render, screen } from "@testing-library/react";
-import faker from "faker";
 import React from "react";
 import { describe, expect, test, vi } from "vitest";
 import { Checkbox, CheckboxGroup } from ".";
@@ -10,8 +9,8 @@ const firstArgumentOfFirstCall = (fn: ReturnType<typeof vi.fn>) =>
 test("checkbox group chains onChange calls", async () => {
  const onGroupChange = vi.fn();
  const onChange = vi.fn();
-  const value = faker.datatype.string();
-  const label = faker.datatype.string();
+  const value = "Checkbox value";
+  const label = "My pretty label";

  render(
    <CheckboxGroup legend="legend" onChange={onGroupChange}>
@@ -41,7 +41,6 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
          {...omit(inputProps, ["aria-invalid"])}
          type="checkbox"
          className="navds-checkbox__input"
-          aria-checked={props.indeterminate ? "mixed" : inputProps.checked}
          ref={(el) => {
            if (el) {
              el.indeterminate = props.indeterminate ?? false;
@@ -44,8 +44,8 @@ const useCheckbox = (props: CheckboxProps) => {
        if (readOnly) {
          return;
        }
-        props.onChange && props.onChange(e);
-        checkboxGroup && checkboxGroup.toggleValue(props.value);
+        props.onChange?.(e);
+        checkboxGroup?.toggleValue(props.value);
      },
      onClick: (e) => {
        if (readOnly) {
@@ -1,6 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
+import { ReadOnlyIcon } from "../ReadOnlyIcon";
 import ComboboxWrapper from "./ComboboxWrapper";
 import FilteredOptions from "./FilteredOptions/FilteredOptions";
 import { useFilteredOptionsContext } from "./FilteredOptions/filteredOptionsContext";
@@ -27,6 +28,7 @@ export const Combobox = forwardRef<
    inputProps,
    showErrorMsg,
    size = "medium",
+    readOnly,
  } = useInputContext();

  return (
@@ -44,6 +46,7 @@ export const Combobox = forwardRef<
          "navds-sr-only": hideLabel,
        })}
      >
+        <ReadOnlyIcon nativeReadOnly={false} readOnly={readOnly} />
        {label}
      </Label>
      {!!description && (
@@ -36,6 +36,7 @@ const ComboboxProvider = forwardRef<HTMLInputElement, ComboboxProps>(
      children,
      defaultValue,
      disabled,
+      readOnly,
      error,
      errorId,
      filteredOptions: externalFilteredOptions,
@@ -50,19 +51,28 @@ const ComboboxProvider = forwardRef<HTMLInputElement, ComboboxProps>(
      value,
      onChange,
      onClear,
-      shouldAutocomplete,
+      shouldAutocomplete: externalShouldAutocomplete,
      size,
      ...rest
    } = props;
    const options = mapToComboboxOptionArray(externalOptions) || [];
    const filteredOptions = mapToComboboxOptionArray(externalFilteredOptions);
    const selectedOptions = mapToComboboxOptionArray(externalSelectedOptions);
+
+    const userAgent =
+      typeof navigator === "undefined" ? "" : navigator.userAgent;
+    const isFirefoxOnAndroid =
+      userAgent.includes("Android") && userAgent.includes("Firefox/");
+    const shouldAutocomplete =
+      !isFirefoxOnAndroid && externalShouldAutocomplete;
+
    return (
      <InputContextProvider
        value={{
          defaultValue,
          description: rest.description,
          disabled,
+          readOnly,
          error,
          errorId,
          id,
@@ -9,6 +9,7 @@ type ComboboxWrapperProps = {
  inputProps: {
    disabled?: boolean;
  };
+  readOnly?: boolean;
  inputSize: string;
  toggleIsListOpen: (isListOpen: boolean) => void;
 };
@@ -21,7 +22,7 @@ const ComboboxWrapper = ({
  inputSize,
  toggleIsListOpen,
 }: ComboboxWrapperProps) => {
-  const { toggleOpenButtonRef, clearInput } = useInputContext();
+  const { toggleOpenButtonRef, clearInput, readOnly } = useInputContext();

  const wrapperRef = useRef<HTMLDivElement | null>(null);
  const [hasFocusWithin, setHasFocusWithin] = useState(false);
@@ -55,6 +56,8 @@ const ComboboxWrapper = ({
          "navds-combobox--error": hasError,
          "navds-combobox--disabled": !!inputProps.disabled,
          "navds-combobox--focused": hasFocusWithin,
+          "navds-combobox--readonly": readOnly,
+          "navds-form-field--readonly": readOnly,
        },
      )}
      onFocus={onFocusInsideWrapper}
@@ -12,7 +12,7 @@ const AddNewOption = () => {
  const {
    inputProps: { id },
    size,
-    value,
+    searchTerm,
  } = useInputContext();
  const {
    setIsMouseLastUsedInputDevice,
@@ -34,8 +34,8 @@ const AddNewOption = () => {
        }
      }}
      onPointerUp={(event) => {
-        toggleOption(toComboboxOption(value), event);
-        if (!isMultiSelect && !isInList(value, selectedOptions))
+        toggleOption(toComboboxOption(searchTerm), event);
+        if (!isMultiSelect && !isInList(searchTerm, selectedOptions))
          toggleIsListOpen(false);
      }}
      id={filteredOptionsUtil.getAddNewOptionId(id)}
@@ -53,7 +53,7 @@ const AddNewOption = () => {
      <BodyShort size={size}>
        Legg til{" "}
        <Label as="span" size={size}>
-          &#8220;{value}&#8221;
+          &#8220;{searchTerm}&#8221;
        </Label>
      </BodyShort>
    </li>
@@ -54,6 +54,7 @@ const FilteredOptions = () => {
      )}

      {shouldRenderFilteredOptionsList && (
+        /* biome-ignore lint/a11y/useFocusableInteractive: Interaction is not handeled by listbox itself. */
        <ul
          ref={setFilteredOptionsRef}
          role="listbox"
@@ -9,10 +9,24 @@ import { ComboboxOption } from "../types";
 import filteredOptionsUtil from "./filtered-options-util";
 import { useFilteredOptionsContext } from "./filteredOptionsContext";

+const useTextHighlight = (text: string, searchTerm: string) => {
+  const indexOfHighlightedText = text
+    .toLowerCase()
+    .indexOf(searchTerm.toLowerCase());
+  const start = text.substring(0, indexOfHighlightedText);
+  const highlight = text.substring(
+    indexOfHighlightedText,
+    indexOfHighlightedText + searchTerm.length,
+  );
+  const end = text.substring(indexOfHighlightedText + searchTerm.length);
+  return [start, highlight, end];
+};
+
 const FilteredOptionsItem = ({ option }: { option: ComboboxOption }) => {
  const {
    inputProps: { id },
    size,
+    searchTerm,
  } = useInputContext();
  const {
    setIsMouseLastUsedInputDevice,
@@ -22,9 +36,11 @@ const FilteredOptionsItem = ({ option }: { option: ComboboxOption }) => {
  } = useFilteredOptionsContext();
  const { isMultiSelect, maxSelected, selectedOptions, toggleOption } =
    useSelectedOptionsContext();
+  const [start, highlight, end] = useTextHighlight(option.label, searchTerm);

  const isDisabled = (_option: ComboboxOption) =>
    maxSelected?.isLimitReached && !isInList(_option.value, selectedOptions);
+
  return (
    <li
      className={cl("navds-combobox__list-item", {
@@ -64,7 +80,12 @@ const FilteredOptionsItem = ({ option }: { option: ComboboxOption }) => {
      aria-selected={isInList(option.value, selectedOptions)}
      aria-disabled={isDisabled(option) || undefined}
    >
-      <BodyShort size={size}>{option.label}</BodyShort>
+      {/* Aria-label is used to fix testing-library wrongly evaluating the accessible name of the option when highlighting text */}
+      <BodyShort size={size} aria-label={option.label}>
+        {start}
+        {highlight && <mark>{highlight}</mark>}
+        {end}
+      </BodyShort>
      {isInList(option.value, selectedOptions) && <CheckmarkIcon />}
    </li>
  );
@@ -0,0 +1,18 @@
+import { describe } from "vitest";
+import filteredOptionsUtil from "./filtered-options-util";
+
+describe("filtered options util", () => {
+  describe("getOptionId", () => {
+    it("should return the correct id", () => {
+      expect(filteredOptionsUtil.getOptionId("combobox", "option")).toBe(
+        "combobox-option-option",
+      );
+    });
+
+    it("should return the correct id with spaces", () => {
+      expect(
+        filteredOptionsUtil.getOptionId("combobox", "option with spaces"),
+      ).toBe("combobox-option-option-with-spaces");
+    });
+  });
+});
@@ -19,9 +19,7 @@ const getFilteredOptionsId = (comboboxId: string) =>
  `${comboboxId}-filtered-options`;

 const getOptionId = (comboboxId: string, option: string) =>
-  `${comboboxId.toLocaleLowerCase()}-option-${option
-    .replace(" ", "-")
-    .toLocaleLowerCase()}`;
+  `${comboboxId}-option-${option}`.replace(/\s/g, "-").toLocaleLowerCase();

 const getAddNewOptionId = (comboboxId: string) =>
  `${comboboxId}-combobox-new-option`;
@@ -58,7 +58,8 @@ const FilteredOptionsProvider = ({
    useState<HTMLUListElement | null>(null);
  const virtualFocus = useVirtualFocus(filteredOptionsRef);
  const {
-    inputProps: { "aria-describedby": partialAriaDescribedBy, id },
+    inputProps: { "aria-describedby": partialAriaDescribedBy, id, disabled },
+    readOnly,
    value,
    searchTerm,
    setValue,
@@ -136,7 +137,10 @@ const FilteredOptionsProvider = ({

  const toggleIsListOpen = useCallback(
    (newState?: boolean) => {
-      virtualFocus.moveFocusToTop();
+      if (disabled || readOnly) {
+        return;
+      }
+      virtualFocus.resetFocus();
      if (newState ?? !isInternalListOpen) {
        setHideCaret(!!maxSelected?.isLimitReached);
      }
@@ -147,14 +151,16 @@ const FilteredOptionsProvider = ({
      maxSelected?.isLimitReached,
      isInternalListOpen,
      setHideCaret,
+      disabled,
+      readOnly,
    ],
  );

  const isValueNew = useMemo(
    () =>
-      Boolean(value) &&
-      !filteredOptionsMap[filteredOptionsUtils.getOptionId(id, value)],
-    [filteredOptionsMap, id, value],
+      Boolean(searchTerm) &&
+      !filteredOptionsMap[filteredOptionsUtils.getOptionId(id, searchTerm)],
+    [filteredOptionsMap, id, searchTerm],
  );

  const ariaDescribedBy = useMemo(() => {
@@ -10,6 +10,9 @@ export type VirtualFocusType = {
  moveFocusToElement: (id: string) => void;
  moveFocusToTop: () => void;
  moveFocusToBottom: () => void;
+  moveFocusUpBy: (numberOfElements: number) => void;
+  moveFocusDownBy: (numberOfElements: number) => void;
+  resetFocus: () => void;
 };

 const useVirtualFocus = (
@@ -40,9 +43,9 @@ const useVirtualFocus = (
      : false;
  };

-  const _moveFocusAndScrollTo = (_element?: HTMLElement) => {
-    setActiveElement(_element);
-    _element?.scrollIntoView?.({ block: "nearest" });
+  const setActiveAndScrollToElement = (element?: HTMLElement) => {
+    setActiveElement(element);
+    element?.scrollIntoView?.({ block: "nearest" });
  };

  const moveFocusUp = () => {
@@ -55,14 +58,14 @@ const useVirtualFocus = (
    if (_currentIndex === 0) {
      setActiveElement(undefined);
    } else {
-      _moveFocusAndScrollTo(elementAbove);
+      setActiveAndScrollToElement(elementAbove);
    }
  };

  const moveFocusDown = () => {
    const elementsAbleToReceiveFocus = getElementsAbleToReceiveFocus();
    if (!activeElement) {
-      _moveFocusAndScrollTo(elementsAbleToReceiveFocus[0]);
+      setActiveAndScrollToElement(elementsAbleToReceiveFocus[0]);
      return;
    }
    const _currentIndex = elementsAbleToReceiveFocus.indexOf(activeElement);
@@ -70,13 +73,17 @@ const useVirtualFocus = (
      return;
    }

-    _moveFocusAndScrollTo(elementsAbleToReceiveFocus[_currentIndex + 1]);
+    setActiveAndScrollToElement(elementsAbleToReceiveFocus[_currentIndex + 1]);
  };

-  const moveFocusToTop = () => _moveFocusAndScrollTo(undefined);
+  const resetFocus = () => setActiveElement(undefined);
+  const moveFocusToTop = () => {
+    const elementsAbleToReceiveFocus = getElementsAbleToReceiveFocus();
+    setActiveAndScrollToElement(elementsAbleToReceiveFocus[0]);
+  };
  const moveFocusToBottom = () => {
    const elementsAbleToReceiveFocus = getElementsAbleToReceiveFocus();
-    return _moveFocusAndScrollTo(
+    setActiveAndScrollToElement(
      elementsAbleToReceiveFocus[elementsAbleToReceiveFocus.length - 1],
    );
  };
@@ -89,6 +96,28 @@ const useVirtualFocus = (
    }
  };

+  const moveFocusUpBy = (numberOfElements: number) => {
+    if (!activeElement) {
+      return;
+    }
+    const elementsAbleToReceiveFocus = getElementsAbleToReceiveFocus();
+    const currentIndex = elementsAbleToReceiveFocus.indexOf(activeElement);
+    const newIndex = Math.max(currentIndex - numberOfElements, 0);
+    setActiveAndScrollToElement(elementsAbleToReceiveFocus[newIndex]);
+  };
+
+  const moveFocusDownBy = (numberOfElements: number) => {
+    const elementsAbleToReceiveFocus = getElementsAbleToReceiveFocus();
+    const currentIndex = activeElement
+      ? elementsAbleToReceiveFocus.indexOf(activeElement)
+      : -1;
+    const newIndex = Math.min(
+      currentIndex + numberOfElements,
+      elementsAbleToReceiveFocus.length - 1,
+    );
+    setActiveAndScrollToElement(elementsAbleToReceiveFocus[newIndex]);
+  };
+
  return {
    activeElement,
    getElementById,
@@ -99,6 +128,9 @@ const useVirtualFocus = (
    moveFocusToElement,
    moveFocusToTop,
    moveFocusToBottom,
+    moveFocusUpBy,
+    moveFocusDownBy,
+    resetFocus,
  };
 };

@@ -32,6 +32,7 @@ interface Props {
    defaultValue: ComboboxProps["defaultValue"];
    description: ComboboxProps["description"];
    disabled: ComboboxProps["disabled"];
+    readOnly: ComboboxProps["readOnly"];
    error: ComboboxProps["error"];
    errorId: ComboboxProps["errorId"];
    id: ComboboxProps["id"];
@@ -48,6 +49,7 @@ const InputProvider = ({ children, value: props }: Props) => {
    defaultValue = "",
    description,
    disabled,
+    readOnly,
    error,
    errorId,
    id: externalId,
@@ -61,6 +63,7 @@ const InputProvider = ({ children, value: props }: Props) => {
    {
      description,
      disabled,
+      readOnly,
      error,
      errorId,
      id: externalId,
@@ -96,7 +99,7 @@ const InputProvider = ({ children, value: props }: Props) => {
      setInternalValue("");
      setSearchTerm("");
    },
-    [externalOnChange, onClear, setInternalValue],
+    [externalOnChange, onClear],
  );

  const focusInput = useCallback(() => {