Version Packages (#2981)

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,7 +41,7 @@ jobs:
         run: yarn boot
 
       - name: Chromatic
-        uses: chromaui/action@v1
+        uses: chromaui/action@latest
         id: chromatic_tests
         continue-on-error: true
         with:

.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/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,13 @@
 # @navikt/aksel-icons
 
+## 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-icons",
-  "version": "6.10.0",
+  "version": "6.11.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,9 @@
 # @navikt/aksel-stylelint
 
+## 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.11.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.11.0",
+    "@navikt/ds-tokens": "^6.11.0",
     "concurrently": "7.2.1",
     "postcss-selector-parser": "^6.0.13",
     "postcss-value-parser": "^4.2.0",

@navikt/aksel/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @navikt/aksel
 
+## 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.11.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.11.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,21 @@
 # @navikt/ds-css
 
+## 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 +505,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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "6.10.0",
+  "version": "6.11.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.11.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,681 @@
+.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-p-xs);
+
+  padding-inline: var(--__ac-r-pi);
+}
+
+.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-p-xs);
+
+  padding-block: var(--__ac-r-pb);
+}
+
+.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-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-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-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-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-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/index.css

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

@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,33 @@
 # @navikt/ds-react
 
+## 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 +1103,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.11.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.11.0",
+    "@navikt/ds-tokens": "^6.11.0",
     "clsx": "^2.1.0",
     "date-fns": "^3.0.0",
     "react-day-picker": "8.10.0"

@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/confirmation-panel/confirmation-panel.stories.tsx

@@ -76,7 +76,7 @@ export const NoContent = () => {
   );
 };
 
-export const Error = () => {
+export const WithError = () => {
   const [checked, setChecked] = useState(false);
   return (
     <div className="colgap">
@@ -117,8 +117,8 @@ export const Chromatic: Story = {
         <NoContent />
       </div>
       <div>
-        <h2>Error</h2>
-        <Error />
+        <h2>With error</h2>
+        <WithError />
       </div>
     </div>
   ),

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

@@ -79,7 +79,7 @@ export const ErrorPropagation: Story = {
   },
 };
 
-export const Error: Story = {
+export const WithError: Story = {
   args: {
     legend: "Mollit eiusmod",
     description:
@@ -129,14 +129,14 @@ export const Chromatic: Story = {
           <Fieldset {...ErrorPropagation.args} />
         </div>
         <div>
-          <h2>Error</h2>
+          <h2>WithError</h2>
           {/* @ts-expect-error Args are Partial here */}
-          <Fieldset {...Error.args} />
+          <Fieldset {...WithError.args} />
         </div>
         <div>
-          <h2>Error small</h2>
+          <h2>WithError small</h2>
           {/* @ts-expect-error Args are Partial here */}
-          <Fieldset {...Error.args} size="small" />
+          <Fieldset {...WithError.args} size="small" />
         </div>
         <div>
           <h2>Disabled</h2>

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

@@ -146,3 +146,15 @@ export const Download: StoryObj = {
     </VStack>
   ),
 };
+
+export const Description: StoryObj = {
+  render: () => (
+    <VStack gap="5">
+      <FileUpload.Item file={fileTxt} description="Mottat 11.11.11" />
+      <FileUpload.Item
+        file={fileTxt}
+        description="Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim officiis nisi beatae quia non iste nihil accusantium nobis amet, officia eius, repellendus a cupiditate, commodi eos! Quis illum repudiandae exercitationem."
+      />
+    </VStack>
+  ),
+};

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

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { Slot } from "../../../util/Slot";
+import { Slot } from "../../../slot/Slot";
 import { FileUploadBaseProps } from "../FileUpload.types";
 import { useFileUpload } from "../useFileUpload";
 

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

@@ -44,6 +44,11 @@ export interface FileUploadItemProps
    * @default "idle"
    */
   status?: "downloading" | "uploading" | "idle";
+  /**
+   * File description. Replaces file size when status is "idle".
+   * This is useful for displaying upload date. Should not act as a replacement for error messages.
+   */
+  description?: string;
   /**
    * Props for the action button.
    */
@@ -71,6 +76,7 @@ export const Item: OverridableComponent<FileUploadItemProps, HTMLDivElement> =
         onFileClick,
         button,
         translations,
+        description,
         ...rest
       }: FileUploadItemProps,
       ref,
@@ -91,7 +97,7 @@ export const Item: OverridableComponent<FileUploadItemProps, HTMLDivElement> =
         if (status === "downloading") {
           return translate("item.downloading");
         }
-        return formatFileSize(file);
+        return description ?? formatFileSize(file);
       }
 
       return (

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

@@ -75,7 +75,7 @@ export const Description = () => {
   );
 };
 
-export const Error = () => {
+export const WithError = () => {
   return (
     <div className="colgap">
       <Select
@@ -149,8 +149,8 @@ export const Chromatic: StoryObj<typeof Select> = {
         <Description />
       </div>
       <div>
-        <h2>Error</h2>
-        <Error />
+        <h2>WithError</h2>
+        <WithError />
       </div>
       <div>
         <h2>Disabled</h2>

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

@@ -8,6 +8,9 @@ import { Textarea } from "./index";
 const meta: Meta<typeof Textarea> = {
   title: "ds-react/Textarea",
   component: Textarea,
+  parameters: {
+    chromatic: { disable: true },
+  },
 };
 export default meta;
 
@@ -40,9 +43,6 @@ export const Default: StoryObj<typeof Textarea> = {
     maxRows: { type: "number" },
     minRows: { type: "number" },
   },
-  parameters: {
-    chromatic: { disable: true },
-  },
 };
 
 export const Small: StoryFn = () => {
@@ -65,7 +65,7 @@ export const Description: StoryFn = () => {
   );
 };
 
-export const Error: StoryFn = () => {
+export const WithError: StoryFn = () => {
   return (
     <div className="colgap">
       <Textarea
@@ -235,7 +235,7 @@ export const Chromatic: Story = {
       <Textarea {...props} label="Textarea" />
       <Small />
       <Description />
-      <Error />
+      <WithError />
       <Disabled />
       <HideLabel />
       <MaxLength />

@navikt/core/react/src/form/textfield/text-field.stories.tsx

@@ -60,7 +60,7 @@ export const Description = () => {
   );
 };
 
-export const Error = () => {
+export const WithError = () => {
   return (
     <div className="colgap">
       <TextField
@@ -120,8 +120,8 @@ export const Chromatic: Story = {
         <Description />
       </div>
       <div>
-        <h2>Error</h2>
-        <Error />
+        <h2>WithError</h2>
+        <WithError />
       </div>
       <div>
         <h2>Disabled</h2>

@navikt/core/react/src/layout/base/BasePrimitive.stories.tsx

@@ -0,0 +1,241 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { Box } from "../box";
+import { Hide, Show } from "../responsive";
+import { HStack, VStack } from "../stack";
+import { BasePrimitive } from "./BasePrimitive";
+
+const meta: Meta<typeof BasePrimitive> = {
+  title: "ds-react/Primitives/BasePrimitive",
+  component: BasePrimitive,
+  parameters: {
+    chromatic: { disable: true },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BasePrimitive>;
+
+const ResponsiveBreakpointDisplay = () => (
+  <>
+    <Show above="2xl">2xl</Show>
+    <Show above="xl" below="2xl">
+      xl
+    </Show>
+    <Show above="lg" below="xl">
+      lg
+    </Show>
+    <Show above="md" below="lg">
+      md
+    </Show>
+    <Show above="sm" below="md">
+      sm
+    </Show>
+    <Hide above="sm">xs</Hide>
+  </>
+);
+
+export const PaddingBreakpoints = () => (
+  <BasePrimitive
+    padding={{ xs: "2", sm: "4", md: "8", lg: "16", xl: "24", "2xl": "32" }}
+  >
+    <Box background="surface-alt-3-subtle">
+      <ResponsiveBreakpointDisplay />
+    </Box>
+  </BasePrimitive>
+);
+
+export const PaddingBreakpointsInherit1 = () => (
+  <BasePrimitive padding={{ xs: "2" }} paddingInline={{ md: "24 0" }}>
+    <Box background="surface-alt-3-subtle">
+      <ResponsiveBreakpointDisplay />
+    </Box>
+  </BasePrimitive>
+);
+
+export const PaddingBreakpointsInherit2 = () => (
+  <BasePrimitive
+    padding={{ xs: "2", sm: "3" }}
+    paddingInline={{ sm: "4 0", md: "24 0" }}
+  >
+    <Box background="surface-alt-3-subtle">
+      <ResponsiveBreakpointDisplay />
+    </Box>
+  </BasePrimitive>
+);
+
+export const Padding = () => (
+  <VStack align="center" gap="2">
+    <BasePrimitive padding="20">
+      <Box borderWidth="1">Padding all around</Box>
+    </BasePrimitive>
+    <BasePrimitive padding="1" paddingBlock="20 0">
+      <Box borderWidth="1">Padding to the North</Box>
+    </BasePrimitive>
+    <BasePrimitive padding="1" paddingInline="0 20">
+      <Box borderWidth="1">Padding to the East</Box>
+    </BasePrimitive>
+    <BasePrimitive padding="1" paddingBlock="0 20">
+      <Box borderWidth="1">Padding to the South</Box>
+    </BasePrimitive>
+    <BasePrimitive padding="1" paddingInline="20 0">
+      <Box borderWidth="1">Padding to the West</Box>
+    </BasePrimitive>
+  </VStack>
+);
+
+export const HeightWidth = () => (
+  <VStack align="center" gap="2">
+    <BasePrimitive height="4rem">
+      <Box borderWidth="1">height 4 rem</Box>
+    </BasePrimitive>
+    <BasePrimitive minHeight="4rem">
+      <Box borderWidth="1">min-height 4 rem</Box>
+    </BasePrimitive>
+    <BasePrimitive maxHeight="4rem" height="10rem">
+      <Box borderWidth="1">max-height 4 rem</Box>
+    </BasePrimitive>
+
+    <BasePrimitive width="4rem">
+      <Box borderWidth="1">width 4 rem</Box>
+    </BasePrimitive>
+    <BasePrimitive minWidth="12rem">
+      <Box borderWidth="1">min-width 12 rem</Box>
+    </BasePrimitive>
+    <BasePrimitive maxWidth="4rem" width="20rem">
+      <Box borderWidth="1">max-width 4 rem</Box>
+    </BasePrimitive>
+  </VStack>
+);
+
+export const PositionAbsolute = () => (
+  <div
+    style={{
+      position: "relative",
+      height: 200,
+      width: 300,
+      border: "1px solid gray",
+    }}
+  >
+    <BasePrimitive position="absolute" inset="0">
+      <div style={{ display: "grid", placeContent: "center" }}>inset 0</div>
+    </BasePrimitive>
+    <BasePrimitive position="absolute" top="4" right="0">
+      <div>Top</div>
+    </BasePrimitive>
+    <BasePrimitive position="absolute" bottom="4">
+      <div>bottom</div>
+    </BasePrimitive>
+    <BasePrimitive position="absolute" right="4" bottom="0">
+      <div>right</div>
+    </BasePrimitive>
+    <BasePrimitive position="absolute" left="4">
+      <div>left</div>
+    </BasePrimitive>
+  </div>
+);
+
+export const Overflow = () => (
+  <VStack gap="8">
+    <BasePrimitive overflow="scroll" maxHeight="100px" maxWidth="100px">
+      <Box borderWidth="1">
+        <div style={{ width: 200, height: 200 }}>scroll</div>
+      </Box>
+    </BasePrimitive>
+    <BasePrimitive
+      overflowX="scroll"
+      overflowY="hidden"
+      maxHeight="100px"
+      maxWidth="100px"
+    >
+      <Box borderWidth="1">
+        <div style={{ width: 200, height: 200 }}>scroll-x</div>
+      </Box>
+    </BasePrimitive>
+    <BasePrimitive
+      overflowY="scroll"
+      overflowX="hidden"
+      maxHeight="100px"
+      maxWidth="100px"
+    >
+      <Box borderWidth="1">
+        <div style={{ width: 200, height: 200 }}>scroll-y</div>
+      </Box>
+    </BasePrimitive>
+  </VStack>
+);
+
+export const Flex = () => (
+  <VStack gap="8">
+    <HStack align="center" gap="2">
+      <BasePrimitive flexGrow="1">
+        <Box borderWidth="1">grow 1</Box>
+      </BasePrimitive>
+      <BasePrimitive flexShrink="0">
+        <Box borderWidth="1">shrink 0</Box>
+      </BasePrimitive>
+      <BasePrimitive flexBasis="200px">
+        <Box borderWidth="1">flex basis 200px</Box>
+      </BasePrimitive>
+    </HStack>
+    <h2>Flex basis</h2>
+    <HStack align="center" gap="0">
+      <BasePrimitive flexBasis="33%">
+        <Box borderWidth="1">33%</Box>
+      </BasePrimitive>
+      <BasePrimitive flexBasis="66%">
+        <Box borderWidth="1">66%</Box>
+      </BasePrimitive>
+      <BasePrimitive flexBasis="20%">
+        <Box borderWidth="1">20%</Box>
+      </BasePrimitive>
+      <BasePrimitive flexBasis="80%">
+        <Box borderWidth="1">80%</Box>
+      </BasePrimitive>
+    </HStack>
+  </VStack>
+);
+
+export const Chromatic: Story = {
+  render: () => (
+    <VStack align="center" gap="6">
+      <div>
+        <h2>PaddingBreakpoints</h2>
+        <PaddingBreakpoints />
+      </div>
+      <div>
+        <h2>PaddingBreakpointsInherit1</h2>
+        <PaddingBreakpointsInherit1 />
+      </div>
+      <div>
+        <h2>PaddingBreakpointsInherit2</h2>
+        <PaddingBreakpointsInherit2 />
+      </div>
+      <div>
+        <h2>Padding</h2>
+        <Padding />
+      </div>
+      <div>
+        <h2>Height & Width</h2>
+        <HeightWidth />
+      </div>
+      <div>
+        <h2>Position Absolute</h2>
+        <PositionAbsolute />
+      </div>
+      <div>
+        <h2>Overflow</h2>
+        <Overflow />
+      </div>
+      <div>
+        <h2>Flex</h2>
+        <Flex />
+      </div>
+    </VStack>
+  ),
+
+  parameters: {
+    chromatic: { disable: false },
+  },
+};

@navikt/core/react/src/layout/base/BasePrimitive.tsx

@@ -0,0 +1,232 @@
+import cl from "clsx";
+import React from "react";
+import { Slot } from "../../slot/Slot";
+import { getResponsiveProps, getResponsiveValue } from "../utilities/css";
+import { ResponsiveProp, SpacingScale } from "../utilities/types";
+
+export interface BasePrimitiveProps {
+  children: React.ReactElement;
+  className?: string;
+  /**
+   * Padding around children.
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
+   * @example
+   * padding='4'
+   * padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   */
+  padding?: ResponsiveProp<SpacingScale>;
+  /**
+   * Horizontal padding around children.
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
+   * @example
+   * paddingInline='4'
+   * paddingInline='4 5'
+   * paddingInline={{xs: '0 32', sm: '3', md: '4 5', lg: '5', xl: '6'}}
+   */
+  paddingInline?: ResponsiveProp<
+    SpacingScale | `${SpacingScale} ${SpacingScale}`
+  >;
+  /**
+   * Vertical padding around children.
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
+   * @example
+   * paddingBlock='4'
+   * paddingBlock='4 5'
+   * paddingBlock={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   */
+  paddingBlock?: ResponsiveProp<
+    SpacingScale | `${SpacingScale} ${SpacingScale}`
+  >;
+  /**
+   * CSS `width`
+   */
+  width?: ResponsiveProp<string>;
+  /**
+   * CSS `min-width`
+   */
+  minWidth?: ResponsiveProp<string>;
+  /**
+   * CSS `max-width`
+   */
+  maxWidth?: ResponsiveProp<string>;
+  /**
+   * CSS `height`
+   */
+  height?: ResponsiveProp<string>;
+  /**
+   * CSS `min-height`
+   */
+  minHeight?: ResponsiveProp<string>;
+  /**
+   * CSS `max-height`
+   */
+  maxHeight?: ResponsiveProp<string>;
+  /**
+   * CSS `position`
+   */
+  position?: ResponsiveProp<
+    "static" | "relative" | "absolute" | "fixed" | "sticky"
+  >;
+  /**
+   * CSS `inset`.
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
+   * @example
+   * inset='4'
+   * inset='4 5'
+   * inset={{xs: '0 32', sm: '3', md: '4 5', lg: '5', xl: '6'}}
+   */
+  inset?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}`>;
+  /**
+   * CSS `top`
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
+   * @example
+   * top='4'
+   * top={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   */
+  top?: ResponsiveProp<SpacingScale>;
+  /**
+   * CSS `right`
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
+   * @example
+   * right='4'
+   * right={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   */
+  right?: ResponsiveProp<SpacingScale>;
+  /**
+   * CSS `bottom`
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
+   * @example
+   * bottom='4'
+   * bottom={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   */
+  bottom?: ResponsiveProp<SpacingScale>;
+  /**
+   * CSS `left`
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
+   * @example
+   * left='4'
+   * left={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   */
+  left?: ResponsiveProp<SpacingScale>;
+  /**
+   * CSS `overflow`
+   */
+  overflow?: ResponsiveProp<"visible" | "hidden" | "clip" | "scroll" | "auto">;
+  /**
+   * CSS `overflow-x`
+   */
+  overflowX?: ResponsiveProp<"visible" | "hidden" | "clip" | "scroll" | "auto">;
+  /**
+   * CSS `overflow-y`
+   */
+  overflowY?: ResponsiveProp<"visible" | "hidden" | "clip" | "scroll" | "auto">;
+  /**
+   * CSS `flex-basis`
+   */
+  flexBasis?: ResponsiveProp<string>;
+  /**
+   * CSS `flex-shrink`
+   */
+  flexShrink?: ResponsiveProp<string>;
+  /**
+   * CSS `flex-grow`
+   */
+  flexGrow?: ResponsiveProp<string>;
+}
+
+export const BasePrimitive = ({
+  children,
+  className,
+  padding,
+  paddingInline,
+  paddingBlock,
+  width,
+  minWidth,
+  maxWidth,
+  height,
+  minHeight,
+  maxHeight,
+  position,
+  inset,
+  top,
+  right,
+  left,
+  bottom,
+  overflow,
+  overflowX,
+  overflowY,
+  flexBasis,
+  flexGrow,
+  flexShrink,
+}: BasePrimitiveProps) => {
+  const style: React.CSSProperties = {
+    /* Padding */
+    ...getResponsiveProps("r", "p", "spacing", padding),
+    ...getResponsiveProps("r", "pi", "spacing", paddingInline),
+    ...getResponsiveProps("r", "pb", "spacing", paddingBlock),
+    /* Width & height */
+    ...getResponsiveValue("r", "w", width),
+    ...getResponsiveValue("r", "minw", minWidth),
+    ...getResponsiveValue("r", "maxw", maxWidth),
+    ...getResponsiveValue("r", "h", height),
+    ...getResponsiveValue("r", "minh", minHeight),
+    ...getResponsiveValue("r", "maxh", maxHeight),
+    /* Positon & inset */
+    ...getResponsiveValue("r", "position", position),
+    ...getResponsiveProps("r", "inset", "spacing", inset),
+    ...getResponsiveProps("r", "top", "spacing", top),
+    ...getResponsiveProps("r", "right", "spacing", right),
+    ...getResponsiveProps("r", "bottom", "spacing", bottom),
+    ...getResponsiveProps("r", "left", "spacing", left),
+    /* Overflow */
+    ...getResponsiveValue("r", "overflow", overflow),
+    ...getResponsiveValue("r", "overflowx", overflowX),
+    ...getResponsiveValue("r", "overflowy", overflowY),
+    /* Flex */
+    ...getResponsiveValue("r", "flex-basis", flexBasis),
+    ...getResponsiveValue("r", "flex-grow", flexGrow),
+    ...getResponsiveValue("r", "flex-shrink", flexShrink),
+  };
+
+  return (
+    <Slot
+      className={cl({
+        className,
+        "navds-r-p": padding,
+        "navds-r-pi": paddingInline,
+        "navds-r-pb": paddingBlock,
+        "navds-r-w": width,
+        "navds-r-minw": minWidth,
+        "navds-r-maxw": maxWidth,
+        "navds-r-h": height,
+        "navds-r-minh": minHeight,
+        "navds-r-maxh": maxHeight,
+        "navds-r-position": position,
+        "navds-r-inset": inset,
+        "navds-r-top": top,
+        "navds-r-right": right,
+        "navds-r-bottom": bottom,
+        "navds-r-left": left,
+        "navds-r-overflow": overflow,
+        "navds-r-overflowx": overflowX,
+        "navds-r-overflowy": overflowY,
+        "navds-r-flex-basis": flexBasis,
+        "navds-r-flex-grow": flexGrow,
+        "navds-r-flex-shrink": flexShrink,
+      })}
+      style={style}
+    >
+      {children}
+    </Slot>
+  );
+};
+
+export default BasePrimitive;

@navikt/core/react/src/layout/bleed/Bleed.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { Slot } from "../../util/Slot";
+import { Slot } from "../../slot/Slot";
 import { getResponsiveProps } from "../utilities/css";
 import { ResponsiveProp, SpacingScale } from "../utilities/types";
 

@navikt/core/react/src/layout/box/Box.stories.tsx

@@ -1,11 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import React, { ReactNode } from "react";
+import React from "react";
 import { ChevronRightIcon } from "@navikt/aksel-icons";
 import { BodyLong, Detail, Heading } from "../../typography";
 import { HGrid } from "../grid";
 import { HStack, VStack } from "../stack";
-import { BackgroundToken, BorderRadiiToken } from "../utilities/types";
-import { Box } from "./Box";
+import { Box, BoxProps } from "./Box";
 
 const meta: Meta<typeof Box> = {
   title: "ds-react/Primitives/Box",
@@ -34,11 +33,7 @@ const Card = ({
   background,
   borderRadius = "xlarge",
   children,
-}: {
-  background?: BackgroundToken;
-  borderRadius?: BorderRadiiToken;
-  children: ReactNode;
-}) => (
+}: Pick<BoxProps, "background" | "borderRadius" | "children">) => (
   <Box
     padding="4"
     background={background}

@navikt/core/react/src/layout/box/Box.tsx

@@ -3,19 +3,26 @@ import React, { forwardRef } from "react";
 import { OverridableComponent } from "../../util/types";
 import { getResponsiveProps } from "../utilities/css";
 import {
-  BackgroundToken,
+  BackgroundColorToken,
   BorderColorToken,
   BorderRadiiToken,
   ResponsiveProp,
   ShadowToken,
   SpaceDelimitedAttribute,
   SpacingScale,
+  SurfaceColorToken,
 } from "../utilities/types";
 
 export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** CSS `background-color` property. Accepts a color token. */
-  background?: BackgroundToken;
-  /** CSS `border-color` property. Accepts a color token. */
+  /**
+   * CSS `background-color` property.
+   * Accepts a [background/surface color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#afff774dad80).
+   */
+  background?: BackgroundColorToken | SurfaceColorToken;
+  /**
+   * CSS `border-color` property.
+   * Accepts a [border color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#adb1767e2f87).
+   */
   borderColor?: BorderColorToken;
   /**
    * CSS `border-radius` property.

@navikt/core/react/src/layout/page/Page.tsx

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import bgColors from "@navikt/ds-tokens/src/colors-bg.json";
 import { OverridableComponent } from "../../util";
+import { BackgroundColorToken } from "../utilities/types";
 import { PageBlock } from "./parts/PageBlock";
 
 export interface PageProps extends React.HTMLAttributes<HTMLElement> {
@@ -11,10 +11,11 @@ export interface PageProps extends React.HTMLAttributes<HTMLElement> {
    */
   as?: "div" | "body";
   /**
-   * Background color. Accepts a color token.
+   * Background color.
+   * Accepts a [background color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#753d1cf4d1d6).
    * @default "bg-default"
    */
-  background?: keyof typeof bgColors.a | "surface-subtle";
+  background?: BackgroundColorToken;
   /**
    * Allows better positioning of footer
    */

@navikt/core/react/src/layout/responsive/Responsive.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { HTMLAttributes, forwardRef } from "react";
-import { Slot } from "../../util/Slot";
+import { Slot } from "../../slot/Slot";
 import { BreakpointsAlias } from "../utilities/types";
 
 export interface ResponsiveProps extends HTMLAttributes<HTMLDivElement> {

@navikt/core/react/src/layout/utilities/types.ts

@@ -5,9 +5,8 @@ import surfaceColors from "@navikt/ds-tokens/src/colors-surface.json";
 import shadows from "@navikt/ds-tokens/src/shadow.json";
 import Spacing from "@navikt/ds-tokens/src/spacing.json";
 
-export type BackgroundToken =
-  | keyof typeof bgColors.a
-  | keyof typeof surfaceColors.a;
+export type BackgroundColorToken = keyof typeof bgColors.a;
+export type SurfaceColorToken = keyof typeof surfaceColors.a;
 export type BorderColorToken = keyof typeof borderColors.a;
 export type BorderRadiiToken =
   | keyof (typeof borderRadii.a)["border-radius"]

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

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
-import { BodyShort, Label } from "../typography";
+import { BodyLong } from "../typography";
 import { ListContext } from "./context";
 import { ListItemProps } from "./types";
 
@@ -45,14 +45,14 @@ export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
           </div>
         )}
 
-        <BodyShort as="div" size={size} className="navds-list__item-content">
+        <BodyLong as="div" size={size} className="navds-list__item-content">
           {title && (
-            <Label as="p" size={size}>
+            <BodyLong as="p" size={size} weight="semibold">
               {title}
-            </Label>
+            </BodyLong>
           )}
           {children}
-        </BodyShort>
+        </BodyLong>
       </li>
     );
   },

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

@@ -7,6 +7,7 @@ import {
   RecycleIcon,
 } from "@navikt/aksel-icons";
 import { VStack } from "../layout/stack";
+import { BodyLong } from "../typography";
 import List from "./List";
 
 export default {
@@ -29,8 +30,17 @@ export const Default = {
         <List.Item title="Consectetur Adipiscing Elit">
           Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
         </List.Item>
-        <List.Item title="Sed Do Eiusmod Tempor Incididunt">
-          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        <List.Item>
+          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto fugiat
+          atque accusantium iure sunt, ipsum voluptas, impedit harum, minus
+          rerum recusandae. Consequuntur sint distinctio nulla reprehenderit eum
+          suscipit quae libero.
+        </List.Item>
+        <List.Item>
+          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto fugiat
+          atque accusantium iure sunt, ipsum voluptas, impedit harum, minus
+          rerum recusandae. Consequuntur sint distinctio nulla reprehenderit eum
+          suscipit quae libero.
         </List.Item>
       </List>
     );
@@ -284,6 +294,69 @@ export const Nested = {
   },
 };
 
+export const Spacing = {
+  render: () => {
+    return (
+      <>
+        <h2>Medium</h2>
+        <BodyLong spacing>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit minus
+          aliquid, veniam quibusdam saepe autem quia odio? Tenetur dicta
+          voluptates iste maiores perspiciatis? Sapiente in possimus iusto
+          numquam? Esse, voluptatibus.
+        </BodyLong>
+        <List>
+          <List.Item>
+            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto
+            fugiat atque accusantium iure sunt, ipsum voluptas, impedit harum,
+            minus rerum recusandae. Consequuntur sint distinctio nulla
+            reprehenderit eum suscipit quae libero.
+          </List.Item>
+          <List.Item>
+            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto
+            fugiat atque accusantium iure sunt, ipsum voluptas, impedit harum,
+            minus rerum recusandae. Consequuntur sint distinctio nulla
+            reprehenderit eum suscipit quae libero.
+          </List.Item>
+        </List>
+        <BodyLong spacing>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit minus
+          aliquid, veniam quibusdam saepe autem quia odio? Tenetur dicta
+          voluptates iste maiores perspiciatis? Sapiente in possimus iusto
+          numquam? Esse, voluptatibus.
+        </BodyLong>
+        <h2>Small</h2>
+        <BodyLong size="small" spacing>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit minus
+          aliquid, veniam quibusdam saepe autem quia odio? Tenetur dicta
+          voluptates iste maiores perspiciatis? Sapiente in possimus iusto
+          numquam? Esse, voluptatibus.
+        </BodyLong>
+        <List size="small">
+          <List.Item>
+            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto
+            fugiat atque accusantium iure sunt, ipsum voluptas, impedit harum,
+            minus rerum recusandae. Consequuntur sint distinctio nulla
+            reprehenderit eum suscipit quae libero.
+          </List.Item>
+          <List.Item>
+            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto
+            fugiat atque accusantium iure sunt, ipsum voluptas, impedit harum,
+            minus rerum recusandae. Consequuntur sint distinctio nulla
+            reprehenderit eum suscipit quae libero.
+          </List.Item>
+        </List>
+        <BodyLong size="small" spacing>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit minus
+          aliquid, veniam quibusdam saepe autem quia odio? Tenetur dicta
+          voluptates iste maiores perspiciatis? Sapiente in possimus iusto
+          numquam? Esse, voluptatibus.
+        </BodyLong>
+      </>
+    );
+  },
+};
+
 export const Chromatic: Story = {
   render: () => (
     <VStack gap="2">
@@ -319,6 +392,10 @@ export const Chromatic: Story = {
         <h2>Nested</h2>
         <Nested.render />
       </div>
+      <div>
+        <h2>Spacing</h2>
+        <Spacing.render />
+      </div>
     </VStack>
   ),
   parameters: {

@navikt/core/react/src/modal/dialog-polyfill.ts

@@ -631,7 +631,6 @@ dialogPolyfill.DialogManager = function () {
     this.mo_ = new MutationObserver(function (records) {
       var removed = [];
       records.forEach(function (rec) {
-        // biome-ignore lint/suspicious/noImplicitAnyLet: Reduntant to type c in this scenario
         for (var i = 0, c; (c = rec.removedNodes[i]); ++i) {
           if (!(c instanceof Element)) {
             continue;
@@ -679,7 +678,6 @@ dialogPolyfill.DialogManager.prototype.unblockDocument = function () {
 dialogPolyfill.DialogManager.prototype.updateStacking = function () {
   var zIndex = this.zIndexHigh_;
 
-  // biome-ignore lint/suspicious/noImplicitAnyLet: Reduntant to type dpi in this scenario
   for (var i = 0, dpi; (dpi = this.pendingDialogStack[i]); ++i) {
     dpi.updateZIndex(--zIndex, --zIndex);
     if (i === 0) {
@@ -705,7 +703,6 @@ dialogPolyfill.DialogManager.prototype.containedByTopDialog_ = function (
   candidate,
 ) {
   while ((candidate = findNearestDialog(candidate))) {
-    // biome-ignore lint/suspicious/noImplicitAnyLet: Reduntant to type dpi in this scenario
     for (var i = 0, dpi; (dpi = this.pendingDialogStack[i]); ++i) {
       if (dpi.dialog === candidate) {
         return i === 0; // only valid if top-most

@navikt/core/react/src/overlays/dismissablelayer/DismissableLayer.tsx

@@ -5,7 +5,7 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { Slot } from "../../util/Slot";
+import { Slot } from "../../slot/Slot";
 import { useMergeRefs } from "../../util/hooks";
 import { createDescendantContext } from "../../util/hooks/descendants/useDescendant";
 import { AsChild } from "../../util/types/AsChild";

@navikt/core/react/src/overlays/dismissablelayer/util/useFocusOutside.ts

@@ -46,7 +46,11 @@ export function useFocusOutside(
    * we can eliminate the need for DOM traversal to verify if the focused element is within the react tree.
    */
   return {
-    onFocusCapture: () => (isFocusInsideReactTreeRef.current = true),
-    onBlurCapture: () => (isFocusInsideReactTreeRef.current = false),
+    onFocusCapture: () => {
+      isFocusInsideReactTreeRef.current = true;
+    },
+    onBlurCapture: () => {
+      isFocusInsideReactTreeRef.current = false;
+    },
   };
 }

@navikt/core/react/src/overlays/dismissablelayer/util/usePointerDownOutside.ts

@@ -90,6 +90,8 @@ export function usePointerDownOutside(
 
   return {
     // ensures we check React component tree (not just DOM tree)
-    onPointerDownCapture: () => (isPointerInsideReactTreeRef.current = true),
+    onPointerDownCapture: () => {
+      isPointerInsideReactTreeRef.current = true;
+    },
   };
 }

@navikt/core/react/src/overlays/floating/Floating.tsx

@@ -17,7 +17,7 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { Slot } from "../../util/Slot";
+import { Slot } from "../../slot/Slot";
 import { createContext } from "../../util/create-context";
 import {
   useCallbackRef,

@navikt/core/react/src/pagination/Pagination.tsx

@@ -1,7 +1,8 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
-import { BodyShort } from "../typography";
+import { BodyShort, Heading } from "../typography";
+import { useId } from "../util";
 import PaginationItem, {
   PaginationItemProps,
   PaginationItemType,
@@ -25,28 +26,35 @@ export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
    */
   boundaryCount?: number;
   /**
-   * Callback when current page changes
+   * Callback when current page changes.
    */
   onPageChange?: (page: number) => void;
   /**
-   * Total number of pages
+   * Total number of pages.
    */
   count: number;
   /**
-   * Changes padding, height and font-size
+   * Changes padding, height and font-size.
    * @default "medium"
    */
   size?: "medium" | "small" | "xsmall";
   /**
-   * Display text alongside "previous" and "next" icons
+   * Display text alongside "previous" and "next" icons.
    * @default false
    */
   prevNextTexts?: boolean;
   /**
-   * Override pagination item rendering
+   * Override pagination item rendering.
    * @default (item: PaginationItemProps) => <PaginationItem {...item} />
    */
   renderItem?: (item: PaginationItemProps) => ReturnType<React.FC>;
+  /**
+   * Pagination heading. We recommend adding heading instead of `aria-label` to help assistive technologies with an extra navigation-stop.
+   */
+  srHeading?: {
+    tag: "h2" | "h3" | "h4" | "h5" | "h6";
+    text: string;
+  };
 }
 
 interface PaginationType
@@ -117,6 +125,8 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
       className,
       size = "medium",
       prevNextTexts = false,
+      srHeading,
+      "aria-labelledby": ariaLabelledBy,
       renderItem: Item = (item: PaginationItemProps) => (
         <PaginationItem {...item} />
       ),
@@ -124,6 +134,8 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
     },
     ref,
   ) => {
+    const headingId = useId();
+
     if (page < 1) {
       console.error("page cannot be less than 1");
       return null;
@@ -145,12 +157,25 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
       <nav
         ref={ref}
         {...rest}
+        aria-labelledby={
+          srHeading ? cl(headingId, ariaLabelledBy) : ariaLabelledBy
+        }
         className={cl(
           "navds-pagination",
           `navds-pagination--${size}`,
           className,
         )}
       >
+        {srHeading && (
+          <Heading
+            size="xsmall"
+            visuallyHidden
+            as={srHeading.tag}
+            id={headingId}
+          >
+            {srHeading.text}
+          </Heading>
+        )}
         <ul className="navds-pagination__list">
           <li>
             <Item

@navikt/core/react/src/pagination/PaginationItem.tsx

@@ -33,6 +33,7 @@ export const Item: PaginationItemType = forwardRef(
       as: Component = "button",
       selected = false,
       className,
+      page,
       ...rest
     },
     ref,
@@ -46,6 +47,9 @@ export const Item: PaginationItemType = forwardRef(
         className={cl("navds-pagination__item", className, {
           "navds-pagination__item--selected": selected,
         })}
+        data-page={page}
+        /* TODO: Breaking change to remove. Add to future major version. */
+        page={page}
         {...(Component === "button" && { type: "button" })}
         {...rest}
       >

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

@@ -1,40 +1,44 @@
+import { Meta, StoryFn, StoryObj } from "@storybook/react";
 import React, { useState } from "react";
 import { Link, HashRouter as Router } from "react-router-dom";
+import { VStack } from "../layout/stack";
 import Pagination from "./Pagination";
 
-export default {
+const meta: Meta<typeof Pagination> = {
   title: "ds-react/Pagination",
   component: Pagination,
   argTypes: {
     size: {
       control: {
         type: "radio",
-        options: ["medium", "small", "xsmall"],
       },
+      options: ["medium", "small", "xsmall"],
     },
   },
+  parameters: {
+    chromatic: { disable: true },
+  },
 };
 
-export const Default = (props: any) => {
-  const [page, setPage] = useState(props.page);
+export default meta;
+
+type Story = StoryObj<typeof Pagination>;
+type StoryFunction = StoryFn<typeof Pagination>;
+
+export const Default: StoryFunction = (props) => {
+  const [page, setPage] = useState(2);
   return <Pagination {...props} page={page} onPageChange={setPage} />;
 };
+
 Default.args = {
-  page: 2,
   count: 8,
   siblingCount: 1,
   boundaryCount: 1,
   prevNextTexts: false,
 };
 
-export const PrevNextText = () => {
-  const [page, setPage] = useState(1);
-  const props = {
-    page: 1,
-    count: 8,
-    siblingCount: 1,
-    boundaryCount: 1,
-  };
+export const PrevNextText: StoryFunction = (props) => {
+  const [page, setPage] = useState(2);
   return (
     <div className="colgap" style={{ alignItems: "center" }}>
       <Pagination {...props} page={page} onPageChange={setPage} prevNextTexts />
@@ -56,40 +60,64 @@ export const PrevNextText = () => {
   );
 };
 
-export const Small = () => {
-  const [page, setPage] = useState(1);
-  const props = {
-    page: 1,
-    count: 8,
-    siblingCount: 1,
-    boundaryCount: 1,
-  };
+PrevNextText.args = {
+  count: 8,
+  siblingCount: 1,
+  boundaryCount: 1,
+};
+
+export const Small: StoryFunction = (props) => {
+  const [page, setPage] = useState(2);
+
   return (
     <Pagination {...props} page={page} onPageChange={setPage} size="small" />
   );
 };
 
-export const XSmall = () => {
-  const [page, setPage] = useState(1);
-  const props = {
-    page: 1,
-    count: 8,
-    siblingCount: 1,
-    boundaryCount: 1,
-  };
+Small.args = {
+  count: 8,
+  siblingCount: 1,
+  boundaryCount: 1,
+};
+export const XSmall: StoryFunction = (props) => {
+  const [page, setPage] = useState(2);
+
   return (
     <Pagination {...props} page={page} onPageChange={setPage} size="xsmall" />
   );
 };
 
-export const AsLink = () => {
-  const [page, setPage] = useState(1);
-  const props = {
-    page: 1,
-    count: 8,
-    siblingCount: 1,
-    boundaryCount: 1,
-  };
+XSmall.args = {
+  count: 8,
+  siblingCount: 1,
+  boundaryCount: 1,
+};
+
+export const Heading: StoryFunction = (props) => {
+  const [page, setPage] = useState(2);
+
+  return (
+    <>
+      <h2>Heading før pagination</h2>
+      <Pagination
+        {...props}
+        page={page}
+        onPageChange={setPage}
+        srHeading={{ tag: "h2", text: "Dette er en pagination heading" }}
+      />
+      <h2>Heading etter pagination</h2>
+    </>
+  );
+};
+
+Heading.args = {
+  count: 8,
+  siblingCount: 1,
+  boundaryCount: 1,
+};
+
+export const AsLink: StoryFunction = (props) => {
+  const [page, setPage] = useState(2);
   return (
     <Pagination
       {...props}
@@ -101,6 +129,13 @@ export const AsLink = () => {
     />
   );
 };
+
+AsLink.args = {
+  count: 8,
+  siblingCount: 1,
+  boundaryCount: 1,
+};
+
 AsLink.decorators = [
   (Story) => (
     <Router>
@@ -108,3 +143,45 @@ AsLink.decorators = [
     </Router>
   ),
 ];
+
+export const Chromatic: Story = {
+  render: (props) => (
+    <VStack gap="8">
+      <div>
+        <h2>Default</h2>
+        <Default {...props} />
+      </div>
+      <div>
+        <h2>PrevNextText</h2>
+        <PrevNextText {...props} />
+      </div>
+      <div>
+        <h2>Small</h2>
+        <Small {...props} />
+      </div>
+      <div>
+        <h2>XSmall</h2>
+        <XSmall {...props} />
+      </div>
+      <div>
+        <h2>Heading</h2>
+        <Heading {...props} />
+      </div>
+      <div>
+        <h2>AsLink</h2>
+        <AsLink {...props} />
+      </div>
+    </VStack>
+  ),
+  parameters: {
+    chromatic: { disable: false },
+  },
+  decorators: [
+    (Story) => (
+      <Router>
+        <Story />
+      </Router>
+    ),
+  ],
+  args: { count: 8, siblingCount: 1, boundaryCount: 1 },
+};

@navikt/core/react/src/portal/Portal.tsx

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes, forwardRef } from "react";
 import ReactDOM from "react-dom";
 import { useProvider } from "../provider/Provider";
-import { Slot } from "../util/Slot";
+import { Slot } from "../slot/Slot";
 import { AsChildProps } from "../util/types";
 
 interface PortalBaseProps extends HTMLAttributes<HTMLDivElement> {

@navikt/core/react/src/slot/Slot.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { mergeRefs } from "../util/hooks/useMergeRefs";
+import { mergeProps } from "./merge-props";
+
+interface SlotProps extends React.HTMLAttributes<HTMLElement> {
+  children?: React.ReactNode;
+}
+
+const Slot = React.forwardRef<HTMLElement, SlotProps>((props, forwardedRef) => {
+  const { children, ...slotProps } = props;
+
+  if (React.isValidElement(children)) {
+    return React.cloneElement<any>(children, {
+      ...mergeProps(slotProps, children.props),
+      ref: forwardedRef
+        ? mergeRefs([forwardedRef, (children as any).ref])
+        : (children as any).ref,
+    });
+  }
+
+  if (React.Children.count(children) > 1) {
+    const error = new Error(
+      "Aksel: Components using 'asChild' expects to recieve a single React element child.",
+    );
+    error.name = "SlotError";
+    Error.captureStackTrace?.(error, Slot);
+    throw error;
+  }
+
+  return null;
+});
+
+export { Slot, type SlotProps };

@navikt/core/react/src/slot/merge-props.ts

@@ -1,37 +1,3 @@
-// https://github.com/radix-ui/primitives/blob/main/packages/react/slot/src/Slot.tsx
-import * as React from "react";
-import { mergeRefs } from "./hooks/useMergeRefs";
-
-interface SlotProps extends React.HTMLAttributes<HTMLElement> {
-  children?: React.ReactNode;
-}
-
-export const Slot = React.forwardRef<HTMLElement, SlotProps>(
-  (props, forwardedRef) => {
-    const { children, ...slotProps } = props;
-
-    if (React.isValidElement(children)) {
-      return React.cloneElement<any>(children, {
-        ...mergeProps(slotProps, children.props),
-        ref: forwardedRef
-          ? mergeRefs([forwardedRef, (children as any).ref])
-          : (children as any).ref,
-      });
-    }
-
-    if (React.Children.count(children) > 1) {
-      const error = new Error(
-        "Aksel: Components using 'asChild' expects to recieve a single React element child.",
-      );
-      error.name = "SlotError";
-      Error.captureStackTrace?.(error, Slot);
-      throw error;
-    }
-
-    return null;
-  },
-);
-
 function mergeProps(
   slotProps: Record<string, any>,
   childProps: Record<string, any>,
@@ -69,3 +35,5 @@ function mergeProps(
 
   return { ...slotProps, ...overrideProps };
 }
+
+export { mergeProps };

@navikt/core/react/src/slot/tests/merge-props.test.ts

@@ -0,0 +1,49 @@
+import { describe, expect, test, vi } from "vitest";
+import { mergeProps } from "../merge-props";
+
+describe("Testing mergeProps function for Slot", () => {
+  test("child props should override slot props", () => {
+    const slotProps = { prop1: "slot", prop2: "slot" };
+    const childProps = { prop1: "child" };
+    const result = mergeProps(slotProps, childProps);
+    expect(result).toEqual({ prop1: "child", prop2: "slot" });
+  });
+
+  test("if a handler exists on both slot and child props, the composed function is created", () => {
+    const slotClick = vi.fn();
+    const childClick = vi.fn();
+    const slotProps = { onClick: slotClick };
+    const childProps = { onClick: childClick };
+    const result = mergeProps(slotProps, childProps);
+
+    result.onClick();
+
+    expect(slotClick).toHaveBeenCalledTimes(1);
+    expect(childClick).toHaveBeenCalledTimes(1);
+  });
+
+  test("if a handler exists only on the slot props, only the slot handler is used", () => {
+    const slotClick = vi.fn();
+    const slotProps = { onClick: slotClick };
+    const childProps = {};
+    const result = mergeProps(slotProps, childProps);
+
+    result.onClick();
+
+    expect(slotClick).toHaveBeenCalledTimes(1);
+  });
+
+  test("if the prop is `style`, the styles are merged", () => {
+    const slotProps = { style: { color: "red" } };
+    const childProps = { style: { backgroundColor: "blue" } };
+    const result = mergeProps(slotProps, childProps);
+    expect(result.style).toEqual({ color: "red", backgroundColor: "blue" });
+  });
+
+  test("if the prop is `className`, the class names are joined with a space", () => {
+    const slotProps = { className: "class1" };
+    const childProps = { className: "class2" };
+    const result = mergeProps(slotProps, childProps);
+    expect(result.className).toBe("class1 class2");
+  });
+});

@navikt/core/react/src/toggle-group/ToggleGroup.stories.tsx

@@ -30,37 +30,33 @@ const meta: Meta<typeof ToggleGroup> = {
 
 export default meta;
 
-const Items = (icon?: boolean, both?: boolean) => (
-  <>
-    <ToggleGroup.Item value="ulest">
-      {both ? (
-        <>
-          <EnvelopeClosedIcon /> Uleste
-        </>
-      ) : (
-        <>{icon ? <EnvelopeClosedIcon /> : "Uleste"}</>
-      )}
-    </ToggleGroup.Item>
-    <ToggleGroup.Item value="lest">
-      {both ? (
-        <>
-          <EnvelopeOpenIcon /> Leste
-        </>
-      ) : (
-        <>{icon ? <EnvelopeOpenIcon /> : "Leste"}</>
-      )}
-    </ToggleGroup.Item>
-    <ToggleGroup.Item value="sendt">
-      {both ? (
-        <>
-          <InboxUpIcon /> Sendt
-        </>
-      ) : (
-        <>{icon ? <InboxUpIcon /> : "Sendt"}</>
-      )}
-    </ToggleGroup.Item>
-  </>
-);
+const Items = (icon?: boolean, both?: boolean) => {
+  const hasLabel = both || !icon;
+
+  const iconProps = hasLabel
+    ? { "aria-hidden": true }
+    : { title: "Ikontittel" };
+
+  return (
+    <>
+      <ToggleGroup.Item
+        value="ulest"
+        icon={(both ?? icon) && <EnvelopeClosedIcon {...iconProps} />}
+        label={hasLabel && "Uleste"}
+      />
+      <ToggleGroup.Item
+        value="lest"
+        icon={(both ?? icon) && <EnvelopeOpenIcon {...iconProps} />}
+        label={hasLabel && "Leste"}
+      />
+      <ToggleGroup.Item
+        value="sendt"
+        icon={(both ?? icon) && <InboxUpIcon {...iconProps} />}
+        label={hasLabel && "Sendt"}
+      />
+    </>
+  );
+};
 
 export const Default = (props) => {
   const [activeValue, setActiveValue] = useState("ulest");

@navikt/core/react/src/toggle-group/ToggleGroup.test.tsx

@@ -6,15 +6,9 @@ import { ToggleGroup } from "./ToggleGroup";
 
 const TestToggleGroup = ({ value, onChange, defaultValue }: any) => (
   <ToggleGroup value={value} onChange={onChange} defaultValue={defaultValue}>
-    <ToggleGroup.Item value="toggle1" data-testid="toggle1">
-      Toggle 1
-    </ToggleGroup.Item>
-    <ToggleGroup.Item value="toggle2" data-testid="toggle2">
-      Toggle 2
-    </ToggleGroup.Item>
-    <ToggleGroup.Item value="toggle3" data-testid="toggle3">
-      Toggle 3
-    </ToggleGroup.Item>
+    <ToggleGroup.Item value="toggle1" data-testid="toggle1" label="Toggle 1" />
+    <ToggleGroup.Item value="toggle2" data-testid="toggle2" label="Toggle 2" />
+    <ToggleGroup.Item value="toggle3" data-testid="toggle3" label="Toggle 3" />
   </ToggleGroup>
 );
 

@navikt/core/react/src/toggle-group/ToggleGroup.tsx

@@ -30,9 +30,9 @@ interface ToggleGroupComponent
  * @example
  * ```jsx
  * <ToggleGroup defaultValue="lest" onChange={console.log} size="small">
- *   <ToggleGroup.Item value="ulest">Ulest</ToggleGroup.Item>
- *   <ToggleGroup.Item value="lest">Leste</ToggleGroup.Item>
- *   <ToggleGroup.Item value="sendt">Sendt</ToggleGroup.Item>
+ *   <ToggleGroup.Item value="ulest" label="Ulest" />
+ *   <ToggleGroup.Item value="lest" label="Leste" />
+ *   <ToggleGroup.Item value="sendt" label="Sendt" />
  * </ToggleGroup>
  * ```
  */

@navikt/core/react/src/toggle-group/parts/ToggleItem.tsx

@@ -4,21 +4,62 @@ import { BodyShort } from "../../typography/BodyShort";
 import { useToggleGroupContext } from "../ToggleGroup.context";
 import { useToggleItem } from "./useToggleItem";
 
-export interface ToggleGroupItemProps
-  extends React.HTMLAttributes<HTMLButtonElement> {
-  /**
-   * Content.
-   */
-  children: React.ReactNode;
+type BaseProps = Omit<React.HTMLAttributes<HTMLButtonElement>, "children"> & {
   /**
    * Value for state-handling.
    */
   value: string;
-}
+};
+
+type ChildrenProps = {
+  /**
+   * @deprecated Use `label` and/or `icon` as replacement.
+   */
+  children: React.ReactNode;
+  label?: never;
+  icon?: never;
+};
+
+type LabelProps = {
+  children?: never;
+  /**
+   * Item label.
+   */
+  label: React.ReactNode;
+  /**
+   * Item Icon.
+   */
+  icon?: React.ReactNode;
+};
+
+type IconProps = {
+  children?: never;
+  /**
+   * Item label.
+   */
+  label?: React.ReactNode;
+  /**
+   * Item Icon.
+   */
+  icon: React.ReactNode;
+};
+
+export type ToggleGroupItemProps = BaseProps &
+  (ChildrenProps | LabelProps | IconProps);
 
 const ToggleItem = forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
   (
-    { className, children, value, onClick, onFocus, onKeyDown, ...rest },
+    {
+      className,
+      children,
+      icon,
+      label,
+      value,
+      onClick,
+      onFocus,
+      onKeyDown,
+      ...rest
+    },
     forwardedRef,
   ) => {
     const itemCtx = useToggleItem(
@@ -45,7 +86,12 @@ const ToggleItem = forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
           className="navds-toggle-group__button-inner"
           size={ctx?.size}
         >
-          {children}
+          {children ?? (
+            <>
+              {icon}
+              {label}
+            </>
+          )}
         </BodyShort>
       </button>
     );

@navikt/core/react/src/util/hooks/descendants/useDescendant.tsx

@@ -53,7 +53,7 @@ export function createDescendantContext<
     useClientLayoutEffect(() => {
       if (!ref.current) return;
       const dataIndex = Number(ref.current.dataset["index"]);
-      if (index != dataIndex && !Number.isNaN(dataIndex)) {
+      if (index !== dataIndex && !Number.isNaN(dataIndex)) {
         setIndex(dataIndex);
       }
     });

@navikt/core/react/src/util/hooks/descendants/utils.ts

@@ -37,7 +37,7 @@ export function sortNodes(nodes: Node[]) {
 }
 
 export const isElement = (el: any): el is HTMLElement =>
-  typeof el == "object" &&
+  typeof el === "object" &&
   "nodeType" in el &&
   el.nodeType === Node.ELEMENT_NODE;
 

@navikt/core/react/src/util/i18n/get.ts

@@ -38,10 +38,12 @@ export function get(
 
 function getKeypath(str: string) {
   const path: string[] = [];
-  let result: RegExpExecArray | null;
-  while ((result = OBJECT_NOTATION_MATCHER.exec(str))) {
+  let result = OBJECT_NOTATION_MATCHER.exec(str);
+
+  while (result) {
     const [, first, second] = result;
     path.push(first || second);
+    result = OBJECT_NOTATION_MATCHER.exec(str);
   }
 
   return path;

@navikt/core/tailwind/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/ds-tailwind
 
+## 6.11.0
+
+## 6.10.1
+
 ## 6.10.0
 
 ## 6.9.0

@navikt/core/tailwind/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tailwind",
-  "version": "6.10.0",
+  "version": "6.11.0",
   "description": "Tailwind config based on @navikt/ds-tokens",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -25,7 +25,7 @@
     "directory": "@navikt/core/tailwind"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^6.10.0",
+    "@navikt/ds-tokens": "^6.11.0",
     "color": "4.2.3",
     "lodash": "^4.17.21",
     "tailwindcss": "^3.3.3",

@navikt/core/tokens/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/ds-tokens
 
+## 6.11.0
+
+## 6.10.1
+
 ## 6.10.0
 
 ## 6.9.0

@navikt/core/tokens/config/version-tag.js

@@ -0,0 +1,15 @@
+const fs = require("fs");
+const path = require("path");
+
+const cssFilePath = path.join(__dirname, "../dist/tokens.css");
+const packageJsonPath = path.join(__dirname, "../package.json");
+
+const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf8"));
+const version = packageJson.version;
+
+let cssContent = fs.readFileSync(cssFilePath, "utf8");
+
+if (!cssContent.includes("--a-version")) {
+  cssContent = cssContent.replace("{", `{\n  --a-version: "${version}";`);
+  fs.writeFileSync(cssFilePath, cssContent);
+}

@navikt/core/tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tokens",
-  "version": "6.10.0",
+  "version": "6.11.0",
   "description": "Design-tokens for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -18,7 +18,7 @@
     "docs.json"
   ],
   "scripts": {
-    "build": "node ./config/build.js > /dev/null",
+    "build": "node ./config/build.js > /dev/null && node ./config/version-tag.js",
     "watch": "nodemon --watch src/index.js --exec \"yarn build\"",
     "token": "cd config && style-dictionary build",
     "test": "vitest run",

CHANGELOG.md

@@ -1,15 +1,43 @@
 # Changelog
 
+## 6.11
+
+### @navikt/ds-css
+
+- 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))
+
+### @navikt/ds-react
+
+- 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))
+
+* 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))
+
 ## 6.10
 
 ### @navikt/ds-css
 
-- ✨ Modal: add small version ([#2909](https://github.com/navikt/aksel/pull/2909))
+- :lipstick: Remove bottom margin on last item in Stepper and adjust FormProgress accordingly ([#2971](https://github.com/navikt/aksel/pull/2971))
+
+* ✨ Modal: add small version ([#2909](https://github.com/navikt/aksel/pull/2909))
 
 ### @navikt/ds-react
 
 - ✨ Modal: add small version ([#2909](https://github.com/navikt/aksel/pull/2909))
 
+### @navikt/aksel-icons
+
+- Icons: Added back support for sourcemapping. ([#2978](https://github.com/navikt/aksel/pull/2978))
+
 ## 6.9
 
 ### @navikt/ds-css
@@ -797,7 +825,7 @@
 
 * Border-radius: Fikset hardkodet border-radius i Datepicker, ToggleGroup og Combobox. ([#2159](https://github.com/navikt/aksel/pull/2159))
 
-- 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))
 
 * List: Fikset alignment av ikoner ([#2149](https://github.com/navikt/aksel/pull/2149))
 
@@ -805,7 +833,7 @@
 
 ### @navikt/ds-react
 
-- 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))
 
 * Fixes bug where combobox list could not be closed after clicking a chip ([#2155](https://github.com/navikt/aksel/pull/2155))
 

aksel.nav.no/package.json

@@ -15,10 +15,10 @@
     "playroom"
   ],
   "dependencies": {
-    "@navikt/aksel-icons": "^6.10.0",
-    "@navikt/ds-css": "^6.10.0",
-    "@navikt/ds-react": "^6.10.0",
-    "@navikt/ds-tailwind": "^6.10.0",
-    "@navikt/ds-tokens": "^6.10.0"
+    "@navikt/aksel-icons": "^6.11.0",
+    "@navikt/ds-css": "^6.11.0",
+    "@navikt/ds-react": "^6.11.0",
+    "@navikt/ds-tailwind": "^6.11.0",
+    "@navikt/ds-tokens": "^6.11.0"
   }
 }

aksel.nav.no/website/.gitignore

@@ -1,3 +1,4 @@
 public/sandbox
 test-results/
-tsconfig.tsbuildinfo
+tsconfig.tsbuildinfo
+___temp

aksel.nav.no/website/components/layout/footer/Footer.tsx

@@ -41,7 +41,7 @@ const Footer = () => {
               },
               { url: "https://sikkerhet.nav.no/", text: "Security Playbook" },
               {
-                url: "https://etterlevelse.intern.nav.no/",
+                url: "https://etterlevelse.ansatt.nav.no/",
                 text: "Etterlevelse",
               },
             ]}

aksel.nav.no/website/components/layout/god-praksis-page/chipnavigation/GpChipRow.tsx

@@ -44,8 +44,8 @@ export function GpChipRow({ type, entries }: GpChipRowProps) {
           "text-teal-700": type === "undertema",
         })}
       >
-        {type == "undertema" && <TagFillIcon fontSize="20" aria-hidden />}
-        {type == "innholdstype" && <FileFillIcon fontSize="20" aria-hidden />}
+        {type === "undertema" && <TagFillIcon fontSize="20" aria-hidden />}
+        {type === "innholdstype" && <FileFillIcon fontSize="20" aria-hidden />}
         {capitalize(type)}
       </Label>
 

aksel.nav.no/website/components/sanity-modules/code-snippet/Snippet.tsx

@@ -73,7 +73,7 @@ const CodeSnippet = ({ node: { code, title } }: CodeSnippetProps) => {
               {tokens.map((line, i) => (
                 <span
                   key={i}
-                  {...getLineProps({ line, key: i })}
+                  {...getLineProps({ line })}
                   className={cl(
                     "last-of-type:pb-4",
                     terminalStyling(language) ? "flex items-center" : "block",
@@ -86,7 +86,7 @@ const CodeSnippet = ({ node: { code, title } }: CodeSnippetProps) => {
                     />
                   )}
                   {line.map((token, key) => (
-                    <span key={key} {...getTokenProps({ token, key })} />
+                    <span key={key} {...getTokenProps({ token })} />
                   ))}
                 </span>
               ))}

aksel.nav.no/website/components/website-modules/SanityBlockContent.tsx

@@ -96,6 +96,7 @@ const serializers: Partial<PortableTextReactComponents> = {
   },
   marks: {
     kbd: ({ text }) => <KBD>{text}</KBD>,
+    quote: ({ text }) => <q>{text}</q>,
     code: ({ text }) => <InlineCode>{text}</InlineCode>,
     link: ({ text, value: { href } }: PortableTextMarkComponentProps<any>) => {
       if (!href) {

aksel.nav.no/website/components/website-modules/examples/__parts-inline/FormNavigation.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import {
+  ArrowLeftIcon,
+  FloppydiskIcon,
+  PaperplaneIcon,
+  TrashIcon,
+} from "@navikt/aksel-icons";
+import { BodyShort, Button, HGrid, VStack } from "@navikt/ds-react";
+
+const FormNavigation = () => (
+  <VStack gap="4">
+    <BodyShort as="div" size="small" textColor="subtle">
+      Sist lagret: 10. mars 2024 kl. 13.55
+    </BodyShort>
+    <HGrid
+      gap="8 4"
+      columns={{ xs: 1, sm: 2 }}
+      style={{ width: "fit-content" }}
+    >
+      <Button
+        variant="secondary"
+        icon={<ArrowLeftIcon aria-hidden />}
+        iconPosition="left"
+      >
+        Forrige steg
+      </Button>
+      <Button
+        variant="primary"
+        icon={<PaperplaneIcon aria-hidden />}
+        iconPosition="right"
+      >
+        Send søknad
+      </Button>
+
+      <Button
+        variant="tertiary"
+        icon={<FloppydiskIcon aria-hidden />}
+        iconPosition="left"
+      >
+        Fortsett senere
+      </Button>
+      <Button
+        variant="tertiary"
+        icon={<TrashIcon aria-hidden />}
+        iconPosition="left"
+      >
+        Slett søknaden
+      </Button>
+    </HGrid>
+  </VStack>
+);
+
+export default FormNavigation;

aksel.nav.no/website/components/website-modules/examples/__parts/ApplicationPictogram.tsx

@@ -0,0 +1,99 @@
+import React from "react";
+
+const ApplicationPictogram = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="72"
+    height="72"
+    viewBox="0 0 72 72"
+    fill="none"
+    style={{ flexShrink: 0 }}
+    aria-hidden
+  >
+    <rect x="23.25" y="22.5" width="26.25" height="9" fill="#CCE2F0" />
+    <rect x="23.25" y="36.75" width="26.25" height="9" fill="#CCE2F0" />
+    <circle cx="36.75" cy="34.5" r="21" fill="#CCE2F0" />
+    <path
+      d="M23.7672 5.508L30.1202 11.8434M1.5 33.75H34.5M26.4706 2.81211L10.5882 18.6506L9 26.5699L16.9412 24.986L32.8235 9.14751C34.5778 7.39804 34.5778 4.56158 32.8235 2.81211C31.0692 1.06263 28.2249 1.06263 26.4706 2.81211Z"
+      stroke="#23262A"
+      strokeWidth="2.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M56.25 44.25L63.75 44.25"
+      stroke="#262626"
+      strokeWidth="2.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M56.25 52.5L63.75 52.5"
+      stroke="#262626"
+      strokeWidth="2.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M56.25 60.75L63.75 60.75"
+      stroke="#262626"
+      strokeWidth="2.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M48 52.5L51 52.5"
+      stroke="#262626"
+      strokeWidth="2.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M48 52.5L51 52.5"
+      stroke="#262626"
+      strokeWidth="2.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M48 44.25L51 44.25"
+      stroke="#262626"
+      strokeWidth="2.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M48 44.25L51 44.25"
+      stroke="#262626"
+      strokeWidth="2.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M48 60.75L51 60.75"
+      stroke="#262626"
+      strokeWidth="2.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M48 60.75L51 60.75"
+      stroke="#262626"
+      strokeWidth="2.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <rect
+      x="41.25"
+      y="33"
+      width="29.25"
+      height="37.5"
+      stroke="#262626"
+      strokeWidth="2.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default ApplicationPictogram;

aksel.nav.no/website/components/website-modules/examples/__parts/Dekorator.tsx

@@ -0,0 +1,46 @@
+import React, { useEffect } from "react";
+
+function Header() {
+  return <div id="decorator-header" />;
+}
+
+function Footer() {
+  return <div id="decorator-footer" />;
+}
+
+const MILJO_URL = "https://www.nav.no/dekoratoren";
+
+function Env() {
+  return (
+    <div
+      id="decorator-env"
+      data-src={`${MILJO_URL}/env?context=privatperson&simple=true&availableLanguages=[{"locale":"nb","url":"https://www.nav.no/person/kontakt-oss"},{"locale":"en","url":"https://www.nav.no/person/kontakt-oss/en/"}]`}
+    />
+  );
+}
+
+/**
+ * OBS: Dette er ikke anbefalt metode for å laste dekoratør!
+ * Se `nav-dekoratoren`-dokumentasjon for riktig implementasjon
+ * @see https://github.com/navikt/nav-dekoratoren
+ */
+function useDekorator() {
+  useEffect(() => {
+    const script = document.createElement("script");
+    script.src = `${MILJO_URL}/client.js`;
+    script.async = true;
+    document.body.appendChild(script);
+
+    const styles = document.createElement("link");
+    styles.href = `${MILJO_URL}/css/client.css`;
+    styles.rel = "stylesheet";
+    document.head.appendChild(styles);
+
+    return () => {
+      document.body.removeChild(script);
+      document.head.removeChild(styles);
+    };
+  }, []);
+}
+
+export { Header, Footer, Env, useDekorator };

aksel.nav.no/website/components/website-modules/icon-page/Page.tsx

@@ -123,8 +123,8 @@ export const IconPage = ({ name }: { name: string }) => {
                     aria-label="Velg ikonvariant"
                     className="shrink-0"
                   >
-                    <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>
                   <Search
                     variant="simple"

aksel.nav.no/website/components/website-modules/preview/LiveQuery.tsx

@@ -1,27 +1,18 @@
 import { useLiveQuery } from "next-sanity/preview";
 import dynamic from "next/dynamic";
-import { runResolvers } from "./resolvers";
-import { PreviewProps } from "./types";
+import { PreviewProps } from "./Preview.types";
 
 const PreviewBanner = dynamic(() => import("@/web/PreviewBanner"), {
   ssr: false,
 });
 
-function LiveQuery({
-  comp: Comp,
-  query,
-  params,
-  props,
-  resolvers,
-}: PreviewProps) {
+function LiveQuery({ children, query, params, props }: PreviewProps) {
   const [data, loading] = useLiveQuery(props, query, params);
 
-  const _data = loading ? props : runResolvers({ resolvers, data });
-
   return (
     <>
       <PreviewBanner loading={loading} />
-      <Comp {..._data} />
+      {children({ ...props, ...data }, loading)}
     </>
   );
 }

aksel.nav.no/website/components/website-modules/preview/LiveQueryProvider.tsx

@@ -0,0 +1,23 @@
+import { LiveQueryProvider as SanityLiveQueryProvider } from "next-sanity/preview";
+import { previewDraftsClient } from "@/sanity/client.server";
+import LiveQuery from "./LiveQuery";
+import { PreviewProps } from "./Preview.types";
+
+const client = previewDraftsClient();
+
+const LiveQueryProvider = ({
+  query,
+  params,
+  props,
+  children,
+}: PreviewProps) => {
+  return (
+    <SanityLiveQueryProvider client={client}>
+      <LiveQuery props={props} query={query} params={params}>
+        {children}
+      </LiveQuery>
+    </SanityLiveQueryProvider>
+  );
+};
+
+export default LiveQueryProvider;

aksel.nav.no/website/components/website-modules/preview/PagePreview.tsx

@@ -0,0 +1,8 @@
+import dynamic from "next/dynamic";
+import { PreviewProps } from "./Preview.types";
+
+const LiveQueryProvider = dynamic(() => import("./LiveQueryProvider"));
+
+export function PagePreview(props: PreviewProps) {
+  return <LiveQueryProvider {...props} />;
+}

aksel.nav.no/website/components/website-modules/preview/Preview.types.ts

@@ -0,0 +1,17 @@
+import type { QueryParams } from "next-sanity";
+
+export type PreviewProps = {
+  children: (props: PreviewProps["props"], loading: boolean) => React.ReactNode;
+  /**
+   * Sanity(groq)-query to run live data on
+   */
+  query: string;
+  /**
+   * sanity(groq)-params
+   */
+  params?: QueryParams;
+  /**
+   * Default/fallback-data if preview fails and for initial load
+   */
+  props: any;
+};

aksel.nav.no/website/components/website-modules/preview/WithPreview.tsx

@@ -1,35 +0,0 @@
-import { LiveQueryProvider } from "next-sanity/preview";
-import { useMemo } from "react";
-import { getClient } from "@/sanity/client.server";
-import LiveQuery from "./parts/LiveQuery";
-import { PreviewProps } from "./parts/types";
-
-const WithPreview = ({
-  comp,
-  query,
-  params,
-  props,
-  resolvers,
-}: PreviewProps) => {
-  const client = useMemo(() => {
-    return getClient().withConfig({
-      useCdn: false,
-      ignoreBrowserTokenWarning: true,
-      perspective: "previewDrafts",
-    });
-  }, []);
-
-  return (
-    <LiveQueryProvider client={client}>
-      <LiveQuery
-        props={props}
-        query={query}
-        params={params}
-        comp={comp}
-        resolvers={resolvers}
-      />
-    </LiveQueryProvider>
-  );
-};
-
-export default WithPreview;

aksel.nav.no/website/components/website-modules/preview/parts/__tests__/resolvers.test.ts

@@ -1,65 +0,0 @@
-import { describe, expect, test } from "vitest";
-import { runResolvers } from "../resolvers";
-
-describe("runResolvers", () => {
-  test("should return original data when resolvers is null", () => {
-    const data = { key: "value" };
-    expect(runResolvers({ resolvers: null, data })).toEqual(data);
-  });
-
-  test("should return original data when resolvers is an empty array", () => {
-    const data = { key: "value" };
-    expect(runResolvers({ resolvers: [], data })).toEqual(data);
-  });
-
-  test("should run resolver callback with data from specified keys", () => {
-    const data = { key1: "value1", key2: "value2" };
-    const resolvers = [
-      {
-        key: "result",
-        dataKeys: ["key1", "key2"],
-        cb: (value) => value[0] + value[1],
-      },
-    ];
-    expect(runResolvers({ resolvers, data })).toEqual({
-      ...data,
-      result: "value1value2",
-    });
-  });
-
-  test("should run multiple resolver callbacks", () => {
-    const data = { key1: "value1", key2: "value2" };
-    const resolvers = [
-      {
-        key: "result1",
-        dataKeys: ["key1"],
-        cb: (value) => value[0] + "suffix",
-      },
-      {
-        key: "result2",
-        dataKeys: ["key2"],
-        cb: (value) => "prefix" + value[0],
-      },
-    ];
-    expect(runResolvers({ resolvers, data })).toEqual({
-      ...data,
-      result1: "value1suffix",
-      result2: "prefixvalue2",
-    });
-  });
-
-  test("should handle nested keys", () => {
-    const data = { key1: { key2: "value2" } };
-    const resolvers = [
-      {
-        key: "result",
-        dataKeys: ["key1.key2"],
-        cb: (value) => "prefix" + value[0],
-      },
-    ];
-    expect(runResolvers({ resolvers, data })).toEqual({
-      ...data,
-      result: "prefixvalue2",
-    });
-  });
-});

aksel.nav.no/website/components/website-modules/preview/parts/resolvers.ts

@@ -1,43 +0,0 @@
-import { ResolverT } from "./types";
-
-/**
- * `runResolvers` is responsible for executing a set of resolvers for streamed data from sanity.
- * This allows running functions and parse data both at initial load `getStaticProps` and when streamed `useLiveQuery`
- * @param {Resolvers[]}
- * @returns any
- */
-export function runResolvers({
-  resolvers,
-  data,
-}: {
-  resolvers?: ResolverT | null;
-  data: any;
-}) {
-  if (!resolvers) {
-    return data;
-  }
-
-  return resolvers.reduce((acc, resolver) => {
-    /* Not allowed to edit accumulators directly as its readonly*/
-    // biome-ignore lint/performance/noAccumulatingSpread: <explanation>
-    const _acc = { ...acc };
-    const dataFromKeys = resolver.dataKeys.map((key) =>
-      getNestedProperty(_acc, key),
-    );
-
-    /**
-     * In some cases the data can be undefined. This filters this out and avoids overriding it
-     */
-    if (dataFromKeys.filter((x) => !!x).length > 0) {
-      _acc[resolver.key] = resolver.cb(dataFromKeys);
-    }
-
-    return _acc;
-  }, data);
-}
-
-function getNestedProperty(obj: any, path: string) {
-  return path
-    .split(".")
-    .reduce((acc, key) => (acc ? acc[key] : undefined), obj);
-}