Version Packages (#3077)

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

.eslintrc.js

@@ -91,6 +91,27 @@ module.exports = {
         "aksel-local/comment-check": ["error"],
       },
     },
+    {
+      files: ["**/examples/__parts*/*.tsx"],
+      plugins: ["aksel-local"],
+      rules: {
+        "aksel-local/import-check": ["error"], // Only allow imports from @navikt and react
+      },
+    },
+    {
+      files: ["**/examples/__parts-inline/*.tsx"],
+      rules: {
+        "arrow-body-style": ["error", "never"],
+        "func-style": ["error", "expression"],
+        "import/no-named-export": "error",
+      },
+    },
+    {
+      files: ["examples/**"],
+      rules: {
+        "react/react-in-jsx-scope": "off",
+      },
+    },
   ],
   globals: {
     Locale: "readonly",
@@ -100,7 +121,6 @@ module.exports = {
     "node_modules",
     "lib",
     "public",
-    "examples",
     "esm",
     "cjs",
     "dist",

.github/workflows/aksel-dev.yml

@@ -14,10 +14,10 @@ jobs:
       contents: "read"
       id-token: "write"
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: "20"
+          node-version: lts/*
           cache: yarn
       - name: set-env for yarn install to @navikt scope
         shell: bash

.github/workflows/aksel-prod.yml

@@ -14,11 +14,11 @@ jobs:
     name: Update component data
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: "20"
+          node-version: lts/*
           cache: yarn
       - name: set-env for yarn install to @navikt scope
         shell: bash
@@ -47,11 +47,11 @@ jobs:
       contents: "read"
       id-token: "write"
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: "20"
+          node-version: lts/*
           cache: yarn
       - name: set-env for yarn install to @navikt scope
         shell: bash

.github/workflows/aksel-redeploy.yml

@@ -1,4 +1,4 @@
-name: Redeploy image to for aksel.nav.no
+name: Redeploy image for aksel.nav.no
 on:
   workflow_dispatch:
     inputs:
@@ -19,10 +19,11 @@ jobs:
     name: Redeploy image
     runs-on: ubuntu-20.04
     steps:
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: "20"
-      - uses: actions/checkout@v3
+          node-version: lts/*
+          cache: yarn
+      - uses: actions/checkout@v4
       - name: Login to GitHub Container Registry
         uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a # Use commit-sha1 instead of tag for security concerns
         with:

.github/workflows/backup-sanity.yml

@@ -8,13 +8,13 @@ jobs:
   execute:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0 # Required to retrieve git history
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: "20"
+          node-version: lts/*
           cache: yarn
       - name: set-env for yarn install to @navikt scope
         shell: bash
@@ -26,10 +26,10 @@ jobs:
       - name: Export dataset
         run: cd aksel.nav.no/website && SANITY_PREVIEW_TOKEN=${{secrets.SANITY_DATASET_EDITOR_TOKEN}} yarn backup
       - name: Upload GCP bucket
-        uses: "google-github-actions/auth@v0"
+        uses: "google-github-actions/auth@v2"
         with:
           credentials_json: "${{ secrets.gcp_credentials_prod }}"
-      - uses: "google-github-actions/upload-cloud-storage@v0"
+      - uses: "google-github-actions/upload-cloud-storage@v2"
         with:
           path: ./aksel.nav.no/website
           destination: "aksel-website-prod/backups"

.github/workflows/chromatic.yml

@@ -17,32 +17,23 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  visual_regression_test:
+  chromatic:
     if: ${{ !contains(github.event.pull_request.labels.*.name, 'ignore-chromatic') }}
-    name: "visual regression test (chromatic)"
     runs-on: ubuntu-latest
     permissions:
       issues: write
       pull-requests: write
       contents: write
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: "20"
+          node-version: lts/*
           cache: yarn
 
-      - name: Restore cache
-        uses: actions/cache@v3
-        with:
-          path: "**/node_modules"
-          key: ${{ runner.os }}-visual-regression-test-${{ github.sha }}
-          restore-keys: |
-            ${{ runner.os }}-visual-regression-test-
-
       - name: Install dependencies
         run: yarn
 
@@ -50,13 +41,13 @@ jobs:
         run: yarn boot
 
       - name: Chromatic
-        uses: chromaui/action@v1
+        uses: chromaui/action@latest
         id: chromatic_tests
         continue-on-error: true
         with:
           autoAcceptChanges: "main"
           token: ${{ secrets.GITHUB_TOKEN }}
-          projectToken: x3xqdfgkujg
+          projectToken: chpt_1dc4af6a1c8cc48
           exitZeroOnChanges: false
           buildScriptName: "build:storybook-chromatic"
           onlyChanged: true

.github/workflows/ci.yml

@@ -16,13 +16,13 @@ jobs:
     permissions:
       pull-requests: "write"
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: "20"
+          node-version: lts/*
           cache: yarn
       - name: set-env for yarn install to @navikt scope
         shell: bash
@@ -37,5 +37,8 @@ jobs:
       - name: Lint
         run: yarn lint
 
+      - name: Validate example code
+        run: yarn validate:eksempler
+
       - name: Test
         run: yarn test

.github/workflows/e2e.yml

@@ -15,10 +15,10 @@ jobs:
     container:
       image: mcr.microsoft.com/playwright:v1.35.1-jammy
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: "20"
+          node-version: lts/*
           cache: yarn
       - name: set-env for yarn install to @navikt scope
         shell: bash
@@ -42,7 +42,7 @@ jobs:
 
       - name: Run Playwright tests
         run: yarn workspace website e2e:ci-full
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-report

.github/workflows/push-to-cdn.yaml

@@ -17,7 +17,7 @@ jobs:
       id-token: "write"
 
     steps:
-      - uses: "actions/checkout@v3"
+      - uses: "actions/checkout@v4"
 
       - id: upload
         uses: nais/deploy/actions/cdn-upload/v2@master

.github/workflows/release.yml

@@ -22,13 +22,13 @@ jobs:
       packages: "write"
       pull-requests: "write"
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: "20"
+          node-version: lts/*
           cache: yarn
       - name: set-env for yarn install to @navikt scope
         shell: bash

.github/workflows/stale.yml

@@ -0,0 +1,29 @@
+# https://github.com/actions/stale
+name: Mark stale issues
+
+on:
+  schedule:
+    - cron: "31 3 * * *"
+  workflow_dispatch:
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+
+    steps:
+      - uses: actions/stale@v9
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          days-before-issue-stale: 120
+          days-before-pr-stale: -1
+          days-before-close: 30
+          any-of-labels: "Besvart"
+          stale-issue-message: |-
+            Hei! Det ser ut som det ikke har vært aktivitet her på en stund. Etter 30 dager vil saken bli lukket automatisk.
+
+            Om saken fortsatt er relevant eller du har oppdateringer, vil en kommentar hindre at den lukkes. Du kan alltids åpne den igjen hvis det skulle være nødvendig!
+          stale-issue-label: "no-issue-activity"
+          ascending: true
+          operations-per-run: 200

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

@@ -9,14 +9,14 @@ jobs:
       contents: "read"
       id-token: "write"
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 1
       - uses: denoland/setup-deno@v1
         with:
           deno-version: v1.x
       - name: Restore cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: "**/node_modules"
           key: ${{ runner.os }}-build-${{ github.sha }}

.storybook/main.ts

@@ -88,17 +88,18 @@ export default {
     const { mergeConfig } = await import("vite");
 
     // The TsconfigPathsPlugin is only used to silence errors when importing nextjs components, but the imports does not acutally work.
+    const tsConfigPathsPluginOpts = { root: "aksel.nav.no/website/" };
 
     return mergeConfig(config, {
       plugins:
         configType === "PRODUCTION"
           ? [
-              TsconfigPathsPlugin(),
+              TsconfigPathsPlugin(tsConfigPathsPluginOpts),
               turbosnap({
                 rootDir: config.root ?? process.cwd(),
               }),
             ]
-          : [TsconfigPathsPlugin()],
+          : [TsconfigPathsPlugin(tsConfigPathsPluginOpts)],
     });
   },
 } satisfies StorybookConfig;

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @navikt/aksel-icons
 
+## 6.15.0
+
+### Minor Changes
+
+- Icons: New icon-series for 'SplitHorizontal' and 'SplitVertical' ([#3072](https://github.com/navikt/aksel/pull/3072))
+
+## 6.14.0
+
+## 6.13.0
+
+## 6.12.0
+
+### Minor Changes
+
+- Icons: New icon ChildHairEyes ([#3020](https://github.com/navikt/aksel/pull/3020))
+
+### Patch Changes
+
+- Icons: FigureCombination icon adjusted ([#3031](https://github.com/navikt/aksel/pull/3031))
+
+## 6.11.0
+
+## 6.10.1
+
+### Patch Changes
+
+- Icons: Added back support for sourcemapping. ([#2978](https://github.com/navikt/aksel/pull/2978))
+
 ## 6.10.0
 
 ## 6.9.0

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

@@ -1,7 +1,10 @@
 export function paginate(arr, size) {
   return arr.reduce((acc, val, i) => {
     let idx = Math.floor(i / size);
-    let page = acc[idx] || (acc[idx] = []);
+    if (!acc[idx]) {
+      acc[idx] = [];
+    }
+    let page = acc[idx];
     page.push(val);
 
     return acc;

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

@@ -2,7 +2,10 @@ const path = require("path");
 
 const defaultIndexTemplate = (paths) => {
   const exportEntries = paths.map((filePath) => {
-    const basename = path.basename(filePath, path.extname(filePath));
+    const basename = path.basename(
+      filePath.originalPath,
+      path.extname(filePath.originalPath),
+    );
     return `export { default as ${basename}Icon } from './${basename}'`;
   });
 

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

@@ -120,8 +120,8 @@ const App = () => {
             onChange={(v) => setToggle(v as any)}
             variant="neutral"
           >
-            <ToggleGroup.Item value="stroke">Stroke</ToggleGroup.Item>
-            <ToggleGroup.Item value="fill">Fill</ToggleGroup.Item>
+            <ToggleGroup.Item value="stroke" label="Stroke" />
+            <ToggleGroup.Item value="fill" label="Fill" />
           </ToggleGroup>
         </div>
         <div className="form-search">

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

@@ -8,5 +8,5 @@ keywords:
   - back
   - tilbake
 variant: Stroke
-updated_at: 21.05.2024
+updated_at: 31.05.2024
 created_at: 07.03.2023

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

@@ -9,5 +9,5 @@ keywords:
   - frem
   - fram
 variant: Stroke
-updated_at: 21.05.2024
+updated_at: 10.06.2024
 created_at: 07.03.2023

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

@@ -12,5 +12,5 @@ keywords:
   - ombestemt
   - back
 variant: Stroke
-updated_at: 10.01.2024
+updated_at: 11.06.2024
 created_at: 07.03.2023

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

@@ -10,5 +10,5 @@ keywords:
   - close
   - lukke
 variant: Stroke
-updated_at: 02.05.2024
+updated_at: 06.06.2024
 created_at: 07.03.2023

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

@@ -14,5 +14,5 @@ keywords:
   - opptak
   - gjenopptak
 variant: Stroke
-updated_at: 17.04.2024
+updated_at: 31.05.2024
 created_at: 07.03.2023

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

@@ -15,5 +15,5 @@ keywords:
   - fullføring
   - validering
 variant: Stroke
-updated_at: 17.04.2024
+updated_at: 10.06.2024
 created_at: 07.03.2023

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

@@ -10,5 +10,5 @@ keywords:
   - åpner
   - mer
 variant: Stroke
-updated_at: 21.05.2024
+updated_at: 19.06.2024
 created_at: 07.03.2023

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

@@ -6,5 +6,5 @@ keywords:
   - venstre
   - side
 variant: Stroke
-updated_at: 24.04.2024
+updated_at: 29.05.2024
 created_at: 07.03.2023

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

@@ -6,5 +6,5 @@ keywords:
   - høyre
   - side
 variant: Stroke
-updated_at: 17.04.2024
+updated_at: 10.06.2024
 created_at: 07.03.2023

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

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.651 3.94427C8.68476 4.52559 7.25 6.34524 7.25 8.5C7.25 11.1234 9.37665 13.25 12 13.25C14.6234 13.25 16.75 11.1234 16.75 8.5C16.75 6.98351 16.0393 5.63301 14.9329 4.76335C14.9538 5.10864 14.9022 5.44954 14.7891 5.75643C14.1895 7.38197 12.1053 7.74555 10.677 6.5063C10.3641 6.23484 10.3305 5.76115 10.602 5.44829C10.8734 5.13543 11.3471 5.10186 11.66 5.37331C12.4681 6.07443 13.2206 5.67424 13.3817 5.23739C13.5006 4.91494 13.4405 4.49643 13.124 4.20959C12.8111 3.92606 12.1541 3.61035 10.651 3.94427ZM12 2.25C8.54822 2.25 5.75 5.04822 5.75 8.5C5.75 11.9518 8.54822 14.75 12 14.75C15.4518 14.75 18.25 11.9518 18.25 8.5C18.25 5.04822 15.4518 2.25 12 2.25ZM10.5 8.75C10.0858 8.75 9.75 9.08579 9.75 9.5C9.75 9.91421 10.0858 10.25 10.5 10.25H10.51C10.9242 10.25 11.26 9.91421 11.26 9.5C11.26 9.08579 10.9242 8.75 10.51 8.75H10.5ZM12.75 9.5C12.75 9.08579 13.0858 8.75 13.5 8.75H13.51C13.9242 8.75 14.26 9.08579 14.26 9.5C14.26 9.91421 13.9242 10.25 13.51 10.25H13.5C13.0858 10.25 12.75 9.91421 12.75 9.5ZM9.34835 18.3484C10.0516 17.6451 11.0054 17.25 12 17.25C12.9946 17.25 13.9484 17.6451 14.6516 18.3483C15.3549 19.0516 15.75 20.0054 15.75 21C15.75 21.4142 16.0858 21.75 16.5 21.75C16.9142 21.75 17.25 21.4142 17.25 21C17.25 19.6076 16.6969 18.2723 15.7123 17.2877C14.7277 16.3031 13.3924 15.75 12 15.75C10.6076 15.75 9.27226 16.3031 8.28769 17.2877C7.30312 18.2723 6.75 19.6076 6.75 21C6.75 21.4142 7.08579 21.75 7.5 21.75C7.91421 21.75 8.25 21.4142 8.25 21C8.25 20.0054 8.64509 19.0516 9.34835 18.3484Z" fill="#23262A"/>
+</svg>

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

@@ -0,0 +1,12 @@
+name: ChildHairEyes
+category: People
+sub_category: Children
+keywords:
+  - human
+  - menneske
+  - øyne
+  - barn
+  - baby
+variant: Stroke
+updated_at: 20.06.2024
+created_at: 20.06.2024

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

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.7365 4.51074C14.9187 4.01666 14.9409 3.43431 14.7577 2.88768C16.8265 3.90652 18.25 6.036 18.25 8.49796C18.25 11.9497 15.4518 14.748 12 14.748C8.54822 14.748 5.75 11.9497 5.75 8.49796C5.75 5.62729 7.68536 3.20864 10.3225 2.47564L10.3228 2.4771C11.98 2.10394 12.8426 2.42231 13.2398 2.78233C13.6388 3.14395 13.7136 3.67177 13.5637 4.07821C13.3388 4.68809 12.3735 5.11262 11.4336 4.29706C11.1728 4.07085 10.7781 4.09882 10.5519 4.35954C10.3257 4.62027 10.3537 5.015 10.6144 5.24122C12.0712 6.50522 14.1463 6.11119 14.7365 4.51074ZM10.5 8.74796C10.0858 8.74796 9.75 9.08374 9.75 9.49796C9.75 9.91217 10.0858 10.248 10.5 10.248H10.51C10.9242 10.248 11.26 9.91217 11.26 9.49796C11.26 9.08374 10.9242 8.74796 10.51 8.74796H10.5ZM12.75 9.49796C12.75 9.08374 13.0858 8.74796 13.5 8.74796H13.51C13.9242 8.74796 14.26 9.08374 14.26 9.49796C14.26 9.91217 13.9242 10.248 13.51 10.248H13.5C13.0858 10.248 12.75 9.91217 12.75 9.49796ZM12 15.748C10.6076 15.748 9.27226 16.3011 8.28769 17.2856C7.30312 18.2702 6.75 19.6056 6.75 20.998C6.75 21.1969 6.82902 21.3876 6.96967 21.5283C7.11032 21.6689 7.30109 21.748 7.5 21.748L16.5 21.748C16.6989 21.748 16.8897 21.6689 17.0303 21.5283C17.171 21.3876 17.25 21.1969 17.25 20.998C17.25 19.6056 16.6969 18.2702 15.7123 17.2856C14.7277 16.3011 13.3924 15.748 12 15.748Z" fill="#23262A"/>
+</svg>

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

@@ -0,0 +1,12 @@
+name: ChildHairEyesFill
+category: People
+sub_category: Children
+keywords:
+  - human
+  - menneske
+  - øyne
+  - barn
+  - baby
+variant: Fill
+updated_at: 20.06.2024
+created_at: 20.06.2024

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

@@ -8,5 +8,5 @@ keywords:
   - gutt
   - barn
 variant: Stroke
-updated_at: 16.01.2024
+updated_at: 20.06.2024
 created_at: 16.01.2024

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

@@ -8,5 +8,5 @@ keywords:
   - gutt
   - barn
 variant: Fill
-updated_at: 16.01.2024
+updated_at: 20.06.2024
 created_at: 16.01.2024

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

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.75C11.3096 3.75 10.75 4.30964 10.75 5C10.75 5.69036 11.3096 6.25 12 6.25C12.6904 6.25 13.25 5.69036 13.25 5C13.25 4.30964 12.6904 3.75 12 3.75ZM9.25 5C9.25 3.48122 10.4812 2.25 12 2.25C13.5188 2.25 14.75 3.48122 14.75 5C14.75 6.51878 13.5188 7.75 12 7.75C10.4812 7.75 9.25 6.51878 9.25 5ZM12.75 9C12.75 8.58579 13.0858 8.25 13.5 8.25H14.847C15.912 8.25 16.73 9.19323 16.5794 10.2475L15.7425 16.1061C15.6897 16.4756 15.3732 16.75 15 16.75H14.25V21C14.25 21.4142 13.9142 21.75 13.5 21.75C13.0858 21.75 12.75 21.4142 12.75 21V16C12.75 15.5858 13.0858 15.25 13.5 15.25H14.3495L15.0945 10.0354C15.116 9.88475 14.9991 9.75 14.847 9.75H13.5C13.0858 9.75 12.75 9.41421 12.75 9ZM9.96929 9.91592C10.0048 9.81642 10.0991 9.75 10.2047 9.75H10.5C10.9142 9.75 11.25 9.41421 11.25 9C11.25 8.58579 10.9142 8.25 10.5 8.25H10.2047C9.46515 8.25 8.80542 8.71492 8.55668 9.41141L6.2937 15.7477C6.21167 15.9774 6.24645 16.2327 6.38694 16.432C6.52744 16.6314 6.75611 16.75 7 16.75H9.75V21C9.75 21.4142 10.0858 21.75 10.5 21.75C10.9142 21.75 11.25 21.4142 11.25 21V16C11.25 15.5858 10.9142 15.25 10.5 15.25H8.06426L9.96929 9.91592Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.55 3.75C11.8596 3.75 11.3 4.30964 11.3 5C11.3 5.69036 11.8596 6.25 12.55 6.25C13.2404 6.25 13.8 5.69036 13.8 5C13.8 4.30964 13.2404 3.75 12.55 3.75ZM9.8 5C9.8 3.48122 11.0312 2.25 12.55 2.25C14.0688 2.25 15.3 3.48122 15.3 5C15.3 6.51878 14.0688 7.75 12.55 7.75C11.0312 7.75 9.8 6.51878 9.8 5ZM13.3 9C13.3 8.58579 13.6358 8.25 14.05 8.25H16.05C16.4642 8.25 16.8 8.58579 16.8 9V16.1061C16.8 16.5203 16.4642 16.8561 16.05 16.8561H14.8V21C14.8 21.4142 14.4642 21.75 14.05 21.75C13.6358 21.75 13.3 21.4142 13.3 21V16.1061C13.3 15.6919 13.6358 15.3561 14.05 15.3561H15.3V9.75H14.05C13.6358 9.75 13.3 9.41421 13.3 9ZM10.5193 9.91592C10.5548 9.81642 10.6491 9.75 10.7547 9.75H11.05C11.4642 9.75 11.8 9.41421 11.8 9C11.8 8.58579 11.4642 8.25 11.05 8.25H10.7547C10.0152 8.25 9.35542 8.71492 9.10668 9.41141L6.8437 15.7477C6.76167 15.9774 6.79645 16.2327 6.93695 16.432C7.07744 16.6314 7.30611 16.75 7.55001 16.75H10.3V21C10.3 21.4142 10.6358 21.75 11.05 21.75C11.4642 21.75 11.8 21.4142 11.8 21V16C11.8 15.5858 11.4642 15.25 11.05 15.25H8.61426L10.5193 9.91592Z" fill="#23262A"/>
 </svg>

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

@@ -7,6 +7,7 @@ keywords:
   - trans
   - intetkjønn
   - hen
+  - person
 variant: Stroke
-updated_at: 04.12.2023
+updated_at: 25.06.2024
 created_at: 07.03.2023

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

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9.25 5C9.25 3.48122 10.4812 2.25 12 2.25C13.5188 2.25 14.75 3.48122 14.75 5C14.75 6.51878 13.5188 7.75 12 7.75C10.4812 7.75 9.25 6.51878 9.25 5ZM13.5 8.25C13.3011 8.25 13.1103 8.32902 12.9697 8.46967C12.829 8.61032 12.75 8.80109 12.75 9V21C12.75 21.4142 13.0858 21.75 13.5 21.75C13.9142 21.75 14.25 21.4142 14.25 21V16.75H15C15.3732 16.75 15.6897 16.4756 15.7425 16.1061L16.5794 10.2475C16.73 9.19323 15.912 8.25 14.847 8.25H13.5ZM8.55668 9.41141C8.80542 8.71492 9.46515 8.25 10.2047 8.25H10.5C10.9142 8.25 11.25 8.58579 11.25 9L11.25 21C11.25 21.4142 10.9142 21.75 10.5 21.75C10.0858 21.75 9.75 21.4142 9.75 21V16.75H7C6.75611 16.75 6.52744 16.6314 6.38694 16.432C6.24645 16.2327 6.21167 15.9774 6.2937 15.7477L8.55668 9.41141Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.8 5C9.8 3.48122 11.0312 2.25 12.55 2.25C14.0688 2.25 15.3 3.48122 15.3 5C15.3 6.51878 14.0688 7.75 12.55 7.75C11.0312 7.75 9.8 6.51878 9.8 5ZM13.3 9C13.3 8.58579 13.6358 8.25 14.05 8.25H16.05C16.4642 8.25 16.8 8.58579 16.8 9V16C16.8 16.4142 16.4642 16.75 16.05 16.75H14.8V21C14.8 21.4142 14.4642 21.75 14.05 21.75C13.6358 21.75 13.3 21.4142 13.3 21V9ZM9.10668 9.41141C9.35542 8.71492 10.0152 8.25 10.7547 8.25H11.05C11.4642 8.25 11.8 8.58579 11.8 9L11.8 21C11.8 21.4142 11.4642 21.75 11.05 21.75C10.6358 21.75 10.3 21.4142 10.3 21V16.75H7.55001C7.30611 16.75 7.07744 16.6314 6.93695 16.432C6.79645 16.2327 6.76167 15.9774 6.8437 15.7477L9.10668 9.41141Z" fill="#23262A"/>
 </svg>

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

@@ -7,6 +7,7 @@ keywords:
   - trans
   - intetkjønn
   - hen
+  - person
 variant: Fill
-updated_at: 04.12.2023
+updated_at: 25.06.2024
 created_at: 07.03.2023

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

@@ -9,5 +9,5 @@ keywords:
   - herre
   - han
 variant: Stroke
-updated_at: 04.12.2023
+updated_at: 20.06.2024
 created_at: 07.03.2023

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

@@ -9,5 +9,5 @@ keywords:
   - herre
   - han
 variant: Fill
-updated_at: 04.12.2023
+updated_at: 20.06.2024
 created_at: 07.03.2023

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

@@ -8,5 +8,5 @@ keywords:
   - female
   - hun
 variant: Stroke
-updated_at: 04.12.2023
+updated_at: 20.06.2024
 created_at: 07.03.2023

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

@@ -8,5 +8,5 @@ keywords:
   - female
   - hun
 variant: Fill
-updated_at: 04.12.2023
+updated_at: 20.06.2024
 created_at: 07.03.2023

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

@@ -13,5 +13,5 @@ keywords:
   - organisering
   - sosiale medier
 variant: Stroke
-updated_at: 05.01.2024
+updated_at: 05.06.2024
 created_at: 07.03.2023

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

@@ -13,5 +13,5 @@ keywords:
   - papir
   - kontorrekvisita
 variant: Stroke
-updated_at: 03.05.2024
+updated_at: 12.06.2024
 created_at: 07.03.2023

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

@@ -4,5 +4,5 @@ sub_category: Figure
 keywords:
   - silhuett
 variant: Stroke
-updated_at: 04.12.2023
+updated_at: 20.06.2024
 created_at: 07.03.2023

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

@@ -4,5 +4,5 @@ sub_category: Figure
 keywords:
   - silhuett
 variant: Fill
-updated_at: 04.12.2023
+updated_at: 20.06.2024
 created_at: 07.03.2023

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

@@ -0,0 +1,8 @@
+<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="M20.5 8H16.5V6.5H20.75C21.4404 6.5 22 7.05964 22 7.75V16.25C22 16.9404 21.4404 17.5 20.75 17.5H16.5V16H20.5V8Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 8H7.5V6.5H3.25C2.55964 6.5 2 7.05964 2 7.75V16.25C2 16.9404 2.55964 17.5 3.25 17.5H7.5V16H3.5V8Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 6C11.5858 6 11.25 5.66421 11.25 5.25V3.75C11.25 3.33579 11.5858 3 12 3C12.4142 3 12.75 3.33579 12.75 3.75V5.25C12.75 5.66421 12.4142 6 12 6Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 11C11.5858 11 11.25 10.6642 11.25 10.25V8.75C11.25 8.33579 11.5858 8 12 8C12.4142 8 12.75 8.33579 12.75 8.75V10.25C12.75 10.6642 12.4142 11 12 11Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 16C11.5858 16 11.25 15.6642 11.25 15.25V13.75C11.25 13.3358 11.5858 13 12 13C12.4142 13 12.75 13.3358 12.75 13.75V15.25C12.75 15.6642 12.4142 16 12 16Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 21C11.5858 21 11.25 20.6642 11.25 20.25V18.75C11.25 18.3358 11.5858 18 12 18C12.4142 18 12.75 18.3358 12.75 18.75V20.25C12.75 20.6642 12.4142 21 12 21Z" fill="#23262A"/>
+</svg>

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

@@ -0,0 +1,14 @@
+name: SplitHorizontal
+category: Interface
+sub_category: Design
+keywords:
+  - splitt
+  - split
+  - del
+  - divide
+  - horisontal
+  - horisontalt
+  - horizontal
+variant: Stroke
+updated_at: 06.08.2024
+created_at: 06.08.2024

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

@@ -0,0 +1,8 @@
+<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="M16 6.5H20.75C21.4404 6.5 22 7.05964 22 7.75V16.25C22 16.9404 21.4404 17.5 20.75 17.5H16V6.5Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 6.5H3.25C2.55964 6.5 2 7.05964 2 7.75V16.25C2 16.9404 2.55964 17.5 3.25 17.5H8V6.5Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 6C11.5858 6 11.25 5.66421 11.25 5.25V3.75C11.25 3.33579 11.5858 3 12 3C12.4142 3 12.75 3.33579 12.75 3.75V5.25C12.75 5.66421 12.4142 6 12 6Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 11C11.5858 11 11.25 10.6642 11.25 10.25V8.75C11.25 8.33579 11.5858 8 12 8C12.4142 8 12.75 8.33579 12.75 8.75V10.25C12.75 10.6642 12.4142 11 12 11Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 16C11.5858 16 11.25 15.6642 11.25 15.25V13.75C11.25 13.3358 11.5858 13 12 13C12.4142 13 12.75 13.3358 12.75 13.75V15.25C12.75 15.6642 12.4142 16 12 16Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 21C11.5858 21 11.25 20.6642 11.25 20.25V18.75C11.25 18.3358 11.5858 18 12 18C12.4142 18 12.75 18.3358 12.75 18.75V20.25C12.75 20.6642 12.4142 21 12 21Z" fill="#23262A"/>
+</svg>

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

@@ -0,0 +1,14 @@
+name: SplitHorizontalFill
+category: Interface
+sub_category: Design
+keywords:
+  - splitt
+  - split
+  - del
+  - divide
+  - horisontal
+  - horisontalt
+  - horizontal
+variant: Fill
+updated_at: 06.08.2024
+created_at: 06.08.2024

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

@@ -0,0 +1,8 @@
+<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="M16 20.5V16.5H17.5V20.75C17.5 21.4404 16.9404 22 16.25 22H7.75C7.05964 22 6.5 21.4404 6.5 20.75L6.5 16.5H8V20.5H16Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 3.5V7.5H17.5V3.25C17.5 2.55964 16.9404 2 16.25 2L7.75 2C7.05965 2 6.5 2.55964 6.5 3.25L6.5 7.5H8L8 3.5L16 3.5Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 12C18 11.5858 18.3358 11.25 18.75 11.25L20.25 11.25C20.6642 11.25 21 11.5858 21 12C21 12.4142 20.6642 12.75 20.25 12.75L18.75 12.75C18.3358 12.75 18 12.4142 18 12Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 12C13 11.5858 13.3358 11.25 13.75 11.25H15.25C15.6642 11.25 16 11.5858 16 12C16 12.4142 15.6642 12.75 15.25 12.75H13.75C13.3358 12.75 13 12.4142 13 12Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 12C8 11.5858 8.33579 11.25 8.75 11.25H10.25C10.6642 11.25 11 11.5858 11 12C11 12.4142 10.6642 12.75 10.25 12.75H8.75C8.33579 12.75 8 12.4142 8 12Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 12C3 11.5858 3.33579 11.25 3.75 11.25H5.25C5.66421 11.25 6 11.5858 6 12C6 12.4142 5.66421 12.75 5.25 12.75H3.75C3.33579 12.75 3 12.4142 3 12Z" fill="#23262A"/>
+</svg>

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

@@ -0,0 +1,14 @@
+name: SplitVertical
+category: Interface
+sub_category: Design
+keywords:
+  - splitt
+  - split
+  - del
+  - divide
+  - vertikal
+  - vertikalt
+  - vertical
+variant: Stroke
+updated_at: 06.08.2024
+created_at: 06.08.2024

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

@@ -0,0 +1,8 @@
+<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="M17.5 16V20.75C17.5 21.4404 16.9404 22 16.25 22H7.75C7.05964 22 6.5 21.4404 6.5 20.75L6.5 16H17.5Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 8V3.25C17.5 2.55965 16.9404 2 16.25 2L7.75 2C7.05965 2 6.5 2.55964 6.5 3.25L6.5 8L17.5 8Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 12C18 11.5858 18.3358 11.25 18.75 11.25L20.25 11.25C20.6642 11.25 21 11.5858 21 12C21 12.4142 20.6642 12.75 20.25 12.75L18.75 12.75C18.3358 12.75 18 12.4142 18 12Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 12C13 11.5858 13.3358 11.25 13.75 11.25H15.25C15.6642 11.25 16 11.5858 16 12C16 12.4142 15.6642 12.75 15.25 12.75H13.75C13.3358 12.75 13 12.4142 13 12Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 12C8 11.5858 8.33579 11.25 8.75 11.25H10.25C10.6642 11.25 11 11.5858 11 12C11 12.4142 10.6642 12.75 10.25 12.75H8.75C8.33579 12.75 8 12.4142 8 12Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 12C3 11.5858 3.33579 11.25 3.75 11.25H5.25C5.66421 11.25 6 11.5858 6 12C6 12.4142 5.66421 12.75 5.25 12.75H3.75C3.33579 12.75 3 12.4142 3 12Z" fill="#23262A"/>
+</svg>

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

@@ -0,0 +1,14 @@
+name: SplitVerticalFill
+category: Interface
+sub_category: Design
+keywords:
+  - splitt
+  - split
+  - del
+  - divide
+  - vertikal
+  - vertikalt
+  - vertical
+variant: Fill
+updated_at: 06.08.2024
+created_at: 06.08.2024

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

@@ -15,5 +15,5 @@ keywords:
   - avvis
   - avslå
 variant: Stroke
-updated_at: 15.04.2024
+updated_at: 13.06.2024
 created_at: 07.03.2023

@navikt/aksel-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-icons",
-  "version": "6.10.0",
+  "version": "6.15.0",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/ikoner",
   "repository": {
@@ -52,10 +52,11 @@
   },
   "files": [
     "dist/*",
+    "src",
     "!**/*.tsbuildinfo"
   ],
   "scripts": {
-    "create-icons": "svgr --no-prettier --silent --index-template config/index-template.js --out-dir src icons && prettier --write ./src",
+    "create-icons": "svgr --no-prettier --silent --index-template config/index-template.js --out-dir src icons && yarn prettier --write ./src",
     "parse-svg": "node -e 'require(\"./config/parse-svg.js\").main()'",
     "copy": "copyfiles util/* src",
     "update-metadata": "node config/metadata.js",
@@ -67,7 +68,7 @@
     "test:watch": "vitest watch"
   },
   "devDependencies": {
-    "@svgr/cli": "6.5.1",
+    "@svgr/cli": "8.1.0",
     "adm-zip": "^0.5.10",
     "concurrently": "7.2.1",
     "copyfiles": "^2.4.1",
@@ -78,6 +79,7 @@
     "js-yaml": "^4.1.0",
     "lodash.camelcase": "4.3.0",
     "lodash.startcase": "4.4.0",
+    "prettier": "3.1.1",
     "react": "^18.0.0",
     "rehype-parse": "8.0.4",
     "tsc-alias": "1.8.8",

@navikt/aksel-stylelint/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @navikt/aksel-stylelint
 
+## 6.15.0
+
+## 6.14.0
+
+## 6.13.0
+
+## 6.12.0
+
+## 6.11.0
+
+## 6.10.1
+
 ## 6.10.0
 
 ## 6.9.0

@navikt/aksel-stylelint/package.json

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

@navikt/aksel/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @navikt/aksel
 
+## 6.15.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@6.15.0
+
+## 6.14.0
+
+### Patch Changes
+
+- Updated dependencies [[`8fd183cc9`](https://github.com/navikt/aksel/commit/8fd183cc909a1f27a0a9f496415d280c1207a479)]:
+  - @navikt/ds-css@6.14.0
+
+## 6.13.0
+
+### Patch Changes
+
+- Updated dependencies [[`7c644cd9b`](https://github.com/navikt/aksel/commit/7c644cd9b1237c13295e9e4b416307efba030e9a)]:
+  - @navikt/ds-css@6.13.0
+
+## 6.12.0
+
+### Patch Changes
+
+- Updated dependencies [[`23ea3232f`](https://github.com/navikt/aksel/commit/23ea3232fab71fdca29d2f97f279fa4962c440c0), [`b38789b98`](https://github.com/navikt/aksel/commit/b38789b98d7e60eaf79a73433c6378f8644ee825)]:
+  - @navikt/ds-css@6.12.0
+
+## 6.11.0
+
+### Patch Changes
+
+- Updated dependencies [[`d5818a5e6`](https://github.com/navikt/aksel/commit/d5818a5e6070337d4d2884d68916dd8584e33806), [`1b927d639`](https://github.com/navikt/aksel/commit/1b927d6396a36abe6282d88f357e4d5eb8a7f366), [`96ed611e1`](https://github.com/navikt/aksel/commit/96ed611e15bae7877b9516f9c4541a188c6f8222)]:
+  - @navikt/ds-css@6.11.0
+
+## 6.10.1
+
+### Patch Changes
+
+- Updated dependencies [[`334627061`](https://github.com/navikt/aksel/commit/334627061a5aa1a9af0e3118b7a69e1df784c35f)]:
+  - @navikt/ds-css@6.10.1
+
 ## 6.10.0
 
 ### Patch Changes

@navikt/aksel/package.json

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

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

@@ -36,7 +36,9 @@ export default function transformer(file: JSCodeshift, api) {
     let foundName: string = "";
 
     getImportSpecifier(j, root, name, "@navikt/ds-tokens/dist/tokens").forEach(
-      (x) => (foundName = x.node.imported.name),
+      (x) => {
+        foundName = x.node.imported.name;
+      },
     );
 
     if (name === foundName) {

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,45 @@
 # @navikt/ds-css
 
+## 6.15.0
+
+## 6.14.0
+
+### Minor Changes
+
+- Fonts: Added built-in support for cyrillic, cyrillic-ext and latin-ext ([#3044](https://github.com/navikt/aksel/pull/3044))
+
+## 6.13.0
+
+### Minor Changes
+
+- Modal: New prop `placement` for anchoring the modal to the top of the viewport. ([#3033](https://github.com/navikt/aksel/pull/3033))
+
+## 6.12.0
+
+### Minor Changes
+
+- Primitives: Added support for padding, paddingInline, paddingBlock, margin, marginInline, marginBlock, width, minWidth, maxWidth, height, minHeight, maxHeight, position, inset, top, right, left, bottom, overflow, overflowX, overflowY, flexBasis, flexGrow, flexShrink to Box, HGrid and Stack. ([#3003](https://github.com/navikt/aksel/pull/3003))
+
+### Patch Changes
+
+- Alert: Fix alignment, add prop for toggling content max-width, and adjust title on close icon. ([#3007](https://github.com/navikt/aksel/pull/3007))
+
+## 6.11.0
+
+### Patch Changes
+
+- CopyButton: Icon is now 20px for size small and xsmall. ([#2977](https://github.com/navikt/aksel/pull/2977))
+
+- Button: Updated icon size for size="small" to 1.25rem. ([#2984](https://github.com/navikt/aksel/pull/2984))
+
+- List: Changed List.Item to BodyLong, changed Item spacing from 1rem to 0.5rem. ([#2979](https://github.com/navikt/aksel/pull/2979))
+
+## 6.10.1
+
+### Patch Changes
+
+- :lipstick: Remove bottom margin on last item in Stepper and adjust FormProgress accordingly ([#2971](https://github.com/navikt/aksel/pull/2971))
+
 ## 6.10.0
 
 ### Minor Changes
@@ -489,7 +529,7 @@
 
 ### Minor Changes
 
-- HGrid: Ny komponent 'HGrid' er ute i Beta: [Dokumentasjon](https://aksel.nav.no/komponenter/core/hgrid) ([#1838](https://github.com/navikt/aksel/pull/1838))
+- HGrid: Ny komponent 'HGrid' er ute i Beta: [Dokumentasjon](https://aksel.nav.no/komponenter/primitives/hgrid) ([#1838](https://github.com/navikt/aksel/pull/1838))
 
 ### Patch Changes
 

@navikt/core/css/alert.css

@@ -7,7 +7,11 @@
   align-items: center;
 }
 
-.navds-alert__wrapper {
+.navds-alert--small.navds-alert--close-button {
+  align-items: flex-start;
+}
+
+.navds-alert__wrapper--maxwidth {
   max-width: 43.5rem;
 }
 

@navikt/core/css/baseline/baseline.css

@@ -17,7 +17,7 @@
 
 body,
 :host {
-  font-family: var(--a-font-family, "Source Sans Pro", Arial, sans-serif);
+  font-family: var(--a-font-family, "Source Sans 3", "Source Sans Pro", Arial, sans-serif);
   line-height: 1.333;
   font-size: 1.125rem;
 }

@navikt/core/css/baseline/fonts.css

@@ -1,28 +1,129 @@
+/* cyrillic-ext */
+@font-face {
+  font-family: "Source Sans 3";
+  font-style: italic;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3/italic-cyrillic-ext.woff2) format("woff2");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+  font-family: "Source Sans 3";
+  font-style: italic;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3/italic-cyrillic.woff2) format("woff2");
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: "Source Sans 3";
+  font-style: italic;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3/italic-latin-ext.woff2) format("woff2");
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
+    U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: "Source Sans 3";
+  font-style: italic;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3/italic-latin.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+  font-family: "Source Sans 3";
+  font-style: normal;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3/normal-cyrillic-ext.woff2) format("woff2");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+  font-family: "Source Sans 3";
+  font-style: normal;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3/normal-cyrillic.woff2) format("woff2");
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: "Source Sans 3";
+  font-style: normal;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3/normal-latin-ext.woff2) format("woff2");
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
+    U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: "Source Sans 3";
+  font-style: normal;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3/normal-latin.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* Legacy support */
+
+/* latin-ext */
 @font-face {
   font-family: "Source Sans Pro";
   font-style: italic;
-  font-weight: 400;
+  font-weight: 400 600;
   font-display: swap;
-  src: url("https://cdn.nav.no/aksel/fonts/SourceSans3-italic.woff2") format("woff2");
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3/italic-latin-ext.woff2) format("woff2");
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
+    U+2C60-2C7F, U+A720-A7FF;
 }
+
+/* latin */
 @font-face {
   font-family: "Source Sans Pro";
   font-style: italic;
-  font-weight: 600;
+  font-weight: 400 600;
   font-display: swap;
-  src: url("https://cdn.nav.no/aksel/fonts/SourceSans3-italic-latin-semibold.woff2") format("woff2");
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3/italic-latin.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+
+/* latin-ext */
 @font-face {
   font-family: "Source Sans Pro";
   font-style: normal;
-  font-weight: 400;
+  font-weight: 400 600;
   font-display: swap;
-  src: url("https://cdn.nav.no/aksel/fonts/SourceSans3-normal.woff2") format("woff2");
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3/normal-latin-ext.woff2) format("woff2");
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
+    U+2C60-2C7F, U+A720-A7FF;
 }
+
+/* latin */
 @font-face {
   font-family: "Source Sans Pro";
   font-style: normal;
-  font-weight: 600;
+  font-weight: 400 600;
   font-display: swap;
-  src: url("https://cdn.nav.no/aksel/fonts/SourceSans3-normal.woff2") format("woff2");
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3/normal-latin.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }

@navikt/core/css/button.css

@@ -53,6 +53,7 @@
 
   padding: var(--ac-button-padding-small, var(--__ac-button-padding));
   min-height: 2rem;
+  min-width: 2rem;
 }
 
 .navds-button--xsmall {
@@ -112,11 +113,7 @@
   margin: 0;
 }
 
-.navds-button--small .navds-button__icon {
-  --ac-button-icon-margin: -2px;
-}
-
-.navds-button--xsmall .navds-button__icon {
+:where(.navds-button--xsmall, .navds-button--small) .navds-button__icon {
   --ac-button-icon-margin: -2px;
 
   font-size: 1.25rem;

@navikt/core/css/copybutton.css

@@ -51,6 +51,7 @@
   --__ac-copybutton-padding: var(--a-spacing-1) var(--a-spacing-3) var(--a-spacing-1) var(--a-spacing-2);
 
   min-height: 2rem;
+  min-width: 2rem;
 }
 
 .navds-copybutton--small.navds-copybutton--icon-right {
@@ -61,6 +62,7 @@
   --__ac-copybutton-padding: var(--a-spacing-05) var(--a-spacing-2) var(--a-spacing-05) var(--a-spacing-1);
 
   min-height: 1.5rem;
+  min-width: 1.5rem;
 }
 
 .navds-copybutton--xsmall.navds-copybutton--icon-right {
@@ -79,15 +81,15 @@
   --__ac-copybutton-padding: var(--a-spacing-05);
 }
 
-.navds-copybutton--xsmall .navds-copybutton__icon {
-  font-size: 1.25rem;
-}
-
 .navds-copybutton__icon {
   font-size: 1.5rem;
   display: flex;
 }
 
+:where(.navds-copybutton--xsmall, .navds-copybutton--small) .navds-copybutton__icon {
+  font-size: 1.25rem;
+}
+
 .navds-copybutton__icon:first-of-type {
   margin-left: -0.25rem;
 }

@navikt/core/css/form/form-progress.css

@@ -47,6 +47,6 @@
 .navds-form-progress__stepper {
   border: 2px solid var(--a-border-subtle);
   border-radius: var(--a-border-radius-large);
-  padding: var(--a-spacing-2) var(--a-spacing-4) 0;
+  padding: var(--a-spacing-2) var(--a-spacing-4);
   margin-top: var(--a-spacing-1);
 }

@navikt/core/css/list.css

@@ -15,15 +15,7 @@
 }
 
 .navds-list li {
-  margin-block-end: var(--a-spacing-4);
-}
-
-.navds-list--small li {
-  margin-block-end: var(--a-spacing-3);
-}
-
-.navds-list--nested li {
-  margin-block-end: var(--a-spacing-3);
+  margin-block-end: var(--a-spacing-2);
 }
 
 .navds-list:last-child > ul > li:last-child,
@@ -50,25 +42,25 @@
 .navds-list .navds-list__item-marker--bullet {
   display: flex;
   align-items: center;
-  height: var(--a-font-line-height-large);
+  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-medium);
+  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-large);
+  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-medium);
+  height: var(--a-font-line-height-large);
 }
 
 .navds-list__item-marker--icon svg {
@@ -93,10 +85,10 @@
   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-large);
+  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-medium);
+  line-height: var(--a-font-line-height-large);
 }

@navikt/core/css/modal.css

@@ -59,17 +59,22 @@
 
 @media (min-width: 480px) {
   .navds-modal {
-    max-width: calc(100% - 6px - 2em);
+    max-width: calc(100% - 2em);
   }
 
   .navds-modal--autowidth {
-    max-width: min(700px, calc(100% - 6px - 2em));
+    max-width: min(700px, calc(100% - 2em));
   }
 }
 
 @media (min-height: 480px) {
   .navds-modal {
-    max-height: calc(100% - 6px - 2em);
+    max-height: calc(100% - 2em);
+  }
+
+  .navds-modal--top {
+    margin-top: 2em;
+    max-height: calc(100% - 4em);
   }
 }
 

@navikt/core/css/package.json

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

@navikt/core/css/pagination.css

@@ -1,3 +1,7 @@
+.navds-pagination {
+  position: relative;
+}
+
 .navds-pagination__list {
   margin: 0;
   padding: 0;

@navikt/core/css/primitives/base.css

@@ -0,0 +1,777 @@
+.navds-r-p {
+  --__ac-r-p-xs: initial;
+  --__ac-r-p-sm: var(--__ac-r-p-xs);
+  --__ac-r-p-md: var(--__ac-r-p-sm);
+  --__ac-r-p-lg: var(--__ac-r-p-md);
+  --__ac-r-p-xl: var(--__ac-r-p-lg);
+  --__ac-r-p-2xl: var(--__ac-r-p-xl);
+  --__ac-r-padding: var(--__ac-r-p-xs);
+
+  padding: var(--__ac-r-padding);
+}
+
+.navds-r-pi {
+  --__ac-r-pi-xs: initial;
+  --__ac-r-pi-sm: var(--__ac-r-pi-xs);
+  --__ac-r-pi-md: var(--__ac-r-pi-sm);
+  --__ac-r-pi-lg: var(--__ac-r-pi-md);
+  --__ac-r-pi-xl: var(--__ac-r-pi-lg);
+  --__ac-r-pi-2xl: var(--__ac-r-pi-xl);
+  --__ac-r-pi: var(--__ac-r-pi-xs);
+
+  padding-inline: var(--__ac-r-pi, var(--__ac-r-padding));
+}
+
+.navds-r-pb {
+  --__ac-r-pb-xs: initial;
+  --__ac-r-pb-sm: var(--__ac-r-pb-xs);
+  --__ac-r-pb-md: var(--__ac-r-pb-sm);
+  --__ac-r-pb-lg: var(--__ac-r-pb-md);
+  --__ac-r-pb-xl: var(--__ac-r-pb-lg);
+  --__ac-r-pb-2xl: var(--__ac-r-pb-xl);
+  --__ac-r-pb: var(--__ac-r-pb-xs);
+
+  padding-block: var(--__ac-r-pb, var(--__ac-r-padding));
+}
+
+.navds-r-m {
+  --__ac-r-m-xs: initial;
+  --__ac-r-m-sm: var(--__ac-r-m-xs);
+  --__ac-r-m-md: var(--__ac-r-m-sm);
+  --__ac-r-m-lg: var(--__ac-r-m-md);
+  --__ac-r-m-xl: var(--__ac-r-m-lg);
+  --__ac-r-m-2xl: var(--__ac-r-m-xl);
+  --__ac-r-margin: var(--__ac-r-m-xs);
+
+  margin: var(--__ac-r-margin);
+}
+
+.navds-r-mi {
+  --__ac-r-mi-xs: initial;
+  --__ac-r-mi-sm: var(--__ac-r-mi-xs);
+  --__ac-r-mi-md: var(--__ac-r-mi-sm);
+  --__ac-r-mi-lg: var(--__ac-r-mi-md);
+  --__ac-r-mi-xl: var(--__ac-r-mi-lg);
+  --__ac-r-mi-2xl: var(--__ac-r-mi-xl);
+  --__ac-r-mi: var(--__ac-r-mi-xs);
+
+  margin-inline: var(--__ac-r-mi, var(--__ac-r-margin));
+}
+
+.navds-r-mb {
+  --__ac-r-mb-xs: initial;
+  --__ac-r-mb-sm: var(--__ac-r-mb-xs);
+  --__ac-r-mb-md: var(--__ac-r-mb-sm);
+  --__ac-r-mb-lg: var(--__ac-r-mb-md);
+  --__ac-r-mb-xl: var(--__ac-r-mb-lg);
+  --__ac-r-mb-2xl: var(--__ac-r-mb-xl);
+  --__ac-r-mb: var(--__ac-r-mb-xs);
+
+  margin-block: var(--__ac-r-mb, var(--__ac-r-margin));
+}
+
+.navds-r-w {
+  --__ac-r-w-xs: initial;
+  --__ac-r-w-sm: var(--__ac-r-w-xs);
+  --__ac-r-w-md: var(--__ac-r-w-sm);
+  --__ac-r-w-lg: var(--__ac-r-w-md);
+  --__ac-r-w-xl: var(--__ac-r-w-lg);
+  --__ac-r-w-2xl: var(--__ac-r-w-xl);
+  --__ac-r-w: var(--__ac-r-w-xs);
+
+  width: var(--__ac-r-w);
+}
+
+.navds-r-minw {
+  --__ac-r-minw-xs: initial;
+  --__ac-r-minw-sm: var(--__ac-r-minw-xs);
+  --__ac-r-minw-md: var(--__ac-r-minw-sm);
+  --__ac-r-minw-lg: var(--__ac-r-minw-md);
+  --__ac-r-minw-xl: var(--__ac-r-minw-lg);
+  --__ac-r-minw-2xl: var(--__ac-r-minw-xl);
+  --__ac-r-minw: var(--__ac-r-minw-xs);
+
+  min-width: var(--__ac-r-minw);
+}
+
+.navds-r-maxw {
+  --__ac-r-maxw-xs: initial;
+  --__ac-r-maxw-sm: var(--__ac-r-maxw-xs);
+  --__ac-r-maxw-md: var(--__ac-r-maxw-sm);
+  --__ac-r-maxw-lg: var(--__ac-r-maxw-md);
+  --__ac-r-maxw-xl: var(--__ac-r-maxw-lg);
+  --__ac-r-maxw-2xl: var(--__ac-r-maxw-xl);
+  --__ac-r-maxw: var(--__ac-r-maxw-xs);
+
+  max-width: var(--__ac-r-maxw);
+}
+
+.navds-r-h {
+  --__ac-r-h-xs: initial;
+  --__ac-r-h-sm: var(--__ac-r-h-xs);
+  --__ac-r-h-md: var(--__ac-r-h-sm);
+  --__ac-r-h-lg: var(--__ac-r-h-md);
+  --__ac-r-h-xl: var(--__ac-r-h-lg);
+  --__ac-r-h-2xl: var(--__ac-r-h-xl);
+  --__ac-r-h: var(--__ac-r-h-xs);
+
+  height: var(--__ac-r-h);
+}
+
+.navds-r-minh {
+  --__ac-r-minh-xs: initial;
+  --__ac-r-minh-sm: var(--__ac-r-minh-xs);
+  --__ac-r-minh-md: var(--__ac-r-minh-sm);
+  --__ac-r-minh-lg: var(--__ac-r-minh-md);
+  --__ac-r-minh-xl: var(--__ac-r-minh-lg);
+  --__ac-r-minh-2xl: var(--__ac-r-minh-xl);
+  --__ac-r-minh: var(--__ac-r-minh-xs);
+
+  min-height: var(--__ac-r-minh);
+}
+
+.navds-r-maxh {
+  --__ac-r-maxh-xs: initial;
+  --__ac-r-maxh-sm: var(--__ac-r-maxh-xs);
+  --__ac-r-maxh-md: var(--__ac-r-maxh-sm);
+  --__ac-r-maxh-lg: var(--__ac-r-maxh-md);
+  --__ac-r-maxh-xl: var(--__ac-r-maxh-lg);
+  --__ac-r-maxh-2xl: var(--__ac-r-maxh-xl);
+  --__ac-r-maxh: var(--__ac-r-maxh-xs);
+
+  max-height: var(--__ac-r-maxh);
+}
+
+.navds-r-position {
+  --__ac-r-position-xs: initial;
+  --__ac-r-position-sm: var(--__ac-r-position-xs);
+  --__ac-r-position-md: var(--__ac-r-position-sm);
+  --__ac-r-position-lg: var(--__ac-r-position-md);
+  --__ac-r-position-xl: var(--__ac-r-position-lg);
+  --__ac-r-position-2xl: var(--__ac-r-position-xl);
+  --__ac-r-position: var(--__ac-r-position-xs);
+
+  position: var(--__ac-r-position);
+}
+
+.navds-r-inset {
+  --__ac-r-inset-xs: initial;
+  --__ac-r-inset-sm: var(--__ac-r-inset-xs);
+  --__ac-r-inset-md: var(--__ac-r-inset-sm);
+  --__ac-r-inset-lg: var(--__ac-r-inset-md);
+  --__ac-r-inset-xl: var(--__ac-r-inset-lg);
+  --__ac-r-inset-2xl: var(--__ac-r-inset-xl);
+  --__ac-r-inset: var(--__ac-r-inset-xs);
+
+  inset: var(--__ac-r-inset);
+}
+
+.navds-r-top {
+  --__ac-r-top-xs: initial;
+  --__ac-r-top-sm: var(--__ac-r-top-xs);
+  --__ac-r-top-md: var(--__ac-r-top-sm);
+  --__ac-r-top-lg: var(--__ac-r-top-md);
+  --__ac-r-top-xl: var(--__ac-r-top-lg);
+  --__ac-r-top-2xl: var(--__ac-r-top-xl);
+  --__ac-r-top: var(--__ac-r-top-xs);
+
+  top: var(--__ac-r-top);
+}
+
+.navds-r-right {
+  --__ac-r-right-xs: initial;
+  --__ac-r-right-sm: var(--__ac-r-right-xs);
+  --__ac-r-right-md: var(--__ac-r-right-sm);
+  --__ac-r-right-lg: var(--__ac-r-right-md);
+  --__ac-r-right-xl: var(--__ac-r-right-lg);
+  --__ac-r-right-2xl: var(--__ac-r-right-xl);
+  --__ac-r-right: var(--__ac-r-right-xs);
+
+  right: var(--__ac-r-right);
+}
+
+.navds-r-bottom {
+  --__ac-r-bottom-xs: initial;
+  --__ac-r-bottom-sm: var(--__ac-r-bottom-xs);
+  --__ac-r-bottom-md: var(--__ac-r-bottom-sm);
+  --__ac-r-bottom-lg: var(--__ac-r-bottom-md);
+  --__ac-r-bottom-xl: var(--__ac-r-bottom-lg);
+  --__ac-r-bottom-2xl: var(--__ac-r-bottom-xl);
+  --__ac-r-bottom: var(--__ac-r-bottom-xs);
+
+  bottom: var(--__ac-r-bottom);
+}
+
+.navds-r-left {
+  --__ac-r-left-xs: initial;
+  --__ac-r-left-sm: var(--__ac-r-left-xs);
+  --__ac-r-left-md: var(--__ac-r-left-sm);
+  --__ac-r-left-lg: var(--__ac-r-left-md);
+  --__ac-r-left-xl: var(--__ac-r-left-lg);
+  --__ac-r-left-2xl: var(--__ac-r-left-xl);
+  --__ac-r-left: var(--__ac-r-left-xs);
+
+  left: var(--__ac-r-left);
+}
+
+.navds-r-overflow {
+  --__ac-r-overflow-xs: initial;
+  --__ac-r-overflow-sm: var(--__ac-r-overflow-xs);
+  --__ac-r-overflow-md: var(--__ac-r-overflow-sm);
+  --__ac-r-overflow-lg: var(--__ac-r-overflow-md);
+  --__ac-r-overflow-xl: var(--__ac-r-overflow-lg);
+  --__ac-r-overflow-2xl: var(--__ac-r-overflow-xl);
+  --__ac-r-overflow: var(--__ac-r-overflow-xs);
+
+  overflow: var(--__ac-r-overflow);
+}
+
+.navds-r-overflowx {
+  --__ac-r-overflowx-xs: initial;
+  --__ac-r-overflowx-sm: var(--__ac-r-overflowx-xs);
+  --__ac-r-overflowx-md: var(--__ac-r-overflowx-sm);
+  --__ac-r-overflowx-lg: var(--__ac-r-overflowx-md);
+  --__ac-r-overflowx-xl: var(--__ac-r-overflowx-lg);
+  --__ac-r-overflowx-2xl: var(--__ac-r-overflowx-xl);
+  --__ac-r-overflowx: var(--__ac-r-overflowx-xs);
+
+  overflow-x: var(--__ac-r-overflowx);
+}
+
+.navds-r-overflowy {
+  --__ac-r-overflowy-xs: initial;
+  --__ac-r-overflowy-sm: var(--__ac-r-overflowy-xs);
+  --__ac-r-overflowy-md: var(--__ac-r-overflowy-sm);
+  --__ac-r-overflowy-lg: var(--__ac-r-overflowy-md);
+  --__ac-r-overflowy-xl: var(--__ac-r-overflowy-lg);
+  --__ac-r-overflowy-2xl: var(--__ac-r-overflowy-xl);
+  --__ac-r-overflowy: var(--__ac-r-overflowy-xs);
+
+  overflow-y: var(--__ac-r-overflowy);
+}
+
+.navds-r-flex-basis {
+  --__ac-r-flex-basis-xs: initial;
+  --__ac-r-flex-basis-sm: var(--__ac-r-flex-basis-xs);
+  --__ac-r-flex-basis-md: var(--__ac-r-flex-basis-sm);
+  --__ac-r-flex-basis-lg: var(--__ac-r-flex-basis-md);
+  --__ac-r-flex-basis-xl: var(--__ac-r-flex-basis-lg);
+  --__ac-r-flex-basis-2xl: var(--__ac-r-flex-basis-xl);
+  --__ac-r-flex-basis: var(--__ac-r-flex-basis-xs);
+
+  flex-basis: var(--__ac-r-flex-basis);
+}
+
+.navds-r-flex-grow {
+  --__ac-r-flex-grow-xs: initial;
+  --__ac-r-flex-grow-sm: var(--__ac-r-flex-grow-xs);
+  --__ac-r-flex-grow-md: var(--__ac-r-flex-grow-sm);
+  --__ac-r-flex-grow-lg: var(--__ac-r-flex-grow-md);
+  --__ac-r-flex-grow-xl: var(--__ac-r-flex-grow-lg);
+  --__ac-r-flex-grow-2xl: var(--__ac-r-flex-grow-xl);
+  --__ac-r-flex-grow: var(--__ac-r-flex-grow-xs);
+
+  flex-grow: var(--__ac-r-flex-grow);
+}
+
+.navds-r-flex-shrink {
+  --__ac-r-flex-shrink-xs: initial;
+  --__ac-r-flex-shrink-sm: var(--__ac-r-flex-shrink-xs);
+  --__ac-r-flex-shrink-md: var(--__ac-r-flex-shrink-sm);
+  --__ac-r-flex-shrink-lg: var(--__ac-r-flex-shrink-md);
+  --__ac-r-flex-shrink-xl: var(--__ac-r-flex-shrink-lg);
+  --__ac-r-flex-shrink-2xl: var(--__ac-r-flex-shrink-xl);
+  --__ac-r-flex-shrink: var(--__ac-r-flex-shrink-xs);
+
+  flex-shrink: var(--__ac-r-flex-shrink);
+}
+
+@media (min-width: 480px) {
+  .navds-r-p {
+    --__ac-r-padding: var(--__ac-r-p-sm);
+  }
+
+  .navds-r-pi {
+    --__ac-r-pi: var(--__ac-r-pi-sm);
+  }
+
+  .navds-r-pb {
+    --__ac-r-pb: var(--__ac-r-pb-sm);
+  }
+
+  .navds-r-m {
+    --__ac-r-margin: var(--__ac-r-m-sm);
+  }
+
+  .navds-r-mi {
+    --__ac-r-mi: var(--__ac-r-mi-sm);
+  }
+
+  .navds-r-mb {
+    --__ac-r-mb: var(--__ac-r-mb-sm);
+  }
+
+  .navds-r-w {
+    --__ac-r-w: var(--__ac-r-w-sm);
+  }
+
+  .navds-r-minw {
+    --__ac-r-minw: var(--__ac-r-minw-sm);
+  }
+
+  .navds-r-maxw {
+    --__ac-r-maxw: var(--__ac-r-maxw-sm);
+  }
+
+  .navds-r-h {
+    --__ac-r-h: var(--__ac-r-h-sm);
+  }
+
+  .navds-r-minh {
+    --__ac-r-minh: var(--__ac-r-minh-sm);
+  }
+
+  .navds-r-maxh {
+    --__ac-r-maxh: var(--__ac-r-maxh-sm);
+  }
+
+  .navds-r-position {
+    --__ac-r-position: var(--__ac-r-position-sm);
+  }
+
+  .navds-r-inset {
+    --__ac-r-inset: var(--__ac-r-inset-sm);
+  }
+
+  .navds-r-top {
+    --__ac-r-top: var(--__ac-r-top-sm);
+  }
+
+  .navds-r-right {
+    --__ac-r-right: var(--__ac-r-right-sm);
+  }
+
+  .navds-r-bottom {
+    --__ac-r-bottom: var(--__ac-r-bottom-sm);
+  }
+
+  .navds-r-left {
+    --__ac-r-left: var(--__ac-r-left-sm);
+  }
+
+  .navds-r-overflow {
+    --__ac-r-overflow: var(--__ac-r-overflow-sm);
+  }
+
+  .navds-r-overflowx {
+    --__ac-r-overflowx: var(--__ac-r-overflowx-sm);
+  }
+
+  .navds-r-overflowy {
+    --__ac-r-overflowy: var(--__ac-r-overflowy-sm);
+  }
+
+  .navds-r-flex-basis {
+    --__ac-r-flex-basis: var(--__ac-r-flex-basis-sm);
+  }
+
+  .navds-r-flex-grow {
+    --__ac-r-flex-grow: var(--__ac-r-flex-grow-sm);
+  }
+
+  .navds-r-flex-shrink {
+    --__ac-r-flex-shrink: var(--__ac-r-flex-shrink-sm);
+  }
+}
+
+@media (min-width: 768px) {
+  .navds-r-p {
+    --__ac-r-padding: var(--__ac-r-p-md);
+  }
+
+  .navds-r-pi {
+    --__ac-r-pi: var(--__ac-r-pi-md);
+  }
+
+  .navds-r-pb {
+    --__ac-r-pb: var(--__ac-r-pb-md);
+  }
+
+  .navds-r-m {
+    --__ac-r-margin: var(--__ac-r-m-md);
+  }
+
+  .navds-r-mi {
+    --__ac-r-mi: var(--__ac-r-mi-md);
+  }
+
+  .navds-r-mb {
+    --__ac-r-mb: var(--__ac-r-mb-md);
+  }
+
+  .navds-r-w {
+    --__ac-r-w: var(--__ac-r-w-md);
+  }
+
+  .navds-r-minw {
+    --__ac-r-minw: var(--__ac-r-minw-md);
+  }
+
+  .navds-r-maxw {
+    --__ac-r-maxw: var(--__ac-r-maxw-md);
+  }
+
+  .navds-r-h {
+    --__ac-r-h: var(--__ac-r-h-md);
+  }
+
+  .navds-r-minh {
+    --__ac-r-minh: var(--__ac-r-minh-md);
+  }
+
+  .navds-r-maxh {
+    --__ac-r-maxh: var(--__ac-r-maxh-md);
+  }
+
+  .navds-r-position {
+    --__ac-r-position: var(--__ac-r-position-md);
+  }
+
+  .navds-r-inset {
+    --__ac-r-inset: var(--__ac-r-inset-md);
+  }
+
+  .navds-r-top {
+    --__ac-r-top: var(--__ac-r-top-md);
+  }
+
+  .navds-r-right {
+    --__ac-r-right: var(--__ac-r-right-md);
+  }
+
+  .navds-r-bottom {
+    --__ac-r-bottom: var(--__ac-r-bottom-md);
+  }
+
+  .navds-r-left {
+    --__ac-r-left: var(--__ac-r-left-md);
+  }
+
+  .navds-r-overflow {
+    --__ac-r-overflow: var(--__ac-r-overflow-md);
+  }
+
+  .navds-r-overflowx {
+    --__ac-r-overflowx: var(--__ac-r-overflowx-md);
+  }
+
+  .navds-r-overflowy {
+    --__ac-r-overflowy: var(--__ac-r-overflowy-md);
+  }
+
+  .navds-r-flex-basis {
+    --__ac-r-flex-basis: var(--__ac-r-flex-basis-md);
+  }
+
+  .navds-r-flex-grow {
+    --__ac-r-flex-grow: var(--__ac-r-flex-grow-md);
+  }
+
+  .navds-r-flex-shrink {
+    --__ac-r-flex-shrink: var(--__ac-r-flex-shrink-md);
+  }
+}
+
+@media (min-width: 1024px) {
+  .navds-r-p {
+    --__ac-r-padding: var(--__ac-r-p-lg);
+  }
+
+  .navds-r-pi {
+    --__ac-r-pi: var(--__ac-r-pi-lg);
+  }
+
+  .navds-r-pb {
+    --__ac-r-pb: var(--__ac-r-pb-lg);
+  }
+
+  .navds-r-m {
+    --__ac-r-margin: var(--__ac-r-m-lg);
+  }
+
+  .navds-r-mi {
+    --__ac-r-mi: var(--__ac-r-mi-lg);
+  }
+
+  .navds-r-mb {
+    --__ac-r-mb: var(--__ac-r-mb-lg);
+  }
+
+  .navds-r-w {
+    --__ac-r-w: var(--__ac-r-w-lg);
+  }
+
+  .navds-r-minw {
+    --__ac-r-minw: var(--__ac-r-minw-lg);
+  }
+
+  .navds-r-maxw {
+    --__ac-r-maxw: var(--__ac-r-maxw-lg);
+  }
+
+  .navds-r-h {
+    --__ac-r-h: var(--__ac-r-h-lg);
+  }
+
+  .navds-r-minh {
+    --__ac-r-minh: var(--__ac-r-minh-lg);
+  }
+
+  .navds-r-maxh {
+    --__ac-r-maxh: var(--__ac-r-maxh-lg);
+  }
+
+  .navds-r-position {
+    --__ac-r-position: var(--__ac-r-position-lg);
+  }
+
+  .navds-r-inset {
+    --__ac-r-inset: var(--__ac-r-inset-lg);
+  }
+
+  .navds-r-top {
+    --__ac-r-top: var(--__ac-r-top-lg);
+  }
+
+  .navds-r-right {
+    --__ac-r-right: var(--__ac-r-right-lg);
+  }
+
+  .navds-r-bottom {
+    --__ac-r-bottom: var(--__ac-r-bottom-lg);
+  }
+
+  .navds-r-left {
+    --__ac-r-left: var(--__ac-r-left-lg);
+  }
+
+  .navds-r-overflow {
+    --__ac-r-overflow: var(--__ac-r-overflow-lg);
+  }
+
+  .navds-r-overflowx {
+    --__ac-r-overflowx: var(--__ac-r-overflowx-lg);
+  }
+
+  .navds-r-overflowy {
+    --__ac-r-overflowy: var(--__ac-r-overflowy-lg);
+  }
+
+  .navds-r-flex-basis {
+    --__ac-r-flex-basis: var(--__ac-r-flex-basis-lg);
+  }
+
+  .navds-r-flex-grow {
+    --__ac-r-flex-grow: var(--__ac-r-flex-grow-lg);
+  }
+
+  .navds-r-flex-shrink {
+    --__ac-r-flex-shrink: var(--__ac-r-flex-shrink-lg);
+  }
+}
+
+@media (min-width: 1280px) {
+  .navds-r-p {
+    --__ac-r-padding: var(--__ac-r-p-xl);
+  }
+
+  .navds-r-pi {
+    --__ac-r-pi: var(--__ac-r-pi-xl);
+  }
+
+  .navds-r-pb {
+    --__ac-r-pb: var(--__ac-r-pb-xl);
+  }
+
+  .navds-r-m {
+    --__ac-r-margin: var(--__ac-r-m-xl);
+  }
+
+  .navds-r-mi {
+    --__ac-r-mi: var(--__ac-r-mi-xl);
+  }
+
+  .navds-r-mb {
+    --__ac-r-mb: var(--__ac-r-mb-xl);
+  }
+
+  .navds-r-w {
+    --__ac-r-w: var(--__ac-r-w-xl);
+  }
+
+  .navds-r-minw {
+    --__ac-r-minw: var(--__ac-r-minw-xl);
+  }
+
+  .navds-r-maxw {
+    --__ac-r-maxw: var(--__ac-r-maxw-xl);
+  }
+
+  .navds-r-h {
+    --__ac-r-h: var(--__ac-r-h-xl);
+  }
+
+  .navds-r-minh {
+    --__ac-r-minh: var(--__ac-r-minh-xl);
+  }
+
+  .navds-r-maxh {
+    --__ac-r-maxh: var(--__ac-r-maxh-xl);
+  }
+
+  .navds-r-position {
+    --__ac-r-position: var(--__ac-r-position-xl);
+  }
+
+  .navds-r-inset {
+    --__ac-r-inset: var(--__ac-r-inset-xl);
+  }
+
+  .navds-r-top {
+    --__ac-r-top: var(--__ac-r-top-xl);
+  }
+
+  .navds-r-right {
+    --__ac-r-right: var(--__ac-r-right-xl);
+  }
+
+  .navds-r-bottom {
+    --__ac-r-bottom: var(--__ac-r-bottom-xl);
+  }
+
+  .navds-r-left {
+    --__ac-r-left: var(--__ac-r-left-xl);
+  }
+
+  .navds-r-overflow {
+    --__ac-r-overflow: var(--__ac-r-overflow-xl);
+  }
+
+  .navds-r-overflowx {
+    --__ac-r-overflowx: var(--__ac-r-overflowx-xl);
+  }
+
+  .navds-r-overflowy {
+    --__ac-r-overflowy: var(--__ac-r-overflowy-xl);
+  }
+
+  .navds-r-flex-basis {
+    --__ac-r-flex-basis: var(--__ac-r-flex-basis-xl);
+  }
+
+  .navds-r-flex-grow {
+    --__ac-r-flex-grow: var(--__ac-r-flex-grow-xl);
+  }
+
+  .navds-r-flex-shrink {
+    --__ac-r-flex-shrink: var(--__ac-r-flex-shrink-xl);
+  }
+}
+
+@media (min-width: 1440px) {
+  .navds-r-p {
+    --__ac-r-padding: var(--__ac-r-p-2xl);
+  }
+
+  .navds-r-pi {
+    --__ac-r-pi: var(--__ac-r-pi-2xl);
+  }
+
+  .navds-r-pb {
+    --__ac-r-pb: var(--__ac-r-pb-2xl);
+  }
+
+  .navds-r-m {
+    --__ac-r-margin: var(--__ac-r-m-2xl);
+  }
+
+  .navds-r-mi {
+    --__ac-r-mi: var(--__ac-r-mi-2xl);
+  }
+
+  .navds-r-mb {
+    --__ac-r-mb: var(--__ac-r-mb-2xl);
+  }
+
+  .navds-r-w {
+    --__ac-r-w: var(--__ac-r-w-2xl);
+  }
+
+  .navds-r-minw {
+    --__ac-r-minw: var(--__ac-r-minw-2xl);
+  }
+
+  .navds-r-maxw {
+    --__ac-r-maxw: var(--__ac-r-maxw-2xl);
+  }
+
+  .navds-r-h {
+    --__ac-r-h: var(--__ac-r-h-2xl);
+  }
+
+  .navds-r-minh {
+    --__ac-r-minh: var(--__ac-r-minh-2xl);
+  }
+
+  .navds-r-maxh {
+    --__ac-r-maxh: var(--__ac-r-maxh-2xl);
+  }
+
+  .navds-r-position {
+    --__ac-r-position: var(--__ac-r-position-2xl);
+  }
+
+  .navds-r-inset {
+    --__ac-r-inset: var(--__ac-r-inset-2xl);
+  }
+
+  .navds-r-top {
+    --__ac-r-top: var(--__ac-r-top-2xl);
+  }
+
+  .navds-r-right {
+    --__ac-r-right: var(--__ac-r-right-2xl);
+  }
+
+  .navds-r-bottom {
+    --__ac-r-bottom: var(--__ac-r-bottom-2xl);
+  }
+
+  .navds-r-left {
+    --__ac-r-left: var(--__ac-r-left-2xl);
+  }
+
+  .navds-r-overflow {
+    --__ac-r-overflow: var(--__ac-r-overflow-2xl);
+  }
+
+  .navds-r-overflowx {
+    --__ac-r-overflowx: var(--__ac-r-overflowx-2xl);
+  }
+
+  .navds-r-overflowy {
+    --__ac-r-overflowy: var(--__ac-r-overflowy-2xl);
+  }
+
+  .navds-r-flex-basis {
+    --__ac-r-flex-basis: var(--__ac-r-flex-basis-2xl);
+  }
+
+  .navds-r-flex-grow {
+    --__ac-r-flex-grow: var(--__ac-r-flex-grow-2xl);
+  }
+
+  .navds-r-flex-shrink {
+    --__ac-r-flex-shrink: var(--__ac-r-flex-shrink-2xl);
+  }
+}

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

@@ -1,29 +1,23 @@
-.navds-box {
-  --__ac-box-padding-xs: initial;
-  --__ac-box-padding-sm: var(--__ac-box-padding-xs);
-  --__ac-box-padding-md: var(--__ac-box-padding-sm);
-  --__ac-box-padding-lg: var(--__ac-box-padding-md);
-  --__ac-box-padding-xl: var(--__ac-box-padding-lg);
-  --__ac-box-padding-2xl: var(--__ac-box-padding-xl);
-  --__ac-box-padding-inline-xs: initial;
-  --__ac-box-padding-inline-sm: var(--__ac-box-padding-inline-xs);
-  --__ac-box-padding-inline-md: var(--__ac-box-padding-inline-sm);
-  --__ac-box-padding-inline-lg: var(--__ac-box-padding-inline-md);
-  --__ac-box-padding-inline-xl: var(--__ac-box-padding-inline-lg);
-  --__ac-box-padding-inline-2xl: var(--__ac-box-padding-inline-xl);
-  --__ac-box-padding-block-xs: initial;
-  --__ac-box-padding-block-sm: var(--__ac-box-padding-block-xs);
-  --__ac-box-padding-block-md: var(--__ac-box-padding-block-sm);
-  --__ac-box-padding-block-lg: var(--__ac-box-padding-block-md);
-  --__ac-box-padding-block-xl: var(--__ac-box-padding-block-lg);
-  --__ac-box-padding-block-2xl: var(--__ac-box-padding-block-xl);
-  --__ac-box-padding: var(--__ac-box-padding-xs);
-  --__ac-box-padding-inline: var(--__ac-box-padding-inline-xs);
-  --__ac-box-padding-block: var(--__ac-box-padding-block-xs);
+.navds-box-bg {
   --__ac-box-background: initial;
+
+  background-color: var(--__ac-box-background);
+}
+
+.navds-box-border-color {
   --__ac-box-border-color: initial;
-  --__ac-box-shadow: initial;
+
+  border-color: var(--__ac-box-border-color);
+}
+
+.navds-box-border-width {
   --__ac-box-border-width: initial;
+
+  border-style: solid;
+  border-width: var(--__ac-box-border-width, 0);
+}
+
+.navds-box-border-radius {
   --__ac-box-border-radius-xs: initial;
   --__ac-box-border-radius-sm: var(--__ac-box-border-radius-xs);
   --__ac-box-border-radius-md: var(--__ac-box-border-radius-sm);
@@ -32,57 +26,41 @@
   --__ac-box-border-radius-2xl: var(--__ac-box-border-radius-xl);
   --__ac-box-border-radius: var(--__ac-box-border-radius-xs);
 
-  padding-inline: var(--__ac-box-padding-inline, var(--__ac-box-padding));
-  padding-block: var(--__ac-box-padding-block, var(--__ac-box-padding));
-  background-color: var(--__ac-box-background);
-  border-style: solid;
-  border-color: var(--__ac-box-border-color);
   border-radius: var(--__ac-box-border-radius);
+}
+
+.navds-box-shadow {
+  --__ac-box-shadow: initial;
+
   box-shadow: var(--__ac-box-shadow);
-  border-width: var(--__ac-box-border-width, 0);
 }
 
 @media (min-width: 480px) {
-  .navds-box {
-    --__ac-box-padding: var(--__ac-box-padding-sm);
-    --__ac-box-padding-inline: var(--__ac-box-padding-inline-sm);
-    --__ac-box-padding-block: var(--__ac-box-padding-block-sm);
+  .navds-box-border-radius {
     --__ac-box-border-radius: var(--__ac-box-border-radius-sm);
   }
 }
 
 @media (min-width: 768px) {
-  .navds-box {
-    --__ac-box-padding: var(--__ac-box-padding-md);
-    --__ac-box-padding-inline: var(--__ac-box-padding-inline-md);
-    --__ac-box-padding-block: var(--__ac-box-padding-block-md);
+  .navds-box-border-radius {
     --__ac-box-border-radius: var(--__ac-box-border-radius-md);
   }
 }
 
 @media (min-width: 1024px) {
-  .navds-box {
-    --__ac-box-padding: var(--__ac-box-padding-lg);
-    --__ac-box-padding-inline: var(--__ac-box-padding-inline-lg);
-    --__ac-box-padding-block: var(--__ac-box-padding-block-lg);
+  .navds-box-border-radius {
     --__ac-box-border-radius: var(--__ac-box-border-radius-lg);
   }
 }
 
 @media (min-width: 1280px) {
-  .navds-box {
-    --__ac-box-padding: var(--__ac-box-padding-xl);
-    --__ac-box-padding-inline: var(--__ac-box-padding-inline-xl);
-    --__ac-box-padding-block: var(--__ac-box-padding-block-xl);
+  .navds-box-border-radius {
     --__ac-box-border-radius: var(--__ac-box-border-radius-xl);
   }
 }
 
 @media (min-width: 1440px) {
-  .navds-box {
-    --__ac-box-padding: var(--__ac-box-padding-2xl);
-    --__ac-box-padding-inline: var(--__ac-box-padding-inline-2xl);
-    --__ac-box-padding-block: var(--__ac-box-padding-block-2xl);
+  .navds-box-border-radius {
     --__ac-box-border-radius: var(--__ac-box-border-radius-2xl);
   }
 }

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

@@ -6,6 +6,12 @@
   --__ac-hgrid-columns-xl: var(--__ac-hgrid-columns-lg);
   --__ac-hgrid-columns-2xl: var(--__ac-hgrid-columns-xl);
   --__ac-hgrid-columns: var(--__ac-hgrid-columns-xs);
+
+  display: grid;
+  grid-template-columns: var(--__ac-hgrid-columns);
+}
+
+.navds-hgrid-gap {
   --__ac-hgrid-gap-xs: initial;
   --__ac-hgrid-gap-sm: var(--__ac-hgrid-gap-xs);
   --__ac-hgrid-gap-md: var(--__ac-hgrid-gap-sm);
@@ -13,17 +19,22 @@
   --__ac-hgrid-gap-xl: var(--__ac-hgrid-gap-lg);
   --__ac-hgrid-gap-2xl: var(--__ac-hgrid-gap-xl);
   --__ac-hgrid-gap: var(--__ac-hgrid-gap-xs);
+
+  gap: var(--__ac-hgrid-gap);
+}
+
+.navds-hgrid-align {
   --__ac-hgrid-align: initial;
 
-  display: grid;
-  grid-template-columns: var(--__ac-hgrid-columns);
-  gap: var(--__ac-hgrid-gap);
   align-items: var(--__ac-hgrid-align);
 }
 
 @media (min-width: 480px) {
   .navds-hgrid {
     --__ac-hgrid-columns: var(--__ac-hgrid-columns-sm);
+  }
+
+  .navds-hgrid-gap {
     --__ac-hgrid-gap: var(--__ac-hgrid-gap-sm);
   }
 }
@@ -31,6 +42,9 @@
 @media (min-width: 768px) {
   .navds-hgrid {
     --__ac-hgrid-columns: var(--__ac-hgrid-columns-md);
+  }
+
+  .navds-hgrid-gap {
     --__ac-hgrid-gap: var(--__ac-hgrid-gap-md);
   }
 }
@@ -38,6 +52,9 @@
 @media (min-width: 1024px) {
   .navds-hgrid {
     --__ac-hgrid-columns: var(--__ac-hgrid-columns-lg);
+  }
+
+  .navds-hgrid-gap {
     --__ac-hgrid-gap: var(--__ac-hgrid-gap-lg);
   }
 }
@@ -45,6 +62,9 @@
 @media (min-width: 1280px) {
   .navds-hgrid {
     --__ac-hgrid-columns: var(--__ac-hgrid-columns-xl);
+  }
+
+  .navds-hgrid-gap {
     --__ac-hgrid-gap: var(--__ac-hgrid-gap-xl);
   }
 }
@@ -52,6 +72,9 @@
 @media (min-width: 1440px) {
   .navds-hgrid {
     --__ac-hgrid-columns: var(--__ac-hgrid-columns-2xl);
+  }
+
+  .navds-hgrid-gap {
     --__ac-hgrid-gap: var(--__ac-hgrid-gap-2xl);
   }
 }

@navikt/core/css/primitives/index.css

@@ -4,3 +4,4 @@
 @import "hgrid.css";
 @import "stack.css";
 @import "responsive.css";
+@import "base.css";

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

@@ -1,5 +1,8 @@
 .navds-stack {
-  --__ac-stack-wrap: initial;
+  display: flex;
+}
+
+.navds-stack-gap {
   --__ac-stack-gap-xs: initial;
   --__ac-stack-gap-sm: var(--__ac-stack-gap-xs);
   --__ac-stack-gap-md: var(--__ac-stack-gap-sm);
@@ -7,13 +10,11 @@
   --__ac-stack-gap-xl: var(--__ac-stack-gap-lg);
   --__ac-stack-gap-2xl: var(--__ac-stack-gap-xl);
   --__ac-stack-gap: var(--__ac-stack-gap-xs);
-  --__ac-stack-justify-xs: initial;
-  --__ac-stack-justify-sm: var(--__ac-stack-justify-xs);
-  --__ac-stack-justify-md: var(--__ac-stack-justify-sm);
-  --__ac-stack-justify-lg: var(--__ac-stack-justify-md);
-  --__ac-stack-justify-xl: var(--__ac-stack-justify-lg);
-  --__ac-stack-justify-2xl: var(--__ac-stack-justify-xl);
-  --__ac-stack-justify: var(--__ac-stack-justify-xs);
+
+  gap: var(--__ac-stack-gap);
+}
+
+.navds-stack-align {
   --__ac-stack-align-xs: initial;
   --__ac-stack-align-sm: var(--__ac-stack-align-xs);
   --__ac-stack-align-md: var(--__ac-stack-align-sm);
@@ -21,6 +22,23 @@
   --__ac-stack-align-xl: var(--__ac-stack-align-lg);
   --__ac-stack-align-2xl: var(--__ac-stack-align-xl);
   --__ac-stack-align: var(--__ac-stack-align-xs);
+
+  align-items: var(--__ac-stack-align);
+}
+
+.navds-stack-justify {
+  --__ac-stack-justify-xs: initial;
+  --__ac-stack-justify-sm: var(--__ac-stack-justify-xs);
+  --__ac-stack-justify-md: var(--__ac-stack-justify-sm);
+  --__ac-stack-justify-lg: var(--__ac-stack-justify-md);
+  --__ac-stack-justify-xl: var(--__ac-stack-justify-lg);
+  --__ac-stack-justify-2xl: var(--__ac-stack-justify-xl);
+  --__ac-stack-justify: var(--__ac-stack-justify-xs);
+
+  justify-content: var(--__ac-stack-justify);
+}
+
+.navds-stack-direction {
   --__ac-stack-direction-xs: initial;
   --__ac-stack-direction-sm: var(--__ac-stack-direction-xs);
   --__ac-stack-direction-md: var(--__ac-stack-direction-sm);
@@ -29,11 +47,11 @@
   --__ac-stack-direction-2xl: var(--__ac-stack-direction-xl);
   --__ac-stack-direction: var(--__ac-stack-direction-xs);
 
-  gap: var(--__ac-stack-gap);
-  display: flex;
-  align-items: var(--__ac-stack-align);
-  justify-content: var(--__ac-stack-justify);
-  flex-flow: var(--__ac-stack-direction) var(--__ac-stack-wrap);
+  flex-direction: var(--__ac-stack-direction);
+}
+
+.navds-stack-wrap {
+  flex-wrap: wrap;
 }
 
 .navds-stack__spacer {
@@ -48,46 +66,91 @@
 }
 
 @media (min-width: 480px) {
-  .navds-stack {
+  .navds-stack-gap {
     --__ac-stack-gap: var(--__ac-stack-gap-sm);
+  }
+
+  .navds-stack-align {
     --__ac-stack-align: var(--__ac-stack-align-sm);
+  }
+
+  .navds-stack-justify {
     --__ac-stack-justify: var(--__ac-stack-justify-sm);
+  }
+
+  .navds-stack-direction {
     --__ac-stack-direction: var(--__ac-stack-direction-sm);
   }
 }
 
 @media (min-width: 768px) {
-  .navds-stack {
+  .navds-stack-gap {
     --__ac-stack-gap: var(--__ac-stack-gap-md);
+  }
+
+  .navds-stack-align {
     --__ac-stack-align: var(--__ac-stack-align-md);
+  }
+
+  .navds-stack-justify {
     --__ac-stack-justify: var(--__ac-stack-justify-md);
+  }
+
+  .navds-stack-direction {
     --__ac-stack-direction: var(--__ac-stack-direction-md);
   }
 }
 
 @media (min-width: 1024px) {
-  .navds-stack {
+  .navds-stack-gap {
     --__ac-stack-gap: var(--__ac-stack-gap-lg);
+  }
+
+  .navds-stack-align {
     --__ac-stack-align: var(--__ac-stack-align-lg);
+  }
+
+  .navds-stack-justify {
     --__ac-stack-justify: var(--__ac-stack-justify-lg);
+  }
+
+  .navds-stack-direction {
     --__ac-stack-direction: var(--__ac-stack-direction-lg);
   }
 }
 
 @media (min-width: 1280px) {
-  .navds-stack {
+  .navds-stack-gap {
     --__ac-stack-gap: var(--__ac-stack-gap-xl);
+  }
+
+  .navds-stack-align {
     --__ac-stack-align: var(--__ac-stack-align-xl);
+  }
+
+  .navds-stack-justify {
     --__ac-stack-justify: var(--__ac-stack-justify-xl);
+  }
+
+  .navds-stack-direction {
     --__ac-stack-direction: var(--__ac-stack-direction-xl);
   }
 }
 
 @media (min-width: 1440px) {
-  .navds-stack {
+  .navds-stack-gap {
     --__ac-stack-gap: var(--__ac-stack-gap-2xl);
+  }
+
+  .navds-stack-align {
     --__ac-stack-align: var(--__ac-stack-align-2xl);
+  }
+
+  .navds-stack-justify {
     --__ac-stack-justify: var(--__ac-stack-justify-2xl);
+  }
+
+  .navds-stack-direction {
     --__ac-stack-direction: var(--__ac-stack-direction-2xl);
   }
 }

@navikt/core/css/stepper.css

@@ -70,6 +70,10 @@
   margin: calc(var(--navds-stepper-border-width) * -1) calc(var(--navds-stepper-border-width) * -1) 1.75rem;
 }
 
+.navds-stepper__item:last-child .navds-stepper__step {
+  margin-bottom: 0;
+}
+
 @media (forced-colors: active) {
   .navds-stepper__step {
     background-color: ButtonFace;

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,97 @@
 # @navikt/ds-react
 
+## 6.15.0
+
+### Patch Changes
+
+- Combobox: Can no longer remove options with backspace when shouldShowSelectedOptions is false ([#3076](https://github.com/navikt/aksel/pull/3076))
+
+- Refactored Combobox FilteredOptions ([#3073](https://github.com/navikt/aksel/pull/3073))
+
+- Updated dependencies [[`ea3e88146`](https://github.com/navikt/aksel/commit/ea3e881467d27d43464ff9d111369a6b8539f593)]:
+  - @navikt/aksel-icons@6.15.0
+  - @navikt/ds-tokens@6.15.0
+
+## 6.14.0
+
+### Minor Changes
+
+- Breaking change: Combobox.onChange now receive only value as argument, instead of ChangeEvent ([#2974](https://github.com/navikt/aksel/pull/2974))
+
+- Improved search in Combobox - find hits anywhere in the label ([#2974](https://github.com/navikt/aksel/pull/2974))
+
+### Patch Changes
+
+- Tabs, ToggleGroup: Rovingfocus now respects shift, alt, ctrl and meta-keys when navigating. ([#3041](https://github.com/navikt/aksel/pull/3041))
+
+- Prevent NullPointer when adding a new/custom option in Combobox single-select ([#3054](https://github.com/navikt/aksel/pull/3054))
+
+- Combobox: Entering an already selected option and pressing enter no longer removes it ([#3061](https://github.com/navikt/aksel/pull/3061))
+
+- Combobox: Description is now connected to the input field via aria-describedby ([#3065](https://github.com/navikt/aksel/pull/3065))
+
+- Prevent Escape in open Combobox from closing Modals ([#3053](https://github.com/navikt/aksel/pull/3053))
+
+- Updated dependencies [[`8fd183cc9`](https://github.com/navikt/aksel/commit/8fd183cc909a1f27a0a9f496415d280c1207a479)]:
+  - @navikt/ds-tokens@6.14.0
+  - @navikt/aksel-icons@6.14.0
+
+## 6.13.0
+
+### Minor Changes
+
+- Modal: New prop `placement` for anchoring the modal to the top of the viewport. ([#3033](https://github.com/navikt/aksel/pull/3033))
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@6.13.0
+  - @navikt/aksel-icons@6.13.0
+
+## 6.12.0
+
+### Minor Changes
+
+- Primitives: Added support for padding, paddingInline, paddingBlock, margin, marginInline, marginBlock, width, minWidth, maxWidth, height, minHeight, maxHeight, position, inset, top, right, left, bottom, overflow, overflowX, overflowY, flexBasis, flexGrow, flexShrink to Box, HGrid and Stack. ([#3003](https://github.com/navikt/aksel/pull/3003))
+
+### Patch Changes
+
+- ToggleGroup: Selecting already selected value now avoids sending extra event ([#3012](https://github.com/navikt/aksel/pull/3012))
+
+- Alert: Fix alignment, add prop for toggling content max-width, and adjust title on close icon. ([#3007](https://github.com/navikt/aksel/pull/3007))
+
+- Updated dependencies [[`ff8072e35`](https://github.com/navikt/aksel/commit/ff8072e352f4f84f802a6427e1692ff223af722c), [`f1d8e9c4d`](https://github.com/navikt/aksel/commit/f1d8e9c4d357226893da4fdc3feb8063d7d830bb)]:
+  - @navikt/aksel-icons@6.12.0
+  - @navikt/ds-tokens@6.12.0
+
+## 6.11.0
+
+### Minor Changes
+
+- FileUpload: Added description-prop for Item. ([#2975](https://github.com/navikt/aksel/pull/2975))
+
+- Pagination: Added prop for hidden heading. ([#2976](https://github.com/navikt/aksel/pull/2976))
+
+- ToggleGroup: Added props `icon` and `label` as a replacement for `children`. Children is marked as deprecated and will be removed in a future major-version. ([#2929](https://github.com/navikt/aksel/pull/2929))
+
+### Patch Changes
+
+- List: Changed List.Item to BodyLong, changed Item spacing from 1rem to 0.5rem. ([#2979](https://github.com/navikt/aksel/pull/2979))
+
+- Page: Removed surface-subtle from background-prop ([#2987](https://github.com/navikt/aksel/pull/2987))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@6.11.0
+  - @navikt/aksel-icons@6.11.0
+
+## 6.10.1
+
+### Patch Changes
+
+- Updated dependencies [[`2cd6b1a39`](https://github.com/navikt/aksel/commit/2cd6b1a3915388535523989c2e998081bc68206c)]:
+  - @navikt/aksel-icons@6.10.1
+  - @navikt/ds-tokens@6.10.1
+
 ## 6.10.0
 
 ### Minor Changes
@@ -1075,7 +1167,7 @@
 
 ### Minor Changes
 
-- HGrid: Ny komponent 'HGrid' er ute i Beta: [Dokumentasjon](https://aksel.nav.no/komponenter/core/hgrid) ([#1838](https://github.com/navikt/aksel/pull/1838))
+- HGrid: Ny komponent 'HGrid' er ute i Beta: [Dokumentasjon](https://aksel.nav.no/komponenter/primitives/hgrid) ([#1838](https://github.com/navikt/aksel/pull/1838))
 
 ### Patch Changes
 

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "6.10.0",
+  "version": "6.15.0",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -594,8 +594,8 @@
   "dependencies": {
     "@floating-ui/react": "0.25.4",
     "@floating-ui/react-dom": "^2.0.9",
-    "@navikt/aksel-icons": "^6.10.0",
-    "@navikt/ds-tokens": "^6.10.0",
+    "@navikt/aksel-icons": "^6.15.0",
+    "@navikt/ds-tokens": "^6.15.0",
     "clsx": "^2.1.0",
     "date-fns": "^3.0.0",
     "react-day-picker": "8.10.0"

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

@@ -16,7 +16,7 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   children: React.ReactNode;
   /**
-   * Changes colors and icon usage when changed.
+   * Level of severity. Changes colors and icon.
    */
   variant: "error" | "warning" | "info" | "success";
   /**
@@ -30,15 +30,20 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   fullWidth?: boolean;
   /**
-   * Removes background from Alert.
+   * Sets max-width on the content to 43.5rem.
+   * @default true
+   */
+  contentMaxWidth?: boolean;
+  /**
+   * Removes background, border and padding.
    * @default false
    */
   inline?: boolean;
   /**
-   * Removes close-button(X) when false.
+   * Adds a close-button (X).
    *
    * **Requires onClose to be set**.
-   * @default true
+   * @default false
    */
   closeButton?: boolean;
   /**
@@ -85,6 +90,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
       variant,
       size = "medium",
       fullWidth = false,
+      contentMaxWidth = true,
       inline = false,
       closeButton = false,
       onClose,
@@ -109,7 +115,14 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
         )}
       >
         <Icon variant={variant} className="navds-alert__icon" />
-        <BodyLong as="div" size={size} className="navds-alert__wrapper">
+        <BodyLong
+          as="div"
+          size={size}
+          className={cl(
+            "navds-alert__wrapper",
+            contentMaxWidth && "navds-alert__wrapper--maxwidth",
+          )}
+        >
           {children}
         </BodyLong>
         {closeButton && !inline && (
@@ -120,7 +133,15 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
               variant="tertiary-neutral"
               onClick={onClose}
               type="button"
-              icon={<XMarkIcon title="Lukk Alert" />}
+              icon={
+                <XMarkIcon
+                  title={
+                    ["error", "warning"].includes(variant)
+                      ? "Lukk varsel"
+                      : "Lukk melding"
+                  }
+                />
+              }
             />
           </div>
         )}

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

@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryFn, StoryObj } from "@storybook/react";
 import React from "react";
 import { VStack } from "../layout/stack";
 import { Link } from "../link";
-import { BodyLong, Heading as DsHeading } from "../typography";
+import { BodyLong, Heading } from "../typography";
 import Alert, { AlertProps } from "./Alert";
 
 const meta: Meta<typeof Alert> = {
@@ -25,11 +25,10 @@ const variants: AlertProps["variant"][] = [
 ];
 
 export const Controls: Story = {
-  render: (props) => <Alert {...props} />,
-
   args: {
     children: "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
     fullWidth: false,
+    contentMaxWidth: true,
     inline: false,
     variant: "info",
     size: "medium",
@@ -38,7 +37,7 @@ export const Controls: Story = {
   argTypes: {
     variant: {
       control: { type: "radio" },
-      options: ["info", "error", "warning", "success"],
+      options: variants,
     },
     size: {
       control: { type: "radio" },
@@ -47,28 +46,28 @@ export const Controls: Story = {
   },
 };
 
-export const Variants = () => {
+export const Variants: StoryFn = () => {
   return (
-    <div className="colgap">
+    <VStack gap="4">
       {variants.map((variant, i) => (
         <Alert key={variant} variant={variant}>
           {new Array(i + 1).fill(
-            "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
+            "Id elit esse enim reprehenderit enim nisi veniam nostrud. ",
           )}
         </Alert>
       ))}
       {variants.map((variant, i) => (
         <Alert key={variant} variant={variant} size="small">
           {new Array(i + 1).fill(
-            "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
+            "Id elit esse enim reprehenderit enim nisi veniam nostrud. ",
           )}
         </Alert>
       ))}
-    </div>
+    </VStack>
   );
 };
 
-export const FullWidth = () => {
+export const FullWidth: StoryFn = () => {
   return (
     <VStack gap="4">
       <Alert variant="info" fullWidth>
@@ -81,10 +80,16 @@ export const FullWidth = () => {
   );
 };
 
-export const Inline = () => {
+export const ContentMaxWidthOff: StoryFn = () => (
+  <Alert variant="info" contentMaxWidth={false}>
+    Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+    reprehenderit enim nisi.
+  </Alert>
+);
+
+export const Inline: StoryFn = () => {
   return (
     <VStack gap="4">
-      <h2>Inline</h2>
       <Alert variant="info" inline>
         Id elit esse enim reprehenderit enim nisi veniam nostrud.
       </Alert>
@@ -107,13 +112,13 @@ export const Inline = () => {
   );
 };
 
-export const Heading = () => {
+export const WithHeading: StoryFn = () => {
   return (
-    <div className="colgap">
+    <VStack gap="4">
       <Alert variant="info">
-        <DsHeading spacing size="small" level="3">
+        <Heading spacing size="small" level="3">
           Aliquip duis est in commodo pariatur
-        </DsHeading>
+        </Heading>
         <BodyLong>
           Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
           laboris ex. Labore ex occaecat proident qui qui fugiat magna. Fugiat
@@ -121,184 +126,90 @@ export const Heading = () => {
         </BodyLong>
       </Alert>
       <Alert variant="info" size="small">
-        <DsHeading spacing size="xsmall" level="3">
+        <Heading spacing size="xsmall" level="3">
           Aliquip duis est in commodo pariatur
-        </DsHeading>
+        </Heading>
         <BodyLong>
           Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
           laboris ex. Labore ex occaecat proident qui qui fugiat magna. Fugiat
           sint commodo consequat eu aute.
         </BodyLong>
       </Alert>
-    </div>
+    </VStack>
   );
 };
 
-export const CloseButton: Story = {
-  render: () => {
-    return (
-      <VStack gap="4">
-        <h2>CloseButton</h2>
-        <Alert variant="info" closeButton>
+export const CloseButton: StoryFn = () => {
+  return (
+    <VStack gap="4">
+      <Alert variant="info" closeButton>
+        Id elit esse enim reprehenderit enim nisi veniam nostrud.
+      </Alert>
+      <Alert variant="success" closeButton>
+        Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
+        enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+        reprehenderit enim nisi veniam nostrud. Id elit esse enim reprehenderit
+        enim nisi veniam nostrud.
+      </Alert>
+      <Alert size="small" variant="error" closeButton>
+        Id elit esse enim reprehenderit enim nisi veniam nostrud.
+      </Alert>
+      <Alert size="small" variant="warning" closeButton>
+        Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
+        enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+        reprehenderit enim nisi veniam nostrud. Id elit esse enim reprehenderit
+        enim nisi veniam nostrud.
+      </Alert>
+      <Alert variant="info" closeButton>
+        <Heading size="small" level="3">
+          Id elit esse enim reprehenderit
+        </Heading>
+        <BodyLong>
           Id elit esse enim reprehenderit enim nisi veniam nostrud.
-        </Alert>
-        <Alert variant="info" closeButton>
-          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
-          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
-          reprehenderit enim nisi veniam nostrud. Id elit esse enim
-          reprehenderit enim nisi veniam nostrud.
-        </Alert>
-        <Alert size="small" variant="info" closeButton>
+        </BodyLong>
+      </Alert>
+      <Alert variant="info" closeButton size="small">
+        <Heading size="xsmall" level="3">
+          Id elit esse enim reprehenderit
+        </Heading>
+        <BodyLong>
           Id elit esse enim reprehenderit enim nisi veniam nostrud.
-        </Alert>
-        <Alert size="small" variant="info" closeButton>
-          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
-          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
-          reprehenderit enim nisi veniam nostrud. Id elit esse enim
-          reprehenderit enim nisi veniam nostrud.
-        </Alert>
-        <Alert variant="info" closeButton>
-          <DsHeading size="small" level="3">
-            Id elit esse enim reprehenderit
-          </DsHeading>
-          <BodyLong>
-            Id elit esse enim reprehenderit enim nisi veniam nostrud.
-          </BodyLong>
-        </Alert>
-        <Alert variant="info" closeButton size="small">
-          <DsHeading size="xsmall" level="3">
-            Id elit esse enim reprehenderit
-          </DsHeading>
-          <BodyLong>
-            Id elit esse enim reprehenderit enim nisi veniam nostrud.
-          </BodyLong>
-        </Alert>
-      </VStack>
-    );
-  },
+        </BodyLong>
+      </Alert>
+    </VStack>
+  );
 };
 
 export const Chromatic: Story = {
   render: () => (
-    <VStack gap="6">
-      <VStack gap="2">
-        <h2>Variant</h2>
-        {variants.map((variant, i) => (
-          <Alert key={variant} variant={variant}>
-            {new Array(i + 1).fill(
-              "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
-            )}
-          </Alert>
-        ))}
-      </VStack>
-      <VStack gap="2">
-        <h2>Small</h2>
-        <Alert variant="info" size="small">
-          Id elit esse enim reprehenderit enim nisi veniam nostrud.
-        </Alert>
-        <Alert variant="info" size="small">
-          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
-          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
-          reprehenderit enim nisi veniam nostrud. Id elit esse enim
-          reprehenderit enim nisi veniam nostrud.
-        </Alert>
-      </VStack>
-      <VStack gap="2">
-        <h2>FullWidth</h2>
-        <Alert variant="info" fullWidth>
-          Id elit esse enim reprehenderit enim nisi veniam nostrud.
-        </Alert>
-        <Alert variant="info" size="small" fullWidth>
-          Id elit esse enim reprehenderit enim nisi veniam nostrud.
-        </Alert>
-      </VStack>
-      <VStack gap="2">
-        <h2>Inline</h2>
-        <Alert variant="info" inline>
-          Id elit esse enim reprehenderit enim nisi veniam nostrud.
-        </Alert>
-        <Alert variant="info" inline>
-          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
-          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
-          reprehenderit enim nisi veniam nostrud. Id elit esse enim
-          reprehenderit enim nisi veniam nostrud.
-        </Alert>
-        <Alert variant="info" size="small" inline>
-          Id elit esse enim reprehenderit enim nisi veniam nostrud.
-        </Alert>
-        <Alert variant="info" size="small" inline>
-          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
-          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
-          reprehenderit enim nisi veniam nostrud. Id elit esse enim
-          reprehenderit enim nisi veniam nostrud.
-        </Alert>
-      </VStack>
-      <VStack gap="2">
-        <h2>Heading</h2>
-        <Alert variant="info">
-          <DsHeading size="small" level="3">
-            Id elit esse enim reprehenderit
-          </DsHeading>
-          <BodyLong>
-            Id elit esse enim reprehenderit enim nisi veniam nostrud.
-          </BodyLong>
-        </Alert>
-        <Alert variant="info" size="small">
-          <DsHeading size="xsmall" level="3">
-            Id elit esse enim reprehenderit
-          </DsHeading>
-          <BodyLong size="small">
-            Id elit esse enim reprehenderit enim nisi veniam nostrud.
-          </BodyLong>
-        </Alert>
-      </VStack>
-      <VStack gap="2">
-        <h2>CloseButton</h2>
-        <Alert variant="info" closeButton>
-          Id elit esse enim reprehenderit enim nisi veniam nostrud.
-        </Alert>
-        <Alert variant="info" closeButton>
-          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
-          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
-          reprehenderit enim nisi veniam nostrud. Id elit esse enim
-          reprehenderit enim nisi veniam nostrud.
-        </Alert>
-        <Alert size="small" variant="info" closeButton>
-          Id elit esse enim reprehenderit enim nisi veniam nostrud.
-        </Alert>
-        <Alert size="small" variant="info" closeButton>
-          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
-          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
-          reprehenderit enim nisi veniam nostrud. Id elit esse enim
-          reprehenderit enim nisi veniam nostrud.
-        </Alert>
-        <Alert variant="info" closeButton>
-          <DsHeading size="small" level="3">
-            Id elit esse enim reprehenderit
-          </DsHeading>
-          <BodyLong>
-            Id elit esse enim reprehenderit enim nisi veniam nostrud.
-          </BodyLong>
-        </Alert>
-        <Alert variant="info" size="small" closeButton>
-          <DsHeading size="xsmall" level="3">
-            Id elit esse enim reprehenderit
-          </DsHeading>
-          <BodyLong size="small">
-            Id elit esse enim reprehenderit enim nisi veniam nostrud.
-          </BodyLong>
-        </Alert>
-      </VStack>
+    <div>
+      <h2>Variants</h2>
+      <Variants />
 
+      <h2>FullWidth</h2>
+      <FullWidth />
+
+      <h2>ContentMaxWidthOff</h2>
+      <ContentMaxWidthOff />
+
+      <h2>Inline</h2>
+      <Inline />
+
+      <h2>Heading</h2>
+      <WithHeading />
+
+      <h2>CloseButton</h2>
+      <CloseButton />
+
+      <h2>Links</h2>
       <VStack gap="2">
-        <h2>Links</h2>
         {variants.map((variant) => (
           <Alert key={variant} variant={variant}>
             <Link href="#">Id elit esse enim reprehenderit</Link>
           </Alert>
         ))}
       </VStack>
-    </VStack>
+    </div>
   ),
   parameters: {
     chromatic: { disable: false },

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

@@ -61,28 +61,28 @@ export const Controls: Story = {
     variant: {
       control: {
         type: "radio",
-        options: [
-          "primary",
-          "secondary",
-          "tertiary",
-          "danger",
-          "primary-neutral",
-          "secondary-neutral",
-          "tertiary-neutral",
-        ],
       },
+      options: [
+        "primary",
+        "secondary",
+        "tertiary",
+        "danger",
+        "primary-neutral",
+        "secondary-neutral",
+        "tertiary-neutral",
+      ],
     },
     size: {
       control: {
         type: "radio",
-        options: ["medium", "small", "xsmall"],
       },
+      options: ["medium", "small", "xsmall"],
     },
     iconPosition: {
       control: {
         type: "radio",
-        options: ["left", "right"],
       },
+      options: ["left", "right"],
     },
   },
 };

@navikt/core/react/src/collapsible/parts/Collapsible.Content.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { Slot } from "../../util/Slot";
+import { Slot } from "../../slot/Slot";
 import { useCollapsibleContext } from "../Collapsible.context";
 
 export interface CollapsibleContentProps

@navikt/core/react/src/collapsible/parts/Collapsible.Trigger.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { Slot } from "../../util/Slot";
+import { Slot } from "../../slot/Slot";
 import { composeEventHandlers } from "../../util/composeEventHandlers";
 import { useCollapsibleContext } from "../Collapsible.context";
 

@navikt/core/react/src/copybutton/copy-button.stories.tsx

@@ -8,6 +8,9 @@ import { Tooltip } from "../tooltip";
 const meta: Meta<typeof CopyButton> = {
   title: "ds-react/CopyButton",
   component: CopyButton,
+  parameters: {
+    chromatic: { disable: true },
+  },
 };
 export default meta;
 
@@ -32,9 +35,6 @@ export const Default: Story = {
     text: "",
     activeText: "",
   },
-  parameters: {
-    chromatic: { disable: true },
-  },
 };
 
 export const Interaction: Story = {

@navikt/core/react/src/date/datepicker/types.ts

@@ -69,7 +69,7 @@ export interface DatePickerDefaultProps
   dropdownCaption?: boolean;
   /**
    * Apply the disabled modifier to the matching days.
-   * https://react-day-picker.js.org/api/types/Matcher
+   * https://react-day-picker.js.org/api/type-aliases/Matcher
    */
   disabled?: Matcher[];
   /**

@navikt/core/react/src/date/monthpicker/types.ts

@@ -33,7 +33,7 @@ export interface MonthPickerProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   dropdownCaption?: boolean;
   /**
-   * Apply the disabled modifier to the matching months. Uses a subset of React Day Picker Matcher type. https://react-day-picker.js.org/api/types/Matcher
+   * Apply the disabled modifier to the matching months. Uses a subset of React Day Picker Matcher type. https://react-day-picker.js.org/api/type-aliases/Matcher
    */
   disabled?: Matcher[];
   /**

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

@@ -10,7 +10,10 @@ import { ComboboxProps } from "./types";
 
 export const Combobox = forwardRef<
   HTMLInputElement,
-  Omit<ComboboxProps, "onChange" | "options" | "size" | "onClear" | "value">
+  Omit<
+    ComboboxProps,
+    "onChange" | "options" | "size" | "onClear" | "value" | "disabled"
+  >
 >((props, ref) => {
   const { className, hideLabel = false, description, label, ...rest } = props;
 

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

@@ -35,6 +35,7 @@ const ComboboxProvider = forwardRef<HTMLInputElement, ComboboxProps>(
       allowNewValues = false,
       children,
       defaultValue,
+      disabled,
       error,
       errorId,
       filteredOptions: externalFilteredOptions,
@@ -60,6 +61,8 @@ const ComboboxProvider = forwardRef<HTMLInputElement, ComboboxProps>(
       <InputContextProvider
         value={{
           defaultValue,
+          description: rest.description,
+          disabled,
           error,
           errorId,
           id,

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

@@ -0,0 +1,63 @@
+import cl from "clsx";
+import React from "react";
+import { PlusIcon } from "@navikt/aksel-icons";
+import { BodyShort, Label } from "../../../typography";
+import { useInputContext } from "../Input/Input.context";
+import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
+import { isInList, toComboboxOption } from "../combobox-utils";
+import filteredOptionsUtil from "./filtered-options-util";
+import { useFilteredOptionsContext } from "./filteredOptionsContext";
+
+const AddNewOption = () => {
+  const {
+    inputProps: { id },
+    size,
+    value,
+  } = useInputContext();
+  const {
+    setIsMouseLastUsedInputDevice,
+    toggleIsListOpen,
+    activeDecendantId,
+    virtualFocus,
+  } = useFilteredOptionsContext();
+  const { isMultiSelect, selectedOptions, toggleOption } =
+    useSelectedOptionsContext();
+  return (
+    <li
+      tabIndex={-1}
+      onMouseMove={() => {
+        if (activeDecendantId !== filteredOptionsUtil.getAddNewOptionId(id)) {
+          virtualFocus.moveFocusToElement(
+            filteredOptionsUtil.getAddNewOptionId(id),
+          );
+          setIsMouseLastUsedInputDevice(true);
+        }
+      }}
+      onPointerUp={(event) => {
+        toggleOption(toComboboxOption(value), event);
+        if (!isMultiSelect && !isInList(value, selectedOptions))
+          toggleIsListOpen(false);
+      }}
+      id={filteredOptionsUtil.getAddNewOptionId(id)}
+      className={cl(
+        "navds-combobox__list-item navds-combobox__list-item--new-option",
+        {
+          "navds-combobox__list-item--new-option--focus":
+            activeDecendantId === filteredOptionsUtil.getAddNewOptionId(id),
+        },
+      )}
+      role="option"
+      aria-selected={false}
+    >
+      <PlusIcon aria-hidden />
+      <BodyShort size={size}>
+        Legg til{" "}
+        <Label as="span" size={size}>
+          &#8220;{value}&#8221;
+        </Label>
+      </BodyShort>
+    </li>
+  );
+};
+
+export default AddNewOption;

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

@@ -1,20 +1,18 @@
 import cl from "clsx";
 import React from "react";
-import { CheckmarkIcon, PlusIcon } from "@navikt/aksel-icons";
-import { Loader } from "../../../loader";
-import { BodyShort, Label } from "../../../typography";
 import { useInputContext } from "../Input/Input.context";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
-import { isInList, toComboboxOption } from "../combobox-utils";
-import { ComboboxOption } from "../types";
+import AddNewOption from "./AddNewOption";
+import FilteredOptionsItem from "./FilteredOptionsItem";
+import LoadingMessage from "./LoadingMessage";
+import MaxSelectedMessage from "./MaxSelectedMessage";
+import NoSearchHitsMessage from "./NoSearchHitsMessage";
 import filteredOptionsUtil from "./filtered-options-util";
 import { useFilteredOptionsContext } from "./filteredOptionsContext";
 
 const FilteredOptions = () => {
   const {
     inputProps: { id },
-    size,
-    value,
   } = useInputContext();
   const {
     allowNewValues,
@@ -23,17 +21,9 @@ const FilteredOptions = () => {
     filteredOptions,
     setFilteredOptionsRef,
     isMouseLastUsedInputDevice,
-    setIsMouseLastUsedInputDevice,
     isValueNew,
-    toggleIsListOpen,
-    activeDecendantId,
-    virtualFocus,
   } = useFilteredOptionsContext();
-  const { isMultiSelect, selectedOptions, toggleOption, maxSelected } =
-    useSelectedOptionsContext();
-
-  const isDisabled = (option: ComboboxOption) =>
-    maxSelected?.isLimitReached && !isInList(option.value, selectedOptions);
+  const { maxSelected } = useSelectedOptionsContext();
 
   const shouldRenderNonSelectables =
     maxSelected?.isLimitReached || // Render maxSelected message
@@ -55,30 +45,10 @@ const FilteredOptions = () => {
     >
       {shouldRenderNonSelectables && (
         <div className="navds-combobox__list_non-selectables" role="status">
-          {maxSelected?.isLimitReached && (
-            <div
-              className="navds-combobox__list-item--max-selected"
-              id={filteredOptionsUtil.getMaxSelectedOptionsId(id)}
-            >
-              {maxSelected.message ??
-                `${selectedOptions.length} av ${maxSelected.limit} er valgt.`}
-            </div>
-          )}
-          {isLoading && (
-            <div
-              className="navds-combobox__list-item--loading"
-              id={filteredOptionsUtil.getIsLoadingId(id)}
-            >
-              <Loader title="Søker..." />
-            </div>
-          )}
+          {maxSelected?.isLimitReached && <MaxSelectedMessage />}
+          {isLoading && <LoadingMessage />}
           {!isLoading && filteredOptions.length === 0 && !allowNewValues && (
-            <div
-              className="navds-combobox__list-item--no-options"
-              id={filteredOptionsUtil.getNoHitsId(id)}
-            >
-              Ingen søketreff
-            </div>
+            <NoSearchHitsMessage />
           )}
         </div>
       )}
@@ -90,90 +60,10 @@ const FilteredOptions = () => {
           className="navds-combobox__list-options"
         >
           {isValueNew && !maxSelected?.isLimitReached && allowNewValues && (
-            <li
-              tabIndex={-1}
-              onMouseMove={() => {
-                if (
-                  activeDecendantId !==
-                  filteredOptionsUtil.getAddNewOptionId(id)
-                ) {
-                  virtualFocus.moveFocusToElement(
-                    filteredOptionsUtil.getAddNewOptionId(id),
-                  );
-                  setIsMouseLastUsedInputDevice(true);
-                }
-              }}
-              onPointerUp={(event) => {
-                toggleOption(toComboboxOption(value), event);
-                if (!isMultiSelect && !isInList(value, selectedOptions))
-                  toggleIsListOpen(false);
-              }}
-              id={filteredOptionsUtil.getAddNewOptionId(id)}
-              className={cl(
-                "navds-combobox__list-item navds-combobox__list-item--new-option",
-                {
-                  "navds-combobox__list-item--new-option--focus":
-                    activeDecendantId ===
-                    filteredOptionsUtil.getAddNewOptionId(id),
-                },
-              )}
-              role="option"
-              aria-selected={false}
-            >
-              <PlusIcon aria-hidden />
-              <BodyShort size={size}>
-                Legg til{" "}
-                <Label as="span" size={size}>
-                  &#8220;{value}&#8221;
-                </Label>
-              </BodyShort>
-            </li>
+            <AddNewOption />
           )}
           {filteredOptions.map((option) => (
-            <li
-              className={cl("navds-combobox__list-item", {
-                "navds-combobox__list-item--focus":
-                  activeDecendantId ===
-                  filteredOptionsUtil.getOptionId(id, option.label),
-                "navds-combobox__list-item--selected": isInList(
-                  option.value,
-                  selectedOptions,
-                ),
-              })}
-              data-no-focus={isDisabled(option) || undefined}
-              id={filteredOptionsUtil.getOptionId(id, option.label)}
-              key={option.label}
-              tabIndex={-1}
-              onMouseMove={() => {
-                if (
-                  activeDecendantId !==
-                  filteredOptionsUtil.getOptionId(id, option.label)
-                ) {
-                  virtualFocus.moveFocusToElement(
-                    filteredOptionsUtil.getOptionId(id, option.label),
-                  );
-                  setIsMouseLastUsedInputDevice(true);
-                }
-              }}
-              onPointerUp={(event) => {
-                if (isDisabled(option)) {
-                  return;
-                }
-                toggleOption(option, event);
-                if (
-                  !isMultiSelect &&
-                  !isInList(option.value, selectedOptions)
-                ) {
-                  toggleIsListOpen(false);
-                }
-              }}
-              role="option"
-              aria-selected={isInList(option.value, selectedOptions)}
-              aria-disabled={isDisabled(option) || undefined}
-            >
-              <BodyShort size={size}>{option.label}</BodyShort>
-              {isInList(option.value, selectedOptions) && <CheckmarkIcon />}
-            </li>
+            <FilteredOptionsItem key={option.value} option={option} />
           ))}
         </ul>
       )}

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

@@ -0,0 +1,73 @@
+import cl from "clsx";
+import React from "react";
+import { CheckmarkIcon } from "@navikt/aksel-icons";
+import { BodyShort } from "../../../typography";
+import { useInputContext } from "../Input/Input.context";
+import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
+import { isInList } from "../combobox-utils";
+import { ComboboxOption } from "../types";
+import filteredOptionsUtil from "./filtered-options-util";
+import { useFilteredOptionsContext } from "./filteredOptionsContext";
+
+const FilteredOptionsItem = ({ option }: { option: ComboboxOption }) => {
+  const {
+    inputProps: { id },
+    size,
+  } = useInputContext();
+  const {
+    setIsMouseLastUsedInputDevice,
+    toggleIsListOpen,
+    activeDecendantId,
+    virtualFocus,
+  } = useFilteredOptionsContext();
+  const { isMultiSelect, maxSelected, selectedOptions, toggleOption } =
+    useSelectedOptionsContext();
+
+  const isDisabled = (_option: ComboboxOption) =>
+    maxSelected?.isLimitReached && !isInList(_option.value, selectedOptions);
+  return (
+    <li
+      className={cl("navds-combobox__list-item", {
+        "navds-combobox__list-item--focus":
+          activeDecendantId ===
+          filteredOptionsUtil.getOptionId(id, option.label),
+        "navds-combobox__list-item--selected": isInList(
+          option.value,
+          selectedOptions,
+        ),
+      })}
+      data-no-focus={isDisabled(option) || undefined}
+      id={filteredOptionsUtil.getOptionId(id, option.label)}
+      key={option.label}
+      tabIndex={-1}
+      onMouseMove={() => {
+        if (
+          activeDecendantId !==
+          filteredOptionsUtil.getOptionId(id, option.label)
+        ) {
+          virtualFocus.moveFocusToElement(
+            filteredOptionsUtil.getOptionId(id, option.label),
+          );
+          setIsMouseLastUsedInputDevice(true);
+        }
+      }}
+      onPointerUp={(event) => {
+        if (isDisabled(option)) {
+          return;
+        }
+        toggleOption(option, event);
+        if (!isMultiSelect && !isInList(option.value, selectedOptions)) {
+          toggleIsListOpen(false);
+        }
+      }}
+      role="option"
+      aria-selected={isInList(option.value, selectedOptions)}
+      aria-disabled={isDisabled(option) || undefined}
+    >
+      <BodyShort size={size}>{option.label}</BodyShort>
+      {isInList(option.value, selectedOptions) && <CheckmarkIcon />}
+    </li>
+  );
+};
+
+export default FilteredOptionsItem;

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

@@ -0,0 +1,20 @@
+import React from "react";
+import { Loader } from "../../../loader";
+import { useInputContext } from "../Input/Input.context";
+import filteredOptionsUtil from "./filtered-options-util";
+
+const LoadingMessage = () => {
+  const {
+    inputProps: { id },
+  } = useInputContext();
+  return (
+    <div
+      className="navds-combobox__list-item--loading"
+      id={filteredOptionsUtil.getIsLoadingId(id)}
+    >
+      <Loader title="Søker..." />
+    </div>
+  );
+};
+
+export default LoadingMessage;

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

@@ -0,0 +1,27 @@
+import React from "react";
+import { useInputContext } from "../Input/Input.context";
+import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
+import filteredOptionsUtil from "./filtered-options-util";
+
+const MaxSelectedMessage = () => {
+  const {
+    inputProps: { id },
+  } = useInputContext();
+  const { maxSelected, selectedOptions } = useSelectedOptionsContext();
+
+  if (!maxSelected) {
+    return null;
+  }
+
+  return (
+    <div
+      className="navds-combobox__list-item--max-selected"
+      id={filteredOptionsUtil.getMaxSelectedOptionsId(id)}
+    >
+      {maxSelected.message ??
+        `${selectedOptions.length} av ${maxSelected.limit} er valgt.`}
+    </div>
+  );
+};
+
+export default MaxSelectedMessage;

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

@@ -0,0 +1,19 @@
+import React from "react";
+import { useInputContext } from "../Input/Input.context";
+import filteredOptionsUtil from "./filtered-options-util";
+
+const NoSearchHitsMessage = () => {
+  const {
+    inputProps: { id },
+  } = useInputContext();
+  return (
+    <div
+      className="navds-combobox__list-item--no-options"
+      id={filteredOptionsUtil.getNoHitsId(id)}
+    >
+      Ingen søketreff
+    </div>
+  );
+};
+
+export default NoSearchHitsMessage;

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

@@ -4,11 +4,18 @@ const normalizeText = (text: string): string =>
   typeof text === "string" ? text.toLocaleLowerCase().trim() : "";
 
 const isPartOfText = (value: string, text: string) =>
-  normalizeText(text).startsWith(normalizeText(value ?? ""));
+  normalizeText(text).includes(normalizeText(value ?? ""));
 
 const getMatchingValuesFromList = (value: string, list: ComboboxOption[]) =>
   list.filter((listItem) => isPartOfText(value, listItem.label));
 
+const getFirstValueStartingWith = (text: string, list: ComboboxOption[]) => {
+  const normalizedText = normalizeText(text);
+  return list.find((listItem) =>
+    normalizeText(listItem.label).startsWith(normalizedText),
+  );
+};
+
 const getFilteredOptionsId = (comboboxId: string) =>
   `${comboboxId}-filtered-options`;
 
@@ -37,4 +44,5 @@ export default {
   getIsLoadingId,
   getNoHitsId,
   getMaxSelectedOptionsId,
+  getFirstValueStartingWith,
 };

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

@@ -106,16 +106,19 @@ const FilteredOptionsProvider = ({
   }, [allowNewValues, customOptions, id, options, value]);
 
   useClientLayoutEffect(() => {
+    const autoCompleteCandidate =
+      filteredOptionsUtils.getFirstValueStartingWith(
+        searchTerm,
+        filteredOptions,
+      )?.label;
     if (
       shouldAutocomplete &&
-      filteredOptionsUtils.normalizeText(searchTerm) !== "" &&
-      (previousSearchTerm?.length || 0) < searchTerm.length &&
-      filteredOptions.length > 0
+      autoCompleteCandidate &&
+      (previousSearchTerm?.length || 0) < searchTerm.length
     ) {
       setValue(
-        `${searchTerm}${filteredOptions[0].label.substring(searchTerm.length)}`,
+        `${searchTerm}${autoCompleteCandidate.substring(searchTerm.length)}`,
       );
-      setSearchTerm(searchTerm);
     }
   }, [
     filteredOptions,

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

@@ -1,11 +1,4 @@
-import React, {
-  ChangeEvent,
-  ChangeEventHandler,
-  useCallback,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import React, { useCallback, useMemo, useRef, useState } from "react";
 import { createContext } from "../../../util/create-context";
 import { useClientLayoutEffect } from "../../../util/hooks";
 import { FormFieldType, useFormField } from "../../useFormField";
@@ -13,12 +6,12 @@ import { ComboboxProps } from "../types";
 
 interface InputContextValue extends FormFieldType {
   clearInput: NonNullable<ComboboxProps["onClear"]>;
-  error?: string;
+  error?: ComboboxProps["error"];
   focusInput: () => void;
   inputRef: React.RefObject<HTMLInputElement>;
   value: string;
   setValue: (text: string) => void;
-  onChange: ChangeEventHandler<HTMLInputElement>;
+  onChange: (newValue: string) => void;
   searchTerm: string;
   setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
   shouldAutocomplete?: boolean;
@@ -31,7 +24,24 @@ const [InputContextProvider, useInputContext] =
     errorMessage: "useInputContext must be used within an InputContextProvider",
   });
 
-const InputProvider = ({ children, value: props }) => {
+interface Props {
+  children: React.ReactNode;
+  value: {
+    defaultValue: ComboboxProps["defaultValue"];
+    description: ComboboxProps["description"];
+    disabled: ComboboxProps["disabled"];
+    error: ComboboxProps["error"];
+    errorId: ComboboxProps["errorId"];
+    id: ComboboxProps["id"];
+    value: ComboboxProps["value"];
+    onChange: ComboboxProps["onChange"];
+    onClear: ComboboxProps["onClear"];
+    shouldAutocomplete: ComboboxProps["shouldAutocomplete"];
+    size: ComboboxProps["size"];
+  };
+}
+
+const InputProvider = ({ children, value: props }: Props) => {
   const {
     defaultValue = "",
     description,
@@ -68,30 +78,22 @@ const InputProvider = ({ children, value: props }) => {
   const [searchTerm, setSearchTerm] = useState(value);
 
   const onChange = useCallback(
-    (event: ChangeEvent<HTMLInputElement>) => {
-      const newValue = event.currentTarget.value;
+    (newValue: string) => {
       externalValue ?? setInternalValue(newValue);
-      externalOnChange?.(event);
       setSearchTerm(newValue);
+      externalOnChange?.(newValue);
     },
     [externalValue, externalOnChange],
   );
 
-  const setValue = useCallback(
-    (text) => {
-      setInternalValue(text);
-    },
-    [setInternalValue],
-  );
-
   const clearInput = useCallback(
     (event: React.PointerEvent | React.KeyboardEvent | React.MouseEvent) => {
       onClear?.(event);
-      externalOnChange?.(null, "");
-      setValue("");
+      externalOnChange?.("");
+      setInternalValue("");
       setSearchTerm("");
     },
-    [externalOnChange, onClear, setValue],
+    [externalOnChange, onClear, setInternalValue],
   );
 
   const focusInput = useCallback(() => {
@@ -111,7 +113,7 @@ const InputProvider = ({ children, value: props }) => {
     focusInput,
     inputRef,
     value,
-    setValue,
+    setValue: setInternalValue,
     onChange,
     searchTerm,
     setSearchTerm,

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

@@ -1,26 +1,38 @@
 import cl from "clsx";
 import React, {
-  ChangeEvent,
   InputHTMLAttributes,
   forwardRef,
   useCallback,
+  useRef,
 } from "react";
 import { omit } from "../../../util";
+import { useMergeRefs } from "../../../util/hooks";
 import filteredOptionsUtil from "../FilteredOptions/filtered-options-util";
 import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsContext";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import { useInputContext } from "./Input.context";
 
 interface InputProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, "value"> {
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "disabled"> {
   ref: React.Ref<HTMLInputElement>;
   inputClassName?: string;
+  shouldShowSelectedOptions?: boolean;
   value?: string;
 }
 
 const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ inputClassName, ...rest }, ref) => {
-    const { clearInput, inputProps, onChange, size, value } = useInputContext();
+  ({ inputClassName, shouldShowSelectedOptions, ...rest }, ref) => {
+    const internalRef = useRef<HTMLInputElement>(null);
+    const mergedRefs = useMergeRefs(ref, internalRef);
+    const {
+      clearInput,
+      inputProps,
+      onChange,
+      size,
+      value,
+      searchTerm,
+      setValue,
+    } = useInputContext();
     const {
       selectedOptions,
       removeSelectedOption,
@@ -56,7 +68,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           if (!isMultiSelect && !isTextInSelectedOptions(currentOption.label)) {
             toggleIsListOpen(false);
           }
-        } else if (shouldAutocomplete && isTextInSelectedOptions(value)) {
+        } else if (isTextInSelectedOptions(value)) {
           event.preventDefault();
           // Trying to set the same value that is already set, so just clearing the input
           clearInput(event);
@@ -67,13 +79,13 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
             allowNewValues && isValueNew
               ? { label: value, value }
               : filteredOptions[0];
+
+          if (!selectedValue) {
+            return;
+          }
+
           toggleOption(selectedValue, event);
-          if (
-            !isMultiSelect &&
-            !isTextInSelectedOptions(
-              filteredOptions[0].label || selectedValue.label,
-            )
-          ) {
+          if (!isMultiSelect && !isTextInSelectedOptions(selectedValue.label)) {
             toggleIsListOpen(false);
           }
         }
@@ -96,10 +108,6 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
     const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
       e.preventDefault();
       switch (e.key) {
-        case "Escape":
-          clearInput(e);
-          toggleIsListOpen(false);
-          break;
         case "Enter":
         case "Accept":
           onEnter(e);
@@ -118,10 +126,10 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
     };
 
     const handleKeyDown = useCallback(
-      (e) => {
+      (e: React.KeyboardEvent<HTMLInputElement>) => {
         setIsMouseLastUsedInputDevice(false);
         if (e.key === "Backspace") {
-          if (value === "") {
+          if (value === "" && shouldShowSelectedOptions) {
             const lastSelectedOption =
               selectedOptions[selectedOptions.length - 1];
             if (lastSelectedOption) {
@@ -132,17 +140,34 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           if (activeDecendantId || value) {
             e.preventDefault();
           }
-        } else if (e.key === "ArrowDown") {
-          // Check that cursor position is at the end of the input field,
-          // so we don't interfere with text editing
-          if (e.target.selectionStart === value?.length) {
-            e.preventDefault();
-            if (virtualFocus.activeElement === null || !isListOpen) {
-              toggleIsListOpen(true);
-            }
-            virtualFocus.moveFocusDown();
+        } else if (e.key === "Escape") {
+          if (isListOpen || value) {
+            e.preventDefault(); // Prevents closing an encasing Modal, as Combobox reacts on keyup.
+            clearInput(e);
+            toggleIsListOpen(false);
           }
+        } else if (["ArrowLeft", "ArrowRight"].includes(e.key)) {
+          /**
+           * In case user has an active selection and 'completes' the selection with ArrowLeft or ArrowRight
+           * we need to make sure to update the filter.
+           */
+          if (value !== "" && value !== searchTerm) {
+            onChange(value);
+          }
+        } else if (e.key === "ArrowDown") {
+          // Reset the value to the search term to cancel autocomplete
+          // if the user moves focus down to the FilteredOptions
+          if (value !== searchTerm) {
+            setValue(searchTerm);
+          }
+          if (virtualFocus.activeElement === null || !isListOpen) {
+            toggleIsListOpen(true);
+          }
+          virtualFocus.moveFocusDown();
         } else if (e.key === "ArrowUp") {
+          if (value !== "" && value !== searchTerm) {
+            onChange(value);
+          }
           // Check that the FilteredOptions list is open and has virtual focus.
           // Otherwise ignore keystrokes, so it doesn't interfere with text editing
           if (isListOpen && activeDecendantId) {
@@ -161,13 +186,18 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         isListOpen,
         activeDecendantId,
         setIsMouseLastUsedInputDevice,
+        clearInput,
         toggleIsListOpen,
+        onChange,
         virtualFocus,
+        setValue,
+        searchTerm,
+        shouldShowSelectedOptions,
       ],
     );
 
     const onChangeHandler = useCallback(
-      (event: ChangeEvent<HTMLInputElement>) => {
+      (event: React.ChangeEvent<HTMLInputElement>) => {
         const newValue = event.target.value;
         if (newValue && newValue !== "") {
           toggleIsListOpen(true);
@@ -175,7 +205,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           toggleIsListOpen(false);
         }
         virtualFocus.moveFocusToTop();
-        onChange(event);
+        onChange(newValue);
       },
       [filteredOptions.length, virtualFocus, onChange, toggleIsListOpen],
     );
@@ -184,10 +214,11 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       <input
         {...rest}
         {...omit(inputProps, ["aria-invalid"])}
-        ref={ref}
+        ref={mergedRefs}
         value={value}
         onBlur={() => virtualFocus.moveFocusToTop()}
-        onChange={onChangeHandler}
+        onClick={() => value !== searchTerm && onChange(value)}
+        onInput={onChangeHandler}
         type="text"
         role="combobox"
         onKeyUp={handleKeyUp}

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

@@ -24,6 +24,7 @@ export const InputController = forwardRef<
     | "size"
     | "onClear"
     | "value"
+    | "disabled"
   >
 >((props, ref) => {
   const {
@@ -72,6 +73,7 @@ export const InputController = forwardRef<
             id={inputProps.id}
             ref={mergedInputRef}
             inputClassName={inputClassName}
+            shouldShowSelectedOptions={shouldShowSelectedOptions}
             {...rest}
           />
         </SelectedOptions>

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

@@ -8,6 +8,7 @@ import { UNSAFE_Combobox } from "../index";
 const options = [
   "banana",
   "apple",
+  "apple pie",
   "tangerine",
   "pear",
   "grape",
@@ -71,86 +72,193 @@ describe("Render combobox", () => {
     });
   });
 
-  test("Should show loading icon when loading (used for async search)", async () => {
-    render(<App options={[]} isListOpen isLoading />);
+  describe("Combobox state-handling", () => {
+    test("Should show loading icon when loading (used for async search)", async () => {
+      render(<App options={[]} isListOpen isLoading />);
 
-    expect(await screen.findByText("Søker...")).toBeInTheDocument();
-  });
-});
+      expect(await screen.findByText("Søker...")).toBeInTheDocument();
+    });
 
-describe("Combobox state-handling", () => {
-  test("Should not select previous focused element when closes", async () => {
-    render(<App options={options} />);
+    test("Should not select previous focused element when closes", async () => {
+      render(<App options={options} />);
 
-    await act(async () => {
-      await userEvent.click(
-        screen.getByRole("combobox", { name: "Hva er dine favorittfrukter?" }),
+      await act(async () => {
+        await userEvent.click(
+          screen.getByRole("combobox", {
+            name: "Hva er dine favorittfrukter?",
+          }),
+        );
+      });
+      await act(async () => {
+        await userEvent.type(
+          screen.getByRole("combobox", {
+            name: "Hva er dine favorittfrukter?",
+          }),
+          "ban",
+        );
+        await userEvent.keyboard("{ArrowDown}");
+        await userEvent.keyboard("{ArrowUp}");
+        await userEvent.keyboard("{Enter}");
+      });
+
+      expect(screen.queryByRole("button", { name: "banana slett" })).toBeNull();
+    });
+
+    test("Should reset list when resetting input (ESC)", async () => {
+      render(<App options={options} />);
+
+      await act(async () => {
+        await userEvent.click(
+          screen.getByRole("combobox", {
+            name: "Hva er dine favorittfrukter?",
+          }),
+        );
+      });
+      await act(async () => {
+        await userEvent.type(
+          screen.getByRole("combobox", {
+            name: "Hva er dine favorittfrukter?",
+          }),
+          "apple",
+        );
+        await userEvent.keyboard("{ArrowDown}");
+        await userEvent.keyboard("{Escape}");
+        await userEvent.keyboard("{ArrowDown}");
+      });
+
+      expect(
+        await screen.findByRole("option", { name: "banana" }),
+      ).toBeInTheDocument();
+    });
+
+    test("Should handle complex options with label and value", async () => {
+      const onToggleSelected = vi.fn();
+      render(
+        <App
+          options={[
+            { label: "Hjelpemidler [HJE]", value: "HJE" },
+            { label: "Oppfølging [OPP]", value: "OPP" },
+            { label: "Sykepenger [SYK]", value: "SYK" },
+            { label: "Sykemelding [SYM]", value: "SYM" },
+          ]}
+          onToggleSelected={onToggleSelected}
+        />,
       );
-    });
-    await act(async () => {
-      await userEvent.type(
-        screen.getByRole("combobox", { name: "Hva er dine favorittfrukter?" }),
-        "ban",
-      );
-      await userEvent.keyboard("{ArrowDown}");
-      await userEvent.keyboard("{ArrowUp}");
-      await userEvent.keyboard("{Enter}");
-    });
 
-    expect(screen.queryByRole("button", { name: "banana slett" })).toBeNull();
-  });
-
-  test("Should reset list when resetting input (ESC)", async () => {
-    render(<App options={options} />);
-
-    await act(async () => {
-      await userEvent.click(
-        screen.getByRole("combobox", { name: "Hva er dine favorittfrukter?" }),
-      );
-    });
-    await act(async () => {
-      await userEvent.type(
-        screen.getByRole("combobox", { name: "Hva er dine favorittfrukter?" }),
-        "apple",
-      );
-      await userEvent.keyboard("{ArrowDown}");
-      await userEvent.keyboard("{Escape}");
-      await userEvent.keyboard("{ArrowDown}");
-    });
-
-    expect(
-      await screen.findByRole("option", { name: "banana" }),
-    ).toBeInTheDocument();
-  });
-
-  test("Should handle complex options with label and value", async () => {
-    const onToggleSelected = vi.fn();
-    render(
-      <App
-        options={[
-          { label: "Hjelpemidler [HJE]", value: "HJE" },
-          { label: "Oppfølging [OPP]", value: "OPP" },
-          { label: "Sykepenger [SYK]", value: "SYK" },
-          { label: "Sykemelding [SYM]", value: "SYM" },
-        ]}
-        onToggleSelected={onToggleSelected}
-      />,
-    );
-
-    expect(screen.getByRole("combobox")).toBeInTheDocument();
-    const bananaOption = screen.getByRole("option", {
-      name: "Hjelpemidler [HJE]",
-      selected: false,
-    });
-    await act(async () => {
-      await userEvent.click(bananaOption);
-    });
-    expect(onToggleSelected).toHaveBeenCalledWith("HJE", true, false);
-    expect(
-      screen.getByRole("option", {
+      expect(screen.getByRole("combobox")).toBeInTheDocument();
+      const bananaOption = screen.getByRole("option", {
         name: "Hjelpemidler [HJE]",
-        selected: true,
-      }),
-    ).toBeInTheDocument();
+        selected: false,
+      });
+      await act(async () => {
+        await userEvent.click(bananaOption);
+      });
+      expect(onToggleSelected).toHaveBeenCalledWith("HJE", true, false);
+      expect(
+        screen.getByRole("option", {
+          name: "Hjelpemidler [HJE]",
+          selected: true,
+        }),
+      ).toBeInTheDocument();
+    });
+
+    test("should trigger onChange for every character typed or removed", async () => {
+      const onChange = vi.fn();
+      const onToggleSelected = vi.fn();
+      render(
+        <App
+          options={["Apple", "Orange", "Banana", "Lemon"]}
+          onChange={onChange}
+          onToggleSelected={onToggleSelected}
+          shouldAutocomplete
+        />,
+      );
+      const combobox = screen.getByRole("combobox");
+      expect(combobox).toBeInTheDocument();
+
+      await act(async () => {
+        await userEvent.click(combobox);
+        await userEvent.type(combobox, "Lemon");
+      });
+      expect(onChange).toHaveBeenNthCalledWith(1, "L");
+      expect(onChange).toHaveBeenNthCalledWith(2, "Le");
+      expect(onChange).toHaveBeenNthCalledWith(3, "Lem");
+      expect(onChange).toHaveBeenNthCalledWith(4, "Lemo");
+      expect(onChange).toHaveBeenNthCalledWith(5, "Lemon");
+    });
+
+    test("should trigger onChange while typing and on accepting autocomplete suggestions", async () => {
+      const onChange = vi.fn();
+      const onToggleSelected = vi.fn();
+      render(
+        <App
+          options={[
+            "Hjelpemidler [HJE]",
+            "Oppfølging [OPP]",
+            "Sykepenger [SYK]",
+            "Sykemelding [SYM]",
+          ]}
+          onChange={onChange}
+          onToggleSelected={onToggleSelected}
+          shouldAutocomplete
+        />,
+      );
+      const combobox = screen.getByRole("combobox");
+      expect(combobox).toBeInTheDocument();
+
+      await act(async () => {
+        await userEvent.click(combobox);
+        await userEvent.type(combobox, "Syke");
+        await userEvent.keyboard("{ArrowRight}");
+        await userEvent.keyboard("{ArrowDown}");
+        await userEvent.keyboard("{Enter}");
+      });
+      expect(onChange).toHaveBeenNthCalledWith(1, "S");
+      expect(onChange).toHaveBeenNthCalledWith(2, "Sy");
+      expect(onChange).toHaveBeenNthCalledWith(3, "Syk");
+      expect(onChange).toHaveBeenNthCalledWith(4, "Syke");
+      expect(onChange).toHaveBeenNthCalledWith(5, "Sykepenger [SYK]");
+      expect(onChange).toHaveBeenCalledWith("");
+      expect(onToggleSelected).toHaveBeenCalledOnce();
+      expect(onToggleSelected).toHaveBeenCalledWith(
+        "Sykepenger [SYK]",
+        true,
+        false,
+      );
+    });
+  });
+
+  describe("search", () => {
+    test("should find matched anywhere in the label", async () => {
+      render(<App options={options} />);
+
+      const combobox = screen.getByRole("combobox", {
+        name: "Hva er dine favorittfrukter?",
+      });
+
+      await act(async () => {
+        await userEvent.click(combobox);
+
+        await userEvent.type(combobox, "p");
+      });
+
+      const searchHits = [
+        "apple",
+        "apple pie",
+        "pear",
+        "grape",
+        "passion fruit",
+        "pineapple",
+        "grape fruit",
+      ];
+      searchHits.forEach((label) => {
+        expect(screen.getByRole("option", { name: label })).toBeInTheDocument();
+      });
+      screen.getAllByRole("option").forEach((option) => {
+        expect(
+          option.textContent && searchHits.includes(option.textContent),
+        ).toBe(true);
+      });
+    });
   });
 });