Version Packages (#3340 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Chore: Fix npm/github version mismatch
2026-10-13 01:02:02 +00:00 · 2024-11-08 12:14:52 +01:00 · 2024-11-08 12:12:35 +01:00 · 2024-11-08 11:54:36 +01:00 · 2024-11-08 11:28:25 +01:00 · 2024-11-08 10:52:51 +01:00
126 changed files with 1450 additions and 1570 deletions
@@ -34,9 +34,6 @@ jobs:
      - name: Install dependencies
        run: yarn

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

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

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

-      - name: Create empty .env file (Can be removed when env-file-if-exists is implemented in node v22)
-        run: echo "" > ./aksel.nav.no/website/.env
-
      - name: Export dataset
        env:
          SANITY_READ: ${{ secrets.SANITY_READ }}
@@ -55,21 +55,12 @@ jobs:
          exitZeroOnChanges: false
          buildScriptName: "build:storybook-chromatic"
          onlyChanged: true
-          untraced: "**/package.json|yarn.lock|**/*.md"
-          externals: \@navikt/core/css/**/*.css
+          untraced: "**/package.json|yarn.lock|**/*.md|**/core/css/**/*.darkside.css"
+          externals: "\\@navikt/core/css/**/*.css|\\!@navikt/core/css/darkside/**/*.css"
          traceChanged: true
        env:
          STORYBOOK_GITHUB_SHA: ${{ github.sha }}

-      - name: replace storybook url
-        if: "!contains(github.event.head_commit.message, '[ci skip]') && github.event_name != 'push'"
-        uses: frabert/replace-string-action@v2
-        id: storybook_url
-        with:
-          pattern: "(iframe.html)"
-          string: ${{ steps.chromatic_tests.outputs.storybookUrl }}
-          replace-with: ""
-
      - name: Get commit sha
        if: "!contains(github.event.head_commit.message, '[ci skip]') && github.event_name != 'push'"
        id: vars
@@ -93,7 +84,7 @@ jobs:
          comment-id: ${{ steps.fc.outputs.comment-id }}
          issue-number: ${{ github.event.pull_request.number }}
          body: |
-            ## [Storybook demo](${{steps.storybook_url.outputs.replaced}})
+            ## [Storybook demo](${{steps.chromatic_tests.outputs.storybookUrl}})

            [${{ steps.vars.outputs.sha_short }}](https://github.com/navikt/aksel/commit/${{ steps.vars.outputs.sha_short }}) | ${{steps.chromatic_tests.outputs.componentCount}} komponenter | ${{steps.chromatic_tests.outputs.specCount}} stories
          edit-mode: replace
@@ -105,9 +96,12 @@ jobs:
          comment-id: ${{ steps.fc.outputs.comment-id }}
          issue-number: ${{ github.event.pull_request.number }}
          body: |
-            ## [Storybook demo](${{steps.storybook_url.outputs.replaced}})
+            ## [Storybook demo](${{steps.chromatic_tests.outputs.storybookUrl}}) / [Chromatic](${{steps.chromatic_tests.outputs.url}})

-            ### [Endringer til review](${{steps.chromatic_tests.outputs.url}}): ${{steps.chromatic_tests.outputs.changeCount}}
+            ### 📝 Endringer til review: ${{steps.chromatic_tests.outputs.changeCount}}
+
+            ${{ steps.chromatic_tests.outputs.errorCount > 0 && format('### ❌ Stories med feil: {0}', steps.chromatic_tests.outputs.errorCount) || '' }}
+            ${{ steps.chromatic_tests.outputs.interactionTestFailuresCount > 0 && format('### ❌ Feilede interaksjonstester: {0}', steps.chromatic_tests.outputs.interactionTestFailuresCount) || '' }}

            [${{ steps.vars.outputs.sha_short }}](https://github.com/navikt/aksel/commit/${{ steps.vars.outputs.sha_short }}) | ${{steps.chromatic_tests.outputs.componentCount}} komponenter | ${{steps.chromatic_tests.outputs.specCount}} stories
          edit-mode: replace
@@ -31,9 +31,6 @@ jobs:
        run: |
          yarn boot

-      - name: Create empty .env file (Can be removed when env-file-if-exists is implemented in node v22)
-        run: echo "" > ./aksel.nav.no/website/.env
-
      - name: Build application
        env:
          SANITY_READ: ${{ secrets.SANITY_READ }}
@@ -2,6 +2,7 @@ import { withThemeByClassName } from "@storybook/addon-themes";
 import React, { useLayoutEffect } from "react";
 import darksideCss from "@navikt/ds-css/darkside/index.css?inline";
 import defaultCss from "@navikt/ds-css/index.css?inline";
+import { UNSAFE_AkselTheme } from "../@navikt/core/react/src/provider";
 import "./layout.css";

 export const parameters = {
@@ -43,7 +44,7 @@ export const initialGlobals = {
  mode: "default",
 };

-const ModeDecorator = ({ children, mode }) => {
+const ModeDecorator = ({ children, mode, theme }) => {
  useLayoutEffect(() => {
    const style = document.createElement("style");
    style.innerHTML = mode === "darkside" ? darksideCss : defaultCss;
@@ -59,12 +60,18 @@ const ModeDecorator = ({ children, mode }) => {
    };
  }, [mode]);

-  return children;
+  return mode === "darkside" ? (
+    <UNSAFE_AkselTheme theme={theme || undefined} hasBackground={false}>
+      {children}
+    </UNSAFE_AkselTheme>
+  ) : (
+    children
+  );
 };

 export const decorators = [
  (StoryFn, context) => (
-    <ModeDecorator mode={context.globals.mode}>
+    <ModeDecorator mode={context.globals.mode} theme={context.globals.theme}>
      <StoryFn />
    </ModeDecorator>
  ),
@@ -1,5 +1,8 @@
 {
-  "cssVariables.lookupFiles": ["@navikt/core/css/dist/index.css"],
+  "cssVariables.lookupFiles": [
+    "@navikt/core/tokens/dist/tokens.css",
+    "@navikt/core/tokens/dist/darkside/tokens.css"
+  ],
  "eslint.problems.shortenToSingleLine": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "files.watcherExclude": {
@@ -1,5 +1,15 @@
 # @navikt/aksel-icons

+## 7.5.1
+
+## 7.5.0
+
+### Minor Changes
+
+- Icons: 🎉 Added FileJpeg, FilePng and MedicalThermometer. ([#3332](https://github.com/navikt/aksel/pull/3332))
+
+## 7.4.3
+
 ## 7.4.2

 ## 7.4.1
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.20973 16.193H9.90274C10.1267 16.193 10.3041 16.1323 10.4347 16.011C10.5701 15.885 10.6377 15.7193 10.6377 15.514C10.6377 15.3087 10.5701 15.1453 10.4347 15.024C10.3041 14.898 10.1267 14.835 9.90274 14.835H9.20973V16.193Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.25 4.5C5.25 3.80964 5.80964 3.25 6.5 3.25H14C14.1989 3.25 14.3897 3.32902 14.5303 3.46967L18.5303 7.46967C18.671 7.61032 18.75 7.80109 18.75 8V12.25H21C21.4142 12.25 21.75 12.5858 21.75 13V20C21.75 20.4142 21.4142 20.75 21 20.75H3C2.58579 20.75 2.25 20.4142 2.25 20V13C2.25 12.5858 2.58579 12.25 3 12.25H5.25V4.5ZM6.75 12.25H17.25V8.75H14.5C13.8096 8.75 13.25 8.19036 13.25 7.5V4.75H6.75V12.25ZM14.75 5.81066L16.1893 7.25H14.75V5.81066ZM5.18047 19.077C4.6438 19.077 4.2168 18.9323 3.89947 18.643C3.5868 18.349 3.43047 17.9547 3.43047 17.46H4.48047C4.48047 17.6747 4.54347 17.8473 4.66947 17.978C4.79547 18.104 4.9658 18.167 5.18047 18.167C5.39514 18.167 5.56547 18.1063 5.69147 17.985C5.81747 17.859 5.88047 17.6887 5.88047 17.474V14.87H4.72547V13.89H6.93047V17.474C6.93047 17.9687 6.77414 18.3607 6.46147 18.65C6.1488 18.9347 5.7218 19.077 5.18047 19.077ZM8.15973 19V13.89H9.90274C10.2621 13.89 10.5747 13.9577 10.8407 14.093C11.1114 14.2283 11.3191 14.4173 11.4637 14.66C11.6131 14.9027 11.6877 15.1873 11.6877 15.514C11.6877 15.836 11.6131 16.1207 11.4637 16.368C11.3144 16.6107 11.1067 16.7997 10.8407 16.935C10.5747 17.0703 10.2621 17.138 9.90274 17.138H9.20973V19H8.15973ZM12.665 19V13.89H15.815V14.786H13.694V15.934H15.57V16.83H13.694V18.104H15.815V19H12.665ZM18.6403 19.07C18.2996 19.07 18.0009 19.007 17.7443 18.881C17.4876 18.7503 17.2869 18.5707 17.1423 18.342C17.0023 18.1087 16.9323 17.838 16.9323 17.53V15.36C16.9323 15.0473 17.0023 14.7767 17.1423 14.548C17.2869 14.3193 17.4876 14.142 17.7443 14.016C18.0009 13.8853 18.2996 13.82 18.6403 13.82C18.9856 13.82 19.2843 13.8853 19.5363 14.016C19.7929 14.142 19.9913 14.3193 20.1313 14.548C20.2759 14.7767 20.3483 15.0473 20.3483 15.36H19.2983C19.2983 15.1547 19.2399 14.9983 19.1233 14.891C19.0113 14.7837 18.8503 14.73 18.6403 14.73C18.4303 14.73 18.2669 14.7837 18.1503 14.891C18.0383 14.9983 17.9823 15.1547 17.9823 15.36V17.53C17.9823 17.7307 18.0383 17.887 18.1503 17.999C18.2669 18.1063 18.4303 18.16 18.6403 18.16C18.8503 18.16 19.0113 18.1063 19.1233 17.999C19.2399 17.887 19.2983 17.7307 19.2983 17.53V17.089H18.5423V16.2H20.3483V17.53C20.3483 17.838 20.2759 18.1087 20.1313 18.342C19.9913 18.5707 19.7929 18.7503 19.5363 18.881C19.2843 19.007 18.9856 19.07 18.6403 19.07Z" fill="#23262A"/>
+</svg>
@@ -0,0 +1,13 @@
+name: FileJpeg
+category: Files and application
+sub_category: Files
+keywords:
+  - document
+  - dokument
+  - fil
+  - file
+  - jpg
+  - jpeg
+variant: Stroke
+updated_at: 06.11.2024
+created_at: 06.11.2024
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 3.25C13.1381 3.25 13.25 3.36193 13.25 3.5V7.5C13.25 8.19036 13.8096 8.75 14.5 8.75H18.5C18.6381 8.75 18.75 8.86193 18.75 9V10.5C18.75 10.6381 18.6381 10.75 18.5 10.75H5.5C5.36193 10.75 5.25 10.6381 5.25 10.5V4.5C5.25 3.80964 5.80964 3.25 6.5 3.25H13ZM15.1768 4.11612C15.0193 3.95863 14.75 4.07017 14.75 4.29289V7C14.75 7.13807 14.8619 7.25 15 7.25H17.7071C17.9298 7.25 18.0414 6.98072 17.8839 6.82322L15.1768 4.11612Z" fill="#23262A"/>
+<path d="M9.90274 16.193H9.20973V14.835H9.90274C10.1267 14.835 10.3041 14.898 10.4347 15.024C10.5701 15.1453 10.6377 15.3087 10.6377 15.514C10.6377 15.7193 10.5701 15.885 10.4347 16.011C10.3041 16.1323 10.1267 16.193 9.90274 16.193Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 12.25C2.58579 12.25 2.25 12.5858 2.25 13V20C2.25 20.4142 2.58579 20.75 3 20.75H21C21.4142 20.75 21.75 20.4142 21.75 20V13C21.75 12.5858 21.4142 12.25 21 12.25H3ZM3.89947 18.643C4.2168 18.9323 4.6438 19.077 5.18047 19.077C5.7218 19.077 6.1488 18.9347 6.46147 18.65C6.77414 18.3607 6.93047 17.9687 6.93047 17.474V13.89H4.72547V14.87H5.88047V17.474C5.88047 17.6887 5.81747 17.859 5.69147 17.985C5.56547 18.1063 5.39514 18.167 5.18047 18.167C4.9658 18.167 4.79547 18.104 4.66947 17.978C4.54347 17.8473 4.48047 17.6747 4.48047 17.46H3.43047C3.43047 17.9547 3.5868 18.349 3.89947 18.643ZM8.15973 13.89V19H9.20973V17.138H9.90274C10.2621 17.138 10.5747 17.0703 10.8407 16.935C11.1067 16.7997 11.3144 16.6107 11.4637 16.368C11.6131 16.1207 11.6877 15.836 11.6877 15.514C11.6877 15.1873 11.6131 14.9027 11.4637 14.66C11.3191 14.4173 11.1114 14.2283 10.8407 14.093C10.5747 13.9577 10.2621 13.89 9.90274 13.89H8.15973ZM12.665 13.89V19H15.815V18.104H13.694V16.83H15.57V15.934H13.694V14.786H15.815V13.89H12.665ZM17.7443 18.881C18.0009 19.007 18.2996 19.07 18.6403 19.07C18.9856 19.07 19.2843 19.007 19.5363 18.881C19.7929 18.7503 19.9913 18.5707 20.1313 18.342C20.2759 18.1087 20.3483 17.838 20.3483 17.53V16.2H18.5423V17.089H19.2983V17.53C19.2983 17.7307 19.2399 17.887 19.1233 17.999C19.0113 18.1063 18.8503 18.16 18.6403 18.16C18.4303 18.16 18.2669 18.1063 18.1503 17.999C18.0383 17.887 17.9823 17.7307 17.9823 17.53V15.36C17.9823 15.1547 18.0383 14.9983 18.1503 14.891C18.2669 14.7837 18.4303 14.73 18.6403 14.73C18.8503 14.73 19.0113 14.7837 19.1233 14.891C19.2399 14.9983 19.2983 15.1547 19.2983 15.36H20.3483C20.3483 15.0473 20.2759 14.7767 20.1313 14.548C19.9913 14.3193 19.7929 14.142 19.5363 14.016C19.2843 13.8853 18.9856 13.82 18.6403 13.82C18.2996 13.82 18.0009 13.8853 17.7443 14.016C17.4876 14.142 17.2869 14.3193 17.1423 14.548C17.0023 14.7767 16.9323 15.0473 16.9323 15.36V17.53C16.9323 17.838 17.0023 18.1087 17.1423 18.342C17.2869 18.5707 17.4876 18.7503 17.7443 18.881Z" fill="#23262A"/>
+</svg>
@@ -0,0 +1,13 @@
+name: FileJpegFill
+category: Files and application
+sub_category: Files
+keywords:
+  - document
+  - dokument
+  - fil
+  - file
+  - jpg
+  - jpeg
+variant: Fill
+updated_at: 06.11.2024
+created_at: 06.11.2024
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.0061 16.193H7.6991C7.9231 16.193 8.10043 16.1323 8.2311 16.011C8.36644 15.885 8.4341 15.7193 8.4341 15.514C8.4341 15.3087 8.36644 15.1453 8.2311 15.024C8.10043 14.898 7.9231 14.835 7.6991 14.835H7.0061V16.193Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.25 4.5C5.25 3.80964 5.80964 3.25 6.5 3.25H14C14.1989 3.25 14.3897 3.32902 14.5303 3.46967L18.5303 7.46967C18.671 7.61032 18.75 7.80109 18.75 8V12.25H21C21.4142 12.25 21.75 12.5858 21.75 13V20C21.75 20.4142 21.4142 20.75 21 20.75H3C2.58579 20.75 2.25 20.4142 2.25 20V13C2.25 12.5858 2.58579 12.25 3 12.25H5.25V4.5ZM6.75 12.25H17.25V8.75H14.5C13.8096 8.75 13.25 8.19036 13.25 7.5V4.75H6.75V12.25ZM14.75 5.81066L16.1893 7.25H14.75V5.81066ZM5.9561 19V13.89H7.6991C8.05843 13.89 8.3711 13.9577 8.6371 14.093C8.90777 14.2283 9.11544 14.4173 9.2601 14.66C9.40944 14.9027 9.4841 15.1873 9.4841 15.514C9.4841 15.836 9.40944 16.1207 9.2601 16.368C9.11077 16.6107 8.9031 16.7997 8.6371 16.935C8.3711 17.0703 8.05843 17.138 7.6991 17.138H7.0061V19H5.9561ZM10.3214 19V13.89H11.5464L12.8694 17.845C12.8554 17.6723 12.839 17.474 12.8204 17.25C12.8017 17.0213 12.7854 16.795 12.7714 16.571C12.762 16.3423 12.7574 16.1487 12.7574 15.99V13.89H13.6814V19H12.4564L11.1474 15.045C11.1614 15.1943 11.1754 15.3717 11.1894 15.577C11.2034 15.7823 11.215 15.99 11.2244 16.2C11.2384 16.41 11.2454 16.5967 11.2454 16.76V19H10.3214ZM16.4366 19.07C16.096 19.07 15.7973 19.007 15.5406 18.881C15.284 18.7503 15.0833 18.5707 14.9386 18.342C14.7986 18.1087 14.7286 17.838 14.7286 17.53V15.36C14.7286 15.0473 14.7986 14.7767 14.9386 14.548C15.0833 14.3193 15.284 14.142 15.5406 14.016C15.7973 13.8853 16.096 13.82 16.4366 13.82C16.782 13.82 17.0806 13.8853 17.3326 14.016C17.5893 14.142 17.7876 14.3193 17.9276 14.548C18.0723 14.7767 18.1446 15.0473 18.1446 15.36H17.0946C17.0946 15.1547 17.0363 14.9983 16.9196 14.891C16.8076 14.7837 16.6466 14.73 16.4366 14.73C16.2266 14.73 16.0633 14.7837 15.9466 14.891C15.8346 14.9983 15.7786 15.1547 15.7786 15.36V17.53C15.7786 17.7307 15.8346 17.887 15.9466 17.999C16.0633 18.1063 16.2266 18.16 16.4366 18.16C16.6466 18.16 16.8076 18.1063 16.9196 17.999C17.0363 17.887 17.0946 17.7307 17.0946 17.53V17.089H16.3386V16.2H18.1446V17.53C18.1446 17.838 18.0723 18.1087 17.9276 18.342C17.7876 18.5707 17.5893 18.7503 17.3326 18.881C17.0806 19.007 16.782 19.07 16.4366 19.07Z" fill="#23262A"/>
+</svg>
@@ -0,0 +1,12 @@
+name: FilePng
+category: Files and application
+sub_category: Files
+keywords:
+  - document
+  - dokument
+  - fil
+  - file
+  - png
+variant: Stroke
+updated_at: 06.11.2024
+created_at: 06.11.2024
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.25 3.5C13.25 3.36193 13.1381 3.25 13 3.25H6.5C5.80964 3.25 5.25 3.80964 5.25 4.5V10.5C5.25 10.6381 5.36193 10.75 5.5 10.75H18.5C18.6381 10.75 18.75 10.6381 18.75 10.5V9C18.75 8.86193 18.6381 8.75 18.5 8.75H14.5C13.8096 8.75 13.25 8.19036 13.25 7.5V3.5Z" fill="#23262A"/>
+<path d="M14.75 4.29289C14.75 4.07017 15.0193 3.95863 15.1768 4.11612L17.8839 6.82322C18.0414 6.98072 17.9298 7.25 17.7071 7.25H15C14.8619 7.25 14.75 7.13807 14.75 7V4.29289Z" fill="#23262A"/>
+<path d="M7.0061 16.193H7.6991C7.9231 16.193 8.10043 16.1323 8.2311 16.011C8.36644 15.885 8.4341 15.7193 8.4341 15.514C8.4341 15.3087 8.36644 15.1453 8.2311 15.024C8.10043 14.898 7.9231 14.835 7.6991 14.835H7.0061V16.193Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 13C2.25 12.5858 2.58579 12.25 3 12.25H21C21.4142 12.25 21.75 12.5858 21.75 13V20C21.75 20.4142 21.4142 20.75 21 20.75H3C2.58579 20.75 2.25 20.4142 2.25 20V13ZM5.9561 19V13.89H7.6991C8.05843 13.89 8.3711 13.9577 8.6371 14.093C8.90777 14.2283 9.11544 14.4173 9.2601 14.66C9.40944 14.9027 9.4841 15.1873 9.4841 15.514C9.4841 15.836 9.40944 16.1207 9.2601 16.368C9.11077 16.6107 8.9031 16.7997 8.6371 16.935C8.3711 17.0703 8.05843 17.138 7.6991 17.138H7.0061V19H5.9561ZM10.3214 19V13.89H11.5464L12.8694 17.845C12.8554 17.6723 12.839 17.474 12.8204 17.25C12.8017 17.0213 12.7854 16.795 12.7714 16.571C12.762 16.3423 12.7574 16.1487 12.7574 15.99V13.89H13.6814V19H12.4564L11.1474 15.045C11.1614 15.1943 11.1754 15.3717 11.1894 15.577C11.2034 15.7823 11.215 15.99 11.2244 16.2C11.2384 16.41 11.2454 16.5967 11.2454 16.76V19H10.3214ZM16.4366 19.07C16.096 19.07 15.7973 19.007 15.5406 18.881C15.284 18.7503 15.0833 18.5707 14.9386 18.342C14.7986 18.1087 14.7286 17.838 14.7286 17.53V15.36C14.7286 15.0473 14.7986 14.7767 14.9386 14.548C15.0833 14.3193 15.284 14.142 15.5406 14.016C15.7973 13.8853 16.096 13.82 16.4366 13.82C16.782 13.82 17.0806 13.8853 17.3326 14.016C17.5893 14.142 17.7876 14.3193 17.9276 14.548C18.0723 14.7767 18.1446 15.0473 18.1446 15.36H17.0946C17.0946 15.1547 17.0363 14.9983 16.9196 14.891C16.8076 14.7837 16.6466 14.73 16.4366 14.73C16.2266 14.73 16.0633 14.7837 15.9466 14.891C15.8346 14.9983 15.7786 15.1547 15.7786 15.36V17.53C15.7786 17.7307 15.8346 17.887 15.9466 17.999C16.0633 18.1063 16.2266 18.16 16.4366 18.16C16.6466 18.16 16.8076 18.1063 16.9196 17.999C17.0363 17.887 17.0946 17.7307 17.0946 17.53V17.089H16.3386V16.2H18.1446V17.53C18.1446 17.838 18.0723 18.1087 17.9276 18.342C17.7876 18.5707 17.5893 18.7503 17.3326 18.881C17.0806 19.007 16.782 19.07 16.4366 19.07Z" fill="#23262A"/>
+</svg>
@@ -0,0 +1,12 @@
+name: FilePngFill
+category: Files and application
+sub_category: Files
+keywords:
+  - document
+  - dokument
+  - fil
+  - file
+  - png
+variant: Fill
+updated_at: 06.11.2024
+created_at: 06.11.2024
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.7626 3.17678C16.446 2.49336 17.554 2.49336 18.2374 3.17678L20.8232 5.76257C21.5066 6.44598 21.5066 7.55402 20.8232 8.23744L13.409 15.6517C12.7057 16.3549 11.7519 16.75 10.7574 16.75H8.31066L7.03033 18.0303C6.73744 18.3232 6.26256 18.3232 5.96967 18.0303C5.67678 17.7374 5.67678 17.2626 5.96967 16.9697L7.25 15.6893V13.2426C7.25 12.2481 7.64509 11.2943 8.34835 10.591L15.7626 3.17678ZM17.1768 4.23744C17.0791 4.13981 16.9209 4.13981 16.8232 4.23744L9.40901 11.6517C8.98705 12.0736 8.75 12.6459 8.75 13.2426V15.25H10.7574C11.3541 15.25 11.9264 15.0129 12.3483 14.591L19.7626 7.17678C19.8602 7.07915 19.8602 6.92086 19.7626 6.82323L17.1768 4.23744ZM17.0303 6.96967C17.3232 7.26256 17.3232 7.73744 17.0303 8.03033L14.0303 11.0303C13.7374 11.3232 13.2626 11.3232 12.9697 11.0303C12.6768 10.7374 12.6768 10.2626 12.9697 9.96967L15.9697 6.96967C16.2626 6.67678 16.7374 6.67678 17.0303 6.96967ZM5.03033 18.9697C5.32322 19.2626 5.32322 19.7374 5.03033 20.0303L4.03033 21.0303C3.73744 21.3232 3.26256 21.3232 2.96967 21.0303C2.67678 20.7374 2.67678 20.2626 2.96967 19.9697L3.96967 18.9697C4.26256 18.6768 4.73744 18.6768 5.03033 18.9697Z" fill="#23262A"/>
+</svg>
@@ -0,0 +1,15 @@
+name: MedicalThermometer
+category: Wellness
+sub_category: Equipment
+keywords:
+  - termometer
+  - lege
+  - umiddelbar hjelp
+  - helse
+  - health
+  - help
+  - doctor
+  - patient
+variant: Stroke
+updated_at: 14.10.2024
+created_at: 07.03.2023
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.2374 3.17687C17.554 2.49345 16.446 2.49345 15.7626 3.17687L8.34835 10.5911C7.64509 11.2943 7.25 12.2482 7.25 13.2427V15.6893L5.96967 16.9697C5.67678 17.2626 5.67678 17.7374 5.96967 18.0303C6.26256 18.3232 6.73744 18.3232 7.03033 18.0303L8.31057 16.7501H10.7574C11.7519 16.7501 12.7057 16.355 13.409 15.6517L20.8232 8.23753C21.5066 7.55411 21.5066 6.44608 20.8232 5.76266L18.2374 3.17687ZM17.0303 8.03033C17.3232 7.73744 17.3232 7.26256 17.0303 6.96967C16.7374 6.67678 16.2626 6.67678 15.9697 6.96967L12.9697 9.96967C12.6768 10.2626 12.6768 10.7374 12.9697 11.0303C13.2626 11.3232 13.7374 11.3232 14.0303 11.0303L17.0303 8.03033ZM5.03033 20.0303C5.32322 19.7374 5.32322 19.2626 5.03033 18.9697C4.73744 18.6768 4.26256 18.6768 3.96967 18.9697L2.96967 19.9697C2.67678 20.2626 2.67678 20.7374 2.96967 21.0303C3.26256 21.3232 3.73744 21.3232 4.03033 21.0303L5.03033 20.0303Z" fill="#23262A"/>
+</svg>
@@ -0,0 +1,15 @@
+name: MedicalThermometerFill
+category: Wellness
+sub_category: Equipment
+keywords:
+  - termometer
+  - lege
+  - umiddelbar hjelp
+  - helse
+  - health
+  - help
+  - doctor
+  - patient
+variant: Fill
+updated_at: 14.10.2024
+created_at: 07.03.2023
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-icons",
-  "version": "7.4.2",
+  "version": "7.5.1",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -1,5 +1,11 @@
 # @navikt/aksel-stylelint

+## 7.5.1
+
+## 7.5.0
+
+## 7.4.3
+
 ## 7.4.2

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

+## 7.5.1
+
+### Patch Changes
+
+- Chore: Manually bump version to sync npm and github-releases ([`aa7c2d9`](https://github.com/navikt/aksel/commit/aa7c2d9598434d6304432daa20e0a1eeedd03b1b))
+
+- Updated dependencies []:
+  - @navikt/ds-css@7.5.1
+
+## 7.5.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@7.5.0
+
+## 7.4.3
+
+### Patch Changes
+
+- Updated dependencies [[`6d9f900`](https://github.com/navikt/aksel/commit/6d9f9001fed4ccfa4245ab97399b24012ceb9edf)]:
+  - @navikt/ds-css@7.4.3
+
 ## 7.4.2

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

+## 7.5.1
+
+## 7.5.0
+
+## 7.4.3
+
+### Patch Changes
+
+- Table.ColumnHeader: Inherit text alignment in button ([#3319](https://github.com/navikt/aksel/pull/3319))
+
 ## 7.4.2

 ## 7.4.1
@@ -1,198 +1,182 @@
-.navds-accordion {
-  --__ac-accordion-header-shadow-color: var(--ac-accordion-header-border, var(--a-border-divider));
-}
-
-/*************************
- * Header *
- *************************/
+/* ---------------------------- Accordion header ---------------------------- */
 .navds-accordion__header {
-  --__ac-accordion-header-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent),
-    inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
-
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
-  gap: var(--a-spacing-2);
-  padding: var(--a-spacing-3);
-  margin: 0;
+  gap: var(--ax-spacing-3);
+  padding: var(--ax-spacing-3);
  text-align: left;
-  background: var(--ac-accordion-header-bg, var(--a-surface-transparent));
  cursor: pointer;
  border: none;
  position: relative;
-  box-shadow: var(--__ac-accordion-header-shadow);
-  z-index: 1;
-}
+  border-radius: var(--ax-border-radius-large);
+  background: transparent;
+  color: var(--ax-text-accent);

-.navds-accordion__header:hover {
-  background-color: var(--ac-accordion-header-bg-hover, var(--a-surface-hover));
-  text-decoration: underline;
-  color: var(--ac-accordion-header-text-hover, inherit);
-}
-
-.navds-accordion--small .navds-accordion__header {
-  padding: var(--a-spacing-2) var(--a-spacing-3);
-}
-
-.navds-accordion--medium .navds-accordion__header {
-  padding: var(--a-spacing-3);
-}
-
-.navds-accordion--large .navds-accordion__header {
-  padding: var(--a-spacing-4) var(--a-spacing-3);
-}
-
-.navds-accordion__item:last-child > :where(.navds-accordion__header) {
-  box-shadow:
-    var(--__ac-accordion-header-shadow),
-    inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
-}
-
-.navds-accordion__item:last-child:where(.navds-accordion__item--open) :where(.navds-accordion__header) {
-  box-shadow:
-    inset 2px 0 0 0 var(--a-transparent),
-    inset -2px 0 0 0 var(--a-transparent),
-    inset 0 2px 0 0 var(--a-transparent),
-    inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
-}
-
-.navds-accordion__item:last-child:where(.navds-accordion__item--open) {
-  box-shadow:
-    inset 2px 0 0 0 var(--a-transparent),
-    inset -2px 0 0 0 var(--a-transparent),
-    inset 0 2px 0 0 var(--a-transparent),
-    inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
-}
-
-.navds-accordion__item--open > :where(.navds-accordion__header) {
-  box-shadow: var(--__ac-accordion-header-shadow);
-}
-
-.navds-accordion__header:focus-visible {
-  outline: 2px solid transparent;
-  outline-offset: 3px;
-  box-shadow: var(--a-shadow-focus);
-  border-radius: var(--a-border-radius-large);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-accordion__header:focus {
-    outline: none;
-    box-shadow: var(--a-shadow-focus);
-    border-radius: var(--a-border-radius-large);
-  }
-}
-
-.navds-accordion__header-content {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/*************************
- * Icon *
- *************************/
-.navds-accordion__icon-wrapper {
-  display: grid;
-  place-content: center;
-  border-radius: var(--a-border-radius-medium);
-  height: var(--a-spacing-6);
-  width: var(--a-spacing-6);
-  align-self: center;
-}
-
-.navds-accordion__header:hover > .navds-accordion__icon-wrapper {
-  background-color: var(--ac-accordion-header-icon-bg-hover, var(--a-surface-neutral-subtle-hover));
-}
-
-.navds-accordion__header-chevron {
-  border-radius: var(--a-border-radius-medium);
-  font-size: 1.5rem;
-  height: 1.75rem;
-  flex-shrink: 0;
-  transition: transform 150ms ease-in-out;
-  align-self: center;
-}
-
-:where(.navds-accordion__header):hover > :where(.navds-accordion__icon-wrapper) > :where(.navds-accordion__header-chevron) {
-  transform: translateY(1px);
-}
-
-.navds-accordion__item--open
-  > :where(.navds-accordion__header)
-  > :where(.navds-accordion__icon-wrapper)
-  > :where(.navds-accordion__header-chevron) {
-  transform: translateY(0) rotate(-180deg);
-}
-
-.navds-accordion__item--open
-  > :where(.navds-accordion__header):hover
-  > :where(.navds-accordion__icon-wrapper)
-  > :where(.navds-accordion__header-chevron) {
-  transform: translateY(-1px) rotate(-180deg);
-}
-
-/*************************
- * Variant/Default *
- *************************/
-.navds-accordion__item--open {
-  background-color: var(--ac-accordion-item-bg-open, var(--a-transparent));
-}
-
-/*************************
- * Variant/Neutral *
- *************************/
-.navds-accordion__item--open.navds-accordion__item--neutral {
-  background-color: var(--ac-accordion-neutral-item-bg-open, var(--a-surface-neutral-subtle));
-}
-
-/*************************
- * Content *
- *************************/
-
-.navds-accordion__content {
-  padding: var(--a-spacing-1) var(--a-spacing-3) var(--a-spacing-5);
-  animation: fadeAccordionContent 250ms ease;
-}
-
-.navds-accordion--indent > :where(.navds-accordion__item) > :where(.navds-accordion__content) {
-  padding: var(--a-spacing-1) var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-11);
-}
-
-.navds-accordion__content--closed {
-  display: none;
-}
-
-.navds-accordion__item--no-animation :where(.navds-accordion__content) {
-  animation: none;
-}
-
-@keyframes fadeAccordionContent {
-  0% {
-    opacity: 0.25;
-    transform: translateY(-8px);
+  > * {
+    font-weight: var(--ax-font-weight-regular);
  }

-  40% {
-    opacity: 0.7;
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@media (forced-colors: active) {
-  .navds-accordion__header {
+  @media (forced-colors: active) {
    border: 1px solid buttonborder;
    background-color: canvas;
    color: canvastext;
  }

-  .navds-accordion__header:hover {
-    background-color: canvas;
-    border: 1px solid highlight;
-    color: highlight;
+  &:hover {
+    background-color: var(--ax-bg-accent-hoverA);
+    color: var(--ax-text-accent-strong);
+
+    &::before,
+    &::after {
+      display: none;
+    }
+
+    > .navds-accordion__icon-wrapper {
+      background-color: var(--ax-bg-accent-strong-hover);
+      color: var(--ax-text-accent-contrast);
+    }
+
+    @media (forced-colors: active) {
+      background-color: canvas;
+      border: 1px solid highlight;
+      color: highlight;
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+    z-index: 1;
+
+    &::before,
+    &::after {
+      display: none;
+    }
+  }
+}
+
+.navds-accordion--small .navds-accordion__header {
+  padding-block: var(--a-spacing-2);
+}
+
+.navds-accordion__header::before,
+.navds-accordion__header::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 1px;
+  background-color: var(--ax-border-subtleA);
+}
+
+.navds-accordion__item:last-child > .navds-accordion__content {
+  border-bottom: 1px solid transparent;
+}
+
+.navds-accordion__header::after {
+  top: initial;
+  bottom: 0;
+}
+
+.navds-accordion__item[data-expanded="true"] > .navds-accordion__header::after,
+.navds-accordion__item:not(:last-child) > .navds-accordion__header::after {
+  display: none;
+}
+
+.navds-accordion__item[data-expanded="false"]:has(.navds-accordion__header:where(:hover, :focus-visible))
+  + .navds-accordion__item
+  > .navds-accordion__header::before {
+  display: none;
+}
+
+/* ------------------------- Accordion chevron icon ------------------------- */
+.navds-accordion__icon-wrapper {
+  border-radius: var(--ax-border-radius-large);
+  width: 22px;
+  height: 22px;
+  align-self: center;
+  background-color: var(--ax-bg-accent-moderateA);
+  color: var(--ax-text-accent-strong);
+}
+
+.navds-accordion__header-chevron {
+  height: inherit;
+  width: inherit;
+  flex-shrink: 0;
+  transition: transform 250ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+.navds-accordion__item[data-expanded="true"] > .navds-accordion__header .navds-accordion__header-chevron {
+  transform: rotateX(-180deg);
+}
+
+/* ---------------------------- Accordion content --------------------------- */
+.navds-accordion__content {
+  --__acx-accordion-content-line-width: 2px;
+
+  padding-inline: var(--ax-spacing-6) var(--ax-spacing-3);
+  display: none;
+  overflow: hidden;
+  padding-block: 0;
+  max-height: 0;
+  border-color: transparent;
+  transition: all 250ms cubic-bezier(0.2, 0, 0, 1) allow-discrete;
+  animation: navds-accordion-content-animation 250ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+.navds-accordion__item--no-animation {
+  animation: none;
+}
+
+@keyframes navds-accordion-content-animation {
+  0% {
+    opacity: 0.01;
+  }
+
+  20% {
+    opacity: 0.01;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.navds-accordion--indent > .navds-accordion__item > .navds-accordion__content {
+  padding-inline: var(--ax-spacing-6) var(--ax-spacing-3);
+}
+
+.navds-accordion--indent > .navds-accordion__item .navds-accordion__content-inner {
+  box-shadow: -2px 0 0 0 var(--ax-border-subtleA);
+  padding-block: var(--ax-spacing-2);
+
+  /* Aligns content with heading-section */
+  padding-inline: calc(var(--ax-spacing-5) + 2px) var(--ax-spacing-5);
+
+  @media (forced-colors: active) {
+    border-left: 1px solid canvastext;
+  }
+}
+
+.navds-accordion__item[data-expanded="true"] > .navds-accordion__content {
+  display: block;
+  opacity: 1;
+  overflow: visible;
+  max-height: fit-content;
+  padding-block: var(--ax-spacing-2);
+  padding-block-end: var(--ax-spacing-6);
+  border-color: var(--ax-border-subtleA);
+}
+
+@starting-style {
+  .navds-accordion__item[data-expanded="true"]:not(.navds-accordion__item--no-animation) > .navds-accordion__content {
+    padding-block: 0;
+    max-height: 0;
+    border-color: transparent;
  }
 }
@@ -1,152 +1,137 @@
+/* --------------------------- ActionMenu content --------------------------- */
 .navds-action-menu__content {
  overflow: hidden;
-  box-shadow: var(--a-shadow-medium);
-  border-radius: var(--a-border-radius-large);
+  border-radius: var(--ax-border-radius-large);
+  border: 1px solid var(--ax-border-subtleA);
+
+  /* TODO: Use token here when added */
+  box-shadow:
+    0 0 1px 0 rgb(7 9 13/ 0.02),
+    0 2px 5px 0 rgb(7 9 13/ 0.1),
+    0 10px 16px 0 rgb(7 9 13/ 0.12);
+  transition: transform 250ms cubic-bezier(0, 0, 0, 1) allow-discrete;
+
+  &[data-state="open"] {
+    &[data-side="bottom"] {
+      @starting-style {
+        transform: translateY(-4px);
+      }
+    }
+
+    &[data-side="top"] {
+      @starting-style {
+        transform: translateY(4px);
+      }
+    }
+
+    &[data-side="right"] {
+      @starting-style {
+        transform: translateX(-4px);
+      }
+    }
+
+    &[data-side="left"] {
+      @starting-style {
+        transform: translateX(4px);
+      }
+    }
+  }
 }

-/* stylelint-disable csstools/value-no-unknown-custom-properties */
 .navds-action-menu__content > .navds-action-menu__content-inner {
-  --__ac-action-menu-content-p: var(--a-spacing-2);
-  --__ac-action-menu-item-pr: var(--a-spacing-3);
-  --__ac-action-menu-item-pl: var(--a-spacing-2);
-  --__ac-action-menu-item-height: 2rem;
+  --__axc-action-menu-content-p: var(--ax-spacing-2);
+  --__axc-action-menu-item-pr: var(--ax-spacing-2);
+  --__axc-action-menu-item-pl: var(--ax-spacing-2);
+  --__axc-action-menu-item-height: 2rem;

-  border-radius: var(--a-border-radius-large);
-  background-color: var(--a-surface-default);
+  border-radius: var(--ax-border-radius-large);
+  background-color: var(--ax-bg-raised);
  min-width: 128px;
  max-width: min(95vw, 640px);
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
  transform-origin: var(--__ac-action-menu-content-transform-origin);
  animation-duration: 160ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-  padding: var(--__ac-action-menu-content-p);
+  padding: var(--__axc-action-menu-content-p);
  overflow: auto;
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
  max-height: var(--__ac-action-menu-content-available-height);
 }

-.navds-action-menu__content:where([data-state="open"]):where([data-side="bottom"]) {
-  animation-name: aksel-action-from-bottom, aksel-action-fade-in;
-}
-
-.navds-action-menu__content:where([data-state="open"]):where([data-side="top"]) {
-  animation-name: aksel-action-from-top, aksel-action-fade-in;
-}
-
-.navds-action-menu__content:where([data-state="open"]):where([data-side="left"]) {
-  animation-name: aksel-action-from-left, aksel-action-fade-in;
-}
-
-.navds-action-menu__content:where([data-state="open"]):where([data-side="right"]) {
-  animation-name: aksel-action-from-right, aksel-action-fade-in;
-}
-
-@keyframes aksel-action-from-bottom {
-  from {
-    transform: translateY(-4px);
-  }
-
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes aksel-action-from-top {
-  from {
-    transform: translateY(4px);
-  }
-
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes aksel-action-from-left {
-  from {
-    transform: translateX(4px);
-  }
-
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes aksel-action-from-right {
-  from {
-    transform: translateX(-4px);
-  }
-
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes aksel-action-fade-in {
-  from {
-    opacity: 0.01;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
+/* ----------------------------- ActionMenu Item ---------------------------- */
 .navds-action-menu__item {
  display: flex;
  align-items: center;
-  gap: var(--a-spacing-2);
-  min-height: var(--__ac-action-menu-item-height);
+  gap: var(--ax-spacing-2);
+  min-height: var(--__axc-action-menu-item-height);
  cursor: default;
-  border-radius: var(--a-border-radius-medium);
+  border-radius: var(--ax-border-radius-medium);
  position: relative;
-  padding-left: var(--__ac-action-menu-item-pl);
-  padding-right: var(--__ac-action-menu-item-pr);
-  font-size: var(--a-font-size-medium);
-  scroll-margin-block: var(--__ac-action-menu-content-p);
+  padding-left: var(--__axc-action-menu-item-pl);
+  padding-right: var(--__axc-action-menu-item-pr);
+  font-size: var(--ax-font-size-medium);
+  scroll-margin-block: var(--__axc-action-menu-content-p);
  line-height: 1.5;
-  color: var(--a-text-default);
+  color: var(--ax-text-default);
  text-decoration: none;
-}

-.navds-action-menu__item svg {
-  flex-shrink: 0;
+  & svg {
+    flex-shrink: 0;
+  }
+
+  &:focus {
+    outline: none;
+    background-color: var(--ax-bg-accent-moderate-hoverA);
+    color: var(--ax-text-default);
+  }
+
+  &[aria-disabled="true"] {
+    opacity: 0.5;
+    pointer-events: none;
+  }
 }

 .navds-action-menu__item--has-icon {
-  --__ac-action-menu-item-pl: var(--a-spacing-6);
+  --__axc-action-menu-item-pl: var(--ax-spacing-6);
 }

 .navds-action-menu__sub-trigger {
-  --__ac-action-menu-item-pr: var(--a-spacing-05);
-}
+  --__axc-action-menu-item-pr: var(--ax-spacing-05);

-.navds-action-menu__item:focus {
-  outline: none;
-  background-color: var(--a-surface-action-subtle-hover);
-  color: var(--a-text-default);
+  &[data-state="open"] {
+    background-color: var(--ax-bg-neutral-moderate-pressed);
+  }
+
+  &:focus {
+    background-color: var(--ax-bg-accent-moderate-hoverA);
+  }
 }

 .navds-action-menu__item--danger {
-  color: var(--a-text-danger);
-}
+  color: var(--ax-text-danger);

-.navds-action-menu__item--danger:focus {
-  background-color: var(--a-surface-danger-subtle);
+  &:focus {
+    background-color: var(--ax-bg-danger-moderate-hoverA);
+    color: var(--ax-text-danger-strong);
+  }
 }

+/* ---------------------------- ActionMenu marker --------------------------- */
 .navds-action-menu__marker {
  display: flex;
  align-items: center;
-  gap: var(--a-spacing-1);
+  gap: var(--ax-spacing-1);
 }

 .navds-action-menu__marker--right {
  margin-left: auto;
-  padding-left: var(--a-spacing-4);
+  padding-left: var(--ax-spacing-4);
 }

 .navds-action-menu__marker--left {
  position: absolute;
  left: 0;
-  width: var(--__ac-action-menu-item-pl);
+  width: var(--__axc-action-menu-item-pl);
  display: inline-flex;
  justify-content: center;
 }
@@ -156,47 +141,42 @@
  flex-shrink: 0;
 }

+/* --------------------------- ActionMenu shortcut -------------------------- */
 .navds-action-menu__shortcut {
-  background-color: var(--a-surface-neutral-subtle);
-  color: var(--a-text-default);
-  border-radius: var(--a-border-radius-small);
-  padding: 0 var(--a-spacing-1);
+  background-color: var(--ax-bg-neutral-moderateA);
+  color: var(--ax-text-default);
+  border-radius: var(--ax-border-radius-small);
+  padding: 0 var(--ax-spacing-1);
  min-width: 1.125rem;
  height: 1.125rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
-  font-size: var(--a-font-size-small);
+  font-size: var(--ax-font-size-small);
 }

+/* ---------------------------- ActionMenu Grouping ---------------------------- */
 .navds-action-menu__label {
  display: flex;
  align-items: center;
-  min-height: calc(var(--__ac-action-menu-item-height) - 6px);
-  padding-right: var(--__ac-action-menu-item-pr);
-  padding-left: var(--__ac-action-menu-item-pl);
-  color: var(--a-text-subtle);
-  border-radius: var(--a-border-radius-medium);
+  min-height: calc(var(--__axc-action-menu-item-height) - 6px);
+  padding-right: var(--__axc-action-menu-item-pr);
+  padding-left: var(--__axc-action-menu-item-pl);
+  color: var(--ax-text-subtle);
+  border-radius: var(--ax-border-radius-medium);
  user-select: none;
  cursor: default;
-  font-size: var(--a-font-size-small);
+  font-size: var(--ax-font-size-small);
 }

 .navds-action-menu__divider {
  height: 1px;
-  margin-block: var(--a-spacing-2);
-  background-color: var(--a-border-divider);
+  margin-block: var(--ax-spacing-2);
+  background-color: var(--ax-border-subtleA);
 }

-.navds-action-menu__indicator {
-  display: grid;
-  place-content: center;
-}
-
-.navds-action-menu__indicator-icon {
-  font-size: 14px;
-}
+/* -------------------------- ActionMenu indicator -------------------------- */

 .navds-action-menu__indicator-icon--unchecked,
 .navds-action-menu__indicator-icon--checked,
@@ -204,24 +184,23 @@
  display: none;
 }

-.navds-action-menu__indicator[data-state="unchecked"] .navds-action-menu__indicator-icon--unchecked {
-  display: block;
+.navds-action-menu__indicator {
+  display: grid;
+  place-content: center;
+
+  &[data-state="unchecked"] .navds-action-menu__indicator-icon--unchecked {
+    display: block;
+  }
+
+  &[data-state="checked"] .navds-action-menu__indicator-icon--checked {
+    display: block;
+  }
+
+  &[data-state="indeterminate"] .navds-action-menu__indicator-icon--indeterminate {
+    display: block;
+  }
 }

-.navds-action-menu__indicator:where([data-state="checked"]) .navds-action-menu__indicator-icon--checked {
-  display: block;
-}
-
-.navds-action-menu__indicator:where([data-state="indeterminate"]) .navds-action-menu__indicator-icon--indeterminate {
-  display: block;
-}
-
-.navds-action-menu__item:where([aria-disabled="true"]) {
-  color: var(--a-text-subtle);
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-.navds-action-menu__sub-trigger:where([data-state="open"]) {
-  background-color: var(--a-surface-neutral-subtle);
+.navds-action-menu__indicator-icon {
+  font-size: 14px;
 }
@@ -1,101 +1,89 @@
 .navds-alert {
-  border-radius: var(--a-border-radius-medium);
+  border-radius: var(--ax-border-radius-xlarge);
  border: 1px solid;
-  padding: var(--a-spacing-4);
+  padding: var(--ax-spacing-4);
  display: flex;
-  gap: var(--a-spacing-3);
+  gap: var(--ax-spacing-3);
  align-items: center;
-}

-.navds-alert--small.navds-alert--close-button {
-  align-items: flex-start;
+  @media (forced-colors: active) {
+    border: 1px solid canvastext;
+    background-color: canvas;
+    color: canvastext;
+  }
 }

 .navds-alert__wrapper--maxwidth {
  max-width: 43.5rem;
 }

-.navds-alert--close-button > .navds-alert__wrapper {
-  margin-block-start: var(--a-spacing-05);
-}
-
-.navds-alert--small.navds-alert--close-button > .navds-alert__wrapper {
-  margin-block-start: var(--a-spacing-1);
+.navds-alert__icon {
+  flex-shrink: 0;
+  font-size: 1.5rem;
+  align-self: flex-start;
+  height: var(--ax-font-line-height-xlarge);
 }

 .navds-alert--small {
-  padding: var(--a-spacing-2) var(--a-spacing-4);
-  gap: var(--a-spacing-2);
+  padding: var(--ax-spacing-2) var(--ax-spacing-4);
+  gap: var(--ax-spacing-2);
+
+  > .navds-alert__icon {
+    margin-block-start: 0;
+    height: var(--ax-font-line-height-large);
+  }
 }

+/* ----------------------------- Alert variants ----------------------------- */
+.navds-alert--info {
+  border-color: var(--ax-border-info);
+  background-color: var(--ax-bg-info-moderate);
+
+  > .navds-alert__icon {
+    color: var(--ax-text-info-icon);
+  }
+}
+
+.navds-alert--success {
+  border-color: var(--ax-border-success);
+  background-color: var(--ax-bg-success-moderate);
+
+  > .navds-alert__icon {
+    color: var(--ax-text-success-icon);
+  }
+}
+
+.navds-alert--warning {
+  border-color: var(--ax-border-warning);
+  background-color: var(--ax-bg-warning-moderate);
+
+  > .navds-alert__icon {
+    color: var(--ax-text-warning-icon);
+  }
+}
+
+.navds-alert--error {
+  border-color: var(--ax-border-danger);
+  background-color: var(--ax-bg-danger-moderate);
+
+  > .navds-alert__icon {
+    color: var(--ax-text-danger-icon);
+  }
+}
+
+/* ----------------------------- Alert fullwidth ---------------------------- */
 .navds-alert--full-width {
  border-radius: 0;
 }

-.navds-alert > .navds-alert__icon {
-  flex-shrink: 0;
-  font-size: 1.5rem;
-  align-self: flex-start;
-  height: var(--a-font-line-height-xlarge);
-  background: radial-gradient(circle, var(--a-surface-default) 47%, 0, transparent);
-}
-
-.navds-alert--small > .navds-alert__icon {
-  margin-block-start: 0;
-  height: var(--a-font-line-height-large);
-}
-
-.navds-alert--close-button > .navds-alert__icon {
-  margin-block-start: var(--a-spacing-05);
-}
-
-.navds-alert--small.navds-alert--close-button > .navds-alert__icon {
-  margin-block-start: var(--a-spacing-1);
-}
-
-.navds-alert--error {
-  border-color: var(--ac-alert-error-border, var(--a-border-danger));
-  background-color: var(--ac-alert-error-bg, var(--a-surface-danger-subtle));
-}
-
-.navds-alert--error > .navds-alert__icon {
-  color: var(--ac-alert-icon-error-color, var(--a-icon-danger));
-}
-
-.navds-alert--warning {
-  border-color: var(--ac-alert-warning-border, var(--a-border-warning));
-  background-color: var(--ac-alert-warning-bg, var(--a-surface-warning-subtle));
-}
-
-.navds-alert--warning > .navds-alert__icon {
-  background: radial-gradient(circle at 50% 57%, var(--a-surface-default) 30%, 0, transparent);
-  color: var(--ac-alert-icon-warning-color, var(--a-icon-warning));
-}
-
-.navds-alert--info {
-  border-color: var(--ac-alert-info-border, var(--a-border-info));
-  background-color: var(--ac-alert-info-bg, var(--a-surface-info-subtle));
-}
-
-.navds-alert--info > .navds-alert__icon {
-  color: var(--ac-alert-icon-info-color, var(--a-icon-info));
-}
-
-.navds-alert--success {
-  border-color: var(--ac-alert-success-border, var(--a-border-success));
-  background-color: var(--ac-alert-success-bg, var(--a-surface-success-subtle));
-}
-
-.navds-alert--success > .navds-alert__icon {
-  color: var(--ac-alert-icon-success-color, var(--a-icon-success));
-}
-
+/* ------------------------------ Alert inline ------------------------------ */
 .navds-alert--inline {
  background-color: transparent;
  border: none;
  padding: 0;
 }

+/* ------------------------- Alert with close button ------------------------ */
 .navds-alert__button-wrapper {
  align-self: flex-start;
  flex: 1;
@@ -104,10 +92,24 @@
  justify-content: flex-end;
 }

-@media (forced-colors: active) {
-  .navds-alert {
-    border: 1px solid canvastext;
-    background-color: canvas;
-    color: canvastext;
+.navds-alert--close-button {
+  > .navds-alert__wrapper {
+    margin-block-start: var(--ax-spacing-05);
+  }
+
+  > .navds-alert__icon {
+    margin-block-start: var(--ax-spacing-05);
+  }
+
+  &.navds-alert--small {
+    align-items: flex-start;
+
+    > .navds-alert__wrapper {
+      margin-block-start: var(--ax-spacing-1);
+    }
+
+    > .navds-alert__icon {
+      margin-block-start: var(--ax-spacing-1);
+    }
  }
 }
@@ -1,12 +1,15 @@
-/* stylelint-disable csstools/value-no-unknown-custom-properties */
-
-/* To support nested theming, we want to declare color on each scoped elements */
-:root,
-:host,
-.light {
+.navds-theme {
  color: var(--ax-text-default);
-}

-.dark {
-  color: var(--ax-text-default);
+  &[data-background="true"] {
+    background-color: var(--ax-bg-default);
+  }
+
+  &.light {
+    color-scheme: light;
+  }
+
+  &.dark {
+    color-scheme: dark;
+  }
 }
@@ -1,33 +1,30 @@
 .navds-chat {
  display: flex;
  align-items: flex-end;
-  gap: var(--a-spacing-3);
+  gap: var(--ax-spacing-3);
  max-width: 40.75rem;
 }

 .navds-chat--right {
  flex-direction: row-reverse;
+
+  & .navds-chat__bubble-wrapper {
+    align-items: flex-end;
+  }
+
+  & .navds-chat__bubble {
+    border-radius: var(--ax-border-radius-xlarge);
+    border-bottom-right-radius: var(--ax-border-radius-small);
+  }
 }

-.navds-chat__bubble-wrapper {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--a-spacing-3);
-}
-
-.navds-chat--right .navds-chat__bubble-wrapper {
-  align-items: flex-end;
-}
-
+/* ------------------------------- Chat avatar ------------------------------ */
 .navds-chat__avatar {
  align-items: center;
-  box-shadow: var(--a-shadow-xsmall);
-  background-color: var(--ac-chat-avatar-bg, var(--a-surface-neutral-subtle));
-  border-radius: var(--a-border-radius-full);
-  color: var(--ac-chat-avatar-color, var(--a-text-default));
+  background-color: var(--ax-bg-raised);
+  border-radius: var(--ax-border-radius-full);
+  border: 1px solid var(--ax-border-subtleA);
+  color: var(--ax-text-default);
  display: flex;
  flex-shrink: 0;
  justify-content: center;
@@ -37,50 +34,61 @@
  line-height: 2.5rem; /* Makes text properly vertically centered in Chrome */
  font-size: 1.06rem;
  letter-spacing: 0.024rem;
+
+  & svg {
+    align-self: center;
+    width: 100%;
+    max-width: 1.5rem;
+    max-height: 1.5rem;
+  }
 }

-.navds-chat__avatar svg {
-  align-self: center;
-  width: 100%;
-  max-width: 1.5rem;
-  max-height: 1.5rem;
+/* ------------------------------- Chat bubble ------------------------------ */
+.navds-chat__bubble-wrapper {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ax-spacing-3);
 }

 .navds-chat__bubble {
-  padding: var(--a-spacing-4);
-  box-shadow: var(--a-shadow-xsmall);
+  padding: var(--ax-spacing-4);
  width: fit-content;
-  background-color: var(--ac-chat-bubble-bg, var(--a-surface-neutral-subtle));
-  border-radius: var(--a-border-radius-xlarge);
-  border-bottom-left-radius: 2px;
+  background-color: var(--ax-bg-raised);
  display: flex;
  flex-direction: column;
-  gap: var(--a-spacing-2);
-}
-
-.navds-chat--right .navds-chat__bubble {
-  border-radius: var(--a-border-radius-xlarge);
-  border-bottom-right-radius: 2px;
+  gap: var(--ax-spacing-2);
+  border-radius: var(--ax-border-radius-xlarge);
+  border-bottom-left-radius: var(--ax-border-radius-small);
+  border: 1px solid var(--ax-border-subtleA);
 }

 .navds-chat--small .navds-chat__bubble {
-  padding: var(--a-spacing-3);
+  padding: var(--ax-spacing-3);
 }

-.navds-chat--info .navds-chat__bubble,
-.navds-chat--info .navds-chat__avatar {
-  background-color: var(--a-surface-info-subtle);
+/* -------------------------- Chat bubble variants -------------------------- */
+.navds-chat--info {
+  & .navds-chat__bubble,
+  & .navds-chat__avatar {
+    background-color: var(--ax-bg-info-raised);
+  }
 }

-.navds-chat--subtle .navds-chat__bubble,
-.navds-chat--subtle .navds-chat__avatar {
-  background-color: var(--a-surface-default);
+.navds-chat--neutral {
+  & .navds-chat__bubble,
+  & .navds-chat__avatar {
+    background-color: var(--ax-bg-neutral-raised);
+  }
 }

+/* ------------------------------ Chat top text ----------------------------- */
 .navds-chat__top-text {
-  color: var(--ac-chat-top-text, var(--a-text-default));
+  color: var(--ax-text-default);
  display: flex;
-  gap: var(--a-spacing-2);
+  gap: var(--ax-spacing-2);
  align-items: baseline;
  font-weight: normal;
  margin: 0;
@@ -105,16 +113,3 @@
 .navds-chat--right .navds-chat__top-text--left {
  align-self: flex-start;
 }
-
-@media (forced-colors: active) {
-  .navds-chat__bubble,
-  .navds-chat__avatar {
-    border: 1px solid canvastext;
-    background-color: canvas;
-    color: canvastext;
-  }
-
-  .navds-chat__avatar svg {
-    forced-color-adjust: none;
-  }
-}
@@ -1,13 +1,13 @@
 .navds-chips {
  display: flex;
-  gap: var(--a-spacing-2);
+  gap: var(--ax-spacing-2);
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
 }

-.navds-chips :where(li) {
+.navds-chips li {
  margin: 0;
  padding: 0;
  list-style: none;
@@ -20,113 +20,116 @@
  cursor: pointer;
  align-items: center;
  justify-content: center;
-  gap: var(--a-spacing-05);
+  gap: var(--ax-spacing-05);
  margin: 0;
-  padding: 0 var(--a-spacing-3);
+  padding: 0 var(--ax-spacing-3);
  text-decoration: none;
-  border-radius: var(--a-border-radius-full);
+  border-radius: var(--ax-border-radius-full);
  min-height: 2rem;
+
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+  }
 }

-.navds-chips--small .navds-chips__chip {
-  min-height: 1.5rem;
-  padding: 0 var(--a-spacing-2);
-}
-
-.navds-chips__toggle {
-  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-border, var(--a-border-subtle));
-  background-color: var(--ac-chip-toggle-bg, var(--a-surface-action-subtle));
-  color: var(--ac-chip-toggle-text, var(--a-text-default));
-}
-
-.navds-chips__toggle:hover {
-  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-hover-border, var(--a-border-subtle-hover));
-  background-color: var(--ac-chip-toggle-hover-bg, var(--a-surface-action-subtle-hover));
-}
-
-.navds-chips__toggle[aria-pressed="true"] {
-  box-shadow: none;
-  background-color: var(--ac-chip-toggle-pressed-bg, var(--a-surface-action-selected));
-  color: var(--ac-chip-toggle-pressed-text, var(--a-text-on-action));
-}
-
-.navds-chips__toggle[aria-pressed="true"]:hover {
-  background-color: var(--ac-chip-toggle-pressed-hover-bg, var(--a-surface-action-selected-hover));
-}
-
-/* Toggle variant neutral */
-.navds-chips__toggle--neutral {
-  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-neutral-border, var(--a-border-subtle));
-  background-color: var(--ac-chip-toggle-neutral-bg, var(--a-surface-neutral-subtle));
-  color: var(--ac-chip-toggle-neutral-text, var(--a-text-default));
-}
-
-.navds-chips__toggle--neutral:hover {
-  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-neutral-hover-border, var(--a-border-subtle-hover));
-  background-color: var(--ac-chip-toggle-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
-}
-
-.navds-chips__toggle--neutral[aria-pressed="true"] {
-  box-shadow: none;
-  background-color: var(--ac-chip-toggle-neutral-pressed-bg, var(--a-surface-neutral-selected));
-  color: var(--ac-chip-toggle-neutral-pressed-text, var(--a-text-on-neutral));
-}
-
-.navds-chips__toggle--neutral[aria-pressed="true"]:hover {
-  background-color: var(--ac-chip-toggle-neutral-pressed-hover-bg, var(--a-surface-neutral-selected));
-}
-
-.navds-chips__toggle:focus-visible {
-  box-shadow: 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
-}
-
-.navds-chips__toggle[aria-pressed="true"]:focus-visible,
-.navds-chips__toggle:active:focus-visible {
-  box-shadow:
-    inset 0 0 0 1px var(--a-surface-default),
-    0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
-}
-
-@supports not selector(:focus-visible) {
-  .navds-chips__toggle:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
+.navds-chips--small {
+  .navds-chips__chip {
+    min-height: 1.5rem;
+    padding: 0 var(--ax-spacing-2);
  }

-  .navds-chips__toggle[aria-pressed="true"]:focus,
-  .navds-chips__toggle:active:focus {
-    box-shadow:
-      inset 0 0 0 1px var(--a-surface-default),
-      0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
+  .navds-chips__toggle-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .navds-chips__toggle--with-checkmark {
+    padding-left: var(--ax-spacing-1);
+  }
+
+  .navds-chips__removable-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .navds-chips__removable-icon > svg {
+    width: 1rem;
+  }
+
+  .navds-chips--icon-right {
+    padding-right: var(--ax-spacing-05);
+  }
+}
+
+/* ------------------------------ Chips Toggle ------------------------------ */
+.navds-chips__toggle--action {
+  box-shadow: inset 0 0 0 1px var(--ax-border-accent-subtleA);
+  background-color: var(--ax-bg-accent-moderate);
+  color: var(--ax-text-default);
+
+  &:hover {
+    background-color: var(--ax-bg-accent-moderate-hover);
+  }
+
+  &[data-pressed="true"] {
+    box-shadow: none;
+    background-color: var(--ax-bg-accent-strong-pressed);
+    color: var(--ax-text-accent-contrast);
+
+    &:hover {
+      background-color: var(--ax-bg-accent-strong-hover);
+    }
+  }
+}
+
+.navds-chips__toggle--neutral {
+  box-shadow: inset 0 0 0 1px var(--ax-border-neutral-subtleA);
+  background-color: var(--ax-bg-neutral-moderate);
+  color: var(--ax-text-default);
+
+  &:hover {
+    background-color: var(--ax-bg-neutral-moderate-hover);
+  }
+
+  &[data-pressed="true"] {
+    box-shadow: none;
+    background-color: var(--ax-bg-neutral-strong-pressed);
+    color: var(--ax-text-neutral-contrast);
+
+    &:hover {
+      background-color: var(--ax-bg-neutral-strong-hover);
+    }
  }
 }

 .navds-chips--medium .navds-chips__toggle--with-checkmark {
-  padding-left: var(--a-spacing-1-alt);
+  padding-left: var(--ax-spacing-1-alt);
 }

-.navds-chips--small .navds-chips__toggle--with-checkmark {
-  padding-left: var(--a-spacing-1);
-}
-
-.navds-chips--small .navds-chips__toggle-icon {
-  width: 1rem;
-  height: 1rem;
-}
+/* -------------------------- start old CSS --------------------------  */

+/* ----------------------------- Chips removable ---------------------------- */
 .navds-chips__removable {
  gap: 0;
 }

 .navds-chips__removable--action {
-  background-color: var(--ac-chip-removable-action-bg, var(--a-surface-action-selected));
-  color: var(--ac-chip-removable-action-text, var(--a-text-on-action));
+  background: var(--ax-bg-accent-strong-pressed);
+  color: var(--ax-text-accent-contrast);
+
+  &:hover {
+    background: var(--ax-bg-accent-strong-hover);
+  }
 }

 .navds-chips__removable--neutral {
-  background-color: var(--ac-chip-removable-neutral-bg, var(--a-surface-neutral-subtle));
-  color: var(--ac-chip-removable-neutral-text, var(--a-text-default));
-  box-shadow: inset 0 0 0 1px var(--ac-chip-removable-neutral-border, var(--a-border-default));
+  background: var(--ax-bg-neutral-strong-pressed);
+  color: var(--ax-text-neutral-contrast);
+
+  &:hover {
+    background: var(--ax-bg-neutral-strong-hover);
+  }
 }

 .navds-chips__removable-icon {
@@ -135,100 +138,39 @@
  font-size: 1.25rem;
  display: grid;
  place-items: center;
-  border-radius: var(--a-border-radius-full);
-}
-
-.navds-chips--small .navds-chips__removable-icon {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
-.navds-chips--small .navds-chips__removable-icon > svg {
-  width: 1rem;
-}
-
-.navds-chips__removable--action:focus-visible {
-  box-shadow:
-    inset 0 0 0 1px var(--a-surface-default),
-    0 0 0 2px var(--a-border-focus);
-}
-
-.navds-chips__removable--neutral:focus-visible {
-  box-shadow: 0 0 0 2px var(--a-border-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-chips__removable--action:focus {
-    outline: none;
-    box-shadow:
-      inset 0 0 0 1px var(--a-surface-default),
-      0 0 0 2px var(--a-border-focus);
-  }
-
-  .navds-chips__removable--neutral:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--a-border-focus);
-  }
-}
-
-.navds-chips__removable--action:hover {
-  background-color: var(--ac-chip-removable-action-hover-bg, var(--a-surface-action-selected-hover));
-}
-
-.navds-chips__removable--neutral:hover {
-  background-color: var(--ac-chip-removable-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
-  box-shadow: inset 0 0 0 1px var(--ac-chip-removable-neutral-hover-border, var(--a-border-strong));
+  border-radius: var(--ax-border-radius-full);
 }

 .navds-chips--icon-left {
-  padding-left: var(--a-spacing-1-alt);
+  padding-left: var(--ax-spacing-1-alt);
 }

 .navds-chips--icon-right {
-  padding-right: var(--a-spacing-1-alt);
-}
-
-.navds-chips--small .navds-chips--icon-right {
-  padding-right: var(--a-spacing-05);
+  padding-right: var(--ax-spacing-1-alt);
 }

@media (forced-colors: active) {
  .navds-chips__chip {
    border: 1px solid transparent;
+
+    &:hover {
+      background-color: highlighttext;
+      color: highlight;
+    }
  }

-  .navds-chips__chip:hover {
-    background-color: highlighttext;
-    color: highlight;
-  }
-
-  .navds-chips__chip:focus-visible {
-    outline: 2px solid transparent;
-    outline-offset: 2px;
-  }
-
-  .navds-chips__chip:where([aria-pressed="true"], :active, :hover) > span {
+  .navds-chips__chip:where([data-pressed="true"], :active, :hover) > span {
    forced-color-adjust: none;
  }

-  .navds-chips__toggle:active {
-    background-color: highlight;
-    color: highlighttext;
-  }
-
-  .navds-chips__toggle[aria-pressed="true"] {
+  .navds-chips__toggle[data-pressed="true"] {
    background-color: selecteditem;
    color: selecteditemtext;
    border: 1px solid selecteditem;
-  }

-  .navds-chips__toggle[aria-pressed="true"]:hover {
-    background-color: selecteditemtext;
-    color: selecteditem;
-  }
-
-  .navds-chips__toggle[aria-pressed="true"]:active {
-    background-color: highlight;
-    color: highlighttext;
+    &:hover {
+      background-color: selecteditemtext;
+      color: selecteditem;
+    }
  }
 }
@@ -1,31 +1,42 @@
-[data-theme="dark"] {
-  --__ac-copybutton-action-text: var(--a-blue-300);
-  --__ac-copybutton-bg-hover: rgb(214 231 255 /0.13);
-  --__ac-copybutton-icon-success: rgb(51 170 95 /1);
-  --__ac-copybutton-neutral-text: rgb(231 240 254 /0.69);
-  --__ac-copybutton-text: rgb(251 252 254 /0.96);
-}
-
-[data-theme="light"] {
-  --__ac-copybutton-action-text: initial;
-  --__ac-copybutton-bg-hover: initial;
-  --__ac-copybutton-icon-success: initial;
-  --__ac-copybutton-neutral-text: initial;
-  --__ac-copybutton-text: initial;
-}
-
 .navds-copybutton {
-  --__ac-copybutton-padding: var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-3) var(--a-spacing-4);
+  --__axc-copybutton-padding: var(--ax-spacing-3) var(--ax-spacing-5) var(--ax-spacing-3) var(--ax-spacing-4);

  cursor: pointer;
  margin: 0;
  text-decoration: none;
  border: none;
-  background: none;
-  border-radius: var(--ac-copybutton-border-radius, var(--a-border-radius-medium));
-  padding: var(--__ac-copybutton-padding);
+  border-radius: var(--ax-border-radius-medium);
+  padding: var(--__axc-copybutton-padding);
  display: grid;
  place-content: center;
+  background-color: transparent;
+  transition: color 0.2s cubic-bezier(0.05, 0.7, 0.1, 1);
+
+  &.navds-copybutton--icon-only {
+    --__axc-copybutton-padding: var(--ax-spacing-3);
+  }
+
+  &.navds-copybutton--icon-right {
+    --__axc-copybutton-padding: var(--ax-spacing-3) var(--ax-spacing-4) var(--ax-spacing-3) var(--ax-spacing-5);
+  }
+
+  &:hover {
+    background-color: var(--ax-bg-neutral-moderate-hover);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.3;
+  }
+
+  &:disabled:hover {
+    background-color: transparent;
+  }
 }

@media (forced-colors: active) {
@@ -33,76 +44,82 @@
    background-color: ButtonFace;
    border: solid 1px ButtonText;
    color: ButtonText;
-  }

-  .navds-copybutton.navds-copybutton:focus-visible {
-    box-shadow: none;
-    outline: 2px solid highlight;
-    outline-offset: 2px;
+    &:disabled {
+      opacity: 1;
+      border-color: GrayText;
+    }
  }
 }

-.navds-copybutton--icon-right {
-  --__ac-copybutton-padding: var(--a-spacing-3) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-5);
-}
-
+/* -------------------------- CopyButton small size ------------------------- */
 .navds-copybutton--small {
-  --__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;
+
+  --__axc-copybutton-padding: var(--ax-spacing-1) var(--ax-spacing-3) var(--ax-spacing-1) var(--ax-spacing-2);
+
+  &.navds-copybutton--icon-right {
+    --__axc-copybutton-padding: var(--ax-spacing-1) var(--ax-spacing-2) var(--ax-spacing-1) var(--ax-spacing-3);
+  }
+
+  &.navds-copybutton--icon-only {
+    --__axc-copybutton-padding: var(--ax-spacing-1);
+  }
+
+  & .navds-copybutton__icon {
+    font-size: 1.25rem;
+  }
+
+  & > .navds-copybutton__content {
+    gap: var(--ax-spacing-1-alt);
+  }
 }

-.navds-copybutton--small.navds-copybutton--icon-right {
-  --__ac-copybutton-padding: var(--a-spacing-1) var(--a-spacing-2) var(--a-spacing-1) var(--a-spacing-3);
-}
-
+/* ------------------------- CopyButton xsmall size ------------------------- */
 .navds-copybutton--xsmall {
-  --__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;
+
+  --__axc-copybutton-padding: var(--ax-spacing-05) var(--ax-spacing-2) var(--ax-spacing-05) var(--ax-spacing-1);
+
+  &.navds-copybutton--icon-right {
+    --__axc-copybutton-padding: var(--ax-spacing-05) var(--ax-spacing-1) var(--ax-spacing-05) var(--ax-spacing-2);
+  }
+
+  &.navds-copybutton--icon-only {
+    --__axc-copybutton-padding: var(--ax-spacing-05);
+  }
+
+  & .navds-copybutton__icon {
+    font-size: 1.25rem;
+  }
+
+  & > .navds-copybutton__content {
+    gap: var(--ax-spacing-1);
+  }
 }

-.navds-copybutton--xsmall.navds-copybutton--icon-right {
-  --__ac-copybutton-padding: var(--a-spacing-05) var(--a-spacing-1) var(--a-spacing-05) var(--a-spacing-2);
-}
-
-.navds-copybutton--icon-only {
-  --__ac-copybutton-padding: var(--a-spacing-3);
-}
-
-.navds-copybutton--small.navds-copybutton--icon-only {
-  --__ac-copybutton-padding: var(--a-spacing-1);
-}
-
-.navds-copybutton--xsmall.navds-copybutton--icon-only {
-  --__ac-copybutton-padding: var(--a-spacing-05);
-}
-
+/* ----------------------------- CopyButton Icon ---------------------------- */
 .navds-copybutton__icon {
  font-size: 1.5rem;
  display: flex;
-}

-:where(.navds-copybutton--xsmall, .navds-copybutton--small) .navds-copybutton__icon {
-  font-size: 1.25rem;
-}
+  &:first-of-type {
+    margin-left: -0.25rem;
+  }

-.navds-copybutton__icon:first-of-type {
-  margin-left: -0.25rem;
-}
+  &:last-of-type {
+    margin-right: -0.25rem;
+  }

-.navds-copybutton__icon:last-of-type {
-  margin-right: -0.25rem;
-}
-
-.navds-copybutton__icon:only-child {
-  margin: 0;
+  &:only-child {
+    margin: 0;
+  }
 }

 .navds-copybutton--active .navds-copybutton__icon {
-  animation: akselCopyButtonIconAnimation 2s cubic-bezier(0.215, 0.61, 0.355, 1);
+  animation: akselCopyButtonIconAnimation 2s cubic-bezier(0.05, 0.7, 0.1, 1);
 }

@keyframes akselCopyButtonIconAnimation {
@@ -123,104 +140,44 @@
  }
 }

-:where(.navds-copybutton--small, .navds-copybutton--xsmall):where(:not(:only-child)) {
-  margin: -0.125rem;
-}
+/* ---------------------------- CopyButton Action --------------------------- */
+.navds-copybutton--action {
+  color: var(--ax-text-accent);

-.navds-copybutton:focus-visible {
-  outline: none;
-  box-shadow: var(--a-shadow-focus);
-}
+  &.navds-copybutton--active {
+    color: var(--ax-text-success);

-@supports not selector(:focus-visible) {
-  .navds-copybutton:focus {
-    outline: none;
-    box-shadow: var(--a-shadow-focus);
+    &:hover {
+      color: var(--ax-text-success-strong);
+    }
+  }
+
+  &:hover {
+    color: var(--ax-text-accent-strong);
+  }
+
+  &:disabled {
+    color: var(--ax-text-accent);
  }
 }

-/* Variant/action */
-.navds-copybutton--action {
-  color: var(--ac-copybutton-action-text, var(--__ac-copybutton-action-text, var(--a-text-action)));
-  background-color: var(--ac-copybutton-action-bg, var(--a-surface-transparent));
-}
-
-.navds-copybutton--action:hover {
-  color: var(--ac-copybutton-action-hover-text, var(--__ac-copybutton-action-text, var(--a-text-action-hover)));
-  background-color: var(--ac-copybutton-action-hover-bg, var(--__ac-copybutton-bg-hover, var(--a-surface-hover)));
-}
-
-.navds-copybutton--action:where(:disabled),
-.navds-copybutton--action:hover:where(:disabled) {
-  color: var(--ac-copybutton-action-text, var(--__ac-copybutton-action-text, var(--a-text-action)));
-  background-color: var(--ac-copybutton-action-bg, var(--a-surface-transparent));
-  box-shadow: none;
-}
-
-.navds-copybutton--active.navds-copybutton--action {
-  color: var(--ac-copybutton-action-active-text, var(--__ac-copybutton-icon-success, var(--a-icon-success)));
-}
-
-/* Variant/neutral */
+/* --------------------------- CopyButton Neutral --------------------------- */
 .navds-copybutton--neutral {
-  color: var(--ac-copybutton-neutral-text, var(--__ac-copybutton-neutral-text, var(--a-text-subtle)));
-  background-color: var(--ac-copybutton-neutral-bg, var(--a-surface-transparent));
-}
+  color: var(--ax-text-subtle);

-.navds-copybutton--neutral:hover {
-  color: var(--ac-copybutton-neutral-hover-text, var(--__ac-copybutton-text, var(--a-text-default)));
-  background-color: var(--ac-copybutton-neutral-hover-bg, var(--__ac-copybutton-bg-hover, var(--a-surface-hover)));
-}
+  &:hover,
+  &.navds-copybutton--active {
+    color: var(--ax-text-default);
+  }

-.navds-copybutton--neutral:where(:disabled, .navds-copybutton--disabled),
-.navds-copybutton--neutral:hover:where(:disabled, .navds-copybutton--disabled) {
-  color: var(--ac-copybutton-neutral-text, var(--__ac-copybutton-text, var(--a-text-default)));
-  background-color: var(--ac-copybutton-neutral-bg, var(--a-surface-transparent));
-  box-shadow: none;
-}
-
-.navds-copybutton--active.navds-copybutton--neutral {
-  color: var(--ac-copybutton-neutral-active-text, var(--__ac-copybutton-text, var(--a-text-default)));
+  &:disabled {
+    color: var(--ax-text-subtle);
+  }
 }

 .navds-copybutton__content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
-  gap: var(--a-spacing-2);
-}
-
-.navds-copybutton--small > .navds-copybutton__content {
-  gap: var(--a-spacing-1-alt);
-}
-
-.navds-copybutton--xsmall > .navds-copybutton__content {
-  gap: var(--a-spacing-1);
-}
-
-.navds-copybutton--active > .navds-copybutton__content {
-  animation: var(--ac-copybutton-animation, akselCopyButtonAnimation 0.4s linear);
-}
-
-@keyframes akselCopyButtonAnimation {
-  0% {
-    opacity: 0.4;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-/* Disabled */
-.navds-copybutton:where(:disabled) {
-  cursor: not-allowed;
-  opacity: 0.3;
-}
-
-@media (forced-colors: active) {
-  .navds-copybutton:where(:disabled) {
-    opacity: 1;
-    border-color: GrayText;
-  }
+  gap: var(--ax-spacing-2);
 }
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "7.4.2",
+  "version": "7.5.1",
  "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": "^7.4.2",
+    "@navikt/ds-tokens": "^7.5.1",
    "autoprefixer": "^10.4.20",
    "cssnano": "6.0.0",
    "fast-glob": "3.2.11",
@@ -114,6 +114,7 @@
  align-items: center;
  line-height: inherit;
  font-weight: inherit;
+  text-align: inherit;
 }

 .navds-table--small .navds-table__sort-button {
@@ -1,5 +1,37 @@
 # @navikt/ds-react

+## 7.5.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@7.5.1
+  - @navikt/aksel-icons@7.5.1
+
+## 7.5.0
+
+### Minor Changes
+
+- React: Allow all react versions above 17.0.0 trough peerDependencies. ([#3334](https://github.com/navikt/aksel/pull/3334))
+
+### Patch Changes
+
+- Datepicker: Use of 'open'-prop set to 'true' on first render could lead to the dialog not opening. ([#3333](https://github.com/navikt/aksel/pull/3333))
+
+- Updated dependencies [[`47a4dd6`](https://github.com/navikt/aksel/commit/47a4dd6c4c37a9ced9df1f21529e8a6244b342b1)]:
+  - @navikt/aksel-icons@7.5.0
+  - @navikt/ds-tokens@7.5.0
+
+## 7.4.3
+
+### Patch Changes
+
+- Pagination: More precise type for renderItem ([#3275](https://github.com/navikt/aksel/pull/3275))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@7.4.3
+  - @navikt/aksel-icons@7.4.3
+
 ## 7.4.2

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "7.4.2",
+  "version": "7.5.1",
  "description": "React components from the Norwegian Labour and Welfare Administration.",
  "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
  "license": "MIT",
@@ -604,8 +604,8 @@
  "dependencies": {
    "@floating-ui/react": "0.25.4",
    "@floating-ui/react-dom": "^2.0.9",
-    "@navikt/aksel-icons": "^7.4.2",
-    "@navikt/ds-tokens": "^7.4.2",
+    "@navikt/aksel-icons": "^7.5.1",
+    "@navikt/ds-tokens": "^7.5.1",
    "clsx": "^2.1.0",
    "date-fns": "^3.0.0",
    "react-day-picker": "8.10.1"
@@ -628,8 +628,8 @@
    "vitest": "^1.2.2"
  },
  "peerDependencies": {
-    "@types/react": "^17.0.30 || ^18.0.0",
-    "react": "^17.0.0 || ^18.0.0"
+    "@types/react": ">=17.0.30",
+    "react": ">=17.0.0"
  },
  "peerDependenciesMeta": {
    "@types/react": {
@@ -31,6 +31,7 @@ interface AccordionComponent

 export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
  /**
+   * @deprecated Prop will be removed in future versions. "default" will be the only variant.
   * @default "default"
   */
  variant?: "default" | "neutral";
@@ -1,5 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
+import { UNSAFE_useAkselTheme } from "../provider";
 import { BodyLong } from "../typography";
 import { AccordionItemContext } from "./AccordionItem";

@@ -15,6 +16,8 @@ const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(
  ({ children, className, ...rest }, ref) => {
    const context = useContext(AccordionItemContext);

+    const themeContext = UNSAFE_useAkselTheme(false);
+
    if (context === null) {
      console.error(
        "<Accordion.Content> has to be used within an <Accordion.Item>",
@@ -38,7 +41,11 @@ const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(
          !context.open || undefined
        } /* Added to fix bug with Radio component, where label text inside a span sometimes is ignored by screen readers after hiding/displaying the RadioGroup inside an Accordion */
      >
-        {children}
+        {themeContext ? (
+          <div className="navds-accordion__content-inner">{children}</div>
+        ) : (
+          children
+        )}
      </BodyLong>
    );
  },
@@ -1,6 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
+import { UNSAFE_useAkselTheme } from "../provider";
 import { Heading } from "../typography";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { AccordionContext } from "./AccordionContext";
@@ -19,6 +20,8 @@ const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(
    const itemContext = useContext(AccordionItemContext);
    const accordionContext = useContext(AccordionContext);

+    const themeContext = UNSAFE_useAkselTheme(false);
+
    if (itemContext === null) {
      console.error(
        "<Accordion.Header> has to be used within an <Accordion.Item>, which in turn must be within an <Accordion>",
@@ -26,6 +29,13 @@ const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(
      return null;
    }

+    let headingSize = accordionContext?.headingSize ?? "small";
+
+    if (themeContext) {
+      /* Fallback to "medium" Accordion-size if any other sizes are used */
+      headingSize = accordionContext?.size === "small" ? "xsmall" : "small";
+    }
+
    return (
      <button
        ref={ref}
@@ -42,7 +52,7 @@ const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(
          />
        </span>
        <Heading
-          size={accordionContext?.headingSize ?? "small"}
+          size={headingSize}
          as="span"
          className="navds-accordion__header-content"
        >
@@ -65,6 +65,7 @@ const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
          "navds-accordion__item--neutral": context?.variant === "neutral",
          "navds-accordion__item--no-animation": !shouldAnimate.current,
        })}
+        data-expanded={_open}
        ref={ref}
        {...omit(rest, ["onClick"])}
      >
@@ -88,8 +88,8 @@ export const Variants: Story = {
        <React.Fragment key={variant}>
          <h3>{variant}</h3>
          <Chat
-            avatar="NAV"
-            name="NAV"
+            avatar="Ls"
+            name="Ls"
            timestamp="01.01.21 14:00"
            variant={variant}
          >
@@ -48,6 +48,7 @@ export const ToggleChips: OverridableComponent<
          { "navds-chips__toggle--with-checkmark": checkmark },
        )}
        aria-pressed={selected}
+        data-pressed={selected}
      >
        {checkmark && (
          <svg
@@ -73,7 +74,7 @@ export const ToggleChips: OverridableComponent<
                fillRule="evenodd"
                clipRule="evenodd"
                d="M10 3.125C6.20304 3.125 3.125 6.20304 3.125 10C3.125 13.797 6.20304 16.875 10 16.875C13.797 16.875 16.875 13.797 16.875 10C16.875 6.20304 13.797 3.125 10 3.125ZM1.875 10C1.875 5.51269 5.51269 1.875 10 1.875C14.4873 1.875 18.125 5.51269 18.125 10C18.125 14.4873 14.4873 18.125 10 18.125C5.51269 18.125 1.875 14.4873 1.875 10Z"
-                fill="var(--ac-chip-toggle-circle-border, var(--a-border-default))"
+                fill="var(--ax-text-neutral-icon, var(--ac-chip-toggle-circle-border, var(--a-border-default)))"
              />
            )}
          </svg>
@@ -1,6 +1,6 @@
 import cl from "clsx";
 import { isWeekend } from "date-fns";
-import React, { forwardRef, useRef, useState } from "react";
+import React, { forwardRef, useState } from "react";
 import { DateRange, DayPicker, isMatch } from "react-day-picker";
 import { omit } from "../../util";
 import { useId } from "../../util/hooks";
@@ -88,8 +88,9 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
    const ariaId = useId(id);
    const [open, setOpen] = useState(_open ?? false);

-    const wrapperRef = useRef<HTMLDivElement | null>(null);
-    const mergedRef = useMergeRefs(wrapperRef, ref);
+    /* We use state here to insure that anchor is defined if open is true on initial render */
+    const [wrapperRef, setWrapperRef] = useState<HTMLDivElement | null>(null);
+    const mergedRef = useMergeRefs(setWrapperRef, ref);

    const [selectedDates, setSelectedDates] = React.useState<
      Date | Date[] | DateRange | undefined
@@ -167,7 +168,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
          {children}
          <DateWrapper
            open={_open ?? open}
-            anchor={wrapperRef.current}
+            anchor={wrapperRef}
            onClose={() => onClose?.() ?? setOpen(false)}
            locale={locale}
            variant={mode}
@@ -1,5 +1,5 @@
 import cl from "clsx";
-import React, { forwardRef, useRef, useState } from "react";
+import React, { forwardRef, useState } from "react";
 import { DayPickerProvider } from "react-day-picker";
 import { useId } from "../../util/hooks";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
@@ -81,8 +81,9 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
    const ariaId = useId(id);
    const [open, setOpen] = useState(_open ?? false);

-    const wrapperRef = useRef<HTMLDivElement | null>(null);
-    const mergedRef = useMergeRefs(wrapperRef, ref);
+    /* We use state here to insure that anchor is defined if open is true on initial render */
+    const [wrapperRef, setWrapperRef] = useState<HTMLDivElement | null>(null);
+    const mergedRef = useMergeRefs(setWrapperRef, ref);

    const [selectedMonth, setSelectedMonth] = useState<Date | undefined>(
      defaultSelected,
@@ -118,7 +119,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
          {children}
          <DateWrapper
            open={_open ?? open}
-            anchor={wrapperRef.current}
+            anchor={wrapperRef}
            onClose={() => onClose?.() ?? setOpen(false)}
            locale={locale}
            variant="month"
@@ -94,7 +94,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
          "navds-sr-only": hideLabel,
        })}
      >
-        <ReadOnlyIcon readOnly={readOnly} />
+        {readOnly && <ReadOnlyIcon />}
        {label}
      </Label>
      {!!description && (
@@ -1,20 +1,17 @@
 import React from "react";
 import { PadlockLockedFillIcon } from "@navikt/aksel-icons";
+import { useI18n } from "../util/i18n/i18n.context";

-export const ReadOnlyIcon = ({
-  readOnly,
-  nativeReadOnly = true,
-}: {
-  readOnly?: boolean;
-  nativeReadOnly?: boolean;
-}) => {
-  if (readOnly) {
-    return (
-      <PadlockLockedFillIcon
-        {...(nativeReadOnly ? { "aria-hidden": true } : { title: "readonly" })}
-        className="navds-form-field__readonly-icon"
-      />
-    );
-  }
-  return null;
-};
+export const ReadOnlyIcon = () => (
+  <PadlockLockedFillIcon
+    aria-hidden
+    className="navds-form-field__readonly-icon"
+  />
+);
+
+export const ReadOnlyIconWithTitle = () => (
+  <PadlockLockedFillIcon
+    title={useI18n("global")("readOnly")}
+    className="navds-form-field__readonly-icon"
+  />
+);
@@ -3,7 +3,7 @@ import React, { forwardRef } from "react";
 import { BodyShort } from "../../typography";
 import { omit } from "../../util";
 import { useId } from "../../util/hooks";
-import { ReadOnlyIcon } from "../ReadOnlyIcon";
+import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
 import { CheckboxProps } from "./types";
 import useCheckbox from "./useCheckbox";

@@ -90,9 +90,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
              className="navds-checkbox__label-text"
              aria-hidden
            >
-              {!nested && (
-                <ReadOnlyIcon readOnly={readOnly} nativeReadOnly={false} />
-              )}
+              {!nested && readOnly && <ReadOnlyIconWithTitle />}
              {props.children}
            </BodyShort>
            {props.description && (
@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
-import { ReadOnlyIcon } from "../ReadOnlyIcon";
+import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
 import ComboboxWrapper from "./ComboboxWrapper";
 import FilteredOptions from "./FilteredOptions/FilteredOptions";
 import { useFilteredOptionsContext } from "./FilteredOptions/filteredOptionsContext";
@@ -46,7 +46,7 @@ export const Combobox = forwardRef<
          "navds-sr-only": hideLabel,
        })}
      >
-        <ReadOnlyIcon nativeReadOnly={false} readOnly={readOnly} />
+        {readOnly && <ReadOnlyIconWithTitle />}
        {label}
      </Label>
      {!!description && (
@@ -61,7 +61,7 @@ interface ErrorSummaryComponent
 *     Felt må fylles ut med alder
 *   </ErrorSummary.Item>
 *   <ErrorSummary.Item href="#2">
- *     Tekstfeltet må ha en godkjent e-mail
+ *     Tekstfeltet må ha en godkjent e-post
 *   </ErrorSummary.Item>
 * </ErrorSummary>
 * ```
@@ -21,7 +21,7 @@ export const Default: Story = {
    <ErrorSummary headingTag={headingTag || undefined} {...rest}>
      <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
      <ErrorSummary.Item href="#2">
-        Tekstfeltet må ha en godkjent e-mail
+        Tekstfeltet må ha en godkjent e-post
      </ErrorSummary.Item>
    </ErrorSummary>
  ),
@@ -50,7 +50,7 @@ export const Small: Story = {
    <ErrorSummary heading="Feiloppsummering komponent" size="small">
      <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
      <ErrorSummary.Item href="#2">
-        Tekstfeltet må ha en godkjent e-mail
+        Tekstfeltet må ha en godkjent e-post
      </ErrorSummary.Item>
    </ErrorSummary>
  ),
@@ -72,7 +72,7 @@ export const A11yDemo: Story = {
        <ErrorSummary heading="Feiloppsummering tittel" ref={ref}>
          <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
          <ErrorSummary.Item href="#2">
-            Tekstfeltet må ha en godkjent e-mail
+            Tekstfeltet må ha en godkjent e-post
          </ErrorSummary.Item>
        </ErrorSummary>
      </div>
@@ -89,7 +89,7 @@ export const FocusDemo: Story = {
        <ErrorSummary heading="Feiloppsummering tittel" ref={ref}>
          <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
          <ErrorSummary.Item href="#2">
-            Tekstfeltet må ha en godkjent e-mail
+            Tekstfeltet må ha en godkjent e-post
          </ErrorSummary.Item>
        </ErrorSummary>
      </div>
@@ -117,7 +117,7 @@ export const Chromatic: Story = {
        <ErrorSummary heading="Feiloppsummering komponent">
          <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
          <ErrorSummary.Item href="#2">
-            Tekstfeltet må ha en godkjent e-mail
+            Tekstfeltet må ha en godkjent e-post
          </ErrorSummary.Item>
        </ErrorSummary>
      </div>
@@ -126,7 +126,7 @@ export const Chromatic: Story = {
        <ErrorSummary heading="Feiloppsummering komponent" size="small">
          <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
          <ErrorSummary.Item href="#2">
-            Tekstfeltet må ha en godkjent e-mail
+            Tekstfeltet må ha en godkjent e-post
          </ErrorSummary.Item>
        </ErrorSummary>
      </div>
@@ -144,7 +144,7 @@ export const ProvidedTranslations: Story = {
        <ErrorSummary size="small">
          <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
          <ErrorSummary.Item href="#2">
-            Tekstfeltet må ha en godkjent e-mail
+            Tekstfeltet må ha en godkjent e-post
          </ErrorSummary.Item>
        </ErrorSummary>
      </UNSAFE_AkselLanguageProvider>
@@ -2,7 +2,7 @@ import cl from "clsx";
 import React, { FieldsetHTMLAttributes, forwardRef, useContext } from "react";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { omit } from "../../util";
-import { ReadOnlyIcon } from "../ReadOnlyIcon";
+import { ReadOnlyIcon, ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
 import { FormFieldProps } from "../useFormField";
 import { FieldsetContext } from "./context";
 import { useFieldset } from "./useFieldset";
@@ -89,7 +89,8 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
              "navds-sr-only": !!hideLegend,
            })}
          >
-            <ReadOnlyIcon readOnly={readOnly} nativeReadOnly={nativeReadOnly} />
+            {readOnly &&
+              (nativeReadOnly ? <ReadOnlyIcon /> : <ReadOnlyIconWithTitle />)}
            {legend}
          </Label>
          {!!description && (
@@ -3,7 +3,7 @@ import React, { SelectHTMLAttributes, forwardRef } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { omit } from "../../util";
-import { ReadOnlyIcon } from "../ReadOnlyIcon";
+import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
 import { FormFieldProps, useFormField } from "../useFormField";

 export interface SelectProps
@@ -112,7 +112,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
            "navds-sr-only": hideLabel,
          })}
        >
-          <ReadOnlyIcon readOnly={readOnly} nativeReadOnly={false} />
+          {readOnly && <ReadOnlyIconWithTitle />}
          {label}
        </Label>
        {!!description && (
@@ -8,7 +8,7 @@ import React, {
 import { Loader } from "../../loader";
 import { BodyShort } from "../../typography";
 import { omit } from "../../util";
-import { ReadOnlyIcon } from "../ReadOnlyIcon";
+import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
 import { FormFieldProps, useFormField } from "../useFormField";

 const SelectedIcon = () => (
@@ -21,7 +21,6 @@ const SelectedIcon = () => (
    focusable={false}
    role="img"
    aria-hidden
-    aria-label="Deaktiver valg"
  >
    <path
      fillRule="evenodd"
@@ -117,19 +116,19 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
          defaultChecked={defaultChecked}
          ref={ref}
          type="checkbox"
-          onChange={(e) => {
+          onChange={(event) => {
            if (readOnly) {
              return;
            }
-            setChecked(e.target.checked);
-            props.onChange?.(e);
+            setChecked(event.target.checked);
+            props.onChange?.(event);
          }}
-          onClick={(e) => {
+          onClick={(event) => {
            if (readOnly) {
-              e.preventDefault();
+              event.preventDefault();
              return;
            }
-            props?.onClick?.(e);
+            props.onClick?.(event);
          }}
          className={cl(className, "navds-switch__input")}
        />
@@ -150,11 +149,11 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
          <div
            className={cl("navds-switch__content", {
              "navds-sr-only": hideLabel,
-              "navds-switch--with-description": !!description && !hideLabel,
+              "navds-switch--with-description": description && !hideLabel,
            })}
          >
            <BodyShort as="div" size={size} className="navds-switch__label">
-              <ReadOnlyIcon readOnly={readOnly} nativeReadOnly={false} />
+              {readOnly && <ReadOnlyIconWithTitle />}
              {children}
            </BodyShort>
            {description && (
@@ -9,9 +9,6 @@ import { ReadOnlyIcon } from "../ReadOnlyIcon";
 import { FormFieldProps, useFormField } from "./../useFormField";
 import Counter from "./TextareaCounter";

-/**
- * TODO: Mulighet for lokalisering av sr-only/counter text
- */
 export interface TextareaProps
  extends FormFieldProps,
    React.TextareaHTMLAttributes<HTMLTextAreaElement> {
@@ -144,7 +141,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
            "navds-sr-only": hideLabel,
          })}
        >
-          <ReadOnlyIcon readOnly={readOnly} />
+          {readOnly && <ReadOnlyIcon />}
          {label}
        </Label>
        {!!description && (
@@ -91,7 +91,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
            "navds-sr-only": hideLabel,
          })}
        >
-          <ReadOnlyIcon readOnly={readOnly} />
+          {readOnly && <ReadOnlyIcon />}
          {label}
        </Label>

@@ -20,11 +20,7 @@ export const Default = {
        <Box background="surface-alt-1-subtle" padding="5">
          <Box background="surface-alt-2-subtle" padding="5">
            <Bleed marginInline="10 0">
-              <Box
-                padding="3"
-                className="p"
-                background="surface-success-subtle"
-              >
+              <Box padding="3" background="surface-success-subtle">
                <BodyLong>marginInline=&quot;10 0&quot;</BodyLong>
              </Box>
            </Bleed>
@@ -33,11 +29,7 @@ export const Default = {
        <Box background="surface-alt-1-subtle" padding="5">
          <Box background="surface-alt-2-subtle" padding="5">
            <Bleed marginInline="0 10">
-              <Box
-                padding="3"
-                className="p"
-                background="surface-success-subtle"
-              >
+              <Box padding="3" background="surface-success-subtle">
                <BodyLong>marginInline=&quot;0 10&quot;</BodyLong>
              </Box>
            </Bleed>
@@ -46,11 +38,7 @@ export const Default = {
        <Box background="surface-alt-1-subtle" padding="5">
          <Box background="surface-alt-2-subtle" padding="5">
            <Bleed marginBlock="10 0">
-              <Box
-                padding="3"
-                className="p"
-                background="surface-success-subtle"
-              >
+              <Box padding="3" background="surface-success-subtle">
                <BodyLong>marginBlock=&quot;10 0&quot;</BodyLong>
              </Box>
            </Bleed>
@@ -59,11 +47,7 @@ export const Default = {
        <Box background="surface-alt-1-subtle" padding="5">
          <Box background="surface-alt-2-subtle" padding="5">
            <Bleed marginBlock="0 10">
-              <Box
-                padding="3"
-                className="p"
-                background="surface-success-subtle"
-              >
+              <Box padding="3" background="surface-success-subtle">
                <BodyLong>marginBlock=&quot;0 10&quot;</BodyLong>
              </Box>
            </Bleed>
@@ -48,6 +48,12 @@ export const OnlyItems: Story = {
          <ActionMenu.Item onSelect={() => console.log("Item 3 clicked")}>
            Item 3
          </ActionMenu.Item>
+          <ActionMenu.Item
+            onSelect={() => console.log("Item 4 clicked")}
+            variant="danger"
+          >
+            Item 4
+          </ActionMenu.Item>
        </ActionMenu.Content>
      </ActionMenu>
    );
@@ -381,6 +387,9 @@ export const Disabled: Story = {
          <ActionMenu.Item disabled shortcut="T+W">
            Item 1
          </ActionMenu.Item>
+          <ActionMenu.Item disabled variant="danger">
+            Delete
+          </ActionMenu.Item>
          <ActionMenu.Sub>
            <ActionMenu.SubTrigger disabled>Submenu 1</ActionMenu.SubTrigger>
            <ActionMenu.SubContent>
@@ -621,7 +621,7 @@ export const ActionMenuCheckboxItem = forwardRef<
                  width="24"
                  height="24"
                  rx="4"
-                  fill="var(--a-border-default)"
+                  fill="var(--ax-border-default, var(--a-border-default))"
                />
                <rect
                  x="1"
@@ -629,7 +629,7 @@ export const ActionMenuCheckboxItem = forwardRef<
                  width="22"
                  height="22"
                  rx="3"
-                  fill="var(--a-surface-default)"
+                  fill="var(--ax-bg-default, var(--a-surface-default))"
                  strokeWidth="2"
                />
              </g>
@@ -638,7 +638,7 @@ export const ActionMenuCheckboxItem = forwardRef<
                  width="24"
                  height="24"
                  rx="4"
-                  fill="var(--a-surface-action-selected)"
+                  fill="var(--ax-bg-accent-strong-pressed, var(--a-surface-action-selected))"
                />
                <rect
                  x="6"
@@ -646,7 +646,7 @@ export const ActionMenuCheckboxItem = forwardRef<
                  width="12"
                  height="4"
                  rx="1"
-                  fill="var(--a-surface-default)"
+                  fill="var(--ax-bg-default, var(--a-surface-default))"
                />
              </g>
              <g className="navds-action-menu__indicator-icon--checked">
@@ -654,11 +654,11 @@ export const ActionMenuCheckboxItem = forwardRef<
                  width="24"
                  height="24"
                  rx="4"
-                  fill="var(--a-surface-action-selected)"
+                  fill="var(--ax-bg-accent-strong-pressed, var(--a-surface-action-selected))"
                />
                <path
                  d="M10.0352 13.4148L16.4752 7.40467C17.0792 6.83965 18.029 6.86933 18.5955 7.47478C19.162 8.08027 19.1296 9.03007 18.5245 9.59621L11.0211 16.5993C10.741 16.859 10.3756 17 10.0002 17C9.60651 17 9.22717 16.8462 8.93914 16.5611L6.43914 14.0611C5.85362 13.4756 5.85362 12.5254 6.43914 11.9399C7.02467 11.3544 7.97483 11.3544 8.56036 11.9399L10.0352 13.4148Z"
-                  fill="var(--a-surface-default)"
+                  fill="var(--ax-bg-default, var(--a-surface-default))"
                />
              </g>
            </svg>
@@ -756,7 +756,7 @@ export const ActionMenuRadioItem = forwardRef<
                  width="24"
                  height="24"
                  rx="12"
-                  fill="var(--a-border-default)"
+                  fill="var(--ax-border-default, var(--a-border-default))"
                />
                <rect
                  x="1"
@@ -765,7 +765,7 @@ export const ActionMenuRadioItem = forwardRef<
                  height="22"
                  rx="11"
                  strokeWidth="2"
-                  fill="var(--a-surface-default)"
+                  fill="var(--ax-bg-default, var(--a-surface-default))"
                />
              </g>
              <g className="navds-action-menu__indicator-icon--checked">
@@ -775,7 +775,7 @@ export const ActionMenuRadioItem = forwardRef<
                  width="22"
                  height="22"
                  rx="11"
-                  fill="var(--a-surface-default)"
+                  fill="var(--ax-bg-default, var(--a-surface-default))"
                />
                <rect
                  x="1"
@@ -783,12 +783,12 @@ export const ActionMenuRadioItem = forwardRef<
                  width="22"
                  height="22"
                  rx="11"
-                  stroke="var(--a-surface-action-selected)"
+                  stroke="var(--ax-bg-accent-strong-pressed, var(--a-surface-action-selected))"
                  strokeWidth="2"
                />
                <path
                  d="M20 12C20 16.4178 16.4178 20 12 20C7.58222 20 4 16.4178 4 12C4 7.58222 7.58222 4 12 4C16.4178 4 20 7.58222 20 12Z"
-                  fill="var(--a-surface-action-selected)"
+                  fill="var(--ax-bg-accent-strong-pressed, var(--a-surface-action-selected))"
                />
              </g>
            </svg>
@@ -9,6 +9,17 @@ import PaginationItem, {
  PaginationItemType,
 } from "./PaginationItem";

+interface RenderItemProps
+  extends Pick<
+    PaginationItemProps,
+    "className" | "disabled" | "selected" | "icon" | "iconPosition"
+  > {
+  children: React.ReactNode;
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+  page: number;
+  size: Exclude<PaginationProps["size"], undefined>;
+}
+
 export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
  /**
   * Current page.
@@ -46,9 +57,9 @@ export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
  prevNextTexts?: boolean;
  /**
   * Override pagination item rendering.
-   * @default (item: PaginationItemProps) => <PaginationItem {...item} />
+   * @default PaginationItem
   */
-  renderItem?: (item: PaginationItemProps) => ReturnType<React.FC>;
+  renderItem?: (item: RenderItemProps) => ReturnType<React.FC>;
  /**
   * Pagination heading. We recommend adding heading instead of `aria-label` to help assistive technologies with an extra navigation-stop.
   */
@@ -111,7 +122,7 @@ export const getSteps = ({
 * ```jsx
 * <Pagination
 *   page={pageState}
- *   onPageChange={(x) => setPageState(x)}
+ *   onPageChange={setPageState}
 *   count={9}
 *   boundaryCount={1}
 *   siblingCount={1}
@@ -131,9 +142,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
      prevNextTexts = false,
      srHeading,
      "aria-labelledby": ariaLabelledBy,
-      renderItem: Item = (item: PaginationItemProps) => (
-        <PaginationItem {...item} />
-      ),
+      renderItem: Item = PaginationItem,
      ...rest
    },
    ref,
@@ -218,6 +227,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
              ) : (
                <li key={step}>
                  <Item
+                    /* Remember to update RenderItemProps if you make changes to props sent into Item */
                    onClick={() => onPageChange?.(n)}
                    selected={page === n}
                    page={n}
@@ -1,2 +1,6 @@
 "use client";
 export { default as Provider, type ProviderProps } from "./Provider";
+export {
+  AkselTheme as UNSAFE_AkselTheme,
+  useAkselTheme as UNSAFE_useAkselTheme,
+} from "./theme/AkselTheme";
@@ -0,0 +1,52 @@
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import { createContext } from "../../util/create-context";
+
+type AkselThemeContext = {
+  theme: "light" | "dark";
+};
+
+const [ThemeProvider, useAkselTheme] = createContext<AkselThemeContext>({
+  errorMessage: "useAkselTheme must be used within AkselThemeProvider",
+  hookName: "useAkselTheme",
+  name: "AkselThemeProvider",
+  providerName: "AkselThemeProvider",
+});
+
+type AkselThemeProps = {
+  children: React.ReactNode;
+  className?: string;
+  hasBackground?: boolean;
+} & AkselThemeContext;
+
+const AkselTheme = forwardRef<HTMLDivElement, AkselThemeProps>(
+  (props: AkselThemeProps, ref) => {
+    const context = useAkselTheme(false);
+
+    const {
+      children,
+      className,
+      theme = context?.theme ?? "light",
+      hasBackground: hasBackgroundProp = true,
+    } = props;
+
+    const isRoot = context === undefined;
+
+    const hasBackground =
+      hasBackgroundProp ?? (isRoot || props.theme !== undefined);
+
+    return (
+      <ThemeProvider theme={theme}>
+        <div
+          ref={ref}
+          className={cl("navds-theme", className, theme)}
+          data-background={hasBackground}
+        >
+          {children}
+        </div>
+      </ThemeProvider>
+    );
+  },
+);
+
+export { AkselTheme, useAkselTheme };
@@ -4,6 +4,7 @@ export default {
  global: {
    showMore: "Show more",
    showLess: "Show less",
+    readOnly: "Read-only",
  },

  FileUpload: {
@@ -10,6 +10,7 @@ export default {
  global: {
    showMore: "Vis mer",
    showLess: "Vis mindre",
+    readOnly: "Skrivebeskyttet",
  },

  FileUpload: {
@@ -4,6 +4,7 @@ export default {
  global: {
    showMore: "Vis meir",
    showLess: "Vis mindre",
+    readOnly: "Skrivebeskytta",
  },

  FileUpload: {
@@ -1,5 +1,11 @@
 # @navikt/ds-tailwind

+## 7.5.1
+
+## 7.5.0
+
+## 7.4.3
+
 ## 7.4.2

 ## 7.4.1
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tailwind",
-  "version": "7.4.2",
+  "version": "7.5.1",
  "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": "^7.4.2",
+    "@navikt/ds-tokens": "^7.5.1",
    "color": "4.2.3",
    "lodash": "^4.17.21",
    "tailwindcss": "^3.3.3",
@@ -1,5 +1,11 @@
 # @navikt/ds-tokens

+## 7.5.1
+
+## 7.5.0
+
+## 7.4.3
+
 ## 7.4.2

 ## 7.4.1
@@ -68,10 +68,10 @@ export const globalColorDarkModeConfigWithoutAlpha: GlobalConfigT = {
  },
  /* Info is currently just a copy of brandThree */
  info: {
-    "100": { value: "#131e26", type: "global-color", group: "brandThree" },
-    "200": { value: "#18242c", type: "global-color", group: "brandThree" },
-    "300": { value: "#1e2c35", type: "global-color", group: "brandThree" },
-    "400": { value: "#273843", type: "global-color", group: "brandThree" },
+    "100": { value: "#071e2d", type: "global-color", group: "brandThree" },
+    "200": { value: "#0d2534", type: "global-color", group: "brandThree" },
+    "300": { value: "#122d3e", type: "global-color", group: "brandThree" },
+    "400": { value: "#19394c", type: "global-color", group: "brandThree" },
    "500": { value: "#43718d", type: "global-color", group: "brandThree" },
    "600": { value: "#5a839b", type: "global-color", group: "brandThree" },
    "700": { value: "#7396ab", type: "global-color", group: "brandThree" },
@@ -104,10 +104,10 @@ export const globalColorDarkModeConfigWithoutAlpha: GlobalConfigT = {
    "1000": { value: "#e3c2b1", type: "global-color", group: "brandTwo" },
  },
  brandThree: {
-    "100": { value: "#131e26", type: "global-color", group: "brandThree" },
-    "200": { value: "#18242c", type: "global-color", group: "brandThree" },
-    "300": { value: "#1e2c35", type: "global-color", group: "brandThree" },
-    "400": { value: "#273843", type: "global-color", group: "brandThree" },
+    "100": { value: "#071e2d", type: "global-color", group: "brandThree" },
+    "200": { value: "#0d2534", type: "global-color", group: "brandThree" },
+    "300": { value: "#122d3e", type: "global-color", group: "brandThree" },
+    "400": { value: "#19394c", type: "global-color", group: "brandThree" },
    "500": { value: "#43718d", type: "global-color", group: "brandThree" },
    "600": { value: "#5a839b", type: "global-color", group: "brandThree" },
    "700": { value: "#7396ab", type: "global-color", group: "brandThree" },
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "7.4.2",
+  "version": "7.5.1",
  "description": "Design-tokens for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -1,34 +1,54 @@
 # Changelog

+## 7.5
+
+### @navikt/aksel-icons
+
+- Icons: 🎉 Added FileJpeg, FilePng and MedicalThermometer. ([#3332](https://github.com/navikt/aksel/pull/3332))
+
+### @navikt/aksel
+
+- Chore: Manually bump version to sync npm and github-releases ([`aa7c2d9`](https://github.com/navikt/aksel/commit/aa7c2d9598434d6304432daa20e0a1eeedd03b1b))
+
+### @navikt/ds-react
+
+- React: Allow all react versions above 17.0.0 trough peerDependencies. ([#3334](https://github.com/navikt/aksel/pull/3334))
+
+* Datepicker: Use of 'open'-prop set to 'true' on first render could lead to the dialog not opening. ([#3333](https://github.com/navikt/aksel/pull/3333))
+
 ## 7.4

 ### @navikt/ds-react

- Combobox: Pressing 'Enter' after canceling autocomplete could result in using matching options in list. ([#3306](https://github.com/navikt/aksel/pull/3306))
+- Pagination: More precise type for renderItem ([#3275](https://github.com/navikt/aksel/pull/3275))

-* Tabs.List: Remove redundant icon titles ([#3282](https://github.com/navikt/aksel/pull/3282))
+* Combobox: Pressing 'Enter' after canceling autocomplete could result in using matching options in list. ([#3306](https://github.com/navikt/aksel/pull/3306))

-* Combobox: onToggleSelected is now called with correct value when autocomplete and new values are allowed. ([#3287](https://github.com/navikt/aksel/pull/3287))
+- Tabs.List: Remove redundant icon titles ([#3282](https://github.com/navikt/aksel/pull/3282))

-* Combobox: :bug: Fix scroll issue when using arrow keys to navigate list ([#3269](https://github.com/navikt/aksel/pull/3269))
+- Combobox: onToggleSelected is now called with correct value when autocomplete and new values are allowed. ([#3287](https://github.com/navikt/aksel/pull/3287))

-* Search: Remove redundant role attribute ([#3280](https://github.com/navikt/aksel/pull/3280))
+- Combobox: :bug: Fix scroll issue when using arrow keys to navigate list ([#3269](https://github.com/navikt/aksel/pull/3269))

-* Monthpicker: Add allowed input format 'MMyyyy'. ([#3285](https://github.com/navikt/aksel/pull/3285))
+- Search: Remove redundant role attribute ([#3280](https://github.com/navikt/aksel/pull/3280))

- Combobox: Enable option to add a new value while autocompleting and highlight matches in FilteredOptions. ([#3225](https://github.com/navikt/aksel/pull/3225))
+- Monthpicker: Add allowed input format 'MMyyyy'. ([#3285](https://github.com/navikt/aksel/pull/3285))

-* Date/MonthPicker: Upgrade react-day-picker to fix issue with React 19 ([#3268](https://github.com/navikt/aksel/pull/3268))
+* Combobox: Enable option to add a new value while autocompleting and highlight matches in FilteredOptions. ([#3225](https://github.com/navikt/aksel/pull/3225))

-* Combobox: Don't scroll when browsing list with mouse ([#3265](https://github.com/navikt/aksel/pull/3265))
+- Date/MonthPicker: Upgrade react-day-picker to fix issue with React 19 ([#3268](https://github.com/navikt/aksel/pull/3268))

-* Avoid warning about element.ref in React 19 ([#3268](https://github.com/navikt/aksel/pull/3268))
+- Combobox: Don't scroll when browsing list with mouse ([#3265](https://github.com/navikt/aksel/pull/3265))

-* Checkbox: Remove redundant attribute aria-checked ([#3274](https://github.com/navikt/aksel/pull/3274))
+- Avoid warning about element.ref in React 19 ([#3268](https://github.com/navikt/aksel/pull/3268))
+
+- Checkbox: Remove redundant attribute aria-checked ([#3274](https://github.com/navikt/aksel/pull/3274))

 ### @navikt/ds-css

- Combobox: :bug: Fix scroll issue when using arrow keys to navigate list ([#3269](https://github.com/navikt/aksel/pull/3269))
+- Table.ColumnHeader: Inherit text alignment in button ([#3319](https://github.com/navikt/aksel/pull/3319))
+
+* Combobox: :bug: Fix scroll issue when using arrow keys to navigate list ([#3269](https://github.com/navikt/aksel/pull/3269))

 ## 7.3

@@ -0,0 +1 @@
+* @navikt/designsystem @navikt/aksel
@@ -94,3 +94,8 @@ Løsningen forvaltes av team Aksel
 <a href="https://www.chromatic.com/"><img src="https://user-images.githubusercontent.com/321738/84662277-e3db4f80-af1b-11ea-88f5-91d67a5e59f6.png" width="153" height="30" alt="Chromatic" /></a>

 Thanks to [Chromatic](https://www.chromatic.com/) for providing the visual testing platform that helps us review UI changes and catch visual regressions.
+
+
+## Kode generert av GitHub Copilot
+
+Dette repoet bruker GitHub Copilot til å generere kode.
@@ -15,10 +15,10 @@
    "playroom"
  ],
  "dependencies": {
-    "@navikt/aksel-icons": "^7.4.2",
-    "@navikt/ds-css": "^7.4.2",
-    "@navikt/ds-react": "^7.4.2",
-    "@navikt/ds-tailwind": "^7.4.2",
-    "@navikt/ds-tokens": "^7.4.2"
+    "@navikt/aksel-icons": "^7.5.1",
+    "@navikt/ds-css": "^7.5.1",
+    "@navikt/ds-react": "^7.5.1",
+    "@navikt/ds-tailwind": "^7.5.1",
+    "@navikt/ds-tokens": "^7.5.1"
  }
 }
@@ -210,7 +210,7 @@ const options: {
    icon: <TestFlaskIcon aria-hidden />,
  },
  "komponent-beta-unsafe": {
-    text: "Komponenten er under utvikling. Så lenge komponenten er prefikset med UNSAFE kan det også medføre breaking-changes i minor versjon av kodepakker og i Figma. Teamet ditt må ta selv ta stilling til om dere ønsker å bruke denne i produksjon.",
+    text: "Komponenten er under utvikling. Så lenge komponenten er prefikset med UNSAFE kan det også medføre breaking-changes i minor versjon av kodepakker og i Figma. Teamet ditt må selv ta stilling til om dere ønsker å bruke denne i produksjon.",
    link: `${issueUrl}?labels=forespørsel+🥰%2Ckomponenter+🧩%2Cbeta+🧪&template=update-component.yml&title=%5BInnspill+til+komponent%5D%3A+`,
    heading: "Beta",
    icon: (
@@ -13,23 +13,23 @@
    "cp:static": "copyfiles -E -u 1 '.next/static/**' .next/standalone/aksel.nav.no/website/.next/",
    "cp:public": "copyfiles -E 'public/**' .next/standalone/aksel.nav.no/website/",
    "cp:assets": "yarn cp:playroom && yarn cp:public && yarn cp:static",
-    "update:searchindex": "yarn tsx --env-file=.env ./scripts/create-index",
+    "update:searchindex": "yarn tsx --env-file-if-exists=.env ./scripts/create-index",
    "e2e": "yarn build && yarn start-server-and-test 'yarn start' http://localhost:3000 'yarn playwright'",
    "e2e:full": "yarn build && yarn generate-testpaths && FULL_TEST=true yarn start-server-and-test start http://localhost:3000 playwright",
    "e2e:ci-full": "yarn generate-testpaths && FULL_TEST=true yarn start-server-and-test start http://localhost:3000 playwright",
-    "update:rss": "yarn tsx --env-file=.env ./scripts/generate-rss-feed",
-    "update:props": "yarn tsx --env-file=.env ./scripts/update-props",
-    "update:tokens": "yarn tsx --env-file=.env ./scripts/update-tokens",
-    "update:eksempler": "yarn tsx --env-file=.env ./scripts/update-examples/update-sanity",
+    "update:rss": "yarn tsx --env-file-if-exists=.env ./scripts/generate-rss-feed",
+    "update:props": "yarn tsx --env-file-if-exists=.env ./scripts/update-props",
+    "update:tokens": "yarn tsx --env-file-if-exists=.env ./scripts/update-tokens",
+    "update:eksempler": "yarn tsx --env-file-if-exists=.env ./scripts/update-examples/update-sanity",
    "validate:eksempler": "yarn tsx ./scripts/update-examples/validate",
-    "update:changelog": "yarn tsx --env-file=.env ./scripts/changelog",
+    "update:changelog": "yarn tsx --env-file-if-exists=.env ./scripts/changelog",
    "update:sanity": "yarn update:tokens && yarn update:props && yarn update:eksempler && yarn update:changelog",
    "analyze": "cross-env ANALYZE=true yarn build",
    "test": "vitest run -c config/vitest.config.ts",
    "test:watch": "vitest watch -c config/vitest.config.ts",
    "playwright": "playwright test",
-    "backup": "yarn tsx --env-file=.env scripts/backup.ts",
-    "generate-testpaths": "yarn tsx --env-file=.env ./scripts/generate-testpaths.ts",
+    "backup": "yarn tsx --env-file-if-exists=.env scripts/backup.ts",
+    "generate-testpaths": "yarn tsx --env-file-if-exists=.env ./scripts/generate-testpaths.ts",
    "watch:tw": "yarn tailwindcss -i ./components/styles/index.css -o ./dist/tw.css --watch"
  },
  "dependencies": {
@@ -8,7 +8,7 @@ const Example = () => {
        Felt må fylles ut med alder
      </ErrorSummary.Item>
      <ErrorSummary.Item href="#2">
-        Tekstfeltet må ha en godkjent e-mail
+        Tekstfeltet må ha en godkjent e-post
      </ErrorSummary.Item>
    </ErrorSummary>
  );
@@ -11,7 +11,7 @@ const Example = () => {
        Felt må fylles ut med alder
      </ErrorSummary.Item>
      <ErrorSummary.Item href="#2">
-        Tekstfeltet må ha en godkjent e-mail
+        Tekstfeltet må ha en godkjent e-post
      </ErrorSummary.Item>
    </ErrorSummary>
  );
@@ -20,7 +20,7 @@ const Example = () => {
            Felt må fylles ut med alder
          </ErrorSummary.Item>
          <ErrorSummary.Item href="#2">
-            Tekstfeltet må ha en godkjent e-mail
+            Tekstfeltet må ha en godkjent e-post
          </ErrorSummary.Item>
        </ErrorSummary>
      )}
@@ -8,7 +8,7 @@ const Example = () => {
        Felt må fylles ut med alder
      </ErrorSummary.Item>
      <ErrorSummary.Item href="#2">
-        Tekstfeltet må ha en godkjent e-mail
+        Tekstfeltet må ha en godkjent e-post
      </ErrorSummary.Item>
    </ErrorSummary>
  );
@@ -5,7 +5,7 @@ const Example = () => {
  return (
    <DemoWrapper>
      <Bleed marginInline="10" asChild>
-        <Box padding="3" className="p" background="surface-alt-3-subtle">
+        <Box padding="3" background="surface-alt-3-subtle">
          <HStack justify="center">Med asChild</HStack>
        </Box>
      </Bleed>
@@ -24,9 +24,7 @@ function DemoWrapper({ children }: { children: React.ReactNode }) {
 }

 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
-export default withDsExample(Example, {
-  showBreakpoints: true,
-});
+export default withDsExample(Example);

 /* Storybook story */
 export const Demo = {
@@ -34,6 +32,6 @@ export const Demo = {
 };

 export const args = {
-  index: 4,
-  desc: "Vi anbefaler å bruke 'asChild'-prop der mulig. Dette reduserer dom-noder og forenkler output. For at Bleed + child-komponent skal fungere må child kunne ta inn 'className' og 'style' som prop.",
+  index: 5,
+  desc: "Vi anbefaler å bruke 'asChild'-prop der mulig. Dette reduserer antall DOM-noder og forenkler output. [Les mer om asChild her](https://aksel.nav.no/grunnleggende/kode/layout-primitives#613715c234c8).",
 };
@@ -5,7 +5,7 @@ const Example = () => {
  return (
    <DemoWrapper>
      <Bleed marginInline="10" asChild>
-        <Box padding="3" className="p" background="surface-alt-3-subtle">
+        <Box padding="3" background="surface-alt-3-subtle">
          <HStack justify="center">marginInline</HStack>
        </Box>
      </Bleed>
@@ -24,9 +24,7 @@ function DemoWrapper({ children }: { children: React.ReactNode }) {
 }

 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
-export default withDsExample(Example, {
-  showBreakpoints: true,
-});
+export default withDsExample(Example);

 /* Storybook story */
 export const Demo = {
@@ -6,28 +6,28 @@ const Example = () => {
    <VStack gap="4">
      <DemoWrapper>
        <Bleed marginInline="10 0" asChild>
-          <Box padding="3" className="p" background="surface-alt-3-subtle">
+          <Box padding="3" background="surface-alt-3-subtle">
            <HStack justify="center">marginInline start</HStack>
          </Box>
        </Bleed>
      </DemoWrapper>
      <DemoWrapper>
        <Bleed marginInline="0 10" asChild>
-          <Box padding="3" className="p" background="surface-alt-3-subtle">
+          <Box padding="3" background="surface-alt-3-subtle">
            <HStack justify="center">marginInline end</HStack>
          </Box>
        </Bleed>
      </DemoWrapper>
      <DemoWrapper>
        <Bleed marginBlock="10 0" asChild>
-          <Box padding="3" className="p" background="surface-alt-3-subtle">
+          <Box padding="3" background="surface-alt-3-subtle">
            <HStack justify="center">marginBlock start</HStack>
          </Box>
        </Bleed>
      </DemoWrapper>
      <DemoWrapper>
        <Bleed marginBlock="0 10" asChild>
-          <Box padding="3" className="p" background="surface-alt-3-subtle">
+          <Box padding="3" background="surface-alt-3-subtle">
            <HStack justify="center">marginBlock end</HStack>
          </Box>
        </Bleed>
@@ -47,9 +47,7 @@ function DemoWrapper({ children }: { children: React.ReactNode }) {
 }

 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
-export default withDsExample(Example, {
-  showBreakpoints: true,
-});
+export default withDsExample(Example);

 /* Storybook story */
 export const Demo = {
@@ -57,5 +55,5 @@ export const Demo = {
 };

 export const args = {
-  index: 1,
+  index: 2,
 };
@@ -1,32 +1,34 @@
-import { Bleed, Box, HStack } from "@navikt/ds-react";
+import { Bleed, BodyLong, Box, HStack, Page } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  return (
-    <DemoWrapper>
+    <Page.Block width="text">
+      <BodyLong spacing>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at
+        maximus mauris. Sed nec fermentum orci, vel tempus tortor. Praesent
+        lectus neque, hendrerit et sollicitudin quis, imperdiet vel est.
+      </BodyLong>
+
      <Bleed marginInline="full" asChild>
-        <Box padding="3" className="p" background="surface-alt-3-subtle">
-          <HStack justify="center">Full</HStack>
+        <Box padding="3" marginBlock="0 7" background="surface-alt-3-subtle">
+          <HStack justify="center">
+            Bleed med marginInline=&quot;full&quot;
+          </HStack>
        </Box>
      </Bleed>
-    </DemoWrapper>
+
+      <BodyLong>
+        Sed euismod mi nec purus euismod scelerisque. Nam tristique tincidunt
+        nisi ultricies sollicitudin. Etiam maximus ex sit amet turpis vestibulum
+        pharetra.
+      </BodyLong>
+    </Page.Block>
  );
 };

-function DemoWrapper({ children }: { children: React.ReactNode }) {
-  return (
-    <Box background="surface-alt-3" padding="5" borderRadius="large">
-      <Box background="surface-subtle" padding="5" borderRadius="medium">
-        {children}
-      </Box>
-    </Box>
-  );
-}
-
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
-export default withDsExample(Example, {
-  showBreakpoints: true,
-});
+export default withDsExample(Example);

 /* Storybook story */
 export const Demo = {
@@ -34,6 +36,6 @@ export const Demo = {
 };

 export const args = {
-  index: 3,
-  desc: "I noen tilfeller må du også sette 'overflow-x: hidden;' på body for å unngå horisontal scrollbar. Full lar Bleed bryte ut av parent og dekke hele skjermbredden. Dette kan være nyttig for 'Heroes' eller lignende elementer som ønsker å bryte ut av parent-layout",
+  index: 1,
+  desc: "Med marginInline=full kan du få enkeltelementer til å dekke hele skjermbredden mens resten av innholdet følger bredden satt av parent-container som vanlig. OBS: Du må kanskje sette 'overflow-x: hidden' på body for å unngå horisontal scrollbar.",
 };
@@ -35,9 +35,7 @@ const Example = () => {
 };

 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
-export default withDsExample(Example, {
-  showBreakpoints: true,
-});
+export default withDsExample(Example);

 /* Storybook story */
 export const Demo = {
@@ -45,6 +43,6 @@ export const Demo = {
 };

 export const args = {
-  index: 5,
+  index: 6,
  desc: "Noen ganger er det den ene pixelen som skal til for å optisk sentrere elementer.",
 };
@@ -5,15 +5,16 @@ const Example = () => {
  return (
    <DemoWrapper>
      <Bleed marginInline="10" asChild reflectivePadding>
-        <Box className="p" background="surface-alt-3-subtle">
+        <Box background="surface-alt-3-subtle">
          reflectivePadding lar innhold forbli der det ville vært uten Bleed
        </Box>
      </Bleed>
      <Bleed marginInline="10" asChild>
-        <Box className="p" background="surface-alt-3-subtle">
-          Uten reflectivePadding
+        <Box background="surface-alt-3-subtle">
+          Bleed uten reflectivePadding
        </Box>
      </Bleed>
+      <Box background="surface-alt-3-subtle">Uten Bleed</Box>
    </DemoWrapper>
  );
 };
@@ -29,9 +30,7 @@ function DemoWrapper({ children }: { children: React.ReactNode }) {
 }

 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
-export default withDsExample(Example, {
-  showBreakpoints: true,
-});
+export default withDsExample(Example);

 /* Storybook story */
 export const Demo = {
@@ -39,5 +38,5 @@ export const Demo = {
 };

 export const args = {
-  index: 2,
+  index: 4,
 };
@@ -4,10 +4,10 @@ import { withDsExample } from "@/web/examples/withDsExample";
 const Example = () => {
  return (
    <DemoWrapper>
-      <Bleed marginInline={{ xs: "8", md: "12", lg: "16" }} asChild>
-        <Box padding="3" className="p" background="surface-alt-3-subtle">
+      <Bleed marginInline={{ xs: "8", sm: "12", md: "16" }} asChild>
+        <Box padding="3" background="surface-alt-3-subtle">
          <HStack justify="center">
-            <BodyLong>xs: 8, md: 12, lg: 16</BodyLong>
+            <BodyLong>xs: 8, sm: 12, md: 16</BodyLong>
          </HStack>
        </Box>
      </Bleed>
@@ -20,7 +20,7 @@ function DemoWrapper({ children }: { children: React.ReactNode }) {
    <Box
      background="surface-alt-3"
      paddingBlock="4"
-      paddingInline={{ xs: "4", md: "8", lg: "12" }}
+      paddingInline={{ xs: "4", sm: "8", md: "12" }}
      borderRadius="large"
    >
      <Box background="surface-subtle" padding="4" borderRadius="medium">
@@ -41,6 +41,6 @@ export const Demo = {
 };

 export const args = {
-  index: 1,
-  desc: "Margin block/inline er begge reponsive, som lar deg endre negativ margin dynamiskt basert på brekkpunkter.",
+  index: 3,
+  desc: "Både marginBlock og marginInline er reponsive, slik at du kan sette negativ margin dynamisk basert på brekkpunkter.",
 };
@@ -5,25 +5,20 @@ const Example = () => {
  return (
    <VStack gap="4">
      <Box padding="4" background="surface-alt-3-subtle">
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt,
-        ipsum!
+        Denne boksen har background=&quot;surface-alt-3-subtle&quot;
      </Box>
      <Box padding="4" background="surface-info-subtle">
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt,
-        ipsum!
+        Denne boksen har background=&quot;surface-info-subtle&quot;
      </Box>
      <Box padding="4" background="surface-success-subtle">
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt,
-        ipsum!
+        Denne boksen har background=&quot;surface-success-subtle&quot;
      </Box>
    </VStack>
  );
 };

 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
-export default withDsExample(Example, {
-  showBreakpoints: true,
-});
+export default withDsExample(Example);

 /* Storybook story */
 export const Demo = {
@@ -32,5 +27,5 @@ export const Demo = {

 export const args = {
  index: 0,
-  desc: "'Background'-prop lar deg endre farge basert på tilgjengelige tokens",
+  desc: "Propen 'background' lar deg sette bakgrunnsfarge basert på tokens.",
 };
@@ -5,25 +5,25 @@ const Example = () => {
  return (
    <VStack gap="4">
      <Box
+        padding="4"
        background="surface-alt-3-subtle"
        borderColor="border-alt-3"
-        padding="4"
        borderWidth="4"
      >
        Alt-3
      </Box>
      <Box
+        padding="4"
        background="surface-info-subtle"
        borderColor="border-info"
-        padding="4"
        borderWidth="4"
      >
        Info
      </Box>
      <Box
+        padding="4"
        background="surface-success-subtle"
        borderColor="border-success"
-        padding="4"
        borderWidth="4"
      >
        Success
@@ -33,9 +33,7 @@ const Example = () => {
 };

 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
-export default withDsExample(Example, {
-  showBreakpoints: true,
-});
+export default withDsExample(Example);

 /* Storybook story */
 export const Demo = {
@@ -44,5 +42,5 @@ export const Demo = {

 export const args = {
  index: 5,
-  desc: "'borderColor' lar deg endre border-color på Box basert på tokens",
+  desc: "Propen 'borderColor' lar deg endre border-color basert på tokens.",
 };
@@ -47,5 +47,5 @@ export const Demo = {

 export const args = {
  index: 6,
-  desc: "'borderRadius' lar deg endre border-radius på Box basert på tokens. Du kan også enkelt endre border-radius basert på brekkpunkt.",
+  desc: "Propen 'borderRadius' lar deg sette border-radius basert på tokens. Du kan også enkelt endre border-radius basert på brekkpunkt.",
 };
@@ -15,9 +15,7 @@ const Example = () => {
 };

 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
-export default withDsExample(Example, {
-  showBreakpoints: true,
-});
+export default withDsExample(Example);

 /* Storybook story */
 export const Demo = {
@@ -26,5 +24,5 @@ export const Demo = {

 export const args = {
  index: 4,
-  desc: "'borderWidth' gir deg kontroll over border på Box",
+  desc: "Propen 'borderWidth' gir deg kontroll over border.",
 };
@@ -113,5 +113,5 @@ export const Demo = {

 export const args = {
  index: 8,
-  desc: "Box lar deg enklere bygge opp kjente grensesnitt gjennom felles tokens og brekkpunkt",
+  desc: "Box lar deg enklere bygge opp kjente grensesnitt gjennom felles tokens og brekkpunkt.",
 };
@@ -35,5 +35,5 @@ export const Demo = {

 export const args = {
  index: 3,
-  desc: "'paddingBlock' gir deg mer kontroll over vertikal padding.",
+  desc: "Propen 'paddingBlock' gir deg mer kontroll over vertikal padding.",
 };
@@ -35,5 +35,5 @@ export const Demo = {

 export const args = {
  index: 2,
-  desc: "'paddingInline' gir deg mer kontroll over horisontal padding",
+  desc: "Propen 'paddingInline' gir deg mer kontroll over horisontal padding.",
 };
@@ -30,5 +30,5 @@ export const Demo = {

 export const args = {
  index: 1,
-  desc: "'padding'-prop lar deg endre padding responsivt basert på brekkpunkt",
+  desc: "Propen 'padding' lar deg sette padding responsivt basert på brekkpunkt. Verdien mapper til tokens, så f.eks. '4' tilsvarer '--a-spacing-4' som er '1rem'.",
 };
@@ -3,7 +3,13 @@ import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  return (
-    <Box background="surface-default" padding="6">
+    <Box
+      background="surface-default"
+      padding="6"
+      borderRadius="xlarge"
+      borderColor="border-subtle"
+      borderWidth="1"
+    >
      <BodyLong spacing>
        Hvis du er helt eller delvis arbeidsledig eller permittert, kan du ha
        rett til pengestøtte fra NAV.
@@ -23,7 +29,6 @@ const Example = () => {

 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, {
-  showBreakpoints: true,
  background: "subtle",
 });

@@ -34,5 +39,5 @@ export const Demo = {

 export const args = {
  index: 9,
-  desc: "Box erstatter dagens Panel-komponent",
+  desc: "Box erstatter den avviklede komponenten Panel.",
 };
@@ -41,9 +41,7 @@ const Example = () => {
 };

 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
-export default withDsExample(Example, {
-  showBreakpoints: true,
-});
+export default withDsExample(Example);

 /* Storybook story */
 export const Demo = {
@@ -52,5 +50,5 @@ export const Demo = {

 export const args = {
  index: 7,
-  desc: "'shadow' lar deg endre box-shadow på Box basert på tokens.",
+  desc: "Propen 'shadow' lar deg sette box-shadow basert på tokens.",
 };
@@ -1,8 +1,10 @@
+import { ClientConfig } from "@sanity/client";
+
 export const SANITY_PROJECT_ID = "hnbe3yhs";
-export const SANITY_API_VERSION = "2021-10-21";
+export const SANITY_API_VERSION = "2024-04-11";
 export const SANITY_DATASET = "production";

-export const clientConfig = {
+export const clientConfig: ClientConfig = {
  projectId: SANITY_PROJECT_ID,
  dataset: SANITY_DATASET,
  useCdn: false,
@@ -0,0 +1,35 @@
+export const AkselLogo = () => (
+  <svg
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <style>
+      {`path[data-path="1"] {
+          fill: #00243a;
+        }
+        path[data-path="2"] {
+          fill: #ffd799;
+        }
+        .dark path[data-path="1"] {
+          fill: #ffd799;
+          }
+        .dark path[data-path="2"] {
+            fill: #00243a;
+        }
+      `}
+    </style>
+    <path
+      data-path="1"
+      d="M0 4C0 1.79086 1.79086 0 4 0H28C30.2091 0 32 1.79086 32 4V28C32 30.2091 30.2091 32 28 32H4C1.79086 32 0 30.2091 0 28V4Z"
+    />
+    <path
+      data-path="2"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M4.43934 9.93931C4.1476 10.2311 4.00115 10.6131 4.00001 10.9955C3.99885 11.3808 4.14527 11.7666 4.43929 12.0606C5.02505 12.6464 5.9748 12.6465 6.56061 12.0607L11.3112 7.31056C11.7029 6.93797 12.3226 6.94391 12.7071 7.3284L24.6716 19.2929C25.0621 19.6834 25.0621 20.3166 24.6716 20.7071L19.9393 25.4393C19.3536 26.0251 19.3536 26.9748 19.9393 27.5606C20.2083 27.8296 20.5539 27.975 20.9058 27.997C21.3206 28.0231 21.7442 27.8776 22.0611 27.5607L26.8289 22.7929C27.5791 22.0427 28.0005 21.0253 28.0005 19.9644L28.0001 7.99987C28 5.79078 26.2092 4 24.0001 4H12.036C10.9753 4 9.95813 4.42124 9.20803 5.17108C9.19582 5.18298 9.18367 5.19498 9.17157 5.20708L4.43934 9.93931ZM25.0003 15.379L16.6214 7H24.0001C24.5524 7 25.0001 7.4477 25.0001 7.99997L25.0003 15.379ZM14.5607 19.5606C15.1464 18.9749 15.1464 18.0251 14.5607 17.4393C13.9749 16.8535 13.0251 16.8535 12.4393 17.4393L4.43934 25.4393C3.85355 26.0251 3.85355 26.9749 4.43934 27.5606C5.02513 28.1464 5.97487 28.1464 6.56066 27.5606L14.5607 19.5606Z"
+    />
+  </svg>
+);
@@ -0,0 +1,23 @@
+import { DocumentActionComponent, useDocumentOperation } from "sanity";
+
+export function createPublishWithDateAction(
+  originalAction: DocumentActionComponent,
+): DocumentActionComponent {
+  return (props) => {
+    const originalResult = originalAction(props);
+
+    const { patch } = useDocumentOperation(props.id, props.type);
+    if (!originalResult) {
+      return null;
+    }
+    return {
+      ...originalResult,
+      onHandle: () => {
+        patch.execute([
+          { setIfMissing: { publishedAt: new Date().toISOString() } },
+        ]);
+        originalResult?.onHandle?.();
+      },
+    };
+  };
+}
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot]	20d5ad597a	Version Packages (#3340 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-11-08 12:14:52 +01:00
Ken	aa7c2d9598	Chore: Fix npm/github version mismatch	2024-11-08 12:12:35 +01:00
github-actions[bot]andgithub-actions[bot]	4921dcfe7b	Version Packages (#3336 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-11-08 11:54:36 +01:00
Niklas Backman	23f4d4b4a6	Update SuggestionBlock.tsx (#3339 ) Typo. Fjernet et ekstra "ta"	2024-11-08 11:28:25 +01:00
Ken	47a4dd6c4c	[Icons] Added FileJpeg and FilePng. (#3332 ) * Updated icons * ⚰️ Removed medicalthermometer icon * Revert "⚰️ Removed medicalthermometer icon" This reverts commit `fcf7f1e124`.	2024-11-08 10:52:51 +01:00
Ken	702aecf34b	[Datepicker] `DateWrapper` now uses state instead of ref (#3333 ) * bug: DateWrapper now uses state instead of ref to update after first render * changeset update * Added comments based on change	2024-11-08 09:38:26 +01:00
Ken	c449c380fa	Update README.md (#3337 )	2024-11-07 12:43:36 +01:00
Ken	5f81e617c8	Use NB translation for e-mail (#3335 )	2024-11-07 10:56:34 +01:00
Ken	7cefa52b81	Bumped allowed react-versions (#3334 )	2024-11-07 10:12:59 +01:00
Halvor Haugan	97fbd9de64	Remove creation of empty .env files in workflows (#3294 )	2024-11-07 09:40:22 +01:00
Ken	1fdb7c84c3	[Darkside] Accordion CSS-rewrite (#3296 ) * [Darkside] Migrated typo to new CSS * memo: Added comments * change: Implemented accordion header and content * change: Added lines * feat: added todo * change: Fixed layering issues with lines * change: Avoid animation on initial render * change: Removed comments * change: moved icon state into nesting * change: Added alpha-background for icon, updated fontweight * change: Added forced-colors support * Removed use op --open class * Removed old grid centering * Top, bottom line is now alpha * Fixed animation * bug: Revert to transparent bg * deprecation: Added tags to accordion props that are to be removed * removed deprecation for accordion headingSize prop * Updated implementation of line in accordion * Remove position relative in accordion content * Implemented size-update for accordion * bug: removed old comment * Clarify comments * Removed redundant header class * Re-added className in accordionHeader	2024-11-06 18:52:49 +01:00
Ken	ca0d5b4246	[Darkside] Copybutton CSS update (#3330 ) * Use new tokens in copybutton * Updated animation * updated to nested syntax * Updated text-color on hover * Added subheading for sectioning * removed background none	2024-11-06 18:52:01 +01:00
Halvor Haugan	9622b61a3d	🔧 Set cssVariables extension to only include tokens (#3327 )	2024-11-06 16:18:01 +01:00
Ken	0fe767652d	[CI] Testing chromatic ignore for darkside changes	2024-11-06 13:41:39 +01:00
Ken	256ab2a166	[Sanity] Updated custom publish actions (#3315 ) * sanity config cleanup * removed extra const for type * re-organized admin tools and fixed types * Removed no longer needed custom actions for translations * Simplified publication plugin * Removed extra logic in publish action * synced SEO-updates * lock sync * bug: Removed old index export	2024-11-06 13:13:13 +01:00
Ken	4118a27c18	[Sanity] Collapsed multiple Util-locations, updated API-version, added types (#3313 ) * sanity config cleanup * removed extra const for type * re-organized admin tools and fixed types * synced SEO-updates * lock sync	2024-11-06 13:10:53 +01:00
KenandHalvor Haugan	2d669a7513	[Sanity] Config cleanup (#3312 ) * sanity config cleanup * removed extra const for type * Update aksel.nav.no/website/sanity/schema/documents/presets/seo.ts Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> --------- Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>	2024-11-06 10:42:13 +01:00
Julian Nymark	923fce1961	🐛 fix wrong syntax for codeowners	2024-11-05 14:56:42 +01:00
Julian Nymark	16739a2cf6	✨ CODEOWNERS (#3323 ) * :sparkels: CODEOWNERS * 📝 update codeowners	2024-11-05 14:39:05 +01:00
Ken	3227e0db91	[Darkside] Chat CSS update (#3305 ) * Chat css-rewrite * changed initials for chat story * Update nested syntax	2024-11-05 14:35:49 +01:00
Ken	ccb090448d	[Bug]: Storybook preview used wrong prop for Theme context	2024-11-05 11:10:54 +01:00
KenandHalvor Haugan	36b0d8a8fd	[Darkside] Actionmenu CSS update (#3304 ) * change: Actionmenu css rewrite * change: Synced with figma-design * Added focus-state to subtrigger * Updated animations * acx -> axc * Let items keep their original color when disabled * Update @navikt/core/react/src/overlays/action-menu/ActionMenu.stories.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> --------- Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>	2024-11-05 10:30:39 +01:00
Ken	056e29af52	[Chromatic] Ignores darkside css updates (#3325 ) * Ignores darkside css updates * better glob	2024-11-05 10:26:36 +01:00
Ken	4a2e47fe6a	Chips CSS-reset (#3316 )	2024-11-05 10:08:18 +01:00
KenandHalvor Haugan	1eace15576	[Darkside] Theme component as feature-flagging (#3318 ) * Setup theme-component * Added styling for global theming * Update @navikt/core/react/src/provider/theme/AkselTheme.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * appearance -> theme --------- Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>	2024-11-05 10:04:38 +01:00
Halvor HauganandKen	ef44f2a25b	[aksel.nav.no] Adjust exaples of Box and Bleed (#3321 ) Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>	2024-11-05 09:08:13 +01:00
Sjur	916b383e7b	Update global-dark.ts (#3320 ) Endret fargene 100 - 400 for Info og BrandThree	2024-11-04 15:29:52 +01:00
github-actions[bot]andgithub-actions[bot]	bc8761295b	Version Packages (#3314 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-11-04 10:22:20 +01:00
Halvor Haugan	6d9f9001fe	Table.ColumnHeader: Inherit text alignment in button (#3319 )	2024-11-01 16:07:39 +01:00
KenandJulian Nymark	039332b4f8	[Darkside] Updated Alert CSS (#3301 ) * change: Alert variants * feat: Updated alert css * change: use correct spacing * Update @navikt/core/css/darkside/alert.darkside.css Co-authored-by: Julian Nymark <julian.nymark@nav.no> --------- Co-authored-by: Julian Nymark <julian.nymark@nav.no>	2024-11-01 16:05:32 +01:00
Halvor Haugan	8cadfd0979	Pagination: More precise type for renderItem (#3275 )	2024-11-01 08:49:08 +01:00
Halvor Haugan	c200f580c1	Translations for ReadOnlyIcon (#3311 )	2024-10-31 16:28:48 +01:00
Halvor Haugan	5ce8ec620c	Include number of failed stories in Chromatic comment (#3308 )	2024-10-31 15:21:23 +01:00