Version Packages (#3208)

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

.eslintrc.js

@@ -1,4 +1,11 @@
-// 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"
+ */
 module.exports = {
   env: {
     browser: true,
@@ -8,15 +15,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 +31,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 +52,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 +70,23 @@ 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",
       },
     },
     {
       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 +165,6 @@ module.exports = {
     "**/codemod/**/*.js",
     "!.storybook",
     "**/playwright-report/**",
+    "**/tokens/**/plugin.js",
   ],
 };

.github/PULL_REQUEST_TEMPLATE.md

@@ -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.")

.github/workflows/aksel-dev.yml

@@ -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 }}

.github/workflows/aksel-prod.yml

@@ -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 }}

.github/workflows/backup-sanity.yml

@@ -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 }}

.github/workflows/e2e.yml

@@ -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 }}

.github/workflows/figma-config.yml

@@ -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

.github/workflows/referansesider-spa-deploy.yml

@@ -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 }}

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

@@ -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:

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @navikt/aksel-icons
 
+## 7.2.1
+
+## 7.2.0
+
+## 7.1.2
+
+## 7.1.1
+
+## 7.1.0
+
+## 7.0.1
+
+## 7.0.0
+
+### Major Changes
+
+- Icons: Removed renamed icons. [See migration guide for changes](https://aksel.nav.no/grunnleggende/kode/migrering#194b60833d9e). ([#3139](https://github.com/navikt/aksel/pull/3139))
+
 ## 6.17.0
 
 ### Minor Changes

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

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-named-as-default-member */
 import fastglob from "fast-glob";
 import fs from "fs";
 import jsYaml from "js-yaml";

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

@@ -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");
+          }
         });
       });
     });

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

@@ -1,6 +1,7 @@
 const file_key = "wEdyFjCQSBR3U7FvrMbPXa";
 
 export const fetchIcons = async () => {
+  console.info("Fetching new icons from Figma...");
   const data = await fetch(
     `https://api.figma.com/v1/files/${file_key}/components`,
     {
@@ -15,6 +16,10 @@ export const fetchIcons = async () => {
       throw e.message;
     });
 
+  if (data?.err) {
+    throw new Error(data.err);
+  }
+
   if (!data?.meta?.components || data?.meta?.components.length === 0) {
     throw new Error("Fant ingen publiserte ikoner");
   }

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

@@ -6,7 +6,7 @@ export const resolveName = (icon) => {
 
   if (isVariant) {
     const variant = icon.name.replace("Variant=", "").replace("Stroke", "");
-    const actualName = icon["containing_frame"]?.["containingStateGroup"]?.name;
+    const actualName = icon.containing_frame?.containingStateGroup?.name;
     const name = `${actualName}${variant}`;
     return `${startCase(camelCase(name)).replace(/ /g, "")}.svg`;
   }

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

@@ -1,4 +1,3 @@
-import { config } from "dotenv";
 import { existsSync, mkdirSync, readdirSync, rmSync, writeFileSync } from "fs";
 import { resolve } from "path";
 import { fetchDownloadUrls, fetchIcon, fetchIcons } from "./fetch-icons.mjs";
@@ -6,7 +5,6 @@ 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";
@@ -16,6 +14,7 @@ if (!process.env.FIGMA_TOKEN) {
 }
 
 async function main() {
+  console.info("Started icon-update from Figma");
   let icons = await fetchIcons();
 
   const totalIcons = icons.length;

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

@@ -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;
   }

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

@@ -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",
@@ -28,7 +28,7 @@
     "postcss": "^8.4.31",
     "postcss-url": "^10.1.3",
     "typescript": "^5.1.6",
-    "vite": "^5.1.7",
+    "vite": "^5.4.6",
     "vite-plugin-singlefile": "^1.0.0",
     "vite-plugin-svgr": "^4.2.0"
   }

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

@@ -109,7 +109,7 @@ const App = () => {
         icon.removeEventListener("dragend", dragEvent);
       }
     };
-  }, [categories]);
+  }, []);
 
   return (
     <main tabIndex={-1} className="wrapper">

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

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6.06458 4.26481C7.76736 2.95822 9.85369 2.25 12 2.25C14.1463 2.25 16.2326 2.95821 17.9354 4.2648C19.6382 5.57139 20.8623 7.40334 21.4178 9.47651C21.9733 11.5497 21.8292 13.7482 21.0078 15.7312C20.1865 17.7141 18.7338 19.3706 16.875 20.4437C16.7027 20.5432 16.498 20.5702 16.3059 20.5187C16.1138 20.4672 15.9499 20.3415 15.8505 20.1692L12.7005 14.7133C12.601 14.541 12.5741 14.3363 12.6256 14.1442C12.677 13.952 12.8027 13.7882 12.975 13.6887C13.3468 13.4741 13.6373 13.1428 13.8016 12.7462C13.9658 12.3496 13.9947 11.9099 13.8836 11.4953C13.7725 11.0807 13.5276 10.7143 13.1871 10.453C12.8465 10.1916 12.4293 10.05 12 10.05C11.5707 10.05 11.1535 10.1916 10.8129 10.453C10.4724 10.7143 10.2275 11.0807 10.1164 11.4953C10.0053 11.9099 10.0342 12.3496 10.1984 12.7462C10.3627 13.1428 10.6533 13.4741 11.025 13.6887C11.1973 13.7882 11.323 13.952 11.3744 14.1442C11.4259 14.3363 11.399 14.541 11.2995 14.7133L8.14952 20.1692C8.05007 20.3415 7.88625 20.4672 7.69412 20.5187C7.50198 20.5702 7.29727 20.5432 7.125 20.4437C5.26625 19.3706 3.81354 17.7141 2.99218 15.7312C2.17082 13.7482 2.02672 11.5497 2.58223 9.47652C3.13773 7.40334 4.3618 5.5714 6.06458 4.26481ZM12 3.75C10.1839 3.75 8.41854 4.34926 6.97772 5.45484C5.53691 6.56041 4.50116 8.11052 4.03112 9.86474C3.56107 11.619 3.683 13.4793 4.378 15.1571C4.97686 16.6029 5.97237 17.8436 7.24256 18.7401L9.66674 14.5413C9.29868 14.2034 9.00613 13.7874 8.81262 13.3203C8.52199 12.6186 8.471 11.8407 8.66756 11.1071C8.86412 10.3735 9.29725 9.72526 9.89978 9.26293C10.5023 8.8006 11.2405 8.55 12 8.55C12.7595 8.55 13.4977 8.8006 14.1002 9.26293C14.7028 9.72526 15.1359 10.3735 15.3324 11.1071C15.529 11.8407 15.478 12.6186 15.1874 13.3203C14.9939 13.7874 14.7013 14.2034 14.3333 14.5413L16.7574 18.7401C18.0276 17.8436 19.0231 16.6029 19.622 15.1571C20.317 13.4793 20.4389 11.619 19.9689 9.86474C19.4988 8.11052 18.4631 6.56041 17.0223 5.45483C15.5815 4.34926 13.8161 3.75 12 3.75Z" fill="#23262A"/>
-</svg>

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

@@ -1,19 +0,0 @@
-name: BeaconSignals
-category: Development
-sub_category: Development
-keywords:
-  - location
-  - tracking
-  - identification
-  - signaling
-  - broadcasting
-  - detection
-  - lokalisering
-  - sporing
-  - identifikasjon
-  - signalisering
-  - kringkasting
-  - deteksjon
-variant: Stroke
-updated_at: 04.12.2023
-created_at: 07.03.2023

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

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6.06458 4.26481C7.76736 2.95822 9.85369 2.25 12 2.25C14.1463 2.25 16.2326 2.95821 17.9354 4.2648C19.6382 5.57139 20.8623 7.40334 21.4178 9.47651C21.9733 11.5497 21.8292 13.7482 21.0078 15.7312C20.1865 17.7141 18.7338 19.3706 16.875 20.4437C16.7027 20.5432 16.498 20.5702 16.3059 20.5187C16.1138 20.4672 15.9499 20.3415 15.8505 20.1692L12.7005 14.7133C12.601 14.541 12.5741 14.3363 12.6256 14.1442C12.677 13.952 12.8027 13.7882 12.975 13.6887C13.3468 13.4741 13.6373 13.1428 13.8016 12.7462C13.9658 12.3496 13.9947 11.9099 13.8836 11.4953C13.7725 11.0807 13.5276 10.7143 13.1871 10.453C12.8465 10.1916 12.4293 10.05 12 10.05C11.5707 10.05 11.1535 10.1916 10.8129 10.453C10.4724 10.7143 10.2275 11.0807 10.1164 11.4953C10.0053 11.9099 10.0342 12.3496 10.1984 12.7462C10.3627 13.1428 10.6533 13.4741 11.025 13.6887C11.1973 13.7882 11.323 13.952 11.3744 14.1442C11.4259 14.3363 11.399 14.541 11.2995 14.7133L8.14952 20.1692C8.05007 20.3415 7.88625 20.4672 7.69412 20.5187C7.50198 20.5702 7.29727 20.5432 7.125 20.4437C5.26625 19.3706 3.81354 17.7141 2.99218 15.7312C2.17082 13.7482 2.02672 11.5497 2.58223 9.47652C3.13773 7.40334 4.3618 5.5714 6.06458 4.26481Z" fill="#23262A"/>
-</svg>

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

@@ -1,19 +0,0 @@
-name: BeaconSignalsFill
-category: Development
-sub_category: Development
-keywords:
-  - location
-  - tracking
-  - identification
-  - signaling
-  - broadcasting
-  - detection
-  - lokalisering
-  - sporing
-  - identifikasjon
-  - signalisering
-  - kringkasting
-  - deteksjon
-variant: Fill
-updated_at: 04.12.2023
-created_at: 07.03.2023

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

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10.25 3C10.25 2.58579 10.5858 2.25 11 2.25H21C21.4142 2.25 21.75 2.58579 21.75 3V21C21.75 21.4142 21.4142 21.75 21 21.75H3C2.58579 21.75 2.25 21.4142 2.25 21V13C2.25 12.5858 2.58579 12.25 3 12.25H10.25V3ZM13.75 13C13.75 12.5858 13.4142 12.25 13 12.25H11.75V3.75H20.25V20.25H13.75V13ZM12.25 13.75V20.25H3.75V13.75H12.25ZM18.75 5.5C18.75 5.08579 18.4142 4.75 18 4.75C17.5858 4.75 17.25 5.08579 17.25 5.5V6.5C17.25 6.91421 17.5858 7.25 18 7.25C18.4142 7.25 18.75 6.91421 18.75 6.5V5.5ZM5.5 15.25C5.08579 15.25 4.75 15.5858 4.75 16C4.75 16.4142 5.08579 16.75 5.5 16.75H6.5C6.91421 16.75 7.25 16.4142 7.25 16C7.25 15.5858 6.91421 15.25 6.5 15.25H5.5ZM7.75 16C7.75 15.5858 8.08579 15.25 8.5 15.25H9.5C9.91421 15.25 10.25 15.5858 10.25 16C10.25 16.4142 9.91421 16.75 9.5 16.75H8.5C8.08579 16.75 7.75 16.4142 7.75 16ZM18.75 9.5C18.75 9.08579 18.4142 8.75 18 8.75C17.5858 8.75 17.25 9.08579 17.25 9.5V10.5C17.25 10.9142 17.5858 11.25 18 11.25C18.4142 11.25 18.75 10.9142 18.75 10.5V9.5ZM18 12.75C18.4142 12.75 18.75 13.0858 18.75 13.5V14.5C18.75 14.9142 18.4142 15.25 18 15.25C17.5858 15.25 17.25 14.9142 17.25 14.5V13.5C17.25 13.0858 17.5858 12.75 18 12.75Z" fill="#23262A"/>
-</svg>

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

@@ -1,8 +0,0 @@
-name: Buldings2
-category: Workplace
-sub_category: Offices
-keywords:
-  - "[ignore-docs]"
-variant: Stroke
-updated_at: 16.01.2024
-created_at: 07.03.2023

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

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11 2.25C10.5858 2.25 10.25 2.58579 10.25 3V10.5C10.25 10.6381 10.3619 10.75 10.5 10.75H13C14.2426 10.75 15.25 11.7574 15.25 13V21.5C15.25 21.6381 15.3619 21.75 15.5 21.75H21C21.4142 21.75 21.75 21.4142 21.75 21V3C21.75 2.58579 21.4142 2.25 21 2.25H11ZM18 4.75C18.4142 4.75 18.75 5.08579 18.75 5.5V6.5C18.75 6.91421 18.4142 7.25 18 7.25C17.5858 7.25 17.25 6.91421 17.25 6.5V5.5C17.25 5.08579 17.5858 4.75 18 4.75ZM18.75 9.5C18.75 9.08579 18.4142 8.75 18 8.75C17.5858 8.75 17.25 9.08579 17.25 9.5V10.5C17.25 10.9142 17.5858 11.25 18 11.25C18.4142 11.25 18.75 10.9142 18.75 10.5V9.5ZM18 12.75C18.4142 12.75 18.75 13.0858 18.75 13.5V14.5C18.75 14.9142 18.4142 15.25 18 15.25C17.5858 15.25 17.25 14.9142 17.25 14.5V13.5C17.25 13.0858 17.5858 12.75 18 12.75ZM3 12.25C2.58579 12.25 2.25 12.5858 2.25 13V21C2.25 21.4142 2.58579 21.75 3 21.75H13C13.4142 21.75 13.75 21.4142 13.75 21V13C13.75 12.5858 13.4142 12.25 13 12.25H3ZM5.5 15.25C5.08579 15.25 4.75 15.5858 4.75 16C4.75 16.4142 5.08579 16.75 5.5 16.75H6.5C6.91421 16.75 7.25 16.4142 7.25 16C7.25 15.5858 6.91421 15.25 6.5 15.25H5.5ZM7.75 16C7.75 15.5858 8.08579 15.25 8.5 15.25H9.5C9.91421 15.25 10.25 15.5858 10.25 16C10.25 16.4142 9.91421 16.75 9.5 16.75H8.5C8.08579 16.75 7.75 16.4142 7.75 16Z" fill="#23262A"/>
-</svg>

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

@@ -1,8 +0,0 @@
-name: Buldings2Fill
-category: Workplace
-sub_category: Offices
-keywords:
-  - "[ignore-docs]"
-variant: Fill
-updated_at: 16.01.2024
-created_at: 07.03.2023

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

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6.25 3C6.25 2.58579 6.58579 2.25 7 2.25H17C17.4142 2.25 17.75 2.58579 17.75 3V9.25H21C21.4142 9.25 21.75 9.58579 21.75 10V21C21.75 21.4142 21.4142 21.75 21 21.75H3C2.58579 21.75 2.25 21.4142 2.25 21V10C2.25 9.58579 2.58579 9.25 3 9.25H6.25V3ZM17.75 20.25V10.75H20.25V20.25H17.75ZM16.25 3.75V20.25H7.75V3.75H16.25ZM6.25 10.75V20.25H3.75V10.75H6.25ZM10 5.75C10.4142 5.75 10.75 6.08579 10.75 6.5V8.5C10.75 8.91421 10.4142 9.25 10 9.25C9.58579 9.25 9.25 8.91421 9.25 8.5V6.5C9.25 6.08579 9.58579 5.75 10 5.75ZM13 5.75C13.4142 5.75 13.75 6.08579 13.75 6.5V8.5C13.75 8.91421 13.4142 9.25 13 9.25C12.5858 9.25 12.25 8.91421 12.25 8.5V6.5C12.25 6.08579 12.5858 5.75 13 5.75ZM10.75 12.5C10.75 12.0858 10.4142 11.75 10 11.75C9.58579 11.75 9.25 12.0858 9.25 12.5V14.5C9.25 14.9142 9.58579 15.25 10 15.25C10.4142 15.25 10.75 14.9142 10.75 14.5V12.5ZM13 11.75C13.4142 11.75 13.75 12.0858 13.75 12.5V14.5C13.75 14.9142 13.4142 15.25 13 15.25C12.5858 15.25 12.25 14.9142 12.25 14.5V12.5C12.25 12.0858 12.5858 11.75 13 11.75Z" fill="#23262A"/>
-</svg>

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

@@ -1,8 +0,0 @@
-name: Buldings3
-category: Workplace
-sub_category: Offices
-keywords:
-  - "[ignore-docs]"
-variant: Stroke
-updated_at: 16.01.2024
-created_at: 07.03.2023

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

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11 2.25C10.5858 2.25 10.25 2.58579 10.25 3V10.5C10.25 10.6381 10.3619 10.75 10.5 10.75H13C14.2426 10.75 15.25 11.7574 15.25 13V21.5C15.25 21.6381 15.3619 21.75 15.5 21.75H21C21.4142 21.75 21.75 21.4142 21.75 21V3C21.75 2.58579 21.4142 2.25 21 2.25H11ZM18 4.75C18.4142 4.75 18.75 5.08579 18.75 5.5V6.5C18.75 6.91421 18.4142 7.25 18 7.25C17.5858 7.25 17.25 6.91421 17.25 6.5V5.5C17.25 5.08579 17.5858 4.75 18 4.75ZM18.75 9.5C18.75 9.08579 18.4142 8.75 18 8.75C17.5858 8.75 17.25 9.08579 17.25 9.5V10.5C17.25 10.9142 17.5858 11.25 18 11.25C18.4142 11.25 18.75 10.9142 18.75 10.5V9.5ZM18 12.75C18.4142 12.75 18.75 13.0858 18.75 13.5V14.5C18.75 14.9142 18.4142 15.25 18 15.25C17.5858 15.25 17.25 14.9142 17.25 14.5V13.5C17.25 13.0858 17.5858 12.75 18 12.75ZM3 12.25C2.58579 12.25 2.25 12.5858 2.25 13V21C2.25 21.4142 2.58579 21.75 3 21.75H13C13.4142 21.75 13.75 21.4142 13.75 21V13C13.75 12.5858 13.4142 12.25 13 12.25H3ZM5.5 15.25C5.08579 15.25 4.75 15.5858 4.75 16C4.75 16.4142 5.08579 16.75 5.5 16.75H6.5C6.91421 16.75 7.25 16.4142 7.25 16C7.25 15.5858 6.91421 15.25 6.5 15.25H5.5ZM7.75 16C7.75 15.5858 8.08579 15.25 8.5 15.25H9.5C9.91421 15.25 10.25 15.5858 10.25 16C10.25 16.4142 9.91421 16.75 9.5 16.75H8.5C8.08579 16.75 7.75 16.4142 7.75 16Z" fill="#23262A"/>
-</svg>

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

@@ -1,8 +0,0 @@
-name: Buldings3Fill
-category: Workplace
-sub_category: Offices
-keywords:
-  - "[ignore-docs]"
-variant: Fill
-updated_at: 16.01.2024
-created_at: 07.03.2023

@navikt/aksel-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-icons",
-  "version": "6.17.0",
+  "version": "7.2.1",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/ikoner",
   "repository": {
@@ -62,7 +62,7 @@
     "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.mjs",
     "zip:icons": "node config/zip.js",
     "test": "vitest run",
     "test:watch": "vitest watch"
@@ -73,7 +73,6 @@
     "concurrently": "7.2.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",
@@ -83,6 +82,7 @@
     "react": "^18.0.0",
     "rehype-parse": "8.0.4",
     "tsc-alias": "1.8.8",
+    "tsx": "^4.7.1",
     "typescript": "^5.1.6",
     "unified": "10.1.2",
     "vitest": "^1.2.2"

@navikt/aksel-stylelint/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @navikt/aksel-stylelint
 
+## 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
 
 ## 6.16.3

@navikt/aksel-stylelint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-stylelint",
-  "version": "6.17.0",
+  "version": "7.2.1",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
   "repository": {
@@ -35,8 +35,8 @@
     "dev": "yarn watch:lint"
   },
   "devDependencies": {
-    "@navikt/ds-css": "^6.17.0",
-    "@navikt/ds-tokens": "^6.17.0",
+    "@navikt/ds-css": "^7.2.1",
+    "@navikt/ds-tokens": "^7.2.1",
     "concurrently": "7.2.1",
     "postcss-selector-parser": "^6.0.13",
     "postcss-value-parser": "^4.2.0",

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

@@ -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",
+  },
 ];

@navikt/aksel/CHANGELOG.md

@@ -1,5 +1,54 @@
 # @navikt/aksel
 
+## 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
+
+- Updated dependencies [[`1c11a6a3b`](https://github.com/navikt/aksel/commit/1c11a6a3b95fe6d0f5015d3b073e05fe5912071b)]:
+  - @navikt/ds-css@7.0.0
+
 ## 6.17.0
 
 ### Patch Changes

@navikt/aksel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel",
-  "version": "6.17.0",
+  "version": "7.2.1",
   "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": "6.17.0",
+    "@navikt/ds-css": "7.2.1",
     "axios": "1.7.4",
     "chalk": "4.1.0",
     "clipboardy": "^2.3.0",

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

@@ -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";
 

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

@@ -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;
     }
   }

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

@@ -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 [];

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

@@ -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(

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @navikt/ds-css
 
+## 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
+
+- ErrorSummary: Focus heading instead of container for improved experience with screen reader. ([#3139](https://github.com/navikt/aksel/pull/3139))
+
 ## 6.17.0
 
 ## 6.16.3

@navikt/core/css/accordion.css

@@ -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 *
  *************************/

@navikt/core/css/copybutton.css

@@ -31,7 +31,6 @@
 @media (forced-colors: active) {
   .navds-copybutton {
     background-color: ButtonFace;
-    border-color: ButtonText;
     border: solid 1px ButtonText;
     color: ButtonText;
   }

@navikt/core/css/date.css

@@ -281,6 +281,7 @@
 /* Readonly */
 .navds-date__field--readonly .navds-date__field-button {
   cursor: default;
+  color: var(--a-gray-500);
 }
 
 .navds-date__caption-button {

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

@@ -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 {
@@ -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 {

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

@@ -9,6 +9,14 @@
   padding: var(--a-spacing-3);
 }
 
+.navds-error-summary__heading {
+  scroll-margin-top: var(--a-spacing-6);
+}
+
+.navds-error-summary--small .navds-error-summary__heading {
+  scroll-margin-top: var(--a-spacing-4);
+}
+
 .navds-error-summary__heading:focus {
   outline: none;
 }

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

@@ -109,3 +109,7 @@
   border-color: var(--a-border-subtle);
   cursor: default;
 }
+
+.navds-select--readonly .navds-select__chevron {
+  color: var(--a-gray-500);
+}

@navikt/core/css/internalheader.css

@@ -10,7 +10,6 @@
 @media (forced-colors: active) {
   .navds-internalheader {
     background-color: ButtonFace;
-    border-color: ButtonText;
     border: solid 1px ButtonText;
     color: ButtonText;
   }

@navikt/core/css/list.css

@@ -4,91 +4,81 @@
   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;
+  color: var(--ac-list-marker-icon-color, var(--ac-list-marker-color, var(--a-icon-default)));
 }

@navikt/core/css/package.json

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

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

@@ -19,7 +19,6 @@
 @media (forced-colors: active) {
   .navds-read-more__button {
     background-color: ButtonFace;
-    border-color: ButtonText;
     border: solid 1px ButtonText;
     color: ButtonText;
   }

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,95 @@
 # @navikt/ds-react
 
+## 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
+
+- ErrorSummary: Added fallback text for `heading`. ([#3139](https://github.com/navikt/aksel/pull/3139))
+
+- Tooltip: :boom: Updated labeling of items inside Tooltip. [See migration guide for how to update](https://aksel.nav.no/grunnleggende/kode/migrering#3b5cf05fd100). ([#3139](https://github.com/navikt/aksel/pull/3139))
+
+### Patch Changes
+
+- ErrorSummary: Focus heading instead of container for improved experience with screen reader. ([#3139](https://github.com/navikt/aksel/pull/3139))
+
+- Updated dependencies [[`1c11a6a3b`](https://github.com/navikt/aksel/commit/1c11a6a3b95fe6d0f5015d3b073e05fe5912071b)]:
+  - @navikt/aksel-icons@7.0.0
+  - @navikt/ds-tokens@7.0.0
+
 ## 6.17.0
 
 ### Minor Changes

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "6.17.0",
+  "version": "7.2.1",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -583,7 +583,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,8 +594,8 @@
   "dependencies": {
     "@floating-ui/react": "0.25.4",
     "@floating-ui/react-dom": "^2.0.9",
-    "@navikt/aksel-icons": "^6.17.0",
-    "@navikt/ds-tokens": "^6.17.0",
+    "@navikt/aksel-icons": "^7.2.1",
+    "@navikt/ds-tokens": "^7.2.1",
     "clsx": "^2.1.0",
     "date-fns": "^3.0.0",
     "react-day-picker": "8.10.0"
@@ -614,8 +614,8 @@
     "react-router-dom": "^6.3.0",
     "rimraf": "6.0.1",
     "swr": "^1.1.2",
-    "ts-node": "^10.9.1",
     "tsc-alias": "1.8.8",
+    "tsx": "^4.19.1",
     "typescript": "^5.1.6",
     "vitest": "^1.2.2"
   },

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

@@ -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>
   ),

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

@@ -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>
     );

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

@@ -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 />);
 

@navikt/core/react/src/date/utils/__tests__/parse-dates.test.ts

@@ -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();

@navikt/core/react/src/dropdown/Menu/index.tsx

@@ -82,7 +82,7 @@ export const Menu = forwardRef<HTMLDivElement, DropdownMenuProps>(
         open={isOpen}
         onClose={() => {
           handleToggle(false);
-          onClose && onClose();
+          onClose?.();
         }}
       />
     );

@navikt/core/react/src/expansion-card/expansion-card.stories.tsx

@@ -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 = () => (

@navikt/core/react/src/form/checkbox/useCheckbox.ts

@@ -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) {

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

@@ -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 && (

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

@@ -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,

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

@@ -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}

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

@@ -54,6 +54,7 @@ const FilteredOptions = () => {
       )}
 
       {shouldRenderFilteredOptionsList && (
+        /* biome-ignore lint/a11y/useFocusableInteractive: Interaction is not handeled by listbox itself. */
         <ul
           ref={setFilteredOptionsRef}
           role="listbox"

@navikt/core/react/src/form/combobox/FilteredOptions/filtered-options-util.test.ts

@@ -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");
+    });
+  });
+});

@navikt/core/react/src/form/combobox/FilteredOptions/filtered-options-util.ts

@@ -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`;

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

@@ -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,6 +151,8 @@ const FilteredOptionsProvider = ({
       maxSelected?.isLimitReached,
       isInternalListOpen,
       setHideCaret,
+      disabled,
+      readOnly,
     ],
   );
 

@navikt/core/react/src/form/combobox/FilteredOptions/useVirtualFocus.ts

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 export type VirtualFocusType = {
   activeElement: HTMLElement | undefined;
@@ -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,11 +43,6 @@ const useVirtualFocus = (
       : false;
   };
 
-  const _moveFocusAndScrollTo = (_element?: HTMLElement) => {
-    setActiveElement(_element);
-    _element?.scrollIntoView?.({ block: "nearest" });
-  };
-
   const moveFocusUp = () => {
     if (!activeElement) {
       return;
@@ -55,14 +53,14 @@ const useVirtualFocus = (
     if (_currentIndex === 0) {
       setActiveElement(undefined);
     } else {
-      _moveFocusAndScrollTo(elementAbove);
+      setActiveElement(elementAbove);
     }
   };
 
   const moveFocusDown = () => {
     const elementsAbleToReceiveFocus = getElementsAbleToReceiveFocus();
     if (!activeElement) {
-      _moveFocusAndScrollTo(elementsAbleToReceiveFocus[0]);
+      setActiveElement(elementsAbleToReceiveFocus[0]);
       return;
     }
     const _currentIndex = elementsAbleToReceiveFocus.indexOf(activeElement);
@@ -70,13 +68,17 @@ const useVirtualFocus = (
       return;
     }
 
-    _moveFocusAndScrollTo(elementsAbleToReceiveFocus[_currentIndex + 1]);
+    setActiveElement(elementsAbleToReceiveFocus[_currentIndex + 1]);
   };
 
-  const moveFocusToTop = () => _moveFocusAndScrollTo(undefined);
+  const resetFocus = () => setActiveElement(undefined);
+  const moveFocusToTop = () => {
+    const elementsAbleToReceiveFocus = getElementsAbleToReceiveFocus();
+    setActiveElement(elementsAbleToReceiveFocus[0]);
+  };
   const moveFocusToBottom = () => {
     const elementsAbleToReceiveFocus = getElementsAbleToReceiveFocus();
-    return _moveFocusAndScrollTo(
+    setActiveElement(
       elementsAbleToReceiveFocus[elementsAbleToReceiveFocus.length - 1],
     );
   };
@@ -89,6 +91,32 @@ const useVirtualFocus = (
     }
   };
 
+  const moveFocusUpBy = (numberOfElements: number) => {
+    if (!activeElement) {
+      return;
+    }
+    const elementsAbleToReceiveFocus = getElementsAbleToReceiveFocus();
+    const currentIndex = elementsAbleToReceiveFocus.indexOf(activeElement);
+    const newIndex = Math.max(currentIndex - numberOfElements, 0);
+    setActiveElement(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,
+    );
+    setActiveElement(elementsAbleToReceiveFocus[newIndex]);
+  };
+
+  useEffect(() => {
+    activeElement?.scrollIntoView?.({ block: "nearest" });
+  }, [activeElement]);
+
   return {
     activeElement,
     getElementById,
@@ -99,6 +127,9 @@ const useVirtualFocus = (
     moveFocusToElement,
     moveFocusToTop,
     moveFocusToBottom,
+    moveFocusUpBy,
+    moveFocusDownBy,
+    resetFocus,
   };
 };
 

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

@@ -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(() => {

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

@@ -49,6 +49,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       setValue,
       hideCaret,
       setHideCaret,
+      readOnly,
     } = useInputContext();
     const {
       selectedOptions,
@@ -133,14 +134,6 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         case "Accept":
           onEnter(e);
           break;
-        case "Home":
-          toggleIsListOpen(false);
-          virtualFocus.moveFocusToTop();
-          break;
-        case "End":
-          toggleIsListOpen(true);
-          virtualFocus.moveFocusToBottom();
-          break;
         default:
           break;
       }
@@ -149,6 +142,9 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
     const handleKeyDown = useCallback(
       (e: React.KeyboardEvent<HTMLInputElement>) => {
         setIsMouseLastUsedInputDevice(false);
+        if (readOnly) {
+          return;
+        }
         if (e.key === "Backspace") {
           if (value === "" && shouldShowSelectedOptions) {
             const lastSelectedOption =
@@ -198,6 +194,24 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
             }
             virtualFocus.moveFocusUp();
           }
+        } else if (e.key === "Home") {
+          e.preventDefault();
+          virtualFocus.moveFocusToTop();
+        } else if (e.key === "End") {
+          e.preventDefault();
+          if (virtualFocus.activeElement === null || !isListOpen) {
+            toggleIsListOpen(true);
+          }
+          virtualFocus.moveFocusToBottom();
+        } else if (e.key === "PageUp") {
+          e.preventDefault();
+          virtualFocus.moveFocusUpBy(6);
+        } else if (e.key === "PageDown") {
+          e.preventDefault();
+          if (virtualFocus.activeElement === null || !isListOpen) {
+            toggleIsListOpen(true);
+          }
+          virtualFocus.moveFocusDownBy(6);
         }
       },
       [
@@ -214,6 +228,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         setValue,
         searchTerm,
         shouldShowSelectedOptions,
+        readOnly,
       ],
     );
 
@@ -225,10 +240,9 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         } else if (filteredOptions.length === 0) {
           toggleIsListOpen(false);
         }
-        virtualFocus.moveFocusToTop();
         onChange(newValue);
       },
-      [filteredOptions.length, virtualFocus, onChange, toggleIsListOpen],
+      [filteredOptions.length, onChange, toggleIsListOpen],
     );
 
     return (
@@ -262,6 +276,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         aria-activedescendant={activeDecendantId}
         aria-describedby={ariaDescribedBy}
         aria-invalid={inputProps["aria-invalid"]}
+        readOnly={readOnly}
       />
     );
   },

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

@@ -45,6 +45,7 @@ export const InputController = forwardRef<
     size = "medium",
     inputRef,
     toggleOpenButtonRef,
+    readOnly,
   } = useInputContext();
 
   const { activeDecendantId } = useFilteredOptionsContext();
@@ -65,6 +66,7 @@ export const InputController = forwardRef<
           id={inputProps.id}
           ref={mergedInputRef}
           inputClassName={inputClassName}
+          readOnly={readOnly}
           {...rest}
         />
       ) : (
@@ -74,6 +76,7 @@ export const InputController = forwardRef<
             ref={mergedInputRef}
             inputClassName={inputClassName}
             shouldShowSelectedOptions={shouldShowSelectedOptions}
+            readOnly={readOnly}
             {...rest}
           />
         </SelectedOptions>

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

@@ -12,7 +12,7 @@ interface SelectedOptionsProps {
 
 const Option = ({ option }: { option: ComboboxOption }) => {
   const { isMultiSelect, removeSelectedOption } = useSelectedOptionsContext();
-  const { focusInput } = useInputContext();
+  const { focusInput, readOnly, inputProps } = useInputContext();
 
   const onClick = (e) => {
     e.stopPropagation();
@@ -28,7 +28,13 @@ const Option = ({ option }: { option: ComboboxOption }) => {
     );
   }
 
-  return <Chips.Removable onClick={onClick}>{option.label}</Chips.Removable>;
+  return readOnly || inputProps.disabled ? (
+    <Chips.Toggle variant="neutral" checkmark={false} as="div">
+      {option.label}
+    </Chips.Toggle>
+  ) : (
+    <Chips.Removable onClick={onClick}>{option.label}</Chips.Removable>
+  );
 };
 
 const SelectedOptions: React.FC<SelectedOptionsProps> = ({

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

@@ -4,7 +4,7 @@ import { usePrevious } from "../../../util/hooks";
 import { useInputContext } from "../Input/Input.context";
 import { isInList } from "../combobox-utils";
 import { useComboboxCustomOptions } from "../customOptionsContext";
-import { ComboboxOption, ComboboxProps, MaxSelected } from "../types";
+import { ComboboxOption, ComboboxProps } from "../types";
 
 type SelectedOptionsContextValue = {
   addSelectedOption: (option: ComboboxOption) => void;
@@ -12,7 +12,7 @@ type SelectedOptionsContextValue = {
   removeSelectedOption: (option: ComboboxOption) => void;
   prevSelectedOptions?: ComboboxOption[];
   selectedOptions: ComboboxOption[];
-  maxSelected?: MaxSelected & { isLimitReached: boolean };
+  maxSelected?: ComboboxProps["maxSelected"] & { isLimitReached: boolean };
   setSelectedOptions: (any) => void;
   toggleOption: (
     option: ComboboxOption,
@@ -105,9 +105,10 @@ const SelectedOptionsProvider = ({
     (!!maxSelected?.limit && selectedOptions.length >= maxSelected.limit) ||
     (!isMultiSelect && selectedOptions.length > 0);
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: We explicitly want to run this effect when selectedOptions changes to match the view with the selected options.
   useEffect(() => {
     setHideCaret(isLimitReached);
-  }, [selectedOptions, setHideCaret, isLimitReached]);
+  }, [isLimitReached, selectedOptions, setHideCaret]);
 
   const toggleOption = useCallback(
     (

@navikt/core/react/src/form/combobox/__tests__/combobox.test.tsx

@@ -291,4 +291,40 @@ describe("Render combobox", () => {
       );
     });
   });
+
+  describe("has keyboard navigation", () => {
+    test("for PageDown and PageUp", async () => {
+      render(<App options={options} />);
+
+      const combobox = screen.getByRole("combobox", {
+        name: "Hva er dine favorittfrukter?",
+      });
+
+      const pressKey = async (key: string) => {
+        await act(async () => {
+          await userEvent.keyboard(`{${key}}`);
+        });
+      };
+
+      const hasVirtualFocus = (option: string) =>
+        expect(combobox.getAttribute("aria-activedescendant")).toBe(
+          screen.getByRole("option", { name: option }).id,
+        );
+
+      await act(async () => {
+        await userEvent.click(combobox);
+      });
+
+      await pressKey("ArrowDown");
+      hasVirtualFocus("apple");
+      await pressKey("PageDown");
+      hasVirtualFocus("mango");
+      await pressKey("PageDown");
+      hasVirtualFocus("watermelon");
+      await pressKey("PageUp");
+      hasVirtualFocus("mango");
+      await pressKey("PageUp");
+      hasVirtualFocus("apple");
+    });
+  });
 });

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

@@ -7,7 +7,7 @@ import { VStack } from "../../layout/stack";
 import { Modal } from "../../modal";
 import { BodyLong } from "../../typography";
 import { TextField } from "../textfield";
-import { UNSAFE_Combobox } from "./index";
+import { ComboboxProps, UNSAFE_Combobox } from "./index";
 
 export default {
   title: "ds-react/Combobox",
@@ -38,14 +38,16 @@ const options = [
   "grapefruit",
 ];
 
-export const Default: StoryFunction = (props) => (
+export const Default: StoryFn<ComboboxProps & { maxSelected?: number }> = ({
+  maxSelected,
+  ...rest
+}) => (
   <UNSAFE_Combobox
-    {...props}
-    maxSelected={{ limit: Number(props.maxSelected) }}
+    {...rest}
+    maxSelected={maxSelected && { limit: maxSelected }}
     id="combobox"
   />
 );
-
 Default.args = {
   options,
   label: "Hva er din favorittfrukt?",
@@ -65,6 +67,9 @@ Default.argTypes = {
   disabled: {
     control: { type: "boolean" },
   },
+  readOnly: {
+    control: { type: "boolean" },
+  },
   isListOpen: {
     control: { type: "boolean" },
   },
@@ -482,12 +487,50 @@ export const InModal: StoryFn = () => {
 };
 
 export const Disabled: StoryFn = () => {
+  const selectedOptionsMultiple = ["napoleonskake", "donut"];
+  const selectedOptionsSingle = ["pushups"];
   return (
-    <UNSAFE_Combobox
-      options={options}
-      label="Hva er dine favorittfrukter?"
-      disabled
-    />
+    <VStack gap="2">
+      <UNSAFE_Combobox
+        options={options}
+        label="Hva er dine favorittfrukter?"
+        description="Bare de fruktene som du spiser minst 5 av om dagen teller vi som en favorittfrukt."
+        selectedOptions={selectedOptionsMultiple}
+        isMultiSelect
+        disabled
+      />
+      <UNSAFE_Combobox
+        options={options}
+        label="Hva er din favoritthobby?"
+        description="Her snakker vi ting du bruker minst én time på hver dag."
+        selectedOptions={selectedOptionsSingle}
+        disabled
+      />
+    </VStack>
+  );
+};
+
+export const Readonly: StoryFn = () => {
+  const selectedOptionsMultiple = ["napoleonskake", "donut"];
+  const selectedOptionsSingle = ["pushups"];
+  return (
+    <VStack gap="2">
+      <UNSAFE_Combobox
+        options={options}
+        label="Hva er dine favorittfrukter?"
+        description="Bare de fruktene som du spiser minst 5 av om dagen teller vi som en favorittfrukt."
+        selectedOptions={selectedOptionsMultiple}
+        isMultiSelect
+        readOnly
+      />
+      <UNSAFE_Combobox
+        options={options}
+        label="Hva er din favoritthobby?"
+        description="Her snakker vi ting du bruker minst én time på hver dag."
+        selectedOptions={selectedOptionsSingle}
+        readOnly
+      />
+    </VStack>
   );
 };
 
@@ -523,6 +566,8 @@ export const Chromatic: StoryFn = () => {
       <WithError />
       <H2>Disabled</H2>
       <Disabled />
+      <H2>Readonly</H2>
+      <Readonly />
     </VStack>
   );
 };

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

@@ -35,7 +35,7 @@ const CustomOptionsProvider = ({
       );
       focusInput();
     },
-    [focusInput, setCustomOptions],
+    [focusInput],
   );
 
   const addCustomOption = useCallback(
@@ -47,7 +47,7 @@ const CustomOptionsProvider = ({
       }
       focusInput();
     },
-    [focusInput, isMultiSelect, setCustomOptions],
+    [focusInput, isMultiSelect],
   );
 
   const customOptionsState = {

@navikt/core/react/src/form/combobox/types.ts

@@ -16,17 +16,6 @@ export type ComboboxOption = {
   value: string;
 };
 
-export type MaxSelected = {
-  /**
-   * The limit for maximum selected options
-   */
-  limit: number;
-  /**
-   * Override the message to display when the limit for maximum selected options has been reached
-   */
-  message?: string;
-};
-
 export interface ComboboxProps
   extends FormFieldProps,
     Omit<
@@ -135,7 +124,16 @@ export interface ComboboxProps
   /**
    * Options for the maximum number of selected options.
    */
-  maxSelected?: MaxSelected;
+  maxSelected?: {
+    /**
+     * The limit for maximum selected options
+     */
+    limit: number;
+    /**
+     * Override the message to display when the limit for maximum selected options has been reached
+     */
+    message?: string;
+  };
   /**
    * Set to `true` to enable inline autocomplete.
    *

@navikt/core/react/src/form/error-summary/ErrorSummary.tsx

@@ -1,10 +1,12 @@
 import cl from "clsx";
-import React, { HTMLAttributes, forwardRef, isValidElement } from "react";
+import React, { HTMLAttributes, forwardRef, useRef } from "react";
 import { BodyShort, Heading } from "../../typography";
-import { useId } from "../../util/hooks";
-import ErrorSummaryItem, { ErrorSummaryItemType } from "./ErrorSummaryItem";
+import { composeEventHandlers } from "../../util/composeEventHandlers";
+import { useMergeRefs } from "../../util/hooks";
+import ErrorSummaryItem from "./ErrorSummaryItem";
 
-export interface ErrorSummaryProps extends HTMLAttributes<HTMLDivElement> {
+export interface ErrorSummaryProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "tabIndex"> {
   /**
    * Collection of `ErrorSummary.Item`.
    */
@@ -16,6 +18,7 @@ export interface ErrorSummaryProps extends HTMLAttributes<HTMLDivElement> {
   size?: "medium" | "small";
   /**
    * Heading above links.
+   * @default "Du må rette disse feilene før du kan fortsette:"
    */
   heading?: React.ReactNode;
   /**
@@ -30,22 +33,22 @@ interface ErrorSummaryComponent
     ErrorSummaryProps & React.RefAttributes<HTMLDivElement>
   > {
   /**
-   * Link to error.
+   * Error message with link to field.
    *
    * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
    *
    * @example
    * ```jsx
-   * <ErrorSummary.Item href="#1">
+   * <ErrorSummary.Item href="#id-til-alderfelt">
    *   Felt må fylles ut med alder
    * </ErrorSummary.Item>
    * ```
    */
-  Item: ErrorSummaryItemType;
+  Item: typeof ErrorSummaryItem;
 }
 
 /**
- * A component that displays a summary of errors.
+ * Summary of errors in a form.
  *
  * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/errorsummary)
  * @see 🏷️ {@link ErrorSummaryProps}
@@ -69,16 +72,19 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
       className,
       size = "medium",
       headingTag = "h2",
-      heading,
+      heading = "Du må rette disse feilene før du kan fortsette:",
       ...rest
     },
     ref,
   ) => {
-    const headingId = useId();
+    const wrapperRef = useRef<HTMLDivElement>(null);
+    const headingRef = useRef<HTMLHeadingElement>(null);
+
+    const mergedRef = useMergeRefs(ref, wrapperRef);
 
     return (
-      <section
-        ref={ref}
+      <div
+        ref={mergedRef}
         {...rest}
         className={cl(
           className,
@@ -86,27 +92,25 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
           `navds-error-summary--${size}`,
         )}
         tabIndex={-1}
-        aria-live="polite"
-        aria-relevant="all"
-        aria-labelledby={headingId}
+        onFocus={composeEventHandlers(rest.onFocus, (event) => {
+          if (event.target === wrapperRef.current) {
+            headingRef?.current?.focus();
+          }
+        })}
       >
         <Heading
           className="navds-error-summary__heading"
           as={headingTag}
           size="small"
-          id={headingId}
+          ref={headingRef}
+          tabIndex={-1}
         >
           {heading}
         </Heading>
         <BodyShort as="ul" size={size} className="navds-error-summary__list">
-          {React.Children.map(children, (child) => {
-            if (!isValidElement(child)) {
-              return null;
-            }
-            return <li key={child.toString()}>{child}</li>;
-          })}
+          {children}
         </BodyShort>
-      </section>
+      </div>
     );
   },
 ) as ErrorSummaryComponent;

@navikt/core/react/src/form/error-summary/ErrorSummaryItem.tsx

@@ -14,7 +14,7 @@ export interface ErrorSummaryItemProps
   href?: string;
 }
 
-export type ErrorSummaryItemType = OverridableComponent<
+type ErrorSummaryItemType = OverridableComponent<
   ErrorSummaryItemProps,
   HTMLAnchorElement
 >;
@@ -22,13 +22,15 @@ export type ErrorSummaryItemType = OverridableComponent<
 export const ErrorSummaryItem: ErrorSummaryItemType = forwardRef(
   ({ children, as: Component = "a", className, ...rest }, ref) => {
     return (
-      <Component
-        {...rest}
-        ref={ref}
-        className={cl(className, "navds-error-summary__item", "navds-link")}
-      >
-        {children}
-      </Component>
+      <li>
+        <Component
+          {...rest}
+          ref={ref}
+          className={cl(className, "navds-error-summary__item", "navds-link")}
+        >
+          {children}
+        </Component>
+      </li>
     );
   },
 );

@navikt/core/react/src/form/error-summary/error-summary.stories.tsx

@@ -1,12 +1,34 @@
 import { Meta, StoryObj } from "@storybook/react";
-import React from "react";
+import { expect, userEvent, within } from "@storybook/test";
+import React, { useRef } from "react";
 import { VStack } from "../../layout/stack";
 import { ErrorSummary } from "./ErrorSummary";
 
 export default {
-  title: "ds-react/Errorsummary",
+  title: "ds-react/ErrorSummary",
   component: ErrorSummary,
+  parameters: {
+    chromatic: { disable: true },
+  },
+} satisfies Meta<typeof ErrorSummary>;
+
+type Story = StoryObj<typeof ErrorSummary>;
+
+export const Default: Story = {
+  render: ({ headingTag, ...rest }) => (
+    <ErrorSummary headingTag={headingTag || undefined} {...rest}>
+      <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+      <ErrorSummary.Item href="#2">
+        Tekstfeltet må ha en godkjent e-mail
+      </ErrorSummary.Item>
+    </ErrorSummary>
+  ),
   argTypes: {
+    heading: {
+      control: {
+        type: "text",
+      },
+    },
     headingTag: {
       control: {
         type: "text",
@@ -19,26 +41,6 @@ export default {
       options: ["medium", "small"],
     },
   },
-  parameters: {
-    chromatic: { disable: true },
-  },
-} satisfies Meta<typeof ErrorSummary>;
-
-type Story = StoryObj<typeof ErrorSummary>;
-
-export const Default: Story = {
-  render: (props) => (
-    <ErrorSummary
-      heading="Feiloppsummering komponent"
-      headingTag={props.headingTag || "h2"}
-      size={props.size ?? undefined}
-    >
-      <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
-      <ErrorSummary.Item href="#2">
-        Tekstfeltet må ha en godkjent e-mail
-      </ErrorSummary.Item>
-    </ErrorSummary>
-  ),
 };
 
 export const Small: Story = {
@@ -52,6 +54,59 @@ export const Small: Story = {
   ),
 };
 
+export const A11yDemo: Story = {
+  name: "A11y Demo",
+  render: () => {
+    const ref = useRef<HTMLHeadingElement>(null);
+    return (
+      <div>
+        <button
+          onClick={() => {
+            ref.current?.focus();
+          }}
+        >
+          Fokuser ErrorSummary
+        </button>
+        <ErrorSummary heading="Feiloppsummering tittel" ref={ref}>
+          <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+          <ErrorSummary.Item href="#2">
+            Tekstfeltet må ha en godkjent e-mail
+          </ErrorSummary.Item>
+        </ErrorSummary>
+      </div>
+    );
+  },
+};
+
+export const FocusDemo: Story = {
+  render: () => {
+    const ref = useRef<HTMLHeadingElement>(null);
+    return (
+      <div>
+        <button onClick={() => ref.current?.focus()}>Focus summary</button>
+        <ErrorSummary heading="Feiloppsummering tittel" ref={ref}>
+          <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+          <ErrorSummary.Item href="#2">
+            Tekstfeltet må ha en godkjent e-mail
+          </ErrorSummary.Item>
+        </ErrorSummary>
+      </div>
+    );
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    const button = canvas.getByText("Focus summary");
+    const heading = canvas.getByText("Feiloppsummering tittel");
+
+    await step("click button", async () => {
+      await userEvent.click(button);
+    });
+
+    expect(heading).toHaveFocus();
+  },
+};
+
 export const Chromatic: Story = {
   render: () => (
     <VStack gap="4">

@navikt/core/react/src/form/file-upload/file-upload-dropzone.stories.tsx

@@ -2,11 +2,7 @@ import { Meta, StoryFn, StoryObj } from "@storybook/react";
 import { fireEvent, within } from "@storybook/test";
 import React from "react";
 import { ImageIcon } from "@navikt/aksel-icons";
-import {
-  type FileObject,
-  UNSAFE_FileUpload as FileUpload,
-  type FilesPartitioned,
-} from ".";
+import { type FileObject, FileUpload, type FilesPartitioned } from ".";
 
 const meta: Meta<typeof FileUpload.Dropzone> = {
   title: "ds-react/FileUpload/Dropzone",

@navikt/core/react/src/form/file-upload/file-upload-item.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryFn } from "@storybook/react";
 import React from "react";
-import { FileItem, UNSAFE_FileUpload as FileUpload } from ".";
+import { FileItem, FileUpload } from ".";
 import { VStack } from "../../layout/stack";
 
 const meta: Meta<typeof FileUpload.Item> = {

@navikt/core/react/src/form/file-upload/file-upload.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryFn } from "@storybook/react";
 import React, { useEffect, useState } from "react";
 import { UploadIcon } from "@navikt/aksel-icons";
-import { UNSAFE_FileUpload as FileUpload, FileUploadItemProps } from ".";
+import { FileUpload, FileUploadItemProps } from ".";
 import { Alert } from "../../alert";
 import { Button } from "../../button";
 import { VStack } from "../../layout/stack";

@navikt/core/react/src/form/file-upload/index.ts

@@ -1,9 +1,9 @@
 "use client";
-export { default as UNSAFE_FileUpload } from "./FileUpload";
-export { default as UNSAFE_FileUploadDropzone } from "./parts/dropzone/Dropzone";
+export { default as FileUpload } from "./FileUpload";
+export { default as FileUploadDropzone } from "./parts/dropzone/Dropzone";
 export { type FileUploadDropzoneProps } from "./parts/dropzone/dropzone.types";
 export {
-  default as UNSAFE_FileUploadTrigger,
+  default as FileUploadTrigger,
   type FileUploadTriggerProps,
 } from "./parts/Trigger";
 export {
@@ -15,7 +15,7 @@ export {
   type FileRejectionReason,
 } from "./FileUpload.types";
 export {
-  default as UNSAFE_FileUploadItem,
+  default as FileUploadItem,
   type FileUploadItemProps,
 } from "./parts/item/Item";
 export { type FileItem, type FileMetadata } from "./parts/item/Item.types";

@navikt/core/react/src/form/form-progress/FormProgress.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryFn } from "@storybook/react";
 import React, { useState } from "react";
 import VStack from "../../layout/stack/VStack";
+import UNSAFE_AkselLanguageProvider from "../../provider/i18n/LanguageProvider";
 import FormProgress, { FormProgressProps } from "./FormProgress";
 
 export default {
@@ -37,6 +38,97 @@ export const Default: StoryFn<ControllableProps> = (props) => (
 );
 Default.args = { activeStep: 2, totalSteps: 7, interactiveSteps: true };
 
+export const ProvidedTranslations: StoryFn = () => {
+  const translations = {
+    FormProgress: {
+      step: "Step {activeStep} of {totalSteps}",
+      showAllSteps: "Show all steps",
+      hideAllSteps: "Hide all steps",
+    },
+  };
+
+  return (
+    <UNSAFE_AkselLanguageProvider translations={translations}>
+      <FormProgress activeStep={2} totalSteps={7} interactiveSteps>
+        <FormProgress.Step href="#" completed>
+          Start søknad
+        </FormProgress.Step>
+        <FormProgress.Step href="#">Personopplysninger</FormProgress.Step>
+        <FormProgress.Step interactive={false}>
+          Saksopplysninger
+        </FormProgress.Step>
+        <FormProgress.Step interactive={false}>
+          Søknadstekst for en veldig spesifikk prosess i NAV som har lang tekst
+        </FormProgress.Step>
+        <FormProgress.Step href="#">Vedlegg</FormProgress.Step>
+        <FormProgress.Step href="#">Oppsummering</FormProgress.Step>
+        <FormProgress.Step href="#">Innsending</FormProgress.Step>
+      </FormProgress>
+    </UNSAFE_AkselLanguageProvider>
+  );
+};
+
+export const DefaultTranslations: StoryFn = () => {
+  return (
+    <UNSAFE_AkselLanguageProvider>
+      <FormProgress activeStep={2} totalSteps={7} interactiveSteps>
+        <FormProgress.Step href="#" completed>
+          Start søknad
+        </FormProgress.Step>
+        <FormProgress.Step href="#">Personopplysninger</FormProgress.Step>
+        <FormProgress.Step interactive={false}>
+          Saksopplysninger
+        </FormProgress.Step>
+        <FormProgress.Step interactive={false}>
+          Søknadstekst for en veldig spesifikk prosess i NAV som har lang tekst
+        </FormProgress.Step>
+        <FormProgress.Step href="#">Vedlegg</FormProgress.Step>
+        <FormProgress.Step href="#">Oppsummering</FormProgress.Step>
+        <FormProgress.Step href="#">Innsending</FormProgress.Step>
+      </FormProgress>
+    </UNSAFE_AkselLanguageProvider>
+  );
+};
+
+export const ComponentTranslations: StoryFn = () => {
+  const globalTranslations = {
+    FormProgress: {
+      step: "Step {activeStep} of {totalSteps}",
+      showAllSteps: "Show all steps",
+      hideAllSteps: "Hide all steps",
+    },
+  };
+  const translations = {
+    step: "Skref {activeStep} af {totalSteps}",
+    showAllSteps: "Sýndu öll skref",
+    hideAllSteps: "Fela öll skref",
+  };
+  return (
+    <UNSAFE_AkselLanguageProvider translations={globalTranslations}>
+      <FormProgress
+        translations={translations}
+        activeStep={2}
+        totalSteps={7}
+        interactiveSteps
+      >
+        <FormProgress.Step href="#" completed>
+          Start søknad
+        </FormProgress.Step>
+        <FormProgress.Step href="#">Personopplysninger</FormProgress.Step>
+        <FormProgress.Step interactive={false}>
+          Saksopplysninger
+        </FormProgress.Step>
+        <FormProgress.Step interactive={false}>
+          Søknadstekst for en veldig spesifikk prosess i NAV som har lang tekst
+        </FormProgress.Step>
+        <FormProgress.Step href="#">Vedlegg</FormProgress.Step>
+        <FormProgress.Step href="#">Oppsummering</FormProgress.Step>
+        <FormProgress.Step href="#">Innsending</FormProgress.Step>
+      </FormProgress>
+    </UNSAFE_AkselLanguageProvider>
+  );
+};
+
 export const Controlled: StoryFn = () => {
   const [open, setOpen] = useState(true);
   return (

@navikt/core/react/src/form/form-summary/FormSummaryEditLink.tsx

@@ -22,14 +22,17 @@ export interface FormSummaryEditProps
 export const FormSummaryEditLink: OverridableComponent<
   FormSummaryEditProps,
   HTMLAnchorElement
-> = forwardRef(({ children = "Endre svar", className, ...rest }, ref) => (
-  <Link
-    ref={ref}
-    {...rest}
-    className={cl("navds-form-summary__edit", className)}
-  >
-    {children}
-  </Link>
-));
+> = forwardRef(
+  ({ children = "Endre svar", className, as = "a", ...rest }, ref) => (
+    <Link
+      ref={ref}
+      as={as}
+      {...rest}
+      className={cl("navds-form-summary__edit", className)}
+    >
+      {children}
+    </Link>
+  ),
+);
 
 export default FormSummaryEditLink;

@navikt/core/react/src/form/radio/useRadio.ts

@@ -41,8 +41,8 @@ export const useRadio = (props: RadioProps) => {
         if (readOnly) {
           return;
         }
-        props.onChange && props.onChange(e);
-        radioGroup?.onChange && radioGroup.onChange(props.value);
+        props.onChange?.(e);
+        radioGroup?.onChange?.(props.value);
       },
       onClick: (e) => {
         if (readOnly) {

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

@@ -144,7 +144,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
       (event: SearchClearEvent) => {
         onClear?.(event);
         handleChange("");
-        searchRef.current && searchRef.current?.focus?.();
+        searchRef.current?.focus?.();
       },
       [handleChange, onClear],
     );

@navikt/core/react/src/form/switch/Switch.tsx

@@ -122,7 +122,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
               return;
             }
             setChecked(e.target.checked);
-            props.onChange && props.onChange(e);
+            props.onChange?.(e);
           }}
           onClick={(e) => {
             if (readOnly) {

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

@@ -49,7 +49,7 @@ Default.argTypes = {
 export const Open: StoryFn = () => {
   const ref = useRef<HTMLButtonElement | null>(null);
   useEffect(() => {
-    ref.current && ref.current.click();
+    ref.current?.click();
   }, []);
 
   return (

@navikt/core/react/src/index.ts

@@ -127,7 +127,7 @@ export {
 export { ErrorSummary, type ErrorSummaryProps } from "./form/error-summary";
 export { Fieldset, type FieldsetProps } from "./form/fieldset";
 export {
-  UNSAFE_FileUpload,
+  FileUpload,
   type FileAccepted,
   type FileItem,
   type FileMetadata,

@navikt/core/react/src/layout/page/parts/PageBlock.tsx

@@ -63,7 +63,7 @@ export const PageBlock: OverridableComponent<PageBlockProps, HTMLDivElement> =
           {...rest}
           className={cl(
             "navds-pageblock",
-            `navds-pageblock--${width}`,
+            width && `navds-pageblock--${width}`,
             className,
             { "navds-pageblock--gutters": gutters },
           )}

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

@@ -26,8 +26,8 @@ export type HStackProps = PrimitiveAsChildProps & Omit<StackProps, "direction">;
  * </HStack>
  */
 export const HStack: OverridableComponent<HStackProps, HTMLDivElement> =
-  forwardRef((props, ref) => {
-    return <Stack {...props} ref={ref} direction="row" />;
+  forwardRef(({ as = "div", ...rest }, ref) => {
+    return <Stack as={as} {...rest} ref={ref} direction="row" />;
   });
 
 export default HStack;

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

@@ -27,8 +27,10 @@ export type VStackProps = PrimitiveAsChildProps &
  * </VStack>
  */
 export const VStack: OverridableComponent<VStackProps, HTMLDivElement> =
-  forwardRef((props, ref) => {
-    return <Stack {...props} ref={ref} direction="column" wrap={false} />;
+  forwardRef(({ as = "div", ...rest }, ref) => {
+    return (
+      <Stack as={as} {...rest} ref={ref} direction="column" wrap={false} />
+    );
   });
 
 export default VStack;

@navikt/core/react/src/list/List.tsx

@@ -1,15 +1,27 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
-import { BodyShort, Heading } from "../typography";
-import { useId } from "../util/hooks";
+import { BodyLong, BodyShort, Heading, HeadingProps } from "../typography";
 import { ListItem } from "./ListItem";
 import { ListContext } from "./context";
-import { ListProps } from "./types";
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import type { ListItemProps, ListProps } from "./types";
+
+const headingSizeMap: Record<
+  Exclude<ListProps["size"], undefined>,
+  HeadingProps["size"]
+> = {
+  small: "xsmall",
+  medium: "small",
+  large: "medium",
+};
 
 export interface ListComponent
   extends React.ForwardRefExoticComponent<
     ListProps & React.RefAttributes<HTMLDivElement>
   > {
+  /**
+   * @see 🏷️ {@link ListItemProps}
+   */
   Item: typeof ListItem;
 }
 
@@ -42,47 +54,31 @@ export const List = forwardRef<HTMLDivElement, ListProps>(
     },
     ref,
   ) => {
-    const ariaId = useId();
+    const { size: contextSize } = useContext(ListContext);
 
-    const { isNested, size: _size } = useContext(ListContext);
-
-    const listSize = size ?? _size ?? "medium";
+    const listSize = size ?? contextSize;
     return (
       <ListContext.Provider
         value={{
           listType: ListTag,
-          isNested: isNested === null ? false : true,
           size: listSize,
         }}
       >
-        <div
+        <BodyLong
+          as="div"
           {...rest}
+          size={listSize}
           ref={ref}
-          className={cl("navds-list", `navds-list--${listSize}`, className, {
-            "navds-list--nested": isNested === null ? false : true,
-          })}
+          className={cl("navds-list", `navds-list--${listSize}`, className)}
         >
           {title && (
-            <Heading
-              id={`tittel-${ariaId}`}
-              size={listSize === "medium" ? "small" : "xsmall"}
-              as={headingTag}
-            >
+            <Heading size={headingSizeMap[listSize]} as={headingTag}>
               {title}
             </Heading>
           )}
-          {description && (
-            <BodyShort size={listSize} id={`description-${ariaId}`}>
-              {description}
-            </BodyShort>
-          )}
-          <ListTag
-            aria-labelledby={title && `tittel-${ariaId}`}
-            aria-describedby={description && `description-${ariaId}`}
-          >
-            {children}
-          </ListTag>
-        </div>
+          {description && <BodyShort size={listSize}>{description}</BodyShort>}
+          <ListTag role="list">{children}</ListTag>
+        </BodyLong>
       </ListContext.Provider>
     );
   },

@navikt/core/react/src/list/ListItem.tsx

@@ -2,7 +2,7 @@ import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import { BodyLong } from "../typography";
 import { ListContext } from "./context";
-import { ListItemProps } from "./types";
+import type { ListItemProps } from "./types";
 
 /**
  * @see 🏷️ {@link ListItemProps}
@@ -21,7 +21,7 @@ export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
       <li {...rest} ref={ref} className={cl("navds-list__item", className)}>
         {listType === "ul" && (
           <div
-            className={cl({
+            className={cl("navds-list__item-marker", {
               "navds-list__item-marker--icon": icon,
               "navds-list__item-marker--bullet": !icon,
             })}
@@ -30,8 +30,8 @@ export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
               icon
             ) : (
               <svg
-                width="6"
-                height="6"
+                width="0.375rem"
+                height="0.375rem"
                 viewBox="0 0 6 6"
                 fill="none"
                 xmlns="http://www.w3.org/2000/svg"
@@ -45,14 +45,14 @@ export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
           </div>
         )}
 
-        <BodyLong as="div" size={size} className="navds-list__item-content">
+        <div>
           {title && (
             <BodyLong as="p" size={size} weight="semibold">
               {title}
             </BodyLong>
           )}
           {children}
-        </BodyLong>
+        </div>
       </li>
     );
   },

@navikt/core/react/src/list/context.ts

@@ -2,13 +2,11 @@ import { createContext } from "react";
 import { ListProps } from "./types";
 
 interface ListContextProps {
-  listType: ListProps["as"];
-  isNested: boolean | null;
-  size: ListProps["size"];
+  listType: Exclude<ListProps["as"], undefined>;
+  size: Exclude<ListProps["size"], undefined>;
 }
 
 export const ListContext = createContext<ListContextProps>({
   listType: "ul",
-  isNested: null,
   size: "medium",
 });

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

@@ -1,11 +1,13 @@
 import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import {
-  BabyWrappedIcon,
   BrailleIcon,
+  CheckmarkIcon,
+  ForkIcon,
   HeadHeartIcon,
-  RecycleIcon,
+  SplitHorizontalIcon,
 } from "@navikt/aksel-icons";
+import { Box } from "../layout/box";
 import { VStack } from "../layout/stack";
 import { BodyLong } from "../typography";
 import List from "./List";
@@ -20,73 +22,97 @@ export default {
 
 type Story = StoryObj<typeof List>;
 
-export const Default = {
+export const Default: Story = {
+  render: (props) => {
+    return (
+      <Box borderWidth="0 0 0 1" borderColor="border-subtle" maxWidth="500px">
+        <List {...props}>
+          <List.Item title="Lorem Ipsum Dolor Sit Amet">Beskrivelse.</List.Item>
+          <List.Item title="Consectetur Adipiscing Elit">
+            Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+          </List.Item>
+          <List.Item>
+            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto
+            fugiat atque accusantium iure sunt, ipsum voluptas, impedit harum,
+            minus rerum recusandae.
+          </List.Item>
+          <List.Item>
+            Impedit nemo eos sit adipisci non dolores.
+            <List>
+              <List.Item title="Tempor Incididunt">
+                Error assumenda officia
+              </List.Item>
+              <List.Item>Suscipit odit voluptatum</List.Item>
+            </List>
+          </List.Item>
+          <List.Item>
+            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto
+            fugiat atque accusantium iure sunt, ipsum voluptas.
+            <List as="ol">
+              <List.Item title="Tempor Incididunt">
+                Error assumenda officia
+              </List.Item>
+              <List.Item>Suscipit odit voluptatum</List.Item>
+            </List>
+          </List.Item>
+        </List>
+      </Box>
+    );
+  },
+  args: {
+    title: "",
+    description: "",
+  },
+  argTypes: {
+    size: { control: { type: "radio" }, options: ["small", "medium", "large"] },
+    as: { control: { type: "radio" }, options: ["ul", "ol"] },
+  },
+};
+
+export const Ordered: Story = {
   render: () => {
     return (
-      <List>
-        <List.Item title="Lorem Ipsum Dolor Sit Amet">
-          Lorem Ipsum Dolor Sit Amet
-        </List.Item>
-        <List.Item title="Consectetur Adipiscing Elit">
-          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
-        </List.Item>
-        <List.Item>
-          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto fugiat
-          atque accusantium iure sunt, ipsum voluptas, impedit harum, minus
-          rerum recusandae. Consequuntur sint distinctio nulla reprehenderit eum
-          suscipit quae libero.
-        </List.Item>
-        <List.Item>
-          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto fugiat
-          atque accusantium iure sunt, ipsum voluptas, impedit harum, minus
-          rerum recusandae. Consequuntur sint distinctio nulla reprehenderit eum
-          suscipit quae libero.
-        </List.Item>
-      </List>
+      <Box borderWidth="0 0 0 1" borderColor="border-subtle" maxWidth="500px">
+        <List as="ol">
+          <List.Item title="Lorem Ipsum Dolor Sit Amet">Beskrivelse.</List.Item>
+          <List.Item title="Consectetur Adipiscing Elit">
+            Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+          </List.Item>
+          <List.Item title="Quis Nostrud Exercitation Ullamco Eu Fugiat Nulla Pariatur Dolore">
+            Beskrivelse på punktet i lista. Prøv å hold den kort og konsis. Men
+            hvis den likevel blir lang, skal teksten brekke.
+          </List.Item>
+          <List.Item>Sed Do Eiusmod Tempor Incididunt</List.Item>
+          <List.Item>Ut Labore Et Dolore Magna Aliqua</List.Item>
+          <List.Item>Enim Ad Minim Veniam</List.Item>
+          <List.Item>Laboris Nisi Ut Aliquip Ex Ea Commodo</List.Item>
+          <List.Item>Duis Aute Irure Dolor In Reprehenderit</List.Item>
+          <List.Item>
+            Impedit nemo eos sit adipisci non dolores.
+            <List as="ol">
+              <List.Item title="Tempor Incididunt">
+                Error assumenda officia
+              </List.Item>
+              <List.Item>Suscipit odit voluptatum</List.Item>
+            </List>
+          </List.Item>
+          <List.Item title="Voluptate Velit Esse Cillum Dolore">
+            Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+            <List>
+              <List.Item title="Tempor Incididunt">
+                Error assumenda officia
+              </List.Item>
+              <List.Item>Suscipit odit voluptatum</List.Item>
+            </List>
+          </List.Item>
+          <List.Item>Eu Fugiat Nulla Pariatur</List.Item>
+        </List>
+      </Box>
     );
   },
 };
 
-export const Ordered = {
-  render: () => {
-    return (
-      <List as="ol">
-        <List.Item title="Lorem Ipsum Dolor Sit Amet">
-          Lorem Ipsum Dolor Sit Amet
-        </List.Item>
-        <List.Item title="Consectetur Adipiscing Elit">
-          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
-        </List.Item>
-        <List.Item title="Sed Do Eiusmod Tempor Incididunt">
-          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
-        </List.Item>
-        <List.Item title="Ut Labore Et Dolore Magna Aliqua">
-          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
-        </List.Item>
-        <List.Item title="Enim Ad Minim Veniam">
-          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
-        </List.Item>
-        <List.Item title="Quis Nostrud Exercitation Ullamco">
-          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
-        </List.Item>
-        <List.Item title="Laboris Nisi Ut Aliquip Ex Ea Commodo">
-          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
-        </List.Item>
-        <List.Item title="Duis Aute Irure Dolor In Reprehenderit">
-          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
-        </List.Item>
-        <List.Item title="Voluptate Velit Esse Cillum Dolore">
-          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
-        </List.Item>
-        <List.Item title="Eu Fugiat Nulla Pariatur">
-          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
-        </List.Item>
-      </List>
-    );
-  },
-};
-
-export const WithHeading = {
+export const WithHeading: Story = {
   render: () => {
     return (
       <List
@@ -107,10 +133,25 @@ export const WithHeading = {
   },
 };
 
-export const SizesUl = {
+export const SizesUl: Story = {
   render: () => {
     return (
       <VStack gap="8">
+        <List
+          title="Large list"
+          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel risus volutpat."
+          size="large"
+        >
+          <List.Item title="Lorem Ipsum Dolor Sit Amet">
+            Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+          </List.Item>
+          <List.Item title="Consectetur Adipiscing Elit">
+            Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+          </List.Item>
+          <List.Item>
+            Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+          </List.Item>
+        </List>
         <List
           title="Medium list"
           description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel risus volutpat."
@@ -146,10 +187,26 @@ export const SizesUl = {
   },
 };
 
-export const SizesOl = {
+export const SizesOl: Story = {
   render: () => {
     return (
       <VStack gap="8">
+        <List
+          title="Large list"
+          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel risus volutpat."
+          size="large"
+          as="ol"
+        >
+          <List.Item title="Lorem Ipsum Dolor Sit Amet">
+            Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+          </List.Item>
+          <List.Item title="Consectetur Adipiscing Elit">
+            Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+          </List.Item>
+          <List.Item>
+            Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+          </List.Item>
+        </List>
         <List
           title="Medium list"
           description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel risus volutpat."
@@ -187,10 +244,31 @@ export const SizesOl = {
   },
 };
 
-export const SizesIcons = {
+export const SizesIcons: Story = {
   render: () => {
     return (
       <VStack gap="8">
+        <List
+          title="Large list"
+          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel risus volutpat."
+          size="large"
+        >
+          <List.Item
+            icon={<HeadHeartIcon aria-hidden />}
+            title="Lorem Ipsum Dolor Sit Amet"
+          >
+            Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+          </List.Item>
+          <List.Item
+            icon={<HeadHeartIcon aria-hidden />}
+            title="Consectetur Adipiscing Elit"
+          >
+            Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+          </List.Item>
+          <List.Item icon={<HeadHeartIcon aria-hidden />}>
+            Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+          </List.Item>
+        </List>
         <List
           title="Medium list"
           description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel risus volutpat."
@@ -238,10 +316,10 @@ export const SizesIcons = {
   },
 };
 
-export const Icons = {
+export const Icons: Story = {
   render: () => {
     return (
-      <List>
+      <List title="Best title">
         <List.Item
           title="Lorem Ipsum Dolor Sit Amet"
           icon={<BrailleIcon aria-hidden />}
@@ -250,14 +328,14 @@ export const Icons = {
         </List.Item>
         <List.Item
           title="Consectetur Adipiscing Elit"
-          icon={<HeadHeartIcon aria-hidden />}
+          icon={<ForkIcon aria-hidden />}
         >
           Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
         </List.Item>
-        <List.Item icon={<BabyWrappedIcon aria-hidden />}>
+        <List.Item icon={<CheckmarkIcon aria-hidden />}>
           Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
         </List.Item>
-        <List.Item icon={<RecycleIcon aria-hidden />}>
+        <List.Item icon={<SplitHorizontalIcon aria-hidden />}>
           Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
         </List.Item>
       </List>
@@ -265,39 +343,70 @@ export const Icons = {
   },
 };
 
-export const Nested = {
+export const Tokens: Story = {
   render: () => {
     return (
-      <List>
-        <List.Item title="Sed Do Eiusmod Tempor Incididunt">
-          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
-          <List>
-            <List.Item title="Lorem Ipsum Dolor Sit Amet">
-              Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
-            </List.Item>
-            <List.Item title="Consectetur Adipiscing Elit">
-              Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
-            </List.Item>
-            <List.Item>
-              Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
-            </List.Item>
-            <List.Item>
-              Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+      <List style={{ "--ac-list-marker-color": "red" }}>
+        <List.Item>Consectetur Adipiscing Elit</List.Item>
+        <List.Item>
+          Impedit nemo eos sit adipisci non dolores.
+          <List
+            style={{
+              "--ac-list-marker-icon-color": "blue",
+              "--ac-list-marker-ul-color": "pink",
+            }}
+          >
+            <List.Item>Error assumenda officia</List.Item>
+            <List.Item icon={<HeadHeartIcon aria-hidden />}>
+              Suscipit odit voluptatum
             </List.Item>
           </List>
         </List.Item>
-        <List.Item>
-          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+        <List.Item style={{ "--ac-list-marker-ol-color": "green" }}>
+          Iusto fugiat atque accusantium iure sunt.
+          <List as="ol">
+            <List.Item>Error assumenda officia</List.Item>
+          </List>
+          <List>
+            <List.Item>Suscipit odit voluptatum</List.Item>
+          </List>
         </List.Item>
       </List>
     );
   },
 };
 
-export const Spacing = {
+export const Spacing: Story = {
   render: () => {
     return (
       <>
+        <h2>Large</h2>
+        <BodyLong size="large" spacing>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit minus
+          aliquid, veniam quibusdam saepe autem quia odio? Tenetur dicta
+          voluptates iste maiores perspiciatis? Sapiente in possimus iusto
+          numquam? Esse, voluptatibus.
+        </BodyLong>
+        <List size="large">
+          <List.Item>
+            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto
+            fugiat atque accusantium iure sunt, ipsum voluptas, impedit harum,
+            minus rerum recusandae. Consequuntur sint distinctio nulla
+            reprehenderit eum suscipit quae libero.
+          </List.Item>
+          <List.Item>
+            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto
+            fugiat atque accusantium iure sunt, ipsum voluptas, impedit harum,
+            minus rerum recusandae. Consequuntur sint distinctio nulla
+            reprehenderit eum suscipit quae libero.
+          </List.Item>
+        </List>
+        <BodyLong size="large" spacing>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit minus
+          aliquid, veniam quibusdam saepe autem quia odio? Tenetur dicta
+          voluptates iste maiores perspiciatis? Sapiente in possimus iusto
+          numquam? Esse, voluptatibus.
+        </BodyLong>
         <h2>Medium</h2>
         <BodyLong spacing>
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit minus
@@ -358,43 +467,43 @@ export const Spacing = {
 };
 
 export const Chromatic: Story = {
-  render: () => (
+  render: (...args) => (
     <VStack gap="2">
       <div>
         <h2>Default</h2>
-        <Default.render />
+        {Default.render?.(...args)}
       </div>
       <div>
         <h2>Ordered</h2>
-        <Ordered.render />
+        {Ordered.render?.(...args)}
       </div>
       <div>
         <h2>WithHeading</h2>
-        <WithHeading.render />
+        {WithHeading.render?.(...args)}
       </div>
       <div>
         <h2>SizesUl</h2>
-        <SizesUl.render />
+        {SizesUl.render?.(...args)}
       </div>
       <div>
         <h2>SizesOl</h2>
-        <SizesOl.render />
+        {SizesOl.render?.(...args)}
       </div>
       <div>
         <h2>SizesIcons</h2>
-        <SizesIcons.render />
+        {SizesIcons.render?.(...args)}
       </div>
       <div>
         <h2>Icons</h2>
-        <Icons.render />
+        {Icons.render?.(...args)}
       </div>
       <div>
-        <h2>Nested</h2>
-        <Nested.render />
+        <h2>Tokens</h2>
+        {Tokens.render?.(...args)}
       </div>
       <div>
         <h2>Spacing</h2>
-        <Spacing.render />
+        {Spacing.render?.(...args)}
       </div>
     </VStack>
   ),

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

@@ -19,10 +19,10 @@ export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   headingTag?: React.ElementType<any>;
   /**
-   * Changes padding, height and font-size.
+   * Changes margin-block on list and font size on items.
    * @default "medium"
    */
-  size?: "medium" | "small";
+  size?: "small" | "medium" | "large";
 }
 
 export interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {

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

@@ -127,7 +127,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       // We have to use JS because it doesn't work to set it with a prop (React bug?)
       // Currently doesn't seem to work in Chrome. See also Tooltip.tsx
       if (modalRef.current && portalNode) modalRef.current.autofocus = true;
-    }, [modalRef, portalNode]);
+    }, [portalNode]);
 
     useEffect(() => {
       // We need to have this in a useEffect so that the content renders before the modal is displayed,
@@ -140,7 +140,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
           modalRef.current.close();
         }
       }
-    }, [modalRef, portalNode, open]);
+    }, [portalNode, open]);
 
     useBodyScrollLock(modalRef, portalNode, isNested);