Version Packages (#3340 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Chore: Fix npm/github version mismatch
2026-10-13 01:02:02 +00:00 · 2024-11-08 12:14:52 +01:00 · 2024-11-08 12:12:35 +01:00 · 2024-11-08 11:54:36 +01:00 · 2024-11-08 11:28:25 +01:00 · 2024-11-08 10:52:51 +01:00
282 changed files with 12371 additions and 2585 deletions
@@ -6,6 +6,14 @@
 * - We should add "plugin:react/jsx-runtime", but not sure if this will cause problems for projects not using the new JSX transform
 * - Consider adding the rule "id-length"
 */
+
+/**
+ * V9 migration WIP
+ * - eslint-plugin-storybook does not support v9 yet: https://github.com/storybookjs/eslint-plugin-storybook/issues/157
+ * - eslint-plugin-testing-library does not support v9 yet: https://github.com/testing-library/eslint-plugin-testing-library/issues?q=is%3Aissue+is%3Aopen+v9
+ * - @vitest/eslint-plugin supports v9, just need to replace @vitest/legacy-recommended: https://github.com/vitest-dev/eslint-plugin-vitest?tab=readme-ov-file#usage
+ * - Looks like @typescript-eslint/eslint-plugin and @typescript-eslint/parser can both be replaced by just typescript-eslint in v9: https://typescript-eslint.io/getting-started#step-2-configuration
+ */
 module.exports = {
  env: {
    browser: true,
@@ -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`)
@@ -34,9 +34,6 @@ jobs:
      - name: Install dependencies
        run: yarn

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

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

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

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

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

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

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

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

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

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

-const ModeDecorator = ({ children, mode }) => {
+const ModeDecorator = ({ children, mode, theme }) => {
  useLayoutEffect(() => {
    const style = document.createElement("style");
    style.innerHTML = mode === "darkside" ? darksideCss : defaultCss;
    document.head.appendChild(style);

    if (mode === "darkside") {
-      document.body.style.setProperty("background", "var(--a-bg-default)");
+      document.body.style.setProperty("background", "var(--ax-bg-default)");
    }

    return () => {
@@ -59,10 +60,21 @@ const ModeDecorator = ({ children, mode }) => {
    };
  }, [mode]);

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

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

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

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

+## 7.5.1
+
+## 7.5.0
+
+## 7.4.3
+
+## 7.4.2
+
+## 7.4.1
+
+## 7.4.0
+
+## 7.3.1
+
 ## 7.3.0

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

+## 7.5.1
+
+### Patch Changes
+
+- Chore: Manually bump version to sync npm and github-releases ([`aa7c2d9`](https://github.com/navikt/aksel/commit/aa7c2d9598434d6304432daa20e0a1eeedd03b1b))
+
+- Updated dependencies []:
+  - @navikt/ds-css@7.5.1
+
+## 7.5.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@7.5.0
+
+## 7.4.3
+
+### Patch Changes
+
+- Updated dependencies [[`6d9f900`](https://github.com/navikt/aksel/commit/6d9f9001fed4ccfa4245ab97399b24012ceb9edf)]:
+  - @navikt/ds-css@7.4.3
+
+## 7.4.2
+
+### Patch Changes
+
+- 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
+
+- Updated dependencies []:
+  - @navikt/ds-css@7.4.0
+
+## 7.3.1
+
+### Patch Changes
+
+- Updated dependencies [[`64aab73`](https://github.com/navikt/aksel/commit/64aab7361a512af93d93825c0b5c98a6fd39cf95)]:
+  - @navikt/ds-css@7.3.1
+
 ## 7.3.0

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

+## 7.5.1
+
+## 7.5.0
+
+## 7.4.3
+
+### Patch Changes
+
+- Table.ColumnHeader: Inherit text alignment in button ([#3319](https://github.com/navikt/aksel/pull/3319))
+
+## 7.4.2
+
+## 7.4.1
+
+### 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
+
+### Patch Changes
+
+- Updated to Selectors Level 4 syntax. ([#3250](https://github.com/navikt/aksel/pull/3250))
+
 ## 7.3.0

 ### Minor Changes
@@ -1,6 +1,6 @@
 /* https://web.dev/prefers-reduced-motion/ */
@media (prefers-reduced-motion: reduce) {
-  *:not(.navds-loader *):not(.navds-loader):not(.navds-progress-bar *):not(.navds-progress-bar),
+  *:not(.navds-loader *, .navds-loader, .navds-progress-bar *, .navds-progress-bar),
  ::before,
  ::after {
    animation-delay: -1ms !important;
@@ -154,6 +154,7 @@
    inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--__ac-button-primary-focus-border, var(--a-surface-default))),
    var(--a-shadow-focus);
 }
+
@media (forced-colors: active) {
  .navds-button--primary:focus-visible {
    box-shadow: none;
@@ -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;
+  }
+}
@@ -0,0 +1,206 @@
+/* --------------------------- ActionMenu content --------------------------- */
+.navds-action-menu__content {
+  overflow: hidden;
+  border-radius: var(--ax-border-radius-large);
+  border: 1px solid var(--ax-border-subtleA);
+
+  /* TODO: Use token here when added */
+  box-shadow:
+    0 0 1px 0 rgb(7 9 13/ 0.02),
+    0 2px 5px 0 rgb(7 9 13/ 0.1),
+    0 10px 16px 0 rgb(7 9 13/ 0.12);
+  transition: transform 250ms cubic-bezier(0, 0, 0, 1) allow-discrete;
+
+  &[data-state="open"] {
+    &[data-side="bottom"] {
+      @starting-style {
+        transform: translateY(-4px);
+      }
+    }
+
+    &[data-side="top"] {
+      @starting-style {
+        transform: translateY(4px);
+      }
+    }
+
+    &[data-side="right"] {
+      @starting-style {
+        transform: translateX(-4px);
+      }
+    }
+
+    &[data-side="left"] {
+      @starting-style {
+        transform: translateX(4px);
+      }
+    }
+  }
+}
+
+.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;
+}
@@ -0,0 +1,115 @@
+.navds-alert {
+  border-radius: var(--ax-border-radius-xlarge);
+  border: 1px solid;
+  padding: var(--ax-spacing-4);
+  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-2) var(--ax-spacing-4);
+  gap: var(--ax-spacing-2);
+
+  > .navds-alert__icon {
+    margin-block-start: 0;
+    height: var(--ax-font-line-height-large);
+  }
+}
+
+/* ----------------------------- Alert variants ----------------------------- */
+.navds-alert--info {
+  border-color: var(--ax-border-info);
+  background-color: var(--ax-bg-info-moderate);
+
+  > .navds-alert__icon {
+    color: var(--ax-text-info-icon);
+  }
+}
+
+.navds-alert--success {
+  border-color: var(--ax-border-success);
+  background-color: var(--ax-bg-success-moderate);
+
+  > .navds-alert__icon {
+    color: var(--ax-text-success-icon);
+  }
+}
+
+.navds-alert--warning {
+  border-color: var(--ax-border-warning);
+  background-color: var(--ax-bg-warning-moderate);
+
+  > .navds-alert__icon {
+    color: var(--ax-text-warning-icon);
+  }
+}
+
+.navds-alert--error {
+  border-color: var(--ax-border-danger);
+  background-color: var(--ax-bg-danger-moderate);
+
+  > .navds-alert__icon {
+    color: var(--ax-text-danger-icon);
+  }
+}
+
+/* ----------------------------- Alert fullwidth ---------------------------- */
+.navds-alert--full-width {
+  border-radius: 0;
+}
+
+/* ------------------------------ 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);
+    }
+  }
+}
@@ -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;
+  }
 }
@@ -4,7 +4,7 @@

 /* https://web.dev/prefers-reduced-motion/ */
@media (prefers-reduced-motion: reduce) {
-  *:not(.navds-loader *):not(.navds-loader):not(.navds-progress-bar *):not(.navds-progress-bar),
+  *:not(.navds-loader *, .navds-loader, .navds-progress-bar *, .navds-progress-bar),
  ::before,
  ::after {
    animation-delay: -1ms !important;
@@ -1,6 +1,320 @@
-/* stylelint-disable csstools/value-no-unknown-custom-properties */
-/* stylelint-disable aksel/design-token-exists */
-
 .navds-button {
-  background-color: var(--a-bg-accent-strong);
+  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);
+}
+
+.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.navds-button--icon-only {
+  padding: var(--ax-spacing-1);
+}
+
+.navds-button--xsmall.navds-button--icon-only {
+  padding: var(--ax-spacing-05);
+}
+
+.navds-button:focus-visible {
+  outline: 4px solid var(--ax-border-focus);
+  outline-offset: 2px;
+}
+
+@supports not selector(:focus-visible) {
+  .navds-button:focus {
+    outline: 4px solid var(--ax-border-focus);
+  }
+}
+
+.navds-button__icon {
+  font-size: 1.5rem;
+  display: flex;
+
+  --__axc-button-icon-margin: -4px;
+}
+
+.navds-button__icon:first-child {
+  margin-left: var(--__axc-button-icon-margin);
+}
+
+.navds-button__icon:last-child {
+  margin-right: var(--__axc-button-icon-margin);
+}
+
+:where(.navds-button--xsmall, .navds-button--small) .navds-button__icon {
+  --__axc-button-icon-margin: -2px;
+
+  font-size: 1.25rem;
+}
+
+.navds-button__icon:only-child {
+  margin: 0;
+}
+
+/*************************
+ * .navds-button--primary *
+ *************************/
+
+.navds-button--primary {
+  background-color: var(--ax-bg-accent-strong);
+  color: var(--ax-text-accent-contrast);
+}
+
+@media (forced-colors: active) {
+  .navds-button.navds-button--primary {
+    background-color: highlight;
+    color: highlighttext;
+  }
+
+  .navds-button.navds-button--primary span {
+    forced-color-adjust: none;
+  }
+}
+
+.navds-button--primary:hover {
+  background-color: var(--ax-bg-accent-strong-hover);
+}
+
+.navds-button--primary:active {
+  background-color: var(--ax-bg-accent-strong-pressed);
+}
+
+.navds-button--primary:hover:where(:disabled, .navds-button--disabled),
+.navds-button--primary:active:where(:disabled, .navds-button--disabled) {
+  background-color: var(--ax-bg-accent-strong);
+}
+
+/*************************
+ * .navds-button--primary-neutral *
+ *************************/
+
+.navds-button--primary-neutral {
+  background-color: var(--ax-bg-neutral-strong);
+  color: var(--ax-text-neutral-contrast);
+}
+
+.navds-button--primary-neutral:hover {
+  background-color: var(--ax-bg-neutral-strong-hover);
+}
+
+.navds-button--primary-neutral:active {
+  background-color: var(--ax-bg-neutral-strong-pressed);
+}
+
+.navds-button--primary-neutral:hover:where(:disabled, .navds-button--disabled),
+.navds-button--primary-neutral:active:where(:disabled, .navds-button--disabled) {
+  background-color: var(--ax-bg-neutral-strong);
+}
+
+/**************************
+* .navds-button--secondary *
+ **************************/
+
+.navds-button--secondary {
+  background-color: transparent;
+  color: var(--ax-text-accent);
+  box-shadow: inset 0 0 0 2px var(--ax-border-accent);
+}
+
+.navds-button--secondary:hover {
+  background-color: var(--ax-bg-accent-moderate-hoverA);
+  color: var(--ax-bg-accent-strong-hover);
+  box-shadow: inset 0 0 0 2px var(--ax-bg-accent-strong-hover);
+}
+
+.navds-button--secondary:active {
+  background-color: var(--ax-bg-accent-strong-pressed);
+  color: var(--ax-text-accent-contrast);
+  box-shadow: none;
+}
+
+.navds-button--secondary:where(:disabled, .navds-button--disabled),
+.navds-button--secondary:hover:where(:disabled, .navds-button--disabled) {
+  background-color: transparent;
+  color: var(--ax-text-accent);
+}
+
+/**************************
+* .navds-button--secondary-neutral *
+ **************************/
+
+.navds-button--secondary-neutral {
+  background-color: transparent;
+  color: var(--ax-text-default);
+  box-shadow: inset 0 0 0 2px var(--ax-border-neutral);
+}
+
+.navds-button--secondary-neutral:hover {
+  background-color: var(--ax-bg-neutral-moderate-hoverA);
+}
+
+.navds-button--secondary-neutral:active {
+  color: var(--ax-text-neutral-contrast);
+  background-color: var(--ax-bg-neutral-strong-pressed);
+  box-shadow: none;
+}
+
+.navds-button--secondary-neutral:where(:disabled, .navds-button--disabled),
+.navds-button--secondary-neutral:hover:where(:disabled, .navds-button--disabled) {
+  color: var(--ax-text-default);
+  background-color: transparent;
+  box-shadow: inset 0 0 0 2px var(--ax-border-strong);
+}
+
+/****************************
+ * .navds-button--tertiary *
+ ****************************/
+
+.navds-button--tertiary {
+  background-color: transparent;
+  color: var(--ax-text-accent);
+}
+
+.navds-button--tertiary:hover {
+  background-color: var(--ax-bg-accent-hoverA);
+  color: var(--ax-text-accent);
+}
+
+.navds-button--tertiary:active {
+  background-color: var(--ax-bg-accent-strong-pressed);
+  color: var(--ax-text-accent-contrast);
+}
+
+.navds-button--tertiary:active:hover {
+  background-color: var(--ax-bg-accent-strong-pressed);
+}
+
+.navds-button--tertiary:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary:hover:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary:active:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary:active:hover:where(:disabled, .navds-button--disabled) {
+  color: var(--ax-text-accent);
+  background: none;
+  box-shadow: none;
+}
+
+/****************************
+ * .navds-button--tertiary-neutral *
+ ****************************/
+
+.navds-button--tertiary-neutral {
+  color: var(--ax-text-default);
+}
+
+.navds-button--tertiary-neutral:hover {
+  background-color: var(--ax-bg-neutral-hoverA);
+}
+
+.navds-button--tertiary-neutral:active {
+  background-color: var(--ax-bg-neutral-strong-pressed);
+  color: var(--ax-text-neutral-contrast);
+}
+
+.navds-button--tertiary-neutral:active:hover {
+  background-color: var(--ax-bg-neutral-strong-pressed);
+}
+
+.navds-button--tertiary-neutral:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary-neutral:hover:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary-neutral:active:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary-neutral:active:hover:where(:disabled, .navds-button--disabled) {
+  color: var(--ax-text-default);
+  background: none;
+  box-shadow: none;
+}
+
+/*************************
+ * .navds-button--danger *
+ *************************/
+
+.navds-button--danger {
+  background-color: var(--ax-bg-danger-strong);
+  color: var(--ax-text-danger-contrast);
+}
+
+.navds-button--danger:hover {
+  background-color: var(--ax-bg-danger-strong-hover);
+}
+
+.navds-button--danger:active {
+  background-color: var(--ax-bg-danger-strong-pressed);
+}
+
+.navds-button--danger:active:where(:disabled, .navds-button--disabled),
+.navds-button--danger:hover:where(: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:hover {
+    background-color: highlighttext;
+    border-color: highlight;
+    color: highlight;
+    box-shadow: none;
+  }
+
+  .navds-button: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;
+  }
 }
@@ -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);
+  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);
+}
+
+/* -------------------------- 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;
+}
@@ -0,0 +1,176 @@
+.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--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;
+    }
+  }
+}
@@ -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-hover);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.3;
+  }
+
+  &:disabled:hover {
+    background-color: transparent;
+  }
+}
+
+@media (forced-colors: active) {
+  .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);
+}
@@ -0,0 +1,344 @@
+.navds-date {
+  padding: var(--a-spacing-4) var(--a-spacing-3);
+}
+
+.navds-date .rdp-day_range_middle.rdp-day_disabled {
+  color: var(--ac-date-middle-text, var(--a-text-on-action));
+  background: var(--ac-date-middle-bg, var(--a-surface-action-selected));
+}
+
+.navds-date .rdp-month,
+.navds-date.rdp-month {
+  display: grid;
+  gap: var(--a-spacing-5);
+}
+
+.navds-date__caption-label {
+  text-transform: capitalize;
+}
+
+.navds-date .rdp-head_cell {
+  text-transform: capitalize;
+  font-size: var(--a-font-size-small);
+}
+
+.navds-date .rdp-weeknumber {
+  font-size: var(--a-font-size-small);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--a-border-radius-medium);
+  margin: var(--a-spacing-2);
+  color: var(--a-text-subtle);
+}
+
+.navds-date .rdp-weeknumber.rdp-button {
+  width: 2rem;
+  height: 2rem;
+  box-shadow: 0 0 0 1px var(--a-border-default);
+  color: var(--a-text-subtle);
+  font-size: var(--a-font-size-small);
+}
+
+.navds-date .rdp-weeknumber.rdp-button:active {
+  background-color: var(--a-surface-action-active);
+  color: var(--a-text-on-action);
+  box-shadow: none;
+}
+
+.navds-date__caption__month .navds-select__container select {
+  text-transform: capitalize;
+}
+
+.navds-date .rdp-button {
+  all: unset;
+  display: block;
+  width: 2.5rem;
+  height: 2.5rem;
+  text-align: center;
+  border-radius: var(--a-border-radius-medium);
+}
+
+.navds-date .rdp-day_range_start {
+  border-radius: var(--a-border-radius-xlarge) var(--a-border-radius-medium) var(--a-border-radius-medium)
+    var(--a-border-radius-xlarge);
+}
+
+.navds-date .rdp-day_range_end:not(.rdp-day_range_start) {
+  border-radius: var(--a-border-radius-medium) var(--a-border-radius-xlarge) var(--a-border-radius-xlarge)
+    var(--a-border-radius-medium);
+}
+
+.navds-date .rdp-day_range_start.rdp-day_range_end {
+  border-radius: var(--a-border-radius-xlarge);
+}
+
+.navds-date .rdp-button:not(.rdp-day_selected, [disabled]):focus-visible,
+.navds-date .navds-date__month-button:not(.rdp-day_selected, [disabled]):focus-visible {
+  box-shadow: var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-date .rdp-button:not(.rdp-day_selected, [disabled]):focus,
+  .navds-date .navds-date__month-button:not(.rdp-day_selected, [disabled]):focus {
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
+.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus-visible,
+.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus-visible {
+  box-shadow:
+    inset 0 0 0 1px var(--a-surface-default),
+    var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-date .rdp-button.rdp-day_selected:not([disabled]):focus,
+  .navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus {
+    box-shadow:
+      inset 0 0 0 1px var(--a-surface-default),
+      var(--a-shadow-focus);
+  }
+}
+
+/* Monthpicker */
+.navds-date__month-button {
+  all: unset;
+  text-align: center;
+  width: 3rem;
+  height: 3rem;
+  text-transform: capitalize;
+  border-radius: var(--a-border-radius-medium);
+  cursor: pointer;
+}
+
+.navds-date__month-button:focus-visible,
+.navds-monthpicker__caption-button:focus-visible {
+  box-shadow: var(--a-shadow-focus);
+  z-index: 1;
+}
+
+@supports not selector(:focus-visible) {
+  .navds-date__month-button:focus,
+  .navds-monthpicker__caption-button:focus {
+    box-shadow: var(--a-shadow-focus);
+    z-index: 1;
+  }
+}
+
+.navds-date__year-label {
+  display: flex;
+  align-items: center;
+}
+
+.navds-date__wrapper,
+.navds-date__standalone-wrapper {
+  height: fit-content;
+  width: fit-content;
+}
+
+.navds-date .navds-date__field {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  position: relative;
+}
+
+.navds-date__field-wrapper {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  width: fit-content;
+}
+
+.navds-date .rdp-day_selected,
+.navds-monthpicker__month--selected {
+  color: var(--ac-date-selected-text, var(--a-text-on-action));
+  background: var(--ac-date-selected-bg, var(--a-surface-action-selected));
+  cursor: pointer;
+}
+
+.navds-date .rdp-day_disabled {
+  cursor: not-allowed;
+  text-decoration: line-through;
+  background-color: var(--ac-date-disabled-bg, var(--a-surface-neutral-subtle));
+  color: var(--ac-date-disabled-text, var(--a-text-subtle));
+}
+
+.navds-date .rdp-button:where(:not(.rdp-day_selected, [disabled])):hover,
+.navds-date__month-button:where(:not(.rdp-day_selected, [disabled])):hover {
+  background: var(--ac-date-hover-bg, var(--a-surface-action-subtle-hover));
+  cursor: pointer;
+}
+
+.navds-date .rdp-day_today {
+  box-shadow: 0 0 0 1px var(--ac-date-today-border, var(--a-border-action-selected));
+  text-decoration: underline;
+}
+
+.navds-date__caption {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--a-spacing-1);
+  padding-inline: var(--a-spacing-1);
+}
+
+.navds-date__caption-button,
+.navds-date__caption-button:disabled,
+.navds-date__caption-button:disabled:hover {
+  color: var(--ac-date-caption-text, var(--a-text-default));
+}
+
+.navds-date__field-input {
+  padding-right: var(--a-spacing-12);
+}
+
+.navds-form-field--small .navds-date__field-input {
+  padding-right: var(--a-spacing-8);
+}
+
+/* Error-handling */
+.navds-date__field--error .navds-date__field-input:not(:hover, :disabled) {
+  border-color: var(--ac-date-input-error-border, var(--a-border-danger));
+  box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger));
+}
+
+.navds-date__field--error .navds-date__field-input:focus-visible:not(:hover, :disabled) {
+  box-shadow:
+    inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)),
+    var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-date__field--error .navds-date__field-input:focus:not(:hover, :disabled) {
+    box-shadow:
+      inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)),
+      var(--a-shadow-focus);
+  }
+}
+
+.navds-date__field-button {
+  position: absolute;
+  right: 0.0625rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--ac-date-input-button-text, var(--a-text-default));
+  display: inline-flex;
+  cursor: pointer;
+  margin: 0;
+  text-decoration: none;
+  border: none;
+  background: none;
+  border-radius: calc(var(--a-border-radius-medium) - 1px);
+  padding: var(--a-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 .navds-date__field-button {
+  padding: var(--a-spacing-1);
+}
+
+.navds-date__field-button:hover:where(:not([disabled])) {
+  color: var(--ac-date-input-button-hover-text, var(--a-text-action-on-action-subtle));
+  background-color: var(--ac-date-input-button-hover-bg, var(--a-surface-action-subtle-hover));
+}
+
+.navds-form-field--disabled .navds-date__field-button {
+  opacity: 1;
+  cursor: not-allowed;
+}
+
+.navds-date__field-button:focus-visible {
+  outline: none;
+  box-shadow: var(--a-shadow-focus);
+  border-radius: var(--a-border-radius-medium);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-date__field-button:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
+.navds-date__caption__year {
+  width: 5rem;
+}
+
+.navds-date .rdp-day_outside {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+/* Readonly */
+.navds-date__field--readonly .navds-date__field-button {
+  cursor: default;
+  color: var(--a-gray-500);
+}
+
+.navds-date__caption-button {
+  width: 2rem;
+  height: 2rem;
+}
+
+.navds-date__week-row {
+  display: flex;
+  align-items: center;
+  gap: var(--a-spacing-05);
+}
+
+.navds-date__week-wrapper {
+  width: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+}
+
+.navds-date__modal.navds-date {
+  padding: 0;
+}
+
+.navds-date__modal-body {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  padding: var(--a-spacing-4);
+  gap: var(--a-spacing-2);
+}
+
+.navds-date__modal-body > .navds-date {
+  padding: 0;
+}
+
+.navds-date__popover:where(.navds-popover) {
+  border: none;
+}
+
+@media (min-width: 480px) {
+  .navds-date {
+    padding: var(--a-spacing-5) var(--a-spacing-4);
+  }
+
+  .navds-date__modal-body {
+    padding: var(--a-spacing-6);
+  }
+
+  .navds-date__caption {
+    gap: var(--a-spacing-2);
+  }
+
+  .navds-date .rdp-button,
+  .navds-date__caption-button {
+    width: 3rem;
+    height: 3rem;
+  }
+}
@@ -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;
+  }
+}
@@ -0,0 +1,235 @@
+.navds-expansioncard {
+  --__ac-expansioncard-border-color: var(--ac-expansioncard-border-color, var(--a-border-default));
+  --__ac-expansioncard-border-radius: var(--ac-expansioncard-border-radius, var(--a-border-radius-large));
+  --__ac-expansioncard-border-width: 1px;
+  --__ac-expansioncard-padding-block: var(--a-spacing-4);
+  --__ac-expansioncard-padding-inline: var(--a-spacing-6);
+
+  border-radius: var(--__ac-expansioncard-border-radius);
+  background-color: var(--ac-expansioncard-bg, var(--a-surface-default));
+  height: fit-content;
+}
+
+.navds-expansioncard--open {
+  --__ac-expansioncard-border-color: var(
+    --ac-expansioncard-border-open-color,
+    var(--ac-expansioncard-border-color, var(--a-border-default))
+  );
+}
+
+.navds-expansioncard:hover {
+  --__ac-expansioncard-border-color: var(--ac-expansioncard-border-hover-color, var(--a-border-strong));
+}
+
+:where(.navds-expansioncard.navds-expansioncard--open):hover {
+  --__ac-expansioncard-border-color: var(--ac-expansioncard-border-hover-color, var(--a-border-strong));
+}
+
+/*************************
+ * Header *
+ *************************/
+.navds-expansioncard__header {
+  width: 100%;
+  display: flex;
+  gap: var(--a-spacing-4);
+  padding: var(--__ac-expansioncard-padding-block) var(--__ac-expansioncard-padding-inline);
+  border-radius: var(--__ac-expansioncard-border-radius);
+  background-color: var(--ac-expansioncard-header-bg, var(--a-surface-transparent));
+  position: relative;
+  border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
+  justify-content: space-between;
+}
+
+.navds-expansioncard--small {
+  --__ac-expansioncard-padding-block: var(--a-spacing-3);
+  --__ac-expansioncard-padding-inline: var(--a-spacing-4);
+}
+
+.navds-expansioncard__header:hover {
+  background-color: var(--ac-expansioncard-header-bg-hover, var(--a-surface-hover));
+  box-shadow: 0 0 0 1px var(--__ac-expansioncard-border-color);
+}
+
+.navds-expansioncard--open > :where(.navds-expansioncard__header) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
+  border-bottom: none;
+  background-color: var(--ac-expansioncard-header-open-bg, var(--a-surface-transparent));
+}
+
+.navds-expansioncard--open > :where(.navds-expansioncard__header):hover {
+  background-color: var(--ac-expansioncard-header-bg-hover, var(--a-surface-hover));
+  box-shadow:
+    1px 0 0 0 var(--__ac-expansioncard-border-color),
+    -1px 0 0 0 var(--__ac-expansioncard-border-color),
+    0 -1px 0 0 var(--__ac-expansioncard-border-color);
+}
+
+.navds-expansioncard--open > :where(.navds-expansioncard__header)::after {
+  content: "";
+  background-color: var(--a-border-divider);
+  bottom: 0;
+  left: var(--__ac-expansioncard-padding-inline);
+  height: 1px;
+  width: calc(100% - 2 * var(--__ac-expansioncard-padding-inline));
+  position: absolute;
+  opacity: 1;
+  transition: opacity 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.navds-expansioncard--open > :where(.navds-expansioncard__header:hover)::after {
+  opacity: 0;
+}
+
+/*************************
+ * Header/Typography *
+ *************************/
+
+.navds-expansioncard__title--small {
+  margin-top: 0.625rem;
+}
+
+.navds-expansioncard__title--medium {
+  margin-top: var(--a-spacing-2);
+}
+
+.navds-expansioncard__title--large {
+  margin-top: var(--a-spacing-1);
+}
+
+.navds-expansioncard--small > :where(.navds-expansioncard__header) :where(.navds-expansioncard__title--small) {
+  margin-top: var(--a-spacing-05);
+}
+
+.navds-expansioncard--small :where(.navds-expansioncard__title--medium, .navds-expansioncard__title--large) {
+  margin-top: 0;
+}
+
+/*************************
+ * Header/Button *
+ *************************/
+.navds-expansioncard__header-button {
+  display: grid;
+  place-content: center;
+  cursor: pointer;
+  margin: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--ac-expansioncard-button-border-radius, var(--a-border-radius-medium));
+  min-height: 3rem;
+  min-width: 3rem;
+  font-size: 1.5rem;
+  align-self: flex-start;
+}
+
+.navds-expansioncard--small > :where(.navds-expansioncard__header) > :where(.navds-expansioncard__header-button) {
+  min-height: 2rem;
+  min-width: 2rem;
+}
+
+:where(.navds-expansioncard__header):hover > :where(.navds-expansioncard__header-button) {
+  background-color: var(--a-surface-hover);
+}
+
+.navds-expansioncard__header-chevron {
+  transition: transform 150ms ease-in-out;
+}
+
+.navds-expansioncard--open > :where(.navds-expansioncard__header) :where(.navds-expansioncard__header-chevron) {
+  transform: translateY(0) rotate(180deg);
+}
+
+.navds-expansioncard__header-button:hover > :where(.navds-expansioncard__header-chevron) {
+  transform: translateY(1px);
+}
+
+.navds-expansioncard__header-button:focus-visible {
+  outline: 3px solid transparent;
+  box-shadow: var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-expansioncard__header-button:focus {
+    outline: 3px solid transparent;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
+.navds-expansioncard--open
+  > :where(.navds-expansioncard__header)
+  > :where(.navds-expansioncard__header-button):hover
+  :where(.navds-expansioncard__header-chevron) {
+  transform: translateY(-1px) rotate(180deg);
+}
+
+.navds-expansioncard__header-button::after {
+  inset: 0;
+  z-index: 1;
+  position: absolute;
+  content: "";
+  height: 100%;
+  width: 100%;
+  cursor: pointer;
+}
+
+/*************************
+ * Content *
+ *************************/
+.navds-expansioncard__content {
+  --__ac-expansioncard-padding-block: var(--a-spacing-5);
+
+  border-end-end-radius: var(--__ac-expansioncard-border-radius);
+  border-end-start-radius: var(--__ac-expansioncard-border-radius);
+  padding: var(--__ac-expansioncard-padding-block) var(--__ac-expansioncard-padding-inline)
+    var(--__ac-expansioncard-padding-inline);
+  border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
+  border-top: none;
+}
+
+.navds-expansioncard--small .navds-expansioncard__content {
+  --__ac-expansioncard-padding-block: var(--a-spacing-4);
+}
+
+.navds-expansioncard__content--closed {
+  display: none;
+}
+
+:where(.navds-expansioncard__header):hover + .navds-expansioncard__content {
+  box-shadow:
+    1px 0 0 0 var(--__ac-expansioncard-border-color),
+    -1px 0 0 0 var(--__ac-expansioncard-border-color),
+    0 1px 0 0 var(--__ac-expansioncard-border-color);
+}
+
+.navds-expansioncard__content-inner {
+  animation: fadeExpansionCard 250ms ease;
+}
+
+.navds-expansioncard--no-animation :where(.navds-expansioncard__content-inner) {
+  animation: none;
+}
+
+@keyframes fadeExpansionCard {
+  0% {
+    opacity: 0.25;
+    transform: translateY(-8px);
+  }
+
+  40% {
+    opacity: 0.7;
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (forced-colors: active) {
+  .navds-expansioncard:hover {
+    --__ac-expansioncard-border-color: highlight;
+
+    outline: 1px solid highlight;
+  }
+}
@@ -0,0 +1,441 @@
+.navds-combobox__wrapper {
+  --__ac-combobox-icon-size: 1.5rem;
+  --__ac-combobox-wrapper-inner-padding: var(--a-spacing-2);
+  --__ac-combobox-list-item-padding-block: var(--a-spacing-3);
+  --__ac-combobox-list-item-padding-inline: var(--a-spacing-3);
+  --__ac-combobox-border-width: 1px;
+  --__ac-combobox-input-height: 2rem;
+
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  position: relative;
+}
+
+.navds-form-field--small .navds-combobox__wrapper {
+  --__ac-combobox-icon-size: 1.25rem;
+  --__ac-combobox-wrapper-inner-padding: var(--a-spacing-1);
+  --__ac-combobox-list-item-padding-block: var(--a-spacing-1-alt);
+  --__ac-combobox-list-item-padding-inline: var(--a-spacing-2);
+  --__ac-combobox-input-height: 1.5rem;
+}
+
+.navds-combobox--disabled {
+  opacity: 0.3;
+}
+
+.navds-combobox--disabled .navds-combobox__wrapper *:hover {
+  cursor: not-allowed;
+}
+
+.navds-combobox--disabled .navds-text-field__input {
+  border: 1px solid var(--a-border-default);
+}
+
+.navds-combobox--disabled .navds-combobox__selected-options {
+  pointer-events: none;
+}
+
+.navds-combobox--readonly {
+  pointer-events: none;
+}
+
+.navds-combobox--readonly .navds-combobox__button-toggle-list {
+  color: var(--a-gray-500);
+}
+
+.navds-combobox--readonly .navds-text-field__input,
+.navds-combobox--readonly .navds-combobox__input {
+  background-color: var(--a-surface-subtle);
+  border-color: var(--a-border-subtle);
+}
+
+.navds-combobox__button-clear svg,
+.navds-combobox__button-toggle-list svg,
+.navds-combobox__list svg {
+  width: var(--__ac-combobox-icon-size);
+  height: var(--__ac-combobox-icon-size);
+}
+
+.navds-combobox__wrapper-inner.navds-text-field__input {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding-block: calc(var(--__ac-combobox-wrapper-inner-padding) - var(--__ac-combobox-border-width));
+  padding-inline: var(--__ac-combobox-wrapper-inner-padding);
+}
+
+.navds-combobox__wrapper-inner > :first-child {
+  flex: 2;
+}
+
+.navds-combobox__wrapper-inner > :last-child {
+  display: flex;
+  flex-flow: row nowrap;
+}
+
+.navds-combobox__wrapper-inner:hover {
+  cursor: text;
+}
+
+.navds-combobox--error .navds-text-field__input:not(:hover, :disabled) {
+  border-color: var(--ac-combobox-error-border, var(--a-border-danger));
+  box-shadow: 0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger));
+}
+
+.navds-combobox--error
+  .navds-text-field__input:not(:hover, :disabled, .navds-combobox__wrapper-inner--virtually-unfocused):focus-within {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow:
+    0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger)),
+    var(--a-shadow-focus);
+}
+
+.navds-combobox__selected-options {
+  gap: var(--__ac-combobox-wrapper-inner-padding);
+  align-items: center;
+}
+
+.navds-combobox__selected-options > li {
+  margin: auto 0;
+  border-radius: var(--a-border-radius-full);
+}
+
+.navds-combobox__selected-options > li:last-of-type {
+  display: flex;
+  flex: 1;
+}
+
+.navds-combobox__selected-options--no-bg {
+  font-family: inherit;
+  font-size: var(--a-font-size-large);
+  font-weight: var(--a-font-weight-regular);
+  letter-spacing: 0;
+  line-height: var(--a-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;
+  margin-left: var(--a-spacing-1);
+  min-width: 10ch;
+  width: 100%;
+  height: var(--__ac-combobox-input-height);
+}
+
+.navds-combobox__input--hide-caret {
+  caret-color: transparent;
+}
+
+.navds-combobox__input:focus-visible {
+  outline: none;
+  border: none;
+  box-shadow: none;
+}
+
+.navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
+  box-shadow: var(--a-shadow-focus);
+  outline: 3px solid transparent;
+  outline-offset: 2px;
+}
+
+.navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible).navds-combobox__wrapper-inner--virtually-unfocused {
+  box-shadow: none;
+  outline: none;
+}
+
+@supports not selector(:focus-visible) {
+  .navds-combobox__input:focus {
+    outline: none;
+    border: none;
+    box-shadow: none;
+  }
+
+  .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus) {
+    box-shadow: var(--a-shadow-focus);
+    outline: 3px solid transparent;
+    outline-offset: 2px;
+  }
+
+  .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus).navds-combobox__wrapper-inner--virtually-unfocused {
+    box-shadow: none;
+    outline: none;
+  }
+}
+
+@supports not selector(:has) {
+  .navds-combobox--focused .navds-combobox__wrapper-inner {
+    box-shadow: var(--a-shadow-focus);
+    outline: 3px solid transparent;
+    outline-offset: 2px;
+  }
+
+  .navds-combobox--focused .navds-combobox__wrapper-inner.navds-combobox__wrapper-inner--virtually-unfocused {
+    box-shadow: none;
+    outline: none;
+  }
+}
+
+.navds-combobox__button-clear {
+  border-radius: var(--a-border-radius-medium);
+  color: var(--ac-combobox-clear-icon, var(--a-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(--a-border-radius-medium);
+  color: var(--a-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:active:hover,
+.navds-combobox__button-toggle-list:active:hover {
+  color: var(--ac-combobox-clear-icon-active, var(--a-text-action));
+}
+
+.navds-combobox__button-clear:hover,
+.navds-combobox__button-toggle-list:hover {
+  color: var(--ac-combobox-clear-icon-hover, var(--a-text-action-selected));
+}
+
+.navds-combobox__button-toggle-list:focus-visible {
+  box-shadow:
+    0 0 0 1px var(--a-surface-default) inset,
+    var(--a-shadow-focus);
+  box-shadow: var(--a-shadow-focus);
+  outline: none;
+}
+
+@supports not selector(:focus-visible) {
+  .navds-combobox__button-toggle-list:focus {
+    box-shadow:
+      0 0 0 1px var(--a-surface-default) inset,
+      var(--a-shadow-focus);
+    box-shadow: var(--a-shadow-focus);
+    outline: none;
+  }
+}
+
+/* dropdown & non selectable dropdown items */
+
+.navds-combobox__list {
+  max-height: 290px;
+  overflow-y: auto;
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: var(--a-z-index-popover);
+  top: calc(100% + var(--a-spacing-2));
+  border: 1px solid var(--ac-combobox-list-border-color, var(--a-border-divider));
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--a-shadow-small);
+  border-radius: var(--a-border-radius-medium);
+  background-color: var(--ac-combobox-list-bg, var(--a-surface-default));
+  color: var(--ac-combobox-list-text, var(--a-text-default));
+  overscroll-behavior: contain;
+}
+
+.navds-combobox__list--closed {
+  display: none;
+}
+
+.navds-combobox__list_non-selectables {
+  position: sticky;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+}
+
+.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;
+  flex-direction: row;
+  justify-content: space-between;
+  padding-block: var(--__ac-combobox-list-item-padding-block);
+  padding-inline: var(--__ac-combobox-list-item-padding-inline);
+  width: 100%;
+  background-color: var(--ac-combobox-list-item-bg, var(--a-surface-default));
+}
+
+.navds-combobox__list-item--loading {
+  justify-content: center;
+  background-color: var(--ac-combobox-list-item-loading-bg, var(--a-surface-default));
+}
+
+.navds-combobox__list-item--max-selected {
+  background: var(--ac-combobox-list-item-max-selected-bg, var(--a-surface-info-subtle));
+  border-start-start-radius: calc(var(--a-border-radius-medium) - 1px);
+  border-start-end-radius: calc(var(--a-border-radius-medium) - 1px);
+  border: 1px solid var(--ac-combobox-list-item-max-selected-border, var(--a-border-info));
+}
+
+.navds-combobox__list_non-selectables:hover {
+  cursor: default;
+}
+
+/* ul-list and selectable li-items */
+
+.navds-combobox__list-options {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  display: inherit;
+  flex-direction: inherit;
+  gap: inherit;
+  background-color: inherit;
+  align-items: flex-start;
+}
+
+.navds-combobox__list-item--focus,
+.navds-combobox__list--with-hover
+  .navds-combobox__list-item:where(:not([data-no-focus="true"], .navds-combobox__list-item--new-option)):hover {
+  background-color: var(--ac-combobox-list-item-hover-bg, var(--a-surface-hover));
+  cursor: pointer;
+  border-left: 4px solid var(--ac-combobox-list-item-hover-border-left, var(--a-border-strong));
+  padding-inline-start: calc(var(--__ac-combobox-list-item-padding-inline) - 4px);
+}
+
+.navds-combobox__list-item[data-no-focus="true"] {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+.navds-combobox__list-item--selected {
+  background-color: var(--ac-combobox-list-item-selected-bg, var(--a-surface-selected));
+}
+
+.navds-combobox__list-item--selected p {
+  font-weight: var(--a-font-weight-bold);
+}
+
+.navds-combobox__list-item--selected.navds-combobox__list-item--focus,
+.navds-combobox__list--with-hover .navds-combobox__list-item--selected:hover {
+  background-color: var(--ac-combobox-list-item-selected-hover-bg, var(--a-surface-action-subtle-hover));
+  border-left: 4px solid var(--ac-combobox-list-item-selected-hover-border-left, var(--a-border-focus));
+}
+
+.navds-combobox__list-item--new-option {
+  border-bottom: 1px solid var(--a-border-divider);
+  background: var(--a-surface-neutral-subtle);
+  cursor: pointer;
+  justify-content: flex-start;
+  gap: 0.25rem;
+}
+
+.navds-combobox__list--with-hover .navds-combobox__list-item--new-option:hover {
+  border-bottom: 1px solid var(--a-border-divider);
+  background: var(--a-surface-neutral-subtle-hover);
+}
+
+.navds-combobox__list-item--new-option--focus {
+  box-shadow:
+    var(--a-shadow-focus) inset,
+    var(--a-border-action) 0 0 0 5px inset;
+  border-radius: calc(var(--a-border-radius-medium) - 1px);
+}
+
+.navds-combobox__list-item mark {
+  background-color: transparent;
+  font-weight: bold;
+}
+
+/* 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(--a-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: selecteditem;
+    color: selecteditemtext;
+  }
+
+  .navds-combobox__list-item--selected > * {
+    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: -3px;
+  }
+}
@@ -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;
+  }
+}
@@ -0,0 +1,55 @@
+.navds-error-summary {
+  background-color: var(--ac-error-summary-bg, var(--a-surface-default));
+  padding: var(--a-spacing-5);
+  border: 4px solid var(--ac-error-summary-border, var(--a-border-danger));
+  border-radius: var(--a-border-radius-large);
+}
+
+.navds-error-summary--small {
+  padding: var(--a-spacing-3);
+}
+
+.navds-error-summary__heading {
+  scroll-margin-top: var(--a-spacing-6);
+}
+
+.navds-error-summary--small .navds-error-summary__heading {
+  scroll-margin-top: var(--a-spacing-4);
+}
+
+.navds-error-summary__heading:focus {
+  outline: none;
+}
+
+.navds-error-summary:focus-visible,
+.navds-error-summary:has(.navds-error-summary__heading:focus-visible) {
+  box-shadow:
+    0 0 0 1px var(--a-border-on-inverted),
+    0 0 0 4px var(--a-border-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-error-summary:focus {
+    box-shadow: var(--a-shadow-focus);
+    outline: none;
+  }
+}
+
+.navds-error-summary__list {
+  margin: var(--a-spacing-3) 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--a-spacing-3);
+  padding-left: var(--a-spacing-6);
+  list-style: inherit;
+}
+
+.navds-error-summary__list > * {
+  color: var(--ac-error-summary-list-dot, var(--a-text-action));
+}
+
+.navds-error-summary--small > .navds-error-summary__list {
+  margin: var(--a-spacing-2) 0;
+  gap: var(--a-spacing-2);
+  padding-left: var(--a-spacing-5);
+}
@@ -0,0 +1,51 @@
+[data-theme="dark"] {
+  --__ac-form-description: var(--a-text-on-inverted);
+}
+
+[data-theme="light"] {
+  --__ac-form-description: initial;
+}
+
+.navds-fieldset {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-width: 0;
+}
+
+.navds-fieldset > :not(:first-child, :empty) {
+  margin-top: var(--a-spacing-2);
+}
+
+.navds-fieldset__description {
+  color: var(--ac-form-description, var(--__ac-form-description, var(--a-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;
+  }
+}
@@ -0,0 +1,230 @@
+/**
+* Makes it easier for user to use FileItem in semantic lists
+*/
+.navds-file-upload :is(ul, li) {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/**
+ * FileUpload.Dropzone
+ */
+
+.navds-dropzone__area {
+  --__ac-dropzone-background: var(--a-surface-subtle);
+  --__ac-dropzone-text-color: var(--a-text-default);
+  --__ac-dropzone-padding: var(--a-spacing-6);
+  --__ac-dropzone-icon-padding: var(--a-spacing-2);
+  --__ac-dropzone-animation-length-long: 0.6s;
+  --__ac-dropzone-animation-length-short: 250ms;
+  --__ac-dropzone-animation-ease-out: cubic-bezier(0.3, 1, 0.3, 1);
+  --__ac-dropzone-animation-over-under: cubic-bezier(0.3, 1.4, 0.3, 1);
+
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: var(--a-spacing-4);
+  text-align: center;
+  padding: var(--__ac-dropzone-padding);
+  outline: 1px dashed var(--a-border-subtle);
+  outline-offset: -1px;
+  border-radius: var(--a-border-radius-large);
+  background-color: var(--__ac-dropzone-background);
+  color: var(--__ac-dropzone-text-color);
+  transition: background-color var(--__ac-dropzone-animation-length-short) var(--__ac-dropzone-animation-ease-out);
+  cursor: pointer;
+}
+
+.navds-dropzone__area:hover {
+  box-shadow: inset 0 2px 4px 1px rgb(11 11 11/ 0.05);
+  outline-color: var(--a-border-default);
+}
+
+.navds-dropzone--disabled > .navds-dropzone__area:hover {
+  outline-color: var(--a-border-subtle);
+  box-shadow: initial;
+  cursor: default;
+}
+
+.navds-dropzone--dragging > .navds-dropzone__area {
+  --__ac-dropzone-background: var(--a-surface-action-subtle-hover);
+}
+
+.navds-dropzone--dragging > .navds-dropzone__area::after {
+  outline: 1px dashed var(--a-border-subtle);
+  outline-offset: -1px;
+  color: var(--a-text-action-selected);
+  background-color: var(--a-surface-hover);
+  content: "";
+  inset: 0;
+  position: absolute;
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+  box-shadow: inset 0 2px 7px 3px rgb(11 11 11/ 0.1);
+  border-radius: var(--a-border-radius-large);
+  animation: akselDropzoneDragoverAnimation var(--__ac-dropzone-animation-length-short) var(--__ac-dropzone-animation-ease-out);
+}
+
+@keyframes akselDropzoneDragoverAnimation {
+  0% {
+    -webkit-backdrop-filter: blur(0);
+    backdrop-filter: blur(0);
+    background-color: var(--a-surface-transparent);
+  }
+
+  70% {
+    -webkit-backdrop-filter: blur(8px);
+    backdrop-filter: blur(8px);
+  }
+
+  100% {
+    background-color: var(--a-surface-hover);
+  }
+}
+
+.navds-dropzone__area-icon {
+  display: grid;
+  padding: var(--__ac-dropzone-icon-padding);
+  visibility: hidden;
+}
+
+.navds-dropzone--error:where(:not(.navds-dropzone--dragging)) > .navds-dropzone__area {
+  outline-color: var(--a-surface-danger);
+  outline-width: 2px;
+}
+
+.navds-dropzone__area:hover > .navds-dropzone__area-button {
+  color: var(--ac-button-secondary-hover-text, var(--__ac-button-secondary-hover-text, var(--a-text-action-on-action-subtle)));
+  background-color: var(
+    --ac-button-secondary-hover-bg,
+    var(--__ac-button-secondary-hover-bg, var(--a-surface-action-subtle-hover))
+  );
+}
+
+.navds-dropzone__area:active .navds-dropzone__area-button {
+  color: var(--ac-button-secondary-active-text, var(--__ac-button-secondary-active-text, var(--a-text-on-action)));
+  background-color: var(--ac-button-secondary-active-bg, var(--__ac-button-secondary-active-bg, var(--a-surface-action-active)));
+  box-shadow: none;
+}
+
+.navds-dropzone__area-release {
+  top: var(--__ac-dropzone-padding);
+  display: grid;
+  position: absolute;
+  z-index: 1;
+  pointer-events: none;
+  transition:
+    top var(--__ac-dropzone-animation-length-long) var(--__ac-dropzone-animation-over-under),
+    transform var(--__ac-dropzone-animation-length-long) var(--__ac-dropzone-animation-over-under);
+}
+
+.navds-dropzone__area-release__icon {
+  display: grid;
+  padding: var(--__ac-dropzone-icon-padding);
+  border-radius: var(--a-border-radius-full);
+  background-color: var(--a-surface-neutral-subtle);
+  transition:
+    background-color 300ms var(--__ac-dropzone-animation-ease-out),
+    font-size 300ms var(--__ac-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(--__ac-dropzone-animation-length-long) var(--__ac-dropzone-animation-over-under);
+  visibility: visible;
+}
+
+.navds-dropzone--dragging .navds-dropzone__area-release {
+  color: var(--a-text-action-selected);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.navds-dropzone__area-disabled {
+  color: var(--a-text-subtle);
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: var(--a-spacing-2);
+}
+
+/**
+ * FileUpload.Item
+ */
+
+.navds-file-item__inner {
+  outline: 1px solid var(--a-border-subtle);
+  outline-offset: -1px;
+  transition: outline-color 250ms cubic-bezier(0, 0.3, 0.15, 1);
+  border-radius: var(--a-border-radius-large);
+  padding: var(--a-spacing-3);
+  display: flex;
+  gap: var(--a-spacing-3);
+  align-items: flex-start;
+}
+
+.navds-file-item--error > .navds-file-item__inner {
+  outline: 2px solid var(--a-surface-danger);
+}
+
+.navds-file-item__icon {
+  background-color: var(--a-surface-neutral-subtle);
+  color: var(--a-icon-default);
+  border-radius: var(--a-border-radius-full);
+  min-height: 3rem;
+  min-width: 3rem;
+  display: grid;
+  place-content: center;
+  transition: background-color 250ms cubic-bezier(0, 0.3, 0.15, 1);
+}
+
+.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(--a-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 .navds-file-item__error {
+  grid-template-rows: 1fr;
+  padding-top: var(--a-spacing-1);
+}
+
+.navds-file-item__error-content > svg {
+  flex-shrink: 0;
+  height: 1rem;
+  margin-top: 0.1rem;
+}
+
+.navds-file-item__error-content {
+  min-height: 0;
+  display: flex;
+  gap: var(--a-spacing-1);
+}
@@ -0,0 +1,52 @@
+.navds-form-progress__bar {
+  margin-bottom: var(--a-spacing-2);
+}
+
+.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__button:hover svg {
+  transform: translateY(1px);
+}
+
+.navds-form-progress__button[data-state="open"] svg {
+  transform: rotate(-180deg);
+}
+
+.navds-form-progress__button[data-state="open"]:hover svg {
+  transform: translateY(-1px) rotate(-180deg);
+}
+
+.navds-form-progress__collapsible {
+  display: grid;
+  grid-template-rows: 0fr;
+  overflow: hidden;
+  transition: grid-template-rows 0.3s cubic-bezier(0.3, 0, 0.15, 1);
+}
+
+.navds-form-progress__collapsible[hidden] {
+  display: grid;
+}
+
+.navds-form-progress__collapsible[data-state="open"] {
+  grid-template-rows: 1fr;
+}
+
+.navds-form-progress__collapsible-content {
+  min-height: 0;
+  transition: visibility 0.3s;
+  visibility: hidden;
+}
+
+.navds-form-progress__collapsible[data-state="open"] .navds-form-progress__collapsible-content {
+  visibility: visible;
+}
+
+.navds-form-progress__stepper {
+  border: 2px solid var(--a-border-subtle);
+  border-radius: var(--a-border-radius-large);
+  padding: var(--a-spacing-2) var(--a-spacing-4);
+  margin-top: var(--a-spacing-1);
+}
@@ -0,0 +1,78 @@
+.navds-form-summary {
+  overflow: hidden;
+  border: 1px solid var(--a-border-subtle);
+  border-radius: var(--a-border-radius-large);
+  background: var(--a-surface-default);
+}
+
+.navds-form-summary__header {
+  background-color: var(--a-surface-subtle);
+  padding: var(--a-spacing-4) var(--a-spacing-6);
+  display: flex;
+  justify-content: space-between;
+  gap: 0 var(--a-spacing-2);
+}
+
+@media (max-width: 479px) {
+  .navds-form-summary__header {
+    padding: var(--a-spacing-3) var(--a-spacing-4);
+    flex-direction: column;
+  }
+}
+
+.navds-form-summary__edit {
+  flex-shrink: 0;
+  margin-top: var(--a-spacing-1);
+  align-self: flex-start;
+}
+
+.navds-form-summary > .navds-form-summary__answers {
+  border-top: 1px solid var(--a-border-subtle);
+}
+
+.navds-form-summary__answers {
+  padding: var(--a-spacing-5) var(--a-spacing-6) var(--a-spacing-6);
+  margin: 0;
+}
+
+@media (max-width: 479px) {
+  .navds-form-summary__answers {
+    padding: var(--a-spacing-4);
+  }
+}
+
+.navds-form-summary__answer:not(:last-child) {
+  margin-bottom: var(--a-spacing-4);
+  padding-bottom: var(--a-spacing-4);
+  border-bottom: 1px solid var(--a-border-divider);
+}
+
+.navds-form-summary__answer:has(.navds-form-summary__answer) {
+  padding-bottom: var(--a-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(--a-spacing-3);
+    padding-bottom: var(--a-spacing-3);
+  }
+
+  .navds-form-summary__answer:has(.navds-form-summary__answer) {
+    padding-bottom: var(--a-spacing-5);
+  }
+}
+
+.navds-form-summary__value:first-of-type {
+  margin-top: var(--a-spacing-1);
+}
+
+.navds-form-summary__value :where(.navds-form-summary__answers) {
+  margin-top: var(--a-spacing-2);
+  padding: var(--a-spacing-4);
+  background: var(--a-surface-selected);
+  border-radius: var(--a-border-radius-large);
+}
@@ -0,0 +1,61 @@
+[data-theme="dark"] {
+  --__ac-form-description: var(--a-text-on-inverted);
+}
+
+[data-theme="light"] {
+  --__ac-form-description: initial;
+}
+
+.navds-form-field {
+  display: grid;
+  justify-items: start;
+  gap: var(--a-spacing-2);
+}
+
+.navds-form-field__description {
+  margin-top: -0.375rem;
+  color: var(--ac-form-description, var(--__ac-form-description, var(--a-text-subtle)));
+}
+
+.navds-form-field .navds-error-message,
+.navds-fieldset .navds-error-message,
+.navds-file-item .navds-error-message {
+  display: flex;
+  gap: var(--a-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(--ac-form-subdescription, var(--a-text-subtle));
+}
+
+.navds-form-field--readonly > :where(.navds-form-field__label) {
+  display: inline-flex;
+}
+
+.navds-form-field__readonly-icon {
+  margin-top: var(--a-spacing-05);
+  margin-right: var(--a-spacing-2);
+  flex-shrink: 0;
+  align-self: flex-start;
+}
+
+@media (forced-colors: active) {
+  .navds-form-field--disabled {
+    opacity: 1;
+  }
+}
@@ -0,0 +1,16 @@
+@layer aksel.forms.base, aksel.forms.component;
+
+@import "./fieldset.darkside.css" layer(aksel.forms.base);
+@import "./file-upload.darkside.css" layer(aksel.forms.component);
+@import "./form.darkside.css" layer(aksel.forms.component);
+@import "./error-summary.darkside.css" layer(aksel.forms.component);
+@import "./confirmation-panel.darkside.css" layer(aksel.forms.component);
+@import "./radio-checkbox.darkside.css" layer(aksel.forms.component);
+@import "./select.darkside.css" layer(aksel.forms.component);
+@import "./switch.darkside.css" layer(aksel.forms.component);
+@import "./text-field.darkside.css" layer(aksel.forms.component);
+@import "./textarea.darkside.css" layer(aksel.forms.component);
+@import "./search.darkside.css" layer(aksel.forms.component);
+@import "./combobox.darkside.css" layer(aksel.forms.component);
+@import "./form-summary.darkside.css" layer(aksel.forms.component);
+@import "./form-progress.darkside.css" layer(aksel.forms.component);
@@ -0,0 +1,356 @@
+.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(--a-spacing-3) 0;
+  cursor: pointer;
+  display: flex;
+  gap: var(--a-spacing-2);
+
+  --__ac-radio-checkbox-readonly-bg: var(--a-surface-subtle);
+  --__ac-radio-checkbox-readonly-border: var(--a-border-subtle);
+}
+
+.navds-checkbox__label::before,
+.navds-radio__label::before {
+  content: "";
+  background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
+  border-radius: var(--a-border-radius-small);
+  flex-shrink: 0;
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default));
+  width: calc(1.5rem - 0.25rem);
+  height: calc(1.5rem - 0.25rem);
+  margin-block: 2px;
+  margin-inline: 2px;
+}
+
+.navds-radio__label::before {
+  border-radius: var(--a-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(--a-spacing-1-alt) 0;
+}
+
+.navds-checkbox--small > .navds-checkbox__label::before,
+.navds-radio--small > .navds-radio__label::before {
+  width: calc(1.25rem - 0.25rem);
+  height: calc(1.25rem - 0.25rem);
+}
+
+.navds-checkbox__input:focus + .navds-checkbox__label::before,
+.navds-radio__input:focus + .navds-radio__label::before {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow:
+    0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)),
+    0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
+    0 0 0 4px var(--a-border-focus);
+}
+
+.navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
+.navds-radio__input:hover:focus + .navds-radio__label::before {
+  box-shadow:
+    0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover)),
+    0 0 0 4px var(--a-border-focus);
+}
+
+.navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  transform: translate(var(--a-spacing-1-alt), -50%);
+  background-color: var(--ac-radio-checkbox-bg, var(--a-surface-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 {
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected));
+  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action-selected));
+}
+
+.navds-checkbox__input:where(:checked, :indeterminate):hover + .navds-checkbox__label::before {
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected-hover));
+  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action-selected-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(--ac-radio-checkbox-bg, var(--a-surface-default));
+  position: absolute;
+  height: 1.5rem;
+  transform: translate(var(--a-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-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
+.navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
+  box-shadow:
+    0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
+    0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
+    0 0 0 4px var(--a-border-focus);
+}
+
+.navds-radio__input:checked + .navds-radio__label::before {
+  box-shadow:
+    0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
+    inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default));
+  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action-selected));
+}
+
+.navds-radio__input:checked:focus + .navds-radio__label::before {
+  box-shadow:
+    0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
+    inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
+    0 0 0 4px var(--a-border-focus);
+}
+
+.navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
+.navds-radio__input:hover:not(:disabled) + .navds-radio__label {
+  color: var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
+}
+
+.navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate, :focus) + .navds-checkbox__label::before,
+.navds-radio__input:hover:not(:disabled, :checked, :focus) + .navds-radio__label::before {
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
+}
+
+.navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
+.navds-radio__input:hover:not(:disabled, :checked) + .navds-radio__label::before {
+  background-color: var(--ac-radio-checkbox-action-hover-bg, var(--a-surface-action-subtle));
+}
+
+.navds-checkbox--error > .navds-checkbox__input:not(:hover, :disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
+.navds-radio--error > .navds-radio__input:not(:hover, :disabled, :checked) + .navds-radio__label::before {
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
+}
+
+.navds-checkbox--error
+  > .navds-checkbox__input:focus:not(:hover, :disabled, :checked, :indeterminate)
+  + .navds-checkbox__label::before,
+.navds-radio--error > .navds-radio__input:focus:not(:hover, :disabled, :checked) + .navds-radio__label::before {
+  box-shadow:
+    0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
+    0 0 0 4px var(--a-border-focus);
+}
+
+.navds-checkbox--error
+  > .navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate, :focus)
+  + .navds-checkbox__label::before,
+.navds-radio--error > .navds-radio__input:hover:not(:disabled, :checked, :focus) + .navds-radio__label::before {
+  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
+}
+
+.navds-checkbox--error
+  > .navds-checkbox__input:focus:hover:not(:disabled, :checked, :indeterminate)
+  + .navds-checkbox__label::before,
+.navds-radio--error > .navds-radio__input:focus:hover:not(:disabled, :checked) + .navds-radio__label::before {
+  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
+  box-shadow:
+    0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
+    0 0 0 4px var(--a-border-focus);
+}
+
+.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(--a-text-default);
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
+.navds-checkbox--readonly > .navds-checkbox__input:hover:not(:checked, :indeterminate, :focus) + .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(--__ac-radio-checkbox-readonly-bg);
+  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:focus + .navds-checkbox__label::before,
+.navds-radio--readonly > .navds-radio__input:focus + .navds-radio__label::before {
+  --__ac-radio-checkbox-readonly-border: var(--a-border-subtle), var(--a-shadow-focus);
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label::before {
+  background-color: var(--__ac-radio-checkbox-readonly-bg);
+  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
+  color: var(--a-icon-subtle);
+}
+
+.navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
+  background-color: var(--a-icon-subtle);
+  box-shadow:
+    0 0 0 2px var(--__ac-radio-checkbox-readonly-border),
+    inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-bg);
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
+  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
+  background-color: var(--__ac-radio-checkbox-readonly-bg);
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+  background-color: var(--a-icon-subtle);
+}
+
+@media (forced-colors: active) {
+  .navds-checkbox__input:focus + .navds-checkbox__label::before,
+  .navds-radio__input:focus + .navds-radio__label::before {
+    outline-color: highlight;
+  }
+
+  .navds-checkbox,
+  .navds-radio {
+    --__ac-radio-checkbox-high-contrast-bg: field;
+    --__ac-radio-checkbox-high-contrast-text: fieldtext;
+    --__ac-radio-checkbox-high-contrast-highlight: highlight;
+  }
+
+  .navds-checkbox__label::before,
+  .navds-radio__label::before {
+    border: 1px solid var(--__ac-radio-checkbox-high-contrast-text);
+    background-color: var(--__ac-radio-checkbox-high-contrast-bg);
+  }
+
+  .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
+    color: var(--__ac-radio-checkbox-high-contrast-text);
+  }
+
+  .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+    background-color: var(--__ac-radio-checkbox-high-contrast-text);
+  }
+
+  .navds-radio__input:checked + .navds-radio__label::before {
+    border: 1px solid var(--__ac-radio-checkbox-high-contrast-text);
+    outline: 3px solid var(--__ac-radio-checkbox-high-contrast-bg);
+    outline-offset: -4px;
+    background-color: var(--__ac-radio-checkbox-high-contrast-text);
+  }
+
+  .navds-radio__input:checked:focus + .navds-radio__label::before {
+    border: 1px solid var(--__ac-radio-checkbox-high-contrast-bg);
+    outline: 2px solid highlight;
+    outline-offset: 2px;
+  }
+
+  :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__input:focus + .navds-checkbox__label::before {
+    outline: 2px solid var(--__ac-radio-checkbox-high-contrast-highlight);
+  }
+
+  .navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label::before {
+    border: 1px solid var(--__ac-radio-checkbox-high-contrast-text);
+    background-color: var(--__ac-radio-checkbox-high-contrast-bg);
+  }
+
+  .navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+    background-color: var(--__ac-radio-checkbox-high-contrast-text);
+  }
+
+  .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
+    border: 1px solid var(--__ac-radio-checkbox-high-contrast-text);
+    outline: 3px solid var(--__ac-radio-checkbox-high-contrast-bg);
+    outline-offset: -4px;
+    background-color: var(--__ac-radio-checkbox-high-contrast-text);
+  }
+
+  .navds-checkbox--disabled,
+  .navds-radio--disabled {
+    opacity: 1;
+
+    --__ac-radio-checkbox-high-contrast-bg: field;
+    --__ac-radio-checkbox-high-contrast-text: graytext;
+  }
+
+  :is(.navds-checkbox--disabled, .navds-radio--disabled) :is(.navds-checkbox__label, .navds-radio__label) {
+    color: graytext;
+  }
+}
@@ -0,0 +1,228 @@
+[data-theme="dark"] {
+  --__ac-search-button-border: var(--a-border-on-inverted);
+  --__ac-search-button-border-hover: var(--a-blue-200);
+  --__ac-search-clear-icon: var(--a-white);
+  --__ac-search-clear-icon-hover: var(--a-blue-200);
+  --__ac-search-error-border: var(--a-red-300);
+}
+
+[data-theme="light"] {
+  --__ac-search-button-border: initial;
+  --__ac-search-button-border-hover: initial;
+  --__ac-search-clear-icon: initial;
+  --__ac-search-clear-icon-hover: initial;
+  --__ac-search-error-border: initial;
+}
+
+.navds-search {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.navds-search__wrapper-inner {
+  position: relative;
+  width: 100%;
+}
+
+.navds-search--with-size :where(.navds-search__wrapper-inner) {
+  width: inherit;
+}
+
+.navds-search__wrapper {
+  display: inline-flex;
+  align-items: center;
+}
+
+.navds-search__input {
+  padding-right: var(--a-spacing-10);
+}
+
+.navds-form-field--small .navds-search__input {
+  padding-right: var(--a-spacing-8);
+}
+
+.navds-search__input--simple {
+  padding-left: var(--a-spacing-11);
+}
+
+.navds-form-field--small .navds-search__input--simple {
+  padding-left: var(--a-spacing-7);
+}
+
+.navds-search__input:not(.navds-search__input--simple) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.navds-search__search-icon {
+  position: absolute;
+  left: var(--a-spacing-3);
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  font-size: 1.5rem;
+}
+
+.navds-form-field--small .navds-search__search-icon {
+  left: var(--a-spacing-2);
+  font-size: 1rem;
+}
+
+.navds-search__button-clear {
+  position: absolute;
+  right: 0.75rem;
+  border-radius: var(--a-border-radius-medium);
+  color: var(--ac-search-clear-icon, var(--__ac-search-clear-icon, var(--a-text-default)));
+  height: 32px;
+  width: 32px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  background: none;
+  border: none;
+  font-size: 1.25rem;
+  padding: 0;
+}
+
+.navds-form-field--small .navds-search__button-clear {
+  right: 0.5rem;
+  height: 24px;
+  width: 24px;
+}
+
+.navds-search__button-clear:hover {
+  color: var(--ac-search-clear-icon-hover, var(--__ac-search-clear-icon-hover, var(--a-text-action-hover)));
+}
+
+.navds-search__button-clear:focus-visible {
+  outline: 2px solid transparent;
+  box-shadow: var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-search__button-clear:focus {
+    outline: 2px solid transparent;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
+.navds-search__button-search {
+  flex-shrink: 0;
+  min-width: 4rem;
+  min-height: 2rem;
+  border-radius: 0;
+  border-top-right-radius: var(--a-border-radius-medium);
+  border-bottom-right-radius: var(--a-border-radius-medium);
+}
+
+.navds-form-field--small .navds-search__button-search svg {
+  font-size: 1rem;
+}
+
+.navds-form-field--small .navds-search__button-search {
+  min-width: 2.5rem;
+}
+
+.navds-search__button-search.navds-button--secondary {
+  box-shadow:
+    -1px 0 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
+    0 1px 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
+    0 -1px 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset;
+}
+
+.navds-search__button-search.navds-button--secondary:where(:hover, :active) {
+  box-shadow:
+    -1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
+    0 1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
+    0 -1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
+    -1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover)));
+  z-index: 1;
+}
+
+.navds-search__wrapper-inner:focus-within + .navds-search__button-search.navds-button--secondary:hover {
+  z-index: auto;
+}
+
+.navds-search__button-search.navds-button--secondary:focus-visible {
+  box-shadow:
+    0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
+    var(--a-shadow-focus);
+}
+
+.navds-search__button-search.navds-button--secondary:focus-visible:hover {
+  box-shadow:
+    0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
+    var(--a-shadow-focus);
+}
+
+.navds-search__button-search.navds-button--secondary:focus-visible:active {
+  box-shadow:
+    0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset,
+    var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-search__button-search.navds-button--secondary:focus {
+    box-shadow:
+      0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
+      var(--a-shadow-focus);
+  }
+
+  .navds-search__button-search.navds-button--secondary:focus:hover {
+    box-shadow:
+      0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
+      var(--a-shadow-focus);
+  }
+
+  .navds-search__button-search.navds-button--secondary:focus:active {
+    box-shadow:
+      0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset,
+      var(--a-shadow-focus);
+  }
+}
+
+/* Error-handling */
+.navds-search--error .navds-search__input:not(:hover, :disabled) {
+  border-color: var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger)));
+  box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger)));
+}
+
+.navds-search--error .navds-search__input:focus-visible:not(:hover, :disabled) {
+  box-shadow:
+    inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
+    var(--a-shadow-focus);
+}
+
+/* Focus layering */
+.navds-search__input:focus-visible,
+.navds-search__button-clear,
+.navds-search__button-search:focus-visible {
+  z-index: 1;
+}
+
+@supports not selector(:focus-visible) {
+  .navds-search--error .navds-search__input:focus:not(:hover, :disabled) {
+    box-shadow:
+      inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
+      var(--a-shadow-focus);
+  }
+
+  .navds-search__input:focus,
+  .navds-search__button-search:focus {
+    z-index: 1;
+  }
+}
+
+@media (forced-colors: active) {
+  .navds-modal {
+    outline: 2px solid transparent;
+  }
+
+  .navds-search__button-clear:hover {
+    color: highlight;
+  }
+}
@@ -0,0 +1,115 @@
+.navds-select__input {
+  appearance: none;
+  background-color: var(--ac-select-bg, var(--a-surface-default));
+  border-radius: var(--a-border-radius-medium);
+  border: 1px solid var(--ac-select-border, var(--a-border-default));
+  color: var(--ac-select-text, var(--a-text-default));
+  width: 100%;
+  box-sizing: border-box;
+  min-height: 3rem;
+  display: inline-block;
+  position: relative;
+  padding: 0.5rem;
+  padding-right: 2rem;
+}
+
+@media (forced-colors: active) {
+  .navds-select__input.navds-select__input.navds-select__input {
+    background-color: ButtonFace;
+    border-color: ButtonText;
+    color: ButtonText;
+    forced-color-adjust: none;
+    box-shadow: none;
+  }
+
+  .navds-select__input.navds-select__input.navds-select__input:focus-visible {
+    outline: 2px solid highlight;
+    outline-offset: 2px;
+  }
+}
+
+.navds-select__input:hover {
+  border-color: var(--ac-select-hover-border, var(--a-border-action-hover));
+  cursor: pointer;
+}
+
+.navds-select__input:focus-visible {
+  outline: none;
+  border-color: var(--ac-select-active-border, var(--a-border-action-selected));
+  box-shadow: var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-select__input:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
+.navds-select__container {
+  position: relative;
+  display: flex;
+  width: 100%;
+  color: var(--a-text-default);
+}
+
+.navds-select__chevron {
+  position: absolute;
+  font-size: 1.5rem;
+  right: var(--a-spacing-2);
+  pointer-events: none;
+  align-self: center;
+  color: var(--ac-select-text, var(--a-text-default));
+}
+
+@media (forced-colors: active) {
+  .navds-select__chevron {
+    color: ButtonText;
+  }
+}
+
+.navds-form-field--small .navds-select__input {
+  min-height: 2rem;
+  padding: 0 var(--a-spacing-8) 0 var(--a-spacing-2);
+}
+
+.navds-form-field--small .navds-select__chevron {
+  right: var(--a-spacing-1-alt);
+}
+
+/**
+  Error handling
+*/
+.navds-select--error > * select:not(:hover, :focus, :disabled) {
+  box-shadow: 0 0 0 1px var(--ac-select-error-border, var(--a-surface-danger));
+  border-color: var(--ac-select-error-border, var(--a-surface-danger));
+}
+
+/**
+  Disabled
+*/
+.navds-select__input:disabled {
+  background-color: var(--ac-select-bg, var(--a-surface-default));
+  border: 1px solid var(--ac-select-border, var(--a-border-default));
+  box-shadow: none;
+  cursor: not-allowed;
+
+  /* Chrome-fix */
+  opacity: 1;
+  color: var(--a-text-default);
+}
+
+/* Chrome-fix */
+.navds-select__input:disabled > option {
+  color: var(--a-text-default);
+}
+
+.navds-select--readonly .navds-select__input {
+  background-color: var(--a-surface-subtle);
+  border-color: var(--a-border-subtle);
+  cursor: default;
+}
+
+.navds-select--readonly .navds-select__chevron {
+  color: var(--a-gray-500);
+}
@@ -0,0 +1,269 @@
+.navds-switch {
+  position: relative;
+  min-height: 3rem;
+  width: fit-content;
+}
+
+.navds-switch--right {
+  width: auto;
+}
+
+.navds-switch--small {
+  position: relative;
+  min-height: 2rem;
+}
+
+/* Input */
+.navds-switch__input {
+  cursor: pointer;
+  position: absolute;
+  z-index: 1;
+  width: 3rem;
+  height: 3rem;
+  opacity: 0;
+  top: 0;
+}
+
+.navds-switch--small > .navds-switch__input {
+  height: 2rem;
+  top: 0;
+}
+
+/* Label */
+.navds-switch__label-wrapper {
+  cursor: pointer;
+  color: var(--a-text-default);
+}
+
+.navds-switch__content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  padding: 0.75rem 0 0.75rem 3.25rem;
+}
+
+.navds-switch--right > .navds-switch__label-wrapper > .navds-switch__content {
+  padding: 0.75rem 3.25rem 0.75rem 0;
+}
+
+.navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
+  padding: calc(var(--a-spacing-2) - var(--a-spacing-05)) 0 calc(var(--a-spacing-2) - var(--a-spacing-05)) 3.25rem;
+}
+
+.navds-switch--right.navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
+  padding: calc(var(--a-spacing-2) - var(--a-spacing-05)) 3.25rem calc(var(--a-spacing-2) - var(--a-spacing-05)) 0;
+}
+
+.navds-switch--with-description,
+.navds-switch--small > .navds-switch__label-wrapper > .navds-switch--with-description {
+  padding-bottom: 0;
+}
+
+.navds-switch__input:hover ~ .navds-switch__label-wrapper,
+.navds-switch__label-wrapper:hover {
+  color: var(--ac-switch-action, var(--a-surface-action-selected));
+}
+
+.navds-switch__input:disabled:hover ~ .navds-switch__label-wrapper {
+  color: inherit;
+}
+
+/* Track */
+.navds-switch__track {
+  width: 2.75rem;
+  height: 1.5rem;
+  background-color: var(--ac-switch-bg, var(--a-surface-neutral));
+  position: absolute;
+  top: var(--a-spacing-3);
+  left: 0;
+  border-radius: var(--a-border-radius-full);
+  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.navds-switch--small > .navds-switch__track {
+  top: var(--a-spacing-1);
+}
+
+.navds-switch--right > .navds-switch__input,
+.navds-switch--right > .navds-switch__track {
+  right: 0;
+  left: auto;
+}
+
+.navds-switch__input:checked ~ .navds-switch__track {
+  background-color: var(--ac-switch-checked-bg, var(--a-surface-action-selected));
+}
+
+.navds-switch__input:hover ~ .navds-switch__track {
+  background-color: var(--ac-switch-hover-bg, var(--a-surface-neutral-hover));
+}
+
+.navds-switch__input:hover:checked ~ .navds-switch__track {
+  background-color: var(--ac-switch-checked-hover-bg, var(--a-surface-action-selected-hover));
+}
+
+.navds-switch__input:disabled ~ .navds-switch__track {
+  background-color: var(--ac-switch-bg, var(--a-surface-neutral));
+}
+
+.navds-switch__input:checked:disabled ~ .navds-switch__track {
+  background-color: var(--ac-switch-checked-bg, var(--a-border-action-selected));
+}
+
+.navds-switch__input:focus-visible ~ .navds-switch__track {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow:
+    0 0 0 1px var(--a-surface-default),
+    var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-switch__input:focus ~ .navds-switch__track {
+    outline: 2px solid transparent;
+    box-shadow:
+      0 0 0 1px var(--a-surface-default),
+      var(--a-shadow-focus);
+  }
+}
+
+/* Thumb */
+.navds-switch__thumb {
+  background-color: var(--ac-switch-thumb-bg, var(--a-surface-default));
+  color: var(--ac-switch-thumb-icon, var(--a-icon-subtle));
+  border-radius: var(--a-border-radius-full);
+  width: 1.25rem;
+  height: 1.25rem;
+  position: absolute;
+  transform: translateX(0);
+  left: var(--a-spacing-05);
+  top: var(--a-spacing-05);
+  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+  transform: translateX(1.25rem);
+  color: var(--ac-switch-thumb-icon-checked, var(--a-icon-action-selected));
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
+    transform: translateX(0.125rem);
+  }
+
+  .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
+    transform: translateX(1.125rem);
+  }
+}
+
+.navds-switch__input:disabled:hover ~ .navds-switch__track > .navds-switch__thumb {
+  transform: translateX(0);
+}
+
+.navds-switch__input:checked:disabled:hover ~ .navds-switch__track > .navds-switch__thumb {
+  transform: translateX(1.25rem);
+}
+
+/* Disabled */
+.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;
+}
+
+/* Readonly */
+.navds-switch--readonly > .navds-switch__track,
+.navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__track,
+.navds-switch--readonly > .navds-switch__input:checked ~ .navds-switch__track,
+.navds-switch--readonly > .navds-switch__input:checked:hover ~ .navds-switch__track {
+  background-color: var(--a-surface-neutral-moderate);
+}
+
+.navds-switch--readonly > .navds-switch__label-wrapper,
+.navds-switch--readonly > .navds-switch__input {
+  cursor: default;
+}
+
+.navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__label-wrapper,
+.navds-switch--readonly .navds-switch__label-wrapper:hover {
+  color: var(--a-text-default);
+}
+
+.navds-switch--readonly .navds-switch__label {
+  display: inline-flex;
+}
+
+.navds-switch--readonly .navds-switch__thumb {
+  background-color: var(--a-surface-subtle);
+  box-shadow: 0 0 0 2px var(--a-border-default);
+}
+
+.navds-switch--readonly > .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+  color: var(--a-icon-subtle);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
+    transform: translateX(0);
+  }
+
+  .navds-switch--readonly > .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
+    transform: translateX(1.25rem);
+  }
+}
+
+@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;
+  }
+
+  .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__track {
+    width: calc(2.75rem + 4px);
+    height: calc(1.5rem + 4px);
+    top: var(--a-spacing-3);
+    border: 2px solid fieldtext;
+  }
+
+  .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;
+  }
+
+  .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;
+  }
+}
@@ -0,0 +1,112 @@
+[data-theme="dark"] {
+  --__ac-textfield-text: var(--a-text-on-inverted);
+  --__ac-textfield-bg: var(--a-surface-inverted);
+  --__ac-textfield-border: var(--a-border-on-inverted);
+  --__ac-textfield-hover-border: var(--a-blue-200);
+  --__ac-textfield-placeholder: var(--a-gray-500);
+  --__ac-textfield-error-border: var(--a-red-300);
+}
+
+[data-theme="light"] {
+  --__ac-textfield-text: initial;
+  --__ac-textfield-bg: initial;
+  --__ac-textfield-border: initial;
+  --__ac-textfield-hover-border: initial;
+  --__ac-textfield-placeholder: initial;
+  --__ac-textfield-error-border: initial;
+}
+
+.navds-text-field__input {
+  appearance: none;
+  padding: var(--a-spacing-2);
+  background-color: var(--ac-textfield-bg, var(--__ac-textfield-bg, var(--a-surface-default)));
+  border-radius: var(--a-border-radius-medium);
+  border: 1px solid var(--ac-textfield-border, var(--__ac-textfield-border, var(--a-border-default)));
+  min-height: 3rem;
+  width: 100%;
+  color: var(--ac-textfield-text, var(--__ac-textfield-text, var(--a-text-default)));
+}
+
+.navds-text-field__input[size] {
+  width: auto;
+}
+
+.navds-text-field__input::placeholder {
+  color: var(--ac-textfield-placeholder, var(--__ac-textfield-placeholder, var(--a-text-subtle)));
+}
+
+.navds-form-field--small .navds-text-field__input {
+  padding: 0 var(--a-spacing-2);
+  min-height: 2rem;
+}
+
+.navds-text-field__input:hover {
+  border-color: var(--ac-textfield-hover-border, var(--__ac-textfield-hover-border, var(--a-border-action-hover)));
+}
+
+.navds-text-field__input:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: var(--a-shadow-focus);
+  border-color: var(--ac-textfield-active-border, var(--a-border-action-selected));
+}
+
+@supports not selector(:focus-visible) {
+  .navds-text-field__input:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
+/**
+  Error handling
+*/
+.navds-text-field--error > .navds-text-field__input:not(:hover, :disabled) {
+  border-color: var(--ac-textfield-error-border, var(--__ac-textfield-error-border, var(--a-border-danger)));
+  box-shadow: 0 0 0 1px var(--ac-textfield-error-border, var(--__ac-textfield-error-border, var(--a-border-danger)));
+}
+
+.navds-text-field--error > .navds-text-field__input:focus-visible:not(:hover, :disabled) {
+  box-shadow:
+    0 0 0 1px var(--a-border-danger),
+    var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-text-field--error > .navds-text-field__input:focus:not(:hover, :disabled) {
+    box-shadow:
+      0 0 0 1px var(--a-border-danger),
+      var(--a-shadow-focus);
+  }
+}
+
+/* Disabled handling */
+.navds-text-field__input:disabled {
+  background-color: var(--ac-textfield-bg, var(--__ac-textfield-bg, var(--a-surface-default)));
+  border-color: var(--ac-textfield-border, var(--__ac-textfield-border, var(--a-border-default)));
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
+.navds-text-field--readonly .navds-text-field__input {
+  background-color: var(--a-surface-subtle);
+  border-color: var(--a-border-subtle);
+  cursor: default;
+}
+
+/**
+  * Removes default search icon
+  */
+.navds-text-field__input[type="search"]::-webkit-search-decoration,
+.navds-text-field__input[type="search"]::-webkit-search-cancel-button,
+.navds-text-field__input[type="search"]::-webkit-search-results-button,
+.navds-text-field__input[type="search"]::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+}
+
+@media (forced-colors: active) {
+  .navds-text-field__input {
+    background-color: field;
+    color: fieldtext;
+  }
+}
@@ -0,0 +1,144 @@
+[data-theme="dark"] {
+  --__ac-textarea-text: var(--a-text-on-inverted);
+  --__ac-textarea-bg: var(--a-transparent);
+  --__ac-textarea-border: var(--a-border-on-inverted);
+  --__ac-textarea-hover-border: var(--a-blue-200);
+  --__ac-textarea-placeholder: var(--a-gray-500);
+  --__ac-textarea-error-border: var(--a-red-300);
+  --__ac-textarea-counter-text: var(--a-gray-300);
+  --__ac-textarea-counter-error-text: var(--a-red-300);
+}
+
+[data-theme="light"] {
+  --__ac-textarea-text: initial;
+  --__ac-textarea-bg: initial;
+  --__ac-textarea-border: initial;
+  --__ac-textarea-hover-border: initial;
+  --__ac-textarea-placeholder: initial;
+  --__ac-textarea-error-border: initial;
+  --__ac-textarea-counter-text: initial;
+  --__ac-textarea-counter-error-text: initial;
+}
+
+.navds-textarea__input {
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+  height: var(--__ac-textarea-height);
+  appearance: none;
+  padding: var(--a-spacing-2);
+  background-color: var(--ac-textarea-bg, var(--__ac-textarea-bg, var(--a-surface-default)));
+  border-radius: var(--a-border-radius-medium);
+  border: 1px solid var(--ac-textarea-border, var(--__ac-textarea-border, var(--a-border-default)));
+  resize: none;
+  width: 100%;
+  display: block;
+  color: var(--ac-textarea-text, var(--__ac-textarea-text, var(--a-text-default)));
+}
+
+.navds-textarea__input::placeholder {
+  color: var(--ac-textarea-placeholder, var(--__ac-textarea-placeholder, var(--a-text-subtle)));
+}
+
+.navds-textarea__input:hover {
+  border-color: var(--ac-textarea-hover-border, var(--__ac-textarea-hover-border, var(--a-border-action-hover)));
+}
+
+.navds-textarea__input:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: var(--a-shadow-focus);
+  border-color: var(--ac-textarea-active-border, var(--a-border-action-selected));
+}
+
+@supports not selector(:focus-visible) {
+  .navds-textarea__input:focus {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
+.navds-form-field--small .navds-textarea__input {
+  padding: var(--a-spacing-1-alt);
+}
+
+.navds-textarea__counter {
+  margin-top: -0.375rem;
+  color: var(--ac-textarea-counter-text, var(--__ac-textarea-counter-text, var(--a-text-subtle)));
+}
+
+.navds-textarea__counter--error {
+  color: var(--ac-textarea-counter-error-text, var(--__ac-textarea-counter-error-text, var(--a-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 */
+}
+
+/**
+  Error handling
+*/
+.navds-textarea--error .navds-textarea__input:not(:hover, :focus-visible, :disabled) {
+  box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
+  border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
+}
+
+@supports not selector(:focus-visible) {
+  .navds-textarea--error .navds-textarea__input:not(:hover, :focus, :disabled) {
+    box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
+    border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
+  }
+}
+
+.navds-textarea__input:disabled {
+  background-color: var(--ac-textarea-bg, var(--__ac-textarea-bg, var(--a-surface-default)));
+  border-color: var(--ac-textarea-border, var(--__ac-textarea-border, var(--a-border-default)));
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
+.navds-textarea--readonly .navds-textarea__input {
+  background-color: var(--a-surface-subtle);
+  border-color: var(--a-border-subtle);
+  cursor: default;
+}
+
+@media (forced-colors: active) {
+  .navds-textarea__input {
+    background-color: field;
+    color: fieldtext;
+  }
+}
@@ -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));
+  }
+}
@@ -0,0 +1,85 @@
+.navds-help-text__button {
+  margin: 0;
+  border: 0;
+  cursor: pointer;
+  background-color: transparent;
+  border-radius: var(--a-border-radius-full);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--ac-help-text-button-color, var(--a-surface-action));
+  font-size: 1.25rem;
+  padding: calc(var(--a-spacing-1) / 2);
+}
+
+.navds-help-text__button:focus-visible {
+  outline: 2px solid transparent;
+  box-shadow:
+    0 0 0 1px var(--a-border-focus),
+    inset 0 0 0 1px var(--a-border-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-help-text__button:focus {
+    outline: 2px solid transparent;
+    box-shadow:
+      0 0 0 1px var(--a-border-focus),
+      inset 0 0 0 1px var(--a-border-focus);
+  }
+}
+
+.navds-help-text__icon {
+  border-radius: var(--a-border-radius-full);
+}
+
+.navds-help-text__popover > .navds-popover__arrow {
+  background-color: var(--ac-help-text-popover-bg, var(--a-surface-info-subtle));
+}
+
+.navds-help-text__popover.navds-popover {
+  background-color: var(--ac-help-text-popover-bg, var(--a-surface-info-subtle));
+  max-width: min(65ch, calc(100vw - 1.5rem));
+
+  --ac-popover-border: var(--a-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(--ac-help-text-button-hover-color, var(--a-surface-action-hover));
+}
+
+.navds-help-text__button[aria-expanded="true"] > .navds-help-text__icon--filled {
+  color: var(--ac-help-text-button-active-color, var(--a-surface-action-active));
+}
+
+@supports not selector(:focus-visible) {
+  .navds-help-text__button:where(:focus) > .navds-help-text__icon {
+    display: none;
+  }
+
+  .navds-help-text__button:where(:focus) > .navds-help-text__icon--filled {
+    display: inherit;
+  }
+}
+
+@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;
+  }
+}
@@ -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";
@@ -1,17 +1,52 @@
@charset "UTF-8";

-@layer aksel.reset, aksel.typography, aksel.theme, aksel.components, aksel.utilities;
+@layer aksel.reset, aksel.typography, aksel.theme, aksel.forms, aksel.components, aksel.layout, aksel.utilities;

 /* CSS foundations */
-@import url("./baseline/reset.darkside.css") layer(aksel.reset);
-@import url("./baseline/print.darkside.css") layer(aksel.reset);
-@import url("./baseline/fonts.darkside.css") layer(aksel.typography);
-@import url("./baseline/theme.darkside.css") layer(aksel.theme);
-@import url("./typography.darkside.css") layer(aksel.typography);
-@import url("./baseline/utilities.darkside.css") layer(aksel.utilities);
+@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);
+
+/* Test: Handles layers itself */
+@import "./form/index.css";
+@import "./primitives/index.css";

 /* Theming */
-@import url("@navikt/ds-tokens/dist/darkside/tokens.css") layer(aksel.theme);
+@import "@navikt/ds-tokens/dist/darkside/tokens.css" layer(aksel.theme);

 /* Components */
-@import url("./button.darkside.css") layer(aksel.components);
+@import "../primitives/stack.css" layer(aksel.components);
+@import "./accordion.darkside.css" layer(aksel.components);
+@import "./button.darkside.css" layer(aksel.components);
+@import "./alert.darkside.css" layer(aksel.components);
+@import "./chat.darkside.css" layer(aksel.components);
+@import "./chips.darkside.css" layer(aksel.components);
+@import "./copybutton.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 "./date.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);
@@ -0,0 +1,105 @@
+.navds-internalheader {
+  display: flex;
+  align-self: stretch;
+  background: var(--ac-internalheader-bg, var(--a-surface-inverted));
+  min-height: 3rem;
+
+  --navds-internalheader-focus: inset 0 0 0 2px var(--a-border-focus-on-inverted);
+}
+
+@media (forced-colors: active) {
+  .navds-internalheader {
+    background-color: ButtonFace;
+    border: solid 1px ButtonText;
+    color: ButtonText;
+  }
+
+  .navds-internalheader a:focus-visible {
+    box-shadow: none;
+    outline: 2px solid highlight;
+    outline-offset: 2px;
+  }
+
+  .navds-internalheader .navds-internalheader__button:focus-visible {
+    box-shadow: none;
+    outline: 2px solid highlight;
+    outline-offset: 2px;
+  }
+}
+
+.navds-internalheader__title {
+  border: none;
+  overflow: visible;
+  background: transparent;
+  font: inherit;
+  font-weight: var(--a-font-weight-bold);
+  line-height: normal;
+  text-align: left;
+  padding: 0 var(--a-spacing-5) 0 var(--a-spacing-6);
+  border-right: 1px solid var(--ac-internalheader-divider, var(--a-gray-600));
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  margin: 0;
+  color: var(--ac-internalheader-text, var(--a-text-on-inverted));
+}
+
+button.navds-internalheader__title {
+  cursor: pointer;
+}
+
+.navds-internalheader__user {
+  padding: 0 var(--a-spacing-5);
+  border-left: 1px solid var(--ac-internalheader-divider, var(--a-gray-600));
+  display: flex;
+  align-items: center;
+}
+
+.navds-internalheader__button {
+  border: none;
+  margin: 0;
+  padding: 0 var(--a-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(--a-spacing-2);
+  border-left: 1px solid var(--ac-internalheader-divider, var(--a-gray-600));
+  color: var(--ac-internalheader-text, var(--a-text-on-inverted));
+}
+
+a.navds-internalheader__title:hover,
+button.navds-internalheader__title:hover,
+.navds-internalheader__button:hover {
+  background-color: var(--ac-internalheader-hover-bg, var(--a-surface-inverted-hover));
+}
+
+.navds-internalheader__title:focus-visible,
+.navds-internalheader__button:focus-visible {
+  box-shadow: var(--navds-internalheader-focus);
+  outline: none;
+}
+
+@supports not selector(:focus-visible) {
+  .navds-internalheader__title:focus,
+  .navds-internalheader__button:focus {
+    box-shadow: var(--navds-internalheader-focus);
+    outline: none;
+  }
+}
+
+a.navds-internalheader__title:active,
+button.navds-internalheader__title:active,
+.navds-internalheader__button:active {
+  background-color: var(--ac-internalheader-active-bg, var(--a-surface-inverted-active));
+}
+
+.navds-internalheader__user-button {
+  padding-left: var(--a-spacing-5);
+  gap: var(--a-spacing-4);
+}
@@ -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);
+}
@@ -0,0 +1,79 @@
+.navds-link {
+  color: var(--ac-link-text, var(--a-text-action));
+  text-decoration: underline;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--a-spacing-1);
+}
+
+.navds-link.navds-link--inline-text {
+  display: inline;
+}
+
+.navds-link.navds-link--inline-text > 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:hover {
+  text-decoration: none;
+}
+
+.navds-link.navds-link--remove-underline {
+  text-decoration: none;
+}
+
+.navds-link.navds-link--remove-underline:hover {
+  text-decoration: underline;
+}
+
+.navds-alert .navds-link,
+.navds-confirmation-panel .navds-link {
+  color: var(--a-text-default);
+}
+
+.navds-link:focus-visible {
+  outline: 2px solid transparent;
+  color: var(--ac-link-focus-text, var(--a-text-on-action));
+  text-decoration: none;
+  background-color: var(--ac-link-focus-bg, var(--a-border-focus));
+  box-shadow: 0 0 0 2px var(--ac-link-focus-border, var(--a-border-focus));
+}
+
+@supports not selector(:focus-visible) {
+  .navds-link:focus {
+    outline: 2px solid transparent;
+    color: var(--ac-link-focus-text, var(--a-text-on-action));
+    text-decoration: none;
+    background-color: var(--ac-link-focus-bg, var(--a-border-focus));
+    box-shadow: 0 0 0 2px var(--ac-link-focus-border, var(--a-border-focus));
+  }
+}
+
+.navds-link:active {
+  outline: 2px solid transparent;
+  color: var(--ac-link-active-text, var(--a-text-on-action));
+  text-decoration: none;
+  background-color: var(--ac-link-active-bg, var(--a-border-focus));
+  box-shadow: 0 0 0 2px var(--ac-link-active-border, var(--a-border-focus));
+}
+
+.navds-link svg {
+  color: inherit;
+  flex-shrink: 0;
+}
+
+.navds-link--action {
+  color: var(--ac-link-action-text, var(--a-text-action));
+}
+
+.navds-link--neutral {
+  color: var(--ac-link-neutral-text, var(--a-text-default));
+}
+
+.navds-link--subtle {
+  color: var(--ac-link-subtle-text, var(--a-text-subtle));
+}
@@ -0,0 +1,85 @@
+.navds-list ul,
+.navds-list ol {
+  padding: 0;
+  margin-block: var(--a-spacing-4);
+}
+
+.navds-list--small ul,
+.navds-list--small ol {
+  margin-block: var(--a-spacing-3);
+}
+
+.navds-list .navds-list :where(ul, ol) {
+  margin-block: var(--a-spacing-2) 0;
+}
+
+.navds-list ol {
+  list-style: decimal; /* This is the default value, but some frameworks have `ol,ul { list-style:none }` */
+  padding-left: 1.7rem;
+}
+
+.navds-list ol > .navds-list__item {
+  padding-left: 0.3rem;
+}
+
+/* SAFARI HACK START */
+/* stylelint-disable selector-type-no-unknown */
+
+_::-webkit-full-page-media,
+_:future,
+:root .navds-list ol {
+  padding-left: 2.1rem;
+}
+
+_::-webkit-full-page-media,
+_:future,
+:root .navds-list ol .navds-list__item {
+  padding-left: 0;
+}
+
+/* SAFARI HACK END */
+/* stylelint-enable selector-type-no-unknown */
+
+.navds-list__item {
+  margin-block-end: var(--a-spacing-2);
+}
+
+.navds-list__item:last-child {
+  margin-block-end: 0;
+}
+
+.navds-list ul > .navds-list__item {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--a-spacing-2);
+}
+
+.navds-list ol li::marker {
+  font-weight: var(--a-font-weight-bold);
+  color: var(--ac-list-marker-ol-color, var(--ac-list-marker-color, var(--a-icon-default)));
+}
+
+.navds-list__item-marker {
+  width: 1.5rem;
+}
+
+.navds-list ul > li > .navds-list__item-marker {
+  display: flex;
+  align-items: center;
+  height: var(--a-font-line-height-xlarge);
+}
+
+.navds-list--small ul > li > .navds-list__item-marker {
+  height: var(--a-font-line-height-large);
+}
+
+.navds-list__item-marker--bullet {
+  padding-left: 0.8rem;
+  color: var(--ac-list-marker-ul-color, var(--ac-list-marker-color, var(--a-icon-default)));
+}
+
+.navds-list__item-marker--icon {
+  font-size: 1.5rem;
+  justify-content: center;
+  color: var(--ac-list-marker-icon-color, var(--ac-list-marker-color, var(--a-icon-default)));
+}
@@ -0,0 +1,119 @@
+.navds-loader {
+  width: 1.5rem;
+  display: inline-block;
+  position: relative;
+  animation: loader-rotate 1.8s linear infinite;
+  stroke-width: 6;
+
+  --ac-loader-background-stroke-width: 5.9;
+}
+
+.navds-loader__foreground {
+  animation: loader-dasharray 1.8s ease-in-out infinite;
+  stroke-dasharray: 80px, 200px;
+  stroke-dashoffset: 0;
+  stroke: var(--ac-loader-stroke, var(--a-border-default));
+}
+
+.navds-loader__background {
+  stroke: var(--ac-loader-stroke-bg, var(--a-surface-active));
+  stroke-width: var(--ac-loader-background-stroke-width);
+}
+
+.navds-loader--neutral .navds-loader__foreground {
+  stroke: var(--ac-loader-neutral-stroke, var(--a-border-default));
+}
+
+.navds-loader--interaction .navds-loader__foreground {
+  stroke: var(--ac-loader-interaction-stroke, var(--a-border-action));
+}
+
+.navds-loader--inverted .navds-loader__foreground {
+  stroke: var(--ac-loader-inverted-stroke, var(--a-border-on-inverted));
+}
+
+.navds-loader--inverted .navds-loader__background {
+  stroke: var(--ac-loader-inverted-stroke-bg, var(--a-border-on-inverted-subtle));
+}
+
+.navds-loader--transparent .navds-loader__background {
+  stroke: var(--a-surface-transparent);
+}
+
+.navds-loader--3xlarge {
+  width: 5.5rem;
+  stroke-width: 5;
+
+  --ac-loader-background-stroke-width: 4.8;
+}
+
+.navds-loader--2xlarge {
+  width: 4rem;
+  stroke-width: 6;
+
+  --ac-loader-background-stroke-width: 5.8;
+}
+
+.navds-loader--xlarge {
+  width: 2.5rem;
+  stroke-width: 6;
+
+  --ac-loader-background-stroke-width: 5.8;
+}
+
+.navds-loader--large {
+  width: 2rem;
+  stroke-width: 7;
+
+  --ac-loader-background-stroke-width: 6.8;
+}
+
+.navds-loader--medium {
+  width: 1.5rem;
+  stroke-width: 7;
+
+  --ac-loader-background-stroke-width: 6.8;
+}
+
+.navds-loader--small {
+  width: 1.25rem;
+  stroke-width: 8;
+
+  --ac-loader-background-stroke-width: 7.8;
+}
+
+.navds-loader--xsmall {
+  width: 1rem;
+  stroke-width: 8;
+
+  --ac-loader-background-stroke-width: 7.8;
+}
+
+@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;
+  }
+}
@@ -0,0 +1,209 @@
+.navds-modal__document-body {
+  overflow: hidden;
+}
+
+.navds-modal {
+  --__ac-modal-bg: var(--ac-modal-bg, var(--a-surface-default));
+
+  background-color: var(--__ac-modal-bg);
+  border: none;
+  border-radius: var(--a-border-radius-large);
+  box-shadow: var(--a-shadow-xlarge);
+  padding: 0;
+  position: fixed;
+  max-height: 100%;
+  max-width: 100%;
+  color: var(--a-text-default);
+}
+
+.navds-modal[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;
+}
+
+.navds-modal--polyfilled .navds-modal--polyfilled {
+  overflow: auto;
+}
+
+.navds-modal--polyfilled:not([open]) {
+  display: none; /* from polyfill */
+}
+
+._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--small {
+  width: var(--ac-modal-width-small, 450px);
+}
+
+.navds-modal--medium {
+  width: var(--ac-modal-width-medium, 700px);
+}
+
+@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 --a-surface-backdrop because ::backdrop does not inherit from anything but itself.
+   * But consumers can do `::backdrop { --ac-modal-backdrop: white; }`
+   * We can add ::backdrop to tokens.css when we remove the polyfill.
+   */
+  background: var(--ac-modal-backdrop, rgb(2 20 49 / 0.49));
+  animation: akselModalBackdropFadeIn 0.35s cubic-bezier(0.15, 1, 0.3, 1);
+}
+
+.navds-modal--polyfilled + .backdrop /* Cannot be combined with ::backdrop selector */ {
+  background: var(--ac-modal-backdrop, rgb(2 20 49 / 0.49));
+
+  /* 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(--a-spacing-4);
+  float: right;
+}
+
+.navds-modal__header {
+  padding: var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-4) var(--a-spacing-6);
+}
+
+.navds-modal--small .navds-modal__header {
+  padding: var(--a-spacing-4) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-4);
+}
+
+.navds-modal__header-icon svg {
+  display: inline;
+  vertical-align: -0.25rem;
+  margin-right: var(--a-spacing-1);
+}
+
+.navds-modal__label {
+  font-weight: 600;
+  color: var(--a-text-subtle);
+}
+
+.navds-modal__body {
+  padding: var(--a-spacing-6);
+  overflow: auto;
+  overscroll-behavior: contain;
+  position: relative; /* Needed to make sr-only elements position correctly - see Storybook */
+  background:
+    linear-gradient(var(--__ac-modal-bg) 30%, transparent) top,
+    linear-gradient(transparent, var(--__ac-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--small .navds-modal__body {
+  padding: var(--a-spacing-2) var(--a-spacing-4) var(--a-spacing-4);
+}
+
+.navds-modal__header + .navds-modal__body {
+  padding-top: var(--a-spacing-0);
+}
+
+.navds-modal__footer {
+  display: flex;
+  flex-flow: row-reverse wrap;
+  gap: var(--a-spacing-4);
+  padding: var(--a-spacing-4) var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-6);
+}
+
+.navds-modal--small .navds-modal__footer {
+  padding: var(--a-spacing-4);
+}
+
+.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(5% + 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;
+  }
+}
@@ -0,0 +1,73 @@
+.navds-pagination {
+  position: relative;
+}
+
+.navds-pagination__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  gap: var(--a-spacing-3);
+}
+
+.navds-pagination__ellipsis {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--a-spacing-12);
+  cursor: default;
+}
+
+.navds-pagination--small .navds-pagination__ellipsis {
+  width: var(--a-spacing-8);
+}
+
+.navds-pagination--xsmall .navds-pagination__ellipsis {
+  width: var(--a-spacing-6);
+}
+
+.navds-pagination__item {
+  color: var(--ac-pagination-text, var(--a-text-default));
+}
+
+.navds-pagination--medium .navds-pagination__item {
+  border-radius: var(--a-border-radius-medium);
+}
+
+.navds-pagination__item[aria-current="true"] {
+  background-color: var(--ac-pagination-selected-bg, var(--a-surface-action-selected));
+  color: var(--ac-pagination-selected-text, var(--a-text-on-action));
+}
+
+.navds-pagination__item[aria-current="true"]:focus-visible {
+  box-shadow:
+    inset 0 0 0 1px var(--a-surface-default),
+    var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-pagination__item[aria-current="true"]:focus {
+    box-shadow:
+      inset 0 0 0 1px var(--a-surface-default),
+      var(--a-shadow-focus);
+  }
+}
+
+.navds-pagination__prev-next {
+  display: flex;
+  align-items: center;
+  gap: var(--a-spacing-1);
+}
+
+.navds-pagination--small .navds-pagination__prev-next:where(.navds-pagination--prev-next--with-text) {
+  padding-inline: var(--a-spacing-1-alt);
+}
+
+.navds-pagination--xsmall .navds-pagination__prev-next:where(.navds-pagination--prev-next--with-text) {
+  padding-left: var(--a-spacing-05);
+  padding-right: var(--a-spacing-05);
+}
+
+.navds-pagination--invisible {
+  visibility: hidden;
+}
@@ -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));
+}
@@ -0,0 +1,84 @@
+.navds-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);
+  max-width: calc(100vw - var(--a-spacing-6));
+}
+
+.navds-popover__content {
+  padding: var(--a-spacing-4);
+}
+
+.navds-popover--hidden {
+  display: none;
+}
+
+.navds-popover:focus-visible {
+  outline: none;
+  box-shadow: var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-popover:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
+.navds-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-popover[data-placement^="top"] > .navds-popover__arrow {
+  border-left-color: transparent;
+  border-top-color: transparent;
+}
+
+/* prettier-ignore */
+.navds-popover[data-placement^="bottom"] > .navds-popover__arrow {
+  border-bottom-color: transparent;
+  border-right-color: transparent;
+}
+
+.navds-popover[data-placement^="left"] > .navds-popover__arrow {
+  border-left-color: transparent;
+  border-bottom-color: transparent;
+}
+
+.navds-popover[data-placement^="right"] > .navds-popover__arrow {
+  border-right-color: transparent;
+  border-top-color: transparent;
+}
+
+@media (forced-colors: active) {
+  .navds-popover[data-placement^="top"] > .navds-popover__arrow {
+    border-left-color: canvas;
+    border-top-color: canvas;
+  }
+
+  /* prettier-ignore */
+  .navds-popover[data-placement^="bottom"] > .navds-popover__arrow {
+    border-bottom-color: canvas;
+    border-right-color: canvas;
+  }
+
+  .navds-popover[data-placement^="left"] > .navds-popover__arrow {
+    border-left-color: canvas;
+    border-bottom-color: canvas;
+  }
+
+  .navds-popover[data-placement^="right"] > .navds-popover__arrow {
+    border-right-color: canvas;
+    border-top-color: canvas;
+  }
+}
@@ -0,0 +1,809 @@
+.navds-r-p {
+  --__ac-r-p-xs: initial;
+  --__ac-r-p-sm: var(--__ac-r-p-xs);
+  --__ac-r-p-md: var(--__ac-r-p-sm);
+  --__ac-r-p-lg: var(--__ac-r-p-md);
+  --__ac-r-p-xl: var(--__ac-r-p-lg);
+  --__ac-r-p-2xl: var(--__ac-r-p-xl);
+  --__ac-r-padding: var(--__ac-r-p-xs);
+
+  padding: var(--__ac-r-padding);
+}
+
+.navds-r-pi {
+  --__ac-r-pi-xs: initial;
+  --__ac-r-pi-sm: var(--__ac-r-pi-xs);
+  --__ac-r-pi-md: var(--__ac-r-pi-sm);
+  --__ac-r-pi-lg: var(--__ac-r-pi-md);
+  --__ac-r-pi-xl: var(--__ac-r-pi-lg);
+  --__ac-r-pi-2xl: var(--__ac-r-pi-xl);
+  --__ac-r-pi: var(--__ac-r-pi-xs);
+
+  padding-inline: var(--__ac-r-pi, var(--__ac-r-padding));
+}
+
+.navds-r-pb {
+  --__ac-r-pb-xs: initial;
+  --__ac-r-pb-sm: var(--__ac-r-pb-xs);
+  --__ac-r-pb-md: var(--__ac-r-pb-sm);
+  --__ac-r-pb-lg: var(--__ac-r-pb-md);
+  --__ac-r-pb-xl: var(--__ac-r-pb-lg);
+  --__ac-r-pb-2xl: var(--__ac-r-pb-xl);
+  --__ac-r-pb: var(--__ac-r-pb-xs);
+
+  padding-block: var(--__ac-r-pb, var(--__ac-r-padding));
+}
+
+.navds-r-m {
+  --__ac-r-m-xs: initial;
+  --__ac-r-m-sm: var(--__ac-r-m-xs);
+  --__ac-r-m-md: var(--__ac-r-m-sm);
+  --__ac-r-m-lg: var(--__ac-r-m-md);
+  --__ac-r-m-xl: var(--__ac-r-m-lg);
+  --__ac-r-m-2xl: var(--__ac-r-m-xl);
+  --__ac-r-margin: var(--__ac-r-m-xs);
+
+  margin: var(--__ac-r-margin);
+}
+
+.navds-r-mi {
+  --__ac-r-mi-xs: initial;
+  --__ac-r-mi-sm: var(--__ac-r-mi-xs);
+  --__ac-r-mi-md: var(--__ac-r-mi-sm);
+  --__ac-r-mi-lg: var(--__ac-r-mi-md);
+  --__ac-r-mi-xl: var(--__ac-r-mi-lg);
+  --__ac-r-mi-2xl: var(--__ac-r-mi-xl);
+  --__ac-r-mi: var(--__ac-r-mi-xs);
+
+  margin-inline: var(--__ac-r-mi, var(--__ac-r-margin));
+}
+
+.navds-r-mb {
+  --__ac-r-mb-xs: initial;
+  --__ac-r-mb-sm: var(--__ac-r-mb-xs);
+  --__ac-r-mb-md: var(--__ac-r-mb-sm);
+  --__ac-r-mb-lg: var(--__ac-r-mb-md);
+  --__ac-r-mb-xl: var(--__ac-r-mb-lg);
+  --__ac-r-mb-2xl: var(--__ac-r-mb-xl);
+  --__ac-r-mb: var(--__ac-r-mb-xs);
+
+  margin-block: var(--__ac-r-mb, var(--__ac-r-margin));
+}
+
+.navds-r-w {
+  --__ac-r-w-xs: initial;
+  --__ac-r-w-sm: var(--__ac-r-w-xs);
+  --__ac-r-w-md: var(--__ac-r-w-sm);
+  --__ac-r-w-lg: var(--__ac-r-w-md);
+  --__ac-r-w-xl: var(--__ac-r-w-lg);
+  --__ac-r-w-2xl: var(--__ac-r-w-xl);
+  --__ac-r-w: var(--__ac-r-w-xs);
+
+  width: var(--__ac-r-w);
+}
+
+.navds-r-minw {
+  --__ac-r-minw-xs: initial;
+  --__ac-r-minw-sm: var(--__ac-r-minw-xs);
+  --__ac-r-minw-md: var(--__ac-r-minw-sm);
+  --__ac-r-minw-lg: var(--__ac-r-minw-md);
+  --__ac-r-minw-xl: var(--__ac-r-minw-lg);
+  --__ac-r-minw-2xl: var(--__ac-r-minw-xl);
+  --__ac-r-minw: var(--__ac-r-minw-xs);
+
+  min-width: var(--__ac-r-minw);
+}
+
+.navds-r-maxw {
+  --__ac-r-maxw-xs: initial;
+  --__ac-r-maxw-sm: var(--__ac-r-maxw-xs);
+  --__ac-r-maxw-md: var(--__ac-r-maxw-sm);
+  --__ac-r-maxw-lg: var(--__ac-r-maxw-md);
+  --__ac-r-maxw-xl: var(--__ac-r-maxw-lg);
+  --__ac-r-maxw-2xl: var(--__ac-r-maxw-xl);
+  --__ac-r-maxw: var(--__ac-r-maxw-xs);
+
+  max-width: var(--__ac-r-maxw);
+}
+
+.navds-r-h {
+  --__ac-r-h-xs: initial;
+  --__ac-r-h-sm: var(--__ac-r-h-xs);
+  --__ac-r-h-md: var(--__ac-r-h-sm);
+  --__ac-r-h-lg: var(--__ac-r-h-md);
+  --__ac-r-h-xl: var(--__ac-r-h-lg);
+  --__ac-r-h-2xl: var(--__ac-r-h-xl);
+  --__ac-r-h: var(--__ac-r-h-xs);
+
+  height: var(--__ac-r-h);
+}
+
+.navds-r-minh {
+  --__ac-r-minh-xs: initial;
+  --__ac-r-minh-sm: var(--__ac-r-minh-xs);
+  --__ac-r-minh-md: var(--__ac-r-minh-sm);
+  --__ac-r-minh-lg: var(--__ac-r-minh-md);
+  --__ac-r-minh-xl: var(--__ac-r-minh-lg);
+  --__ac-r-minh-2xl: var(--__ac-r-minh-xl);
+  --__ac-r-minh: var(--__ac-r-minh-xs);
+
+  min-height: var(--__ac-r-minh);
+}
+
+.navds-r-maxh {
+  --__ac-r-maxh-xs: initial;
+  --__ac-r-maxh-sm: var(--__ac-r-maxh-xs);
+  --__ac-r-maxh-md: var(--__ac-r-maxh-sm);
+  --__ac-r-maxh-lg: var(--__ac-r-maxh-md);
+  --__ac-r-maxh-xl: var(--__ac-r-maxh-lg);
+  --__ac-r-maxh-2xl: var(--__ac-r-maxh-xl);
+  --__ac-r-maxh: var(--__ac-r-maxh-xs);
+
+  max-height: var(--__ac-r-maxh);
+}
+
+.navds-r-position {
+  --__ac-r-position-xs: initial;
+  --__ac-r-position-sm: var(--__ac-r-position-xs);
+  --__ac-r-position-md: var(--__ac-r-position-sm);
+  --__ac-r-position-lg: var(--__ac-r-position-md);
+  --__ac-r-position-xl: var(--__ac-r-position-lg);
+  --__ac-r-position-2xl: var(--__ac-r-position-xl);
+  --__ac-r-position: var(--__ac-r-position-xs);
+
+  position: var(--__ac-r-position);
+}
+
+.navds-r-inset {
+  --__ac-r-inset-xs: initial;
+  --__ac-r-inset-sm: var(--__ac-r-inset-xs);
+  --__ac-r-inset-md: var(--__ac-r-inset-sm);
+  --__ac-r-inset-lg: var(--__ac-r-inset-md);
+  --__ac-r-inset-xl: var(--__ac-r-inset-lg);
+  --__ac-r-inset-2xl: var(--__ac-r-inset-xl);
+  --__ac-r-inset: var(--__ac-r-inset-xs);
+
+  inset: var(--__ac-r-inset);
+}
+
+.navds-r-top {
+  --__ac-r-top-xs: initial;
+  --__ac-r-top-sm: var(--__ac-r-top-xs);
+  --__ac-r-top-md: var(--__ac-r-top-sm);
+  --__ac-r-top-lg: var(--__ac-r-top-md);
+  --__ac-r-top-xl: var(--__ac-r-top-lg);
+  --__ac-r-top-2xl: var(--__ac-r-top-xl);
+  --__ac-r-top: var(--__ac-r-top-xs);
+
+  top: var(--__ac-r-top);
+}
+
+.navds-r-right {
+  --__ac-r-right-xs: initial;
+  --__ac-r-right-sm: var(--__ac-r-right-xs);
+  --__ac-r-right-md: var(--__ac-r-right-sm);
+  --__ac-r-right-lg: var(--__ac-r-right-md);
+  --__ac-r-right-xl: var(--__ac-r-right-lg);
+  --__ac-r-right-2xl: var(--__ac-r-right-xl);
+  --__ac-r-right: var(--__ac-r-right-xs);
+
+  right: var(--__ac-r-right);
+}
+
+.navds-r-bottom {
+  --__ac-r-bottom-xs: initial;
+  --__ac-r-bottom-sm: var(--__ac-r-bottom-xs);
+  --__ac-r-bottom-md: var(--__ac-r-bottom-sm);
+  --__ac-r-bottom-lg: var(--__ac-r-bottom-md);
+  --__ac-r-bottom-xl: var(--__ac-r-bottom-lg);
+  --__ac-r-bottom-2xl: var(--__ac-r-bottom-xl);
+  --__ac-r-bottom: var(--__ac-r-bottom-xs);
+
+  bottom: var(--__ac-r-bottom);
+}
+
+.navds-r-left {
+  --__ac-r-left-xs: initial;
+  --__ac-r-left-sm: var(--__ac-r-left-xs);
+  --__ac-r-left-md: var(--__ac-r-left-sm);
+  --__ac-r-left-lg: var(--__ac-r-left-md);
+  --__ac-r-left-xl: var(--__ac-r-left-lg);
+  --__ac-r-left-2xl: var(--__ac-r-left-xl);
+  --__ac-r-left: var(--__ac-r-left-xs);
+
+  left: var(--__ac-r-left);
+}
+
+.navds-r-overflow {
+  --__ac-r-overflow-xs: initial;
+  --__ac-r-overflow-sm: var(--__ac-r-overflow-xs);
+  --__ac-r-overflow-md: var(--__ac-r-overflow-sm);
+  --__ac-r-overflow-lg: var(--__ac-r-overflow-md);
+  --__ac-r-overflow-xl: var(--__ac-r-overflow-lg);
+  --__ac-r-overflow-2xl: var(--__ac-r-overflow-xl);
+  --__ac-r-overflow: var(--__ac-r-overflow-xs);
+
+  overflow: var(--__ac-r-overflow);
+}
+
+.navds-r-overflowx {
+  --__ac-r-overflowx-xs: initial;
+  --__ac-r-overflowx-sm: var(--__ac-r-overflowx-xs);
+  --__ac-r-overflowx-md: var(--__ac-r-overflowx-sm);
+  --__ac-r-overflowx-lg: var(--__ac-r-overflowx-md);
+  --__ac-r-overflowx-xl: var(--__ac-r-overflowx-lg);
+  --__ac-r-overflowx-2xl: var(--__ac-r-overflowx-xl);
+  --__ac-r-overflowx: var(--__ac-r-overflowx-xs);
+
+  overflow-x: var(--__ac-r-overflowx);
+}
+
+.navds-r-overflowy {
+  --__ac-r-overflowy-xs: initial;
+  --__ac-r-overflowy-sm: var(--__ac-r-overflowy-xs);
+  --__ac-r-overflowy-md: var(--__ac-r-overflowy-sm);
+  --__ac-r-overflowy-lg: var(--__ac-r-overflowy-md);
+  --__ac-r-overflowy-xl: var(--__ac-r-overflowy-lg);
+  --__ac-r-overflowy-2xl: var(--__ac-r-overflowy-xl);
+  --__ac-r-overflowy: var(--__ac-r-overflowy-xs);
+
+  overflow-y: var(--__ac-r-overflowy);
+}
+
+.navds-r-flex-basis {
+  --__ac-r-flex-basis-xs: initial;
+  --__ac-r-flex-basis-sm: var(--__ac-r-flex-basis-xs);
+  --__ac-r-flex-basis-md: var(--__ac-r-flex-basis-sm);
+  --__ac-r-flex-basis-lg: var(--__ac-r-flex-basis-md);
+  --__ac-r-flex-basis-xl: var(--__ac-r-flex-basis-lg);
+  --__ac-r-flex-basis-2xl: var(--__ac-r-flex-basis-xl);
+  --__ac-r-flex-basis: var(--__ac-r-flex-basis-xs);
+
+  flex-basis: var(--__ac-r-flex-basis);
+}
+
+.navds-r-flex-grow {
+  --__ac-r-flex-grow-xs: initial;
+  --__ac-r-flex-grow-sm: var(--__ac-r-flex-grow-xs);
+  --__ac-r-flex-grow-md: var(--__ac-r-flex-grow-sm);
+  --__ac-r-flex-grow-lg: var(--__ac-r-flex-grow-md);
+  --__ac-r-flex-grow-xl: var(--__ac-r-flex-grow-lg);
+  --__ac-r-flex-grow-2xl: var(--__ac-r-flex-grow-xl);
+  --__ac-r-flex-grow: var(--__ac-r-flex-grow-xs);
+
+  flex-grow: var(--__ac-r-flex-grow);
+}
+
+.navds-r-flex-shrink {
+  --__ac-r-flex-shrink-xs: initial;
+  --__ac-r-flex-shrink-sm: var(--__ac-r-flex-shrink-xs);
+  --__ac-r-flex-shrink-md: var(--__ac-r-flex-shrink-sm);
+  --__ac-r-flex-shrink-lg: var(--__ac-r-flex-shrink-md);
+  --__ac-r-flex-shrink-xl: var(--__ac-r-flex-shrink-lg);
+  --__ac-r-flex-shrink-2xl: var(--__ac-r-flex-shrink-xl);
+  --__ac-r-flex-shrink: var(--__ac-r-flex-shrink-xs);
+
+  flex-shrink: var(--__ac-r-flex-shrink);
+}
+
+.navds-r-grid-column {
+  --__ac-r-grid-column-xs: initial;
+  --__ac-r-grid-column-sm: var(--__ac-r-grid-column-xs);
+  --__ac-r-grid-column-md: var(--__ac-r-grid-column-sm);
+  --__ac-r-grid-column-lg: var(--__ac-r-grid-column-md);
+  --__ac-r-grid-column-xl: var(--__ac-r-grid-column-lg);
+  --__ac-r-grid-column-2xl: var(--__ac-r-grid-column-xl);
+  --__ac-r-grid-column: var(--__ac-r-grid-column-xs);
+
+  grid-column: var(--__ac-r-grid-column);
+}
+
+@media (min-width: 480px) {
+  .navds-r-p {
+    --__ac-r-padding: var(--__ac-r-p-sm);
+  }
+
+  .navds-r-pi {
+    --__ac-r-pi: var(--__ac-r-pi-sm);
+  }
+
+  .navds-r-pb {
+    --__ac-r-pb: var(--__ac-r-pb-sm);
+  }
+
+  .navds-r-m {
+    --__ac-r-margin: var(--__ac-r-m-sm);
+  }
+
+  .navds-r-mi {
+    --__ac-r-mi: var(--__ac-r-mi-sm);
+  }
+
+  .navds-r-mb {
+    --__ac-r-mb: var(--__ac-r-mb-sm);
+  }
+
+  .navds-r-w {
+    --__ac-r-w: var(--__ac-r-w-sm);
+  }
+
+  .navds-r-minw {
+    --__ac-r-minw: var(--__ac-r-minw-sm);
+  }
+
+  .navds-r-maxw {
+    --__ac-r-maxw: var(--__ac-r-maxw-sm);
+  }
+
+  .navds-r-h {
+    --__ac-r-h: var(--__ac-r-h-sm);
+  }
+
+  .navds-r-minh {
+    --__ac-r-minh: var(--__ac-r-minh-sm);
+  }
+
+  .navds-r-maxh {
+    --__ac-r-maxh: var(--__ac-r-maxh-sm);
+  }
+
+  .navds-r-position {
+    --__ac-r-position: var(--__ac-r-position-sm);
+  }
+
+  .navds-r-inset {
+    --__ac-r-inset: var(--__ac-r-inset-sm);
+  }
+
+  .navds-r-top {
+    --__ac-r-top: var(--__ac-r-top-sm);
+  }
+
+  .navds-r-right {
+    --__ac-r-right: var(--__ac-r-right-sm);
+  }
+
+  .navds-r-bottom {
+    --__ac-r-bottom: var(--__ac-r-bottom-sm);
+  }
+
+  .navds-r-left {
+    --__ac-r-left: var(--__ac-r-left-sm);
+  }
+
+  .navds-r-overflow {
+    --__ac-r-overflow: var(--__ac-r-overflow-sm);
+  }
+
+  .navds-r-overflowx {
+    --__ac-r-overflowx: var(--__ac-r-overflowx-sm);
+  }
+
+  .navds-r-overflowy {
+    --__ac-r-overflowy: var(--__ac-r-overflowy-sm);
+  }
+
+  .navds-r-flex-basis {
+    --__ac-r-flex-basis: var(--__ac-r-flex-basis-sm);
+  }
+
+  .navds-r-flex-grow {
+    --__ac-r-flex-grow: var(--__ac-r-flex-grow-sm);
+  }
+
+  .navds-r-flex-shrink {
+    --__ac-r-flex-shrink: var(--__ac-r-flex-shrink-sm);
+  }
+
+  .navds-r-grid-column {
+    --__ac-r-grid-column: var(--__ac-r-grid-column-sm);
+  }
+}
+
+@media (min-width: 768px) {
+  .navds-r-p {
+    --__ac-r-padding: var(--__ac-r-p-md);
+  }
+
+  .navds-r-pi {
+    --__ac-r-pi: var(--__ac-r-pi-md);
+  }
+
+  .navds-r-pb {
+    --__ac-r-pb: var(--__ac-r-pb-md);
+  }
+
+  .navds-r-m {
+    --__ac-r-margin: var(--__ac-r-m-md);
+  }
+
+  .navds-r-mi {
+    --__ac-r-mi: var(--__ac-r-mi-md);
+  }
+
+  .navds-r-mb {
+    --__ac-r-mb: var(--__ac-r-mb-md);
+  }
+
+  .navds-r-w {
+    --__ac-r-w: var(--__ac-r-w-md);
+  }
+
+  .navds-r-minw {
+    --__ac-r-minw: var(--__ac-r-minw-md);
+  }
+
+  .navds-r-maxw {
+    --__ac-r-maxw: var(--__ac-r-maxw-md);
+  }
+
+  .navds-r-h {
+    --__ac-r-h: var(--__ac-r-h-md);
+  }
+
+  .navds-r-minh {
+    --__ac-r-minh: var(--__ac-r-minh-md);
+  }
+
+  .navds-r-maxh {
+    --__ac-r-maxh: var(--__ac-r-maxh-md);
+  }
+
+  .navds-r-position {
+    --__ac-r-position: var(--__ac-r-position-md);
+  }
+
+  .navds-r-inset {
+    --__ac-r-inset: var(--__ac-r-inset-md);
+  }
+
+  .navds-r-top {
+    --__ac-r-top: var(--__ac-r-top-md);
+  }
+
+  .navds-r-right {
+    --__ac-r-right: var(--__ac-r-right-md);
+  }
+
+  .navds-r-bottom {
+    --__ac-r-bottom: var(--__ac-r-bottom-md);
+  }
+
+  .navds-r-left {
+    --__ac-r-left: var(--__ac-r-left-md);
+  }
+
+  .navds-r-overflow {
+    --__ac-r-overflow: var(--__ac-r-overflow-md);
+  }
+
+  .navds-r-overflowx {
+    --__ac-r-overflowx: var(--__ac-r-overflowx-md);
+  }
+
+  .navds-r-overflowy {
+    --__ac-r-overflowy: var(--__ac-r-overflowy-md);
+  }
+
+  .navds-r-flex-basis {
+    --__ac-r-flex-basis: var(--__ac-r-flex-basis-md);
+  }
+
+  .navds-r-flex-grow {
+    --__ac-r-flex-grow: var(--__ac-r-flex-grow-md);
+  }
+
+  .navds-r-flex-shrink {
+    --__ac-r-flex-shrink: var(--__ac-r-flex-shrink-md);
+  }
+
+  .navds-r-grid-column {
+    --__ac-r-grid-column: var(--__ac-r-grid-column-md);
+  }
+}
+
+@media (min-width: 1024px) {
+  .navds-r-p {
+    --__ac-r-padding: var(--__ac-r-p-lg);
+  }
+
+  .navds-r-pi {
+    --__ac-r-pi: var(--__ac-r-pi-lg);
+  }
+
+  .navds-r-pb {
+    --__ac-r-pb: var(--__ac-r-pb-lg);
+  }
+
+  .navds-r-m {
+    --__ac-r-margin: var(--__ac-r-m-lg);
+  }
+
+  .navds-r-mi {
+    --__ac-r-mi: var(--__ac-r-mi-lg);
+  }
+
+  .navds-r-mb {
+    --__ac-r-mb: var(--__ac-r-mb-lg);
+  }
+
+  .navds-r-w {
+    --__ac-r-w: var(--__ac-r-w-lg);
+  }
+
+  .navds-r-minw {
+    --__ac-r-minw: var(--__ac-r-minw-lg);
+  }
+
+  .navds-r-maxw {
+    --__ac-r-maxw: var(--__ac-r-maxw-lg);
+  }
+
+  .navds-r-h {
+    --__ac-r-h: var(--__ac-r-h-lg);
+  }
+
+  .navds-r-minh {
+    --__ac-r-minh: var(--__ac-r-minh-lg);
+  }
+
+  .navds-r-maxh {
+    --__ac-r-maxh: var(--__ac-r-maxh-lg);
+  }
+
+  .navds-r-position {
+    --__ac-r-position: var(--__ac-r-position-lg);
+  }
+
+  .navds-r-inset {
+    --__ac-r-inset: var(--__ac-r-inset-lg);
+  }
+
+  .navds-r-top {
+    --__ac-r-top: var(--__ac-r-top-lg);
+  }
+
+  .navds-r-right {
+    --__ac-r-right: var(--__ac-r-right-lg);
+  }
+
+  .navds-r-bottom {
+    --__ac-r-bottom: var(--__ac-r-bottom-lg);
+  }
+
+  .navds-r-left {
+    --__ac-r-left: var(--__ac-r-left-lg);
+  }
+
+  .navds-r-overflow {
+    --__ac-r-overflow: var(--__ac-r-overflow-lg);
+  }
+
+  .navds-r-overflowx {
+    --__ac-r-overflowx: var(--__ac-r-overflowx-lg);
+  }
+
+  .navds-r-overflowy {
+    --__ac-r-overflowy: var(--__ac-r-overflowy-lg);
+  }
+
+  .navds-r-flex-basis {
+    --__ac-r-flex-basis: var(--__ac-r-flex-basis-lg);
+  }
+
+  .navds-r-flex-grow {
+    --__ac-r-flex-grow: var(--__ac-r-flex-grow-lg);
+  }
+
+  .navds-r-flex-shrink {
+    --__ac-r-flex-shrink: var(--__ac-r-flex-shrink-lg);
+  }
+
+  .navds-r-grid-column {
+    --__ac-r-grid-column: var(--__ac-r-grid-column-lg);
+  }
+}
+
+@media (min-width: 1280px) {
+  .navds-r-p {
+    --__ac-r-padding: var(--__ac-r-p-xl);
+  }
+
+  .navds-r-pi {
+    --__ac-r-pi: var(--__ac-r-pi-xl);
+  }
+
+  .navds-r-pb {
+    --__ac-r-pb: var(--__ac-r-pb-xl);
+  }
+
+  .navds-r-m {
+    --__ac-r-margin: var(--__ac-r-m-xl);
+  }
+
+  .navds-r-mi {
+    --__ac-r-mi: var(--__ac-r-mi-xl);
+  }
+
+  .navds-r-mb {
+    --__ac-r-mb: var(--__ac-r-mb-xl);
+  }
+
+  .navds-r-w {
+    --__ac-r-w: var(--__ac-r-w-xl);
+  }
+
+  .navds-r-minw {
+    --__ac-r-minw: var(--__ac-r-minw-xl);
+  }
+
+  .navds-r-maxw {
+    --__ac-r-maxw: var(--__ac-r-maxw-xl);
+  }
+
+  .navds-r-h {
+    --__ac-r-h: var(--__ac-r-h-xl);
+  }
+
+  .navds-r-minh {
+    --__ac-r-minh: var(--__ac-r-minh-xl);
+  }
+
+  .navds-r-maxh {
+    --__ac-r-maxh: var(--__ac-r-maxh-xl);
+  }
+
+  .navds-r-position {
+    --__ac-r-position: var(--__ac-r-position-xl);
+  }
+
+  .navds-r-inset {
+    --__ac-r-inset: var(--__ac-r-inset-xl);
+  }
+
+  .navds-r-top {
+    --__ac-r-top: var(--__ac-r-top-xl);
+  }
+
+  .navds-r-right {
+    --__ac-r-right: var(--__ac-r-right-xl);
+  }
+
+  .navds-r-bottom {
+    --__ac-r-bottom: var(--__ac-r-bottom-xl);
+  }
+
+  .navds-r-left {
+    --__ac-r-left: var(--__ac-r-left-xl);
+  }
+
+  .navds-r-overflow {
+    --__ac-r-overflow: var(--__ac-r-overflow-xl);
+  }
+
+  .navds-r-overflowx {
+    --__ac-r-overflowx: var(--__ac-r-overflowx-xl);
+  }
+
+  .navds-r-overflowy {
+    --__ac-r-overflowy: var(--__ac-r-overflowy-xl);
+  }
+
+  .navds-r-flex-basis {
+    --__ac-r-flex-basis: var(--__ac-r-flex-basis-xl);
+  }
+
+  .navds-r-flex-grow {
+    --__ac-r-flex-grow: var(--__ac-r-flex-grow-xl);
+  }
+
+  .navds-r-flex-shrink {
+    --__ac-r-flex-shrink: var(--__ac-r-flex-shrink-xl);
+  }
+
+  .navds-r-grid-column {
+    --__ac-r-grid-column: var(--__ac-r-grid-column-xl);
+  }
+}
+
+@media (min-width: 1440px) {
+  .navds-r-p {
+    --__ac-r-padding: var(--__ac-r-p-2xl);
+  }
+
+  .navds-r-pi {
+    --__ac-r-pi: var(--__ac-r-pi-2xl);
+  }
+
+  .navds-r-pb {
+    --__ac-r-pb: var(--__ac-r-pb-2xl);
+  }
+
+  .navds-r-m {
+    --__ac-r-margin: var(--__ac-r-m-2xl);
+  }
+
+  .navds-r-mi {
+    --__ac-r-mi: var(--__ac-r-mi-2xl);
+  }
+
+  .navds-r-mb {
+    --__ac-r-mb: var(--__ac-r-mb-2xl);
+  }
+
+  .navds-r-w {
+    --__ac-r-w: var(--__ac-r-w-2xl);
+  }
+
+  .navds-r-minw {
+    --__ac-r-minw: var(--__ac-r-minw-2xl);
+  }
+
+  .navds-r-maxw {
+    --__ac-r-maxw: var(--__ac-r-maxw-2xl);
+  }
+
+  .navds-r-h {
+    --__ac-r-h: var(--__ac-r-h-2xl);
+  }
+
+  .navds-r-minh {
+    --__ac-r-minh: var(--__ac-r-minh-2xl);
+  }
+
+  .navds-r-maxh {
+    --__ac-r-maxh: var(--__ac-r-maxh-2xl);
+  }
+
+  .navds-r-position {
+    --__ac-r-position: var(--__ac-r-position-2xl);
+  }
+
+  .navds-r-inset {
+    --__ac-r-inset: var(--__ac-r-inset-2xl);
+  }
+
+  .navds-r-top {
+    --__ac-r-top: var(--__ac-r-top-2xl);
+  }
+
+  .navds-r-right {
+    --__ac-r-right: var(--__ac-r-right-2xl);
+  }
+
+  .navds-r-bottom {
+    --__ac-r-bottom: var(--__ac-r-bottom-2xl);
+  }
+
+  .navds-r-left {
+    --__ac-r-left: var(--__ac-r-left-2xl);
+  }
+
+  .navds-r-overflow {
+    --__ac-r-overflow: var(--__ac-r-overflow-2xl);
+  }
+
+  .navds-r-overflowx {
+    --__ac-r-overflowx: var(--__ac-r-overflowx-2xl);
+  }
+
+  .navds-r-overflowy {
+    --__ac-r-overflowy: var(--__ac-r-overflowy-2xl);
+  }
+
+  .navds-r-flex-basis {
+    --__ac-r-flex-basis: var(--__ac-r-flex-basis-2xl);
+  }
+
+  .navds-r-flex-grow {
+    --__ac-r-flex-grow: var(--__ac-r-flex-grow-2xl);
+  }
+
+  .navds-r-flex-shrink {
+    --__ac-r-flex-shrink: var(--__ac-r-flex-shrink-2xl);
+  }
+
+  .navds-r-grid-column {
+    --__ac-r-grid-column: var(--__ac-r-grid-column-2xl);
+  }
+}
@@ -0,0 +1,103 @@
+.navds-bleed {
+  --__ac-bleed-margin-inline-xs: initial;
+  --__ac-bleed-margin-inline-sm: var(--__ac-bleed-margin-inline-xs);
+  --__ac-bleed-margin-inline-md: var(--__ac-bleed-margin-inline-sm);
+  --__ac-bleed-margin-inline-lg: var(--__ac-bleed-margin-inline-md);
+  --__ac-bleed-margin-inline-xl: var(--__ac-bleed-margin-inline-lg);
+  --__ac-bleed-margin-inline-2xl: var(--__ac-bleed-margin-inline-xl);
+  --__ac-bleed-margin-block-xs: initial;
+  --__ac-bleed-margin-block-sm: var(--__ac-bleed-margin-block-xs);
+  --__ac-bleed-margin-block-md: var(--__ac-bleed-margin-block-sm);
+  --__ac-bleed-margin-block-lg: var(--__ac-bleed-margin-block-md);
+  --__ac-bleed-margin-block-xl: var(--__ac-bleed-margin-block-lg);
+  --__ac-bleed-margin-block-2xl: var(--__ac-bleed-margin-block-xl);
+
+  /** defaults */
+  --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-xs);
+  --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-xs);
+
+  margin-inline: var(--__ac-bleed-margin-inline);
+  margin-block: var(--__ac-bleed-margin-block);
+}
+
+.navds-bleed--padding {
+  --__ac-bleed-padding-inline-xs: initial;
+  --__ac-bleed-padding-inline-sm: var(--__ac-bleed-padding-inline-xs);
+  --__ac-bleed-padding-inline-md: var(--__ac-bleed-padding-inline-sm);
+  --__ac-bleed-padding-inline-lg: var(--__ac-bleed-padding-inline-md);
+  --__ac-bleed-padding-inline-xl: var(--__ac-bleed-padding-inline-lg);
+  --__ac-bleed-padding-inline-2xl: var(--__ac-bleed-padding-inline-xl);
+  --__ac-bleed-padding-block-xs: initial;
+  --__ac-bleed-padding-block-sm: var(--__ac-bleed-padding-block-xs);
+  --__ac-bleed-padding-block-md: var(--__ac-bleed-padding-block-sm);
+  --__ac-bleed-padding-block-lg: var(--__ac-bleed-padding-block-md);
+  --__ac-bleed-padding-block-xl: var(--__ac-bleed-padding-block-lg);
+  --__ac-bleed-padding-block-2xl: var(--__ac-bleed-padding-block-xl);
+
+  /** defaults */
+  --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-xs);
+  --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-xs);
+
+  padding-inline: var(--__ac-bleed-padding-inline);
+  padding-block: var(--__ac-bleed-padding-block);
+}
+
+@media (min-width: 480px) {
+  .navds-bleed {
+    --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-sm);
+    --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-sm);
+  }
+
+  .navds-bleed--padding {
+    --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-sm);
+    --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-sm);
+  }
+}
+
+@media (min-width: 768px) {
+  .navds-bleed {
+    --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-md);
+    --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-md);
+  }
+
+  .navds-bleed--padding {
+    --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-md);
+    --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-md);
+  }
+}
+
+@media (min-width: 1024px) {
+  .navds-bleed {
+    --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-lg);
+    --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-lg);
+  }
+
+  .navds-bleed--padding {
+    --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-lg);
+    --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-lg);
+  }
+}
+
+@media (min-width: 1280px) {
+  .navds-bleed {
+    --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-xl);
+    --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-xl);
+  }
+
+  .navds-bleed--padding {
+    --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-xl);
+    --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-xl);
+  }
+}
+
+@media (min-width: 1440px) {
+  .navds-bleed {
+    --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-2xl);
+    --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-2xl);
+  }
+
+  .navds-bleed--padding {
+    --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-2xl);
+    --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-2xl);
+  }
+}
@@ -0,0 +1,66 @@
+.navds-box-bg {
+  --__ac-box-background: initial;
+
+  background-color: var(--__ac-box-background);
+}
+
+.navds-box-border-color {
+  --__ac-box-border-color: initial;
+
+  border-color: var(--__ac-box-border-color);
+}
+
+.navds-box-border-width {
+  --__ac-box-border-width: initial;
+
+  border-style: solid;
+  border-width: var(--__ac-box-border-width, 0);
+}
+
+.navds-box-border-radius {
+  --__ac-box-border-radius-xs: initial;
+  --__ac-box-border-radius-sm: var(--__ac-box-border-radius-xs);
+  --__ac-box-border-radius-md: var(--__ac-box-border-radius-sm);
+  --__ac-box-border-radius-lg: var(--__ac-box-border-radius-md);
+  --__ac-box-border-radius-xl: var(--__ac-box-border-radius-lg);
+  --__ac-box-border-radius-2xl: var(--__ac-box-border-radius-xl);
+  --__ac-box-border-radius: var(--__ac-box-border-radius-xs);
+
+  border-radius: var(--__ac-box-border-radius);
+}
+
+.navds-box-shadow {
+  --__ac-box-shadow: initial;
+
+  box-shadow: var(--__ac-box-shadow);
+}
+
+@media (min-width: 480px) {
+  .navds-box-border-radius {
+    --__ac-box-border-radius: var(--__ac-box-border-radius-sm);
+  }
+}
+
+@media (min-width: 768px) {
+  .navds-box-border-radius {
+    --__ac-box-border-radius: var(--__ac-box-border-radius-md);
+  }
+}
+
+@media (min-width: 1024px) {
+  .navds-box-border-radius {
+    --__ac-box-border-radius: var(--__ac-box-border-radius-lg);
+  }
+}
+
+@media (min-width: 1280px) {
+  .navds-box-border-radius {
+    --__ac-box-border-radius: var(--__ac-box-border-radius-xl);
+  }
+}
+
+@media (min-width: 1440px) {
+  .navds-box-border-radius {
+    --__ac-box-border-radius: var(--__ac-box-border-radius-2xl);
+  }
+}
@@ -0,0 +1,80 @@
+.navds-hgrid {
+  --__ac-hgrid-columns-xs: initial;
+  --__ac-hgrid-columns-sm: var(--__ac-hgrid-columns-xs);
+  --__ac-hgrid-columns-md: var(--__ac-hgrid-columns-sm);
+  --__ac-hgrid-columns-lg: var(--__ac-hgrid-columns-md);
+  --__ac-hgrid-columns-xl: var(--__ac-hgrid-columns-lg);
+  --__ac-hgrid-columns-2xl: var(--__ac-hgrid-columns-xl);
+  --__ac-hgrid-columns: var(--__ac-hgrid-columns-xs);
+
+  display: grid;
+  grid-template-columns: var(--__ac-hgrid-columns);
+}
+
+.navds-hgrid-gap {
+  --__ac-hgrid-gap-xs: initial;
+  --__ac-hgrid-gap-sm: var(--__ac-hgrid-gap-xs);
+  --__ac-hgrid-gap-md: var(--__ac-hgrid-gap-sm);
+  --__ac-hgrid-gap-lg: var(--__ac-hgrid-gap-md);
+  --__ac-hgrid-gap-xl: var(--__ac-hgrid-gap-lg);
+  --__ac-hgrid-gap-2xl: var(--__ac-hgrid-gap-xl);
+  --__ac-hgrid-gap: var(--__ac-hgrid-gap-xs);
+
+  gap: var(--__ac-hgrid-gap);
+}
+
+.navds-hgrid-align {
+  --__ac-hgrid-align: initial;
+
+  align-items: var(--__ac-hgrid-align);
+}
+
+@media (min-width: 480px) {
+  .navds-hgrid {
+    --__ac-hgrid-columns: var(--__ac-hgrid-columns-sm);
+  }
+
+  .navds-hgrid-gap {
+    --__ac-hgrid-gap: var(--__ac-hgrid-gap-sm);
+  }
+}
+
+@media (min-width: 768px) {
+  .navds-hgrid {
+    --__ac-hgrid-columns: var(--__ac-hgrid-columns-md);
+  }
+
+  .navds-hgrid-gap {
+    --__ac-hgrid-gap: var(--__ac-hgrid-gap-md);
+  }
+}
+
+@media (min-width: 1024px) {
+  .navds-hgrid {
+    --__ac-hgrid-columns: var(--__ac-hgrid-columns-lg);
+  }
+
+  .navds-hgrid-gap {
+    --__ac-hgrid-gap: var(--__ac-hgrid-gap-lg);
+  }
+}
+
+@media (min-width: 1280px) {
+  .navds-hgrid {
+    --__ac-hgrid-columns: var(--__ac-hgrid-columns-xl);
+  }
+
+  .navds-hgrid-gap {
+    --__ac-hgrid-gap: var(--__ac-hgrid-gap-xl);
+  }
+}
+
+@media (min-width: 1440px) {
+  .navds-hgrid {
+    --__ac-hgrid-columns: var(--__ac-hgrid-columns-2xl);
+  }
+
+  .navds-hgrid-gap {
+    --__ac-hgrid-gap: var(--__ac-hgrid-gap-2xl);
+  }
+}
@@ -0,0 +1,36 @@
+@layer aksel.layout.component, aksel.layout.base;
+
+@import "./base.darkside.css" layer(aksel.layout.base);
+@import "./box.darkside.css" layer(aksel.layout.component);
+@import "./bleed.darkside.css" layer(aksel.layout.component);
+@import "./page.darkside.css" layer(aksel.layout.component);
+@import "./hgrid.darkside.css" layer(aksel.layout.component);
+@import "./stack.darkside.css" layer(aksel.layout.component);
+@import "./responsive.darkside.css" layer(aksel.layout.component);
+
+/* Custom override to avoid having to edit react-syntax in Primtives */
+@layer aksel.layout {
+  :root {
+    --a-spacing-1-alt: var(--ax-spacing-1-alt);
+    --a-spacing-05: var(--ax-spacing-05);
+    --a-spacing-32: var(--ax-spacing-32);
+    --a-spacing-24: var(--ax-spacing-24);
+    --a-spacing-20: var(--ax-spacing-20);
+    --a-spacing-18: var(--ax-spacing-18);
+    --a-spacing-16: var(--ax-spacing-16);
+    --a-spacing-14: var(--ax-spacing-14);
+    --a-spacing-12: var(--ax-spacing-12);
+    --a-spacing-11: var(--ax-spacing-11);
+    --a-spacing-10: var(--ax-spacing-10);
+    --a-spacing-9: var(--ax-spacing-9);
+    --a-spacing-8: var(--ax-spacing-8);
+    --a-spacing-7: var(--ax-spacing-7);
+    --a-spacing-6: var(--ax-spacing-6);
+    --a-spacing-5: var(--ax-spacing-5);
+    --a-spacing-4: var(--ax-spacing-4);
+    --a-spacing-3: var(--ax-spacing-3);
+    --a-spacing-2: var(--ax-spacing-2);
+    --a-spacing-1: var(--ax-spacing-1);
+    --a-spacing-0: var(--ax-spacing-0);
+  }
+}
@@ -0,0 +1,63 @@
+.navds-page {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  min-height: 100lvh;
+
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+  background-color: var(--__ac-page-background);
+}
+
+/* Page.Block */
+.navds-pageblock {
+  /* stylelint-disable-next-line length-zero-no-unit */
+  --__ac-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(--a-spacing-16);
+}
+
+.navds-pageblock--text {
+  max-width: calc(var(--a-text-width-max) + var(--__ac-page-padding-inline) + var(--__ac-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 {
+  --__ac-page-padding-inline: var(--a-spacing-4);
+
+  padding-inline: var(--__ac-page-padding-inline);
+}
+
+@media (min-width: 1024px) {
+  .navds-pageblock--gutters {
+    --__ac-page-padding-inline: var(--a-spacing-12);
+  }
+}
@@ -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;
+  }
+}
@@ -0,0 +1,155 @@
+.navds-stack {
+  display: flex;
+}
+
+.navds-stack-gap {
+  --__ac-stack-gap-xs: initial;
+  --__ac-stack-gap-sm: var(--__ac-stack-gap-xs);
+  --__ac-stack-gap-md: var(--__ac-stack-gap-sm);
+  --__ac-stack-gap-lg: var(--__ac-stack-gap-md);
+  --__ac-stack-gap-xl: var(--__ac-stack-gap-lg);
+  --__ac-stack-gap-2xl: var(--__ac-stack-gap-xl);
+  --__ac-stack-gap: var(--__ac-stack-gap-xs);
+
+  gap: var(--__ac-stack-gap);
+}
+
+.navds-stack-align {
+  --__ac-stack-align-xs: initial;
+  --__ac-stack-align-sm: var(--__ac-stack-align-xs);
+  --__ac-stack-align-md: var(--__ac-stack-align-sm);
+  --__ac-stack-align-lg: var(--__ac-stack-align-md);
+  --__ac-stack-align-xl: var(--__ac-stack-align-lg);
+  --__ac-stack-align-2xl: var(--__ac-stack-align-xl);
+  --__ac-stack-align: var(--__ac-stack-align-xs);
+
+  align-items: var(--__ac-stack-align);
+}
+
+.navds-stack-justify {
+  --__ac-stack-justify-xs: initial;
+  --__ac-stack-justify-sm: var(--__ac-stack-justify-xs);
+  --__ac-stack-justify-md: var(--__ac-stack-justify-sm);
+  --__ac-stack-justify-lg: var(--__ac-stack-justify-md);
+  --__ac-stack-justify-xl: var(--__ac-stack-justify-lg);
+  --__ac-stack-justify-2xl: var(--__ac-stack-justify-xl);
+  --__ac-stack-justify: var(--__ac-stack-justify-xs);
+
+  justify-content: var(--__ac-stack-justify);
+}
+
+.navds-stack-direction {
+  --__ac-stack-direction-xs: initial;
+  --__ac-stack-direction-sm: var(--__ac-stack-direction-xs);
+  --__ac-stack-direction-md: var(--__ac-stack-direction-sm);
+  --__ac-stack-direction-lg: var(--__ac-stack-direction-md);
+  --__ac-stack-direction-xl: var(--__ac-stack-direction-lg);
+  --__ac-stack-direction-2xl: var(--__ac-stack-direction-xl);
+  --__ac-stack-direction: var(--__ac-stack-direction-xs);
+
+  flex-direction: var(--__ac-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(--__ac-stack-gap) * -1);
+  margin-inline-start: calc(var(--__ac-stack-gap) * -1);
+}
+
+@media (min-width: 480px) {
+  .navds-stack-gap {
+    --__ac-stack-gap: var(--__ac-stack-gap-sm);
+  }
+
+  .navds-stack-align {
+    --__ac-stack-align: var(--__ac-stack-align-sm);
+  }
+
+  .navds-stack-justify {
+    --__ac-stack-justify: var(--__ac-stack-justify-sm);
+  }
+
+  .navds-stack-direction {
+    --__ac-stack-direction: var(--__ac-stack-direction-sm);
+  }
+}
+
+@media (min-width: 768px) {
+  .navds-stack-gap {
+    --__ac-stack-gap: var(--__ac-stack-gap-md);
+  }
+
+  .navds-stack-align {
+    --__ac-stack-align: var(--__ac-stack-align-md);
+  }
+
+  .navds-stack-justify {
+    --__ac-stack-justify: var(--__ac-stack-justify-md);
+  }
+
+  .navds-stack-direction {
+    --__ac-stack-direction: var(--__ac-stack-direction-md);
+  }
+}
+
+@media (min-width: 1024px) {
+  .navds-stack-gap {
+    --__ac-stack-gap: var(--__ac-stack-gap-lg);
+  }
+
+  .navds-stack-align {
+    --__ac-stack-align: var(--__ac-stack-align-lg);
+  }
+
+  .navds-stack-justify {
+    --__ac-stack-justify: var(--__ac-stack-justify-lg);
+  }
+
+  .navds-stack-direction {
+    --__ac-stack-direction: var(--__ac-stack-direction-lg);
+  }
+}
+
+@media (min-width: 1280px) {
+  .navds-stack-gap {
+    --__ac-stack-gap: var(--__ac-stack-gap-xl);
+  }
+
+  .navds-stack-align {
+    --__ac-stack-align: var(--__ac-stack-align-xl);
+  }
+
+  .navds-stack-justify {
+    --__ac-stack-justify: var(--__ac-stack-justify-xl);
+  }
+
+  .navds-stack-direction {
+    --__ac-stack-direction: var(--__ac-stack-direction-xl);
+  }
+}
+
+@media (min-width: 1440px) {
+  .navds-stack-gap {
+    --__ac-stack-gap: var(--__ac-stack-gap-2xl);
+  }
+
+  .navds-stack-align {
+    --__ac-stack-align: var(--__ac-stack-align-2xl);
+  }
+
+  .navds-stack-justify {
+    --__ac-stack-justify: var(--__ac-stack-justify-2xl);
+  }
+
+  .navds-stack-direction {
+    --__ac-stack-direction: var(--__ac-stack-direction-2xl);
+  }
+}
@@ -0,0 +1,108 @@
+.navds-progress-bar {
+  background: var(--a-surface-neutral-subtle);
+  position: relative;
+  border-radius: var(--a-border-radius-full);
+  overflow: hidden;
+  box-shadow:
+    inset 0 1px 3px 0 rgba(0 0 0 / 0.15),
+    inset 0 0 1px 0 rgba(0 0 0 / 0.2);
+}
+
+.navds-progress-bar--small {
+  height: 12px;
+  min-width: 12px;
+}
+
+.navds-progress-bar--medium {
+  height: 16px;
+  min-width: 16px;
+}
+
+.navds-progress-bar--large {
+  height: 24px;
+  min-width: 24px;
+}
+
+.navds-progress-bar__foreground {
+  --__ac-progress-bar-translate: initial;
+
+  transform: translateX(var(--__ac-progress-bar-translate));
+  background: var(--ac-progress-bar-fg, var(--a-surface-alt-3));
+  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;
+  }
+}
@@ -0,0 +1,91 @@
+.navds-read-more__button {
+  cursor: pointer;
+  margin: 0;
+  border: none;
+  background: none;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--a-spacing-05);
+  color: var(--ac-read-more-text, var(--a-text-action));
+  border-radius: var(--a-border-radius-small);
+  padding: var(--a-spacing-1) var(--a-spacing-2) var(--a-spacing-1) var(--a-spacing-05);
+  text-align: start;
+}
+
+.navds-read-more--small .navds-read-more__button {
+  padding: var(--a-spacing-05) var(--a-spacing-1-alt) var(--a-spacing-05) var(--a-spacing-05);
+}
+
+@media (forced-colors: active) {
+  .navds-read-more__button {
+    background-color: ButtonFace;
+    border: solid 1px ButtonText;
+    color: ButtonText;
+  }
+
+  .navds-read-more__button.navds-read-more__button:focus-visible {
+    box-shadow: none;
+    outline: 2px solid highlight;
+    outline-offset: 2px;
+  }
+}
+
+.navds-read-more__button:hover {
+  background-color: var(--ac-read-more-hover-bg, var(--a-surface-hover));
+  color: var(--ac-read-more-hover-text, var(--a-text-action-hover));
+}
+
+.navds-read-more__button:active {
+  background-color: var(--ac-read-more-active-bg, var(--a-surface-active));
+}
+
+.navds-read-more__button:focus-visible {
+  outline: none;
+  box-shadow: var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-read-more__button:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
+.navds-read-more__content {
+  margin-top: var(--a-spacing-1);
+  border-left: 2px solid var(--ac-read-more-line, var(--a-border-divider));
+  margin-left: 0.8125rem;
+  padding-left: 0.8125rem;
+  color: var(--a-text-default);
+}
+
+.navds-read-more--small .navds-read-more__content {
+  margin-left: 0.6875rem;
+  padding-left: 0.6875rem;
+}
+
+.navds-read-more__content--closed {
+  display: none;
+}
+
+.navds-read-more__expand-icon {
+  font-size: 1.5rem;
+  flex-shrink: 0;
+}
+
+.navds-read-more--small .navds-read-more__expand-icon {
+  font-size: 1.25rem;
+}
+
+.navds-read-more__button:hover > .navds-read-more__expand-icon {
+  position: relative;
+  top: 1px;
+}
+
+.navds-read-more--open > .navds-read-more__button > .navds-read-more__expand-icon {
+  transform: rotate(-180deg);
+}
+
+.navds-read-more--open > .navds-read-more__button:hover > .navds-read-more__expand-icon {
+  top: -1px;
+}
@@ -0,0 +1,67 @@
+.navds-skeleton {
+  background-color: var(--ac-skeleton-bg, var(--a-surface-neutral-moderate));
+  height: 1.3em;
+  animation: akselSkeletonAnimation 0.8s linear infinite alternate;
+  pointer-events: none;
+}
+
+.navds-skeleton--inline {
+  display: inline-block;
+}
+
+.navds-skeleton--has-children {
+  color: transparent;
+}
+
+.navds-skeleton--has-children > * {
+  visibility: hidden;
+}
+
+.navds-skeleton--has-children.navds-skeleton--no-height {
+  height: auto;
+}
+
+.navds-skeleton--has-children.navds-skeleton--no-width {
+  width: fit-content;
+}
+
+.navds-skeleton--text {
+  height: auto;
+  transform-origin: 0 55%;
+  transform: scale(1, 0.6);
+  border-radius: var(--a-border-radius-medium);
+}
+
+.navds-skeleton--text:empty::before {
+  content: "\00a0";
+}
+
+.navds-skeleton--circle {
+  border-radius: var(--a-border-radius-full);
+}
+
+.navds-skeleton--rectangle {
+  border-radius: 0;
+}
+
+.navds-skeleton--rounded {
+  border-radius: var(--a-border-radius-xlarge);
+}
+
+@keyframes akselSkeletonAnimation {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0.4;
+  }
+}
+
+@media (forced-colors: active) {
+  .navds-skeleton {
+    forced-color-adjust: none;
+    background-color: var(--a-surface-neutral);
+    animation-duration: 2s;
+  }
+}
@@ -0,0 +1,308 @@
+.navds-stepper {
+  --navds-stepper-circle-size: 1.75rem;
+  --navds-stepper-border-width: 2px;
+  --navds-stepper-line-length: 1rem;
+
+  color: var(--ac-stepper-text, var(--a-surface-action));
+  font-weight: 600;
+  line-height: 1;
+  list-style: none;
+  padding-left: 0;
+  margin: 0;
+}
+
+.navds-stepper--horizontal {
+  display: flex;
+  align-items: flex-start;
+  text-align: center;
+}
+
+.navds-stepper__item {
+  display: grid;
+  grid-template-rows:
+    [line-1] auto [step-start] var(--navds-stepper-circle-size)
+    [line-2 step-end] auto;
+  grid-template-columns: var(--navds-stepper-circle-size) auto;
+  justify-items: flex-start;
+  gap: 0.5rem;
+}
+
+.navds-stepper__line {
+  background-color: var(--ac-stepper-line, var(--a-border-default));
+  width: var(--navds-stepper-border-width);
+  height: 100%;
+  min-height: var(--navds-stepper-line-length);
+  justify-self: center;
+  grid-column: 1;
+}
+
+.navds-stepper__step--behind.navds-stepper__step--completed + .navds-stepper__line {
+  background-color: var(--ac-stepper-line-completed, var(--a-border-selected));
+}
+
+.navds-stepper__item--behind.navds-stepper__item--completed + .navds-stepper__item > .navds-stepper__line--1 {
+  background-color: var(--ac-stepper-line-completed, var(--a-border-selected));
+}
+
+.navds-stepper__line--1 {
+  grid-row: line-1;
+  display: none;
+}
+
+.navds-stepper__line--2 {
+  grid-row: line-2;
+}
+
+:where(.navds-stepper__item:last-of-type) .navds-stepper__line--2 {
+  display: none;
+}
+
+.navds-stepper__step {
+  grid-row: 2 / -1;
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: [circle] var(--navds-stepper-circle-size) [content] auto;
+  gap: var(--a-spacing-2);
+  justify-content: flex-start;
+  text-decoration: none;
+  cursor: pointer;
+  padding: var(--navds-stepper-border-width);
+  margin: calc(var(--navds-stepper-border-width) * -1) calc(var(--navds-stepper-border-width) * -1) 1.75rem;
+}
+
+.navds-stepper__item:last-child .navds-stepper__step {
+  margin-bottom: 0;
+}
+
+@media (forced-colors: active) {
+  .navds-stepper__step {
+    background-color: ButtonFace;
+    color: ButtonText;
+  }
+
+  .navds-stepper__circle.navds-stepper__circle {
+    border: 0;
+  }
+
+  .navds-stepper__step .navds-stepper__circle {
+    forced-color-adjust: none;
+    background-color: ButtonText;
+    border-color: ButtonText;
+    color: ButtonFace;
+  }
+
+  .navds-stepper__step.navds-stepper__step:focus-visible {
+    box-shadow: none;
+    outline: 2px solid highlight;
+    outline-offset: 2px;
+  }
+
+  .navds-stepper__step.navds-stepper__step--active .navds-stepper__circle {
+    forced-color-adjust: none;
+    background-color: highlight;
+    border-color: highlighttext;
+    color: highlighttext;
+  }
+
+  .navds-stepper__line {
+    background-color: ButtonText;
+  }
+}
+
+button.navds-stepper__step {
+  appearance: none;
+  border: none;
+  background-color: transparent;
+  font: inherit;
+  color: inherit;
+  text-align: inherit;
+}
+
+.navds-stepper__step--non-interactive {
+  color: var(--ac-stepper-non-interactive, var(--a-text-subtle));
+  cursor: default;
+}
+
+:where(.navds-stepper__step):focus-visible {
+  outline: none;
+  box-shadow: var(--a-shadow-focus);
+  isolation: isolate;
+}
+
+@supports not selector(:focus-visible) {
+  .navds-stepper__step:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+    isolation: isolate;
+  }
+}
+
+.navds-stepper__circle {
+  grid-column: circle;
+  display: inline-grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: var(--navds-stepper-circle-size);
+  height: var(--navds-stepper-circle-size);
+  border: var(--navds-stepper-border-width) solid currentColor;
+  border-radius: var(--a-border-radius-full);
+  line-height: 1;
+}
+
+.navds-stepper__circle--success {
+  border: none;
+  background: none;
+  font-size: 1.75rem;
+  color: var(--a-text-on-action);
+  background-color: var(--ac-stepper-text, var(--a-surface-action));
+}
+
+.navds-stepper__content {
+  min-width: fit-content;
+  line-height: 1.5;
+  grid-column: content;
+  padding-top: 0.035rem;
+}
+
+/* Horizontal */
+:where(.navds-stepper--horizontal) .navds-stepper__item {
+  flex: 1 1 100%;
+  grid-template-columns:
+    [line-1-start] 1fr [step-start] auto [line-1-end] var(--navds-stepper-circle-size)
+    [line-2-start] auto [step-end] 1fr [line-2-end];
+  grid-template-rows: var(--navds-stepper-circle-size) auto;
+}
+
+:where(.navds-stepper--horizontal) .navds-stepper__line {
+  height: var(--navds-stepper-border-width);
+  width: 100%;
+  min-height: auto;
+  grid-row: 1;
+  display: block;
+  align-self: center;
+}
+
+:where(.navds-stepper--horizontal) .navds-stepper__line--1 {
+  grid-column: line-1;
+}
+
+:where(.navds-stepper--horizontal) .navds-stepper__line--2 {
+  grid-column: line-2;
+}
+
+:where(.navds-stepper--horizontal .navds-stepper__item:first-of-type) .navds-stepper__line--1,
+:where(.navds-stepper--horizontal .navds-stepper__item:last-of-type) .navds-stepper__line--2 {
+  visibility: hidden;
+}
+
+:where(.navds-stepper--horizontal) .navds-stepper__step {
+  grid-row: 1 / -1;
+  grid-column: step;
+  display: grid;
+  grid-template-rows: [circle] var(--navds-stepper-circle-size) [content] auto;
+  grid-template-columns:
+    [content-start] auto [circle] var(--navds-stepper-circle-size)
+    [content-end] auto;
+  place-items: center center;
+  margin-bottom: 0;
+}
+
+:where(.navds-stepper--horizontal) .navds-stepper__circle {
+  grid-row: circle;
+  grid-column: 2;
+}
+
+:where(.navds-stepper--horizontal) .navds-stepper__content {
+  grid-row: content;
+  grid-column: 1 / -1;
+  max-width: 24ch;
+}
+
+/* Active step */
+:where(.navds-stepper__step--active) .navds-stepper__content {
+  color: var(--ac-stepper-active, var(--a-text-action-selected));
+}
+
+.navds-stepper__step:hover:where(:not(.navds-stepper__step--non-interactive)) {
+  color: var(--ac-stepper-hover-active, var(--a-text-action-hover));
+}
+
+:where(.navds-stepper__step:hover) .navds-stepper__content {
+  text-decoration: underline;
+}
+
+:where(.navds-stepper__step--non-interactive:hover, .navds-stepper__step--active:hover) .navds-stepper__content {
+  text-decoration: none;
+}
+
+:where(.navds-stepper__step--active) .navds-stepper__circle {
+  background-color: var(--ac-stepper-active-bg, var(--a-surface-action-selected));
+  border-color: var(--ac-stepper-active-border, var(--a-border-action-selected));
+  color: var(--ac-stepper-active-text, var(--a-text-on-action));
+}
+
+:where(.navds-stepper__step:not(.navds-stepper__step--active):hover) .navds-stepper__circle {
+  background-color: var(--ac-stepper-hover-bg, var(--a-surface-action-subtle-hover));
+}
+
+:where(.navds-stepper__step:not(.navds-stepper__step--active):hover) .navds-stepper__circle--success {
+  background-color: var(--ac-stepper-text, var(--a-surface-action-hover));
+}
+
+/* Non-interactive */
+:where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__content {
+  color: var(--ac-stepper-non-interactive-active, var(--a-text-default));
+}
+
+.navds-stepper__step--non-interactive.navds-stepper__step--behind.navds-stepper__step--completed + .navds-stepper__line {
+  background-color: var(--ac-stepper-non-interactive-line-completed, var(--a-border-strong));
+}
+
+.navds-stepper__item--non-interactive.navds-stepper__item--behind.navds-stepper__item--completed
+  + .navds-stepper__item
+  > .navds-stepper__line--1 {
+  background-color: var(--ac-stepper-non-interactive-line-completed, var(--a-border-strong));
+}
+
+:where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__circle {
+  background-color: var(--ac-stepper-non-interactive-active-bg, var(--a-surface-inverted));
+  border-color: var(--ac-stepper-non-interactive-active-border, var(--a-surface-inverted));
+  color: var(--ac-stepper-non-interactive-active-text, var(--a-text-on-inverted));
+}
+
+:where(.navds-stepper__step--non-interactive:hover) .navds-stepper__circle {
+  background-color: transparent;
+}
+
+:where(.navds-stepper__step--non-interactive.navds-stepper__step--active:hover) .navds-stepper__circle {
+  background-color: var(--ac-stepper-non-interactive-active-bg, var(--a-surface-inverted));
+}
+
+:where(.navds-stepper__step--completed.navds-stepper__step--active) .navds-stepper__circle {
+  background-color: inherit;
+  color: var(--ac-stepper-active-completed, var(--a-text-action-selected));
+}
+
+:where(.navds-stepper__step--completed.navds-stepper__step--active) .navds-stepper__circle--success {
+  color: var(--a-text-on-action);
+  background-color: var(--ac-stepper-active-completed, var(--a-surface-action-selected));
+}
+
+:where(.navds-stepper__step--non-interactive, .navds-stepper__step--non-interactive:hover) .navds-stepper__circle--success {
+  color: var(--a-text-on-inverted);
+  background-color: var(--ac-stepper-non-interactive-completed-bg, var(--a-surface-neutral));
+}
+
+:where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__circle--success {
+  color: var(--a-text-on-inverted);
+  background-color: var(--ac-stepper-non-interactive-active-completed, var(--a-surface-inverted));
+}
+
+:where(.navds-stepper__step--completed.navds-stepper__step--active.navds-stepper__step--non-interactive) .navds-stepper__circle {
+  color: var(--ac-stepper-non-interactive-active-completed, var(--a-text-default));
+}
+
+:where(.navds-stepper__step--completed.navds-stepper__step--active.navds-stepper__step--non-interactive)
+  .navds-stepper__circle--success {
+  color: var(--ac-stepper-non-interactive-active-completed, var(--a-text-on-inverted));
+}
@@ -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;
+  }
+}
@@ -0,0 +1,154 @@
+.navds-tabs__tablist-wrapper {
+  box-shadow: inset 0 -1px 0 0 var(--ac-tabs-border, var(--a-border-divider));
+  width: 100%;
+  display: flex;
+}
+
+.navds-tabs__tablist {
+  display: flex;
+  max-width: 100%;
+  width: 100%;
+  scroll-behavior: smooth;
+  -ms-overflow-style: none; /* for Internet Explorer, Edge */
+  scrollbar-width: none; /* for Firefox */
+  overflow-x: scroll;
+}
+
+.navds-tabs__tablist::-webkit-scrollbar {
+  display: none; /* for Chrome, Safari, and Opera */
+}
+
+.navds-tabs__scroll-button {
+  padding: var(--a-spacing-3) var(--a-spacing-4);
+  width: 2.75rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.navds-tabs__scroll-button--hidden {
+  visibility: hidden;
+}
+
+.navds-tabs__scroll-button svg {
+  font-size: 1.25rem;
+  flex-shrink: 0;
+}
+
+.navds-tabs--small .navds-tabs__scroll-button {
+  padding: var(--a-spacing-1-alt) var(--a-spacing-4);
+  width: 2rem;
+}
+
+.navds-tabs__tab {
+  min-height: 3rem;
+  padding: var(--a-spacing-3) var(--a-spacing-4);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  background: none;
+  border: none;
+  color: var(--ac-tabs-text, var(--a-text-default));
+  cursor: pointer;
+}
+
+.navds-tabs__tab:hover {
+  box-shadow: inset 0 -3px 0 0 var(--ac-tabs-hover-border, var(--a-border-subtle-hover));
+}
+
+.navds-tabs__tab[aria-selected="true"] {
+  box-shadow: inset 0 -3px 0 0 var(--ac-tabs-selected-border, var(--a-border-action-selected));
+  color: var(--ac-tabs-selected-text, var(--a-text-default));
+}
+
+.navds-tabs__tab:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+  box-shadow: inset var(--a-shadow-focus);
+  color: var(--ac-tabs-focus-text, var(--a-text-default));
+}
+
+@supports not selector(:focus-visible) {
+  .navds-tabs__tab:focus {
+    outline: 2px solid transparent;
+    box-shadow: inset var(--a-shadow-focus);
+    color: var(--ac-tabs-focus-text, var(--a-text-default));
+  }
+}
+
+.navds-tabs__tab-inner {
+  display: flex;
+  align-items: center;
+  gap: var(--a-spacing-1);
+}
+
+.navds-tabs__tab-inner > * {
+  display: inline-flex;
+}
+
+.navds-tabs__tab-inner svg {
+  flex-shrink: 0;
+}
+
+.navds-tabs__tab-icon--top > .navds-tabs__tab-inner {
+  flex-direction: column;
+  gap: 0;
+}
+
+.navds-tabs__tab--small {
+  min-height: 2rem;
+  padding: var(--a-spacing-1-alt) var(--a-spacing-4);
+}
+
+.navds-tabs__tab-icon--top,
+.navds-tabs__tab--small.navds-tabs__tab-icon--top {
+  padding: var(--a-spacing-1) var(--a-spacing-4);
+}
+
+.navds-tabs__tab svg,
+.navds-tabs__tab--small.navds-tabs__tab--icon-only svg,
+.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 svg,
+.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 transparent;
+  box-shadow: inset 0 0 0 2px var(--a-border-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-tabs__tabpanel:focus {
+    outline: 2px solid transparent;
+    box-shadow: inset 0 0 0 2px var(--a-border-focus);
+  }
+}
+
+@media (forced-colors: active) {
+  .navds-tabs__tab[aria-selected="true"] {
+    border-bottom: 3px solid canvastext;
+    padding-block-end: calc(var(--a-spacing-3) - 3px);
+  }
+
+  .navds-tabs__tab--small[aria-selected="true"] {
+    padding-block-end: calc(var(--a-spacing-1-alt) - 3px);
+  }
+
+  .navds-tabs__tab-icon--top[aria-selected="true"],
+  .navds-tabs__tab--small.navds-tabs__tab-icon--top[aria-selected="true"] {
+    padding-block-end: calc(var(--a-spacing-1) - 3px);
+  }
+}
@@ -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;
+  }
+}
@@ -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;
+  }
+}
@@ -0,0 +1,181 @@
+.navds-toggle-group__wrapper {
+  display: grid;
+  justify-items: start;
+  gap: var(--a-spacing-2);
+}
+
+.navds-toggle-group__wrapper--fill {
+  justify-items: initial;
+}
+
+.navds-toggle-group {
+  border-radius: var(--a-border-radius-medium);
+  background-color: var(--ac-toggle-group-bg, var(--a-surface-transparent));
+  box-shadow: inset 0 0 0 1px var(--ac-toggle-group-border, var(--a-border-default));
+  padding: calc(var(--a-spacing-1) + 0.0625rem);
+  gap: var(--a-spacing-1);
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+}
+
+.navds-toggle-group--small {
+  padding: calc(var(--a-spacing-05) + 0.0625rem);
+}
+
+.navds-toggle-group--neutral {
+  background-color: var(--ac-toggle-group-neutral-bg, var(--a-surface-transparent));
+  box-shadow: inset 0 0 0 1px var(--ac-toggle-group-neutral-border, var(--a-border-default));
+}
+
+.navds-toggle-group__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--a-spacing-1) var(--a-spacing-3);
+  min-height: 2.375rem;
+  border: none;
+  cursor: pointer;
+  background-color: var(--ac-toggle-group-button-bg, var(--a-surface-transparent));
+  color: var(--ac-toggle-group-button-text, var(--a-text-default));
+  border-radius: var(--a-border-radius-small);
+  min-width: fit-content;
+  font-weight: var(--a-font-weight-regular);
+}
+
+.navds-toggle-group--medium > :where(.navds-toggle-group__button:first-of-type:focus-visible) {
+  border-start-start-radius: 1px;
+  border-end-start-radius: 1px;
+}
+
+.navds-toggle-group--medium > :where(.navds-toggle-group__button:last-of-type:focus-visible) {
+  border-start-end-radius: 1px;
+  border-end-end-radius: 1px;
+}
+
+.navds-toggle-group--neutral > .navds-toggle-group__button {
+  background-color: var(--ac-toggle-group-button-neutral-bg, var(--a-surface-transparent));
+  color: var(--ac-toggle-group-button-neutral-text, var(--a-text-default));
+}
+
+.navds-toggle-group__button:hover {
+  background-color: var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle));
+  color: var(--ac-toggle-group-button-hover-text, var(--a-text-default));
+}
+
+.navds-toggle-group--neutral > .navds-toggle-group__button:hover {
+  background-color: var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
+  color: var(--ac-toggle-group-button-neutral-hover-text, var(--a-text-default));
+}
+
+.navds-toggle-group__button:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 1px;
+  box-shadow:
+    0 0 0 1px var(--a-surface-default),
+    0 0 0 4px var(--a-border-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-toggle-group__button:focus {
+    outline: 2px solid transparent;
+    outline-offset: 1px;
+    box-shadow:
+      0 0 0 1px var(--a-surface-default),
+      0 0 0 4px var(--a-border-focus);
+  }
+}
+
+.navds-toggle-group__button:focus-visible:hover[aria-pressed="false"] {
+  box-shadow:
+    0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)),
+    0 0 0 4px var(--a-border-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
+    box-shadow:
+      0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)),
+      0 0 0 4px var(--a-border-focus);
+  }
+}
+
+.navds-toggle-group--neutral > .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
+  box-shadow:
+    0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
+    0 0 0 4px var(--a-border-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-toggle-group--neutral > .navds-toggle-group__button:focus-visible:hover[aria-pressed="false"] {
+    box-shadow:
+      0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
+      0 0 0 4px var(--a-border-focus);
+  }
+}
+
+.navds-toggle-group__button-inner {
+  display: flex;
+  align-items: center;
+  gap: var(--a-spacing-2);
+  font-weight: inherit;
+}
+
+.navds-toggle-group__button-inner > * {
+  flex-shrink: 0;
+}
+
+.navds-toggle-group__button[aria-pressed="true"],
+.navds-toggle-group__button[aria-checked="true"] {
+  background-color: var(--ac-toggle-group-selected-bg, var(--a-surface-action-selected));
+  color: var(--ac-toggle-group-selected-text, var(--a-text-on-action));
+}
+
+.navds-toggle-group--neutral > .navds-toggle-group__button[aria-pressed="true"],
+.navds-toggle-group--neutral > .navds-toggle-group__button[aria-checked="true"] {
+  background-color: var(--ac-toggle-group-neutral-selected-bg, var(--a-surface-neutral-selected));
+  color: var(--ac-toggle-group-neutral-selected-text, var(--a-text-on-neutral));
+}
+
+.navds-toggle-group--small > .navds-toggle-group__button {
+  padding: var(--a-spacing-05) var(--a-spacing-3);
+  min-height: 1.625rem;
+  min-width: fit-content;
+}
+
+.navds-toggle-group__button > .navds-toggle-group__button-inner > svg {
+  font-size: 1.5rem;
+}
+
+.navds-toggle-group--small > .navds-toggle-group__button > .navds-toggle-group__button-inner > svg {
+  font-size: 1.125rem;
+}
+
+@media (forced-colors: active) {
+  .navds-toggle-group {
+    border: 2px solid transparent;
+  }
+
+  .navds-toggle-group__button:hover {
+    color: highlight;
+  }
+
+  .navds-toggle-group__button[aria-checked="true"],
+  .navds-toggle-group__button[aria-pressed="true"] {
+    background-color: selecteditem;
+    color: selecteditemtext;
+  }
+
+  .navds-toggle-group__button[aria-checked="true"] > *,
+  .navds-toggle-group__button[aria-pressed="true"] > * {
+    forced-color-adjust: none;
+  }
+
+  .navds-toggle-group__button:active {
+    background-color: unset !important;
+  }
+
+  .navds-toggle-group__button:focus-visible {
+    outline-color: highlight;
+  }
+}
@@ -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);
+  }
+}
@@ -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);
+}
@@ -75,14 +75,14 @@
  border-radius: var(--a-border-radius-xlarge);
 }

-.navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus-visible,
-.navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus-visible {
+.navds-date .rdp-button:not(.rdp-day_selected, [disabled]):focus-visible,
+.navds-date .navds-date__month-button:not(.rdp-day_selected, [disabled]):focus-visible {
  box-shadow: var(--a-shadow-focus);
 }

@supports not selector(:focus-visible) {
-  .navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus,
-  .navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus {
+  .navds-date .rdp-button:not(.rdp-day_selected, [disabled]):focus,
+  .navds-date .navds-date__month-button:not(.rdp-day_selected, [disabled]):focus {
    box-shadow: var(--a-shadow-focus);
  }
 }
@@ -167,8 +167,8 @@
  color: var(--ac-date-disabled-text, var(--a-text-subtle));
 }

-.navds-date .rdp-button:where(:not(.rdp-day_selected):not([disabled])):hover,
-.navds-date__month-button:where(:not(.rdp-day_selected):not([disabled])):hover {
+.navds-date .rdp-button:where(:not(.rdp-day_selected, [disabled])):hover,
+.navds-date__month-button:where(:not(.rdp-day_selected, [disabled])):hover {
  background: var(--ac-date-hover-bg, var(--a-surface-action-subtle-hover));
  cursor: pointer;
 }
@@ -201,19 +201,19 @@
 }

 /* Error-handling */
-.navds-date__field--error .navds-date__field-input:not(:hover):not(:disabled) {
+.navds-date__field--error .navds-date__field-input:not(:hover, :disabled) {
  border-color: var(--ac-date-input-error-border, var(--a-border-danger));
  box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger));
 }

-.navds-date__field--error .navds-date__field-input:focus-visible:not(:hover):not(:disabled) {
+.navds-date__field--error .navds-date__field-input:focus-visible:not(:hover, :disabled) {
  box-shadow:
    inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)),
    var(--a-shadow-focus);
 }

@supports not selector(:focus-visible) {
-  .navds-date__field--error .navds-date__field-input:focus:not(:hover):not(:disabled) {
+  .navds-date__field--error .navds-date__field-input:focus:not(:hover, :disabled) {
    box-shadow:
      inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)),
      var(--a-shadow-focus);
@@ -13,7 +13,7 @@
  border-bottom: 1px solid var(--a-border-divider);
 }

-.navds-dropdown__menu > :not(.navds-dropdown__divider):not(.navds-dropdown__list) {
+.navds-dropdown__menu > :not(.navds-dropdown__divider, .navds-dropdown__list) {
  margin: 0 var(--a-spacing-4) var(--a-spacing-3);
 }

@@ -81,13 +81,13 @@
  cursor: text;
 }

-.navds-combobox--error .navds-text-field__input:not(:hover):not(:disabled) {
+.navds-combobox--error .navds-text-field__input:not(:hover, :disabled) {
  border-color: var(--ac-combobox-error-border, var(--a-border-danger));
  box-shadow: 0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger));
 }

 .navds-combobox--error
-  .navds-text-field__input:not(:hover):not(:disabled):not(.navds-combobox__wrapper-inner--virtually-unfocused):focus-within {
+  .navds-text-field__input:not(:hover, :disabled, .navds-combobox__wrapper-inner--virtually-unfocused):focus-within {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow:
@@ -291,7 +291,6 @@
  padding-inline: var(--__ac-combobox-list-item-padding-inline);
  width: 100%;
  background-color: var(--ac-combobox-list-item-bg, var(--a-surface-default));
-  scroll-margin-top: 50px;
 }

 .navds-combobox__list-item--loading {
@@ -372,6 +371,11 @@
  border-radius: calc(var(--a-border-radius-medium) - 1px);
 }

+.navds-combobox__list-item mark {
+  background-color: transparent;
+  font-weight: bold;
+}
+
 /* Mobile */

@media (max-width: 479px) {
@@ -13,7 +13,7 @@
  min-width: 0;
 }

-.navds-fieldset > :not(:first-child):not(:empty) {
+.navds-fieldset > :not(:first-child, :empty) {
  margin-top: var(--a-spacing-2);
 }

@@ -26,7 +26,7 @@
 }

 /* Applied when hideLegend is applied to fieldset */
-.navds-fieldset > .navds-sr-only + :not(:first-child):not(:empty) {
+.navds-fieldset > .navds-sr-only + :not(:first-child, :empty) {
  margin-top: 0;
 }

@@ -170,44 +170,42 @@
  color: var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
 }

-.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus) + .navds-checkbox__label::before,
-.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
+.navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate, :focus) + .navds-checkbox__label::before,
+.navds-radio__input:hover:not(:disabled, :checked, :focus) + .navds-radio__label::before {
  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
 }

-.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate) + .navds-checkbox__label::before,
-.navds-radio__input:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
+.navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
+.navds-radio__input:hover:not(:disabled, :checked) + .navds-radio__label::before {
  background-color: var(--ac-radio-checkbox-action-hover-bg, var(--a-surface-action-subtle));
 }

-.navds-checkbox--error
-  > .navds-checkbox__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
-  + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
+.navds-checkbox--error > .navds-checkbox__input:not(:hover, :disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
+.navds-radio--error > .navds-radio__input:not(:hover, :disabled, :checked) + .navds-radio__label::before {
  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
 }

 .navds-checkbox--error
-  > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
+  > .navds-checkbox__input:focus:not(:hover, :disabled, :checked, :indeterminate)
  + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
+.navds-radio--error > .navds-radio__input:focus:not(:hover, :disabled, :checked) + .navds-radio__label::before {
  box-shadow:
    0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
    0 0 0 4px var(--a-border-focus);
 }

 .navds-checkbox--error
-  > .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
+  > .navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate, :focus)
  + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
+.navds-radio--error > .navds-radio__input:hover:not(:disabled, :checked, :focus) + .navds-radio__label::before {
  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
 }

 .navds-checkbox--error
-  > .navds-checkbox__input:focus:hover:not(:disabled):not(:checked):not(:indeterminate)
+  > .navds-checkbox__input:focus:hover:not(:disabled, :checked, :indeterminate)
  + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
+.navds-radio--error > .navds-radio__input:focus:hover:not(:disabled, :checked) + .navds-radio__label::before {
  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
  box-shadow:
    0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
@@ -241,14 +239,10 @@
  color: var(--a-text-default);
 }

-.navds-checkbox--readonly
-  > .navds-checkbox__input:not(:disabled):not(:checked):not(:indeterminate)
-  + .navds-checkbox__label::before,
-.navds-checkbox--readonly
-  > .navds-checkbox__input:hover:not(:checked):not(:indeterminate):not(:focus)
-  + .navds-checkbox__label::before,
-.navds-radio--readonly > .navds-radio__input:not(:disabled):not(:checked) + .navds-radio__label::before,
-.navds-radio--readonly > .navds-radio__input:hover:not(:checked):not(:focus) + .navds-radio__label::before {
+.navds-checkbox--readonly > .navds-checkbox__input:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
+.navds-checkbox--readonly > .navds-checkbox__input:hover:not(:checked, :indeterminate, :focus) + .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(--__ac-radio-checkbox-readonly-bg);
  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
 }
@@ -186,12 +186,12 @@
 }

 /* Error-handling */
-.navds-search--error .navds-search__input:not(:hover):not(:disabled) {
+.navds-search--error .navds-search__input:not(:hover, :disabled) {
  border-color: var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger)));
  box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger)));
 }

-.navds-search--error .navds-search__input:focus-visible:not(:hover):not(:disabled) {
+.navds-search--error .navds-search__input:focus-visible:not(:hover, :disabled) {
  box-shadow:
    inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
    var(--a-shadow-focus);
@@ -205,7 +205,7 @@
 }

@supports not selector(:focus-visible) {
-  .navds-search--error .navds-search__input:focus:not(:hover):not(:disabled) {
+  .navds-search--error .navds-search__input:focus:not(:hover, :disabled) {
    box-shadow:
      inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
      var(--a-shadow-focus);
@@ -80,7 +80,7 @@
 /**
  Error handling
 */
-.navds-select--error > * select:not(:hover):not(:focus):not(:disabled) {
+.navds-select--error > * select:not(:hover, :focus, :disabled) {
  box-shadow: 0 0 0 1px var(--ac-select-error-border, var(--a-surface-danger));
  border-color: var(--ac-select-error-border, var(--a-surface-danger));
 }
@@ -61,19 +61,19 @@
 /**
  Error handling
 */
-.navds-text-field--error > .navds-text-field__input:not(:hover):not(:disabled) {
+.navds-text-field--error > .navds-text-field__input:not(:hover, :disabled) {
  border-color: var(--ac-textfield-error-border, var(--__ac-textfield-error-border, var(--a-border-danger)));
  box-shadow: 0 0 0 1px var(--ac-textfield-error-border, var(--__ac-textfield-error-border, var(--a-border-danger)));
 }

-.navds-text-field--error > .navds-text-field__input:focus-visible:not(:hover):not(:disabled) {
+.navds-text-field--error > .navds-text-field__input:focus-visible:not(:hover, :disabled) {
  box-shadow:
    0 0 0 1px var(--a-border-danger),
    var(--a-shadow-focus);
 }

@supports not selector(:focus-visible) {
-  .navds-text-field--error > .navds-text-field__input:focus:not(:hover):not(:disabled) {
+  .navds-text-field--error > .navds-text-field__input:focus:not(:hover, :disabled) {
    box-shadow:
      0 0 0 1px var(--a-border-danger),
      var(--a-shadow-focus);
@@ -111,13 +111,13 @@
 /**
  Error handling
 */
-.navds-textarea--error .navds-textarea__input:not(:hover):not(:focus-visible):not(:disabled) {
+.navds-textarea--error .navds-textarea__input:not(:hover, :focus-visible, :disabled) {
  box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
  border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
 }

@supports not selector(:focus-visible) {
-  .navds-textarea--error .navds-textarea__input:not(:hover):not(:focus):not(:disabled) {
+  .navds-textarea--error .navds-textarea__input:not(:hover, :focus, :disabled) {
    box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
    border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
  }
@@ -1,4 +1,5 @@
@charset "UTF-8";
+
@import "baseline/index.css";
@import "typography.css";
@import "accordion.css";
@@ -46,8 +46,9 @@
  /* From polyfill */
  position: fixed;
  top: 0;
-  right: 0;
  bottom: 0;
+  right: 0;
+  /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
  left: 0;
 }

@@ -96,8 +97,9 @@
  /* From polyfill: */
  position: fixed;
  top: 0;
-  right: 0;
  bottom: 0;
+  right: 0;
+  /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
  left: 0;
 }

@@ -176,7 +178,7 @@
 }

@keyframes akselModalFadeIn {
-  from {
+  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(5% + 4px), 0);
  }
@@ -185,7 +187,7 @@
    opacity: 1;
  }

-  to {
+  100% {
    transform: none;
  }
 }
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot]	20d5ad597a	Version Packages (#3340 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-11-08 12:14:52 +01:00
Ken	aa7c2d9598	Chore: Fix npm/github version mismatch	2024-11-08 12:12:35 +01:00
github-actions[bot]andgithub-actions[bot]	4921dcfe7b	Version Packages (#3336 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-11-08 11:54:36 +01:00
Niklas Backman	23f4d4b4a6	Update SuggestionBlock.tsx (#3339 ) Typo. Fjernet et ekstra "ta"	2024-11-08 11:28:25 +01:00
Ken	47a4dd6c4c	[Icons] Added FileJpeg and FilePng. (#3332 ) * Updated icons * ⚰️ Removed medicalthermometer icon * Revert "⚰️ Removed medicalthermometer icon" This reverts commit `fcf7f1e124`.	2024-11-08 10:52:51 +01:00
Ken	702aecf34b	[Datepicker] `DateWrapper` now uses state instead of ref (#3333 ) * bug: DateWrapper now uses state instead of ref to update after first render * changeset update * Added comments based on change	2024-11-08 09:38:26 +01:00
Ken	c449c380fa	Update README.md (#3337 )	2024-11-07 12:43:36 +01:00
Ken	5f81e617c8	Use NB translation for e-mail (#3335 )	2024-11-07 10:56:34 +01:00
Ken	7cefa52b81	Bumped allowed react-versions (#3334 )	2024-11-07 10:12:59 +01:00
Halvor Haugan	97fbd9de64	Remove creation of empty .env files in workflows (#3294 )	2024-11-07 09:40:22 +01:00
Ken	1fdb7c84c3	[Darkside] Accordion CSS-rewrite (#3296 ) * [Darkside] Migrated typo to new CSS * memo: Added comments * change: Implemented accordion header and content * change: Added lines * feat: added todo * change: Fixed layering issues with lines * change: Avoid animation on initial render * change: Removed comments * change: moved icon state into nesting * change: Added alpha-background for icon, updated fontweight * change: Added forced-colors support * Removed use op --open class * Removed old grid centering * Top, bottom line is now alpha * Fixed animation * bug: Revert to transparent bg * deprecation: Added tags to accordion props that are to be removed * removed deprecation for accordion headingSize prop * Updated implementation of line in accordion * Remove position relative in accordion content * Implemented size-update for accordion * bug: removed old comment * Clarify comments * Removed redundant header class * Re-added className in accordionHeader	2024-11-06 18:52:49 +01:00
Ken	ca0d5b4246	[Darkside] Copybutton CSS update (#3330 ) * Use new tokens in copybutton * Updated animation * updated to nested syntax * Updated text-color on hover * Added subheading for sectioning * removed background none	2024-11-06 18:52:01 +01:00
Halvor Haugan	9622b61a3d	🔧 Set cssVariables extension to only include tokens (#3327 )	2024-11-06 16:18:01 +01:00
Ken	0fe767652d	[CI] Testing chromatic ignore for darkside changes	2024-11-06 13:41:39 +01:00
Ken	256ab2a166	[Sanity] Updated custom publish actions (#3315 ) * sanity config cleanup * removed extra const for type * re-organized admin tools and fixed types * Removed no longer needed custom actions for translations * Simplified publication plugin * Removed extra logic in publish action * synced SEO-updates * lock sync * bug: Removed old index export	2024-11-06 13:13:13 +01:00
Ken	4118a27c18	[Sanity] Collapsed multiple Util-locations, updated API-version, added types (#3313 ) * sanity config cleanup * removed extra const for type * re-organized admin tools and fixed types * synced SEO-updates * lock sync	2024-11-06 13:10:53 +01:00
KenandHalvor Haugan	2d669a7513	[Sanity] Config cleanup (#3312 ) * sanity config cleanup * removed extra const for type * Update aksel.nav.no/website/sanity/schema/documents/presets/seo.ts Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> --------- Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>	2024-11-06 10:42:13 +01:00
Julian Nymark	923fce1961	🐛 fix wrong syntax for codeowners	2024-11-05 14:56:42 +01:00
Julian Nymark	16739a2cf6	✨ CODEOWNERS (#3323 ) * :sparkels: CODEOWNERS * 📝 update codeowners	2024-11-05 14:39:05 +01:00
Ken	3227e0db91	[Darkside] Chat CSS update (#3305 ) * Chat css-rewrite * changed initials for chat story * Update nested syntax	2024-11-05 14:35:49 +01:00
Ken	ccb090448d	[Bug]: Storybook preview used wrong prop for Theme context	2024-11-05 11:10:54 +01:00
KenandHalvor Haugan	36b0d8a8fd	[Darkside] Actionmenu CSS update (#3304 ) * change: Actionmenu css rewrite * change: Synced with figma-design * Added focus-state to subtrigger * Updated animations * acx -> axc * Let items keep their original color when disabled * Update @navikt/core/react/src/overlays/action-menu/ActionMenu.stories.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> --------- Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>	2024-11-05 10:30:39 +01:00
Ken	056e29af52	[Chromatic] Ignores darkside css updates (#3325 ) * Ignores darkside css updates * better glob	2024-11-05 10:26:36 +01:00
Ken	4a2e47fe6a	Chips CSS-reset (#3316 )	2024-11-05 10:08:18 +01:00
KenandHalvor Haugan	1eace15576	[Darkside] Theme component as feature-flagging (#3318 ) * Setup theme-component * Added styling for global theming * Update @navikt/core/react/src/provider/theme/AkselTheme.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * appearance -> theme --------- Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>	2024-11-05 10:04:38 +01:00
Halvor HauganandKen	ef44f2a25b	[aksel.nav.no] Adjust exaples of Box and Bleed (#3321 ) Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>	2024-11-05 09:08:13 +01:00
Sjur	916b383e7b	Update global-dark.ts (#3320 ) Endret fargene 100 - 400 for Info og BrandThree	2024-11-04 15:29:52 +01:00
github-actions[bot]andgithub-actions[bot]	bc8761295b	Version Packages (#3314 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-11-04 10:22:20 +01:00
Halvor Haugan	6d9f9001fe	Table.ColumnHeader: Inherit text alignment in button (#3319 )	2024-11-01 16:07:39 +01:00
KenandJulian Nymark	039332b4f8	[Darkside] Updated Alert CSS (#3301 ) * change: Alert variants * feat: Updated alert css * change: use correct spacing * Update @navikt/core/css/darkside/alert.darkside.css Co-authored-by: Julian Nymark <julian.nymark@nav.no> --------- Co-authored-by: Julian Nymark <julian.nymark@nav.no>	2024-11-01 16:05:32 +01:00
Halvor Haugan	8cadfd0979	Pagination: More precise type for renderItem (#3275 )	2024-11-01 08:49:08 +01:00
Halvor Haugan	c200f580c1	Translations for ReadOnlyIcon (#3311 )	2024-10-31 16:28:48 +01:00
Halvor Haugan	5ce8ec620c	Include number of failed stories in Chromatic comment (#3308 )	2024-10-31 15:21:23 +01:00
github-actions[bot]andgithub-actions[bot]	f7789522c6	Version Packages (#3307 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-10-31 12:27:02 +01:00
Julian Nymark	a9a1182eff	Website: 🐛 code example chip to same on first page (#3310 ) * 🐛 fix bug still appearing on first page load * Website: ♻️	2024-10-31 11:50:32 +01:00
Ken	35f7355233	bug: Checks if autocomplete should actually be used when pressing enter (#3306 )	2024-10-31 09:56:16 +01:00
Julian NymarkandHalvor Haugan	bbc06a3eab	ErrorSummary: add translation support (#3245 ) * ErrorSummary: add translation support * Update @navikt/core/react/src/form/error-summary/ErrorSummary.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * Update @navikt/core/react/src/util/i18n/locales/nn.ts Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * ErrorSummary: fix broken object notation (thanks github conflict webGUI! 😂) * ErrorSummary: use proper casing for translations object --------- Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>	2024-10-30 16:07:47 +01:00
Halvor Haugan	6e49de805f	Textarea: translations (#3302 )	2024-10-30 15:31:37 +01:00
github-actions[bot]andgithub-actions[bot]	9757d7d829	Version Packages (#3283 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-10-30 15:28:46 +01:00
Halvor Haugan	d7fb6b5718	[aksel.nav.no] Fix bug when clicking on active code example chip (#3303 )	2024-10-30 15:26:28 +01:00
Ken	3c53127e5e	bug: Combobox now handles autocomplete correctly with new values (#3287 )	2024-10-30 14:50:58 +01:00
Julian Nymark	561dd2e3c0	Introside: 📝 update confirmation text (#3300 ) * Introside: 📝 update confirmation text * Introside: 📝 update confirmation text (+ meta.json)	2024-10-30 13:47:41 +01:00
Julian Nymark	1e9983c65b	Button: ✨ new tokens (darkside.css) (#3237 ) * Button: ✨ new tokens (darkside.css) * Button: 🚚 copy over the primitives CSS * Button: temporary missing placeholder tokens (shadow) * Button: use new tokens * Button: remove temporary duplicate code, remove box-shadow focus * Button: 🎨 use new token prefix * Button: 🐛 erroneous token conversion from old * Button: 🐛 erroneous precedence of some CSS rules * Button: 🎨 do not use CSS nesting (...yet!) * Button: 🎨 use alpha tokens for hover on secondary and tertiary * Button: 🎨 * Button: 🚨 ignore outdated stylelint rule * Button: 🎨 use bg token for storybook preview darkmode * Button: 🔥 🎨 remove unused CSS, better scope for var def * Button: 💄 use correct tokens, prettier css rules * Button: 💄 remove unused CSS	2024-10-30 12:56:04 +01:00
Halvor Haugan	76937a0a2b	Combobox: 🐛 Fix scroll issue when using arrow keys in list (#3299 )	2024-10-30 12:20:56 +01:00
Halvor Haugan	1ac9ec2f56	Remove some excludes in axe.e2e.ts (#3291 )	2024-10-30 10:06:31 +01:00
Halvor Haugan	e88d328e8b	Add darkside tokens to stylelint rule value-no-unknown-custom-properties (#3297 )	2024-10-30 10:05:16 +01:00
Ken	1e2b1d885f	[Darkside] Updated Typo CSS (#3295 ) * [Darkside] Migrated typo to new CSS * memo: Added comments	2024-10-30 10:03:09 +01:00
Halvor Haugan	4cdeeacaef	Add "Decision Records" to PR template (#3289 )	2024-10-29 15:39:07 +01:00
Halvor Haugan	c2365712ca	[Translations] Table: i18n support (#3281 )	2024-10-29 13:28:36 +01:00
Ken	0afbef50a9	[Darkside] Allow old spacing tokens in darkside to avoid editing react-code in production	2024-10-29 13:17:39 +01:00
Halvor Haugan	7799416096	Search: i18n + remove role (#3280 )	2024-10-29 12:48:28 +01:00
Halvor HauganandKen	92b39de213	[Translations] ProgressBar: i18n support (#3277 ) Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>	2024-10-29 12:35:10 +01:00
Halvor Haugan	9dade96849	[Translations] Modal: i18n support (#3273 )	2024-10-29 12:25:08 +01:00
Halvor Haugan	5c23ca62b6	[Translations] Pagination: i18n support (#3276 )	2024-10-29 12:16:53 +01:00
Halvor Haugan	d562ef0d87	[aksel.nav.no] Adjust examples of HGrid, Show and Hide (#3288 )	2024-10-29 12:06:56 +01:00
Ken	13c9fef93a	[Darkside] Moved old CSS over to new Darkside dir (#3284 ) * change: Copy over old CSS into darkside dir * change: Update imports for darkside css * bug: Updated togglegroup css naming	2024-10-29 11:36:14 +01:00
Magnus TønnessenandKen	b5c7defffb	Add month input format MMyyyy (#3285 ) * change: Add allowed month input format MMyyyy * Update .changeset/strong-apes-hope.md --------- Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>	2024-10-29 10:33:59 +01:00
Halvor Haugan	e4eccd7616	[aksel.nav.no] Add language block (#3267 )	2024-10-28 19:34:48 +01:00
Halvor Haugan	5295abb1bf	[Translations] Loader: i18n support (#3272 )	2024-10-28 11:42:13 +01:00
Halvor Haugan	3bfd5d2299	Tabs.List: Remove redundant icon titles (#3282 )	2024-10-28 10:24:58 +01:00
Halvor Haugan	a63ba59636	[Translations] ExpansionCard: i18n support (#3271 )	2024-10-25 15:18:47 +02:00
Julian Nymark	81c79d8355	Combo filteredoptions offset fix (#3269 ) * Combobox: 🐛 only apply the offset when it's needed * Combobox: changeset	2024-10-25 14:52:16 +02:00
github-actions[bot]andgithub-actions[bot]	f27698a2bf	Version Packages (#3270 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-10-24 09:15:01 +02:00
Halvor Haugan	fdc3244cde	Better support for React 19 (#3268 ) * Date/MonthPicker: Upgrade react-day-picker to fix issue with Nextjs 15 * Slot: Use ref from props to avoid warning in React 19	2024-10-24 09:07:26 +02:00
Vegard Haugstvedt	59dc3e999b	Feature/combobox show add new value while autocompleting (#3225 ) * Show AddNewValue button in Combobox based on searchTerm instead of value, so it is displayed when autocompleting words * Highlight matching text in FilteredOptions * Add changeset * Move styling to combobox.css instead of inline JS * Ensure label options are read as one text, even when highlighting search matches. This only seemed to be a problem in testing library, so we should be able to remove this if they fix this in their calculation of accessible name. * Update changeset to a minor version * Re-introduce controlled value in storybook examples to not change Chromatic snapshots	2024-10-23 15:42:26 +02:00
Halvor Haugan	9711de90da	Checkbox: Remove redundant attribute aria-checked (#3274 )	2024-10-23 13:48:46 +02:00
Halvor Haugan	ddf9f9bc5a	Combobox: Don't scroll when moving virtual focus with mouse (#3265 )	2024-10-23 09:44:11 +02:00
Ken	d83a6feb36	[Darkside] Tailwind CSS config for new tokens (#3251 ) * change: Updated actionmenu examples * change: Removed flipAlignment prop for better alignment * change: Removed defaultOpen-prop from ActionMenu * change: Moved rootElement prop to component root * change: Added support for use inside Modal * change: Use MenuPortalProps instead of Pick * feat: Added build for darkside * feat: Implemented darkside-tokens in tailwind-build * change: Code cleanup and syntax simplification * change: Moved color-token extraction to start of file * memo: Moved comment	2024-10-21 17:04:06 +02:00
Ken	f505386104	[Aksel.nav.no] Add support for markdown-links in intro-texts (#3262 ) * change: added markdown-support for intro-texts * change: Added description for sanity-fields	2024-10-21 16:56:03 +02:00
github-actions[bot]andgithub-actions[bot]	9f56b84a96	Version Packages (#3259 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-10-21 15:28:43 +02:00
Halvor Haugan	b91ce5794d	Combobox: 🐛 Remove virtual focus on input blur instead of moving it (#3261 )	2024-10-21 15:10:31 +02:00
Ken	99eaf41e47	change: Hide private props better (#3260 )	2024-10-21 14:37:55 +02:00
Halvor HauganandKen	536b0fcc5e	Combobox: Clearify in JSDoc what clearButton does (#3258 ) Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>	2024-10-21 09:58:10 +02:00
KenandHalvor Haugan	64aab7361a	Stylelint v16 update (#3250 ) * update: Stylelint v15 * update: Stylelint v16 * updated: Use complex list syntax for not-selector * lint updates * More lint fixes * memo: Changeset * bug: Missing shorthand for spacer * Update .changeset/slimy-yaks-smash.md Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * change: re-added directional placement for modal polyfill * change: Inset -> direction * update: lock sync --------- Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>	2024-10-21 09:54:09 +02:00
Ken	8c15433b95	change: Update token-prefix to 'ax' (#3257 )	2024-10-21 09:53:49 +02:00
Halvor Haugan	8137a1e500	Fix useState in Storybook (#3256 )	2024-10-21 09:06:29 +02:00
Ken	7138b52c2d	[Linting] Eslint v9 dependency upgrades (#3248 ) * update: eslint-plugin-react-hooks v5 update * update: Valid React-component names used for useDescendants * update: Bumped eslint packages to support v9 * change: Rename hooknames * update: lock sync	2024-10-18 15:54:12 +02:00
Ken	1730b2ebc1	[Scripts] Updated clean-script (#3249 ) * change: Updated clean-script * change: Removed logging and extra filtration	2024-10-18 15:53:01 +02:00