Version Packages (#3420)

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

.github/PULL_REQUEST_TEMPLATE.md

@@ -6,7 +6,7 @@
 
 - [ ] JSDoc
 - [ ] Examples
-- [ ] Documentation
+- [ ] Documentation / Decision Records
 - [ ] Storybook
 - [ ] Style mappings (`@navikt/core/css/config/_mappings.js`)
 - [ ] Component tokens (`@navikt/core/css/tokens.json`)

.github/workflows/aksel-dev.yml

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

.github/workflows/aksel-prod.yml

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

.github/workflows/backup-sanity.yml

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

.github/workflows/chromatic.yml

@@ -56,20 +56,11 @@ jobs:
           buildScriptName: "build:storybook-chromatic"
           onlyChanged: true
           untraced: "**/package.json|yarn.lock|**/*.md"
-          externals: \@navikt/core/css/**/*.css
+          externals: "**/core/css/*.css|**/core/css/baseline/*.css|**/core/css/form/*.css|**/core/css/primitives/*.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

.github/workflows/e2e.yml

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

.husky/post-checkout

@@ -0,0 +1,9 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+CHANGED=`git diff $1 $2 --stat -- yarn.lock | wc -l`
+if [ $CHANGED -gt 0 ];
+then
+    echo
+    echo "*** 🟡 yarn.lock has changed 🟡 ***"
+fi

.husky/post-merge

@@ -0,0 +1,9 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+CHANGED=`git diff HEAD@{1} --stat -- yarn.lock | wc -l`
+if [ $CHANGED -gt 0 ];
+then
+    echo
+    echo "*** 🟡 yarn.lock has changed 🟡 ***"
+fi

.storybook/main.ts

@@ -51,7 +51,6 @@ export default {
   ],
   addons: [
     "@storybook/addon-a11y",
-    "@whitespace/storybook-addon-html",
     "@storybook/addon-interactions",
     "@storybook/addon-themes",
     {
@@ -71,7 +70,11 @@ export default {
         },
       },
     },
-    "storybook-addon-pseudo-states",
+    /**
+     * https://github.com/chromaui/storybook-addon-pseudo-states/issues/101
+     * Currently disabled to avoid interference with darkmode update
+     */
+    /* "storybook-addon-pseudo-states", */
   ],
   framework: {
     name: "@storybook/react-vite",

.storybook/preview.jsx

@@ -1,78 +0,0 @@
-import { withThemeByClassName } from "@storybook/addon-themes";
-import React, { useLayoutEffect } from "react";
-import darksideCss from "@navikt/ds-css/darkside/index.css?inline";
-import defaultCss from "@navikt/ds-css/index.css?inline";
-import "./layout.css";
-
-export const parameters = {
-  options: {
-    storySort: {
-      method: "alphabetical",
-      order: [
-        "Getting started",
-        "ds-react",
-        ["Primitives"],
-        ["Default", "Controls"],
-        "Aksel-icons",
-      ],
-    },
-  },
-  layout: "centered",
-  backgrounds: { disable: true },
-};
-
-export const globalTypes = {
-  mode: {
-    name: "Darkside",
-    toolbar: {
-      items: [
-        {
-          value: "default",
-          icon: "hourglass",
-          title: "Default (old)",
-        },
-        { value: "darkside", icon: "beaker", title: "Darkside (new)" },
-      ],
-      showName: true,
-      dynamicTitle: true,
-    },
-  },
-};
-
-export const initialGlobals = {
-  mode: "default",
-};
-
-const ModeDecorator = ({ children, mode }) => {
-  useLayoutEffect(() => {
-    const style = document.createElement("style");
-    style.innerHTML = mode === "darkside" ? darksideCss : defaultCss;
-    document.head.appendChild(style);
-
-    if (mode === "darkside") {
-      document.body.style.setProperty("background", "var(--a-bg-default)");
-    }
-
-    return () => {
-      document.head.removeChild(style);
-      document.body.style.removeProperty("background");
-    };
-  }, [mode]);
-
-  return children;
-};
-
-export const decorators = [
-  (StoryFn, context) => (
-    <ModeDecorator mode={context.globals.mode}>
-      <StoryFn />
-    </ModeDecorator>
-  ),
-  withThemeByClassName({
-    themes: {
-      light: "light",
-      dark: "dark",
-    },
-    defaultTheme: "light",
-  }),
-];

.storybook/preview.tsx

@@ -0,0 +1,128 @@
+import { withThemeByClassName } from "@storybook/addon-themes";
+import { Preview } from "@storybook/react";
+import React, { useLayoutEffect } from "react";
+// @ts-expect-error - Temporary
+import darksideCss from "@navikt/ds-css/darkside/index.css?inline";
+// @ts-expect-error - Temporary
+import defaultCss from "@navikt/ds-css/index.css?inline";
+import { UNSAFE_AkselTheme } from "../@navikt/core/react/src/provider";
+import UNSAFE_AkselLanguageProvider from "../@navikt/core/react/src/provider/i18n/LanguageProvider";
+import en from "../@navikt/core/react/src/util/i18n/locales/en";
+import nb from "../@navikt/core/react/src/util/i18n/locales/nb";
+import nn from "../@navikt/core/react/src/util/i18n/locales/nn";
+import "./layout.css";
+
+const ModeDecorator = ({ children, mode, theme }) => {
+  useLayoutEffect(() => {
+    const style = document.createElement("style");
+    style.innerHTML = mode === "darkside" ? darksideCss : defaultCss;
+    document.head.appendChild(style);
+
+    if (mode === "darkside") {
+      document.body.style.setProperty("background", "var(--ax-bg-default)");
+    }
+
+    return () => {
+      document.head.removeChild(style);
+      document.body.style.removeProperty("background");
+    };
+  }, [mode]);
+
+  return mode === "darkside" ? (
+    <UNSAFE_AkselTheme theme={theme || undefined} hasBackground={false}>
+      {children}
+    </UNSAFE_AkselTheme>
+  ) : (
+    children
+  );
+};
+
+const translations = {
+  nb,
+  nn,
+  en,
+};
+
+const LanguageDecorator = ({ children, language }) => {
+  if (language) {
+    return (
+      <UNSAFE_AkselLanguageProvider translations={translations[language]}>
+        {children}
+      </UNSAFE_AkselLanguageProvider>
+    );
+  }
+  return children;
+};
+
+export default {
+  parameters: {
+    options: {
+      storySort: {
+        method: "alphabetical",
+        order: [
+          "Getting started",
+          "ds-react",
+          ["Primitives"],
+          ["Default", "Controls"],
+          "Aksel-icons",
+        ],
+      },
+    },
+    layout: "centered",
+    backgrounds: { disable: true },
+  },
+
+  globalTypes: {
+    mode: {
+      name: "Darkside",
+      toolbar: {
+        items: [
+          {
+            value: "default",
+            icon: "hourglass",
+            title: "Default (old)",
+          },
+          { value: "darkside", icon: "beaker", title: "Darkside (new)" },
+        ],
+        showName: true,
+        dynamicTitle: true,
+      },
+    },
+    language: {
+      toolbar: {
+        icon: "globe",
+        items: [
+          { value: undefined, title: "Unset" },
+          { value: "nb", right: "🇳🇴", title: "Norsk bokmål" },
+          { value: "nn", right: "🇳🇴", title: "Norsk nynorsk" },
+          { value: "en", right: "🇬🇧", title: "English" },
+        ],
+        dynamicTitle: true,
+      },
+    },
+  },
+
+  initialGlobals: {
+    mode: "default",
+  },
+
+  decorators: [
+    (StoryFn, context) => (
+      <ModeDecorator mode={context.globals.mode} theme={context.globals.theme}>
+        <StoryFn />
+      </ModeDecorator>
+    ),
+    (StoryFn, context) => (
+      <LanguageDecorator language={context.globals.language}>
+        <StoryFn />
+      </LanguageDecorator>
+    ),
+    withThemeByClassName({
+      themes: {
+        light: "light",
+        dark: "dark",
+      },
+      defaultTheme: "light",
+    }),
+  ],
+} satisfies Preview;

.vscode/settings.json

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

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @navikt/aksel-icons
 
+## 7.7.0
+
+## 7.6.0
+
+### Minor Changes
+
+- Icons: Added new icons 'TruckPercent' and 'ShieldCheckmark' 🎉. ([#3416](https://github.com/navikt/aksel/pull/3416))
+
+## 7.5.3
+
+## 7.5.2
+
+## 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
+
 ## 7.4.0
 
 ## 7.3.1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="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>

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

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

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

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="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>

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

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

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

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14.0091 3.05126C12.9222 1.88827 11.0778 1.88827 9.99089 3.05126L9.20244 3.89486C8.95602 4.15852 8.60767 4.30281 8.24698 4.29063L7.09295 4.25162C5.502 4.19786 4.19787 5.50199 4.25164 7.09294L4.29064 8.24697C4.30283 8.60766 4.15853 8.95601 3.89487 9.20243L3.05127 9.99087C1.88828 11.0778 1.88828 12.9221 3.05127 14.0091L3.89487 14.7975C4.15853 15.044 4.30283 15.3923 4.29064 15.753L4.25164 16.907C4.19787 18.498 5.502 19.8021 7.09295 19.7483L8.24698 19.7093C8.60767 19.6972 8.95602 19.8414 9.20244 20.1051L9.99089 20.9487C11.0778 22.1117 12.9222 22.1117 14.0091 20.9487L14.7976 20.1051C15.044 19.8414 15.3923 19.6972 15.753 19.7093L16.907 19.7483C18.498 19.8021 19.8021 18.498 19.7484 16.907L19.7094 15.753C19.6972 15.3923 19.8415 15.044 20.1051 14.7975L20.9487 14.0091C22.1117 12.9221 22.1117 11.0778 20.9487 9.99087L20.1051 9.20243C19.8415 8.95601 19.6972 8.60766 19.7094 8.24697L19.7484 7.09294C19.8021 5.50199 18.498 4.19786 16.907 4.25162L15.753 4.29063C15.3923 4.30281 15.044 4.15852 14.7976 3.89486L14.0091 3.05126ZM11.0868 4.07549C11.5808 3.54686 12.4192 3.54686 12.9132 4.07549L13.7017 4.91909C14.2438 5.49914 15.0102 5.81659 15.8037 5.78977L16.9577 5.75077C17.6809 5.72633 18.2737 6.31912 18.2492 7.04228L18.2102 8.19631C18.1834 8.98981 18.5008 9.75618 19.0809 10.2983L19.9245 11.0868C20.4531 11.5808 20.4531 12.4192 19.9245 12.9132L19.0809 13.7017C18.5008 14.2438 18.1834 15.0102 18.2102 15.8037L18.2492 16.9577C18.2737 17.6809 17.6809 18.2736 16.9577 18.2492L15.8037 18.2102C15.0102 18.1834 14.2438 18.5008 13.7017 19.0809L12.9132 19.9245C12.4192 20.4531 11.5808 20.4531 11.0868 19.9245L10.2983 19.0809C9.75619 18.5008 8.98982 18.1834 8.19632 18.2102L7.04229 18.2492C6.31913 18.2736 5.72634 17.6809 5.75078 16.9577L5.78978 15.8037C5.8166 15.0102 5.49916 14.2438 4.91911 13.7017L4.0755 12.9132C3.54687 12.4192 3.54687 11.5808 4.0755 11.0868L4.91911 10.2983C5.49916 9.75618 5.8166 8.98981 5.78978 8.19631L5.75078 7.04228C5.72634 6.31912 6.31913 5.72633 7.04229 5.75077L8.19632 5.78977C8.98982 5.81659 9.75619 5.49915 10.2983 4.91909L11.0868 4.07549ZM8.7195 8.71973C9.01239 8.42684 9.48727 8.42684 9.78016 8.71973L11.9998 10.9394L14.2195 8.71973C14.5124 8.42684 14.9873 8.42684 15.2802 8.71973C15.5731 9.01262 15.5731 9.4875 15.2802 9.78039L13.0605 12.0001L15.2802 14.2197C15.5731 14.5126 15.5731 14.9875 15.2802 15.2804C14.9873 15.5733 14.5124 15.5733 14.2195 15.2804L11.9998 13.0607L9.78016 15.2804C9.48727 15.5733 9.01239 15.5733 8.7195 15.2804C8.42661 14.9875 8.42661 14.5126 8.7195 14.2197L10.9392 12.0001L8.7195 9.78039C8.42661 9.4875 8.42661 9.01262 8.7195 8.71973Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.0091 3.05126C12.9222 1.88827 11.0778 1.88827 9.99089 3.05126L9.20244 3.89486C8.95602 4.15852 8.60767 4.30281 8.24699 4.29063L7.09295 4.25162C5.502 4.19786 4.19787 5.50199 4.25164 7.09294L4.29064 8.24697C4.30283 8.60766 4.15854 8.95601 3.89488 9.20243L3.05128 9.99087C1.88828 11.0778 1.88828 12.9221 3.05128 14.0091L3.89488 14.7975C4.15854 15.044 4.30283 15.3923 4.29064 15.753L4.25164 16.907C4.19787 18.498 5.502 19.8021 7.09296 19.7483L8.24699 19.7093C8.60767 19.6972 8.95602 19.8414 9.20244 20.1051L9.99089 20.9487C11.0778 22.1117 12.9222 22.1117 14.0091 20.9487L14.7976 20.1051C15.044 19.8414 15.3923 19.6972 15.753 19.7093L16.9071 19.7483C18.498 19.8021 19.8021 18.498 19.7484 16.907L19.7094 15.753C19.6972 15.3923 19.8415 15.044 20.1051 14.7975L20.9487 14.0091C22.1117 12.9221 22.1117 11.0778 20.9487 9.99087L20.1051 9.20243C19.8415 8.95601 19.6972 8.60766 19.7094 8.24697L19.7484 7.09294C19.8021 5.50199 18.498 4.19786 16.9071 4.25162L15.753 4.29063C15.3923 4.30281 15.044 4.15852 14.7976 3.89486L14.0091 3.05126ZM11.0868 4.07549C11.5808 3.54686 12.4192 3.54686 12.9132 4.07549L13.7017 4.91909C14.2438 5.49914 15.0102 5.81659 15.8037 5.78977L16.9577 5.75077C17.6809 5.72633 18.2737 6.31912 18.2492 7.04228L18.2102 8.19631C18.1834 8.98981 18.5008 9.75618 19.0809 10.2983L19.9245 11.0868C20.4531 11.5808 20.4531 12.4192 19.9245 12.9132L19.0809 13.7017C18.5008 14.2438 18.1834 15.0102 18.2102 15.8037L18.2492 16.9577C18.2737 17.6809 17.6809 18.2736 16.9577 18.2492L15.8037 18.2102C15.0102 18.1834 14.2438 18.5008 13.7017 19.0809L12.9132 19.9245C12.4192 20.4531 11.5808 20.4531 11.0868 19.9245L10.2983 19.0809C9.7562 18.5008 8.98983 18.1834 8.19632 18.2102L7.04229 18.2492C6.31913 18.2736 5.72634 17.6809 5.75078 16.9577L5.78978 15.8037C5.8166 15.0102 5.49916 14.2438 4.91911 13.7017L4.07551 12.9132C3.54687 12.4192 3.54687 11.5808 4.07551 11.0868L4.91911 10.2983C5.49916 9.75618 5.8166 8.98981 5.78978 8.19631L5.75078 7.04228C5.72634 6.31912 6.31913 5.72633 7.04229 5.75077L8.19632 5.78977C8.98982 5.81659 9.75619 5.49915 10.2983 4.91909L11.0868 4.07549ZM8.7195 8.71973C9.0124 8.42684 9.48727 8.42684 9.78016 8.71973L11.9998 10.9394L14.2195 8.71973C14.5124 8.42684 14.9873 8.42684 15.2802 8.71973C15.5731 9.01262 15.5731 9.4875 15.2802 9.78039L13.0605 12.0001L15.2802 14.2197C15.5731 14.5126 15.5731 14.9875 15.2802 15.2804C14.9873 15.5733 14.5124 15.5733 14.2195 15.2804L11.9998 13.0607L9.78016 15.2804C9.48727 15.5733 9.0124 15.5733 8.7195 15.2804C8.42661 14.9875 8.42661 14.5126 8.7195 14.2197L10.9392 12.0001L8.7195 9.78039C8.42661 9.4875 8.42661 9.01262 8.7195 8.71973Z" fill="#23262A"/>
 </svg>

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

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.75 4.01992C19.75 3.53224 19.3003 3.16875 18.8235 3.27093L18.4572 3.34943C14.2007 4.26153 9.79929 4.26153 5.54282 3.34943L5.17649 3.27093C4.69967 3.16875 4.25 3.53223 4.25 4.01992V13.0001C4.25 17.2803 7.71979 20.7501 12 20.7501C16.2802 20.7501 19.75 17.2803 19.75 13.0001V4.01992ZM5.75 4.92339C9.87693 5.73687 14.1231 5.73687 18.25 4.92339V13.0001C18.25 16.4519 15.4518 19.2501 12 19.2501C8.54822 19.2501 5.75 16.4519 5.75 13.0001V4.92339ZM15.7803 10.2803C16.0732 9.98744 16.0732 9.51256 15.7803 9.21967C15.4874 8.92678 15.0126 8.92678 14.7197 9.21967L11 12.9393L9.28033 11.2197C8.98744 10.9268 8.51256 10.9268 8.21967 11.2197C7.92678 11.5126 7.92678 11.9874 8.21967 12.2803L10.4697 14.5303C10.7626 14.8232 11.2374 14.8232 11.5303 14.5303L15.7803 10.2803Z" fill="#23262A"/>
+</svg>

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

@@ -0,0 +1,14 @@
+name: ShieldCheckmark
+category: Law and security
+sub_category: Security
+keywords:
+  - sikkerhet
+  - security
+  - beskyttelse
+  - sikkert
+  - kryptert
+  - encrypted
+  - secured
+variant: Stroke
+updated_at: 29.11.2024
+created_at: 18.11.2024

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

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.75 4.01971C19.75 3.53202 19.3003 3.16854 18.8235 3.27071L18.4572 3.34921C14.2007 4.26131 9.79929 4.26131 5.54282 3.34921L5.17649 3.27071C4.69967 3.16854 4.25 3.53202 4.25 4.01971V12.9999C4.25 17.2801 7.71979 20.7499 12 20.7499C16.2802 20.7499 19.75 17.2801 19.75 12.9999V4.01971ZM15.7803 10.2803C16.0732 9.98744 16.0732 9.51256 15.7803 9.21967C15.4874 8.92678 15.0126 8.92678 14.7197 9.21967L11 12.9393L9.28033 11.2197C8.98744 10.9268 8.51256 10.9268 8.21967 11.2197C7.92678 11.5126 7.92678 11.9874 8.21967 12.2803L10.4697 14.5303C10.7626 14.8232 11.2374 14.8232 11.5303 14.5303L15.7803 10.2803Z" fill="#23262A"/>
+</svg>

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

@@ -0,0 +1,14 @@
+name: ShieldCheckmarkFill
+category: Law and security
+sub_category: Security
+keywords:
+  - sikkerhet
+  - security
+  - beskyttelse
+  - sikkert
+  - kryptert
+  - encrypted
+  - secured
+variant: Fill
+updated_at: 29.11.2024
+created_at: 18.11.2024

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

@@ -9,6 +9,7 @@ keywords:
   - låst
   - kryptert
   - encrypted
+  - locked
 variant: Stroke
-updated_at: 04.12.2023
+updated_at: 29.11.2024
 created_at: 07.03.2023

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

@@ -9,6 +9,7 @@ keywords:
   - låst
   - kryptert
   - encrypted
+  - locked
 variant: Fill
-updated_at: 04.12.2023
+updated_at: 29.11.2024
 created_at: 07.03.2023

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

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 5.5C2.25 4.80964 2.80964 4.25 3.5 4.25H14.5C15.1904 4.25 15.75 4.80964 15.75 5.5V7.25H18.6615C19.1726 7.25 19.6322 7.56119 19.8221 8.03576L21.75 12.8556V16.5C21.75 17.1904 21.1904 17.75 20.5 17.75H19.75C19.75 19.1307 18.6307 20.25 17.25 20.25C15.8693 20.25 14.75 19.1307 14.75 17.75H9.75C9.75 19.1307 8.63071 20.25 7.25 20.25C5.86929 20.25 4.75 19.1307 4.75 17.75H3.5C2.80964 17.75 2.25 17.1904 2.25 16.5V5.5ZM9.25018 16.25C8.79408 15.6428 8.06791 15.25 7.25 15.25C6.43209 15.25 5.70592 15.6428 5.24982 16.25H3.75V5.75H14.25V16.25H9.25018ZM15.75 15.7498C16.1678 15.436 16.6872 15.25 17.25 15.25C18.0679 15.25 18.7941 15.6428 19.2502 16.25H20.25V13.1444L18.4922 8.75H15.75V15.7498ZM16.25 17.75C16.25 17.1977 16.6977 16.75 17.25 16.75C17.8023 16.75 18.25 17.1977 18.25 17.75C18.25 18.3023 17.8023 18.75 17.25 18.75C16.6977 18.75 16.25 18.3023 16.25 17.75ZM7.25 16.75C6.69772 16.75 6.25 17.1977 6.25 17.75C6.25 18.3023 6.69772 18.75 7.25 18.75C7.80228 18.75 8.25 18.3023 8.25 17.75C8.25 17.1977 7.80228 16.75 7.25 16.75ZM5.96968 12.9697C5.67678 13.2626 5.67678 13.7374 5.96968 14.0303C6.26257 14.3232 6.73744 14.3232 7.03034 14.0303L12.0303 9.03033C12.3232 8.73744 12.3232 8.26256 12.0303 7.96967C11.7374 7.67678 11.2626 7.67678 10.9697 7.96967L5.96968 12.9697ZM7 7.875C6.37868 7.875 5.875 8.37868 5.875 9C5.875 9.62132 6.37868 10.125 7 10.125C7.62132 10.125 8.125 9.62132 8.125 9C8.125 8.37868 7.62132 7.875 7 7.875ZM9.875 13C9.875 12.3787 10.3787 11.875 11 11.875C11.6213 11.875 12.125 12.3787 12.125 13C12.125 13.6213 11.6213 14.125 11 14.125C10.3787 14.125 9.875 13.6213 9.875 13Z" fill="#23262A"/>
+</svg>

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

@@ -0,0 +1,16 @@
+name: TruckPercent
+category: Transportation
+sub_category: Vehicles
+keywords:
+  - pant
+  - lån
+  - gjeld
+  - lastebil
+  - prosent
+  - mortgage
+  - loan
+  - debt
+  - percentage
+variant: Stroke
+updated_at: 27.11.2024
+created_at: 27.11.2024

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

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 5.5C2.25 4.80964 2.74746 4.25 3.36111 4.25H13.1389C13.7525 4.25 14.25 4.80964 14.25 5.5V15.8767C14.25 15.9222 14.2374 15.9667 14.2147 16.0061C13.9582 16.4516 13.7969 16.9589 13.7588 17.5002C13.7491 17.6379 13.6381 17.75 13.5 17.75H11C10.8619 17.75 10.7509 17.6377 10.7412 17.5C10.613 15.6837 9.09893 14.25 7.25 14.25C5.40107 14.25 3.887 15.6837 3.75879 17.5C3.74907 17.6377 3.63807 17.75 3.5 17.75H3.36111C2.74746 17.75 2.25 17.1904 2.25 16.5V5.5ZM21.0372 17.629C21.4587 17.4281 21.75 16.998 21.75 16.5V12.9037C21.75 12.8719 21.7439 12.8404 21.7321 12.8109L19.8221 8.03576C19.6322 7.56119 19.1726 7.25 18.6615 7.25H16C15.8619 7.25 15.75 7.36193 15.75 7.5V8.75V14.1913C15.75 14.3749 15.9424 14.4972 16.1161 14.4377C16.4717 14.316 16.8532 14.25 17.25 14.25C19.0723 14.25 20.5693 15.6426 20.7348 17.4216C20.7494 17.5783 20.8952 17.6967 21.0372 17.629ZM17.25 15.25C15.8693 15.25 14.75 16.3693 14.75 17.75C14.75 19.1307 15.8693 20.25 17.25 20.25C18.6307 20.25 19.75 19.1307 19.75 17.75C19.75 16.3693 18.6307 15.25 17.25 15.25ZM4.75 17.75C4.75 16.3693 5.86929 15.25 7.25 15.25C8.63071 15.25 9.75 16.3693 9.75 17.75C9.75 19.1307 8.63071 20.25 7.25 20.25C5.86929 20.25 4.75 19.1307 4.75 17.75ZM5.21968 11.9697C4.92678 12.2626 4.92678 12.7374 5.21968 13.0303C5.51257 13.3232 5.98744 13.3232 6.28034 13.0303L11.2803 8.03033C11.5732 7.73744 11.5732 7.26256 11.2803 6.96967C10.9874 6.67678 10.5126 6.67678 10.2197 6.96967L5.21968 11.9697ZM6.25 6.875C5.62868 6.875 5.125 7.37868 5.125 8C5.125 8.62132 5.62868 9.125 6.25 9.125C6.87132 9.125 7.375 8.62132 7.375 8C7.375 7.37868 6.87132 6.875 6.25 6.875ZM9.125 12C9.125 11.3787 9.62868 10.875 10.25 10.875C10.8713 10.875 11.375 11.3787 11.375 12C11.375 12.6213 10.8713 13.125 10.25 13.125C9.62868 13.125 9.125 12.6213 9.125 12Z" fill="#23262A"/>
+</svg>

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

@@ -0,0 +1,16 @@
+name: TruckPercentFill
+category: Transportation
+sub_category: Vehicles
+keywords:
+  - pant
+  - lån
+  - gjeld
+  - lastebil
+  - prosent
+  - mortgage
+  - loan
+  - debt
+  - percentage
+variant: Fill
+updated_at: 27.11.2024
+created_at: 27.11.2024

@navikt/aksel-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-icons",
-  "version": "7.4.0",
+  "version": "7.7.0",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/ikoner",
   "repository": {

@navikt/aksel-stylelint/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @navikt/aksel-stylelint
 
+## 7.7.0
+
+## 7.6.0
+
+## 7.5.3
+
+## 7.5.2
+
+## 7.5.1
+
+## 7.5.0
+
+## 7.4.3
+
+## 7.4.2
+
+## 7.4.1
+
 ## 7.4.0
 
 ## 7.3.1

@navikt/aksel-stylelint/package.json

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

@navikt/aksel/CHANGELOG.md

@@ -1,5 +1,70 @@
 # @navikt/aksel
 
+## 7.7.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@7.7.0
+
+## 7.6.0
+
+### Patch Changes
+
+- Updated dependencies [[`dce149f`](https://github.com/navikt/aksel/commit/dce149fca40147440148371db846fb452ab7b5f2), [`34538a1`](https://github.com/navikt/aksel/commit/34538a1cbe30e0c951477cb4a379d648c93733fd), [`641276b`](https://github.com/navikt/aksel/commit/641276bb44919302d19bbc76d30452a5c15536af), [`9f088a9`](https://github.com/navikt/aksel/commit/9f088a93733a038bd0c4f4cd70f7fd3894ee9997), [`6d74cb7`](https://github.com/navikt/aksel/commit/6d74cb72ad522a73a926bbfbd2eaf526388c4826), [`fa2904d`](https://github.com/navikt/aksel/commit/fa2904d54b282da06fc04cfc99be5dd0b3e8d352)]:
+  - @navikt/ds-css@7.6.0
+
+## 7.5.3
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@7.5.3
+
+## 7.5.2
+
+### Patch Changes
+
+- Updated dependencies [[`9c93342`](https://github.com/navikt/aksel/commit/9c9334289246103856c149f5ddcf93dc42087342)]:
+  - @navikt/ds-css@7.5.2
+
+## 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
+
+- Updated dependencies []:
+  - @navikt/ds-css@7.4.2
+
+## 7.4.1
+
+### Patch Changes
+
+- Updated dependencies [[`81c79d8`](https://github.com/navikt/aksel/commit/81c79d8355e5533bb85081d58f82f37202ff812c)]:
+  - @navikt/ds-css@7.4.1
+
 ## 7.4.0
 
 ### Patch Changes

@navikt/aksel/package.json

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

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,51 @@
 # @navikt/ds-css
 
+## 7.7.0
+
+## 7.6.0
+
+### Minor Changes
+
+- ReadMore: Added size 'large'. ([#3372](https://github.com/navikt/aksel/pull/3372))
+
+### Patch Changes
+
+- Select: Now shows focus-outline when ':focus' is set trough pointer or label in all browsers. Chrome and Firefox handles `:focus-visible` differently for 'select', previously causing outline-border not to show in Firefox. ([#3415](https://github.com/navikt/aksel/pull/3415))
+
+- Modal: Don't add scroll shadow when polyfilled ([#3408](https://github.com/navikt/aksel/pull/3408))
+
+- Modal: Now shows up while screensharing with Vergic ([#3407](https://github.com/navikt/aksel/pull/3407))
+
+- FileUpload: Remove browser styling from FileUpload.Item when used in list. ([#3413](https://github.com/navikt/aksel/pull/3413))
+
+- Combobox: Single-select now shows cursor closer to selected item. ([#3384](https://github.com/navikt/aksel/pull/3384))
+
+## 7.5.3
+
+## 7.5.2
+
+### Patch Changes
+
+- Combobox: Fix issue where using arrow keys in list would make the entire page scroll ([#3364](https://github.com/navikt/aksel/pull/3364))
+
+## 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
+
+### Patch Changes
+
+- Combobox: :bug: Fix scroll issue when using arrow keys to navigate list ([#3269](https://github.com/navikt/aksel/pull/3269))
+
 ## 7.4.0
 
 ## 7.3.1

@navikt/core/css/darkside/accordion.darkside.css

@@ -0,0 +1,182 @@
+/* ---------------------------- Accordion header ---------------------------- */
+.navds-accordion__header {
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: var(--ax-spacing-3);
+  padding: var(--ax-spacing-3);
+  text-align: left;
+  cursor: pointer;
+  border: none;
+  position: relative;
+  border-radius: var(--ax-border-radius-large);
+  background: transparent;
+  color: var(--ax-text-accent);
+
+  > * {
+    font-weight: var(--ax-font-weight-regular);
+  }
+
+  @media (forced-colors: active) {
+    border: 1px solid buttonborder;
+    background-color: canvas;
+    color: canvastext;
+  }
+
+  &: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;
+  }
+}

@navikt/core/css/darkside/action-menu.darkside.css

@@ -0,0 +1,201 @@
+/* --------------------------- ActionMenu content --------------------------- */
+.navds-action-menu__content {
+  overflow: hidden;
+  border-radius: var(--ax-border-radius-large);
+  border: 1px solid var(--ax-border-subtleA);
+  box-shadow: var(--ax-shadow-dialog);
+  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);
+      }
+    }
+  }
+}
+
+.navds-action-menu__content > .navds-action-menu__content-inner {
+  --__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(--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(--__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);
+}
+
+/* ----------------------------- ActionMenu Item ---------------------------- */
+.navds-action-menu__item {
+  display: flex;
+  align-items: center;
+  gap: var(--ax-spacing-2);
+  min-height: var(--__axc-action-menu-item-height);
+  cursor: default;
+  border-radius: var(--ax-border-radius-medium);
+  position: relative;
+  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(--ax-text-default);
+  text-decoration: none;
+
+  & 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 {
+  --__axc-action-menu-item-pl: var(--ax-spacing-6);
+}
+
+.navds-action-menu__sub-trigger {
+  --__axc-action-menu-item-pr: var(--ax-spacing-05);
+
+  &[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(--ax-text-danger);
+
+  &: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(--ax-spacing-1);
+}
+
+.navds-action-menu__marker--right {
+  margin-left: auto;
+  padding-left: var(--ax-spacing-4);
+}
+
+.navds-action-menu__marker--left {
+  position: absolute;
+  left: 0;
+  width: var(--__axc-action-menu-item-pl);
+  display: inline-flex;
+  justify-content: center;
+}
+
+.navds-action-menu__marker-icon svg {
+  font-size: 18px;
+  flex-shrink: 0;
+}
+
+/* --------------------------- ActionMenu shortcut -------------------------- */
+.navds-action-menu__shortcut {
+  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(--ax-font-size-small);
+}
+
+/* ---------------------------- ActionMenu Grouping ---------------------------- */
+.navds-action-menu__label {
+  display: flex;
+  align-items: center;
+  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(--ax-font-size-small);
+}
+
+.navds-action-menu__divider {
+  height: 1px;
+  margin-block: var(--ax-spacing-2);
+  background-color: var(--ax-border-subtleA);
+}
+
+/* -------------------------- ActionMenu indicator -------------------------- */
+
+.navds-action-menu__indicator-icon--unchecked,
+.navds-action-menu__indicator-icon--checked,
+.navds-action-menu__indicator-icon--indeterminate {
+  display: none;
+}
+
+.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-icon {
+  font-size: 14px;
+}

@navikt/core/css/darkside/alert.darkside.css

@@ -0,0 +1,115 @@
+.navds-alert {
+  border-radius: var(--ax-border-radius-xlarge);
+  border: 1px solid;
+  padding: var(--ax-spacing-4) var(--ax-spacing-5);
+  display: flex;
+  gap: var(--ax-spacing-3);
+  align-items: center;
+
+  @media (forced-colors: active) {
+    border: 1px solid canvastext;
+    background-color: canvas;
+    color: canvastext;
+  }
+}
+
+.navds-alert__wrapper--maxwidth {
+  max-width: 43.5rem;
+}
+
+.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(--ax-spacing-3) 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;
+}
+
+/* ------------------------------ 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;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-end;
+}
+
+.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);
+    }
+  }
+}

@navikt/core/css/darkside/baseline/theme.darkside.css

@@ -1,10 +1,15 @@
-/* To support nested theming, we want to declare color on each scoped elements */
-:root,
-:host,
-.light {
-  color: var(--a-text-default);
-}
+.navds-theme {
+  color: var(--ax-text-default);
 
-.dark {
-  color: var(--a-text-default);
+  &[data-background="true"] {
+    background-color: var(--ax-bg-default);
+  }
+
+  &.light {
+    color-scheme: light;
+  }
+
+  &.dark {
+    color-scheme: dark;
+  }
 }

@navikt/core/css/darkside/button.darkside.css

@@ -1,6 +1,307 @@
-/* stylelint-disable csstools/value-no-unknown-custom-properties */
-/* stylelint-disable aksel/design-token-exists */
-
 .navds-button {
-  background-color: var(--a-bg-accent-strong);
+  --__axc-button-icon-size: 1.5rem;
+  --__axc-button-icon-margin: -4px;
+  --__axc-button-border-color: transparent;
+  --__axc-button-border-width: 2px;
+
+  padding: var(--ax-spacing-3) var(--ax-spacing-5);
+  border-radius: var(--ax-border-radius-medium);
+  display: inline-flex;
+  cursor: pointer;
+  text-decoration: none;
+  border: none;
+  background: none;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ax-spacing-2);
+  box-shadow: inset 0 0 0 var(--__axc-button-border-width) var(--__axc-button-border-color);
+
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+  }
+}
+
+.navds-button--small,
+.navds-button--xsmall {
+  --__axc-button-icon-margin: -2px;
+  --__axc-button-icon-size: 1.25rem;
+}
+
+.navds-button--small {
+  padding: var(--ax-spacing-1) var(--ax-spacing-3);
+  min-height: 2rem;
+  min-width: 2rem;
+}
+
+.navds-button--xsmall {
+  padding: var(--ax-spacing-05) var(--ax-spacing-2);
+  gap: var(--ax-spacing-1);
+}
+
+.navds-button--icon-only {
+  padding: var(--ax-spacing-3);
+
+  &.navds-button--small {
+    padding: var(--ax-spacing-1);
+  }
+
+  &.navds-button--xsmall {
+    padding: var(--ax-spacing-05);
+  }
+}
+
+@supports not selector(:focus-visible) {
+  .navds-button:focus {
+    outline: 2px solid var(--ax-border-focus);
+  }
+}
+
+.navds-button__icon {
+  font-size: var(--__axc-button-icon-size);
+  display: flex;
+
+  &:first-child {
+    margin-left: var(--__axc-button-icon-margin);
+  }
+
+  &:last-child {
+    margin-right: var(--__axc-button-icon-margin);
+  }
+
+  &:only-child {
+    margin: 0;
+  }
+}
+
+/*************************
+ * .navds-button--primary *
+ *************************/
+.navds-button--primary {
+  background-color: var(--ax-bg-accent-strong);
+  color: var(--ax-text-accent-contrast);
+
+  &:hover {
+    background-color: var(--ax-bg-accent-strong-hover);
+  }
+
+  &:active {
+    background-color: var(--ax-bg-accent-strong-pressed);
+  }
+
+  &:is(:disabled, .navds-button--disabled) {
+    background-color: var(--ax-bg-accent-strong);
+  }
+
+  @media (forced-colors: active) {
+    &:not(:disabled) {
+      background-color: highlight;
+      color: highlighttext;
+    }
+
+    & span {
+      forced-color-adjust: none;
+    }
+  }
+}
+
+/*************************
+ * .navds-button--primary-neutral *
+ *************************/
+.navds-button--primary-neutral {
+  background-color: var(--ax-bg-neutral-strong);
+  color: var(--ax-text-neutral-contrast);
+
+  &:hover {
+    background-color: var(--ax-bg-neutral-strong-hover);
+  }
+
+  &:active {
+    background-color: var(--ax-bg-neutral-strong-pressed);
+  }
+
+  &:is(:disabled, .navds-button--disabled) {
+    background-color: var(--ax-bg-neutral-strong);
+  }
+}
+
+/**************************
+* .navds-button--secondary *
+ **************************/
+.navds-button--secondary {
+  --__axc-button-border-color: var(--ax-border-accent);
+
+  background-color: transparent;
+  color: var(--ax-text-accent);
+
+  &:hover {
+    --__axc-button-border-color: var(--ax-border-accent-strong);
+
+    background-color: var(--ax-bg-accent-moderate-hoverA);
+    color: var(--ax-text-accent-strong);
+  }
+
+  &:active {
+    --__axc-button-border-color: transparent;
+
+    background-color: var(--ax-bg-accent-strong-pressed);
+    color: var(--ax-text-accent-contrast);
+  }
+
+  &:is(:disabled, .navds-button--disabled) {
+    --__axc-button-border-color: var(--ax-border-accent);
+
+    background-color: transparent;
+    color: var(--ax-text-accent);
+  }
+}
+
+/**************************
+* .navds-button--secondary-neutral *
+ **************************/
+.navds-button--secondary-neutral {
+  --__axc-button-border-color: var(--ax-border-default);
+
+  background-color: transparent;
+  color: var(--ax-text-default);
+
+  &:hover {
+    --__axc-button-border-color: var(--ax-border-strong);
+
+    background-color: var(--ax-bg-neutral-moderate-hoverA);
+  }
+
+  &:active {
+    --__axc-button-border-color: transparent;
+
+    color: var(--ax-text-neutral-contrast);
+    background-color: var(--ax-bg-neutral-strong-pressed);
+  }
+
+  &:is(:disabled, .navds-button--disabled) {
+    --__axc-button-border-color: var(--ax-border-neutral);
+
+    color: var(--ax-text-default);
+    background-color: transparent;
+  }
+}
+
+/****************************
+ * .navds-button--tertiary *
+ ****************************/
+.navds-button--tertiary {
+  background-color: transparent;
+  color: var(--ax-text-accent);
+
+  &:hover {
+    background-color: var(--ax-bg-accent-moderate-hoverA);
+    color: var(--ax-text-accent-strong);
+  }
+
+  &:active {
+    background-color: var(--ax-bg-accent-strong-pressed);
+    color: var(--ax-text-accent-contrast);
+  }
+
+  &:is(:disabled, .navds-button--disabled) {
+    color: var(--ax-text-accent);
+    background-color: transparent;
+  }
+}
+
+/****************************
+ * .navds-button--tertiary-neutral *
+ ****************************/
+.navds-button--tertiary-neutral {
+  background-color: transparent;
+  color: var(--ax-text-default);
+
+  &:hover {
+    background-color: var(--ax-bg-neutral-moderate-hoverA);
+  }
+
+  &:active {
+    background-color: var(--ax-bg-neutral-strong-pressed);
+    color: var(--ax-text-neutral-contrast);
+  }
+
+  &:is(:disabled, .navds-button--disabled) {
+    color: var(--ax-text-default);
+    background-color: transparent;
+  }
+}
+
+/*************************
+ * .navds-button--danger *
+ *************************/
+.navds-button--danger {
+  background-color: var(--ax-bg-danger-strong);
+  color: var(--ax-text-danger-contrast);
+
+  &:hover {
+    background-color: var(--ax-bg-danger-strong-hover);
+  }
+
+  &:active {
+    background-color: var(--ax-bg-danger-strong-pressed);
+  }
+
+  &:is(:disabled, .navds-button--disabled) {
+    background-color: var(--ax-bg-danger-strong);
+  }
+}
+
+/**************************
+ * .navds-button:disabled *
+ **************************/
+
+.navds-button:where(:disabled, .navds-button--disabled) {
+  cursor: not-allowed;
+}
+
+.navds-button:not(.navds-button--loading):where(:disabled, .navds-button--disabled) {
+  opacity: 0.3;
+}
+
+/* Loader overrides */
+.navds-button .navds-loader .navds-loader__foreground {
+  stroke: currentColor;
+}
+
+.navds-button--primary .navds-loader .navds-loader__background,
+.navds-button--danger .navds-loader .navds-loader__background {
+  stroke: rgb(255 255 255 / 0.3);
+}
+
+@media (forced-colors: active) {
+  .navds-button:not(.navds-button--loading):where(:disabled, .navds-button--disabled) {
+    opacity: 1;
+    color: GrayText;
+  }
+
+  .navds-button {
+    border: 1px solid transparent;
+    color: ButtonText;
+    background-color: ButtonFace;
+  }
+
+  .navds-button:not(:disabled):hover {
+    background-color: highlighttext;
+    border-color: highlight;
+    color: highlight;
+    box-shadow: none;
+  }
+
+  .navds-button:not(:disabled):hover span {
+    forced-color-adjust: none;
+  }
+
+  .navds-button .navds-loader .navds-loader__foreground {
+    stroke: canvas;
+  }
+
+  .navds-button--primary .navds-loader .navds-loader__background,
+  .navds-button--danger .navds-loader .navds-loader__background {
+    stroke: canvastext;
+  }
 }

@navikt/core/css/darkside/chat.darkside.css

@@ -0,0 +1,115 @@
+.navds-chat {
+  display: flex;
+  align-items: flex-end;
+  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);
+  }
+}
+
+/* ------------------------------- Chat avatar ------------------------------ */
+.navds-chat__avatar {
+  align-items: center;
+  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;
+  overflow: hidden;
+  height: 2.5rem;
+  width: 2.5rem;
+  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;
+  }
+}
+
+/* ------------------------------- 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(--ax-spacing-4) var(--ax-spacing-5);
+  width: fit-content;
+  background-color: var(--ax-bg-raised);
+  display: flex;
+  flex-direction: column;
+  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(--ax-spacing-3) var(--ax-spacing-4);
+}
+
+/* -------------------------- Chat bubble variants -------------------------- */
+.navds-chat--info {
+  & .navds-chat__bubble,
+  & .navds-chat__avatar {
+    background-color: var(--ax-bg-info-raised);
+  }
+}
+
+.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(--ax-text-default);
+  display: flex;
+  gap: var(--ax-spacing-2);
+  align-items: baseline;
+  font-weight: normal;
+  margin: 0;
+}
+
+.navds-chat--right .navds-chat__top-text {
+  align-self: flex-end;
+}
+
+.navds-chat--top-text-left .navds-chat__top-text {
+  align-self: flex-start;
+}
+
+.navds-chat--top-text-right .navds-chat__top-text {
+  align-self: flex-end;
+}
+
+.navds-chat--left .navds-chat__top-text--right {
+  align-self: flex-end;
+}
+
+.navds-chat--right .navds-chat__top-text--left {
+  align-self: flex-start;
+}

@navikt/core/css/darkside/chips.darkside.css

@@ -0,0 +1,182 @@
+.navds-chips {
+  display: flex;
+  gap: var(--ax-spacing-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  flex-wrap: wrap;
+}
+
+.navds-chips li {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: block;
+}
+
+.navds-chips__chip {
+  all: unset;
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ax-spacing-05);
+  margin: 0;
+  padding: 0 var(--ax-spacing-3);
+  text-decoration: none;
+  border-radius: var(--ax-border-radius-full);
+  min-height: 2rem;
+
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+  }
+}
+
+.navds-chips--readonly {
+  .navds-chips__chip {
+    background-color: var(--ax-bg-neutral-moderateA);
+  }
+}
+
+.navds-chips--small {
+  .navds-chips__chip {
+    min-height: 1.5rem;
+    padding: 0 var(--ax-spacing-2);
+  }
+
+  .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(--ax-spacing-1-alt);
+}
+
+/* -------------------------- start old CSS --------------------------  */
+
+/* ----------------------------- Chips removable ---------------------------- */
+.navds-chips__removable {
+  gap: 0;
+}
+
+.navds-chips__removable--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: var(--ax-bg-neutral-strong-pressed);
+  color: var(--ax-text-neutral-contrast);
+
+  &:hover {
+    background: var(--ax-bg-neutral-strong-hover);
+  }
+}
+
+.navds-chips__removable-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: 1.25rem;
+  display: grid;
+  place-items: center;
+  border-radius: var(--ax-border-radius-full);
+}
+
+.navds-chips--icon-left {
+  padding-left: var(--ax-spacing-1-alt);
+}
+
+.navds-chips--icon-right {
+  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:where([data-pressed="true"], :active, :hover) > span {
+    forced-color-adjust: none;
+  }
+
+  .navds-chips__toggle[data-pressed="true"] {
+    background-color: selecteditem;
+    color: selecteditemtext;
+    border: 1px solid selecteditem;
+
+    &:hover {
+      background-color: selecteditemtext;
+      color: selecteditem;
+    }
+  }
+}

@navikt/core/css/darkside/copybutton.darkside.css

@@ -0,0 +1,183 @@
+.navds-copybutton {
+  --__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;
+  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-hoverA);
+  }
+
+  &: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) {
+  .navds-copybutton {
+    background-color: ButtonFace;
+    border: solid 1px ButtonText;
+    color: ButtonText;
+
+    &:disabled {
+      opacity: 1;
+      border-color: GrayText;
+    }
+  }
+}
+
+/* -------------------------- CopyButton small size ------------------------- */
+.navds-copybutton--small {
+  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);
+  }
+}
+
+/* ------------------------- CopyButton xsmall size ------------------------- */
+.navds-copybutton--xsmall {
+  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);
+  }
+}
+
+/* ----------------------------- CopyButton Icon ---------------------------- */
+.navds-copybutton__icon {
+  font-size: 1.5rem;
+  display: flex;
+
+  &:first-of-type {
+    margin-left: -0.25rem;
+  }
+
+  &:last-of-type {
+    margin-right: -0.25rem;
+  }
+
+  &:only-child {
+    margin: 0;
+  }
+}
+
+.navds-copybutton--active .navds-copybutton__icon {
+  animation: akselCopyButtonIconAnimation 2s cubic-bezier(0.05, 0.7, 0.1, 1);
+}
+
+@keyframes akselCopyButtonIconAnimation {
+  8% {
+    transform: translateY(0);
+  }
+
+  17% {
+    transform: translateY(-10%);
+  }
+
+  25% {
+    transform: translateY(2%);
+  }
+
+  30% {
+    transform: translateY(0);
+  }
+}
+
+/* ---------------------------- CopyButton Action --------------------------- */
+.navds-copybutton--action {
+  color: var(--ax-text-accent);
+
+  &.navds-copybutton--active {
+    color: var(--ax-text-success);
+
+    &:hover {
+      color: var(--ax-text-success-strong);
+    }
+  }
+
+  &:hover {
+    color: var(--ax-text-accent-strong);
+  }
+
+  &:disabled {
+    color: var(--ax-text-accent);
+  }
+}
+
+/* --------------------------- CopyButton Neutral --------------------------- */
+.navds-copybutton--neutral {
+  color: var(--ax-text-subtle);
+
+  &:hover,
+  &.navds-copybutton--active {
+    color: var(--ax-text-default);
+  }
+
+  &:disabled {
+    color: var(--ax-text-subtle);
+  }
+}
+
+.navds-copybutton__content {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ax-spacing-2);
+}

@navikt/core/css/darkside/date.darkside.css

@@ -0,0 +1,283 @@
+.navds-date {
+  padding: var(--ax-spacing-4) var(--ax-spacing-3);
+
+  .rdp-day_range_middle {
+    &.rdp-day_disabled {
+      color: var(--ax-text-default);
+      background: var(--ax-bg-neutral-moderateA);
+    }
+
+    &.rdp-day_selected {
+      background-color: var(--ax-bg-accent-moderateA);
+      box-shadow: inset 0 0 0 1px var(--ax-border-accent-subtleA);
+      color: var(--ax-text-default);
+    }
+  }
+
+  .rdp-month,
+  &.rdp-month {
+    display: grid;
+    gap: var(--ax-spacing-5);
+  }
+
+  .navds-date__caption-label {
+    text-transform: capitalize;
+  }
+
+  .rdp-head_cell {
+    text-transform: capitalize;
+    font-size: var(--ax-font-size-small);
+  }
+
+  .rdp-button {
+    all: unset;
+    display: block;
+    width: 2.5rem;
+    height: 2.5rem;
+    text-align: center;
+    border-radius: var(--ax-border-radius-medium);
+  }
+
+  .rdp-day_range_start {
+    border-radius: var(--ax-border-radius-xlarge) var(--ax-border-radius-medium) var(--ax-border-radius-medium)
+      var(--ax-border-radius-xlarge);
+  }
+
+  .rdp-day_range_end:not(.rdp-day_range_start) {
+    border-radius: var(--ax-border-radius-medium) var(--ax-border-radius-xlarge) var(--ax-border-radius-xlarge)
+      var(--ax-border-radius-medium);
+  }
+
+  .rdp-day_range_start.rdp-day_range_end {
+    border-radius: var(--ax-border-radius-xlarge);
+  }
+
+  .navds-date__field {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    position: relative;
+  }
+
+  .rdp-day_selected,
+  .navds-monthpicker__month--selected {
+    color: var(--ax-text-accent-contrast);
+    background: var(--ax-bg-accent-strong-pressed);
+    cursor: pointer;
+  }
+
+  .rdp-day_disabled {
+    cursor: not-allowed;
+    text-decoration: line-through;
+    background-color: var(--ax-bg-neutral-moderateA);
+    color: var(--ax-text-subtle);
+  }
+
+  .rdp-button:where(:not(.rdp-day_selected, [disabled])):hover,
+  .navds-date__month-button:where(:not(.rdp-day_selected, [disabled])):hover {
+    background: var(--ax-bg-accent-moderate-hoverA);
+    cursor: pointer;
+  }
+
+  .rdp-day_today {
+    position: relative;
+
+    &::before {
+      width: 6px;
+      height: 6px;
+      display: block;
+      background-color: var(--ax-text-accent);
+      border-radius: var(--ax-border-radius-full);
+      content: "";
+      position: absolute;
+      bottom: 5px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    &.rdp-day_selected:not(.rdp-day_range_middle),
+    &:active {
+      &::before {
+        background-color: var(--ax-text-accent-contrast);
+      }
+    }
+  }
+
+  .rdp-day_outside {
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .navds-date__modal & {
+    padding: 0;
+  }
+
+  .navds-date__modal-body > & {
+    padding: 0;
+  }
+}
+
+.navds-date__caption {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--ax-spacing-1);
+  padding-inline: var(--ax-spacing-1);
+}
+
+.navds-date__caption-button {
+  width: 2rem;
+  height: 2rem;
+  color: var(--ax-text-default);
+}
+
+.navds-date__caption__month .navds-select__container select {
+  text-transform: capitalize;
+}
+
+/* Monthpicker */
+.navds-date__month-button {
+  all: unset;
+  text-align: center;
+  width: 3rem;
+  height: 3rem;
+  text-transform: capitalize;
+  border-radius: var(--ax-border-radius-medium);
+  cursor: pointer;
+}
+
+.navds-date__year-label {
+  display: flex;
+  align-items: center;
+}
+
+.navds-date__wrapper,
+.navds-date__standalone-wrapper {
+  height: fit-content;
+  width: fit-content;
+
+  .rdp-cell > button.rdp-day,
+  button.navds-date__month-button {
+    &:focus-visible {
+      outline: 2px solid var(--ax-border-focus);
+      outline-offset: 1px;
+    }
+
+    &:active:not(:disabled) {
+      color: var(--ax-text-accent-contrast);
+      background-color: var(--ax-bg-accent-strong-pressed);
+    }
+  }
+}
+
+.navds-date__field-input {
+  &.navds-text-field__input {
+    padding-right: var(--ax-spacing-12);
+  }
+
+  .navds-form-field--small & {
+    padding-right: var(--ax-spacing-8);
+  }
+}
+
+.navds-date__field-button {
+  position: absolute;
+  right: 0.0625rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--ax-text-default);
+  display: inline-flex;
+  cursor: pointer;
+  margin: 0;
+  text-decoration: none;
+  border: none;
+  background: none;
+  border-radius: calc(var(--ax-border-radius-medium) - 1px);
+  padding: var(--ax-spacing-3);
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+  height: calc(100% - 0.125rem);
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+
+  .navds-form-field--small & {
+    padding: var(--ax-spacing-1);
+  }
+
+  .navds-form-field--disabled & {
+    opacity: 1;
+    cursor: not-allowed;
+  }
+
+  /* Readonly */
+  .navds-date__field--readonly & {
+    cursor: default;
+  }
+
+  &:focus-visible {
+    outline-color: var(--ax-border-focus);
+  }
+}
+
+.navds-date__field-wrapper {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  width: fit-content;
+}
+
+.navds-date__week-row {
+  display: flex;
+  align-items: center;
+  gap: var(--ax-spacing-05);
+}
+
+.navds-date__weeknumber {
+  --__axc-button-border-width: 1px;
+}
+
+.navds-date__weeknumber-number {
+  font-size: 0.875rem;
+  color: var(--ax-text-subtle);
+
+  .navds-date__weeknumber:active & {
+    color: var(--ax-text-neutral-contrast);
+  }
+}
+
+.navds-date__week-wrapper {
+  width: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+}
+
+.navds-date__modal-body {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  padding: var(--ax-spacing-4);
+  gap: var(--ax-spacing-2);
+}
+
+@media (min-width: 480px) {
+  .navds-date {
+    padding: var(--ax-spacing-5) var(--ax-spacing-4);
+  }
+
+  .navds-date__modal-body {
+    padding: var(--ax-spacing-6);
+  }
+
+  .navds-date__caption {
+    gap: var(--ax-spacing-2);
+  }
+
+  .navds-date .rdp-button,
+  .navds-date__caption-button {
+    width: 3rem;
+    height: 3rem;
+  }
+}

@navikt/core/css/darkside/dropdown.darkside.css

@@ -0,0 +1,91 @@
+.navds-dropdown__menu {
+  overflow: hidden;
+  padding: var(--a-spacing-2) 0;
+  color: var(--ac-dropdown-text, var(--a-text-default));
+  width: 27ch;
+  max-height: 616px;
+  overflow-y: auto;
+}
+
+.navds-dropdown__divider {
+  margin: var(--a-spacing-3) 0;
+  border: none;
+  border-bottom: 1px solid var(--a-border-divider);
+}
+
+.navds-dropdown__menu > :not(.navds-dropdown__divider, .navds-dropdown__list) {
+  margin: 0 var(--a-spacing-4) var(--a-spacing-3);
+}
+
+.navds-dropdown__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.navds-dropdown__list-item {
+  margin: 0;
+}
+
+.navds-dropdown__list-heading {
+  margin: var(--a-spacing-1) var(--a-spacing-4) var(--a-spacing-3);
+}
+
+.navds-dropdown__item {
+  border: none;
+  margin: 0;
+  overflow: visible;
+  background: transparent;
+  color: var(--ac-dropdown-item-text, var(--a-text-action));
+  font: inherit;
+  text-decoration: none;
+  text-align: left;
+  cursor: pointer;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--a-spacing-2);
+  padding: var(--a-spacing-1) var(--a-spacing-4);
+}
+
+.navds-dropdown__item:hover {
+  background-color: var(--ac-dropdown-item-hover-bg, var(--a-surface-action-subtle-hover));
+  color: var(--ac-dropdown-item-hover-text, var(--a-text-action-hover));
+}
+
+.navds-dropdown__item:active {
+  background-color: var(--ac-dropdown-item-active-bg, var(--a-surface-action-active));
+  color: var(--ac-dropdown-item-active-text, var(--a-text-on-action));
+}
+
+.navds-dropdown__item:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+  box-shadow: inset 0 0 0 2px var(--a-border-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-dropdown__item:focus {
+    outline: 2px solid transparent;
+    outline-offset: -2px;
+    box-shadow: inset 0 0 0 2px var(--a-border-focus);
+  }
+}
+
+.navds-dropdown__item:disabled {
+  color: var(--ac-dropdown-item-text, var(--a-text-action));
+  opacity: 0.3;
+  background: transparent;
+  cursor: not-allowed;
+}
+
+@media (forced-colors: active) {
+  .navds-dropdown__item:hover {
+    color: highlight;
+  }
+
+  .navds-dropdown__item:disabled {
+    opacity: 1;
+    color: graytext;
+  }
+}

@navikt/core/css/darkside/expansioncard.darkside.css

@@ -0,0 +1,177 @@
+.navds-expansioncard {
+  --__axc-expansioncard-border-radius: calc(var(--ax-border-radius-xlarge) - 1px);
+  --__axc-expansioncard-padding-block: var(--ax-spacing-4);
+  --__axc-expansioncard-padding-inline: var(--ax-spacing-5);
+
+  border-radius: var(--ax-border-radius-xlarge);
+  background-color: var(--ax-bg-raised);
+  height: fit-content;
+  border: 1px solid var(--ax-border-default);
+
+  &:has(.navds-expansioncard__header:hover) {
+    box-shadow: 0 0 0 1px var(--ax-border-strong);
+    border-color: var(--ax-border-strong);
+  }
+}
+
+/* ------------------------ ExpansionCard Small-size ------------------------ */
+.navds-expansioncard--small {
+  --__axc-expansioncard-padding-inline: var(--ax-spacing-4);
+  --__axc-expansioncard-padding-block: var(--ax-spacing-3);
+
+  & > .navds-expansioncard__header .navds-expansioncard__title--small {
+    margin-top: var(--ax-spacing-05);
+  }
+
+  & :is(.navds-expansioncard__title--medium, .navds-expansioncard__title--large) {
+    margin-top: 0;
+  }
+
+  & > .navds-expansioncard__header > .navds-expansioncard__header-button {
+    min-height: 2rem;
+    min-width: 2rem;
+  }
+}
+
+/* -------------------------- ExpansionCard Header -------------------------- */
+.navds-expansioncard__header {
+  width: 100%;
+  display: flex;
+  gap: var(--ax-spacing-4);
+  padding: var(--__axc-expansioncard-padding-block) var(--__axc-expansioncard-padding-inline);
+  border-radius: var(--__axc-expansioncard-border-radius);
+  background-color: transparent;
+  position: relative;
+  justify-content: space-between;
+
+  &:hover {
+    background-color: var(--ax-bg-neutral-raised-hover);
+  }
+
+  &[data-open="true"] {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+
+    /* Divider between header and content */
+    &::after {
+      content: "";
+      background-color: var(--ax-border-subtle);
+      bottom: 0;
+      left: var(--__axc-expansioncard-padding-inline);
+      height: 1px;
+      width: calc(100% - 2 * var(--__axc-expansioncard-padding-inline));
+      position: absolute;
+      opacity: 1;
+    }
+
+    &:hover::after {
+      opacity: 0;
+    }
+  }
+}
+
+/* --------------------- ExpansionCard Header typography -------------------- */
+.navds-expansioncard__title--small {
+  margin-top: 0.625rem;
+}
+
+.navds-expansioncard__title--medium {
+  margin-top: var(--ax-spacing-2);
+}
+
+.navds-expansioncard__title--large {
+  margin-top: var(--ax-spacing-1);
+}
+
+/* ----------------------- ExpansionCard Header Button ---------------------- */
+.navds-expansioncard__header-button {
+  display: grid;
+  place-content: center;
+  cursor: pointer;
+  margin: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--ax-border-radius-large);
+  min-height: 3rem;
+  min-width: 3rem;
+  font-size: 1.5rem;
+  align-self: flex-start;
+
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+  }
+
+  @supports not selector(:focus-visible) {
+    &:focus {
+      outline: 2px solid var(--ax-border-focus);
+      outline-offset: 2px;
+    }
+  }
+
+  /* Makes the whole header clickable */
+  &::after {
+    inset: 0;
+    z-index: 1;
+    position: absolute;
+    content: "";
+    height: 100%;
+    width: 100%;
+    cursor: pointer;
+  }
+}
+
+.navds-expansioncard__header:hover > .navds-expansioncard__header-button {
+  background-color: var(--ax-bg-neutral-moderate-hoverA);
+}
+
+.navds-expansioncard__header-chevron {
+  transition: transform 250ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+.navds-expansioncard__header[data-open="true"] .navds-expansioncard__header-chevron {
+  transform: rotateX(-180deg);
+}
+
+/* Even if animation always takes 250ms, the perceived effect of current timing function makes the 'closing'-animation take longer */
+.navds-expansioncard__header[data-open="false"] .navds-expansioncard__header-chevron {
+  transition-duration: 400ms;
+}
+
+/* -------------------------- ExpansionCard Content ------------------------- */
+.navds-expansioncard__content {
+  border-end-end-radius: var(--__axc-expansioncard-border-radius);
+  border-end-start-radius: var(--__axc-expansioncard-border-radius);
+  padding-inline: var(--__axc-expansioncard-padding-inline);
+  padding-block: 0;
+  display: grid;
+  grid-template-rows: 0fr;
+  visibility: hidden;
+  transition-duration: 250ms;
+  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
+  transition-property: visibility, padding-block, grid-template-rows;
+  overflow: hidden;
+
+  &[data-open="true"] {
+    grid-template-rows: 1fr;
+    visibility: visible;
+    padding-block: var(--__axc-expansioncard-padding-block);
+
+    & .navds-expansioncard__content-inner {
+      opacity: 1;
+    }
+  }
+}
+
+.navds-expansioncard__content-inner {
+  min-height: 0;
+  opacity: 0;
+  transition: opacity 250ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+/* ---------------- ExpansionCard No Animation (defaultOpen) ---------------- */
+.navds-expansioncard--no-animation {
+  & :is(.navds-expansioncard__content, .navds-expansioncard__content-inner) {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,479 @@
+.navds-combobox__wrapper {
+  --__axc-combobox-icon-size: 1.5rem;
+  --__axc-combobox-wrapper-inner-padding: var(--ax-spacing-2);
+  --__axc-combobox-list-item-padding-block: var(--ax-spacing-3);
+  --__axc-combobox-list-item-padding-inline: var(--ax-spacing-3);
+  --__axc-combobox-border-width: 1px;
+  --__axc-combobox-input-height: 2rem;
+
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  position: relative;
+  border-radius: var(--ax-border-radius-medium);
+}
+
+.navds-form-field:not(:is(.navds-combobox--disabled, .navds-combobox--readonly)) {
+  & .navds-combobox__wrapper:hover {
+    border-color: var(--ax-border-focus);
+  }
+}
+
+.navds-form-field--small .navds-combobox__wrapper {
+  --__axc-combobox-icon-size: 1.25rem;
+  --__axc-combobox-wrapper-inner-padding: var(--ax-spacing-1);
+  --__axc-combobox-list-item-padding-block: var(--ax-spacing-1-alt);
+  --__axc-combobox-list-item-padding-inline: var(--ax-spacing-2);
+  --__axc-combobox-input-height: 1.5rem;
+}
+
+.navds-combobox--disabled {
+  opacity: 0.3;
+
+  & .navds-combobox__wrapper {
+    & *:hover {
+      cursor: not-allowed;
+    }
+  }
+
+  & .navds-combobox__selected-options {
+    pointer-events: none;
+  }
+
+  & .navds-combobox--readonly {
+    pointer-events: none;
+  }
+}
+
+.navds-combobox--readonly {
+  pointer-events: none;
+
+  & .navds-combobox__selected-options {
+    & .navds-chips__chip {
+      background-color: var(--ax-bg-neutral-moderateA);
+    }
+  }
+
+  & .navds-combobox__button-toggle-list {
+    color: var(--ax-bg-neutral-moderate);
+  }
+
+  & .navds-combobox__wrapper {
+    border-color: var(--ax-border-subtle);
+    overflow: clip;
+  }
+
+  & .navds-text-field__input,
+  & .navds-combobox__input {
+    background-color: var(--ax-bg-neutral-moderate);
+  }
+}
+
+.navds-combobox__button-clear svg,
+.navds-combobox__button-toggle-list svg,
+.navds-combobox__list svg {
+  width: var(--__axc-combobox-icon-size);
+  height: var(--__axc-combobox-icon-size);
+}
+
+.navds-combobox__wrapper-inner {
+  border: 1px solid var(--ax-border-default);
+  border-radius: var(--ax-border-radius-medium);
+
+  &:has(.navds-combobox__input:focus-visible) {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+    border-color: var(--ax-border-focus);
+  }
+
+  &:has(.navds-combobox__input:focus-visible).navds-combobox__wrapper-inner--virtually-unfocused {
+    outline: none;
+    border-color: var(--ax-border-default);
+  }
+
+  &.navds-text-field__input {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding-block: calc(var(--__axc-combobox-wrapper-inner-padding) - var(--__axc-combobox-border-width));
+    padding-inline: var(--__axc-combobox-wrapper-inner-padding);
+  }
+
+  & > :first-child {
+    flex: 2;
+  }
+
+  & > :last-child {
+    display: flex;
+    flex-flow: row nowrap;
+  }
+
+  &:hover {
+    cursor: text;
+  }
+}
+
+.navds-combobox--error {
+  & .navds-combobox__wrapper-inner {
+    border-color: var(--ax-border-danger);
+    box-shadow: 0 0 0 1px var(--ax-border-danger);
+
+    &:has(.navds-combobox__input:focus-visible) {
+      border-color: var(--ax-border-danger);
+    }
+  }
+}
+
+.navds-combobox__selected-options {
+  gap: 0;
+  align-items: center;
+
+  & > li {
+    margin: auto 0;
+    border-radius: var(--ax-border-radius-full);
+  }
+
+  & > li:last-of-type {
+    display: flex;
+    flex: 1;
+  }
+
+  &[data-type="multiple"] {
+    gap: var(--__axc-combobox-wrapper-inner-padding);
+  }
+}
+
+.navds-combobox__selected-options--no-bg {
+  font-family: inherit;
+  font-size: var(--ax-font-size-large);
+  font-weight: var(--ax-font-weight-regular);
+  letter-spacing: 0;
+  line-height: var(--ax-font-line-height-large);
+  margin: 0;
+  padding-left: 0.25rem;
+}
+
+.navds-combobox__input-wrapper {
+  width: 100%;
+}
+
+.navds-combobox__input {
+  flex: 1;
+  border: none;
+  padding: 0;
+  margin: 0;
+  min-width: 10ch;
+  width: 100%;
+  height: var(--__axc-combobox-input-height);
+  background: var(--ax-bg-input);
+
+  &:focus-visible {
+    outline: 0;
+    border: none;
+  }
+
+  .navds-combobox__selected-options > li:only-child > & {
+    margin-left: var(--ax-spacing-1);
+  }
+}
+
+.navds-combobox__input--hide-caret {
+  caret-color: transparent;
+}
+
+@supports not selector(:focus-visible) {
+  .navds-combobox__input {
+    &:focus {
+      outline: none;
+      border: none;
+    }
+  }
+
+  .navds-combobox__wrapper-inner {
+    &:has(.navds-combobox__input:focus) {
+      outline: none;
+    }
+
+    &:has(.navds-combobox__input:focus).navds-combobox__wrapper-inner--virtually-unfocused {
+      outline: none;
+    }
+  }
+}
+
+.navds-combobox__button-clear {
+  border-radius: var(--ax-border-radius-medium);
+  color: var(--ax-text-subtle);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  background: none;
+  border: none;
+  font-size: 1rem;
+  padding: 0;
+}
+
+.navds-combobox__input::-webkit-search-cancel-button {
+  display: none;
+}
+
+.navds-combobox__button-toggle-list {
+  border-radius: var(--ax-border-radius-medium);
+  color: var(--ax-text-default);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  background: none;
+  border: none;
+  font-size: 1rem;
+  padding: 0;
+}
+
+.navds-combobox__button-clear,
+.navds-combobox__button-toggle-list {
+  &:hover {
+    color: var(--ax-text-accent);
+
+    &:active {
+      color: var(--ax-text-accent-strong);
+    }
+  }
+}
+
+/* dropdown & non selectable dropdown items */
+
+.navds-combobox__list {
+  max-height: 290px;
+  overflow: clip;
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  top: calc(100% + var(--ax-spacing-2));
+  border: 1px solid var(--ax-border-subtleA);
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--ax-border-radius-large);
+  background-color: var(--ax-bg-raised);
+  color: var(--ax-text-default);
+  overscroll-behavior: contain;
+  box-shadow: var(--ax-shadow-dialog);
+
+  & .navds-combobox__list-options {
+    overflow-y: auto;
+  }
+}
+
+.navds-combobox__list--closed {
+  display: none;
+}
+
+.navds-combobox__list-item,
+.navds-combobox__list-item--loading,
+.navds-combobox__list-item--no-options,
+.navds-combobox__list-item--new-option,
+.navds-combobox__list-item--max-selected {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  padding-block: var(--__axc-combobox-list-item-padding-block);
+  padding-inline: var(--__axc-combobox-list-item-padding-inline);
+  border-radius: var(--ax-border-radius-medium);
+  border: 0;
+  margin-inline: var(--ax-spacing-2);
+  margin-block: var(--ax-spacing-1);
+  scroll-margin-block: 8px; /* outline + outline-offset + margin-block */
+}
+
+.navds-combobox__list-item--no-options {
+  margin: 0;
+}
+
+.navds-combobox__list-item--loading {
+  justify-content: center;
+  margin: 0;
+}
+
+.navds-combobox__list-item--max-selected {
+  background-color: var(--ax-bg-neutral-moderateA);
+  margin: 0;
+  border-radius: 0;
+  border-bottom: 1px solid var(--ax-border-neutral-subtle);
+  padding-block: var(--ax-spacing-2);
+  line-height: var(--ax-font-line-height-large);
+}
+
+/* ul-list and selectable li-items */
+
+.navds-combobox__list-options {
+  list-style: none;
+  margin: 0;
+  display: inherit;
+  flex-direction: inherit;
+  gap: inherit;
+  background-color: inherit;
+  align-items: stretch;
+  padding: 0;
+  padding-block: var(--ax-spacing-1);
+}
+
+.navds-combobox__list-item--focus {
+  cursor: pointer;
+  outline: 2px solid var(--ax-border-focus);
+  outline-offset: 2px;
+}
+
+.navds-combobox__list-item {
+  user-select: none;
+
+  &[data-no-focus="true"] {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+
+  & mark {
+    background-color: transparent;
+    font-weight: var(--ax-font-weight-bold);
+  }
+
+  & svg {
+    color: var(--ax-text-accent);
+  }
+}
+
+.navds-combobox__list-item--selected {
+  background-color: var(--ax-bg-accent-moderate-pressedA);
+
+  & p {
+    font-weight: var(--ax-font-weight-bold);
+  }
+}
+
+.navds-combobox__list-item--new-option {
+  border-bottom: 1px solid var(--ax-border-accent-subtleA);
+  border-radius: 0;
+  background: var(--ax-bg-accent-moderateA);
+  cursor: pointer;
+  justify-content: flex-start;
+  gap: 0.25rem;
+  margin: 0;
+  margin-block: calc(var(--ax-spacing-1) * -1);
+  padding-block: var(--ax-spacing-4);
+
+  & svg {
+    color: var(--ax-text-default);
+  }
+
+  &:only-child {
+    border: none;
+  }
+}
+
+.navds-combobox__list-item--new-option--focus {
+  border-radius: calc(var(--ax-border-radius-large) - 1px) calc(var(--ax-border-radius-large) - 1px) 0 0;
+
+  /* TODO: new option should get a wrapper div later to
+* style it properly with a nice rounded border radius
+* */
+  outline: 2px solid var(--ax-border-focus);
+  outline-offset: -2px;
+
+  &:only-child {
+    border-radius: calc(var(--ax-border-radius-large) - 1px);
+  }
+}
+
+/* Mobile */
+@media (max-width: 479px) {
+  .navds-combobox__button-toggle-list {
+    right: 0.5rem;
+  }
+
+  /* add bigger click area for input */
+  .navds-combobox__input {
+    min-width: min-content;
+    padding: 0.75rem 0;
+  }
+
+  .navds-combobox__selected-options {
+    gap: var(--ax-spacing-1);
+  }
+}
+
+@media (forced-colors: active) {
+  .navds-combobox__button-clear:hover {
+    color: highlight;
+  }
+
+  .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
+    outline-color: highlight;
+  }
+
+  .navds-combobox__list-item--focus,
+  .navds-combobox__list--with-hover
+    .navds-combobox__list-item:not([data-no-focus="true"], .navds-combobox__list-item--new-option):hover {
+    border-left-color: highlight;
+    color: highlight;
+  }
+
+  .navds-combobox__list-item[data-no-focus="true"] {
+    opacity: 1;
+    color: graytext;
+  }
+
+  .navds-combobox__list-item--selected {
+    background-color: highlight;
+    color: selecteditemtext;
+
+    & * {
+      color: black;
+    }
+
+    & > * {
+      forced-color-adjust: none;
+    }
+  }
+
+  .navds-combobox__list-item--selected.navds-combobox__list-item--focus,
+  .navds-combobox__list--with-hover .navds-combobox__list-item--selected:hover {
+    border-left-color: highlight;
+    color: highlight;
+  }
+
+  .navds-combobox__list--with-hover .navds-combobox__list-item--new-option:hover {
+    color: highlight;
+  }
+
+  .navds-combobox__list-item--new-option--focus {
+    outline: 2px solid highlight;
+    outline-offset: 0;
+  }
+
+  .navds-combobox--disabled {
+    opacity: 1;
+
+    & * {
+      border-color: graytext;
+      color: graytext;
+      opacity: 1;
+    }
+  }
+
+  .navds-combobox__list-item--new-option {
+    svg {
+      color: canvastext;
+    }
+
+    &:hover {
+      color: highlight;
+
+      svg {
+        color: highlight;
+      }
+    }
+  }
+}

@navikt/core/css/darkside/form/confirmation-panel.darkside.css

@@ -0,0 +1,53 @@
+.navds-confirmation-panel__inner {
+  display: flex;
+  flex-direction: column;
+  gap: var(--a-spacing-3);
+  padding: var(--a-spacing-4);
+  border-radius: var(--a-border-radius-medium);
+  border: 1px solid var(--ac-confirmation-panel-border, var(--a-border-warning));
+  background-color: var(--ac-confirmation-panel-bg, var(--a-surface-warning-subtle));
+  transition: background-color linear 100ms;
+  justify-self: stretch;
+  position: relative;
+}
+
+.navds-confirmation-panel__content {
+  max-width: 80ch;
+}
+
+.navds-confirmation-panel--checked .navds-confirmation-panel__inner {
+  border-color: var(--ac-confirmation-panel-checked-border, var(--a-border-success));
+  background-color: var(--ac-confirmation-panel-checked-bg, var(--a-surface-success-subtle));
+}
+
+.navds-confirmation-panel--error .navds-confirmation-panel__inner {
+  border-color: var(--ac-confirmation-panel-error-border, var(--a-border-danger));
+  background-color: var(--ac-confirmation-panel-error-bg, var(--a-surface-danger-subtle));
+}
+
+.navds-confirmation-panel--error .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label {
+  color: var(--a-text-default);
+}
+
+@media (forced-colors: active) {
+  .navds-confirmation-panel__inner::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    border-left: 8px solid;
+    border-color: orange;
+    forced-color-adjust: none;
+    border-start-start-radius: calc(var(--a-border-radius-medium) - 1px);
+    border-end-start-radius: calc(var(--a-border-radius-medium) - 1px);
+  }
+
+  .navds-confirmation-panel--checked .navds-confirmation-panel__inner::before {
+    border-color: green;
+  }
+
+  .navds-confirmation-panel--error .navds-confirmation-panel__inner::before {
+    border-color: red;
+  }
+}

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

@@ -0,0 +1,49 @@
+.navds-error-summary {
+  background-color: var(--ax-bg-default);
+  padding: var(--ax-spacing-4) var(--ax-spacing-5);
+  border: 4px solid var(--ax-border-danger);
+  border-radius: var(--ax-border-radius-xlarge);
+  outline-offset: 2px;
+
+  &:focus-visible,
+  &:has(.navds-error-summary__heading:focus-visible) {
+    outline: 2px solid var(--ax-border-focus);
+  }
+}
+
+@supports not selector(:focus-visible) {
+  .navds-error-summary:focus {
+    outline: 2px solid var(--ax-border-focus);
+  }
+}
+
+.navds-error-summary--small {
+  padding: var(--ax-spacing-3) var(--ax-spacing-4);
+
+  & .navds-error-summary__heading {
+    scroll-margin-top: var(--ax-spacing-4);
+  }
+
+  & > .navds-error-summary__list {
+    margin: var(--ax-spacing-2) 0;
+    gap: var(--ax-spacing-2);
+    padding-left: var(--ax-spacing-5);
+  }
+}
+
+.navds-error-summary__heading {
+  scroll-margin-top: var(--ax-spacing-6);
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.navds-error-summary__list {
+  margin: var(--ax-spacing-3) 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ax-spacing-3);
+  padding-left: var(--ax-spacing-6);
+  list-style: inherit;
+}

@navikt/core/css/darkside/form/fieldset.darkside.css

@@ -0,0 +1,43 @@
+.navds-fieldset {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-width: 0;
+}
+
+.navds-fieldset > :not(:first-child, :empty) {
+  margin-top: var(--ax-spacing-2);
+}
+
+.navds-fieldset__description {
+  color: var(--ax-text-subtle);
+}
+
+.navds-fieldset > .navds-fieldset__description:not(:empty) {
+  margin-top: 0.125rem;
+}
+
+/* Applied when hideLegend is applied to fieldset */
+.navds-fieldset > .navds-sr-only + :not(:first-child, :empty) {
+  margin-top: 0;
+}
+
+.navds-fieldset__legend {
+  padding: 0;
+}
+
+.navds-fieldset--readonly > :where(.navds-fieldset__legend) {
+  display: inline-flex;
+}
+
+.navds-fieldset:disabled > .navds-fieldset__legend,
+.navds-fieldset:disabled > .navds-fieldset__description {
+  opacity: 0.3;
+}
+
+@media (forced-colors: active) {
+  .navds-fieldset:disabled > .navds-fieldset__legend,
+  .navds-fieldset:disabled > .navds-fieldset__description {
+    opacity: 1;
+  }
+}

@navikt/core/css/darkside/form/file-upload.darkside.css

@@ -0,0 +1,225 @@
+/* --------------------------- FileUpload Dropzone -------------------------- */
+.navds-dropzone__area {
+  --__axc-dropzone-background: var(--ax-bg-input);
+  --__axc-dropzone-icon-padding: var(--ax-spacing-2);
+  --__axc-dropzone-animation-length-long: 400ms;
+  --__axc-dropzone-animation-length-short: 250ms;
+  --__axc-dropzone-animation-ease-out: cubic-bezier(0.3, 1, 0.3, 1);
+  --__axc-dropzone-animation-over-under: cubic-bezier(0.3, 1, 0.3, 1);
+
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: var(--ax-spacing-4);
+  text-align: center;
+  padding: var(--ax-spacing-4) var(--ax-spacing-5);
+  border: 1px dashed var(--ax-border-default);
+  border-radius: var(--ax-border-radius-xlarge);
+  background-color: var(--__axc-dropzone-background);
+  color: var(--ax-text-default);
+  transition: background-color var(--__axc-dropzone-animation-length-short) var(--__axc-dropzone-animation-ease-out);
+  cursor: pointer;
+
+  &:hover:not([data-disabled="true"]) {
+    border-color: var(--ax-border-accent-strong);
+
+    & > .navds-dropzone__area-button {
+      color: var(--ax-text-accent-strong);
+      background-color: var(--ax-bg-accent-moderate-hover);
+      box-shadow: inset 0 0 0 2px var(--ax-bg-accent-strong-hover);
+    }
+  }
+
+  &:active .navds-dropzone__area-button {
+    background-color: var(--ax-bg-accent-strong-pressed);
+    color: var(--ax-text-accent-contrast);
+    box-shadow: none;
+  }
+
+  &[data-disabled="true"] {
+    cursor: default;
+  }
+}
+
+.navds-dropzone--dragging {
+  & > .navds-dropzone__area {
+    --__axc-dropzone-background: var(--ax-bg-input);
+  }
+
+  & > .navds-dropzone__area::after {
+    color: var(--ax-text-accent-strong);
+    background-color: var(--ax-bg-accent-moderateA);
+    content: "";
+    inset: 0;
+    margin: -1px;
+    border: 1px dashed var(--ax-border-accent-strong);
+    position: absolute;
+    -webkit-backdrop-filter: blur(8px);
+    backdrop-filter: blur(8px);
+    border-radius: var(--ax-border-radius-xlarge);
+    animation: akselDropzoneDragoverAnimation var(--__axc-dropzone-animation-length-short)
+      var(--__axc-dropzone-animation-ease-out);
+  }
+}
+
+@keyframes akselDropzoneDragoverAnimation {
+  0% {
+    -webkit-backdrop-filter: blur(0);
+    backdrop-filter: blur(0);
+    background-color: transparent;
+  }
+
+  70% {
+    -webkit-backdrop-filter: blur(8px);
+    backdrop-filter: blur(8px);
+  }
+
+  100% {
+    background-color: var(--ax-bg-accent-moderateA);
+  }
+}
+
+.navds-dropzone__area-icon {
+  display: grid;
+  padding: var(--__axc-dropzone-icon-padding);
+  visibility: hidden;
+}
+
+.navds-dropzone--error > .navds-dropzone__area {
+  border-color: transparent;
+  outline: 2px solid var(--ax-border-danger);
+  outline-offset: -1px;
+}
+
+.navds-dropzone__area-release {
+  top: var(--ax-spacing-4);
+  display: grid;
+  position: absolute;
+  z-index: 1;
+  pointer-events: none;
+  transition:
+    top var(--__axc-dropzone-animation-length-long) var(--__axc-dropzone-animation-over-under),
+    transform var(--__axc-dropzone-animation-length-long) var(--__axc-dropzone-animation-over-under);
+}
+
+.navds-dropzone__area-release__icon {
+  display: grid;
+  padding: var(--__axc-dropzone-icon-padding);
+  border-radius: var(--ax-border-radius-full);
+  background-color: var(--ax-bg-neutral-moderateA);
+  transition:
+    background-color 300ms var(--__axc-dropzone-animation-ease-out),
+    font-size 300ms var(--__axc-dropzone-animation-ease-out);
+  font-size: 1.5rem;
+}
+
+.navds-dropzone--dragging .navds-dropzone__area-release > .navds-dropzone__area-release__icon {
+  background-color: transparent;
+  font-size: 2rem;
+}
+
+.navds-dropzone__area-release__text {
+  visibility: hidden;
+}
+
+.navds-dropzone--dragging .navds-dropzone__area-release > .navds-dropzone__area-release__text {
+  transition: visibility var(--__axc-dropzone-animation-length-long) var(--__axc-dropzone-animation-over-under);
+  visibility: visible;
+}
+
+.navds-dropzone--dragging .navds-dropzone__area-release {
+  color: var(--ax-text-accent-strong);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.navds-dropzone__area-disabled {
+  color: var(--ax-text-subtle);
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: var(--ax-spacing-2);
+}
+
+/* ----------------------------- FileUpload Item ---------------------------- */
+.navds-file-upload :is(ul, li),
+ul:has(> li.navds-file-item),
+li.navds-file-item {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.navds-file-item__inner {
+  background-color: var(--ax-bg-raised);
+  border: 1px solid var(--ax-border-subtleA);
+  outline-offset: -1px;
+  transition: outline-color 250ms cubic-bezier(0, 0.3, 0.15, 1);
+  border-radius: var(--ax-border-radius-xlarge);
+  padding: var(--ax-spacing-3) var(--ax-spacing-4);
+  display: flex;
+  gap: var(--ax-spacing-3);
+  align-items: flex-start;
+}
+
+.navds-file-item--error > .navds-file-item__inner {
+  outline: 2px solid var(--ax-border-danger);
+}
+
+.navds-file-item__icon {
+  background-color: var(--ax-bg-neutral-moderateA);
+  color: var(--ax-text-default);
+  border-radius: var(--ax-border-radius-full);
+  min-height: 2.5rem;
+  min-width: 2.5rem;
+  margin-top: var(--ax-spacing-05);
+  display: grid;
+  place-content: center;
+  transition: background-color 250ms cubic-bezier(0, 0.3, 0.15, 1);
+
+  & > svg {
+    height: 1.5rem;
+    width: 1.5rem;
+  }
+}
+
+.navds-file-item__icon--loading {
+  background-color: transparent;
+}
+
+.navds-file-item__file-info {
+  word-break: break-word;
+}
+
+.navds-file-item__button {
+  margin-left: auto;
+}
+
+.navds-file-item__error {
+  color: var(--ax-text-danger);
+  display: grid;
+  transition-property: grid-template-rows, padding-top;
+  transition-duration: 250ms;
+  transition-timing-function: cubic-bezier(0, 0.3, 0.15, 1);
+  overflow: hidden;
+  grid-template-rows: 0fr;
+
+  & .navds-file-item__error {
+    grid-template-rows: 1fr;
+    padding-top: var(--ax-spacing-1);
+  }
+}
+
+.navds-file-item__error-content {
+  min-height: 0;
+  display: flex;
+  gap: var(--ax-spacing-1);
+
+  & > svg {
+    flex-shrink: 0;
+    height: 1rem;
+    margin-top: 0.1rem;
+  }
+}

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

@@ -0,0 +1,57 @@
+.navds-form-progress__bar {
+  margin-bottom: var(--ax-spacing-2);
+}
+
+.navds-form-progress__button {
+  &:focus-visible {
+    z-index: 1;
+  }
+
+  &[data-state="open"] {
+    & svg {
+      transform: rotate(-180deg);
+    }
+  }
+}
+
+.navds-form-progress__button[data-state="closed"] .navds-form-progress__btn-txt-hide,
+.navds-form-progress__button[data-state="open"] .navds-form-progress__btn-txt-show {
+  display: none;
+}
+
+.navds-form-progress__collapsible {
+  display: grid;
+  grid-template-rows: 0fr;
+  overflow: hidden;
+  transition: grid-template-rows 250ms cubic-bezier(0.2, 0, 0, 1);
+
+  &[hidden] {
+    display: grid !important;
+  }
+
+  &[data-state="open"] {
+    grid-template-rows: 1fr;
+  }
+}
+
+.navds-form-progress__collapsible-content {
+  min-height: 0;
+  opacity: 0.01;
+  visibility: hidden;
+  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
+  transition-duration: 250ms;
+  transition-property: opacity, visibility;
+}
+
+.navds-form-progress__collapsible[data-state="open"] .navds-form-progress__collapsible-content {
+  visibility: visible;
+  opacity: 1;
+}
+
+.navds-form-progress__stepper {
+  border: 1px solid var(--ax-border-subtle);
+  border-radius: var(--ax-border-radius-large);
+  padding: var(--ax-spacing-4) var(--ax-spacing-5);
+  margin-top: var(--ax-spacing-1);
+  background: var(--ax-bg-raised);
+}

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

@@ -0,0 +1,83 @@
+.navds-form-summary {
+  overflow: hidden;
+  border: 1px solid var(--ax-border-neutral-subtleA);
+  border-radius: var(--ax-border-radius-xlarge);
+  background: var(--ax-bg-raised);
+}
+
+.navds-form-summary__header {
+  background: var(--ax-bg-neutral-moderateA);
+  padding: var(--ax-spacing-4) var(--ax-spacing-6);
+  display: flex;
+  justify-content: space-between;
+  gap: 0 var(--ax-spacing-3);
+}
+
+@media (max-width: 479px) {
+  .navds-form-summary__header {
+    padding: var(--ax-spacing-3) var(--ax-spacing-4);
+    flex-direction: column;
+  }
+}
+
+.navds-form-summary__edit {
+  flex-shrink: 0;
+  margin-top: var(--ax-spacing-1);
+  align-self: flex-start;
+}
+
+.navds-form-summary > .navds-form-summary__answers {
+  border-top: 1px solid var(--ax-border-subtleA);
+}
+
+.navds-form-summary__answers {
+  padding: var(--ax-spacing-4) var(--ax-spacing-5);
+  margin: 0;
+}
+
+@media (max-width: 479px) {
+  .navds-form-summary__answers {
+    padding: var(--ax-spacing-4);
+  }
+}
+
+.navds-form-summary__answer:not(:last-child) {
+  margin-bottom: var(--ax-spacing-4);
+  padding-bottom: var(--ax-spacing-4);
+  border-bottom: 1px solid var(--ax-border-subtleA);
+}
+
+.navds-form-summary__answer:has(.navds-form-summary__answer) {
+  padding-bottom: var(--ax-spacing-6);
+}
+
+.navds-form-summary__answer:has(.navds-form-summary__answer):last-child {
+  padding-bottom: 0;
+}
+
+@media (max-width: 479px) {
+  .navds-form-summary__answer:not(:last-child) {
+    margin-bottom: var(--ax-spacing-3);
+    padding-bottom: var(--ax-spacing-3);
+  }
+
+  .navds-form-summary__answer:has(.navds-form-summary__answer) {
+    padding-bottom: var(--ax-spacing-5);
+  }
+}
+
+.navds-form-summary__value:first-of-type {
+  margin-top: var(--ax-spacing-1);
+}
+
+.navds-form-summary__value .navds-form-summary__answers {
+  margin-top: var(--ax-spacing-2);
+  padding: var(--ax-spacing-4) var(--ax-spacing-5);
+  background: var(--ax-bg-info-moderateA);
+  border-radius: var(--ax-border-radius-large);
+  border: 1px solid var(--ax-border-info-subtleA);
+
+  & .navds-form-summary__answer {
+    border-color: var(--ax-border-info-subtleA);
+  }
+}

@navikt/core/css/darkside/form/form.darkside.css

@@ -0,0 +1,53 @@
+.navds-form-field {
+  display: grid;
+  justify-items: start;
+  gap: var(--ax-spacing-2);
+}
+
+.navds-form-field__description {
+  margin-top: -0.375rem;
+  color: var(--ax-text-subtle);
+}
+
+.navds-form-field .navds-error-message,
+.navds-fieldset .navds-error-message,
+.navds-file-item .navds-error-message {
+  display: flex;
+  gap: var(--ax-spacing-2);
+}
+
+.navds-form-field .navds-error-message::before,
+.navds-fieldset .navds-error-message::before,
+.navds-file-item .navds-error-message::before {
+  content: "•";
+}
+
+.navds-form-field--disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.navds-form-field__error:empty {
+  display: none;
+}
+
+.navds-form-field__subdescription {
+  color: var(--ax-text-subtle);
+}
+
+.navds-form-field--readonly > :where(.navds-form-field__label) {
+  display: inline-flex;
+}
+
+.navds-form-field__readonly-icon {
+  margin-top: var(--ax-spacing-05);
+  margin-right: var(--ax-spacing-2);
+  flex-shrink: 0;
+  align-self: flex-start;
+}
+
+@media (forced-colors: active) {
+  .navds-form-field--disabled {
+    opacity: 1;
+  }
+}

@navikt/core/css/darkside/form/index.css

@@ -0,0 +1,14 @@
+@import "./fieldset.darkside.css";
+@import "./file-upload.darkside.css";
+@import "./form.darkside.css";
+@import "./error-summary.darkside.css";
+@import "./confirmation-panel.darkside.css";
+@import "./radio-checkbox.darkside.css";
+@import "./select.darkside.css";
+@import "./switch.darkside.css";
+@import "./text-field.darkside.css";
+@import "./textarea.darkside.css";
+@import "./search.darkside.css";
+@import "./combobox.darkside.css";
+@import "./form-summary.darkside.css";
+@import "./form-progress.darkside.css";

@navikt/core/css/darkside/form/radio-checkbox.darkside.css

@@ -0,0 +1,287 @@
+.navds-checkbox,
+.navds-radio {
+  position: relative;
+  width: fit-content;
+}
+
+.navds-checkbox__input,
+.navds-radio__input {
+  position: absolute;
+  width: 3rem;
+  height: 3rem;
+  top: 0;
+  left: -0.75rem;
+  z-index: 1;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.navds-checkbox__label,
+.navds-radio__label {
+  padding: var(--ax-spacing-3) 0;
+  cursor: pointer;
+  display: flex;
+  gap: var(--ax-spacing-2);
+
+  --__axc-radio-checkbox-readonly-bg: var(--ax-bg-neutral-moderate);
+  --__axc-radio-checkbox-readonly-border: var(--ax-border-subtle);
+}
+
+.navds-checkbox__label::before,
+.navds-radio__label::before {
+  content: "";
+  border-radius: var(--ax-border-radius-medium);
+  background-color: var(--ax-bg-input);
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 2px solid var(--ax-border-default);
+}
+
+.navds-radio__label::before {
+  border-radius: var(--ax-border-radius-full);
+}
+
+.navds-checkbox__content,
+.navds-radio__content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.navds-checkbox--small > .navds-checkbox__input,
+.navds-radio--small > .navds-radio__input {
+  width: 2rem;
+  height: 2rem;
+  top: 0;
+  left: -0.375rem;
+}
+
+.navds-checkbox--small > .navds-checkbox__label,
+.navds-radio--small > .navds-radio__label {
+  padding: var(--ax-spacing-1-alt) 0;
+}
+
+.navds-checkbox--small > .navds-checkbox__label::before,
+.navds-radio--small > .navds-radio__label::before {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.navds-checkbox__input:focus + .navds-checkbox__label::before,
+.navds-radio__input:focus + .navds-radio__label::before {
+  outline: 2px solid var(--ax-border-focus);
+  outline-offset: 2px;
+}
+
+.navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  transform: translate(var(--ax-spacing-1-alt), -50%);
+  background-color: var(--ax-bg-default);
+  width: 0.75rem;
+  height: 0.25rem;
+  border-radius: 1px;
+  flex-shrink: 0;
+}
+
+.navds-checkbox--small .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+  transform: translate(0.25rem, -50%);
+}
+
+.navds-checkbox__input:where(:checked, :indeterminate) + .navds-checkbox__label::before {
+  background-color: var(--ax-bg-accent-strong-pressed);
+  border-color: var(--ax-bg-accent-strong-pressed);
+}
+
+.navds-checkbox__input:where(:checked, :indeterminate):not(:disabled):hover + .navds-checkbox__label::before {
+  border-color: var(--ax-bg-accent-strong-hover);
+  background-color: var(--ax-bg-accent-strong-hover);
+}
+
+.navds-checkbox__input:where(:not(:checked)) + .navds-checkbox__label > .navds-checkbox__icon {
+  display: none;
+}
+
+.navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
+  color: var(--ax-bg-default);
+  position: absolute;
+  height: 1.5rem;
+  transform: translate(var(--ax-spacing-1-alt));
+  pointer-events: none;
+
+  /* Fixed edcase where when using in shadow-dom, svg will not center */
+  display: flex;
+  align-items: center;
+}
+
+.navds-checkbox--small .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
+  transform: translate(0.25rem, -10%);
+}
+
+/* Tailwind sets all svg to block */
+.navds-checkbox__icon > svg {
+  display: inline;
+  vertical-align: initial;
+}
+
+.navds-checkbox--small > .navds-checkbox__input:checked + .navds-checkbox__label::before {
+  background-position: 0.25rem center;
+}
+
+.navds-radio__input:checked + .navds-radio__label::before {
+  background-color: var(--ax-bg-input);
+  border: 8px solid var(--ax-bg-accent-strong-pressed);
+}
+
+.navds-radio--small > .navds-radio__input:checked + .navds-radio__label::before {
+  border-width: 6px;
+}
+
+.navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
+.navds-radio__input:hover:not(:disabled) + .navds-radio__label {
+  color: var(--ax-text-accent-strong);
+}
+
+.navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
+.navds-radio__input:hover:not(:disabled, :checked) + .navds-radio__label::before {
+  border-color: var(--ax-border-accent-strong);
+  background-color: var(--ax-bg-accent-moderate-hoverA);
+}
+
+.navds-checkbox--error > .navds-checkbox__input:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
+.navds-radio--error > .navds-radio__input:not(:disabled, :checked) + .navds-radio__label::before {
+  border-color: var(--ax-border-danger);
+}
+
+.navds-checkbox--error > .navds-checkbox__input:not(:disabled, :checked, :indeterminate):hover + .navds-checkbox__label::before,
+.navds-radio--error > .navds-radio__input:not(:disabled, :checked):hover + .navds-radio__label::before {
+  background-color: var(--ax-bg-danger-moderate-hoverA);
+  border-color: var(--ax-border-danger-strong);
+}
+
+.navds-checkbox--error > .navds-checkbox__input:is(:checked, :indeterminate):not(:disabled) + .navds-checkbox__label::before {
+  background-color: var(--ax-bg-danger-strong-pressed);
+  border-color: var(--ax-bg-danger-strong-pressed);
+}
+
+.navds-radio--error > .navds-radio__input:checked + .navds-radio__label::before {
+  border-color: var(--ax-bg-danger-strong-pressed);
+}
+
+.navds-checkbox--disabled,
+.navds-radio--disabled {
+  opacity: 0.3;
+}
+
+.navds-checkbox--disabled > .navds-checkbox__input,
+.navds-checkbox--disabled > .navds-checkbox__label,
+.navds-radio--disabled > .navds-radio__input,
+.navds-radio--disabled > .navds-radio__label {
+  cursor: not-allowed;
+}
+
+/* Readonly */
+.navds-checkbox--readonly > :where(.navds-checkbox__input, .navds-checkbox__label),
+.navds-radio--readonly > :where(.navds-radio__input, .navds-radio__label) {
+  cursor: default;
+}
+
+.navds-checkbox--readonly .navds-checkbox__label-text {
+  display: inline-flex;
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:hover + .navds-checkbox__label,
+.navds-radio--readonly > .navds-radio__input:hover + .navds-radio__label {
+  color: var(--ax-text-default);
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:not(:disabled) + .navds-checkbox__label::before,
+.navds-checkbox--readonly > .navds-checkbox__input:hover .navds-checkbox__label::before,
+.navds-radio--readonly > .navds-radio__input:not(:disabled, :checked) + .navds-radio__label::before,
+.navds-radio--readonly > .navds-radio__input:hover:not(:checked, :focus) + .navds-radio__label::before {
+  background-color: var(--__axc-radio-checkbox-readonly-bg);
+  border-color: var(--__axc-radio-checkbox-readonly-border);
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:where(:checked, :indeterminate) + .navds-checkbox__label::before {
+  border-color: var(--__axc-radio-checkbox-readonly-border);
+  background-color: var(--__axc-radio-checkbox-readonly-bg);
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
+  color: var(--ax-text-subtle);
+}
+
+.navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
+  background-color: var(--ax-bg-neutral-strong);
+  border-width: 0;
+  box-shadow:
+    inset 0 0 0 2px var(--ax-border-subtle),
+    inset 0 0 0 8px var(--ax-bg-neutral-moderate);
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+  background-color: var(--ax-text-subtle);
+}
+
+@media (forced-colors: active) {
+  .navds-checkbox,
+  .navds-radio {
+    --__axc-radio-checkbox-high-contrast-bg: field;
+    --__axc-radio-checkbox-high-contrast-text: fieldtext;
+    --__axc-radio-checkbox-high-contrast-highlight: highlight;
+
+    /* TODO: Consider adding this to global scope */
+    --ax-border-focus: Highlight;
+  }
+
+  .navds-checkbox__label::before,
+  .navds-radio__label::before {
+    border: 1px solid var(--__axc-radio-checkbox-high-contrast-text);
+    background-color: var(--__axc-radio-checkbox-high-contrast-bg);
+  }
+
+  .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
+    color: var(--__axc-radio-checkbox-high-contrast-text);
+  }
+
+  .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+    background-color: var(--__axc-radio-checkbox-high-contrast-text);
+  }
+
+  .navds-radio__input:checked + .navds-radio__label::before {
+    border: 6px solid var(--__axc-radio-checkbox-high-contrast-text);
+  }
+
+  :not(.navds-checkbox--readonly) > .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
+  :not(.navds-radio--readonly) > .navds-radio__input:hover:not(:disabled) + .navds-radio__label {
+    color: highlight;
+  }
+
+  .navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label::before {
+    border: 1px solid var(--__axc-radio-checkbox-high-contrast-text);
+    background-color: var(--__axc-radio-checkbox-high-contrast-bg);
+  }
+
+  .navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+    background-color: var(--__axc-radio-checkbox-high-contrast-text);
+  }
+
+  .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
+    border-width: 6px;
+  }
+
+  .navds-checkbox--disabled,
+  .navds-radio--disabled {
+    opacity: 1;
+
+    --__axc-radio-checkbox-high-contrast-bg: field;
+    --__axc-radio-checkbox-high-contrast-text: graytext;
+  }
+
+  :is(.navds-checkbox--disabled, .navds-radio--disabled) :is(.navds-checkbox__label, .navds-radio__label) {
+    color: graytext;
+  }
+}

@navikt/core/css/darkside/form/search.darkside.css

@@ -0,0 +1,150 @@
+.navds-search {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.navds-search__wrapper-inner {
+  position: relative;
+  width: 100%;
+}
+
+.navds-search--with-size {
+  & .navds-search__wrapper-inner {
+    width: inherit;
+  }
+
+  & .navds-search__wrapper {
+    width: fit-content;
+  }
+}
+
+.navds-search__wrapper {
+  display: inline-flex;
+  align-items: center;
+  border-radius: var(--ax-border-radius-medium);
+
+  /* We have to outline the whole container to include the Search-buttons */
+  &:has(.navds-search__input:focus-visible) {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+  }
+}
+
+/* ------------------------------ Search input ------------------------------ */
+.navds-search__input {
+  padding-right: var(--ax-spacing-10);
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  &.navds-search__input--primary,
+  &.navds-search__input--secondary {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-right: none;
+  }
+}
+
+.navds-search__input--simple {
+  padding-left: var(--ax-spacing-10);
+}
+
+/* ------------------------------ Search sizing ----------------------------- */
+.navds-form-field--small {
+  & .navds-search__input {
+    padding-right: var(--ax-spacing-7);
+  }
+
+  & .navds-search__input--simple {
+    padding-left: var(--ax-spacing-7);
+  }
+
+  & .navds-search__search-icon {
+    left: var(--ax-spacing-1);
+    font-size: 1.25rem;
+  }
+
+  & .navds-search__button-clear {
+    right: var(--ax-spacing-1);
+  }
+}
+
+/* ------------------------------- Search icon ------------------------------ */
+.navds-search__search-icon {
+  position: absolute;
+  left: var(--ax-spacing-2);
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  font-size: 1.5rem;
+
+  .navds-search--disabled & {
+    opacity: 0.3;
+  }
+}
+
+/* --------------------------- Search Clear-button -------------------------- */
+.navds-search__button-clear {
+  position: absolute;
+  right: var(--ax-spacing-2);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* ------------------------------ Search Button ----------------------------- */
+.navds-search__button-search {
+  flex-shrink: 0;
+  border-radius: 0;
+  border-top-right-radius: var(--ax-border-radius-medium);
+  border-bottom-right-radius: var(--ax-border-radius-medium);
+}
+
+.navds-search__button-search.navds-button--secondary {
+  --__axc-button-border-width: 1px;
+  --__axc-button-border-color: var(--ax-border-default);
+
+  &:hover:not(:disabled) {
+    --__axc-button-border-color: var(--ax-border-accent-strong);
+  }
+
+  &:active:not(:disabled) {
+    --__axc-button-border-color: transparent;
+  }
+}
+
+/* Special-case where we hover/focus input, and want the secondary-button to match input-border */
+.navds-search:not(.navds-search--error, .navds-search--disabled)
+  .navds-search__wrapper:has(.navds-search__input:is(:hover, :focus-visible))
+  .navds-search__button-search.navds-button--secondary:not(:hover, :active) {
+  --__axc-button-border-color: var(--ax-border-accent-strong);
+}
+
+/* --------------------------- Search Error-state --------------------------- */
+.navds-search--error .navds-search__input:not(:disabled) {
+  border-color: var(--ax-border-danger);
+  box-shadow:
+    inset -2px 0 0 0 var(--ax-border-danger),
+    inset 0 0 0 1px var(--ax-border-danger);
+
+  &.navds-search__input--simple {
+    box-shadow: inset 0 0 0 1px var(--ax-border-danger);
+  }
+}
+
+/* -------------------------- Search Focus layering ------------------------- */
+.navds-search__input:focus-visible,
+.navds-search__button-search:focus-visible {
+  z-index: 1;
+}
+
+/* -------------------------- Search disabled state ------------------------- */
+
+/* We can't re-use disabled-state for form-fields since opacity multiplies on search-button */
+.navds-search--disabled {
+  .navds-search__input {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+}

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

@@ -0,0 +1,121 @@
+.navds-select__input {
+  appearance: none;
+  background-color: var(--ax-bg-input);
+  border-radius: var(--ax-border-radius-medium);
+  border: 1px solid var(--ax-border-default);
+  color: var(--ax-text-default);
+  width: 100%;
+  box-sizing: border-box;
+  min-height: 3rem;
+  display: inline-block;
+  position: relative;
+  padding: var(--ax-spacing-2);
+  padding-right: var(--ax-spacing-10);
+
+  &:hover {
+    border-color: var(--ax-border-accent-strong);
+    cursor: pointer;
+  }
+
+  &:focus {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+    border-color: var(--ax-border-accent-strong);
+  }
+
+  @media (forced-colors: active) {
+    & {
+      background-color: ButtonFace;
+      border-color: ButtonText;
+      color: ButtonText;
+    }
+  }
+}
+
+.navds-select__container {
+  position: relative;
+  display: flex;
+  width: 100%;
+  color: var(--ax-text-default);
+}
+
+/* ------------------------------- Select Icon ------------------------------ */
+.navds-select__chevron {
+  position: absolute;
+  font-size: 1.5rem;
+  right: var(--ax-spacing-2);
+  pointer-events: none;
+  align-self: center;
+  color: var(--ax-text-default);
+
+  @media (forced-colors: active) {
+    & {
+      color: ButtonText;
+    }
+  }
+}
+
+/* ------------------------------ Select Sizing ----------------------------- */
+.navds-form-field--small {
+  & .navds-select__input {
+    min-height: 2rem;
+    padding-block: 0;
+  }
+}
+
+/* --------------------------- Select Error-state --------------------------- */
+.navds-select--error {
+  > * select {
+    box-shadow: 0 0 0 1px var(--ax-border-danger);
+    border-color: var(--ax-border-danger);
+  }
+
+  > * select:hover,
+  > * select:focus {
+    box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
+    border-color: var(--ax-border-danger-strong);
+  }
+}
+
+/* ----------------------------- Select disabled ---------------------------- */
+.navds-select__input:disabled {
+  background-color: var(--ax-bg-input);
+  border: 1px solid var(--ax-border-default);
+  box-shadow: none;
+  cursor: not-allowed;
+
+  /* Chrome-fix */
+  opacity: 1;
+  color: var(--ax-text-default);
+
+  & > option {
+    color: var(--ax-text-default);
+  }
+
+  @media (forced-colors: active) {
+    & + .navds-select__chevron {
+      color: GrayText;
+    }
+  }
+}
+
+/* ----------------------------- Select Readonly ---------------------------- */
+.navds-select--readonly {
+  & .navds-select__input {
+    background-color: var(--ax-bg-neutral-moderate);
+    border-color: var(--ax-border-neutral-subtleA);
+    cursor: default;
+
+    @media (forced-colors: active) {
+      &:is(:hover, :focus) {
+        background-color: ButtonFace;
+        border-color: ButtonText;
+        color: ButtonText;
+      }
+    }
+  }
+
+  & .navds-select__chevron {
+    color: var(--ax-text-subtle);
+  }
+}

@navikt/core/css/darkside/form/switch.darkside.css

@@ -0,0 +1,262 @@
+.navds-switch {
+  position: relative;
+  min-height: 3rem;
+  width: fit-content;
+}
+
+.navds-switch--small {
+  min-height: 2rem;
+}
+
+/* ------------------------------ Switch Input ------------------------------ */
+.navds-switch__input {
+  cursor: pointer;
+  position: absolute;
+  z-index: 1;
+  width: 3rem;
+  height: 3rem;
+  opacity: 0;
+  top: 0;
+
+  .navds-switch--small > & {
+    height: 2rem;
+    top: 0;
+  }
+}
+
+/* -------------------------- Switch content/label -------------------------- */
+.navds-switch__label-wrapper {
+  cursor: pointer;
+  color: var(--ax-text-default);
+}
+
+.navds-switch__content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  padding: 0.75rem 0 0.75rem 3.25rem;
+
+  .navds-switch--right & {
+    padding: 0.75rem 3.25rem 0.75rem 0;
+  }
+
+  .navds-switch--small & {
+    padding: calc(var(--ax-spacing-2) - var(--ax-spacing-05)) 0 calc(var(--ax-spacing-2) - var(--ax-spacing-05)) 3.25rem;
+  }
+
+  .navds-switch--right.navds-switch--small & {
+    padding: calc(var(--ax-spacing-2) - var(--ax-spacing-05)) 3.25rem calc(var(--ax-spacing-2) - var(--ax-spacing-05)) 0;
+  }
+}
+
+.navds-switch--with-description {
+  padding-bottom: 0;
+}
+
+.navds-switch__input:hover ~ .navds-switch__label-wrapper,
+.navds-switch__label-wrapper:hover {
+  color: var(--ax-text-accent-strong);
+}
+
+.navds-switch__input:disabled:hover ~ .navds-switch__label-wrapper {
+  color: inherit;
+}
+
+/* ------------------------------ Switch Track ------------------------------ */
+.navds-switch__track {
+  width: 2.75rem;
+  height: 1.5rem;
+  background-color: var(--ax-bg-input);
+  position: absolute;
+  top: var(--ax-spacing-3);
+  left: 0;
+  border-radius: var(--ax-border-radius-full);
+  border: 2px solid var(--ax-border-default);
+  transition-property: background-color, border-color;
+  transition-duration: 100ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+  .navds-switch--small > & {
+    top: var(--ax-spacing-1);
+  }
+
+  .navds-switch__input:checked ~ & {
+    background-color: var(--ax-bg-accent-strong-pressed);
+    border-color: var(--ax-bg-accent-strong-pressed);
+  }
+
+  .navds-switch__input:hover:checked ~ & {
+    background-color: var(--ax-bg-accent-strong-hover);
+    border-color: var(--ax-bg-accent-strong-hover);
+  }
+
+  .navds-switch__input:disabled ~ & {
+    background-color: var(--ax-bg-input);
+    border-color: var(--ax-border-default);
+  }
+
+  .navds-switch__input:checked:disabled ~ & {
+    background-color: var(--ax-bg-accent-strong-pressed);
+    border-color: var(--ax-bg-accent-strong-pressed);
+  }
+
+  .navds-switch__input:focus-visible ~ & {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+  }
+}
+
+/* ------------------------------ Switch Thumb ------------------------------ */
+.navds-switch__thumb {
+  background-color: var(--ax-bg-neutral-strong);
+  border-radius: var(--ax-border-radius-full);
+  width: 1.125rem;
+  height: 1.125rem;
+  position: absolute;
+  transform: translateX(0);
+  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  left: 0.0625rem;
+  top: 0.0625rem;
+
+  .navds-switch__input:checked ~ .navds-switch__track > & {
+    background-color: var(--ax-bg-raised);
+    transform: translateX(1.25rem);
+    color: var(--ax-text-accent-strong);
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0;
+    top: 0;
+  }
+
+  .navds-switch__input:checked ~ .navds-switch__track > & > .navds-switch__checkmark {
+    visibility: visible;
+    opacity: 1;
+  }
+}
+
+.navds-switch__checkmark {
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .navds-switch__input:hover:not(:disabled) ~ .navds-switch__track > .navds-switch__thumb {
+    transform: translateX(0.0625rem);
+  }
+
+  .navds-switch__input:checked:hover:not(:disabled) ~ .navds-switch__track > .navds-switch__thumb {
+    transform: translateX(1.19rem);
+  }
+}
+
+.navds-switch--right {
+  width: auto;
+
+  & .navds-switch__input,
+  & .navds-switch__track {
+    right: 0;
+    left: auto;
+  }
+}
+
+/* -------------------------- Switch Disabled-state ------------------------- */
+.navds-switch__input:disabled {
+  appearance: none;
+}
+
+.navds-switch--disabled:not(.navds-switch--loading) {
+  opacity: 0.3;
+}
+
+.navds-switch__input:disabled,
+.navds-switch__input:disabled ~ .navds-switch__label-wrapper {
+  cursor: not-allowed;
+}
+
+/* -------------------------- Switch Readonly state ------------------------- */
+.navds-switch--readonly {
+  & > .navds-switch__track,
+  & > .navds-switch__input:hover ~ .navds-switch__track,
+  & > .navds-switch__input:checked ~ .navds-switch__track,
+  & > .navds-switch__input:checked:hover ~ .navds-switch__track {
+    background-color: var(--ax-bg-neutral-moderate);
+    border-color: var(--ax-border-neutral-subtleA);
+  }
+
+  & > .navds-switch__label-wrapper,
+  & > .navds-switch__input {
+    cursor: default;
+  }
+
+  & > .navds-switch__input:hover ~ .navds-switch__label-wrapper,
+  & .navds-switch__label-wrapper:hover {
+    color: var(--ax-text-default);
+  }
+
+  & .navds-switch__label {
+    display: inline-flex;
+  }
+
+  & .navds-switch__thumb {
+    background-color: var(--ax-bg-neutral-strong);
+  }
+
+  & > .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+    background-color: var(--ax-bg-neutral-strong);
+    color: var(--ax-text-neutral-contrast);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    & > .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
+      transform: translateX(0);
+    }
+
+    & > .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
+      transform: translateX(1.25rem);
+    }
+  }
+}
+
+/* ------------------------ Switch Forced colors mode ----------------------- */
+@media (forced-colors: active) {
+  .navds-switch__input:hover ~ .navds-switch__label-wrapper,
+  .navds-switch__label-wrapper:hover {
+    color: highlight;
+  }
+
+  .navds-switch__thumb,
+  .navds-switch--readonly .navds-switch__thumb {
+    background-color: fieldtext !important;
+  }
+
+  .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb,
+  .navds-switch--readonly .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+    color: field;
+  }
+
+  .navds-switch__input:focus-visible ~ .navds-switch__track {
+    outline: 2px solid highlight;
+    outline-offset: 2px;
+  }
+
+  .navds-switch--disabled:not(.navds-switch--loading) {
+    opacity: 1;
+  }
+
+  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__thumb {
+    background-color: graytext;
+  }
+
+  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__track {
+    border-color: graytext !important;
+  }
+
+  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__label-wrapper,
+  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__label-wrapper:hover {
+    color: graytext !important;
+  }
+}

@navikt/core/css/darkside/form/text-field.darkside.css

@@ -0,0 +1,69 @@
+.navds-text-field__input {
+  appearance: none;
+  padding: var(--ax-spacing-2);
+  background: var(--ax-bg-input);
+  border-radius: var(--ax-border-radius-medium);
+  border: 1px solid var(--ax-border-default);
+  min-height: 3rem;
+  width: 100%;
+  color: var(--ax-text-default);
+
+  &:hover {
+    border-color: var(--ax-border-accent-strong);
+  }
+
+  &:focus-visible {
+    border-color: var(--ax-border-accent-strong);
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    background-color: var(--ax-bg-input);
+    border-color: var(--ax-border-default);
+    cursor: not-allowed;
+  }
+
+  &::placeholder {
+    color: var(--ax-text-neutral);
+  }
+
+  &[size] {
+    width: auto;
+  }
+}
+
+.navds-form-field--small .navds-text-field__input {
+  padding: 0 var(--ax-spacing-2);
+  min-height: 2rem;
+}
+
+.navds-text-field--error .navds-text-field__input:not(:disabled) {
+  border-color: var(--ax-border-danger);
+  box-shadow: 0 0 0 1px var(--ax-border-danger);
+}
+
+.navds-text-field--readonly .navds-text-field__input {
+  background-color: var(--ax-bg-neutral-moderate);
+  border-color: var(--ax-border-neutral-subtleA);
+  cursor: default;
+}
+
+/**
+  * Removes default search icon
+  */
+.navds-text-field__input[type="search"] {
+  &::-webkit-search-decoration,
+  &::-webkit-search-cancel-button,
+  &::-webkit-search-results-button,
+  &::-webkit-search-results-decoration {
+    -webkit-appearance: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .navds-text-field__input {
+    background-color: field;
+    color: fieldtext;
+  }
+}

@navikt/core/css/darkside/form/textarea.darkside.css

@@ -0,0 +1,102 @@
+.navds-textarea__input {
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+  height: var(--__axc-textarea-height);
+  appearance: none;
+  padding: var(--ax-spacing-2);
+  background-color: var(--ax-bg-input);
+  border-radius: var(--ax-border-radius-medium);
+  border: 1px solid var(--ax-border-default);
+  resize: none;
+  width: 100%;
+  display: block;
+  color: var(--ax-text-default);
+
+  &::placeholder {
+    color: var(--ax-text-subtle);
+  }
+
+  &:hover {
+    border-color: var(--ax-border-accent-strong);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+    border-color: var(--ax-border-accent-strong);
+  }
+
+  &:disabled {
+    background-color: var(--ax-bg-input);
+    border-color: var(--ax-border-default);
+    cursor: not-allowed;
+  }
+
+  .navds-form-field--small & {
+    padding: var(--ax-spacing-1-alt);
+  }
+
+  .navds-textarea--readonly & {
+    background-color: var(--ax-bg-neutral-moderate);
+    border-color: var(--ax-border-neutral-subtleA);
+    cursor: default;
+  }
+}
+
+.navds-textarea__counter {
+  margin-top: -0.25rem;
+  color: var(--ax-text-subtle);
+}
+
+.navds-textarea__counter--error {
+  color: var(--ax-text-danger);
+}
+
+.navds-textarea__sr-counter {
+  display: none;
+}
+
+.navds-textarea__input:focus ~ .navds-textarea__sr-counter {
+  display: initial;
+}
+
+.navds-textarea--resize-both .navds-textarea__input {
+  resize: both;
+  border-end-end-radius: 0;
+}
+
+.navds-textarea--resize-horizontal .navds-textarea__input {
+  resize: horizontal;
+  border-end-end-radius: 0;
+}
+
+.navds-textarea--resize-vertical .navds-textarea__input {
+  resize: vertical;
+  border-end-end-radius: 0;
+}
+
+.navds-textarea--autoscrollbar,
+.navds-textarea--autoscrollbar .navds-textarea__wrapper {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  /* Makes the box-shadow visible even though overflow is hidden: */
+  padding: 3px;
+  margin: -3px;
+}
+
+.navds-textarea--autoscrollbar .navds-textarea__input {
+  scrollbar-gutter: stable; /* Needed to prevent scrollbar from appearing too early */
+}
+
+.navds-textarea--error .navds-textarea__input:not(:disabled) {
+  box-shadow: 0 0 0 1px var(--ax-border-danger);
+  border-color: var(--ax-border-danger);
+}
+
+@media (forced-colors: active) {
+  .navds-textarea__input {
+    background-color: field;
+    color: fieldtext;
+  }
+}

@navikt/core/css/darkside/guide-panel.darkside.css

@@ -0,0 +1,96 @@
+.navds-guide-panel {
+  --__ac-guide-panel-guide-size: 4rem;
+
+  position: relative;
+  padding-top: calc(var(--__ac-guide-panel-guide-size) / 2);
+}
+
+.navds-guide {
+  background: var(--ac-guide-panel-illustration-bg, var(--a-surface-alt-3-subtle));
+  border: 2px solid var(--ac-guide-panel-border, var(--a-border-alt-3));
+  border-radius: var(--a-border-radius-full);
+  overflow: hidden;
+  position: absolute;
+  width: var(--__ac-guide-panel-guide-size);
+  height: var(--__ac-guide-panel-guide-size);
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.navds-guide svg,
+.navds-guide img {
+  height: 100%;
+  width: 100%;
+}
+
+.navds-guide-panel__content {
+  background-color: var(--ac-guide-panel-bg, var(--a-surface-default));
+  border: 2px solid var(--ac-guide-panel-border, var(--a-border-alt-3));
+  border-radius: var(--a-border-radius-large);
+  padding: var(--a-spacing-4);
+  padding-top: var(--a-spacing-12);
+}
+
+@media (min-width: 480px) {
+  .navds-guide-panel {
+    --__ac-guide-panel-guide-size: 6.25rem;
+  }
+
+  .navds-guide-panel__content {
+    padding: var(--a-spacing-8);
+    padding-top: 4.25rem;
+  }
+}
+
+/* not-poster */
+
+.navds-guide-panel--not-poster {
+  padding-top: 0;
+  padding-left: calc(var(--__ac-guide-panel-guide-size) / 2);
+}
+
+.navds-guide-panel--not-poster .navds-guide {
+  left: 0;
+  top: var(--a-spacing-5);
+  transform: none;
+}
+
+.navds-guide-panel--not-poster .navds-guide-panel__content {
+  padding: var(--a-spacing-4);
+  padding-left: var(--a-spacing-10);
+  min-height: calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5));
+}
+
+@media (min-width: 480px) {
+  .navds-guide-panel--not-poster {
+    --__ac-guide-panel-guide-size: 5rem;
+  }
+
+  .navds-guide-panel--not-poster .navds-guide-panel__content {
+    padding: var(--a-spacing-6);
+    padding-left: var(--a-spacing-14);
+  }
+}
+
+/* responsive-poster (on desktop) */
+
+@media (min-width: 480px) {
+  .navds-guide-panel--responsive-poster {
+    --__ac-guide-panel-guide-size: 5rem;
+
+    padding-top: 0;
+    padding-left: calc(var(--__ac-guide-panel-guide-size) / 2);
+  }
+
+  .navds-guide-panel--responsive-poster .navds-guide {
+    left: 0;
+    top: var(--a-spacing-5);
+    transform: none;
+  }
+
+  .navds-guide-panel--responsive-poster .navds-guide-panel__content {
+    padding: var(--a-spacing-6);
+    padding-left: var(--a-spacing-14);
+    min-height: calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5));
+  }
+}

@navikt/core/css/darkside/help-text.darkside.css

@@ -0,0 +1,55 @@
+.navds-help-text__button {
+  margin: 0;
+  border: 0;
+  cursor: pointer;
+  background-color: transparent;
+  border-radius: var(--ax-border-radius-full);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--ax-bg-accent-strong);
+  font-size: 1.25rem;
+  padding: calc(var(--ax-spacing-1) / 2);
+}
+
+.navds-help-text__icon {
+  border-radius: var(--ax-border-radius-full);
+}
+
+.navds-help-text__popover.navds-popover {
+  background-color: var(--ax-bg-info-moderate);
+  max-width: min(65ch, calc(100vw - var(--ax-spacing-6)));
+  border-radius: var(--ax-border-radius-large);
+  border: 1px solid var(--ax-border-info);
+}
+
+.navds-help-text__icon--filled {
+  display: none;
+}
+
+.navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon {
+  display: none;
+}
+
+.navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon--filled {
+  display: inherit;
+  color: var(--ax-bg-accent-strong-hover);
+}
+
+.navds-help-text__button[aria-expanded="true"] > .navds-help-text__icon--filled {
+  color: var(--ax-bg-accent-strong-pressed);
+}
+
+@media (forced-colors: active) {
+  .navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon {
+    display: inherit;
+  }
+
+  .navds-help-text__button:hover > .navds-help-text__icon {
+    color: highlight;
+  }
+
+  .navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon--filled {
+    display: none;
+  }
+}

@navikt/core/css/darkside/index copy.css

@@ -0,0 +1,37 @@
+@charset "UTF-8";
+
+@import "baseline/index.css";
+@import "typography.css";
+@import "accordion.css";
+@import "alert.css";
+@import "button.css";
+@import "chat.css";
+@import "chips.css";
+@import "copybutton.css";
+@import "dropdown.css";
+@import "action-menu.css";
+@import "expansioncard.css";
+@import "guide-panel.css";
+@import "form/index.css";
+@import "help-text.css";
+@import "internalheader.css";
+@import "link.css";
+@import "loader.css";
+@import "modal.css";
+@import "pagination.css";
+@import "popover.css";
+@import "date.css";
+@import "tag.css";
+@import "timeline.css";
+@import "tooltip.css";
+@import "toggle-group.css";
+@import "panel.css";
+@import "link-panel.css";
+@import "read-more.css";
+@import "progress-bar.css";
+@import "skeleton.css";
+@import "stepper.css";
+@import "table.css";
+@import "tabs.css";
+@import "list.css";
+@import "primitives/index.css";

@navikt/core/css/darkside/index.css

@@ -1,17 +1,61 @@
 @charset "UTF-8";
 
-@layer aksel.reset, aksel.typography, aksel.theme, aksel.components, aksel.utilities;
+/* CSS is ordered by specificity, so that browsers without layers fall backs to good defaults */
+@layer aksel.reset, aksel.typography, aksel.theme, aksel.components, aksel.layout, aksel.utilities;
 
-/* CSS foundations */
+/* ----------------------------- CSS foundations ---------------------------- */
 @import "./baseline/reset.darkside.css" layer(aksel.reset);
 @import "./baseline/print.darkside.css" layer(aksel.reset);
 @import "./baseline/fonts.darkside.css" layer(aksel.typography);
-@import "./baseline/theme.darkside.css" layer(aksel.theme);
 @import "./typography.darkside.css" layer(aksel.typography);
-@import "./baseline/utilities.darkside.css" layer(aksel.utilities);
 
-/* Theming */
+/* --------------------------------- Theming -------------------------------- */
 @import "@navikt/ds-tokens/dist/darkside/tokens.css" layer(aksel.theme);
+@import "./baseline/theme.darkside.css" layer(aksel.theme);
 
-/* Components */
+/* ------------------------------- Components ------------------------------- */
 @import "./button.darkside.css" layer(aksel.components);
+@import "./chips.darkside.css" layer(aksel.components);
+
+/**
+  * `./form/index.css` edits the following components:
+  * - Button
+  * - Chips
+  * To avoid specificity conflicts, we import those components before form.
+*/
+@import "./form/index.css" layer(aksel.components);
+@import "./accordion.darkside.css" layer(aksel.components);
+@import "./alert.darkside.css" layer(aksel.components);
+@import "./chat.darkside.css" layer(aksel.components);
+@import "./copybutton.darkside.css" layer(aksel.components);
+@import "./date.darkside.css" layer(aksel.components);
+@import "./dropdown.darkside.css" layer(aksel.components);
+@import "./action-menu.darkside.css" layer(aksel.components);
+@import "./expansioncard.darkside.css" layer(aksel.components);
+@import "./guide-panel.darkside.css" layer(aksel.components);
+@import "./help-text.darkside.css" layer(aksel.components);
+@import "./internalheader.darkside.css" layer(aksel.components);
+@import "./link.darkside.css" layer(aksel.components);
+@import "./loader.darkside.css" layer(aksel.components);
+@import "./modal.darkside.css" layer(aksel.components);
+@import "./pagination.darkside.css" layer(aksel.components);
+@import "./popover.darkside.css" layer(aksel.components);
+@import "./tag.darkside.css" layer(aksel.components);
+@import "./timeline.darkside.css" layer(aksel.components);
+@import "./tooltip.darkside.css" layer(aksel.components);
+@import "./toggle-group.darkside.css" layer(aksel.components);
+@import "./panel.darkside.css" layer(aksel.components);
+@import "./link-panel.darkside.css" layer(aksel.components);
+@import "./read-more.darkside.css" layer(aksel.components);
+@import "./progress-bar.darkside.css" layer(aksel.components);
+@import "./skeleton.darkside.css" layer(aksel.components);
+@import "./stepper.darkside.css" layer(aksel.components);
+@import "./table.darkside.css" layer(aksel.components);
+@import "./tabs.darkside.css" layer(aksel.components);
+@import "./list.darkside.css" layer(aksel.components);
+
+/* --------------------------------- Layout --------------------------------- */
+@import "./primitives/index.css" layer(aksel.layout);
+
+/* --------------------------------- Utility -------------------------------- */
+@import "./baseline/utilities.darkside.css" layer(aksel.utilities);

@navikt/core/css/darkside/internalheader.darkside.css

@@ -0,0 +1,101 @@
+.navds-internalheader {
+  display: flex;
+  align-self: stretch;
+  background: var(--ax-bg-raised);
+  min-height: 3rem;
+  border-bottom: 1px solid var(--ax-border-subtleA);
+}
+
+@media (forced-colors: active) {
+  .navds-internalheader {
+    background-color: ButtonFace;
+    border: solid 1px ButtonText;
+    color: ButtonText;
+  }
+}
+
+.navds-internalheader__title {
+  border: none;
+  overflow: visible;
+  background: transparent;
+  font: inherit;
+  font-weight: var(--ax-font-weight-bold);
+  line-height: normal;
+  text-align: left;
+  padding-block: 0;
+  padding-inline: var(--ax-spacing-6) var(--ax-spacing-5);
+  border-right: 1px solid var(--ax-border-subtleA);
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  margin: 0;
+  color: var(--ax-text-default);
+
+  &:is(button) {
+    cursor: pointer;
+  }
+
+  &:hover {
+    background: var(--ax-bg-neutral-moderate-hover);
+  }
+
+  &:is(:hover, :active):not(button, a) {
+    background: initial;
+  }
+}
+
+.navds-internalheader__user {
+  padding: 0 var(--ax-spacing-5);
+  border-left: 1px solid var(--ax-border-subtleA);
+  display: flex;
+  align-items: center;
+}
+
+.navds-internalheader__button {
+  border: none;
+  margin: 0;
+  padding: 0 var(--ax-spacing-3);
+  overflow: visible;
+  background: transparent;
+  font: inherit;
+  line-height: normal;
+  cursor: pointer;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  justify-self: center;
+  gap: var(--ax-spacing-2);
+  border-left: 1px solid var(--ax-border-subtleA);
+  color: var(--ax-text-default);
+
+  &:hover {
+    background: var(--ax-bg-neutral-moderate-hover);
+  }
+}
+
+@media (forced-colors: active) {
+  .navds-internalheader__button:hover {
+    background-color: highlighttext;
+    border-color: highlight;
+    color: highlight;
+    outline: 1px solid highlight;
+    isolation: isolate;
+  }
+}
+
+.navds-internalheader__title,
+.navds-internalheader__button {
+  &:focus-visible {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: -3px;
+  }
+
+  &:active {
+    background: var(--ax-bg-neutral-moderate-pressed);
+  }
+}
+
+.navds-internalheader__user-button {
+  padding-left: var(--ax-spacing-5);
+  gap: var(--ax-spacing-4);
+}

@navikt/core/css/darkside/link-panel.darkside.css

@@ -0,0 +1,47 @@
+.navds-link-panel {
+  text-decoration: none;
+  color: var(--ac-link-panel-text, var(--a-text-default));
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--a-spacing-4);
+}
+
+.navds-link-panel:hover .navds-link-panel__title {
+  text-decoration: underline;
+  color: var(--ac-link-panel-hover-text, var(--a-text-action-hover));
+}
+
+.navds-link-panel:hover {
+  box-shadow: var(--a-shadow-small);
+  border-color: var(--ac-link-panel-hover-border, var(--a-border-action-hover));
+}
+
+.navds-link-panel:focus-visible {
+  outline: 3px solid transparent;
+  outline-offset: 2px;
+  box-shadow: var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-link-panel:focus {
+    outline: 3px solid transparent;
+    outline-offset: 2px;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
+.navds-link-panel__chevron {
+  flex-shrink: 0;
+  font-size: 1.5rem;
+  transition: transform 200ms;
+}
+
+.navds-link-panel:hover > .navds-link-panel__chevron,
+.navds-link-panel:focus-within > .navds-link-panel__chevron {
+  transform: translateX(4px);
+}
+
+.navds-link-panel__description {
+  margin-top: var(--a-spacing-1);
+}

@navikt/core/css/darkside/link.darkside.css

@@ -0,0 +1,63 @@
+.navds-link {
+  color: var(--ax-text-accent);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ax-spacing-1);
+  text-decoration: underline;
+  text-underline-offset: 0.1em;
+  text-decoration-thickness: 0.05em;
+
+  &:hover,
+  &:active {
+    text-decoration-thickness: 0.111em;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+  }
+
+  &.navds-link--inline-text {
+    display: inline;
+
+    & > svg {
+      /* stylelint-disable-next-line plugin/declaration-block-no-ignored-properties */
+      margin: 0.1em 0.1em -0.1em;
+      transform: translateY(0.05em);
+      display: inline;
+      vertical-align: baseline;
+    }
+  }
+
+  &.navds-link--remove-underline {
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  & svg {
+    color: inherit;
+    flex-shrink: 0;
+  }
+}
+
+.navds-alert,
+.navds-confirmation-panel {
+  & .navds-link {
+    color: var(--ax-text-default);
+  }
+}
+
+.navds-link--action {
+  color: var(--ax-text-accent);
+}
+
+.navds-link--neutral {
+  color: var(--ax-text-default);
+}
+
+.navds-link--subtle {
+  color: var(--ax-text-subtle);
+}

@navikt/core/css/darkside/list.darkside.css

@@ -0,0 +1,86 @@
+.navds-list ul,
+.navds-list ol {
+  padding: 0;
+  margin-block: var(--ax-spacing-4);
+}
+
+.navds-list--small ul,
+.navds-list--small ol {
+  margin-block: var(--ax-spacing-3);
+}
+
+.navds-list {
+  & .navds-list :where(ul, ol) {
+    margin-block: var(--ax-spacing-2) 0;
+  }
+
+  & ol {
+    list-style: decimal; /* This is the default value, but some frameworks have `ol,ul { list-style:none }` */
+    padding-left: 1.7rem;
+
+    & > .navds-list__item {
+      padding-left: 0.3rem;
+    }
+
+    & li::marker {
+      font-weight: var(--ax-font-weight-bold);
+    }
+  }
+
+  & ul {
+    & > .navds-list__item {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      gap: var(--ax-spacing-2);
+    }
+
+    & > li > .navds-list__item-marker {
+      display: flex;
+      align-items: center;
+      height: var(--ax-font-line-height-xlarge);
+    }
+  }
+}
+
+/* SAFARI HACK START */
+/* stylelint-disable selector-type-no-unknown */
+
+_::-webkit-full-page-media,
+_:future,
+:root .navds-list ol {
+  padding-left: 2.1rem;
+}
+
+_::-webkit-full-page-media,
+_:future,
+:root .navds-list ol .navds-list__item {
+  padding-left: 0;
+}
+
+/* SAFARI HACK END */
+/* stylelint-enable selector-type-no-unknown */
+
+.navds-list__item {
+  margin-block-end: var(--ax-spacing-2);
+
+  &:last-child {
+    margin-block-end: 0;
+  }
+}
+
+.navds-list__item-marker {
+  width: 1.5rem;
+}
+
+.navds-list--small ul > li > .navds-list__item-marker {
+  height: var(--ax-font-line-height-large);
+}
+
+.navds-list__item-marker--bullet {
+  padding-left: 0.8rem;
+}
+
+.navds-list__item-marker--icon {
+  font-size: 1.5rem;
+  justify-content: center;
+}

@navikt/core/css/darkside/loader.darkside.css

@@ -0,0 +1,133 @@
+.navds-loader {
+  width: 1.5rem;
+  display: inline-block;
+  position: relative;
+  animation: loader-rotate 1.8s linear infinite;
+  stroke-width: 6;
+
+  --__axc-loader-stroke-width: 5.9;
+
+  &.navds-loader--3xlarge {
+    width: 5.5rem;
+    stroke-width: 5;
+
+    --__axc-loader-stroke-width: 4.8;
+  }
+
+  &.navds-loader--2xlarge {
+    width: 4rem;
+    stroke-width: 6;
+
+    --__axc-loader-stroke-width: 5.8;
+  }
+
+  &.navds-loader--xlarge {
+    width: 2.5rem;
+    stroke-width: 6;
+
+    --__axc-loader-stroke-width: 5.8;
+  }
+
+  &.navds-loader--large {
+    width: 2rem;
+    stroke-width: 7;
+
+    --__axc-loader-stroke-width: 6.8;
+  }
+
+  &.navds-loader--medium {
+    width: 1.5rem;
+    stroke-width: 7;
+
+    --__axc-loader-stroke-width: 6.8;
+  }
+
+  &.navds-loader--small {
+    width: 1.25rem;
+    stroke-width: 8;
+
+    --__axc-loader-stroke-width: 7.8;
+  }
+
+  &.navds-loader--xsmall {
+    width: 1rem;
+    stroke-width: 8;
+
+    --__axc-loader-stroke-width: 7.8;
+  }
+}
+
+.navds-loader__foreground {
+  animation: loader-dasharray 1.5s ease-in-out infinite;
+  stroke-dasharray: 80px, 200px;
+  stroke-dashoffset: 0;
+  stroke: var(--ax-border-strong);
+  stroke-linecap: round;
+  stroke-width: var(--__axc-loader-stroke-width);
+}
+
+.navds-loader__background {
+  stroke: var(--ax-border-neutral-subtleA);
+  stroke-width: var(--__axc-loader-stroke-width);
+}
+
+.navds-loader--neutral {
+  & .navds-loader__foreground {
+    stroke: var(--ax-border-strong);
+  }
+}
+
+.navds-loader--interaction {
+  & .navds-loader__foreground {
+    stroke: var(--ax-border-accent-strong);
+  }
+
+  & .navds-loader__background {
+    stroke: var(--ax-border-accent-subtleA);
+  }
+}
+
+.navds-loader--inverted {
+  & .navds-loader__foreground {
+    stroke: var(--ax-border-subtle);
+  }
+
+  & .navds-loader__background {
+    stroke: var(--ax-border-strong);
+  }
+}
+
+.navds-loader--transparent {
+  & .navds-loader__background {
+    stroke: transparent;
+  }
+}
+
+@keyframes loader-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes loader-dasharray {
+  0% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -15px;
+  }
+
+  100% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -120px;
+  }
+}
+
+@media (forced-colors: active) {
+  .navds-loader__background {
+    stroke: canvastext;
+  }
+}

@navikt/core/css/darkside/modal.darkside.css

@@ -0,0 +1,211 @@
+.navds-modal__document-body {
+  overflow: hidden;
+}
+
+.navds-modal {
+  --__axc-modal-bg: var(--ax-bg-raised);
+
+  background-color: var(--__axc-modal-bg);
+  border: 1px solid var(--ax-border-subtleA);
+  border-radius: var(--ax-border-radius-xlarge);
+  box-shadow: var(--ax-shadow-dialog);
+  padding: 0;
+  position: fixed;
+  max-height: 100%;
+  max-width: 100%;
+  color: var(--ax-text-default);
+
+  &[open] {
+    display: flex;
+    flex-direction: column;
+    animation: akselModalFadeIn 0.35s cubic-bezier(0.15, 1, 0.3, 1);
+  }
+}
+
+.navds-modal--polyfilled {
+  top: 50%;
+  transform: translate(0, -50%);
+
+  /* From polyfill (dialog-polyfill/dist/dialog-polyfill.css): */
+  left: 0;
+  right: 0;
+  width: fit-content;
+  height: fit-content;
+  margin: auto;
+
+  &:not([open]) {
+    display: none; /* from polyfill */
+  }
+
+  & .navds-modal--polyfilled {
+    overflow: auto;
+  }
+}
+
+._dialog_overlay {
+  /* From polyfill */
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
+  left: 0;
+}
+
+.navds-modal--medium {
+  width: 700px;
+}
+
+.navds-modal--small {
+  width: 450px;
+
+  & .navds-modal__header {
+    padding: var(--ax-spacing-3) var(--ax-spacing-4);
+  }
+
+  & .navds-modal__body {
+    padding: var(--ax-spacing-3) var(--ax-spacing-4);
+  }
+
+  & .navds-modal__footer {
+    padding: var(--ax-spacing-3) var(--ax-spacing-4);
+  }
+}
+
+@media (min-width: 480px) {
+  .navds-modal {
+    max-width: calc(100% - 2em);
+  }
+
+  .navds-modal--autowidth {
+    max-width: min(700px, calc(100% - 2em));
+  }
+}
+
+@media (min-height: 480px) {
+  .navds-modal {
+    max-height: calc(100% - 2em);
+  }
+
+  .navds-modal--top {
+    margin-top: 2em;
+    max-height: calc(100% - 4em);
+  }
+}
+
+.navds-modal::backdrop {
+  /*
+   * Cannot use --ax-bg-overlay because ::backdrop does not inherit from anything but itself.
+   * TODO: Consider adding `::backdrop` to global token definitions.
+   * TODO: Check that overlay-color is correct after the new colors is set in stone.
+   */
+  background: #0214317d;
+  animation: akselModalBackdropFadeIn 0.35s cubic-bezier(0.15, 1, 0.3, 1);
+}
+
+.navds-modal--polyfilled + .backdrop /* Cannot be combined with ::backdrop selector */ {
+  background: #0214317d;
+
+  /* From polyfill: */
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
+  left: 0;
+}
+
+.navds-modal__button {
+  margin-left: var(--ax-spacing-4);
+  float: right;
+}
+
+.navds-modal__header {
+  padding: var(--ax-spacing-4) var(--ax-spacing-5);
+}
+
+.navds-modal__header-icon {
+  & svg {
+    display: inline;
+    vertical-align: -0.25rem;
+    margin-right: var(--ax-spacing-1);
+  }
+}
+
+.navds-modal__label {
+  font-weight: var(--ax-font-weight-bold);
+  color: var(--ax-text-subtle);
+}
+
+.navds-modal__body {
+  padding: var(--ax-spacing-4) var(--ax-spacing-5);
+  overflow: auto;
+  overscroll-behavior: contain;
+  position: relative; /* Needed to make sr-only elements position correctly - see Storybook */
+  background:
+    linear-gradient(var(--__axc-modal-bg) 30%, transparent) top,
+    linear-gradient(transparent, var(--__axc-modal-bg) 60%) bottom,
+    radial-gradient(farthest-side at 50% 0, rgba(0 0 0 / 0.3), transparent) top,
+    radial-gradient(farthest-side at 50% 100%, rgba(0 0 0 / 0.3), transparent) bottom;
+  background-size:
+    100% 40px,
+    100% 50px,
+    100% 16px,
+    100% 16px;
+  background-attachment: local, local, scroll, scroll;
+  background-repeat: no-repeat;
+}
+
+.navds-modal__header + .navds-modal__body {
+  padding-top: var(--ax-spacing-0);
+}
+
+.navds-modal__footer {
+  display: flex;
+  flex-flow: row-reverse wrap;
+  gap: var(--ax-spacing-4);
+  padding: var(--ax-spacing-4) var(--ax-spacing-5);
+}
+
+.navds-modal__footer :nth-of-type(2) {
+  margin-left: auto;
+}
+
+/* When Datepicker is used nested inside a Modal */
+.navds-modal--polyfilled .navds-modal--polyfilled.navds-date__nested-modal {
+  min-width: fit-content;
+  max-width: 100vw;
+  max-height: 100vh;
+  animation: none;
+}
+
+@keyframes akselModalFadeIn {
+  0% {
+    opacity: 0.0001; /* Safari will not set focus inside the modal when it opens if we set this to 0 */
+    transform: translate3d(0, calc(2% + 4px), 0);
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    transform: none;
+  }
+}
+
+@keyframes akselModalBackdropFadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@media (forced-colors: active) {
+  .navds-modal {
+    outline: 2px solid transparent;
+  }
+}

@navikt/core/css/darkside/pagination.darkside.css

@@ -0,0 +1,41 @@
+.navds-pagination {
+  position: relative;
+}
+
+.navds-pagination__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  gap: var(--ax-spacing-3);
+
+  & li {
+    list-style: none;
+    display: flex;
+  }
+}
+
+.navds-pagination__ellipsis {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3rem;
+  cursor: default;
+}
+
+.navds-pagination--small .navds-pagination__ellipsis {
+  width: 2rem;
+}
+
+.navds-pagination--xsmall .navds-pagination__ellipsis {
+  width: 1.5rem;
+}
+
+.navds-pagination__item[data-selected="true"] {
+  background-color: var(--ax-bg-neutral-strong-pressed);
+  color: var(--ax-text-neutral-contrast);
+}
+
+.navds-pagination--invisible {
+  visibility: hidden;
+}

@navikt/core/css/darkside/panel.darkside.css

@@ -0,0 +1,10 @@
+.navds-panel {
+  background-color: var(--ac-panel-bg, var(--a-surface-default));
+  padding: var(--a-spacing-4);
+  border-radius: var(--a-border-radius-small);
+  border: 1px solid transparent;
+}
+
+.navds-panel--border {
+  border-color: var(--ac-panel-border, var(--a-border-default));
+}

@navikt/core/css/darkside/popover.darkside.css

@@ -0,0 +1,18 @@
+.navds-popover {
+  z-index: 1000;
+  background: var(--ax-bg-raised);
+  box-shadow: var(--ax-shadow-dialog);
+  border: 1px solid var(--ax-border-subtleA);
+  border-radius: var(--ax-border-radius-xlarge);
+
+  /* Creates a small gutter between screen-edges on smaller devices */
+  max-width: calc(100vw - var(--ax-spacing-6));
+}
+
+.navds-popover__content {
+  padding: var(--ax-spacing-4) var(--ax-spacing-5);
+}
+
+.navds-popover--hidden {
+  display: none;
+}

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

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

@navikt/core/css/darkside/primitives/bleed.darkside.css

@@ -0,0 +1,103 @@
+.navds-bleed {
+  --__axc-bleed-margin-inline-xs: initial;
+  --__axc-bleed-margin-inline-sm: var(--__axc-bleed-margin-inline-xs);
+  --__axc-bleed-margin-inline-md: var(--__axc-bleed-margin-inline-sm);
+  --__axc-bleed-margin-inline-lg: var(--__axc-bleed-margin-inline-md);
+  --__axc-bleed-margin-inline-xl: var(--__axc-bleed-margin-inline-lg);
+  --__axc-bleed-margin-inline-2xl: var(--__axc-bleed-margin-inline-xl);
+  --__axc-bleed-margin-block-xs: initial;
+  --__axc-bleed-margin-block-sm: var(--__axc-bleed-margin-block-xs);
+  --__axc-bleed-margin-block-md: var(--__axc-bleed-margin-block-sm);
+  --__axc-bleed-margin-block-lg: var(--__axc-bleed-margin-block-md);
+  --__axc-bleed-margin-block-xl: var(--__axc-bleed-margin-block-lg);
+  --__axc-bleed-margin-block-2xl: var(--__axc-bleed-margin-block-xl);
+
+  /** defaults */
+  --__axc-bleed-margin-inline: var(--__axc-bleed-margin-inline-xs);
+  --__axc-bleed-margin-block: var(--__axc-bleed-margin-block-xs);
+
+  margin-inline: var(--__axc-bleed-margin-inline);
+  margin-block: var(--__axc-bleed-margin-block);
+}
+
+.navds-bleed--padding {
+  --__axc-bleed-padding-inline-xs: initial;
+  --__axc-bleed-padding-inline-sm: var(--__axc-bleed-padding-inline-xs);
+  --__axc-bleed-padding-inline-md: var(--__axc-bleed-padding-inline-sm);
+  --__axc-bleed-padding-inline-lg: var(--__axc-bleed-padding-inline-md);
+  --__axc-bleed-padding-inline-xl: var(--__axc-bleed-padding-inline-lg);
+  --__axc-bleed-padding-inline-2xl: var(--__axc-bleed-padding-inline-xl);
+  --__axc-bleed-padding-block-xs: initial;
+  --__axc-bleed-padding-block-sm: var(--__axc-bleed-padding-block-xs);
+  --__axc-bleed-padding-block-md: var(--__axc-bleed-padding-block-sm);
+  --__axc-bleed-padding-block-lg: var(--__axc-bleed-padding-block-md);
+  --__axc-bleed-padding-block-xl: var(--__axc-bleed-padding-block-lg);
+  --__axc-bleed-padding-block-2xl: var(--__axc-bleed-padding-block-xl);
+
+  /** defaults */
+  --__axc-bleed-padding-inline: var(--__axc-bleed-padding-inline-xs);
+  --__axc-bleed-padding-block: var(--__axc-bleed-padding-block-xs);
+
+  padding-inline: var(--__axc-bleed-padding-inline);
+  padding-block: var(--__axc-bleed-padding-block);
+}
+
+@media (min-width: 480px) {
+  .navds-bleed {
+    --__axc-bleed-margin-inline: var(--__axc-bleed-margin-inline-sm);
+    --__axc-bleed-margin-block: var(--__axc-bleed-margin-block-sm);
+  }
+
+  .navds-bleed--padding {
+    --__axc-bleed-padding-inline: var(--__axc-bleed-padding-inline-sm);
+    --__axc-bleed-padding-block: var(--__axc-bleed-padding-block-sm);
+  }
+}
+
+@media (min-width: 768px) {
+  .navds-bleed {
+    --__axc-bleed-margin-inline: var(--__axc-bleed-margin-inline-md);
+    --__axc-bleed-margin-block: var(--__axc-bleed-margin-block-md);
+  }
+
+  .navds-bleed--padding {
+    --__axc-bleed-padding-inline: var(--__axc-bleed-padding-inline-md);
+    --__axc-bleed-padding-block: var(--__axc-bleed-padding-block-md);
+  }
+}
+
+@media (min-width: 1024px) {
+  .navds-bleed {
+    --__axc-bleed-margin-inline: var(--__axc-bleed-margin-inline-lg);
+    --__axc-bleed-margin-block: var(--__axc-bleed-margin-block-lg);
+  }
+
+  .navds-bleed--padding {
+    --__axc-bleed-padding-inline: var(--__axc-bleed-padding-inline-lg);
+    --__axc-bleed-padding-block: var(--__axc-bleed-padding-block-lg);
+  }
+}
+
+@media (min-width: 1280px) {
+  .navds-bleed {
+    --__axc-bleed-margin-inline: var(--__axc-bleed-margin-inline-xl);
+    --__axc-bleed-margin-block: var(--__axc-bleed-margin-block-xl);
+  }
+
+  .navds-bleed--padding {
+    --__axc-bleed-padding-inline: var(--__axc-bleed-padding-inline-xl);
+    --__axc-bleed-padding-block: var(--__axc-bleed-padding-block-xl);
+  }
+}
+
+@media (min-width: 1440px) {
+  .navds-bleed {
+    --__axc-bleed-margin-inline: var(--__axc-bleed-margin-inline-2xl);
+    --__axc-bleed-margin-block: var(--__axc-bleed-margin-block-2xl);
+  }
+
+  .navds-bleed--padding {
+    --__axc-bleed-padding-inline: var(--__axc-bleed-padding-inline-2xl);
+    --__axc-bleed-padding-block: var(--__axc-bleed-padding-block-2xl);
+  }
+}

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

@@ -0,0 +1,66 @@
+.navds-box-bg {
+  --__axc-box-background: initial;
+
+  background-color: var(--__axc-box-background);
+}
+
+.navds-box-border-color {
+  --__axc-box-border-color: initial;
+
+  border-color: var(--__axc-box-border-color);
+}
+
+.navds-box-border-width {
+  --__axc-box-border-width: initial;
+
+  border-style: solid;
+  border-width: var(--__axc-box-border-width, 0);
+}
+
+.navds-box-border-radius {
+  --__axc-box-border-radius-xs: initial;
+  --__axc-box-border-radius-sm: var(--__axc-box-border-radius-xs);
+  --__axc-box-border-radius-md: var(--__axc-box-border-radius-sm);
+  --__axc-box-border-radius-lg: var(--__axc-box-border-radius-md);
+  --__axc-box-border-radius-xl: var(--__axc-box-border-radius-lg);
+  --__axc-box-border-radius-2xl: var(--__axc-box-border-radius-xl);
+  --__axc-box-border-radius: var(--__axc-box-border-radius-xs);
+
+  border-radius: var(--__axc-box-border-radius);
+}
+
+.navds-box-shadow {
+  --__axc-box-shadow: initial;
+
+  box-shadow: var(--__axc-box-shadow);
+}
+
+@media (min-width: 480px) {
+  .navds-box-border-radius {
+    --__axc-box-border-radius: var(--__axc-box-border-radius-sm);
+  }
+}
+
+@media (min-width: 768px) {
+  .navds-box-border-radius {
+    --__axc-box-border-radius: var(--__axc-box-border-radius-md);
+  }
+}
+
+@media (min-width: 1024px) {
+  .navds-box-border-radius {
+    --__axc-box-border-radius: var(--__axc-box-border-radius-lg);
+  }
+}
+
+@media (min-width: 1280px) {
+  .navds-box-border-radius {
+    --__axc-box-border-radius: var(--__axc-box-border-radius-xl);
+  }
+}
+
+@media (min-width: 1440px) {
+  .navds-box-border-radius {
+    --__axc-box-border-radius: var(--__axc-box-border-radius-2xl);
+  }
+}

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

@@ -0,0 +1,80 @@
+.navds-hgrid {
+  --__axc-hgrid-columns-xs: initial;
+  --__axc-hgrid-columns-sm: var(--__axc-hgrid-columns-xs);
+  --__axc-hgrid-columns-md: var(--__axc-hgrid-columns-sm);
+  --__axc-hgrid-columns-lg: var(--__axc-hgrid-columns-md);
+  --__axc-hgrid-columns-xl: var(--__axc-hgrid-columns-lg);
+  --__axc-hgrid-columns-2xl: var(--__axc-hgrid-columns-xl);
+  --__axc-hgrid-columns: var(--__axc-hgrid-columns-xs);
+
+  display: grid;
+  grid-template-columns: var(--__axc-hgrid-columns);
+}
+
+.navds-hgrid-gap {
+  --__axc-hgrid-gap-xs: initial;
+  --__axc-hgrid-gap-sm: var(--__axc-hgrid-gap-xs);
+  --__axc-hgrid-gap-md: var(--__axc-hgrid-gap-sm);
+  --__axc-hgrid-gap-lg: var(--__axc-hgrid-gap-md);
+  --__axc-hgrid-gap-xl: var(--__axc-hgrid-gap-lg);
+  --__axc-hgrid-gap-2xl: var(--__axc-hgrid-gap-xl);
+  --__axc-hgrid-gap: var(--__axc-hgrid-gap-xs);
+
+  gap: var(--__axc-hgrid-gap);
+}
+
+.navds-hgrid-align {
+  --__axc-hgrid-align: initial;
+
+  align-items: var(--__axc-hgrid-align);
+}
+
+@media (min-width: 480px) {
+  .navds-hgrid {
+    --__axc-hgrid-columns: var(--__axc-hgrid-columns-sm);
+  }
+
+  .navds-hgrid-gap {
+    --__axc-hgrid-gap: var(--__axc-hgrid-gap-sm);
+  }
+}
+
+@media (min-width: 768px) {
+  .navds-hgrid {
+    --__axc-hgrid-columns: var(--__axc-hgrid-columns-md);
+  }
+
+  .navds-hgrid-gap {
+    --__axc-hgrid-gap: var(--__axc-hgrid-gap-md);
+  }
+}
+
+@media (min-width: 1024px) {
+  .navds-hgrid {
+    --__axc-hgrid-columns: var(--__axc-hgrid-columns-lg);
+  }
+
+  .navds-hgrid-gap {
+    --__axc-hgrid-gap: var(--__axc-hgrid-gap-lg);
+  }
+}
+
+@media (min-width: 1280px) {
+  .navds-hgrid {
+    --__axc-hgrid-columns: var(--__axc-hgrid-columns-xl);
+  }
+
+  .navds-hgrid-gap {
+    --__axc-hgrid-gap: var(--__axc-hgrid-gap-xl);
+  }
+}
+
+@media (min-width: 1440px) {
+  .navds-hgrid {
+    --__axc-hgrid-columns: var(--__axc-hgrid-columns-2xl);
+  }
+
+  .navds-hgrid-gap {
+    --__axc-hgrid-gap: var(--__axc-hgrid-gap-2xl);
+  }
+}

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

@@ -0,0 +1,7 @@
+@import "./base.darkside.css";
+@import "./box.darkside.css";
+@import "./bleed.darkside.css";
+@import "./page.darkside.css";
+@import "./hgrid.darkside.css";
+@import "./stack.darkside.css";
+@import "./responsive.darkside.css";

@navikt/core/css/darkside/primitives/page.darkside.css

@@ -0,0 +1,60 @@
+.navds-page {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  min-height: 100lvh;
+}
+
+/* Page.Block */
+.navds-pageblock {
+  /* stylelint-disable-next-line length-zero-no-unit */
+  --__axc-page-padding-inline: 0px;
+
+  margin-inline: auto;
+  width: 100%;
+}
+
+.navds-page__content--grow {
+  flex-grow: 1;
+}
+
+.navds-page__content--fullheight {
+  min-height: 100vh;
+  min-height: 100lvh;
+}
+
+.navds-page__content--padding {
+  padding-block-end: var(--ax-spacing-16);
+}
+
+.navds-pageblock--text {
+  max-width: calc(576px + var(--__axc-page-padding-inline) + var(--__axc-page-padding-inline));
+}
+
+.navds-pageblock--md {
+  max-width: 768px;
+}
+
+.navds-pageblock--lg {
+  max-width: 1024px;
+}
+
+.navds-pageblock--xl {
+  max-width: 1280px;
+}
+
+.navds-pageblock--2xl {
+  max-width: 1440px;
+}
+
+.navds-pageblock--gutters {
+  --__axc-page-padding-inline: var(--a-spacing-4);
+
+  padding-inline: var(--__axc-page-padding-inline);
+}
+
+@media (min-width: 1024px) {
+  .navds-pageblock--gutters {
+    --__axc-page-padding-inline: var(--a-spacing-12);
+  }
+}

@navikt/core/css/darkside/primitives/responsive.darkside.css

@@ -0,0 +1,59 @@
+@media (min-width: 480px) {
+  .navds-responsive__below--sm {
+    display: none !important;
+  }
+}
+
+@media (max-width: 479px) {
+  .navds-responsive__above--sm {
+    display: none !important;
+  }
+}
+
+@media (min-width: 768px) {
+  .navds-responsive__below--md {
+    display: none !important;
+  }
+}
+
+@media (max-width: 767px) {
+  .navds-responsive__above--md {
+    display: none !important;
+  }
+}
+
+@media (min-width: 1024px) {
+  .navds-responsive__below--lg {
+    display: none !important;
+  }
+}
+
+@media (max-width: 1023px) {
+  .navds-responsive__above--lg {
+    display: none !important;
+  }
+}
+
+@media (min-width: 1280px) {
+  .navds-responsive__below--xl {
+    display: none !important;
+  }
+}
+
+@media (max-width: 1279px) {
+  .navds-responsive__above--xl {
+    display: none !important;
+  }
+}
+
+@media (min-width: 1440px) {
+  .navds-responsive__below--2xl {
+    display: none !important;
+  }
+}
+
+@media (max-width: 1439px) {
+  .navds-responsive__above--2xl {
+    display: none !important;
+  }
+}

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

@@ -0,0 +1,155 @@
+.navds-stack {
+  display: flex;
+}
+
+.navds-stack-gap {
+  --__axc-stack-gap-xs: initial;
+  --__axc-stack-gap-sm: var(--__axc-stack-gap-xs);
+  --__axc-stack-gap-md: var(--__axc-stack-gap-sm);
+  --__axc-stack-gap-lg: var(--__axc-stack-gap-md);
+  --__axc-stack-gap-xl: var(--__axc-stack-gap-lg);
+  --__axc-stack-gap-2xl: var(--__axc-stack-gap-xl);
+  --__axc-stack-gap: var(--__axc-stack-gap-xs);
+
+  gap: var(--__axc-stack-gap);
+}
+
+.navds-stack-align {
+  --__axc-stack-align-xs: initial;
+  --__axc-stack-align-sm: var(--__axc-stack-align-xs);
+  --__axc-stack-align-md: var(--__axc-stack-align-sm);
+  --__axc-stack-align-lg: var(--__axc-stack-align-md);
+  --__axc-stack-align-xl: var(--__axc-stack-align-lg);
+  --__axc-stack-align-2xl: var(--__axc-stack-align-xl);
+  --__axc-stack-align: var(--__axc-stack-align-xs);
+
+  align-items: var(--__axc-stack-align);
+}
+
+.navds-stack-justify {
+  --__axc-stack-justify-xs: initial;
+  --__axc-stack-justify-sm: var(--__axc-stack-justify-xs);
+  --__axc-stack-justify-md: var(--__axc-stack-justify-sm);
+  --__axc-stack-justify-lg: var(--__axc-stack-justify-md);
+  --__axc-stack-justify-xl: var(--__axc-stack-justify-lg);
+  --__axc-stack-justify-2xl: var(--__axc-stack-justify-xl);
+  --__axc-stack-justify: var(--__axc-stack-justify-xs);
+
+  justify-content: var(--__axc-stack-justify);
+}
+
+.navds-stack-direction {
+  --__axc-stack-direction-xs: initial;
+  --__axc-stack-direction-sm: var(--__axc-stack-direction-xs);
+  --__axc-stack-direction-md: var(--__axc-stack-direction-sm);
+  --__axc-stack-direction-lg: var(--__axc-stack-direction-md);
+  --__axc-stack-direction-xl: var(--__axc-stack-direction-lg);
+  --__axc-stack-direction-2xl: var(--__axc-stack-direction-xl);
+  --__axc-stack-direction: var(--__axc-stack-direction-xs);
+
+  flex-direction: var(--__axc-stack-direction);
+}
+
+.navds-stack-wrap {
+  flex-wrap: wrap;
+}
+
+.navds-stack__spacer {
+  flex: 1;
+  place-content: stretch stretch;
+}
+
+.navds-stack > .navds-stack__spacer {
+  margin-block-start: calc(var(--__axc-stack-gap) * -1);
+  margin-inline-start: calc(var(--__axc-stack-gap) * -1);
+}
+
+@media (min-width: 480px) {
+  .navds-stack-gap {
+    --__axc-stack-gap: var(--__axc-stack-gap-sm);
+  }
+
+  .navds-stack-align {
+    --__axc-stack-align: var(--__axc-stack-align-sm);
+  }
+
+  .navds-stack-justify {
+    --__axc-stack-justify: var(--__axc-stack-justify-sm);
+  }
+
+  .navds-stack-direction {
+    --__axc-stack-direction: var(--__axc-stack-direction-sm);
+  }
+}
+
+@media (min-width: 768px) {
+  .navds-stack-gap {
+    --__axc-stack-gap: var(--__axc-stack-gap-md);
+  }
+
+  .navds-stack-align {
+    --__axc-stack-align: var(--__axc-stack-align-md);
+  }
+
+  .navds-stack-justify {
+    --__axc-stack-justify: var(--__axc-stack-justify-md);
+  }
+
+  .navds-stack-direction {
+    --__axc-stack-direction: var(--__axc-stack-direction-md);
+  }
+}
+
+@media (min-width: 1024px) {
+  .navds-stack-gap {
+    --__axc-stack-gap: var(--__axc-stack-gap-lg);
+  }
+
+  .navds-stack-align {
+    --__axc-stack-align: var(--__axc-stack-align-lg);
+  }
+
+  .navds-stack-justify {
+    --__axc-stack-justify: var(--__axc-stack-justify-lg);
+  }
+
+  .navds-stack-direction {
+    --__axc-stack-direction: var(--__axc-stack-direction-lg);
+  }
+}
+
+@media (min-width: 1280px) {
+  .navds-stack-gap {
+    --__axc-stack-gap: var(--__axc-stack-gap-xl);
+  }
+
+  .navds-stack-align {
+    --__axc-stack-align: var(--__axc-stack-align-xl);
+  }
+
+  .navds-stack-justify {
+    --__axc-stack-justify: var(--__axc-stack-justify-xl);
+  }
+
+  .navds-stack-direction {
+    --__axc-stack-direction: var(--__axc-stack-direction-xl);
+  }
+}
+
+@media (min-width: 1440px) {
+  .navds-stack-gap {
+    --__axc-stack-gap: var(--__axc-stack-gap-2xl);
+  }
+
+  .navds-stack-align {
+    --__axc-stack-align: var(--__axc-stack-align-2xl);
+  }
+
+  .navds-stack-justify {
+    --__axc-stack-justify: var(--__axc-stack-justify-2xl);
+  }
+
+  .navds-stack-direction {
+    --__axc-stack-direction: var(--__axc-stack-direction-2xl);
+  }
+}

@navikt/core/css/darkside/progress-bar.darkside.css

@@ -0,0 +1,108 @@
+.navds-progress-bar {
+  background: var(--ax-bg-neutral-moderateA);
+  position: relative;
+  border-radius: var(--ax-border-radius-full);
+  overflow: hidden;
+  box-shadow: inset 0 0 0 1px var(--ax-border-neutral-subtleA);
+}
+
+.navds-progress-bar--small {
+  height: 0.75rem;
+  min-width: 0.75rem;
+}
+
+.navds-progress-bar--medium {
+  height: 1rem;
+  min-width: 1rem;
+}
+
+.navds-progress-bar--large {
+  height: 1.5rem;
+  min-width: 1.5rem;
+}
+
+.navds-progress-bar__foreground {
+  /* TODO:  rename --__ac- in ProgressBar.tsx after darkside update */
+  --__ac-progress-bar-translate: initial;
+
+  transform: translateX(var(--__ac-progress-bar-translate));
+  background: var(--ax-bg-info-strong);
+  transform-origin: left;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  border-radius: inherit;
+  transition: transform 0.2s ease;
+}
+
+.navds-progress-bar__foreground--indeterminate {
+  --__ac-progress-bar-simulated: initial;
+
+  animation-name: navds-progress-bar-indeterminate-grow, navds-progress-bar-indeterminate;
+  animation-timing-function: ease-in-out, ease-in-out;
+  animation-duration: var(--__ac-progress-bar-simulated), 2500ms;
+  animation-fill-mode: forwards, none;
+  animation-iteration-count: 1, infinite;
+  animation-delay: 0s, var(--__ac-progress-bar-simulated);
+}
+
+/* navds-progress-bar-indeterminate wave animation */
+@keyframes navds-progress-bar-indeterminate {
+  0% {
+    left: -50%;
+    width: 50%;
+    transform: translateX(0%);
+  }
+
+  50% {
+    animation-direction: reverse;
+    left: 100%;
+    transform: translateX(0%);
+    width: 50%;
+  }
+
+  100% {
+    left: -50%;
+    transform: translateX(0%);
+    width: 50%;
+  }
+}
+
+@keyframes navds-progress-bar-indeterminate-grow {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  20% {
+    transform: translateX(-80%);
+  }
+
+  30% {
+    transform: translateX(-40%);
+  }
+
+  50% {
+    transform: translateX(-20%);
+  }
+
+  75% {
+    transform: translateX(-10%);
+  }
+
+  100% {
+    transform: translateX(-10%);
+  }
+}
+
+@media (forced-colors: active) {
+  .navds-progress-bar__foreground {
+    background: Highlight;
+  }
+
+  .navds-progress-bar {
+    outline: 1px solid transparent;
+    outline-offset: -1px;
+  }
+}

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

@@ -0,0 +1,102 @@
+.navds-read-more {
+  --__axc-read-more-icon-size: 1.5rem;
+  --__axc-read-more-pi-start: 0px;
+  --__axc-read-more-pi-end: var(--ax-spacing-1);
+  --__axc-read-more-pb: var(--ax-spacing-1);
+}
+
+/* ----------------------------- ReadMore Button ---------------------------- */
+.navds-read-more__button {
+  cursor: pointer;
+  margin: 0;
+  border: none;
+  background: none;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--ax-spacing-1);
+  color: var(--ax-text-accent);
+  padding-inline: var(--__axc-read-more-pi-start) var(--__axc-read-more-pi-end);
+  padding-block: var(--__axc-read-more-pb);
+  text-align: start;
+
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+  }
+
+  &[data-state="open"] .navds-read-more__expand-icon {
+    transform: rotateX(-180deg);
+  }
+}
+
+.navds-read-more:is([data-volume="low"], :not([data-volume])) {
+  & .navds-read-more__button {
+    border-radius: var(--ax-border-radius-medium);
+
+    &:hover {
+      background-color: var(--ax-bg-neutral-hoverA);
+      color: var(--ax-text-accent-strong);
+    }
+  }
+}
+
+.navds-read-more[data-volume="high"] {
+  & .navds-read-more__button {
+    background-color: var(--ax-bg-accent-moderate);
+    border-radius: var(--ax-border-radius-full);
+
+    &:hover {
+      background-color: var(--ax-bg-accent-moderate-hoverA);
+      color: var(--ax-text-accent-strong);
+    }
+  }
+
+  &.navds-read-more--large {
+    --__axc-read-more-pi-start: var(--ax-spacing-3);
+    --__axc-read-more-pi-end: var(--ax-spacing-6);
+  }
+
+  &.navds-read-more--small,
+  &.navds-read-more--medium {
+    --__axc-read-more-pi-start: var(--ax-spacing-2);
+    --__axc-read-more-pi-end: var(--ax-spacing-4);
+  }
+}
+
+/* ---------------------------- ReadMore Content ---------------------------- */
+.navds-read-more__content {
+  margin-top: var(--ax-spacing-2);
+  border-left: 2px solid var(--ax-border-neutral-subtleA);
+  color: var(--ax-text-default);
+  margin-left: calc(var(--__axc-read-more-pi-start) + var(--__axc-read-more-icon-size) / 2 - 1px);
+  padding-left: calc(var(--__axc-read-more-icon-size) / 2 - 1px + var(--ax-spacing-1));
+
+  &[data-state="closed"] {
+    display: none;
+  }
+}
+
+.navds-read-more__expand-icon {
+  font-size: var(--__axc-read-more-icon-size);
+  flex-shrink: 0;
+  transition: transform 100ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+/* ----------------------------- ReadMore Sizes ----------------------------- */
+.navds-read-more--large {
+  --__axc-read-more-pb: var(--ax-spacing-3);
+}
+
+.navds-read-more--small {
+  --__axc-read-more-icon-size: 1.25rem;
+  --__axc-read-more-pb: var(--ax-spacing-05);
+}
+
+/* ------------------------- ReadMore high-contrast ------------------------- */
+@media (forced-colors: active) {
+  .navds-read-more__button {
+    background-color: ButtonFace;
+    border: solid 1px ButtonText;
+    color: ButtonText;
+  }
+}

@navikt/core/css/darkside/skeleton.darkside.css

@@ -0,0 +1,64 @@
+.navds-skeleton {
+  background-color: var(--ax-bg-neutral-moderateA);
+  height: 1.3em;
+  animation: akselSkeletonAnimation 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  pointer-events: none;
+}
+
+.navds-skeleton--inline {
+  display: inline-block;
+}
+
+.navds-skeleton--has-children {
+  color: transparent;
+
+  & > * {
+    visibility: hidden;
+  }
+
+  &.navds-skeleton--no-height {
+    height: auto;
+  }
+
+  &.navds-skeleton--no-width {
+    width: fit-content;
+  }
+}
+
+.navds-skeleton--text {
+  height: auto;
+  transform-origin: 0 55%;
+  transform: scale(1, 0.6);
+  border-radius: var(--ax-border-radius-large);
+
+  &:empty::before {
+    content: "\00a0";
+  }
+}
+
+.navds-skeleton--circle {
+  border-radius: var(--ax-border-radius-full);
+}
+
+.navds-skeleton--rectangle {
+  border-radius: 0;
+}
+
+.navds-skeleton--rounded {
+  border-radius: var(--ax-border-radius-xlarge);
+}
+
+@keyframes akselSkeletonAnimation {
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@media (forced-colors: active) {
+  .navds-skeleton {
+    forced-color-adjust: none;
+    background-color: canvastext;
+    animation-duration: 2s;
+    opacity: 0.2;
+  }
+}

@navikt/core/css/darkside/stepper.darkside.css

@@ -0,0 +1,268 @@
+.navds-stepper {
+  --__axc-stepper-circle-size: 1.75rem;
+  --__axc-stepper-border-width: 2px;
+  --__axc-stepper-line-length: 1rem;
+
+  color: var(--ax-text-accent);
+  font-weight: var(--ax-font-weight-bold);
+  line-height: 1;
+  list-style: none;
+  padding-left: 0;
+  margin: 0;
+}
+
+.navds-stepper__item {
+  display: grid;
+  grid-template-rows:
+    [line-1] auto [step-start] var(--__axc-stepper-circle-size)
+    [line-2 step-end] auto;
+  grid-template-columns: var(--__axc-stepper-circle-size) auto;
+  justify-items: flex-start;
+  gap: var(--ax-spacing-2);
+}
+
+.navds-stepper__line {
+  background-color: var(--ax-border-accent);
+  width: var(--__axc-stepper-border-width);
+  height: 100%;
+  min-height: var(--__axc-stepper-line-length);
+  justify-self: center;
+  grid-column: 1;
+
+  .navds-stepper__item--non-interactive & {
+    background-color: var(--ax-border-neutral-strong);
+  }
+}
+
+/* Line before non-interactive step */
+.navds-stepper__item:has(+ .navds-stepper__item > .navds-stepper__step[data-interactive="false"]) {
+  .navds-stepper__line--2 {
+    background-color: var(--ax-border-neutral-strong);
+  }
+}
+
+.navds-stepper__line--1 {
+  grid-row: line-1;
+  display: none;
+}
+
+.navds-stepper__line--2 {
+  grid-row: line-2;
+
+  /* Hide last line under item */
+  .navds-stepper__item:last-of-type & {
+    display: none;
+  }
+}
+
+.navds-stepper__step {
+  grid-row: 2 / -1;
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: [circle] var(--__axc-stepper-circle-size) [content] auto;
+  gap: var(--ax-spacing-2);
+  justify-content: flex-start;
+  cursor: pointer;
+  padding: var(--__axc-stepper-border-width);
+  margin: calc(var(--__axc-stepper-border-width) * -1) calc(var(--__axc-stepper-border-width) * -1)
+    var(--__axc-stepper-circle-size);
+
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 4px;
+
+    /* Isolate item to make outline show above line--2 */
+    isolation: isolate;
+  }
+
+  /* Remove last item bottom margin */
+  .navds-stepper__item:last-child & {
+    margin-bottom: 0;
+  }
+
+  &:is(button) {
+    appearance: none;
+    border: none;
+    background-color: transparent;
+    font: inherit;
+    color: inherit;
+    text-align: inherit;
+  }
+}
+
+.navds-stepper__circle {
+  grid-column: circle;
+  display: inline-grid;
+  place-items: center;
+  width: var(--__axc-stepper-circle-size);
+  height: var(--__axc-stepper-circle-size);
+  border: var(--__axc-stepper-border-width) solid currentColor;
+  border-radius: var(--ax-border-radius-full);
+  line-height: 1;
+}
+
+.navds-stepper__circle--success {
+  background: none;
+  font-size: var(--__axc-stepper-circle-size);
+}
+
+.navds-stepper__step[data-interactive="true"] {
+  color: var(--ax-text-accent);
+  border-radius: var(--ax-border-radius-medium);
+  text-decoration: none;
+
+  & .navds-stepper__content {
+    text-decoration: underline;
+    text-underline-offset: 0.1em;
+    text-decoration-thickness: 0.05em;
+  }
+
+  &:hover,
+  &:active {
+    & .navds-stepper__content {
+      text-decoration-thickness: 0.111em;
+    }
+  }
+
+  &:hover {
+    & .navds-stepper__circle {
+      color: var(--ax-text-accent-strong);
+    }
+  }
+
+  & .navds-stepper__circle {
+    color: var(--ax-text-accent);
+    border-color: var(--ax-border-accent-strong);
+  }
+
+  &[data-active="true"] {
+    & .navds-stepper__content {
+      color: var(--ax-text-accent-strong);
+      text-decoration: none;
+    }
+
+    & .navds-stepper__circle {
+      color: var(--ax-text-accent-contrast);
+      background-color: var(--ax-bg-accent-strong-pressed);
+      border-color: var(--ax-bg-accent-strong-pressed);
+    }
+  }
+
+  &[data-active="false"] {
+    &:hover {
+      & .navds-stepper__circle {
+        background-color: var(--ax-bg-accent-moderate-hoverA);
+        border-color: var(--ax-border-accent-strong);
+      }
+    }
+  }
+}
+
+.navds-stepper__step[data-interactive="false"] {
+  color: var(--ax-text-neutral);
+  cursor: default;
+
+  & .navds-stepper__circle {
+    color: var(--ax-text-neutral);
+    border-color: var(--ax-border-neutral-strong);
+  }
+
+  &[data-active="true"] {
+    & .navds-stepper__content {
+      color: var(--ax-text-neutral-strong);
+    }
+
+    & .navds-stepper__circle {
+      color: var(--ax-text-neutral-contrast);
+      background-color: var(--ax-bg-neutral-strong-pressed);
+      border-color: var(--ax-bg-neutral-strong-pressed);
+    }
+  }
+}
+
+.navds-stepper__content {
+  min-width: fit-content;
+  line-height: 1.5;
+  grid-column: content;
+  padding-top: 0.035rem;
+}
+
+/* Horizontal */
+.navds-stepper[data-orientation="horizontal"] {
+  display: flex;
+  align-items: flex-start;
+  text-align: center;
+
+  & .navds-stepper__line {
+    height: var(--__axc-stepper-border-width);
+    width: 100%;
+    min-height: auto;
+    grid-row: 1;
+    display: block;
+    align-self: center;
+  }
+
+  & .navds-stepper__line--1 {
+    grid-column: line-1;
+  }
+
+  & .navds-stepper__line--2 {
+    grid-column: line-2;
+  }
+
+  & .navds-stepper__item {
+    flex: 1 1 100%;
+    grid-template-columns:
+      [line-1-start] 1fr [step-start] auto [line-1-end] var(--__axc-stepper-circle-size)
+      [line-2-start] auto [step-end] 1fr [line-2-end];
+    grid-template-rows: var(--__axc-stepper-circle-size) auto;
+
+    &:first-of-type .navds-stepper__line--1,
+    &:last-of-type .navds-stepper__line--2 {
+      visibility: hidden;
+    }
+  }
+
+  & .navds-stepper__step {
+    grid-row: 1 / -1;
+    grid-column: step;
+    display: grid;
+    grid-template-rows: [circle] var(--__axc-stepper-circle-size) [content] auto;
+    grid-template-columns:
+      [content-start] auto [circle] var(--__axc-stepper-circle-size)
+      [content-end] auto;
+    place-items: center center;
+    margin-bottom: 0;
+  }
+
+  & .navds-stepper__circle {
+    grid-row: circle;
+    grid-column: 2;
+  }
+
+  & .navds-stepper__content {
+    grid-row: content;
+    grid-column: 1 / -1;
+    max-width: 24ch;
+  }
+}
+
+@media (forced-colors: active) {
+  .navds-stepper__circle.navds-stepper__circle {
+    border: 0;
+    outline: 2px solid ButtonText;
+    outline-offset: 2px;
+  }
+
+  .navds-stepper__line.navds-stepper__line {
+    background-color: ButtonText;
+  }
+
+  .navds-stepper__step[data-active="true"][data-interactive] {
+    .navds-stepper__circle {
+      forced-color-adjust: none;
+      background-color: highlight;
+      color: highlighttext;
+    }
+  }
+}

@navikt/core/css/darkside/table.darkside.css

@@ -0,0 +1,286 @@
+.navds-table {
+  width: 100%;
+  border-collapse: collapse;
+  display: table;
+}
+
+.navds-table__header {
+  display: table-header-group;
+}
+
+.navds-table__body {
+  display: table-row-group;
+}
+
+.navds-table__row {
+  display: table-row;
+}
+
+.navds-table__body .navds-table__row--shade-on-hover:not(.navds-table__expandable-row--expansion-disabled):hover {
+  background-color: var(--ac-table-row-hover, var(--a-bg-subtle));
+}
+
+.navds-table__row--selected {
+  background-color: var(--ac-table-row-selected, var(--a-surface-action-subtle));
+}
+
+.navds-table__body .navds-table__row--shade-on-hover.navds-table__row--selected:hover {
+  background-color: var(--ac-table-row-selected-hover, var(--a-surface-action-subtle-hover));
+}
+
+.navds-table--zebra-stripes .navds-table__body :where(.navds-table__row:nth-child(odd):not(.navds-table__row--selected)) {
+  background-color: var(--ac-table-row-zebra, var(--a-surface-subtle));
+}
+
+.navds-table--zebra-stripes
+  .navds-table__body
+  :where(.navds-table__expandable-row:nth-child(4n + 1):not(.navds-table__row--selected)) {
+  background-color: transparent;
+}
+
+.navds-table--zebra-stripes .navds-table__body .navds-table__expanded-row:nth-child(4n) {
+  background-color: var(--ac-table-row-zebra, var(--a-surface-subtle));
+}
+
+.navds-table__header-cell,
+.navds-table__data-cell {
+  display: table-cell;
+  padding: var(--a-spacing-3) var(--a-spacing-2);
+  border-bottom: 1px solid var(--ac-table-row-border, var(--a-border-default));
+  text-align: left;
+}
+
+.navds-table__header .navds-table__header-cell,
+.navds-table__header .navds-table__data-cell {
+  border-bottom-width: 2px;
+}
+
+.navds-table__header-cell--align-right,
+.navds-table__data-cell--align-right {
+  text-align: right;
+}
+
+.navds-table__header-cell--align-center,
+.navds-table__data-cell--align-center {
+  text-align: center;
+}
+
+:where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__header-cell,
+:where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__data-cell {
+  border-color: var(--ac-table-cell-hover-border, var(--a-border-strong));
+}
+
+:where(.navds-table__expandable-row--open:hover) .navds-table__data-cell {
+  border-bottom-color: transparent;
+}
+
+.navds-table--large .navds-table__header-cell,
+.navds-table--large .navds-table__data-cell {
+  padding: var(--a-spacing-4) var(--a-spacing-2);
+}
+
+.navds-table--small .navds-table__header-cell,
+.navds-table--small .navds-table__data-cell {
+  padding: var(--a-spacing-1) var(--a-spacing-2);
+}
+
+.navds-table :not(.navds-checkboxes) > .navds-checkbox .navds-checkbox__input {
+  top: -0.75rem;
+}
+
+.navds-table :not(.navds-checkboxes) > .navds-checkbox--small .navds-checkbox__input {
+  top: -0.375rem;
+}
+
+.navds-table :not(.navds-checkboxes) > .navds-checkbox .navds-checkbox__label {
+  padding: 0;
+}
+
+.navds-table__header-cell[aria-sort] {
+  padding: 0;
+}
+
+.navds-table__sort-button {
+  appearance: none;
+  background: none;
+  color: var(--ac-table-sort-button-text, var(--a-text-action));
+  border: none;
+  cursor: pointer;
+  margin: 0;
+  padding: var(--a-spacing-4) var(--a-spacing-3);
+  width: 100%;
+  display: flex;
+  gap: var(--a-spacing-2);
+  align-items: center;
+  line-height: inherit;
+  font-weight: inherit;
+}
+
+.navds-table--small .navds-table__sort-button {
+  padding: var(--a-spacing-2) var(--a-spacing-3);
+}
+
+.navds-table__sort-button:hover {
+  background-color: var(--ac-table-sort-button-hover-bg, var(--a-bg-subtle));
+}
+
+.navds-table__sort-button:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--a-border-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-table__sort-button:focus {
+    outline: none;
+    box-shadow: inset 0 0 0 2px var(--a-border-focus);
+  }
+}
+
+.navds-table__header-cell[aria-sort="ascending"] .navds-table__sort-button,
+.navds-table__header-cell[aria-sort="descending"] .navds-table__sort-button {
+  background-color: var(--ac-table-sort-button-sorted-bg, var(--a-surface-selected));
+  color: var(--ac-table-sort-button-sorted-text, var(--a-table-sort-button-sorted-text, var(--a-text-action-on-action-subtle)));
+}
+
+.navds-table__header-cell--align-right .navds-table__sort-button {
+  justify-content: flex-end;
+}
+
+.navds-table__header-cell--align-center .navds-table__sort-button {
+  justify-content: center;
+}
+
+.navds-table__sort-button svg {
+  font-size: 1rem;
+  flex-shrink: 0;
+}
+
+.navds-table__expandable-row:not(.navds-table__expandable-row--open) .navds-table__data-cell {
+  transition: border-bottom-color 190ms cubic-bezier(0.6, 0.04, 0.98, 0.335);
+}
+
+.navds-table__expandable-row.navds-table__expandable-row--clickable:not(.navds-table__expandable-row--expansion-disabled):hover {
+  cursor: pointer;
+}
+
+.navds-table__expandable-row--open .navds-table__data-cell {
+  border-bottom-color: transparent;
+}
+
+.navds-table__expandable-row--open .navds-table__header-cell {
+  border-color: var(--ac-table-row-border, var(--a-border-default));
+}
+
+.navds-table__expandable-row--open .navds-table__toggle-expand-cell--open {
+  border-color: transparent;
+}
+
+.navds-table__toggle-expand-cell {
+  padding: 0;
+  width: 3rem;
+}
+
+.navds-table--large .navds-table__toggle-expand-cell {
+  padding: 0 var(--a-spacing-2);
+}
+
+.navds-table--small .navds-table__toggle-expand-cell {
+  padding: var(--a-spacing-1) var(--a-spacing-2);
+}
+
+.navds-table__toggle-expand-button {
+  display: grid;
+  place-content: center;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  border-radius: var(--a-border-radius-medium);
+  height: 2rem;
+  width: 2rem;
+  font-size: 1.5rem;
+  margin: 0 auto;
+}
+
+.navds-table__expandable-icon {
+  transition: transform 150ms ease-in-out;
+}
+
+.navds-table__toggle-expand-cell:hover {
+  cursor: pointer;
+}
+
+.navds-table__toggle-expand-button:hover,
+.navds-table__toggle-expand-cell:hover > .navds-table__toggle-expand-button,
+.navds-table__expandable-row--clickable:hover .navds-table__toggle-expand-button {
+  background-color: var(--a-surface-hover);
+}
+
+.navds-table__toggle-expand-cell--open > :where(.navds-table__toggle-expand-button) :where(.navds-table__expandable-icon) {
+  transform: translateY(0) rotate(180deg);
+}
+
+.navds-table__toggle-expand-button:hover > :where(.navds-table__expandable-icon) {
+  transform: translateY(1px);
+}
+
+.navds-table__toggle-expand-cell--open > .navds-table__toggle-expand-button:hover > :where(.navds-table__expandable-icon) {
+  transform: translateY(-1px) rotate(180deg);
+}
+
+.navds-table__toggle-expand-button:focus-visible {
+  outline: none;
+  box-shadow: var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-table__toggle-expand-button:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
+.navds-table__expanded-row-cell {
+  padding: 0;
+}
+
+.navds-table__expanded-row-cell:empty {
+  display: none;
+}
+
+.navds-table__expanded-row-collapse:not([style*="height: 0px;"]) {
+  border-bottom: 1px solid var(--ac-table-row-border, var(--a-border-default));
+}
+
+.navds-table__expanded-row-content {
+  padding: var(--a-spacing-4) calc(var(--a-spacing-2) + 3rem);
+}
+
+.navds-table--small .navds-table__expanded-row-content {
+  padding: var(--a-spacing-2) calc(var(--a-spacing-2) + 3rem);
+}
+
+@media (forced-colors: active) {
+  .navds-date.navds-date button.rdp-day_selected {
+    forced-color-adjust: none;
+    background-color: highlight;
+    color: highlighttext;
+    box-shadow: none;
+  }
+
+  .navds-date.navds-date button {
+    color: buttontext;
+    forced-color-adjust: none;
+    outline: none;
+    box-shadow: none;
+  }
+
+  .navds-date button:focus-visible {
+    color: buttontext;
+    forced-color-adjust: none;
+    outline: 2px solid highlight;
+  }
+
+  .navds-date.navds-date button.rdp-day_disabled {
+    color: GrayText;
+  }
+}

@navikt/core/css/darkside/tabs.darkside.css

@@ -0,0 +1,147 @@
+.navds-tabs__tablist-wrapper {
+  box-shadow: inset 0 -1px var(--ax-border-neutral-subtle);
+  width: 100%;
+  display: flex;
+}
+
+.navds-tabs__tablist {
+  display: flex;
+  max-width: 100%;
+  width: 100%;
+  scroll-behavior: smooth;
+  -ms-overflow-style: none; /* Internet Explorer, Edge */
+  scrollbar-width: none; /*  Firefox */
+  overflow-x: scroll;
+
+  &::-webkit-scrollbar {
+    display: none; /* Chrome, Safari, and Opera */
+  }
+}
+
+.navds-tabs__scroll-button {
+  padding: var(--ax-spacing-3) var(--ax-spacing-4);
+  width: 2.75rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+
+  & svg {
+    font-size: 1.25rem;
+    flex-shrink: 0;
+  }
+
+  .navds-tabs--small & {
+    padding: var(--ax-spacing-1-alt) var(--ax-spacing-4);
+    width: 2rem;
+  }
+}
+
+.navds-tabs__scroll-button--hidden {
+  visibility: hidden;
+}
+
+.navds-tabs__tab {
+  min-height: 3rem;
+  padding: var(--ax-spacing-3) var(--ax-spacing-4);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  background: none;
+  border: none;
+  color: var(--ax-text-default);
+  cursor: pointer;
+
+  --__axc-tabs-line-width: 0;
+  --__axc-tabs-line-color: var(--ax-border-neutral-subtle);
+
+  box-shadow: inset 0 var(--__axc-tabs-line-width) var(--__axc-tabs-line-color);
+  transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);
+
+  &:hover {
+    --__axc-tabs-line-width: -4px;
+  }
+
+  &[data-state="active"] {
+    --__axc-tabs-line-width: -4px;
+    --__axc-tabs-line-color: var(--ax-border-accent-strong);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: -2px;
+  }
+}
+
+.navds-tabs__tab-inner {
+  display: flex;
+  align-items: center;
+  gap: var(--ax-spacing-1);
+
+  & > * {
+    display: inline-flex;
+  }
+
+  & svg {
+    flex-shrink: 0;
+  }
+
+  .navds-tabs__tab-icon--top > & {
+    flex-direction: column;
+    gap: 0;
+  }
+}
+
+.navds-tabs__tab--small {
+  min-height: 2rem;
+  padding: var(--ax-spacing-1-alt) var(--ax-spacing-4);
+}
+
+.navds-tabs__tab-icon--top,
+.navds-tabs__tab--small.navds-tabs__tab-icon--top {
+  padding: var(--ax-spacing-1) var(--ax-spacing-4);
+}
+
+.navds-tabs__tab,
+.navds-tabs__tab--small.navds-tabs__tab--icon-only,
+.navds-tabs__tab--small.navds-tabs__tab-icon--top {
+  & svg {
+    font-size: 1.25rem;
+  }
+}
+
+.navds-tabs__tab--small svg {
+  font-size: 1rem;
+}
+
+.navds-tabs__tab--icon-only,
+.navds-tabs__tab-icon--top {
+  & svg {
+    font-size: 1.5rem;
+  }
+}
+
+.navds-tabs__tab--fill {
+  flex: 1 1 100%;
+}
+
+.navds-tabs__tabpanel:focus-visible {
+  outline: 2px solid var(--ax-border-focus);
+  outline-offset: -2px;
+}
+
+@media (forced-colors: active) {
+  .navds-tabs__tab[data-state="active"] {
+    border-bottom: 3px solid canvastext;
+    padding-block-end: calc(var(--ax-spacing-3) - 3px);
+  }
+
+  .navds-tabs__tab--small[data-state="active"] {
+    padding-block-end: calc(var(--ax-spacing-1-alt) - 3px);
+  }
+
+  .navds-tabs__tab-icon--top[data-state="active"],
+  .navds-tabs__tab--small.navds-tabs__tab-icon--top[data-state="active"] {
+    padding-block-end: calc(var(--ax-spacing-1) - 3px);
+  }
+}

@navikt/core/css/darkside/tag.darkside.css

@@ -0,0 +1,194 @@
+.navds-tag {
+  --__ac-tag-icon-size: 1.5rem;
+  --__ac-tag-icon-margin: -2px;
+
+  border: 1px solid;
+  border-radius: var(--a-border-radius-small);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--a-spacing-05) var(--a-spacing-2);
+  min-height: 2rem;
+  line-height: 1;
+}
+
+.navds-tag--small {
+  min-height: 1.5rem;
+  padding: 0 var(--a-spacing-1-alt);
+
+  --__ac-tag-icon-size: 1.25rem;
+}
+
+.navds-tag--xsmall {
+  min-height: 1.25rem;
+  padding: 0 var(--a-spacing-1);
+
+  --__ac-tag-icon-size: 1rem;
+  --__ac-tag-icon-margin: -1px;
+}
+
+.navds-tag:has(.navds-tag__icon--left) {
+  gap: var(--a-spacing-05);
+}
+
+.navds-tag__icon--left {
+  font-size: var(--__ac-tag-icon-size);
+  margin-inline-start: var(--__ac-tag-icon-margin);
+  display: flex;
+}
+
+.navds-tag--error {
+  border-color: var(--ac-tag-error-border, var(--a-border-danger));
+  background-color: var(--ac-tag-error-bg, var(--a-surface-danger-subtle));
+  color: var(--ac-tag-error-text, var(--a-text-default));
+}
+
+.navds-tag--error-filled {
+  border-color: transparent;
+  background-color: var(--ac-tag-error-filled-bg, var(--a-surface-danger));
+  color: var(--ac-tag-error-filled-text, var(--a-text-on-danger));
+}
+
+.navds-tag--error-moderate {
+  border-color: transparent;
+  background-color: var(--ac-tag-error-moderate-bg, var(--a-surface-danger-moderate));
+  color: var(--ac-tag-error-moderate-text, var(--a-text-default));
+}
+
+.navds-tag--success {
+  border-color: var(--ac-tag-success-border, var(--a-border-success));
+  background-color: var(--ac-tag-success-bg, var(--a-surface-success-subtle));
+  color: var(--ac-tag-success-text, var(--a-text-default));
+}
+
+.navds-tag--success-filled {
+  border-color: transparent;
+  background-color: var(--ac-tag-success-filled-bg, var(--a-surface-success));
+  color: var(--ac-tag-success-filled-text, var(--a-text-on-success));
+}
+
+.navds-tag--success-moderate {
+  border-color: transparent;
+  background-color: var(--ac-tag-success-moderate-bg, var(--a-surface-success-moderate));
+  color: var(--ac-tag-success-moderate-text, var(--a-text-default));
+}
+
+.navds-tag--warning {
+  border-color: var(--ac-tag-warning-border, var(--a-border-warning));
+  background-color: var(--ac-tag-warning-bg, var(--a-surface-warning-subtle));
+  color: var(--ac-tag-warning-text, var(--a-text-default));
+}
+
+.navds-tag--warning-filled {
+  border-color: transparent;
+  background-color: var(--ac-tag-warning-filled-bg, var(--a-surface-warning));
+  color: var(--ac-tag-warning-filled-text, var(--a-text-on-warning));
+}
+
+.navds-tag--warning-moderate {
+  border-color: transparent;
+  background-color: var(--ac-tag-warning-moderate-bg, var(--a-surface-warning-moderate));
+  color: var(--ac-tag-warning-moderate-text, var(--a-text-default));
+}
+
+.navds-tag--info {
+  border-color: var(--ac-tag-info-border, var(--a-border-info));
+  background-color: var(--ac-tag-info-bg, var(--a-surface-info-subtle));
+  color: var(--ac-tag-info-text, var(--a-text-default));
+}
+
+.navds-tag--info-filled {
+  border-color: transparent;
+  background-color: var(--ac-tag-info-filled-bg, var(--a-surface-info));
+  color: var(--ac-tag-info-filled-text, var(--a-text-on-info));
+}
+
+.navds-tag--info-moderate {
+  border-color: transparent;
+  background-color: var(--ac-tag-info-moderate-bg, var(--a-surface-info-moderate));
+  color: var(--ac-tag-info-moderate-text, var(--a-text-default));
+}
+
+.navds-tag--neutral {
+  border-color: var(--ac-tag-neutral-border, var(--a-border-default));
+  background-color: var(--ac-tag-neutral-bg, var(--a-surface-neutral-subtle));
+  color: var(--ac-tag-neutral-text, var(--a-text-default));
+}
+
+.navds-tag--neutral-filled {
+  border-color: transparent;
+  background-color: var(--ac-tag-neutral-filled-bg, var(--a-surface-neutral));
+  color: var(--ac-tag-neutral-filled-text, var(--a-text-on-neutral));
+}
+
+.navds-tag--neutral-moderate {
+  border-color: transparent;
+  background-color: var(--ac-tag-neutral-moderate-bg, var(--a-surface-neutral-moderate));
+  color: var(--ac-tag-neutral-moderate-text, var(--a-text-default));
+}
+
+.navds-tag--alt1 {
+  border-color: var(--ac-tag-alt-1-border, var(--a-border-alt-1));
+  background-color: var(--ac-tag-alt-1-bg, var(--a-surface-alt-1-subtle));
+  color: var(--ac-tag-alt-1-text, var(--a-text-default));
+}
+
+.navds-tag--alt1-filled {
+  border-color: transparent;
+  background-color: var(--ac-tag-alt-1-filled-bg, var(--a-surface-alt-1));
+  color: var(--ac-tag-alt-1-filled-text, var(--a-text-on-alt-1));
+}
+
+.navds-tag--alt1-moderate {
+  border-color: transparent;
+  background-color: var(--ac-tag-alt-1-moderate-bg, var(--a-surface-alt-1-moderate));
+  color: var(--ac-tag-alt-1-moderate-text, var(--a-text-default));
+}
+
+.navds-tag--alt2 {
+  border-color: var(--ac-tag-alt-2-border, var(--a-border-alt-2));
+  background-color: var(--ac-tag-alt-2-bg, var(--a-surface-alt-2-subtle));
+  color: var(--ac-tag-alt-2-text, var(--a-text-default));
+}
+
+.navds-tag--alt2-filled {
+  border-color: transparent;
+  background-color: var(--ac-tag-alt-2-filled-bg, var(--a-surface-alt-2));
+  color: var(--ac-tag-alt-2-filled-text, var(--a-text-on-alt-2));
+}
+
+.navds-tag--alt2-moderate {
+  border-color: transparent;
+  background-color: var(--ac-tag-alt-2-moderate-bg, var(--a-surface-alt-2-moderate));
+  color: var(--ac-tag-alt-2-moderate-text, var(--a-text-default));
+}
+
+.navds-tag--alt3 {
+  border-color: var(--ac-tag-alt-3-border, var(--a-border-alt-3));
+  background-color: var(--ac-tag-alt-3-bg, var(--a-surface-alt-3-subtle));
+  color: var(--ac-tag-alt-3-text, var(--a-text-default));
+}
+
+.navds-tag--alt3-filled {
+  border-color: transparent;
+  background-color: var(--ac-tag-alt-3-filled-bg, var(--a-surface-alt-3));
+  color: var(--ac-tag-alt-3-filled-text, var(--a-text-on-alt-3));
+}
+
+.navds-tag--alt3-moderate {
+  border-color: transparent;
+  background-color: var(--ac-tag-alt-3-moderate-bg, var(--a-surface-alt-3-moderate));
+  color: var(--ac-tag-alt-3-moderate-text, var(--a-text-default));
+}
+
+@media (forced-colors: active) {
+  .navds-tag {
+    forced-color-adjust: none;
+  }
+
+  .navds-tag--neutral,
+  .navds-tag--neutral-moderate {
+    border-color: canvastext;
+    color: canvastext;
+  }
+}

@navikt/core/css/darkside/timeline.darkside.css

@@ -0,0 +1,449 @@
+.navds-timeline {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  width: 100%;
+  min-width: fit-content;
+  align-items: center;
+}
+
+.navds-timeline__axislabels {
+  position: relative;
+  height: 1rem;
+  box-sizing: content-box;
+  grid-column: 2;
+  margin-bottom: var(--a-spacing-1);
+}
+
+.navds-timeline__row-label {
+  white-space: nowrap;
+  width: auto;
+  margin-right: var(--a-spacing-4);
+  grid-column: 1;
+  min-height: 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: var(--a-spacing-2);
+}
+
+.navds-timeline__row-label:where(:nth-last-child(2)) {
+  align-self: flex-end;
+}
+
+.navds-timeline__axislabels-label {
+  position: absolute;
+  color: var(--ac-timeline-axislabel-text, var(--a-text-subtle));
+  white-space: nowrap;
+}
+
+.navds-timeline__row {
+  display: flex;
+  background: var(--ac-timeline-row-bg, var(--a-surface-subtle));
+  margin: var(--a-spacing-4) 0;
+  grid-column: 2;
+}
+
+.navds-timeline__row--active {
+  background: var(--ac-timeline-row-active-bg, var(--a-surface-selected));
+}
+
+.navds-timeline__row:last-of-type {
+  margin-bottom: 0;
+}
+
+.navds-timeline__row-periods {
+  min-height: 1.5rem;
+  position: relative;
+  width: 100%;
+  margin: 0;
+}
+
+.navds-timeline__row-periods > li {
+  list-style-type: none;
+}
+
+.navds-timeline__row-periods:focus {
+  outline: none;
+}
+
+.navds-timeline__period {
+  height: 100%;
+  border-radius: var(--a-border-radius-full);
+  position: absolute;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  z-index: 2;
+  border: none;
+  font-size: 1rem;
+}
+
+.navds-timeline__period--inner {
+  margin: 0 var(--a-spacing-1);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: clip;
+  text-align: left;
+  display: flex;
+  align-items: center;
+}
+
+.navds-timeline__period--inner svg {
+  flex-shrink: 0;
+}
+
+.navds-timeline__period--clickable {
+  cursor: pointer;
+}
+
+.navds-timeline__period--success {
+  background: var(--ac-timeline-period-success-bg, var(--a-surface-success-subtle));
+  box-shadow: inset 0 0 0 1px var(--ac-timeline-period-success-border, var(--a-border-success));
+}
+
+.navds-timeline__period--success.navds-timeline__period--clickable:hover {
+  background: var(--a-surface-success-subtle-hover);
+  background: var(--ac-timeline-period-success-bg-hover, var(--a-surface-success-subtle-hover));
+}
+
+.navds-timeline__period--warning {
+  background: var(--ac-timeline-period-warning-bg, var(--a-surface-warning-subtle));
+  box-shadow: inset 0 0 0 1px var(--ac-timeline-period-warning-border, var(--a-border-warning));
+}
+
+.navds-timeline__period--warning.navds-timeline__period--clickable:hover {
+  background: var(--ac-timeline-period-warning-bg-hover, var(--a-surface-warning-subtle-hover));
+}
+
+.navds-timeline__period--danger {
+  background: var(--ac-timeline-period-danger-bg, var(--a-surface-danger-subtle));
+  box-shadow: inset 0 0 0 1px var(--ac-timeline-period-danger-border, var(--a-border-danger));
+}
+
+.navds-timeline__period--danger.navds-timeline__period--clickable:hover {
+  background: var(--ac-timeline-period-danger-bg-hover, var(--a-surface-danger-subtle-hover));
+}
+
+.navds-timeline__period--info {
+  background: var(--ac-timeline-period-info-bg, var(--a-surface-info-subtle));
+  box-shadow: inset 0 0 0 1px var(--ac-timeline-period-info-border, var(--a-border-info));
+}
+
+.navds-timeline__period--info.navds-timeline__period--clickable:hover {
+  background: var(--ac-timeline-period-info-bg-hover, var(--a-surface-info-subtle-hover));
+}
+
+.navds-timeline__period--neutral {
+  background: var(--ac-timeline-period-neutral-bg, var(--a-bg-subtle));
+  box-shadow: inset 0 0 0 1px var(--ac-timeline-period-neutral-border, var(--a-border-default));
+}
+
+.navds-timeline__period--neutral.navds-timeline__period--clickable:hover {
+  background: var(--ac-timeline-period-neutral-bg-hover, var(--a-gray-200));
+}
+
+.navds-timeline__period--connected-both {
+  border-radius: 0;
+}
+
+.navds-timeline__period--connected-right {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.navds-timeline__period--connected-left {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
+
+.navds-timeline__period--selected {
+  box-shadow: inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected));
+  z-index: 3;
+}
+
+.navds-timeline__pin-wrapper {
+  position: absolute;
+  grid-column: 2;
+  top: 0;
+  z-index: 1;
+  height: 100%;
+  display: flex;
+  flex-direction: column-reverse;
+  isolation: isolate;
+
+  --navdsc-timeline-pin-size: 0.9rem;
+}
+
+.navds-timeline__pin-button {
+  border: none;
+  cursor: pointer;
+  background: var(--a-surface-default);
+  box-shadow:
+    inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+    0 0 0 4px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+    0 0 0 5px var(--a-surface-default);
+  z-index: 2;
+  border-radius: var(--a-border-radius-full);
+  padding: var(--a-spacing-1);
+  position: relative;
+}
+
+.navds-timeline__pin-button::before {
+  content: "";
+  inset: 0;
+  position: absolute;
+  width: 25px;
+  height: 25px;
+  border-radius: var(--a-border-radius-full);
+  left: calc(-12.5px + 3.5px);
+  top: calc(-12.5px + 3.5px);
+}
+
+.navds-timeline__pin-button:focus-visible {
+  box-shadow:
+    inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+    0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+    0 0 0 4px var(--a-surface-default),
+    0 0 0 6px var(--a-border-focus);
+  outline: none;
+}
+
+.navds-timeline__pin-button:hover {
+  box-shadow:
+    inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+    0 0 0 4px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+    0 0 0 5px var(--a-surface-default);
+}
+
+.navds-timeline__pin-button:hover:focus-visible {
+  box-shadow:
+    inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+    0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+    0 0 0 4px var(--a-surface-default),
+    0 0 0 6px var(--a-border-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-timeline__pin-button:focus {
+    box-shadow:
+      inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+      0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+      0 0 0 4px var(--a-surface-default),
+      0 0 0 6px var(--a-border-focus);
+    outline: none;
+  }
+
+  .navds-timeline__pin-button:hover:focus {
+    box-shadow:
+      inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+      0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+      0 0 0 4px var(--a-surface-default),
+      0 0 0 6px var(--a-border-focus);
+  }
+}
+
+.navds-timeline__pin-wrapper::before {
+  content: "";
+  top: var(--navdsc-timeline-pin-size);
+  height: calc(100% - var(--navdsc-timeline-pin-size) * 2);
+  width: 1px;
+  margin: 0 auto;
+  background: var(--a-surface-inverted);
+}
+
+.navds-timeline__zoom {
+  margin-top: var(--a-spacing-6);
+  float: right;
+  display: flex;
+  list-style-type: none;
+}
+
+.navds-timeline__zoom-button {
+  all: unset;
+  cursor: pointer;
+  padding: 6px 9px 6px 8px;
+  border: 1px solid var(--ac-timeline-zoom-border, var(--a-border-default));
+  border-width: 1px 0 1px 1px;
+  background: var(--ac-timeline-zoom-bg, var(--a-surface-default));
+}
+
+.navds-timeline__zoom li:first-child .navds-timeline__zoom-button {
+  border-radius: var(--a-border-radius-medium) 0 0 var(--a-border-radius-medium);
+}
+
+.navds-timeline__zoom li:last-child .navds-timeline__zoom-button {
+  border-width: 1px;
+  border-radius: 0 var(--a-border-radius-medium) var(--a-border-radius-medium) 0;
+}
+
+.navds-timeline__zoom li:only-child .navds-timeline__zoom-button {
+  border-radius: var(--a-border-radius-medium);
+}
+
+.navds-timeline__zoom-button:not([aria-pressed="true"]):hover {
+  background: var(--ac-timeline-zoom-bg-hover, var(--a-surface-action-subtle-hover));
+}
+
+.navds-timeline__zoom-button[aria-pressed="true"] {
+  background: var(--ac-timeline-zoom-selected-bg, var(--a-surface-inverted));
+  color: var(--ac-timeline-zoom-selected-text, var(--a-text-on-inverted));
+}
+
+.navds-timeline__period:focus-visible {
+  outline: none;
+  z-index: 4;
+  box-shadow: 0 0 0 2px var(--a-border-focus);
+}
+
+.navds-timeline__period--selected:focus-visible {
+  box-shadow:
+    inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
+    0 0 0 2px var(--a-border-focus);
+  z-index: 3;
+}
+
+.navds-timeline__zoom li:focus-within {
+  z-index: var(--a-z-index-focus);
+}
+
+.navds-timeline__zoom-button:focus-visible {
+  box-shadow:
+    0 0 0 1px var(--a-surface-default),
+    0 0 0 3px var(--a-border-focus);
+  border-width: 1px;
+}
+
+.navds-timeline__zoom li:not(:last-child) .navds-timeline__zoom-button:focus-visible {
+  margin-right: 2px;
+  padding-right: 6px;
+}
+
+@supports not selector(:focus-visible) {
+  .navds-timeline__period:focus {
+    outline: none;
+    z-index: 4;
+    box-shadow: 0 0 0 2px var(--a-border-focus);
+  }
+
+  .navds-timeline__period--selected:focus {
+    box-shadow:
+      inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
+      0 0 0 2px var(--a-border-focus);
+    z-index: 3;
+  }
+
+  .navds-timeline__zoom-button:focus {
+    box-shadow:
+      0 0 0 1px var(--a-surface-default),
+      0 0 0 3px var(--a-border-focus);
+    border-width: 1px;
+  }
+
+  .navds-timeline__zoom li:not(:last-child) .navds-timeline__zoom-button:focus {
+    margin-right: 2px;
+    padding-right: 6px;
+  }
+}
+
+/**
+* Timeline Popover
+*/
+
+.navds-timeline__popover {
+  z-index: var(--a-z-index-popover);
+  background-color: var(--ac-popover-bg, var(--a-surface-default));
+  box-shadow: var(--a-shadow-medium);
+  border: 1px solid;
+  border-color: var(--ac-popover-border, var(--a-border-default));
+  border-radius: var(--a-border-radius-large);
+  padding: var(--a-spacing-3);
+}
+
+.navds-timeline__popover:focus {
+  outline: none;
+}
+
+.navds-timeline__popover-arrow {
+  position: absolute;
+  z-index: -1;
+  transform: rotate(45deg);
+  background-color: var(--ac-popover-bg, var(--a-surface-default));
+  border: 1px solid;
+  border-color: var(--ac-popover-border, var(--a-border-default));
+  width: 1rem;
+  height: 1rem;
+}
+
+.navds-timeline__popover[data-placement^="top"] > .navds-timeline__popover-arrow {
+  border-left-color: transparent;
+  border-top-color: transparent;
+}
+
+.navds-timeline__popover[data-placement^="bottom"] > .navds-timeline__popover-arrow {
+  border-bottom-color: transparent;
+  border-right-color: transparent;
+}
+
+.navds-timeline__popover[data-placement^="left"] > .navds-timeline__popover-arrow {
+  border-left-color: transparent;
+  border-bottom-color: transparent;
+}
+
+.navds-timeline__popover[data-placement^="right"] > .navds-timeline__popover-arrow {
+  border-right-color: transparent;
+  border-top-color: transparent;
+}
+
+@media (forced-colors: active) {
+  .navds-timeline__period:focus {
+    outline: 2px solid highlight;
+    outline-offset: 2px;
+  }
+
+  .navds-timeline__period--success,
+  .navds-timeline__period--warning,
+  .navds-timeline__period--info,
+  .navds-timeline__period--neutral,
+  .navds-timeline__period--danger {
+    forced-color-adjust: none;
+  }
+
+  .navds-timeline__row {
+    border: 1px solid transparent;
+  }
+
+  .navds-timeline__pin-wrapper::before {
+    border: 1px solid transparent;
+  }
+
+  .navds-timeline__pin-button {
+    outline: 4px solid transparent;
+  }
+
+  .navds-timeline__pin-button:focus,
+  .navds-timeline__pin-button:focus-visible {
+    outline: 4px solid highlight;
+    outline-offset: 2px;
+    box-shadow: none;
+  }
+
+  .navds-timeline__popover[data-placement^="top"] > .navds-timeline__popover-arrow {
+    border-left-color: canvas;
+    border-top-color: canvas;
+  }
+
+  .navds-timeline__popover[data-placement^="bottom"] > .navds-timeline__popover-arrow {
+    border-bottom-color: canvas;
+    border-right-color: canvas;
+  }
+
+  .navds-timeline__popover[data-placement^="left"] > .navds-timeline__popover-arrow {
+    border-left-color: canvas;
+    border-bottom-color: canvas;
+  }
+
+  .navds-timeline__popover[data-placement^="right"] > .navds-timeline__popover-arrow {
+    border-right-color: canvas;
+    border-top-color: canvas;
+  }
+}

@navikt/core/css/darkside/toggle-group.darkside.css

@@ -0,0 +1,113 @@
+.navds-toggle-group__wrapper {
+  display: grid;
+  justify-items: start;
+  gap: var(--ax-spacing-2);
+}
+
+.navds-toggle-group__wrapper--fill {
+  justify-items: initial;
+}
+
+/* Main Togglegroup */
+.navds-toggle-group {
+  border-radius: var(--ax-border-radius-medium);
+  background-color: transparent;
+  box-shadow: inset 0 0 0 1px var(--ax-border-default);
+  padding: var(--ax-spacing-1);
+  gap: var(--ax-spacing-1);
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+}
+
+/* Button */
+.navds-toggle-group__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--ax-spacing-1) var(--ax-spacing-3);
+  min-height: 2.5rem;
+  border: none;
+  cursor: pointer;
+  background-color: transparent;
+  color: var(--ax-text-default);
+  border-radius: var(--ax-border-radius-small);
+  min-width: fit-content;
+
+  &:hover {
+    background-color: var(--ax-bg-accent-moderate-hoverA);
+    color: var(--ax-text-default);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+  }
+
+  &[aria-checked="true"] {
+    background-color: var(--ax-bg-accent-strong-pressed);
+    color: var(--ax-text-accent-contrast);
+  }
+}
+
+.navds-toggle-group__button-inner {
+  display: flex;
+  align-items: center;
+  gap: var(--ax-spacing-2);
+
+  > * {
+    flex-shrink: 0;
+  }
+
+  > svg {
+    font-size: var(--ax-font-size-heading-medium);
+  }
+}
+
+/* Modifier neutral variant */
+:where(.navds-toggle-group--neutral) .navds-toggle-group__button {
+  &:hover {
+    background-color: var(--ax-bg-neutral-moderate-hoverA);
+  }
+
+  &[aria-checked="true"] {
+    background-color: var(--ax-bg-neutral-strong-pressed);
+    color: var(--ax-text-neutral-contrast);
+  }
+}
+
+/* Modifier small size */
+.navds-toggle-group--small {
+  & .navds-toggle-group__button {
+    padding: var(--ax-spacing-05) var(--ax-spacing-3);
+    min-height: 1.5rem;
+  }
+
+  & .navds-toggle-group__button-inner > svg {
+    font-size: var(--ax-font-size-xlarge);
+  }
+}
+
+/* High contrast */
+@media (forced-colors: active) {
+  .navds-toggle-group {
+    border: 2px solid transparent;
+  }
+
+  .navds-toggle-group__button[aria-checked="true"]:hover,
+  .navds-toggle-group__button:hover {
+    background-color: highlighttext;
+    color: highlight;
+    outline: 1px solid highlight;
+  }
+
+  .navds-toggle-group__button[aria-checked="true"] {
+    background-color: selecteditem;
+    color: selecteditemtext;
+    forced-color-adjust: none;
+  }
+
+  .navds-toggle-group__button:focus-visible {
+    outline-color: highlight;
+  }
+}

@navikt/core/css/darkside/tooltip.darkside.css

@@ -0,0 +1,81 @@
+@keyframes tooltipFadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.navds-tooltip {
+  z-index: var(--a-z-index-tooltip);
+  background-color: var(--ac-tooltip-bg, var(--a-surface-inverted));
+  color: var(--ac-tooltip-text, var(--a-text-on-inverted));
+  border-radius: var(--a-border-radius-small);
+  padding: 0 var(--a-spacing-2);
+  align-items: center;
+  filter: drop-shadow(0 2px 4px rgba(0 0 0 / 0.1)) drop-shadow(0 4px 6px rgba(0 0 0 / 0.1));
+  display: flex;
+  flex-direction: column;
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  animation-duration: 0.2s;
+  animation-name: tooltipFadeIn;
+  text-align: center;
+}
+
+.navds-tooltip__arrow {
+  height: 0.4375rem;
+  width: 0.4375rem;
+  transform: rotate(45deg);
+  z-index: -1;
+  background-color: var(--ac-tooltip-bg, var(--a-surface-inverted));
+  position: absolute;
+}
+
+.navds-tooltip__keys {
+  padding-bottom: var(--a-spacing-1);
+  display: flex;
+  gap: var(--a-spacing-1);
+}
+
+.navds-tooltip__key {
+  font-family: var(--a-font-family);
+  background-color: var(--ac-tooltip-key-bg, var(--a-surface-neutral));
+  color: var(--ac-tooltip-key-text, var(--a-text-on-inverted));
+  border-radius: var(--a-border-radius-small);
+  padding: 0 var(--a-spacing-1);
+  min-width: 1.125rem;
+  height: 1.125rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@media (forced-colors: active) {
+  .navds-tooltip {
+    --__a-tooltip-high-contrast-border: 1px solid transparent;
+
+    border: var(--__a-tooltip-high-contrast-border);
+  }
+
+  .navds-tooltip[data-side="top"] .navds-tooltip__arrow {
+    border-bottom: var(--__a-tooltip-high-contrast-border);
+    border-right: var(--__a-tooltip-high-contrast-border);
+  }
+
+  .navds-tooltip[data-side="right"] .navds-tooltip__arrow {
+    border-bottom: var(--__a-tooltip-high-contrast-border);
+    border-left: var(--__a-tooltip-high-contrast-border);
+  }
+
+  .navds-tooltip[data-side="bottom"] .navds-tooltip__arrow {
+    border-left: var(--__a-tooltip-high-contrast-border);
+    border-top: var(--__a-tooltip-high-contrast-border);
+  }
+
+  .navds-tooltip[data-side="left"] .navds-tooltip__arrow {
+    border-top: var(--__a-tooltip-high-contrast-border);
+    border-right: var(--__a-tooltip-high-contrast-border);
+  }
+}

@navikt/core/css/darkside/typography.darkside.css

@@ -1,6 +1,259 @@
+/* stylelint-disable csstools/value-no-unknown-custom-properties */
+
+/* ------------------------- Global typo-definitions ------------------------ */
 body,
 :host {
   font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
   line-height: 1.333;
   font-size: 1.125rem;
 }
+
+/* ----------------------------- Typo-components ---------------------------- */
+
+/* Heading */
+.navds-heading {
+  font-weight: var(--ax-font-weight-bold);
+  margin: 0;
+}
+
+.navds-heading--xlarge {
+  font-size: var(--ax-font-size-heading-2xlarge);
+  letter-spacing: -0.01em;
+  line-height: var(--ax-font-line-height-heading-2xlarge);
+}
+
+.navds-heading--xlarge.navds-typo--spacing {
+  margin-bottom: var(--ax-spacing-5);
+}
+
+.navds-heading--large {
+  font-size: var(--ax-font-size-heading-xlarge);
+  letter-spacing: -0.008em;
+  line-height: var(--ax-font-line-height-heading-xlarge);
+}
+
+.navds-heading--large.navds-typo--spacing {
+  margin-bottom: var(--ax-spacing-4);
+}
+
+/* Mobile scale */
+@media (max-width: 480px) {
+  .navds-heading--xlarge {
+    font-size: var(--ax-font-size-heading-xlarge);
+    letter-spacing: -0.008em;
+    line-height: var(--ax-font-line-height-heading-xlarge);
+  }
+
+  .navds-heading--xlarge.navds-typo--spacing {
+    margin-bottom: var(--ax-spacing-4);
+  }
+
+  .navds-heading--large {
+    font-size: var(--ax-font-size-heading-large);
+    letter-spacing: -0.004em;
+    line-height: var(--ax-font-line-height-heading-large);
+  }
+
+  .navds-heading--large.navds-typo--spacing {
+    margin-bottom: var(--ax-spacing-3);
+  }
+}
+
+.navds-heading--medium {
+  font-size: var(--ax-font-size-heading-medium);
+  letter-spacing: -0.002em;
+  line-height: var(--ax-font-line-height-heading-medium);
+}
+
+.navds-heading--medium.navds-typo--spacing {
+  margin-bottom: var(--ax-spacing-3);
+}
+
+.navds-heading--small {
+  font-size: var(--ax-font-size-heading-small);
+  letter-spacing: -0.001em;
+  line-height: var(--ax-font-line-height-heading-small);
+}
+
+.navds-heading--small.navds-typo--spacing {
+  margin-bottom: var(--ax-spacing-3);
+}
+
+.navds-heading--xsmall {
+  font-size: var(--ax-font-size-heading-xsmall);
+  letter-spacing: -0.001em;
+  line-height: var(--ax-font-line-height-heading-xsmall);
+}
+
+.navds-heading--xsmall.navds-typo--spacing {
+  margin-bottom: var(--ax-spacing-3);
+}
+
+/* Ingress */
+.navds-ingress {
+  font-size: var(--ax-font-size-xlarge);
+  font-weight: var(--ax-font-weight-regular);
+  letter-spacing: -0.001em;
+  line-height: var(--ax-font-line-height-xlarge);
+  margin: 0;
+}
+
+.navds-ingress.navds-typo--spacing {
+  margin-bottom: var(--ax-spacing-10);
+}
+
+/* Body */
+.navds-body-long {
+  font-size: var(--ax-font-size-large);
+  font-weight: var(--ax-font-weight-regular);
+  letter-spacing: 0;
+  line-height: var(--ax-font-line-height-xlarge);
+  margin: 0;
+}
+
+.navds-body-long.navds-typo--spacing {
+  margin-bottom: var(--ax-spacing-7);
+}
+
+.navds-body-long--large {
+  font-size: var(--ax-font-size-xlarge);
+  letter-spacing: -0.0013em;
+  line-height: var(--ax-font-line-height-xlarge);
+}
+
+.navds-body-long--large.navds-typo--spacing {
+  margin-bottom: var(--ax-spacing-10);
+}
+
+.navds-body-long--small {
+  font-size: var(--ax-font-size-medium);
+  letter-spacing: 0.002em;
+  line-height: var(--ax-font-line-height-large);
+}
+
+.navds-body-long--small.navds-typo--spacing {
+  margin-bottom: var(--ax-spacing-6);
+}
+
+.navds-body-short {
+  font-size: var(--ax-font-size-large);
+  font-weight: var(--ax-font-weight-regular);
+  letter-spacing: 0;
+  line-height: var(--ax-font-line-height-large);
+  margin: 0;
+}
+
+.navds-body-short.navds-typo--spacing {
+  margin-bottom: var(--ax-spacing-3);
+}
+
+.navds-body-short--large {
+  font-size: var(--ax-font-size-xlarge);
+  letter-spacing: -0.0013em;
+  line-height: var(--ax-font-line-height-large);
+}
+
+.navds-body-short--large.navds-typo--spacing {
+  margin-bottom: var(--ax-spacing-4);
+}
+
+.navds-body-short--small {
+  font-size: var(--ax-font-size-medium);
+  letter-spacing: 0.002em;
+  line-height: var(--ax-font-line-height-medium);
+}
+
+.navds-body-short--small.navds-typo--spacing {
+  margin-bottom: var(--ax-spacing-2);
+}
+
+/* Label */
+.navds-label {
+  font-size: var(--ax-font-size-large);
+  font-weight: var(--ax-font-weight-bold);
+  letter-spacing: 0;
+  line-height: var(--ax-font-line-height-large);
+  margin: 0;
+}
+
+.navds-label.navds-typo--spacing {
+  margin-bottom: var(--ax-spacing-3);
+}
+
+.navds-label--small {
+  font-size: var(--ax-font-size-medium);
+  letter-spacing: 0.002em;
+  line-height: var(--ax-font-line-height-medium);
+}
+
+.navds-label--small.navds-typo--spacing {
+  margin-bottom: var(--ax-spacing-2);
+}
+
+/* Small text */
+.navds-detail {
+  font-size: var(--ax-font-size-small);
+  letter-spacing: 0.004em;
+  line-height: var(--ax-font-line-height-medium);
+  margin: 0;
+}
+
+.navds-detail.navds-typo--spacing {
+  margin-bottom: var(--ax-spacing-2);
+}
+
+.navds-detail.navds-typo--uppercase {
+  text-transform: uppercase;
+}
+
+.navds-detail--small {
+  font-weight: var(--ax-font-weight-regular);
+}
+
+.navds-detail--small.navds-typo--spacing {
+  margin-bottom: var(--ax-spacing-2);
+}
+
+.navds-error-message {
+  color: var(--ax-text-danger);
+}
+
+/* -------------------------------- Utilities ------------------------------- */
+.navds-typo--truncate {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.navds-typo--semibold {
+  font-weight: var(--ax-font-weight-bold);
+}
+
+.navds-typo--align-start {
+  text-align: start;
+}
+
+.navds-typo--align-center {
+  text-align: center;
+}
+
+.navds-typo--align-end {
+  text-align: end;
+}
+
+.navds-typo--visually-hidden {
+  border: 0 !important;
+  clip: rect(0, 0, 0, 0) !important;
+  height: 1px !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  top: 0 !important;
+  position: absolute !important;
+  white-space: nowrap !important;
+  width: 1px !important;
+}
+
+.navds-typo--color-subtle {
+  color: var(--ax-text-subtle);
+}