Version Packages (#3420 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Refactor accordion stories (#3432 )
2026-10-13 01:02:02 +00:00 · 2024-12-06 14:30:55 +01:00 · 2024-12-05 22:01:54 +01:00 · 2024-12-05 13:36:33 +01:00 · 2024-12-05 13:17:13 +01:00 · 2024-12-05 10:23:13 +01:00
167 changed files with 4134 additions and 3668 deletions
@@ -51,7 +51,6 @@ export default {
  ],
  addons: [
    "@storybook/addon-a11y",
-    "@whitespace/storybook-addon-html",
    "@storybook/addon-interactions",
    "@storybook/addon-themes",
    {
@@ -1,5 +1,15 @@
 # @navikt/aksel-icons

+## 7.7.0
+
+## 7.6.0
+
+### Minor Changes
+
+- Icons: Added new icons 'TruckPercent' and 'ShieldCheckmark' 🎉. ([#3416](https://github.com/navikt/aksel/pull/3416))
+
+## 7.5.3
+
 ## 7.5.2

 ## 7.5.1
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14.0091 3.05126C12.9222 1.88827 11.0778 1.88827 9.99089 3.05126L9.20244 3.89486C8.95602 4.15852 8.60767 4.30281 8.24698 4.29063L7.09295 4.25162C5.502 4.19786 4.19787 5.50199 4.25164 7.09294L4.29064 8.24697C4.30283 8.60766 4.15853 8.95601 3.89487 9.20243L3.05127 9.99087C1.88828 11.0778 1.88828 12.9221 3.05127 14.0091L3.89487 14.7975C4.15853 15.044 4.30283 15.3923 4.29064 15.753L4.25164 16.907C4.19787 18.498 5.502 19.8021 7.09295 19.7483L8.24698 19.7093C8.60767 19.6972 8.95602 19.8414 9.20244 20.1051L9.99089 20.9487C11.0778 22.1117 12.9222 22.1117 14.0091 20.9487L14.7976 20.1051C15.044 19.8414 15.3923 19.6972 15.753 19.7093L16.907 19.7483C18.498 19.8021 19.8021 18.498 19.7484 16.907L19.7094 15.753C19.6972 15.3923 19.8415 15.044 20.1051 14.7975L20.9487 14.0091C22.1117 12.9221 22.1117 11.0778 20.9487 9.99087L20.1051 9.20243C19.8415 8.95601 19.6972 8.60766 19.7094 8.24697L19.7484 7.09294C19.8021 5.50199 18.498 4.19786 16.907 4.25162L15.753 4.29063C15.3923 4.30281 15.044 4.15852 14.7976 3.89486L14.0091 3.05126ZM11.0868 4.07549C11.5808 3.54686 12.4192 3.54686 12.9132 4.07549L13.7017 4.91909C14.2438 5.49914 15.0102 5.81659 15.8037 5.78977L16.9577 5.75077C17.6809 5.72633 18.2737 6.31912 18.2492 7.04228L18.2102 8.19631C18.1834 8.98981 18.5008 9.75618 19.0809 10.2983L19.9245 11.0868C20.4531 11.5808 20.4531 12.4192 19.9245 12.9132L19.0809 13.7017C18.5008 14.2438 18.1834 15.0102 18.2102 15.8037L18.2492 16.9577C18.2737 17.6809 17.6809 18.2736 16.9577 18.2492L15.8037 18.2102C15.0102 18.1834 14.2438 18.5008 13.7017 19.0809L12.9132 19.9245C12.4192 20.4531 11.5808 20.4531 11.0868 19.9245L10.2983 19.0809C9.75619 18.5008 8.98982 18.1834 8.19632 18.2102L7.04229 18.2492C6.31913 18.2736 5.72634 17.6809 5.75078 16.9577L5.78978 15.8037C5.8166 15.0102 5.49916 14.2438 4.91911 13.7017L4.0755 12.9132C3.54687 12.4192 3.54687 11.5808 4.0755 11.0868L4.91911 10.2983C5.49916 9.75618 5.8166 8.98981 5.78978 8.19631L5.75078 7.04228C5.72634 6.31912 6.31913 5.72633 7.04229 5.75077L8.19632 5.78977C8.98982 5.81659 9.75619 5.49915 10.2983 4.91909L11.0868 4.07549ZM8.7195 8.71973C9.01239 8.42684 9.48727 8.42684 9.78016 8.71973L11.9998 10.9394L14.2195 8.71973C14.5124 8.42684 14.9873 8.42684 15.2802 8.71973C15.5731 9.01262 15.5731 9.4875 15.2802 9.78039L13.0605 12.0001L15.2802 14.2197C15.5731 14.5126 15.5731 14.9875 15.2802 15.2804C14.9873 15.5733 14.5124 15.5733 14.2195 15.2804L11.9998 13.0607L9.78016 15.2804C9.48727 15.5733 9.01239 15.5733 8.7195 15.2804C8.42661 14.9875 8.42661 14.5126 8.7195 14.2197L10.9392 12.0001L8.7195 9.78039C8.42661 9.4875 8.42661 9.01262 8.7195 8.71973Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.0091 3.05126C12.9222 1.88827 11.0778 1.88827 9.99089 3.05126L9.20244 3.89486C8.95602 4.15852 8.60767 4.30281 8.24699 4.29063L7.09295 4.25162C5.502 4.19786 4.19787 5.50199 4.25164 7.09294L4.29064 8.24697C4.30283 8.60766 4.15854 8.95601 3.89488 9.20243L3.05128 9.99087C1.88828 11.0778 1.88828 12.9221 3.05128 14.0091L3.89488 14.7975C4.15854 15.044 4.30283 15.3923 4.29064 15.753L4.25164 16.907C4.19787 18.498 5.502 19.8021 7.09296 19.7483L8.24699 19.7093C8.60767 19.6972 8.95602 19.8414 9.20244 20.1051L9.99089 20.9487C11.0778 22.1117 12.9222 22.1117 14.0091 20.9487L14.7976 20.1051C15.044 19.8414 15.3923 19.6972 15.753 19.7093L16.9071 19.7483C18.498 19.8021 19.8021 18.498 19.7484 16.907L19.7094 15.753C19.6972 15.3923 19.8415 15.044 20.1051 14.7975L20.9487 14.0091C22.1117 12.9221 22.1117 11.0778 20.9487 9.99087L20.1051 9.20243C19.8415 8.95601 19.6972 8.60766 19.7094 8.24697L19.7484 7.09294C19.8021 5.50199 18.498 4.19786 16.9071 4.25162L15.753 4.29063C15.3923 4.30281 15.044 4.15852 14.7976 3.89486L14.0091 3.05126ZM11.0868 4.07549C11.5808 3.54686 12.4192 3.54686 12.9132 4.07549L13.7017 4.91909C14.2438 5.49914 15.0102 5.81659 15.8037 5.78977L16.9577 5.75077C17.6809 5.72633 18.2737 6.31912 18.2492 7.04228L18.2102 8.19631C18.1834 8.98981 18.5008 9.75618 19.0809 10.2983L19.9245 11.0868C20.4531 11.5808 20.4531 12.4192 19.9245 12.9132L19.0809 13.7017C18.5008 14.2438 18.1834 15.0102 18.2102 15.8037L18.2492 16.9577C18.2737 17.6809 17.6809 18.2736 16.9577 18.2492L15.8037 18.2102C15.0102 18.1834 14.2438 18.5008 13.7017 19.0809L12.9132 19.9245C12.4192 20.4531 11.5808 20.4531 11.0868 19.9245L10.2983 19.0809C9.7562 18.5008 8.98983 18.1834 8.19632 18.2102L7.04229 18.2492C6.31913 18.2736 5.72634 17.6809 5.75078 16.9577L5.78978 15.8037C5.8166 15.0102 5.49916 14.2438 4.91911 13.7017L4.07551 12.9132C3.54687 12.4192 3.54687 11.5808 4.07551 11.0868L4.91911 10.2983C5.49916 9.75618 5.8166 8.98981 5.78978 8.19631L5.75078 7.04228C5.72634 6.31912 6.31913 5.72633 7.04229 5.75077L8.19632 5.78977C8.98982 5.81659 9.75619 5.49915 10.2983 4.91909L11.0868 4.07549ZM8.7195 8.71973C9.0124 8.42684 9.48727 8.42684 9.78016 8.71973L11.9998 10.9394L14.2195 8.71973C14.5124 8.42684 14.9873 8.42684 15.2802 8.71973C15.5731 9.01262 15.5731 9.4875 15.2802 9.78039L13.0605 12.0001L15.2802 14.2197C15.5731 14.5126 15.5731 14.9875 15.2802 15.2804C14.9873 15.5733 14.5124 15.5733 14.2195 15.2804L11.9998 13.0607L9.78016 15.2804C9.48727 15.5733 9.0124 15.5733 8.7195 15.2804C8.42661 14.9875 8.42661 14.5126 8.7195 14.2197L10.9392 12.0001L8.7195 9.78039C8.42661 9.4875 8.42661 9.01262 8.7195 8.71973Z" fill="#23262A"/>
 </svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.75 4.01992C19.75 3.53224 19.3003 3.16875 18.8235 3.27093L18.4572 3.34943C14.2007 4.26153 9.79929 4.26153 5.54282 3.34943L5.17649 3.27093C4.69967 3.16875 4.25 3.53223 4.25 4.01992V13.0001C4.25 17.2803 7.71979 20.7501 12 20.7501C16.2802 20.7501 19.75 17.2803 19.75 13.0001V4.01992ZM5.75 4.92339C9.87693 5.73687 14.1231 5.73687 18.25 4.92339V13.0001C18.25 16.4519 15.4518 19.2501 12 19.2501C8.54822 19.2501 5.75 16.4519 5.75 13.0001V4.92339ZM15.7803 10.2803C16.0732 9.98744 16.0732 9.51256 15.7803 9.21967C15.4874 8.92678 15.0126 8.92678 14.7197 9.21967L11 12.9393L9.28033 11.2197C8.98744 10.9268 8.51256 10.9268 8.21967 11.2197C7.92678 11.5126 7.92678 11.9874 8.21967 12.2803L10.4697 14.5303C10.7626 14.8232 11.2374 14.8232 11.5303 14.5303L15.7803 10.2803Z" fill="#23262A"/>
+</svg>
@@ -0,0 +1,14 @@
+name: ShieldCheckmark
+category: Law and security
+sub_category: Security
+keywords:
+  - sikkerhet
+  - security
+  - beskyttelse
+  - sikkert
+  - kryptert
+  - encrypted
+  - secured
+variant: Stroke
+updated_at: 29.11.2024
+created_at: 18.11.2024
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.75 4.01971C19.75 3.53202 19.3003 3.16854 18.8235 3.27071L18.4572 3.34921C14.2007 4.26131 9.79929 4.26131 5.54282 3.34921L5.17649 3.27071C4.69967 3.16854 4.25 3.53202 4.25 4.01971V12.9999C4.25 17.2801 7.71979 20.7499 12 20.7499C16.2802 20.7499 19.75 17.2801 19.75 12.9999V4.01971ZM15.7803 10.2803C16.0732 9.98744 16.0732 9.51256 15.7803 9.21967C15.4874 8.92678 15.0126 8.92678 14.7197 9.21967L11 12.9393L9.28033 11.2197C8.98744 10.9268 8.51256 10.9268 8.21967 11.2197C7.92678 11.5126 7.92678 11.9874 8.21967 12.2803L10.4697 14.5303C10.7626 14.8232 11.2374 14.8232 11.5303 14.5303L15.7803 10.2803Z" fill="#23262A"/>
+</svg>
@@ -0,0 +1,14 @@
+name: ShieldCheckmarkFill
+category: Law and security
+sub_category: Security
+keywords:
+  - sikkerhet
+  - security
+  - beskyttelse
+  - sikkert
+  - kryptert
+  - encrypted
+  - secured
+variant: Fill
+updated_at: 29.11.2024
+created_at: 18.11.2024
@@ -9,6 +9,7 @@ keywords:
  - låst
  - kryptert
  - encrypted
+  - locked
 variant: Stroke
-updated_at: 04.12.2023
+updated_at: 29.11.2024
 created_at: 07.03.2023
@@ -9,6 +9,7 @@ keywords:
  - låst
  - kryptert
  - encrypted
+  - locked
 variant: Fill
-updated_at: 04.12.2023
+updated_at: 29.11.2024
 created_at: 07.03.2023
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 5.5C2.25 4.80964 2.80964 4.25 3.5 4.25H14.5C15.1904 4.25 15.75 4.80964 15.75 5.5V7.25H18.6615C19.1726 7.25 19.6322 7.56119 19.8221 8.03576L21.75 12.8556V16.5C21.75 17.1904 21.1904 17.75 20.5 17.75H19.75C19.75 19.1307 18.6307 20.25 17.25 20.25C15.8693 20.25 14.75 19.1307 14.75 17.75H9.75C9.75 19.1307 8.63071 20.25 7.25 20.25C5.86929 20.25 4.75 19.1307 4.75 17.75H3.5C2.80964 17.75 2.25 17.1904 2.25 16.5V5.5ZM9.25018 16.25C8.79408 15.6428 8.06791 15.25 7.25 15.25C6.43209 15.25 5.70592 15.6428 5.24982 16.25H3.75V5.75H14.25V16.25H9.25018ZM15.75 15.7498C16.1678 15.436 16.6872 15.25 17.25 15.25C18.0679 15.25 18.7941 15.6428 19.2502 16.25H20.25V13.1444L18.4922 8.75H15.75V15.7498ZM16.25 17.75C16.25 17.1977 16.6977 16.75 17.25 16.75C17.8023 16.75 18.25 17.1977 18.25 17.75C18.25 18.3023 17.8023 18.75 17.25 18.75C16.6977 18.75 16.25 18.3023 16.25 17.75ZM7.25 16.75C6.69772 16.75 6.25 17.1977 6.25 17.75C6.25 18.3023 6.69772 18.75 7.25 18.75C7.80228 18.75 8.25 18.3023 8.25 17.75C8.25 17.1977 7.80228 16.75 7.25 16.75ZM5.96968 12.9697C5.67678 13.2626 5.67678 13.7374 5.96968 14.0303C6.26257 14.3232 6.73744 14.3232 7.03034 14.0303L12.0303 9.03033C12.3232 8.73744 12.3232 8.26256 12.0303 7.96967C11.7374 7.67678 11.2626 7.67678 10.9697 7.96967L5.96968 12.9697ZM7 7.875C6.37868 7.875 5.875 8.37868 5.875 9C5.875 9.62132 6.37868 10.125 7 10.125C7.62132 10.125 8.125 9.62132 8.125 9C8.125 8.37868 7.62132 7.875 7 7.875ZM9.875 13C9.875 12.3787 10.3787 11.875 11 11.875C11.6213 11.875 12.125 12.3787 12.125 13C12.125 13.6213 11.6213 14.125 11 14.125C10.3787 14.125 9.875 13.6213 9.875 13Z" fill="#23262A"/>
+</svg>
@@ -0,0 +1,16 @@
+name: TruckPercent
+category: Transportation
+sub_category: Vehicles
+keywords:
+  - pant
+  - lån
+  - gjeld
+  - lastebil
+  - prosent
+  - mortgage
+  - loan
+  - debt
+  - percentage
+variant: Stroke
+updated_at: 27.11.2024
+created_at: 27.11.2024
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 5.5C2.25 4.80964 2.74746 4.25 3.36111 4.25H13.1389C13.7525 4.25 14.25 4.80964 14.25 5.5V15.8767C14.25 15.9222 14.2374 15.9667 14.2147 16.0061C13.9582 16.4516 13.7969 16.9589 13.7588 17.5002C13.7491 17.6379 13.6381 17.75 13.5 17.75H11C10.8619 17.75 10.7509 17.6377 10.7412 17.5C10.613 15.6837 9.09893 14.25 7.25 14.25C5.40107 14.25 3.887 15.6837 3.75879 17.5C3.74907 17.6377 3.63807 17.75 3.5 17.75H3.36111C2.74746 17.75 2.25 17.1904 2.25 16.5V5.5ZM21.0372 17.629C21.4587 17.4281 21.75 16.998 21.75 16.5V12.9037C21.75 12.8719 21.7439 12.8404 21.7321 12.8109L19.8221 8.03576C19.6322 7.56119 19.1726 7.25 18.6615 7.25H16C15.8619 7.25 15.75 7.36193 15.75 7.5V8.75V14.1913C15.75 14.3749 15.9424 14.4972 16.1161 14.4377C16.4717 14.316 16.8532 14.25 17.25 14.25C19.0723 14.25 20.5693 15.6426 20.7348 17.4216C20.7494 17.5783 20.8952 17.6967 21.0372 17.629ZM17.25 15.25C15.8693 15.25 14.75 16.3693 14.75 17.75C14.75 19.1307 15.8693 20.25 17.25 20.25C18.6307 20.25 19.75 19.1307 19.75 17.75C19.75 16.3693 18.6307 15.25 17.25 15.25ZM4.75 17.75C4.75 16.3693 5.86929 15.25 7.25 15.25C8.63071 15.25 9.75 16.3693 9.75 17.75C9.75 19.1307 8.63071 20.25 7.25 20.25C5.86929 20.25 4.75 19.1307 4.75 17.75ZM5.21968 11.9697C4.92678 12.2626 4.92678 12.7374 5.21968 13.0303C5.51257 13.3232 5.98744 13.3232 6.28034 13.0303L11.2803 8.03033C11.5732 7.73744 11.5732 7.26256 11.2803 6.96967C10.9874 6.67678 10.5126 6.67678 10.2197 6.96967L5.21968 11.9697ZM6.25 6.875C5.62868 6.875 5.125 7.37868 5.125 8C5.125 8.62132 5.62868 9.125 6.25 9.125C6.87132 9.125 7.375 8.62132 7.375 8C7.375 7.37868 6.87132 6.875 6.25 6.875ZM9.125 12C9.125 11.3787 9.62868 10.875 10.25 10.875C10.8713 10.875 11.375 11.3787 11.375 12C11.375 12.6213 10.8713 13.125 10.25 13.125C9.62868 13.125 9.125 12.6213 9.125 12Z" fill="#23262A"/>
+</svg>
@@ -0,0 +1,16 @@
+name: TruckPercentFill
+category: Transportation
+sub_category: Vehicles
+keywords:
+  - pant
+  - lån
+  - gjeld
+  - lastebil
+  - prosent
+  - mortgage
+  - loan
+  - debt
+  - percentage
+variant: Fill
+updated_at: 27.11.2024
+created_at: 27.11.2024
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-icons",
-  "version": "7.5.2",
+  "version": "7.7.0",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -1,5 +1,11 @@
 # @navikt/aksel-stylelint

+## 7.7.0
+
+## 7.6.0
+
+## 7.5.3
+
 ## 7.5.2

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

+## 7.7.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@7.7.0
+
+## 7.6.0
+
+### Patch Changes
+
+- Updated dependencies [[`dce149f`](https://github.com/navikt/aksel/commit/dce149fca40147440148371db846fb452ab7b5f2), [`34538a1`](https://github.com/navikt/aksel/commit/34538a1cbe30e0c951477cb4a379d648c93733fd), [`641276b`](https://github.com/navikt/aksel/commit/641276bb44919302d19bbc76d30452a5c15536af), [`9f088a9`](https://github.com/navikt/aksel/commit/9f088a93733a038bd0c4f4cd70f7fd3894ee9997), [`6d74cb7`](https://github.com/navikt/aksel/commit/6d74cb72ad522a73a926bbfbd2eaf526388c4826), [`fa2904d`](https://github.com/navikt/aksel/commit/fa2904d54b282da06fc04cfc99be5dd0b3e8d352)]:
+  - @navikt/ds-css@7.6.0
+
+## 7.5.3
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@7.5.3
+
 ## 7.5.2

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

+## 7.7.0
+
+## 7.6.0
+
+### Minor Changes
+
+- ReadMore: Added size 'large'. ([#3372](https://github.com/navikt/aksel/pull/3372))
+
+### Patch Changes
+
+- Select: Now shows focus-outline when ':focus' is set trough pointer or label in all browsers. Chrome and Firefox handles `:focus-visible` differently for 'select', previously causing outline-border not to show in Firefox. ([#3415](https://github.com/navikt/aksel/pull/3415))
+
+- Modal: Don't add scroll shadow when polyfilled ([#3408](https://github.com/navikt/aksel/pull/3408))
+
+- Modal: Now shows up while screensharing with Vergic ([#3407](https://github.com/navikt/aksel/pull/3407))
+
+- FileUpload: Remove browser styling from FileUpload.Item when used in list. ([#3413](https://github.com/navikt/aksel/pull/3413))
+
+- Combobox: Single-select now shows cursor closer to selected item. ([#3384](https://github.com/navikt/aksel/pull/3384))
+
+## 7.5.3
+
 ## 7.5.2

 ### Patch Changes
@@ -3,12 +3,7 @@
  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);
+  box-shadow: var(--ax-shadow-dialog);
  transition: transform 250ms cubic-bezier(0, 0, 0, 1) allow-discrete;

  &[data-state="open"] {
@@ -1,7 +1,7 @@
 .navds-alert {
  border-radius: var(--ax-border-radius-xlarge);
  border: 1px solid;
-  padding: var(--ax-spacing-4);
+  padding: var(--ax-spacing-4) var(--ax-spacing-5);
  display: flex;
  gap: var(--ax-spacing-3);
  align-items: center;
@@ -25,7 +25,7 @@
 }

 .navds-alert--small {
-  padding: var(--ax-spacing-2) var(--ax-spacing-4);
+  padding: var(--ax-spacing-3) var(--ax-spacing-4);
  gap: var(--ax-spacing-2);

  > .navds-alert__icon {
@@ -1,4 +1,9 @@
 .navds-button {
+  --__axc-button-icon-size: 1.5rem;
+  --__axc-button-icon-margin: -4px;
+  --__axc-button-border-color: transparent;
+  --__axc-button-border-width: 2px;
+
  padding: var(--ax-spacing-3) var(--ax-spacing-5);
  border-radius: var(--ax-border-radius-medium);
  display: inline-flex;
@@ -9,6 +14,18 @@
  align-items: center;
  justify-content: center;
  gap: var(--ax-spacing-2);
+  box-shadow: inset 0 0 0 var(--__axc-button-border-width) var(--__axc-button-border-color);
+
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+  }
+}
+
+.navds-button--small,
+.navds-button--xsmall {
+  --__axc-button-icon-margin: -2px;
+  --__axc-button-icon-size: 1.25rem;
 }

 .navds-button--small {
@@ -24,19 +41,14 @@

 .navds-button--icon-only {
  padding: var(--ax-spacing-3);
-}

-.navds-button--small.navds-button--icon-only {
-  padding: var(--ax-spacing-1);
-}
+  &.navds-button--small {
+    padding: var(--ax-spacing-1);
+  }

-.navds-button--xsmall.navds-button--icon-only {
-  padding: var(--ax-spacing-05);
-}
-
-.navds-button:focus-visible {
-  outline: 2px solid var(--ax-border-focus);
-  outline-offset: 2px;
+  &.navds-button--xsmall {
+    padding: var(--ax-spacing-05);
+  }
 }

@supports not selector(:focus-visible) {
@@ -46,224 +58,197 @@
 }

 .navds-button__icon {
-  font-size: 1.5rem;
+  font-size: var(--__axc-button-icon-size);
  display: flex;

-  --__axc-button-icon-margin: -4px;
-}
+  &:first-child {
+    margin-left: var(--__axc-button-icon-margin);
+  }

-.navds-button__icon:first-child {
-  margin-left: var(--__axc-button-icon-margin);
-}
+  &:last-child {
+    margin-right: 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;
+  &: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;
+  &:hover {
+    background-color: var(--ax-bg-accent-strong-hover);
  }

-  .navds-button.navds-button--primary span {
-    forced-color-adjust: none;
+  &:active {
+    background-color: var(--ax-bg-accent-strong-pressed);
  }
-}

-.navds-button--primary:hover {
-  background-color: var(--ax-bg-accent-strong-hover);
-}
+  &:is(:disabled, .navds-button--disabled) {
+    background-color: var(--ax-bg-accent-strong);
+  }

-.navds-button--primary:active {
-  background-color: var(--ax-bg-accent-strong-pressed);
-}
+  @media (forced-colors: active) {
+    &:not(:disabled) {
+      background-color: highlight;
+      color: highlighttext;
+    }

-.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);
+    & span {
+      forced-color-adjust: none;
+    }
+  }
 }

 /*************************
 * .navds-button--primary-neutral *
 *************************/
-
 .navds-button--primary-neutral {
  background-color: var(--ax-bg-neutral-strong);
  color: var(--ax-text-neutral-contrast);
-}

-.navds-button--primary-neutral:hover {
-  background-color: var(--ax-bg-neutral-strong-hover);
-}
+  &:hover {
+    background-color: var(--ax-bg-neutral-strong-hover);
+  }

-.navds-button--primary-neutral:active {
-  background-color: var(--ax-bg-neutral-strong-pressed);
-}
+  &: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);
+  &:is(:disabled, .navds-button--disabled) {
+    background-color: var(--ax-bg-neutral-strong);
+  }
 }

 /**************************
 * .navds-button--secondary *
 **************************/
-
 .navds-button--secondary {
+  --__axc-button-border-color: var(--ax-border-accent);
+
  background-color: transparent;
  color: var(--ax-text-accent);
-  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-text-accent-strong);
-  box-shadow: inset 0 0 0 2px var(--ax-bg-accent-strong-hover);
-}
+  &:hover {
+    --__axc-button-border-color: var(--ax-border-accent-strong);

-.navds-button--secondary:active {
-  background-color: var(--ax-bg-accent-strong-pressed);
-  color: var(--ax-text-accent-contrast);
-  box-shadow: none;
-}
+    background-color: var(--ax-bg-accent-moderate-hoverA);
+    color: var(--ax-text-accent-strong);
+  }

-.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);
+  &:active {
+    --__axc-button-border-color: transparent;
+
+    background-color: var(--ax-bg-accent-strong-pressed);
+    color: var(--ax-text-accent-contrast);
+  }
+
+  &:is(:disabled, .navds-button--disabled) {
+    --__axc-button-border-color: var(--ax-border-accent);
+
+    background-color: transparent;
+    color: var(--ax-text-accent);
+  }
 }

 /**************************
 * .navds-button--secondary-neutral *
 **************************/
-
 .navds-button--secondary-neutral {
+  --__axc-button-border-color: var(--ax-border-default);
+
  background-color: transparent;
-  color: var(--ax-text-neutral);
-  box-shadow: inset 0 0 0 2px var(--ax-border-neutral);
-}
-
-.navds-button--secondary-neutral:hover {
-  background-color: var(--ax-bg-neutral-moderate-hoverA);
-  color: var(--ax-text-neutral-strong);
-}
-
-.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);
+
+  &:hover {
+    --__axc-button-border-color: var(--ax-border-strong);
+
+    background-color: var(--ax-bg-neutral-moderate-hoverA);
+  }
+
+  &:active {
+    --__axc-button-border-color: transparent;
+
+    color: var(--ax-text-neutral-contrast);
+    background-color: var(--ax-bg-neutral-strong-pressed);
+  }
+
+  &:is(:disabled, .navds-button--disabled) {
+    --__axc-button-border-color: var(--ax-border-neutral);
+
+    color: var(--ax-text-default);
+    background-color: transparent;
+  }
 }

 /****************************
 * .navds-button--tertiary *
 ****************************/
-
 .navds-button--tertiary {
  background-color: transparent;
  color: var(--ax-text-accent);
-}

-.navds-button--tertiary:hover {
-  background-color: var(--ax-bg-accent-hoverA);
-  color: var(--ax-text-accent-strong);
-}
+  &:hover {
+    background-color: var(--ax-bg-accent-moderate-hoverA);
+    color: var(--ax-text-accent-strong);
+  }

-.navds-button--tertiary:active {
-  background-color: var(--ax-bg-accent-strong-pressed);
-  color: var(--ax-text-accent-contrast);
-}
+  &: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;
+  &:is(:disabled, .navds-button--disabled) {
+    color: var(--ax-text-accent);
+    background-color: transparent;
+  }
 }

 /****************************
 * .navds-button--tertiary-neutral *
 ****************************/
-
 .navds-button--tertiary-neutral {
-  color: var(--ax-text-neutral);
-}
-
-.navds-button--tertiary-neutral:hover {
-  background-color: var(--ax-bg-neutral-hoverA);
-  color: var(--ax-text-neutral-strong);
-}
-
-.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) {
+  background-color: transparent;
  color: var(--ax-text-default);
-  background: none;
-  box-shadow: none;
+
+  &:hover {
+    background-color: var(--ax-bg-neutral-moderate-hoverA);
+  }
+
+  &:active {
+    background-color: var(--ax-bg-neutral-strong-pressed);
+    color: var(--ax-text-neutral-contrast);
+  }
+
+  &:is(:disabled, .navds-button--disabled) {
+    color: var(--ax-text-default);
+    background-color: transparent;
+  }
 }

 /*************************
 * .navds-button--danger *
 *************************/
-
 .navds-button--danger {
  background-color: var(--ax-bg-danger-strong);
  color: var(--ax-text-danger-contrast);
-}

-.navds-button--danger:hover {
-  background-color: var(--ax-bg-danger-strong-hover);
-}
+  &:hover {
+    background-color: var(--ax-bg-danger-strong-hover);
+  }

-.navds-button--danger:active {
-  background-color: var(--ax-bg-danger-strong-pressed);
-}
+  &: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);
+  &:is(:disabled, .navds-button--disabled) {
+    background-color: var(--ax-bg-danger-strong);
+  }
 }

 /**************************
@@ -300,14 +285,14 @@
    background-color: ButtonFace;
  }

-  .navds-button:hover {
+  .navds-button:not(:disabled):hover {
    background-color: highlighttext;
    border-color: highlight;
    color: highlight;
    box-shadow: none;
  }

-  .navds-button:hover span {
+  .navds-button:not(:disabled):hover span {
    forced-color-adjust: none;
  }

@@ -54,7 +54,7 @@
 }

 .navds-chat__bubble {
-  padding: var(--ax-spacing-4);
+  padding: var(--ax-spacing-4) var(--ax-spacing-5);
  width: fit-content;
  background-color: var(--ax-bg-raised);
  display: flex;
@@ -66,7 +66,7 @@
 }

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

 /* -------------------------- Chat bubble variants -------------------------- */
@@ -33,6 +33,12 @@
  }
 }

+.navds-chips--readonly {
+  .navds-chips__chip {
+    background-color: var(--ax-bg-neutral-moderateA);
+  }
+}
+
 .navds-chips--small {
  .navds-chips__chip {
    min-height: 1.5rem;
@@ -1,108 +1,140 @@
 .navds-date {
-  padding: var(--a-spacing-4) var(--a-spacing-3);
+  padding: var(--ax-spacing-4) var(--ax-spacing-3);
+
+  .rdp-day_range_middle {
+    &.rdp-day_disabled {
+      color: var(--ax-text-default);
+      background: var(--ax-bg-neutral-moderateA);
+    }
+
+    &.rdp-day_selected {
+      background-color: var(--ax-bg-accent-moderateA);
+      box-shadow: inset 0 0 0 1px var(--ax-border-accent-subtleA);
+      color: var(--ax-text-default);
+    }
+  }
+
+  .rdp-month,
+  &.rdp-month {
+    display: grid;
+    gap: var(--ax-spacing-5);
+  }
+
+  .navds-date__caption-label {
+    text-transform: capitalize;
+  }
+
+  .rdp-head_cell {
+    text-transform: capitalize;
+    font-size: var(--ax-font-size-small);
+  }
+
+  .rdp-button {
+    all: unset;
+    display: block;
+    width: 2.5rem;
+    height: 2.5rem;
+    text-align: center;
+    border-radius: var(--ax-border-radius-medium);
+  }
+
+  .rdp-day_range_start {
+    border-radius: var(--ax-border-radius-xlarge) var(--ax-border-radius-medium) var(--ax-border-radius-medium)
+      var(--ax-border-radius-xlarge);
+  }
+
+  .rdp-day_range_end:not(.rdp-day_range_start) {
+    border-radius: var(--ax-border-radius-medium) var(--ax-border-radius-xlarge) var(--ax-border-radius-xlarge)
+      var(--ax-border-radius-medium);
+  }
+
+  .rdp-day_range_start.rdp-day_range_end {
+    border-radius: var(--ax-border-radius-xlarge);
+  }
+
+  .navds-date__field {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    position: relative;
+  }
+
+  .rdp-day_selected,
+  .navds-monthpicker__month--selected {
+    color: var(--ax-text-accent-contrast);
+    background: var(--ax-bg-accent-strong-pressed);
+    cursor: pointer;
+  }
+
+  .rdp-day_disabled {
+    cursor: not-allowed;
+    text-decoration: line-through;
+    background-color: var(--ax-bg-neutral-moderateA);
+    color: var(--ax-text-subtle);
+  }
+
+  .rdp-button:where(:not(.rdp-day_selected, [disabled])):hover,
+  .navds-date__month-button:where(:not(.rdp-day_selected, [disabled])):hover {
+    background: var(--ax-bg-accent-moderate-hoverA);
+    cursor: pointer;
+  }
+
+  .rdp-day_today {
+    position: relative;
+
+    &::before {
+      width: 6px;
+      height: 6px;
+      display: block;
+      background-color: var(--ax-text-accent);
+      border-radius: var(--ax-border-radius-full);
+      content: "";
+      position: absolute;
+      bottom: 5px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    &.rdp-day_selected:not(.rdp-day_range_middle),
+    &:active {
+      &::before {
+        background-color: var(--ax-text-accent-contrast);
+      }
+    }
+  }
+
+  .rdp-day_outside {
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .navds-date__modal & {
+    padding: 0;
+  }
+
+  .navds-date__modal-body > & {
+    padding: 0;
+  }
 }

-.navds-date .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);
+.navds-date__caption {
  display: flex;
+  justify-content: space-between;
  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);
+  gap: var(--ax-spacing-1);
+  padding-inline: var(--ax-spacing-1);
 }

-.navds-date .rdp-weeknumber.rdp-button {
+.navds-date__caption-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;
+  color: var(--ax-text-default);
 }

 .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;
@@ -110,24 +142,10 @@
  width: 3rem;
  height: 3rem;
  text-transform: capitalize;
-  border-radius: var(--a-border-radius-medium);
+  border-radius: var(--ax-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;
@@ -137,13 +155,69 @@
 .navds-date__standalone-wrapper {
  height: fit-content;
  width: fit-content;
+
+  .rdp-cell > button.rdp-day,
+  button.navds-date__month-button {
+    &:focus-visible {
+      outline: 2px solid var(--ax-border-focus);
+      outline-offset: 1px;
+    }
+
+    &:active:not(:disabled) {
+      color: var(--ax-text-accent-contrast);
+      background-color: var(--ax-bg-accent-strong-pressed);
+    }
+  }
 }

-.navds-date .navds-date__field {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  position: relative;
+.navds-date__field-input {
+  &.navds-text-field__input {
+    padding-right: var(--ax-spacing-12);
+  }
+
+  .navds-form-field--small & {
+    padding-right: var(--ax-spacing-8);
+  }
+}
+
+.navds-date__field-button {
+  position: absolute;
+  right: 0.0625rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--ax-text-default);
+  display: inline-flex;
+  cursor: pointer;
+  margin: 0;
+  text-decoration: none;
+  border: none;
+  background: none;
+  border-radius: calc(var(--ax-border-radius-medium) - 1px);
+  padding: var(--ax-spacing-3);
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+  height: calc(100% - 0.125rem);
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+
+  .navds-form-field--small & {
+    padding: var(--ax-spacing-1);
+  }
+
+  .navds-form-field--disabled & {
+    opacity: 1;
+    cursor: not-allowed;
+  }
+
+  /* Readonly */
+  .navds-date__field--readonly & {
+    cursor: default;
+  }
+
+  &:focus-visible {
+    outline-color: var(--ax-border-focus);
+  }
 }

 .navds-date__field-wrapper {
@@ -153,146 +227,23 @@
  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);
+  gap: var(--ax-spacing-05);
+}
+
+.navds-date__weeknumber {
+  --__axc-button-border-width: 1px;
+}
+
+.navds-date__weeknumber-number {
+  font-size: 0.875rem;
+  color: var(--ax-text-subtle);
+
+  .navds-date__weeknumber:active & {
+    color: var(--ax-text-neutral-contrast);
+  }
 }

 .navds-date__week-wrapper {
@@ -303,37 +254,25 @@
  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;
+  padding: var(--ax-spacing-4);
+  gap: var(--ax-spacing-2);
 }

@media (min-width: 480px) {
  .navds-date {
-    padding: var(--a-spacing-5) var(--a-spacing-4);
+    padding: var(--ax-spacing-5) var(--ax-spacing-4);
  }

  .navds-date__modal-body {
-    padding: var(--a-spacing-6);
+    padding: var(--ax-spacing-6);
  }

  .navds-date__caption {
-    gap: var(--a-spacing-2);
+    gap: var(--ax-spacing-2);
  }

  .navds-date .rdp-button,
@@ -1,7 +1,7 @@
 .navds-expansioncard {
  --__axc-expansioncard-border-radius: calc(var(--ax-border-radius-xlarge) - 1px);
  --__axc-expansioncard-padding-block: var(--ax-spacing-4);
-  --__axc-expansioncard-padding-inline: var(--ax-spacing-6);
+  --__axc-expansioncard-padding-inline: var(--ax-spacing-5);

  border-radius: var(--ax-border-radius-xlarge);
  background-color: var(--ax-bg-raised);
@@ -16,8 +16,8 @@

 /* ------------------------ ExpansionCard Small-size ------------------------ */
 .navds-expansioncard--small {
-  --__axc-expansioncard-padding-block: var(--ax-spacing-3);
  --__axc-expansioncard-padding-inline: var(--ax-spacing-4);
+  --__axc-expansioncard-padding-block: var(--ax-spacing-3);

  & > .navds-expansioncard__header .navds-expansioncard__title--small {
    margin-top: var(--ax-spacing-05);
@@ -31,10 +31,6 @@
    min-height: 2rem;
    min-width: 2rem;
  }
-
-  & .navds-expansioncard__content {
-    --__axc-expansioncard-padding-block: var(--ax-spacing-4);
-  }
 }

 /* -------------------------- ExpansionCard Header -------------------------- */
@@ -144,8 +140,6 @@

 /* -------------------------- ExpansionCard Content ------------------------- */
 .navds-expansioncard__content {
-  --__axc-expansioncard-padding-block: var(--ax-spacing-5);
-
  border-end-end-radius: var(--__axc-expansioncard-border-radius);
  border-end-start-radius: var(--__axc-expansioncard-border-radius);
  padding-inline: var(--__axc-expansioncard-padding-inline);
@@ -161,7 +155,7 @@
  &[data-open="true"] {
    grid-template-rows: 1fr;
    visibility: visible;
-    padding-block: var(--__axc-expansioncard-padding-block) var(--__axc-expansioncard-padding-inline);
+    padding-block: var(--__axc-expansioncard-padding-block);

    & .navds-expansioncard__content-inner {
      opacity: 1;
@@ -1,121 +1,157 @@
 .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;
+  --__axc-combobox-icon-size: 1.5rem;
+  --__axc-combobox-wrapper-inner-padding: var(--ax-spacing-2);
+  --__axc-combobox-list-item-padding-block: var(--ax-spacing-3);
+  --__axc-combobox-list-item-padding-inline: var(--ax-spacing-3);
+  --__axc-combobox-border-width: 1px;
+  --__axc-combobox-input-height: 2rem;

  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
+  border-radius: var(--ax-border-radius-medium);
+}
+
+.navds-form-field:not(:is(.navds-combobox--disabled, .navds-combobox--readonly)) {
+  & .navds-combobox__wrapper:hover {
+    border-color: var(--ax-border-focus);
+  }
 }

 .navds-form-field--small .navds-combobox__wrapper {
-  --__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;
+  --__axc-combobox-icon-size: 1.25rem;
+  --__axc-combobox-wrapper-inner-padding: var(--ax-spacing-1);
+  --__axc-combobox-list-item-padding-block: var(--ax-spacing-1-alt);
+  --__axc-combobox-list-item-padding-inline: var(--ax-spacing-2);
+  --__axc-combobox-input-height: 1.5rem;
 }

 .navds-combobox--disabled {
  opacity: 0.3;
-}

-.navds-combobox--disabled .navds-combobox__wrapper *:hover {
-  cursor: not-allowed;
-}
+  & .navds-combobox__wrapper {
+    & *:hover {
+      cursor: not-allowed;
+    }
+  }

-.navds-combobox--disabled .navds-text-field__input {
-  border: 1px solid var(--a-border-default);
-}
+  & .navds-combobox__selected-options {
+    pointer-events: none;
+  }

-.navds-combobox--disabled .navds-combobox__selected-options {
-  pointer-events: none;
+  & .navds-combobox--readonly {
+    pointer-events: none;
+  }
 }

 .navds-combobox--readonly {
  pointer-events: none;
-}

-.navds-combobox--readonly .navds-combobox__button-toggle-list {
-  color: var(--a-gray-500);
-}
+  & .navds-combobox__selected-options {
+    & .navds-chips__chip {
+      background-color: var(--ax-bg-neutral-moderateA);
+    }
+  }

-.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-toggle-list {
+    color: var(--ax-bg-neutral-moderate);
+  }
+
+  & .navds-combobox__wrapper {
+    border-color: var(--ax-border-subtle);
+    overflow: clip;
+  }
+
+  & .navds-text-field__input,
+  & .navds-combobox__input {
+    background-color: var(--ax-bg-neutral-moderate);
+  }
 }

 .navds-combobox__button-clear svg,
 .navds-combobox__button-toggle-list svg,
 .navds-combobox__list svg {
-  width: var(--__ac-combobox-icon-size);
-  height: var(--__ac-combobox-icon-size);
+  width: var(--__axc-combobox-icon-size);
+  height: var(--__axc-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 {
+  border: 1px solid var(--ax-border-default);
+  border-radius: var(--ax-border-radius-medium);
+
+  &:has(.navds-combobox__input:focus-visible) {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+    border-color: var(--ax-border-focus);
+  }
+
+  &:has(.navds-combobox__input:focus-visible).navds-combobox__wrapper-inner--virtually-unfocused {
+    outline: none;
+    border-color: var(--ax-border-default);
+  }
+
+  &.navds-text-field__input {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding-block: calc(var(--__axc-combobox-wrapper-inner-padding) - var(--__axc-combobox-border-width));
+    padding-inline: var(--__axc-combobox-wrapper-inner-padding);
+  }
+
+  & > :first-child {
+    flex: 2;
+  }
+
+  & > :last-child {
+    display: flex;
+    flex-flow: row nowrap;
+  }
+
+  &:hover {
+    cursor: text;
+  }
 }

-.navds-combobox__wrapper-inner > :first-child {
-  flex: 2;
-}
+.navds-combobox--error {
+  & .navds-combobox__wrapper-inner {
+    border-color: var(--ax-border-danger);
+    box-shadow: 0 0 0 1px var(--ax-border-danger);

-.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);
+    &:has(.navds-combobox__input:focus-visible) {
+      border-color: var(--ax-border-danger);
+    }
+  }
 }

 .navds-combobox__selected-options {
-  gap: var(--__ac-combobox-wrapper-inner-padding);
+  gap: 0;
  align-items: center;
-}

-.navds-combobox__selected-options > li {
-  margin: auto 0;
-  border-radius: var(--a-border-radius-full);
-}
+  & > li {
+    margin: auto 0;
+    border-radius: var(--ax-border-radius-full);
+  }

-.navds-combobox__selected-options > li:last-of-type {
-  display: flex;
-  flex: 1;
+  & > li:last-of-type {
+    display: flex;
+    flex: 1;
+  }
+
+  &[data-type="multiple"] {
+    gap: var(--__axc-combobox-wrapper-inner-padding);
+  }
 }

 .navds-combobox__selected-options--no-bg {
  font-family: inherit;
-  font-size: var(--a-font-size-large);
-  font-weight: var(--a-font-weight-regular);
+  font-size: var(--ax-font-size-large);
+  font-weight: var(--ax-font-weight-regular);
  letter-spacing: 0;
-  line-height: var(--a-font-line-height-large);
+  line-height: var(--ax-font-line-height-large);
  margin: 0;
  padding-left: 0.25rem;
 }
@@ -129,68 +165,47 @@
  border: none;
  padding: 0;
  margin: 0;
-  margin-left: var(--a-spacing-1);
  min-width: 10ch;
  width: 100%;
-  height: var(--__ac-combobox-input-height);
+  height: var(--__axc-combobox-input-height);
+  background: var(--ax-bg-input);
+
+  &:focus-visible {
+    outline: 0;
+    border: none;
+  }
+
+  .navds-combobox__selected-options > li:only-child > & {
+    margin-left: var(--ax-spacing-1);
+  }
 }

 .navds-combobox__input--hide-caret {
  caret-color: transparent;
 }

-.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__input {
+    &:focus {
+      outline: none;
+      border: 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) {
+      outline: none;
+    }

-  .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;
+    &:has(.navds-combobox__input:focus).navds-combobox__wrapper-inner--virtually-unfocused {
+      outline: none;
+    }
  }
 }

 .navds-combobox__button-clear {
-  border-radius: var(--a-border-radius-medium);
-  color: var(--ac-combobox-clear-icon, var(--a-text-subtle));
+  border-radius: var(--ax-border-radius-medium);
+  color: var(--ax-text-subtle);
  display: flex;
  justify-content: center;
  align-items: center;
@@ -206,8 +221,8 @@
 }

 .navds-combobox__button-toggle-list {
-  border-radius: var(--a-border-radius-medium);
-  color: var(--a-text-default);
+  border-radius: var(--ax-border-radius-medium);
+  color: var(--ax-text-default);
  display: flex;
  justify-content: center;
  align-items: center;
@@ -218,31 +233,14 @@
  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,
+.navds-combobox__button-toggle-list {
+  &:hover {
+    color: var(--ax-text-accent);

-.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;
+    &:active {
+      color: var(--ax-text-accent-strong);
+    }
  }
 }

@@ -250,34 +248,30 @@

 .navds-combobox__list {
  max-height: 290px;
-  overflow-y: auto;
+  overflow: clip;
  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));
+  z-index: 10;
+  top: calc(100% + var(--ax-spacing-2));
+  border: 1px solid var(--ax-border-subtleA);
  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));
+  border-radius: var(--ax-border-radius-large);
+  background-color: var(--ax-bg-raised);
+  color: var(--ax-text-default);
  overscroll-behavior: contain;
+  box-shadow: var(--ax-shadow-dialog);
+
+  & .navds-combobox__list-options {
+    overflow-y: auto;
+  }
 }

 .navds-combobox__list--closed {
  display: none;
 }

-.navds-combobox__list_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,
@@ -285,28 +279,32 @@
 .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));
+  padding-block: var(--__axc-combobox-list-item-padding-block);
+  padding-inline: var(--__axc-combobox-list-item-padding-inline);
+  border-radius: var(--ax-border-radius-medium);
+  border: 0;
+  margin-inline: var(--ax-spacing-2);
+  margin-block: var(--ax-spacing-1);
+  scroll-margin-block: 8px; /* outline + outline-offset + margin-block */
+}
+
+.navds-combobox__list-item--no-options {
+  margin: 0;
 }

 .navds-combobox__list-item--loading {
  justify-content: center;
-  background-color: var(--ac-combobox-list-item-loading-bg, var(--a-surface-default));
+  margin: 0;
 }

 .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;
+  background-color: var(--ax-bg-neutral-moderateA);
+  margin: 0;
+  border-radius: 0;
+  border-bottom: 1px solid var(--ax-border-neutral-subtle);
+  padding-block: var(--ax-spacing-2);
+  line-height: var(--ax-font-line-height-large);
 }

 /* ul-list and selectable li-items */
@@ -314,70 +312,82 @@
 .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;
+  align-items: stretch;
+  padding: 0;
+  padding-block: var(--ax-spacing-1);
 }

-.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));
+.navds-combobox__list-item--focus {
  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);
+  outline: 2px solid var(--ax-border-focus);
+  outline-offset: 2px;
 }

-.navds-combobox__list-item[data-no-focus="true"] {
-  cursor: not-allowed;
-  opacity: 0.4;
+.navds-combobox__list-item {
+  user-select: none;
+
+  &[data-no-focus="true"] {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+
+  & mark {
+    background-color: transparent;
+    font-weight: var(--ax-font-weight-bold);
+  }
+
+  & svg {
+    color: var(--ax-text-accent);
+  }
 }

 .navds-combobox__list-item--selected {
-  background-color: var(--ac-combobox-list-item-selected-bg, var(--a-surface-selected));
-}
+  background-color: var(--ax-bg-accent-moderate-pressedA);

-.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));
+  & p {
+    font-weight: var(--ax-font-weight-bold);
+  }
 }

 .navds-combobox__list-item--new-option {
-  border-bottom: 1px solid var(--a-border-divider);
-  background: var(--a-surface-neutral-subtle);
+  border-bottom: 1px solid var(--ax-border-accent-subtleA);
+  border-radius: 0;
+  background: var(--ax-bg-accent-moderateA);
  cursor: pointer;
  justify-content: flex-start;
  gap: 0.25rem;
-}
+  margin: 0;
+  margin-block: calc(var(--ax-spacing-1) * -1);
+  padding-block: var(--ax-spacing-4);

-.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);
+  & svg {
+    color: var(--ax-text-default);
+  }
+
+  &:only-child {
+    border: none;
+  }
 }

 .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);
-}
+  border-radius: calc(var(--ax-border-radius-large) - 1px) calc(var(--ax-border-radius-large) - 1px) 0 0;

-.navds-combobox__list-item mark {
-  background-color: transparent;
-  font-weight: bold;
+  /* TODO: new option should get a wrapper div later to
+* style it properly with a nice rounded border radius
+* */
+  outline: 2px solid var(--ax-border-focus);
+  outline-offset: -2px;
+
+  &:only-child {
+    border-radius: calc(var(--ax-border-radius-large) - 1px);
+  }
 }

 /* Mobile */
-
@media (max-width: 479px) {
  .navds-combobox__button-toggle-list {
    right: 0.5rem;
@@ -390,7 +400,7 @@
  }

  .navds-combobox__selected-options {
-    gap: var(--a-spacing-1);
+    gap: var(--ax-spacing-1);
  }
 }

@@ -416,12 +426,16 @@
  }

  .navds-combobox__list-item--selected {
-    background-color: selecteditem;
+    background-color: highlight;
    color: selecteditemtext;
-  }

-  .navds-combobox__list-item--selected > * {
-    forced-color-adjust: none;
+    & * {
+      color: black;
+    }
+
+    & > * {
+      forced-color-adjust: none;
+    }
  }

  .navds-combobox__list-item--selected.navds-combobox__list-item--focus,
@@ -436,6 +450,30 @@

  .navds-combobox__list-item--new-option--focus {
    outline: 2px solid highlight;
-    outline-offset: -3px;
+    outline-offset: 0;
+  }
+
+  .navds-combobox--disabled {
+    opacity: 1;
+
+    & * {
+      border-color: graytext;
+      color: graytext;
+      opacity: 1;
+    }
+  }
+
+  .navds-combobox__list-item--new-option {
+    svg {
+      color: canvastext;
+    }
+
+    &:hover {
+      color: highlight;
+
+      svg {
+        color: highlight;
+      }
+    }
  }
 }
@@ -1,6 +1,6 @@
 .navds-error-summary {
  background-color: var(--ax-bg-default);
-  padding: var(--ax-spacing-5);
+  padding: var(--ax-spacing-4) var(--ax-spacing-5);
  border: 4px solid var(--ax-border-danger);
  border-radius: var(--ax-border-radius-xlarge);
  outline-offset: 2px;
@@ -18,7 +18,7 @@
 }

 .navds-error-summary--small {
-  padding: var(--ax-spacing-3);
+  padding: var(--ax-spacing-3) var(--ax-spacing-4);

  & .navds-error-summary__heading {
    scroll-margin-top: var(--ax-spacing-4);
@@ -1,16 +1,6 @@
-/* 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 {
  --__axc-dropzone-background: var(--ax-bg-input);
-  --__axc-dropzone-padding: var(--ax-spacing-6);
  --__axc-dropzone-icon-padding: var(--ax-spacing-2);
  --__axc-dropzone-animation-length-long: 400ms;
  --__axc-dropzone-animation-length-short: 250ms;
@@ -24,7 +14,7 @@
  flex-direction: column;
  gap: var(--ax-spacing-4);
  text-align: center;
-  padding: var(--__axc-dropzone-padding);
+  padding: var(--ax-spacing-4) var(--ax-spacing-5);
  border: 1px dashed var(--ax-border-default);
  border-radius: var(--ax-border-radius-xlarge);
  background-color: var(--__axc-dropzone-background);
@@ -104,7 +94,7 @@
 }

 .navds-dropzone__area-release {
-  top: var(--__axc-dropzone-padding);
+  top: var(--ax-spacing-4);
  display: grid;
  position: absolute;
  z-index: 1;
@@ -154,13 +144,21 @@
 }

 /* ----------------------------- FileUpload Item ---------------------------- */
+.navds-file-upload :is(ul, li),
+ul:has(> li.navds-file-item),
+li.navds-file-item {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
 .navds-file-item__inner {
  background-color: var(--ax-bg-raised);
  border: 1px solid var(--ax-border-subtleA);
  outline-offset: -1px;
  transition: outline-color 250ms cubic-bezier(0, 0.3, 0.15, 1);
  border-radius: var(--ax-border-radius-xlarge);
-  padding: var(--ax-spacing-3);
+  padding: var(--ax-spacing-3) var(--ax-spacing-4);
  display: flex;
  gap: var(--ax-spacing-3);
  align-items: flex-start;
@@ -176,6 +174,7 @@
  border-radius: var(--ax-border-radius-full);
  min-height: 2.5rem;
  min-width: 2.5rem;
+  margin-top: var(--ax-spacing-05);
  display: grid;
  place-content: center;
  transition: background-color 250ms cubic-bezier(0, 0.3, 0.15, 1);
@@ -51,7 +51,7 @@
 .navds-form-progress__stepper {
  border: 1px solid var(--ax-border-subtle);
  border-radius: var(--ax-border-radius-large);
-  padding: var(--ax-spacing-4);
+  padding: var(--ax-spacing-4) var(--ax-spacing-5);
  margin-top: var(--ax-spacing-1);
  background: var(--ax-bg-raised);
 }
@@ -31,7 +31,7 @@
 }

 .navds-form-summary__answers {
-  padding: var(--ax-spacing-5) var(--ax-spacing-6) var(--ax-spacing-6);
+  padding: var(--ax-spacing-4) var(--ax-spacing-5);
  margin: 0;
 }

@@ -72,9 +72,10 @@

 .navds-form-summary__value .navds-form-summary__answers {
  margin-top: var(--ax-spacing-2);
-  padding: var(--ax-spacing-4);
+  padding: var(--ax-spacing-4) var(--ax-spacing-5);
  background: var(--ax-bg-info-moderateA);
  border-radius: var(--ax-border-radius-large);
+  border: 1px solid var(--ax-border-info-subtleA);

  & .navds-form-summary__answer {
    border-color: var(--ax-border-info-subtleA);
@@ -1,16 +1,14 @@
-@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);
+@import "./fieldset.darkside.css";
+@import "./file-upload.darkside.css";
+@import "./form.darkside.css";
+@import "./error-summary.darkside.css";
+@import "./confirmation-panel.darkside.css";
+@import "./radio-checkbox.darkside.css";
+@import "./select.darkside.css";
+@import "./switch.darkside.css";
+@import "./text-field.darkside.css";
+@import "./textarea.darkside.css";
+@import "./search.darkside.css";
+@import "./combobox.darkside.css";
+@import "./form-summary.darkside.css";
+@import "./form-progress.darkside.css";
@@ -1,19 +1,3 @@
-[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;
@@ -25,204 +9,142 @@
  width: 100%;
 }

-.navds-search--with-size :where(.navds-search__wrapper-inner) {
-  width: inherit;
+.navds-search--with-size {
+  & .navds-search__wrapper-inner {
+    width: inherit;
+  }
+
+  & .navds-search__wrapper {
+    width: fit-content;
+  }
 }

 .navds-search__wrapper {
  display: inline-flex;
  align-items: center;
+  border-radius: var(--ax-border-radius-medium);
+
+  /* We have to outline the whole container to include the Search-buttons */
+  &:has(.navds-search__input:focus-visible) {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+  }
 }

+/* ------------------------------ Search input ------------------------------ */
 .navds-search__input {
-  padding-right: var(--a-spacing-10);
-}
+  padding-right: var(--ax-spacing-10);

-.navds-form-field--small .navds-search__input {
-  padding-right: var(--a-spacing-8);
+  &:focus-visible {
+    outline: none;
+  }
+
+  &.navds-search__input--primary,
+  &.navds-search__input--secondary {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-right: none;
+  }
 }

 .navds-search__input--simple {
-  padding-left: var(--a-spacing-11);
+  padding-left: var(--ax-spacing-10);
 }

-.navds-form-field--small .navds-search__input--simple {
-  padding-left: var(--a-spacing-7);
-}
+/* ------------------------------ Search sizing ----------------------------- */
+.navds-form-field--small {
+  & .navds-search__input {
+    padding-right: var(--ax-spacing-7);
+  }

-.navds-search__input:not(.navds-search__input--simple) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+  & .navds-search__input--simple {
+    padding-left: var(--ax-spacing-7);
+  }
+
+  & .navds-search__search-icon {
+    left: var(--ax-spacing-1);
+    font-size: 1.25rem;
+  }
+
+  & .navds-search__button-clear {
+    right: var(--ax-spacing-1);
+  }
 }

+/* ------------------------------- Search icon ------------------------------ */
 .navds-search__search-icon {
  position: absolute;
-  left: var(--a-spacing-3);
+  left: var(--ax-spacing-2);
  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--disabled & {
+    opacity: 0.3;
  }
 }

+/* --------------------------- Search Clear-button -------------------------- */
+.navds-search__button-clear {
+  position: absolute;
+  right: var(--ax-spacing-2);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* ------------------------------ Search Button ----------------------------- */
 .navds-search__button-search {
  flex-shrink: 0;
-  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;
+  border-top-right-radius: var(--ax-border-radius-medium);
+  border-bottom-right-radius: var(--ax-border-radius-medium);
 }

 .navds-search__button-search.navds-button--secondary {
-  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;
-}
+  --__axc-button-border-width: 1px;
+  --__axc-button-border-color: var(--ax-border-default);

-.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);
+  &:hover:not(:disabled) {
+    --__axc-button-border-color: var(--ax-border-accent-strong);
  }

-  .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);
+  &:active:not(:disabled) {
+    --__axc-button-border-color: transparent;
  }
 }

-/* 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)));
+/* Special-case where we hover/focus input, and want the secondary-button to match input-border */
+.navds-search:not(.navds-search--error, .navds-search--disabled)
+  .navds-search__wrapper:has(.navds-search__input:is(:hover, :focus-visible))
+  .navds-search__button-search.navds-button--secondary:not(:hover, :active) {
+  --__axc-button-border-color: var(--ax-border-accent-strong);
 }

-.navds-search--error .navds-search__input:focus-visible:not(:hover, :disabled) {
+/* --------------------------- Search Error-state --------------------------- */
+.navds-search--error .navds-search__input:not(:disabled) {
+  border-color: var(--ax-border-danger);
  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);
+    inset -2px 0 0 0 var(--ax-border-danger),
+    inset 0 0 0 1px var(--ax-border-danger);
+
+  &.navds-search__input--simple {
+    box-shadow: inset 0 0 0 1px var(--ax-border-danger);
+  }
 }

-/* Focus layering */
+/* -------------------------- Search 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);
-  }
+/* -------------------------- Search disabled state ------------------------- */

-  .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;
+/* We can't re-use disabled-state for form-fields since opacity multiplies on search-button */
+.navds-search--disabled {
+  .navds-search__input {
+    opacity: 0.3;
+    cursor: not-allowed;
  }
 }
@@ -1,48 +1,34 @@
 .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));
+  background-color: var(--ax-bg-input);
+  border-radius: var(--ax-border-radius-medium);
+  border: 1px solid var(--ax-border-default);
+  color: var(--ax-text-default);
  width: 100%;
  box-sizing: border-box;
  min-height: 3rem;
  display: inline-block;
  position: relative;
-  padding: 0.5rem;
-  padding-right: 2rem;
-}
+  padding: var(--ax-spacing-2);
+  padding-right: var(--ax-spacing-10);

-@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;
+  &:hover {
+    border-color: var(--ax-border-accent-strong);
+    cursor: pointer;
  }

-  .navds-select__input.navds-select__input.navds-select__input:focus-visible {
-    outline: 2px solid highlight;
+  &:focus {
+    outline: 2px solid var(--ax-border-focus);
    outline-offset: 2px;
+    border-color: var(--ax-border-accent-strong);
  }
-}

-.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);
+  @media (forced-colors: active) {
+    & {
+      background-color: ButtonFace;
+      border-color: ButtonText;
+      color: ButtonText;
+    }
  }
 }

@@ -50,66 +36,86 @@
  position: relative;
  display: flex;
  width: 100%;
-  color: var(--a-text-default);
+  color: var(--ax-text-default);
 }

+/* ------------------------------- Select Icon ------------------------------ */
 .navds-select__chevron {
  position: absolute;
  font-size: 1.5rem;
-  right: var(--a-spacing-2);
+  right: var(--ax-spacing-2);
  pointer-events: none;
  align-self: center;
-  color: var(--ac-select-text, var(--a-text-default));
-}
+  color: var(--ax-text-default);

-@media (forced-colors: active) {
-  .navds-select__chevron {
-    color: ButtonText;
+  @media (forced-colors: active) {
+    & {
+      color: ButtonText;
+    }
  }
 }

-.navds-form-field--small .navds-select__input {
-  min-height: 2rem;
-  padding: 0 var(--a-spacing-8) 0 var(--a-spacing-2);
+/* ------------------------------ Select Sizing ----------------------------- */
+.navds-form-field--small {
+  & .navds-select__input {
+    min-height: 2rem;
+    padding-block: 0;
+  }
 }

-.navds-form-field--small .navds-select__chevron {
-  right: var(--a-spacing-1-alt);
+/* --------------------------- Select Error-state --------------------------- */
+.navds-select--error {
+  > * select {
+    box-shadow: 0 0 0 1px var(--ax-border-danger);
+    border-color: var(--ax-border-danger);
+  }
+
+  > * select:hover,
+  > * select:focus {
+    box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
+    border-color: var(--ax-border-danger-strong);
+  }
 }

-/**
-  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
-*/
+/* ----------------------------- Select 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));
+  background-color: var(--ax-bg-input);
+  border: 1px solid var(--ax-border-default);
  box-shadow: none;
  cursor: not-allowed;

  /* Chrome-fix */
  opacity: 1;
-  color: var(--a-text-default);
+  color: var(--ax-text-default);
+
+  & > option {
+    color: var(--ax-text-default);
+  }
+
+  @media (forced-colors: active) {
+    & + .navds-select__chevron {
+      color: GrayText;
+    }
+  }
 }

-/* Chrome-fix */
-.navds-select__input:disabled > option {
-  color: var(--a-text-default);
-}
+/* ----------------------------- Select Readonly ---------------------------- */
+.navds-select--readonly {
+  & .navds-select__input {
+    background-color: var(--ax-bg-neutral-moderate);
+    border-color: var(--ax-border-neutral-subtleA);
+    cursor: default;

-.navds-select--readonly .navds-select__input {
-  background-color: var(--a-surface-subtle);
-  border-color: var(--a-border-subtle);
-  cursor: default;
-}
+    @media (forced-colors: active) {
+      &:is(:hover, :focus) {
+        background-color: ButtonFace;
+        border-color: ButtonText;
+        color: ButtonText;
+      }
+    }
+  }

-.navds-select--readonly .navds-select__chevron {
-  color: var(--a-gray-500);
+  & .navds-select__chevron {
+    color: var(--ax-text-subtle);
+  }
 }
@@ -4,16 +4,11 @@
  width: fit-content;
 }

-.navds-switch--right {
-  width: auto;
-}
-
 .navds-switch--small {
-  position: relative;
  min-height: 2rem;
 }

-/* Input */
+/* ------------------------------ Switch Input ------------------------------ */
 .navds-switch__input {
  cursor: pointer;
  position: absolute;
@@ -22,17 +17,17 @@
  height: 3rem;
  opacity: 0;
  top: 0;
+
+  .navds-switch--small > & {
+    height: 2rem;
+    top: 0;
+  }
 }

-.navds-switch--small > .navds-switch__input {
-  height: 2rem;
-  top: 0;
-}
-
-/* Label */
+/* -------------------------- Switch content/label -------------------------- */
 .navds-switch__label-wrapper {
  cursor: pointer;
-  color: var(--a-text-default);
+  color: var(--ax-text-default);
 }

 .navds-switch__content {
@@ -40,134 +35,135 @@
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.75rem 0 0.75rem 3.25rem;
+
+  .navds-switch--right & {
+    padding: 0.75rem 3.25rem 0.75rem 0;
+  }
+
+  .navds-switch--small & {
+    padding: calc(var(--ax-spacing-2) - var(--ax-spacing-05)) 0 calc(var(--ax-spacing-2) - var(--ax-spacing-05)) 3.25rem;
+  }
+
+  .navds-switch--right.navds-switch--small & {
+    padding: calc(var(--ax-spacing-2) - var(--ax-spacing-05)) 3.25rem calc(var(--ax-spacing-2) - var(--ax-spacing-05)) 0;
+  }
 }

-.navds-switch--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 {
+.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));
+  color: var(--ax-text-accent-strong);
 }

 .navds-switch__input:disabled:hover ~ .navds-switch__label-wrapper {
  color: inherit;
 }

-/* Track */
+/* ------------------------------ Switch Track ------------------------------ */
 .navds-switch__track {
  width: 2.75rem;
  height: 1.5rem;
-  background-color: var(--ac-switch-bg, var(--a-surface-neutral));
+  background-color: var(--ax-bg-input);
  position: absolute;
-  top: var(--a-spacing-3);
+  top: var(--ax-spacing-3);
  left: 0;
-  border-radius: var(--a-border-radius-full);
-  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
-}
+  border-radius: var(--ax-border-radius-full);
+  border: 2px solid var(--ax-border-default);
+  transition-property: background-color, border-color;
+  transition-duration: 100ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

-.navds-switch--small > .navds-switch__track {
-  top: var(--a-spacing-1);
-}
+  .navds-switch--small > & {
+    top: var(--ax-spacing-1);
+  }

-.navds-switch--right > .navds-switch__input,
-.navds-switch--right > .navds-switch__track {
-  right: 0;
-  left: auto;
-}
+  .navds-switch__input:checked ~ & {
+    background-color: var(--ax-bg-accent-strong-pressed);
+    border-color: var(--ax-bg-accent-strong-pressed);
+  }

-.navds-switch__input:checked ~ .navds-switch__track {
-  background-color: var(--ac-switch-checked-bg, var(--a-surface-action-selected));
-}
+  .navds-switch__input:hover:checked ~ & {
+    background-color: var(--ax-bg-accent-strong-hover);
+    border-color: var(--ax-bg-accent-strong-hover);
+  }

-.navds-switch__input:hover ~ .navds-switch__track {
-  background-color: var(--ac-switch-hover-bg, var(--a-surface-neutral-hover));
-}
+  .navds-switch__input:disabled ~ & {
+    background-color: var(--ax-bg-input);
+    border-color: var(--ax-border-default);
+  }

-.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:checked:disabled ~ & {
+    background-color: var(--ax-bg-accent-strong-pressed);
+    border-color: var(--ax-bg-accent-strong-pressed);
+  }

-.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);
+  .navds-switch__input:focus-visible ~ & {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
  }
 }

-/* Thumb */
+/* ------------------------------ Switch 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;
+  background-color: var(--ax-bg-neutral-strong);
+  border-radius: var(--ax-border-radius-full);
+  width: 1.125rem;
+  height: 1.125rem;
  position: absolute;
  transform: translateX(0);
-  left: var(--a-spacing-05);
-  top: var(--a-spacing-05);
-  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
+  left: 0.0625rem;
+  top: 0.0625rem;
+
+  .navds-switch__input:checked ~ .navds-switch__track > & {
+    background-color: var(--ax-bg-raised);
+    transform: translateX(1.25rem);
+    color: var(--ax-text-accent-strong);
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0;
+    top: 0;
+  }
+
+  .navds-switch__input:checked ~ .navds-switch__track > & > .navds-switch__checkmark {
+    visibility: visible;
+    opacity: 1;
+  }
 }

-.navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
-  transform: translateX(1.25rem);
-  color: var(--ac-switch-thumb-icon-checked, var(--a-icon-action-selected));
+.navds-switch__checkmark {
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }

@media (hover: hover) and (pointer: fine) {
-  .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
-    transform: translateX(0.125rem);
+  .navds-switch__input:hover:not(:disabled) ~ .navds-switch__track > .navds-switch__thumb {
+    transform: translateX(0.0625rem);
  }

-  .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
-    transform: translateX(1.125rem);
+  .navds-switch__input:checked:hover:not(:disabled) ~ .navds-switch__track > .navds-switch__thumb {
+    transform: translateX(1.19rem);
  }
 }

-.navds-switch__input:disabled:hover ~ .navds-switch__track > .navds-switch__thumb {
-  transform: translateX(0);
+.navds-switch--right {
+  width: auto;
+
+  & .navds-switch__input,
+  & .navds-switch__track {
+    right: 0;
+    left: auto;
+  }
 }

-.navds-switch__input:checked:disabled:hover ~ .navds-switch__track > .navds-switch__thumb {
-  transform: translateX(1.25rem);
-}
-
-/* Disabled */
+/* -------------------------- Switch Disabled-state ------------------------- */
 .navds-switch__input:disabled {
  appearance: none;
 }
@@ -181,47 +177,51 @@
  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);
+/* -------------------------- Switch Readonly state ------------------------- */
+.navds-switch--readonly {
+  & > .navds-switch__track,
+  & > .navds-switch__input:hover ~ .navds-switch__track,
+  & > .navds-switch__input:checked ~ .navds-switch__track,
+  & > .navds-switch__input:checked:hover ~ .navds-switch__track {
+    background-color: var(--ax-bg-neutral-moderate);
+    border-color: var(--ax-border-neutral-subtleA);
  }

-  .navds-switch--readonly > .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
-    transform: translateX(1.25rem);
+  & > .navds-switch__label-wrapper,
+  & > .navds-switch__input {
+    cursor: default;
+  }
+
+  & > .navds-switch__input:hover ~ .navds-switch__label-wrapper,
+  & .navds-switch__label-wrapper:hover {
+    color: var(--ax-text-default);
+  }
+
+  & .navds-switch__label {
+    display: inline-flex;
+  }
+
+  & .navds-switch__thumb {
+    background-color: var(--ax-bg-neutral-strong);
+  }
+
+  & > .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+    background-color: var(--ax-bg-neutral-strong);
+    color: var(--ax-text-neutral-contrast);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    & > .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
+      transform: translateX(0);
+    }
+
+    & > .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
+      transform: translateX(1.25rem);
+    }
  }
 }

+/* ------------------------ Switch Forced colors mode ----------------------- */
@media (forced-colors: active) {
  .navds-switch__input:hover ~ .navds-switch__label-wrapper,
  .navds-switch__label-wrapper:hover {
@@ -230,7 +230,7 @@

  .navds-switch__thumb,
  .navds-switch--readonly .navds-switch__thumb {
-    background-color: fieldtext;
+    background-color: fieldtext !important;
  }

  .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb,
@@ -238,13 +238,6 @@
    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;
@@ -259,7 +252,7 @@
  }

  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__track {
-    border-color: graytext;
+    border-color: graytext !important;
  }

  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__label-wrapper,
@@ -25,7 +25,7 @@
  }

  &::placeholder {
-    color: var(--ax-text-subtle);
+    color: var(--ax-text-neutral);
  }

  &[size] {
@@ -38,7 +38,7 @@
  min-height: 2rem;
 }

-.navds-text-field--error > .navds-text-field__input:not(:hover, :disabled) {
+.navds-text-field--error .navds-text-field__input:not(:disabled) {
  border-color: var(--ax-border-danger);
  box-shadow: 0 0 0 1px var(--ax-border-danger);
 }
@@ -1,73 +1,54 @@
-[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);
+  height: var(--__axc-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)));
+  padding: var(--ax-spacing-2);
+  background-color: var(--ax-bg-input);
+  border-radius: var(--ax-border-radius-medium);
+  border: 1px solid var(--ax-border-default);
  resize: none;
  width: 100%;
  display: block;
-  color: var(--ac-textarea-text, var(--__ac-textarea-text, var(--a-text-default)));
-}
+  color: var(--ax-text-default);

-.navds-textarea__input::placeholder {
-  color: var(--ac-textarea-placeholder, var(--__ac-textarea-placeholder, var(--a-text-subtle)));
-}
+  &::placeholder {
+    color: var(--ax-text-subtle);
+  }

-.navds-textarea__input:hover {
-  border-color: var(--ac-textarea-hover-border, var(--__ac-textarea-hover-border, var(--a-border-action-hover)));
-}
+  &:hover {
+    border-color: var(--ax-border-accent-strong);
+  }

-.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;
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
    outline-offset: 2px;
-    box-shadow: var(--a-shadow-focus);
+    border-color: var(--ax-border-accent-strong);
+  }
+
+  &:disabled {
+    background-color: var(--ax-bg-input);
+    border-color: var(--ax-border-default);
+    cursor: not-allowed;
+  }
+
+  .navds-form-field--small & {
+    padding: var(--ax-spacing-1-alt);
+  }
+
+  .navds-textarea--readonly & {
+    background-color: var(--ax-bg-neutral-moderate);
+    border-color: var(--ax-border-neutral-subtleA);
+    cursor: default;
  }
 }

-.navds-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)));
+  margin-top: -0.25rem;
+  color: var(--ax-text-subtle);
 }

 .navds-textarea__counter--error {
-  color: var(--ac-textarea-counter-error-text, var(--__ac-textarea-counter-error-text, var(--a-text-danger)));
+  color: var(--ax-text-danger);
 }

 .navds-textarea__sr-counter {
@@ -108,32 +89,9 @@
  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;
+.navds-textarea--error .navds-textarea__input:not(:disabled) {
+  box-shadow: 0 0 0 1px var(--ax-border-danger);
+  border-color: var(--ax-border-danger);
 }

@media (forced-colors: active) {
@@ -21,12 +21,6 @@
  max-width: min(65ch, calc(100vw - var(--ax-spacing-6)));
  border-radius: var(--ax-border-radius-large);
  border: 1px solid var(--ax-border-info);
-  box-shadow:
-    0 0 1px 0 rgba(7 9 13/ 0.15),
-    0 1px 3px 0 rgba(7 9 13/ 0.1),
-    0 5px 12px 0 rgba(7 9 13/ 0.13),
-    0 0.5px 0 0 rgba(255 255 255/ 0) inset,
-    0 0 1px 0 rgba(255 255 255/ 0) inset;
 }

 .navds-help-text__icon--filled {
@@ -1,30 +1,34 @@
@charset "UTF-8";

-@layer aksel.reset, aksel.typography, aksel.theme, aksel.components, aksel.forms, aksel.layout, aksel.utilities;
+/* CSS is ordered by specificity, so that browsers without layers fall backs to good defaults */
+@layer aksel.reset, aksel.typography, aksel.theme, aksel.components, aksel.layout, aksel.utilities;

-/* CSS foundations */
+/* ----------------------------- CSS foundations ---------------------------- */
@import "./baseline/reset.darkside.css" layer(aksel.reset);
@import "./baseline/print.darkside.css" layer(aksel.reset);
@import "./baseline/fonts.darkside.css" layer(aksel.typography);
-@import "./baseline/theme.darkside.css" layer(aksel.theme);
@import "./typography.darkside.css" layer(aksel.typography);
-@import "./baseline/utilities.darkside.css" layer(aksel.utilities);

-/* Test: Handles layers itself */
-@import "./form/index.css";
-@import "./primitives/index.css";
-
-/* Theming */
+/* --------------------------------- Theming -------------------------------- */
@import "@navikt/ds-tokens/dist/darkside/tokens.css" layer(aksel.theme);
+@import "./baseline/theme.darkside.css" layer(aksel.theme);

-/* Components */
-@import "../primitives/stack.css" layer(aksel.components);
-@import "./accordion.darkside.css" layer(aksel.components);
+/* ------------------------------- Components ------------------------------- */
@import "./button.darkside.css" layer(aksel.components);
+@import "./chips.darkside.css" layer(aksel.components);
+
+/**
+  * `./form/index.css` edits the following components:
+  * - Button
+  * - Chips
+  * To avoid specificity conflicts, we import those components before form.
+*/
+@import "./form/index.css" layer(aksel.components);
+@import "./accordion.darkside.css" layer(aksel.components);
@import "./alert.darkside.css" layer(aksel.components);
@import "./chat.darkside.css" layer(aksel.components);
-@import "./chips.darkside.css" layer(aksel.components);
@import "./copybutton.darkside.css" layer(aksel.components);
+@import "./date.darkside.css" layer(aksel.components);
@import "./dropdown.darkside.css" layer(aksel.components);
@import "./action-menu.darkside.css" layer(aksel.components);
@import "./expansioncard.darkside.css" layer(aksel.components);
@@ -36,7 +40,6 @@
@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);
@@ -50,3 +53,9 @@
@import "./table.darkside.css" layer(aksel.components);
@import "./tabs.darkside.css" layer(aksel.components);
@import "./list.darkside.css" layer(aksel.components);
+
+/* --------------------------------- Layout --------------------------------- */
+@import "./primitives/index.css" layer(aksel.layout);
+
+/* --------------------------------- Utility -------------------------------- */
+@import "./baseline/utilities.darkside.css" layer(aksel.utilities);
@@ -1,10 +1,9 @@
 .navds-internalheader {
  display: flex;
  align-self: stretch;
-  background: var(--ac-internalheader-bg, var(--a-surface-inverted));
+  background: var(--ax-bg-raised);
  min-height: 3rem;
-
-  --navds-internalheader-focus: inset 0 0 0 2px var(--a-border-focus-on-inverted);
+  border-bottom: 1px solid var(--ax-border-subtleA);
 }

@media (forced-colors: active) {
@@ -13,18 +12,6 @@
    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 {
@@ -32,25 +19,34 @@
  overflow: visible;
  background: transparent;
  font: inherit;
-  font-weight: var(--a-font-weight-bold);
+  font-weight: var(--ax-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));
+  padding-block: 0;
+  padding-inline: var(--ax-spacing-6) var(--ax-spacing-5);
+  border-right: 1px solid var(--ax-border-subtleA);
  display: flex;
  align-items: center;
  text-decoration: none;
  margin: 0;
-  color: var(--ac-internalheader-text, var(--a-text-on-inverted));
-}
+  color: var(--ax-text-default);

-button.navds-internalheader__title {
-  cursor: pointer;
+  &:is(button) {
+    cursor: pointer;
+  }
+
+  &:hover {
+    background: var(--ax-bg-neutral-moderate-hover);
+  }
+
+  &:is(:hover, :active):not(button, a) {
+    background: initial;
+  }
 }

 .navds-internalheader__user {
-  padding: 0 var(--a-spacing-5);
-  border-left: 1px solid var(--ac-internalheader-divider, var(--a-gray-600));
+  padding: 0 var(--ax-spacing-5);
+  border-left: 1px solid var(--ax-border-subtleA);
  display: flex;
  align-items: center;
 }
@@ -58,7 +54,7 @@ button.navds-internalheader__title {
 .navds-internalheader__button {
  border: none;
  margin: 0;
-  padding: 0 var(--a-spacing-3);
+  padding: 0 var(--ax-spacing-3);
  overflow: visible;
  background: transparent;
  font: inherit;
@@ -68,38 +64,38 @@ button.navds-internalheader__title {
  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));
-}
+  gap: var(--ax-spacing-2);
+  border-left: 1px solid var(--ax-border-subtleA);
+  color: var(--ax-text-default);

-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;
+  &:hover {
+    background: var(--ax-bg-neutral-moderate-hover);
  }
 }

-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));
+@media (forced-colors: active) {
+  .navds-internalheader__button:hover {
+    background-color: highlighttext;
+    border-color: highlight;
+    color: highlight;
+    outline: 1px solid highlight;
+    isolation: isolate;
+  }
+}
+
+.navds-internalheader__title,
+.navds-internalheader__button {
+  &:focus-visible {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: -3px;
+  }
+
+  &:active {
+    background: var(--ax-bg-neutral-moderate-pressed);
+  }
 }

 .navds-internalheader__user-button {
-  padding-left: var(--a-spacing-5);
-  gap: var(--a-spacing-4);
+  padding-left: var(--ax-spacing-5);
+  gap: var(--ax-spacing-4);
 }
@@ -8,10 +8,7 @@
  background-color: var(--__axc-modal-bg);
  border: 1px solid var(--ax-border-subtleA);
  border-radius: var(--ax-border-radius-xlarge);
-  box-shadow:
-    0 0 1px 0 rgb(0 0 0/ 0.08),
-    0 2px 5px 0 rgb(0 0 0/ 0.15),
-    0 10px 24px 0 rgb(0 0 0/ 0.18);
+  box-shadow: var(--ax-shadow-dialog);
  padding: 0;
  position: fixed;
  max-height: 100%;
@@ -63,15 +60,15 @@
  width: 450px;

  & .navds-modal__header {
-    padding: var(--ax-spacing-4) var(--ax-spacing-4) var(--ax-spacing-3) var(--ax-spacing-4);
+    padding: var(--ax-spacing-3) var(--ax-spacing-4);
  }

  & .navds-modal__body {
-    padding: var(--ax-spacing-2) var(--ax-spacing-4) var(--ax-spacing-4);
+    padding: var(--ax-spacing-3) var(--ax-spacing-4);
  }

  & .navds-modal__footer {
-    padding: var(--ax-spacing-4);
+    padding: var(--ax-spacing-3) var(--ax-spacing-4);
  }
 }

@@ -124,7 +121,7 @@
 }

 .navds-modal__header {
-  padding: var(--ax-spacing-6) var(--ax-spacing-6) var(--ax-spacing-4) var(--ax-spacing-6);
+  padding: var(--ax-spacing-4) var(--ax-spacing-5);
 }

 .navds-modal__header-icon {
@@ -141,7 +138,7 @@
 }

 .navds-modal__body {
-  padding: var(--ax-spacing-6);
+  padding: var(--ax-spacing-4) var(--ax-spacing-5);
  overflow: auto;
  overscroll-behavior: contain;
  position: relative; /* Needed to make sr-only elements position correctly - see Storybook */
@@ -167,7 +164,7 @@
  display: flex;
  flex-flow: row-reverse wrap;
  gap: var(--ax-spacing-4);
-  padding: var(--ax-spacing-4) var(--ax-spacing-6) var(--ax-spacing-6) var(--ax-spacing-6);
+  padding: var(--ax-spacing-4) var(--ax-spacing-5);
 }

 .navds-modal__footer :nth-of-type(2) {
@@ -1,10 +1,7 @@
 .navds-popover {
  z-index: 1000;
  background: var(--ax-bg-raised);
-  box-shadow:
-    0 0 1px 0 rgba(7 9 13/ 0.02),
-    0 2px 5px 0 rgba(7 9 13/ 0.1),
-    0 5px 12px 0 rgba(7 9 13/ 0.12);
+  box-shadow: var(--ax-shadow-dialog);
  border: 1px solid var(--ax-border-subtleA);
  border-radius: var(--ax-border-radius-xlarge);

@@ -13,7 +10,7 @@
 }

 .navds-popover__content {
-  padding: var(--ax-spacing-4);
+  padding: var(--ax-spacing-4) var(--ax-spacing-5);
 }

 .navds-popover--hidden {
@@ -1,103 +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);
+  --__axc-bleed-margin-inline-xs: initial;
+  --__axc-bleed-margin-inline-sm: var(--__axc-bleed-margin-inline-xs);
+  --__axc-bleed-margin-inline-md: var(--__axc-bleed-margin-inline-sm);
+  --__axc-bleed-margin-inline-lg: var(--__axc-bleed-margin-inline-md);
+  --__axc-bleed-margin-inline-xl: var(--__axc-bleed-margin-inline-lg);
+  --__axc-bleed-margin-inline-2xl: var(--__axc-bleed-margin-inline-xl);
+  --__axc-bleed-margin-block-xs: initial;
+  --__axc-bleed-margin-block-sm: var(--__axc-bleed-margin-block-xs);
+  --__axc-bleed-margin-block-md: var(--__axc-bleed-margin-block-sm);
+  --__axc-bleed-margin-block-lg: var(--__axc-bleed-margin-block-md);
+  --__axc-bleed-margin-block-xl: var(--__axc-bleed-margin-block-lg);
+  --__axc-bleed-margin-block-2xl: var(--__axc-bleed-margin-block-xl);

  /** defaults */
-  --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-xs);
-  --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-xs);
+  --__axc-bleed-margin-inline: var(--__axc-bleed-margin-inline-xs);
+  --__axc-bleed-margin-block: var(--__axc-bleed-margin-block-xs);

-  margin-inline: var(--__ac-bleed-margin-inline);
-  margin-block: var(--__ac-bleed-margin-block);
+  margin-inline: var(--__axc-bleed-margin-inline);
+  margin-block: var(--__axc-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);
+  --__axc-bleed-padding-inline-xs: initial;
+  --__axc-bleed-padding-inline-sm: var(--__axc-bleed-padding-inline-xs);
+  --__axc-bleed-padding-inline-md: var(--__axc-bleed-padding-inline-sm);
+  --__axc-bleed-padding-inline-lg: var(--__axc-bleed-padding-inline-md);
+  --__axc-bleed-padding-inline-xl: var(--__axc-bleed-padding-inline-lg);
+  --__axc-bleed-padding-inline-2xl: var(--__axc-bleed-padding-inline-xl);
+  --__axc-bleed-padding-block-xs: initial;
+  --__axc-bleed-padding-block-sm: var(--__axc-bleed-padding-block-xs);
+  --__axc-bleed-padding-block-md: var(--__axc-bleed-padding-block-sm);
+  --__axc-bleed-padding-block-lg: var(--__axc-bleed-padding-block-md);
+  --__axc-bleed-padding-block-xl: var(--__axc-bleed-padding-block-lg);
+  --__axc-bleed-padding-block-2xl: var(--__axc-bleed-padding-block-xl);

  /** defaults */
-  --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-xs);
-  --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-xs);
+  --__axc-bleed-padding-inline: var(--__axc-bleed-padding-inline-xs);
+  --__axc-bleed-padding-block: var(--__axc-bleed-padding-block-xs);

-  padding-inline: var(--__ac-bleed-padding-inline);
-  padding-block: var(--__ac-bleed-padding-block);
+  padding-inline: var(--__axc-bleed-padding-inline);
+  padding-block: var(--__axc-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);
+    --__axc-bleed-margin-inline: var(--__axc-bleed-margin-inline-sm);
+    --__axc-bleed-margin-block: var(--__axc-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);
+    --__axc-bleed-padding-inline: var(--__axc-bleed-padding-inline-sm);
+    --__axc-bleed-padding-block: var(--__axc-bleed-padding-block-sm);
  }
 }

@media (min-width: 768px) {
  .navds-bleed {
-    --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-md);
-    --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-md);
+    --__axc-bleed-margin-inline: var(--__axc-bleed-margin-inline-md);
+    --__axc-bleed-margin-block: var(--__axc-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);
+    --__axc-bleed-padding-inline: var(--__axc-bleed-padding-inline-md);
+    --__axc-bleed-padding-block: var(--__axc-bleed-padding-block-md);
  }
 }

@media (min-width: 1024px) {
  .navds-bleed {
-    --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-lg);
-    --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-lg);
+    --__axc-bleed-margin-inline: var(--__axc-bleed-margin-inline-lg);
+    --__axc-bleed-margin-block: var(--__axc-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);
+    --__axc-bleed-padding-inline: var(--__axc-bleed-padding-inline-lg);
+    --__axc-bleed-padding-block: var(--__axc-bleed-padding-block-lg);
  }
 }

@media (min-width: 1280px) {
  .navds-bleed {
-    --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-xl);
-    --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-xl);
+    --__axc-bleed-margin-inline: var(--__axc-bleed-margin-inline-xl);
+    --__axc-bleed-margin-block: var(--__axc-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);
+    --__axc-bleed-padding-inline: var(--__axc-bleed-padding-inline-xl);
+    --__axc-bleed-padding-block: var(--__axc-bleed-padding-block-xl);
  }
 }

@media (min-width: 1440px) {
  .navds-bleed {
-    --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-2xl);
-    --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-2xl);
+    --__axc-bleed-margin-inline: var(--__axc-bleed-margin-inline-2xl);
+    --__axc-bleed-margin-block: var(--__axc-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);
+    --__axc-bleed-padding-inline: var(--__axc-bleed-padding-inline-2xl);
+    --__axc-bleed-padding-block: var(--__axc-bleed-padding-block-2xl);
  }
 }
@@ -1,66 +1,66 @@
 .navds-box-bg {
-  --__ac-box-background: initial;
+  --__axc-box-background: initial;

-  background-color: var(--__ac-box-background);
+  background-color: var(--__axc-box-background);
 }

 .navds-box-border-color {
-  --__ac-box-border-color: initial;
+  --__axc-box-border-color: initial;

-  border-color: var(--__ac-box-border-color);
+  border-color: var(--__axc-box-border-color);
 }

 .navds-box-border-width {
-  --__ac-box-border-width: initial;
+  --__axc-box-border-width: initial;

  border-style: solid;
-  border-width: var(--__ac-box-border-width, 0);
+  border-width: var(--__axc-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);
+  --__axc-box-border-radius-xs: initial;
+  --__axc-box-border-radius-sm: var(--__axc-box-border-radius-xs);
+  --__axc-box-border-radius-md: var(--__axc-box-border-radius-sm);
+  --__axc-box-border-radius-lg: var(--__axc-box-border-radius-md);
+  --__axc-box-border-radius-xl: var(--__axc-box-border-radius-lg);
+  --__axc-box-border-radius-2xl: var(--__axc-box-border-radius-xl);
+  --__axc-box-border-radius: var(--__axc-box-border-radius-xs);

-  border-radius: var(--__ac-box-border-radius);
+  border-radius: var(--__axc-box-border-radius);
 }

 .navds-box-shadow {
-  --__ac-box-shadow: initial;
+  --__axc-box-shadow: initial;

-  box-shadow: var(--__ac-box-shadow);
+  box-shadow: var(--__axc-box-shadow);
 }

@media (min-width: 480px) {
  .navds-box-border-radius {
-    --__ac-box-border-radius: var(--__ac-box-border-radius-sm);
+    --__axc-box-border-radius: var(--__axc-box-border-radius-sm);
  }
 }

@media (min-width: 768px) {
  .navds-box-border-radius {
-    --__ac-box-border-radius: var(--__ac-box-border-radius-md);
+    --__axc-box-border-radius: var(--__axc-box-border-radius-md);
  }
 }

@media (min-width: 1024px) {
  .navds-box-border-radius {
-    --__ac-box-border-radius: var(--__ac-box-border-radius-lg);
+    --__axc-box-border-radius: var(--__axc-box-border-radius-lg);
  }
 }

@media (min-width: 1280px) {
  .navds-box-border-radius {
-    --__ac-box-border-radius: var(--__ac-box-border-radius-xl);
+    --__axc-box-border-radius: var(--__axc-box-border-radius-xl);
  }
 }

@media (min-width: 1440px) {
  .navds-box-border-radius {
-    --__ac-box-border-radius: var(--__ac-box-border-radius-2xl);
+    --__axc-box-border-radius: var(--__axc-box-border-radius-2xl);
  }
 }
@@ -1,80 +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);
+  --__axc-hgrid-columns-xs: initial;
+  --__axc-hgrid-columns-sm: var(--__axc-hgrid-columns-xs);
+  --__axc-hgrid-columns-md: var(--__axc-hgrid-columns-sm);
+  --__axc-hgrid-columns-lg: var(--__axc-hgrid-columns-md);
+  --__axc-hgrid-columns-xl: var(--__axc-hgrid-columns-lg);
+  --__axc-hgrid-columns-2xl: var(--__axc-hgrid-columns-xl);
+  --__axc-hgrid-columns: var(--__axc-hgrid-columns-xs);

  display: grid;
-  grid-template-columns: var(--__ac-hgrid-columns);
+  grid-template-columns: var(--__axc-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);
+  --__axc-hgrid-gap-xs: initial;
+  --__axc-hgrid-gap-sm: var(--__axc-hgrid-gap-xs);
+  --__axc-hgrid-gap-md: var(--__axc-hgrid-gap-sm);
+  --__axc-hgrid-gap-lg: var(--__axc-hgrid-gap-md);
+  --__axc-hgrid-gap-xl: var(--__axc-hgrid-gap-lg);
+  --__axc-hgrid-gap-2xl: var(--__axc-hgrid-gap-xl);
+  --__axc-hgrid-gap: var(--__axc-hgrid-gap-xs);

-  gap: var(--__ac-hgrid-gap);
+  gap: var(--__axc-hgrid-gap);
 }

 .navds-hgrid-align {
-  --__ac-hgrid-align: initial;
+  --__axc-hgrid-align: initial;

-  align-items: var(--__ac-hgrid-align);
+  align-items: var(--__axc-hgrid-align);
 }

@media (min-width: 480px) {
  .navds-hgrid {
-    --__ac-hgrid-columns: var(--__ac-hgrid-columns-sm);
+    --__axc-hgrid-columns: var(--__axc-hgrid-columns-sm);
  }

  .navds-hgrid-gap {
-    --__ac-hgrid-gap: var(--__ac-hgrid-gap-sm);
+    --__axc-hgrid-gap: var(--__axc-hgrid-gap-sm);
  }
 }

@media (min-width: 768px) {
  .navds-hgrid {
-    --__ac-hgrid-columns: var(--__ac-hgrid-columns-md);
+    --__axc-hgrid-columns: var(--__axc-hgrid-columns-md);
  }

  .navds-hgrid-gap {
-    --__ac-hgrid-gap: var(--__ac-hgrid-gap-md);
+    --__axc-hgrid-gap: var(--__axc-hgrid-gap-md);
  }
 }

@media (min-width: 1024px) {
  .navds-hgrid {
-    --__ac-hgrid-columns: var(--__ac-hgrid-columns-lg);
+    --__axc-hgrid-columns: var(--__axc-hgrid-columns-lg);
  }

  .navds-hgrid-gap {
-    --__ac-hgrid-gap: var(--__ac-hgrid-gap-lg);
+    --__axc-hgrid-gap: var(--__axc-hgrid-gap-lg);
  }
 }

@media (min-width: 1280px) {
  .navds-hgrid {
-    --__ac-hgrid-columns: var(--__ac-hgrid-columns-xl);
+    --__axc-hgrid-columns: var(--__axc-hgrid-columns-xl);
  }

  .navds-hgrid-gap {
-    --__ac-hgrid-gap: var(--__ac-hgrid-gap-xl);
+    --__axc-hgrid-gap: var(--__axc-hgrid-gap-xl);
  }
 }

@media (min-width: 1440px) {
  .navds-hgrid {
-    --__ac-hgrid-columns: var(--__ac-hgrid-columns-2xl);
+    --__axc-hgrid-columns: var(--__axc-hgrid-columns-2xl);
  }

  .navds-hgrid-gap {
-    --__ac-hgrid-gap: var(--__ac-hgrid-gap-2xl);
+    --__axc-hgrid-gap: var(--__axc-hgrid-gap-2xl);
  }
 }
@@ -1,36 +1,7 @@
-@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);
-  }
-}
+@import "./base.darkside.css";
+@import "./box.darkside.css";
+@import "./bleed.darkside.css";
+@import "./page.darkside.css";
+@import "./hgrid.darkside.css";
+@import "./stack.darkside.css";
+@import "./responsive.darkside.css";
@@ -3,15 +3,12 @@
  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;
+  --__axc-page-padding-inline: 0px;

  margin-inline: auto;
  width: 100%;
@@ -27,11 +24,11 @@
 }

 .navds-page__content--padding {
-  padding-block-end: var(--a-spacing-16);
+  padding-block-end: var(--ax-spacing-16);
 }

 .navds-pageblock--text {
-  max-width: calc(var(--a-text-width-max) + var(--__ac-page-padding-inline) + var(--__ac-page-padding-inline));
+  max-width: calc(576px + var(--__axc-page-padding-inline) + var(--__axc-page-padding-inline));
 }

 .navds-pageblock--md {
@@ -51,13 +48,13 @@
 }

 .navds-pageblock--gutters {
-  --__ac-page-padding-inline: var(--a-spacing-4);
+  --__axc-page-padding-inline: var(--a-spacing-4);

-  padding-inline: var(--__ac-page-padding-inline);
+  padding-inline: var(--__axc-page-padding-inline);
 }

@media (min-width: 1024px) {
  .navds-pageblock--gutters {
-    --__ac-page-padding-inline: var(--a-spacing-12);
+    --__axc-page-padding-inline: var(--a-spacing-12);
  }
 }
@@ -3,51 +3,51 @@
 }

 .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);
+  --__axc-stack-gap-xs: initial;
+  --__axc-stack-gap-sm: var(--__axc-stack-gap-xs);
+  --__axc-stack-gap-md: var(--__axc-stack-gap-sm);
+  --__axc-stack-gap-lg: var(--__axc-stack-gap-md);
+  --__axc-stack-gap-xl: var(--__axc-stack-gap-lg);
+  --__axc-stack-gap-2xl: var(--__axc-stack-gap-xl);
+  --__axc-stack-gap: var(--__axc-stack-gap-xs);

-  gap: var(--__ac-stack-gap);
+  gap: var(--__axc-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);
+  --__axc-stack-align-xs: initial;
+  --__axc-stack-align-sm: var(--__axc-stack-align-xs);
+  --__axc-stack-align-md: var(--__axc-stack-align-sm);
+  --__axc-stack-align-lg: var(--__axc-stack-align-md);
+  --__axc-stack-align-xl: var(--__axc-stack-align-lg);
+  --__axc-stack-align-2xl: var(--__axc-stack-align-xl);
+  --__axc-stack-align: var(--__axc-stack-align-xs);

-  align-items: var(--__ac-stack-align);
+  align-items: var(--__axc-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);
+  --__axc-stack-justify-xs: initial;
+  --__axc-stack-justify-sm: var(--__axc-stack-justify-xs);
+  --__axc-stack-justify-md: var(--__axc-stack-justify-sm);
+  --__axc-stack-justify-lg: var(--__axc-stack-justify-md);
+  --__axc-stack-justify-xl: var(--__axc-stack-justify-lg);
+  --__axc-stack-justify-2xl: var(--__axc-stack-justify-xl);
+  --__axc-stack-justify: var(--__axc-stack-justify-xs);

-  justify-content: var(--__ac-stack-justify);
+  justify-content: var(--__axc-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);
+  --__axc-stack-direction-xs: initial;
+  --__axc-stack-direction-sm: var(--__axc-stack-direction-xs);
+  --__axc-stack-direction-md: var(--__axc-stack-direction-sm);
+  --__axc-stack-direction-lg: var(--__axc-stack-direction-md);
+  --__axc-stack-direction-xl: var(--__axc-stack-direction-lg);
+  --__axc-stack-direction-2xl: var(--__axc-stack-direction-xl);
+  --__axc-stack-direction: var(--__axc-stack-direction-xs);

-  flex-direction: var(--__ac-stack-direction);
+  flex-direction: var(--__axc-stack-direction);
 }

 .navds-stack-wrap {
@@ -60,96 +60,96 @@
 }

 .navds-stack > .navds-stack__spacer {
-  margin-block-start: calc(var(--__ac-stack-gap) * -1);
-  margin-inline-start: calc(var(--__ac-stack-gap) * -1);
+  margin-block-start: calc(var(--__axc-stack-gap) * -1);
+  margin-inline-start: calc(var(--__axc-stack-gap) * -1);
 }

@media (min-width: 480px) {
  .navds-stack-gap {
-    --__ac-stack-gap: var(--__ac-stack-gap-sm);
+    --__axc-stack-gap: var(--__axc-stack-gap-sm);
  }

  .navds-stack-align {
-    --__ac-stack-align: var(--__ac-stack-align-sm);
+    --__axc-stack-align: var(--__axc-stack-align-sm);
  }

  .navds-stack-justify {
-    --__ac-stack-justify: var(--__ac-stack-justify-sm);
+    --__axc-stack-justify: var(--__axc-stack-justify-sm);
  }

  .navds-stack-direction {
-    --__ac-stack-direction: var(--__ac-stack-direction-sm);
+    --__axc-stack-direction: var(--__axc-stack-direction-sm);
  }
 }

@media (min-width: 768px) {
  .navds-stack-gap {
-    --__ac-stack-gap: var(--__ac-stack-gap-md);
+    --__axc-stack-gap: var(--__axc-stack-gap-md);
  }

  .navds-stack-align {
-    --__ac-stack-align: var(--__ac-stack-align-md);
+    --__axc-stack-align: var(--__axc-stack-align-md);
  }

  .navds-stack-justify {
-    --__ac-stack-justify: var(--__ac-stack-justify-md);
+    --__axc-stack-justify: var(--__axc-stack-justify-md);
  }

  .navds-stack-direction {
-    --__ac-stack-direction: var(--__ac-stack-direction-md);
+    --__axc-stack-direction: var(--__axc-stack-direction-md);
  }
 }

@media (min-width: 1024px) {
  .navds-stack-gap {
-    --__ac-stack-gap: var(--__ac-stack-gap-lg);
+    --__axc-stack-gap: var(--__axc-stack-gap-lg);
  }

  .navds-stack-align {
-    --__ac-stack-align: var(--__ac-stack-align-lg);
+    --__axc-stack-align: var(--__axc-stack-align-lg);
  }

  .navds-stack-justify {
-    --__ac-stack-justify: var(--__ac-stack-justify-lg);
+    --__axc-stack-justify: var(--__axc-stack-justify-lg);
  }

  .navds-stack-direction {
-    --__ac-stack-direction: var(--__ac-stack-direction-lg);
+    --__axc-stack-direction: var(--__axc-stack-direction-lg);
  }
 }

@media (min-width: 1280px) {
  .navds-stack-gap {
-    --__ac-stack-gap: var(--__ac-stack-gap-xl);
+    --__axc-stack-gap: var(--__axc-stack-gap-xl);
  }

  .navds-stack-align {
-    --__ac-stack-align: var(--__ac-stack-align-xl);
+    --__axc-stack-align: var(--__axc-stack-align-xl);
  }

  .navds-stack-justify {
-    --__ac-stack-justify: var(--__ac-stack-justify-xl);
+    --__axc-stack-justify: var(--__axc-stack-justify-xl);
  }

  .navds-stack-direction {
-    --__ac-stack-direction: var(--__ac-stack-direction-xl);
+    --__axc-stack-direction: var(--__axc-stack-direction-xl);
  }
 }

@media (min-width: 1440px) {
  .navds-stack-gap {
-    --__ac-stack-gap: var(--__ac-stack-gap-2xl);
+    --__axc-stack-gap: var(--__axc-stack-gap-2xl);
  }

  .navds-stack-align {
-    --__ac-stack-align: var(--__ac-stack-align-2xl);
+    --__axc-stack-align: var(--__axc-stack-align-2xl);
  }

  .navds-stack-justify {
-    --__ac-stack-justify: var(--__ac-stack-justify-2xl);
+    --__axc-stack-justify: var(--__axc-stack-justify-2xl);
  }

  .navds-stack-direction {
-    --__ac-stack-direction: var(--__ac-stack-direction-2xl);
+    --__axc-stack-direction: var(--__axc-stack-direction-2xl);
  }
 }
@@ -1,3 +1,11 @@
+.navds-read-more {
+  --__axc-read-more-icon-size: 1.5rem;
+  --__axc-read-more-pi-start: 0px;
+  --__axc-read-more-pi-end: var(--ax-spacing-1);
+  --__axc-read-more-pb: var(--ax-spacing-1);
+}
+
+/* ----------------------------- ReadMore Button ---------------------------- */
 .navds-read-more__button {
  cursor: pointer;
  margin: 0;
@@ -5,87 +13,90 @@
  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);
+  gap: var(--ax-spacing-1);
+  color: var(--ax-text-accent);
+  padding-inline: var(--__axc-read-more-pi-start) var(--__axc-read-more-pi-end);
+  padding-block: var(--__axc-read-more-pb);
  text-align: start;
+
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+  }
+
+  &[data-state="open"] .navds-read-more__expand-icon {
+    transform: rotateX(-180deg);
+  }
 }

-.navds-read-more--small .navds-read-more__button {
-  padding: var(--a-spacing-05) var(--a-spacing-1-alt) var(--a-spacing-05) var(--a-spacing-05);
+.navds-read-more:is([data-volume="low"], :not([data-volume])) {
+  & .navds-read-more__button {
+    border-radius: var(--ax-border-radius-medium);
+
+    &:hover {
+      background-color: var(--ax-bg-neutral-hoverA);
+      color: var(--ax-text-accent-strong);
+    }
+  }
 }

+.navds-read-more[data-volume="high"] {
+  & .navds-read-more__button {
+    background-color: var(--ax-bg-accent-moderate);
+    border-radius: var(--ax-border-radius-full);
+
+    &:hover {
+      background-color: var(--ax-bg-accent-moderate-hoverA);
+      color: var(--ax-text-accent-strong);
+    }
+  }
+
+  &.navds-read-more--large {
+    --__axc-read-more-pi-start: var(--ax-spacing-3);
+    --__axc-read-more-pi-end: var(--ax-spacing-6);
+  }
+
+  &.navds-read-more--small,
+  &.navds-read-more--medium {
+    --__axc-read-more-pi-start: var(--ax-spacing-2);
+    --__axc-read-more-pi-end: var(--ax-spacing-4);
+  }
+}
+
+/* ---------------------------- ReadMore Content ---------------------------- */
+.navds-read-more__content {
+  margin-top: var(--ax-spacing-2);
+  border-left: 2px solid var(--ax-border-neutral-subtleA);
+  color: var(--ax-text-default);
+  margin-left: calc(var(--__axc-read-more-pi-start) + var(--__axc-read-more-icon-size) / 2 - 1px);
+  padding-left: calc(var(--__axc-read-more-icon-size) / 2 - 1px + var(--ax-spacing-1));
+
+  &[data-state="closed"] {
+    display: none;
+  }
+}
+
+.navds-read-more__expand-icon {
+  font-size: var(--__axc-read-more-icon-size);
+  flex-shrink: 0;
+  transition: transform 100ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+/* ----------------------------- ReadMore Sizes ----------------------------- */
+.navds-read-more--large {
+  --__axc-read-more-pb: var(--ax-spacing-3);
+}
+
+.navds-read-more--small {
+  --__axc-read-more-icon-size: 1.25rem;
+  --__axc-read-more-pb: var(--ax-spacing-05);
+}
+
+/* ------------------------- ReadMore high-contrast ------------------------- */
@media (forced-colors: active) {
  .navds-read-more__button {
    background-color: ButtonFace;
    border: solid 1px ButtonText;
    color: ButtonText;
  }
-
-  .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;
 }
@@ -1,7 +1,7 @@
 .navds-skeleton {
-  background-color: var(--ac-skeleton-bg, var(--a-surface-neutral-moderate));
+  background-color: var(--ax-bg-neutral-moderateA);
  height: 1.3em;
-  animation: akselSkeletonAnimation 0.8s linear infinite alternate;
+  animation: akselSkeletonAnimation 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  pointer-events: none;
 }

@@ -11,33 +11,33 @@

 .navds-skeleton--has-children {
  color: transparent;
-}

-.navds-skeleton--has-children > * {
-  visibility: hidden;
-}
+  & > * {
+    visibility: hidden;
+  }

-.navds-skeleton--has-children.navds-skeleton--no-height {
-  height: auto;
-}
+  &.navds-skeleton--no-height {
+    height: auto;
+  }

-.navds-skeleton--has-children.navds-skeleton--no-width {
-  width: fit-content;
+  &.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);
-}
+  border-radius: var(--ax-border-radius-large);

-.navds-skeleton--text:empty::before {
-  content: "\00a0";
+  &:empty::before {
+    content: "\00a0";
+  }
 }

 .navds-skeleton--circle {
-  border-radius: var(--a-border-radius-full);
+  border-radius: var(--ax-border-radius-full);
 }

 .navds-skeleton--rectangle {
@@ -45,23 +45,20 @@
 }

 .navds-skeleton--rounded {
-  border-radius: var(--a-border-radius-xlarge);
+  border-radius: var(--ax-border-radius-xlarge);
 }

@keyframes akselSkeletonAnimation {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0.4;
+  50% {
+    opacity: 0.5;
  }
 }

@media (forced-colors: active) {
  .navds-skeleton {
    forced-color-adjust: none;
-    background-color: var(--a-surface-neutral);
+    background-color: canvastext;
    animation-duration: 2s;
+    opacity: 0.2;
  }
 }
@@ -1,47 +1,44 @@
 .navds-stepper {
-  --navds-stepper-circle-size: 1.75rem;
-  --navds-stepper-border-width: 2px;
-  --navds-stepper-line-length: 1rem;
+  --__axc-stepper-circle-size: 1.75rem;
+  --__axc-stepper-border-width: 2px;
+  --__axc-stepper-line-length: 1rem;

-  color: var(--ac-stepper-text, var(--a-surface-action));
-  font-weight: 600;
+  color: var(--ax-text-accent);
+  font-weight: var(--ax-font-weight-bold);
  line-height: 1;
  list-style: none;
  padding-left: 0;
  margin: 0;
 }

-.navds-stepper--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-1] auto [step-start] var(--__axc-stepper-circle-size)
    [line-2 step-end] auto;
-  grid-template-columns: var(--navds-stepper-circle-size) auto;
+  grid-template-columns: var(--__axc-stepper-circle-size) auto;
  justify-items: flex-start;
-  gap: 0.5rem;
+  gap: var(--ax-spacing-2);
 }

 .navds-stepper__line {
-  background-color: var(--ac-stepper-line, var(--a-border-default));
-  width: var(--navds-stepper-border-width);
+  background-color: var(--ax-border-accent);
+  width: var(--__axc-stepper-border-width);
  height: 100%;
-  min-height: var(--navds-stepper-line-length);
+  min-height: var(--__axc-stepper-line-length);
  justify-self: center;
  grid-column: 1;
+
+  .navds-stepper__item--non-interactive & {
+    background-color: var(--ax-border-neutral-strong);
+  }
 }

-.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));
+/* Line before non-interactive step */
+.navds-stepper__item:has(+ .navds-stepper__item > .navds-stepper__step[data-interactive="false"]) {
+  .navds-stepper__line--2 {
+    background-color: var(--ax-border-neutral-strong);
+  }
 }

 .navds-stepper__line--1 {
@@ -51,110 +48,136 @@

 .navds-stepper__line--2 {
  grid-row: line-2;
-}

-:where(.navds-stepper__item:last-of-type) .navds-stepper__line--2 {
-  display: none;
+  /* Hide last line under item */
+  .navds-stepper__item:last-of-type & {
+    display: none;
+  }
 }

 .navds-stepper__step {
  grid-row: 2 / -1;
  grid-column: 1 / -1;
  display: grid;
-  grid-template-columns: [circle] var(--navds-stepper-circle-size) [content] auto;
-  gap: var(--a-spacing-2);
+  grid-template-columns: [circle] var(--__axc-stepper-circle-size) [content] auto;
+  gap: var(--ax-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;
-}
+  padding: var(--__axc-stepper-border-width);
+  margin: calc(var(--__axc-stepper-border-width) * -1) calc(var(--__axc-stepper-border-width) * -1)
+    var(--__axc-stepper-circle-size);

-.navds-stepper__item:last-child .navds-stepper__step {
-  margin-bottom: 0;
-}
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 4px;

-@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);
+    /* Isolate item to make outline show above line--2 */
    isolation: isolate;
  }
+
+  /* Remove last item bottom margin */
+  .navds-stepper__item:last-child & {
+    margin-bottom: 0;
+  }
+
+  &:is(button) {
+    appearance: none;
+    border: none;
+    background-color: transparent;
+    font: inherit;
+    color: inherit;
+    text-align: inherit;
+  }
 }

 .navds-stepper__circle {
  grid-column: circle;
  display: inline-grid;
  place-items: center;
-  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);
+  width: var(--__axc-stepper-circle-size);
+  height: var(--__axc-stepper-circle-size);
+  border: var(--__axc-stepper-border-width) solid currentColor;
+  border-radius: var(--ax-border-radius-full);
  line-height: 1;
 }

 .navds-stepper__circle--success {
-  border: none;
  background: none;
-  font-size: 1.75rem;
-  color: var(--a-text-on-action);
-  background-color: var(--ac-stepper-text, var(--a-surface-action));
+  font-size: var(--__axc-stepper-circle-size);
+}
+
+.navds-stepper__step[data-interactive="true"] {
+  color: var(--ax-text-accent);
+  border-radius: var(--ax-border-radius-medium);
+  text-decoration: none;
+
+  & .navds-stepper__content {
+    text-decoration: underline;
+    text-underline-offset: 0.1em;
+    text-decoration-thickness: 0.05em;
+  }
+
+  &:hover,
+  &:active {
+    & .navds-stepper__content {
+      text-decoration-thickness: 0.111em;
+    }
+  }
+
+  &:hover {
+    & .navds-stepper__circle {
+      color: var(--ax-text-accent-strong);
+    }
+  }
+
+  & .navds-stepper__circle {
+    color: var(--ax-text-accent);
+    border-color: var(--ax-border-accent-strong);
+  }
+
+  &[data-active="true"] {
+    & .navds-stepper__content {
+      color: var(--ax-text-accent-strong);
+      text-decoration: none;
+    }
+
+    & .navds-stepper__circle {
+      color: var(--ax-text-accent-contrast);
+      background-color: var(--ax-bg-accent-strong-pressed);
+      border-color: var(--ax-bg-accent-strong-pressed);
+    }
+  }
+
+  &[data-active="false"] {
+    &:hover {
+      & .navds-stepper__circle {
+        background-color: var(--ax-bg-accent-moderate-hoverA);
+        border-color: var(--ax-border-accent-strong);
+      }
+    }
+  }
+}
+
+.navds-stepper__step[data-interactive="false"] {
+  color: var(--ax-text-neutral);
+  cursor: default;
+
+  & .navds-stepper__circle {
+    color: var(--ax-text-neutral);
+    border-color: var(--ax-border-neutral-strong);
+  }
+
+  &[data-active="true"] {
+    & .navds-stepper__content {
+      color: var(--ax-text-neutral-strong);
+    }
+
+    & .navds-stepper__circle {
+      color: var(--ax-text-neutral-contrast);
+      background-color: var(--ax-bg-neutral-strong-pressed);
+      border-color: var(--ax-bg-neutral-strong-pressed);
+    }
+  }
 }

 .navds-stepper__content {
@@ -165,144 +188,81 @@ button.navds-stepper__step {
 }

 /* 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;
+.navds-stepper[data-orientation="horizontal"] {
+  display: flex;
+  align-items: flex-start;
+  text-align: center;
+
+  & .navds-stepper__line {
+    height: var(--__axc-stepper-border-width);
+    width: 100%;
+    min-height: auto;
+    grid-row: 1;
+    display: block;
+    align-self: center;
+  }
+
+  & .navds-stepper__line--1 {
+    grid-column: line-1;
+  }
+
+  & .navds-stepper__line--2 {
+    grid-column: line-2;
+  }
+
+  & .navds-stepper__item {
+    flex: 1 1 100%;
+    grid-template-columns:
+      [line-1-start] 1fr [step-start] auto [line-1-end] var(--__axc-stepper-circle-size)
+      [line-2-start] auto [step-end] 1fr [line-2-end];
+    grid-template-rows: var(--__axc-stepper-circle-size) auto;
+
+    &:first-of-type .navds-stepper__line--1,
+    &:last-of-type .navds-stepper__line--2 {
+      visibility: hidden;
+    }
+  }
+
+  & .navds-stepper__step {
+    grid-row: 1 / -1;
+    grid-column: step;
+    display: grid;
+    grid-template-rows: [circle] var(--__axc-stepper-circle-size) [content] auto;
+    grid-template-columns:
+      [content-start] auto [circle] var(--__axc-stepper-circle-size)
+      [content-end] auto;
+    place-items: center center;
+    margin-bottom: 0;
+  }
+
+  & .navds-stepper__circle {
+    grid-row: circle;
+    grid-column: 2;
+  }
+
+  & .navds-stepper__content {
+    grid-row: content;
+    grid-column: 1 / -1;
+    max-width: 24ch;
+  }
 }

-: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;
-}
+@media (forced-colors: active) {
+  .navds-stepper__circle.navds-stepper__circle {
+    border: 0;
+    outline: 2px solid ButtonText;
+    outline-offset: 2px;
+  }

-:where(.navds-stepper--horizontal) .navds-stepper__line--1 {
-  grid-column: line-1;
-}
+  .navds-stepper__line.navds-stepper__line {
+    background-color: ButtonText;
+  }

-: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));
+  .navds-stepper__step[data-active="true"][data-interactive] {
+    .navds-stepper__circle {
+      forced-color-adjust: none;
+      background-color: highlight;
+      color: highlighttext;
+    }
+  }
 }
@@ -1,5 +1,5 @@
 .navds-tabs__tablist-wrapper {
-  box-shadow: inset 0 -1px 0 0 var(--ac-tabs-border, var(--a-border-divider));
+  box-shadow: inset 0 -1px var(--ax-border-neutral-subtle);
  width: 100%;
  display: flex;
 }
@@ -9,116 +9,116 @@
  max-width: 100%;
  width: 100%;
  scroll-behavior: smooth;
-  -ms-overflow-style: none; /* for Internet Explorer, Edge */
-  scrollbar-width: none; /* for Firefox */
+  -ms-overflow-style: none; /* Internet Explorer, Edge */
+  scrollbar-width: none; /*  Firefox */
  overflow-x: scroll;
-}

-.navds-tabs__tablist::-webkit-scrollbar {
-  display: none; /* for Chrome, Safari, and Opera */
+  &::-webkit-scrollbar {
+    display: none; /* Chrome, Safari, and Opera */
+  }
 }

 .navds-tabs__scroll-button {
-  padding: var(--a-spacing-3) var(--a-spacing-4);
+  padding: var(--ax-spacing-3) var(--ax-spacing-4);
  width: 2.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
+
+  & svg {
+    font-size: 1.25rem;
+    flex-shrink: 0;
+  }
+
+  .navds-tabs--small & {
+    padding: var(--ax-spacing-1-alt) var(--ax-spacing-4);
+    width: 2rem;
+  }
 }

 .navds-tabs__scroll-button--hidden {
  visibility: hidden;
 }

-.navds-tabs__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);
+  padding: var(--ax-spacing-3) var(--ax-spacing-4);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: none;
  border: none;
-  color: var(--ac-tabs-text, var(--a-text-default));
+  color: var(--ax-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));
-}
+  --__axc-tabs-line-width: 0;
+  --__axc-tabs-line-color: var(--ax-border-neutral-subtle);

-.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));
-}
+  box-shadow: inset 0 var(--__axc-tabs-line-width) var(--__axc-tabs-line-color);
+  transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);

-.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));
-}
+  &:hover {
+    --__axc-tabs-line-width: -4px;
+  }

-@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));
+  &[data-state="active"] {
+    --__axc-tabs-line-width: -4px;
+    --__axc-tabs-line-color: var(--ax-border-accent-strong);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: -2px;
  }
 }

 .navds-tabs__tab-inner {
  display: flex;
  align-items: center;
-  gap: var(--a-spacing-1);
-}
+  gap: var(--ax-spacing-1);

-.navds-tabs__tab-inner > * {
-  display: inline-flex;
-}
+  & > * {
+    display: inline-flex;
+  }

-.navds-tabs__tab-inner svg {
-  flex-shrink: 0;
-}
+  & svg {
+    flex-shrink: 0;
+  }

-.navds-tabs__tab-icon--top > .navds-tabs__tab-inner {
-  flex-direction: column;
-  gap: 0;
+  .navds-tabs__tab-icon--top > & {
+    flex-direction: column;
+    gap: 0;
+  }
 }

 .navds-tabs__tab--small {
  min-height: 2rem;
-  padding: var(--a-spacing-1-alt) var(--a-spacing-4);
+  padding: var(--ax-spacing-1-alt) var(--ax-spacing-4);
 }

 .navds-tabs__tab-icon--top,
 .navds-tabs__tab--small.navds-tabs__tab-icon--top {
-  padding: var(--a-spacing-1) var(--a-spacing-4);
+  padding: var(--ax-spacing-1) var(--ax-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,
+.navds-tabs__tab--small.navds-tabs__tab--icon-only,
+.navds-tabs__tab--small.navds-tabs__tab-icon--top {
+  & svg {
+    font-size: 1.25rem;
+  }
 }

 .navds-tabs__tab--small svg {
  font-size: 1rem;
 }

-.navds-tabs__tab--icon-only svg,
-.navds-tabs__tab-icon--top svg {
-  font-size: 1.5rem;
+.navds-tabs__tab--icon-only,
+.navds-tabs__tab-icon--top {
+  & svg {
+    font-size: 1.5rem;
+  }
 }

 .navds-tabs__tab--fill {
@@ -126,29 +126,22 @@
 }

 .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);
-  }
+  outline: 2px solid var(--ax-border-focus);
+  outline-offset: -2px;
 }

@media (forced-colors: active) {
-  .navds-tabs__tab[aria-selected="true"] {
+  .navds-tabs__tab[data-state="active"] {
    border-bottom: 3px solid canvastext;
-    padding-block-end: calc(var(--a-spacing-3) - 3px);
+    padding-block-end: calc(var(--ax-spacing-3) - 3px);
  }

-  .navds-tabs__tab--small[aria-selected="true"] {
-    padding-block-end: calc(var(--a-spacing-1-alt) - 3px);
+  .navds-tabs__tab--small[data-state="active"] {
+    padding-block-end: calc(var(--ax-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);
+  .navds-tabs__tab-icon--top[data-state="active"],
+  .navds-tabs__tab--small.navds-tabs__tab-icon--top[data-state="active"] {
+    padding-block-end: calc(var(--ax-spacing-1) - 3px);
  }
 }
@@ -1,180 +1,112 @@
 .navds-toggle-group__wrapper {
  display: grid;
  justify-items: start;
-  gap: var(--a-spacing-2);
+  gap: var(--ax-spacing-2);
 }

 .navds-toggle-group__wrapper--fill {
  justify-items: initial;
 }

+/* Main Togglegroup */
 .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);
+  border-radius: var(--ax-border-radius-medium);
+  background-color: transparent;
+  box-shadow: inset 0 0 0 1px var(--ax-border-default);
+  padding: var(--ax-spacing-1);
+  gap: var(--ax-spacing-1);
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
 }

-.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));
-}
-
+/* Button */
 .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;
+  padding: var(--ax-spacing-1) var(--ax-spacing-3);
+  min-height: 2.5rem;
  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);
+  background-color: transparent;
+  color: var(--ax-text-default);
+  border-radius: var(--ax-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);
+  &:hover {
+    background-color: var(--ax-bg-accent-moderate-hoverA);
+    color: var(--ax-text-default);
  }
-}

-.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);
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
  }
-}

-.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);
+  &[aria-checked="true"] {
+    background-color: var(--ax-bg-accent-strong-pressed);
+    color: var(--ax-text-accent-contrast);
  }
 }

 .navds-toggle-group__button-inner {
  display: flex;
  align-items: center;
-  gap: var(--a-spacing-2);
-  font-weight: inherit;
+  gap: var(--ax-spacing-2);
+
+  > * {
+    flex-shrink: 0;
+  }
+
+  > svg {
+    font-size: var(--ax-font-size-heading-medium);
+  }
 }

-.navds-toggle-group__button-inner > * {
-  flex-shrink: 0;
+/* Modifier neutral variant */
+:where(.navds-toggle-group--neutral) .navds-toggle-group__button {
+  &:hover {
+    background-color: var(--ax-bg-neutral-moderate-hoverA);
+  }
+
+  &[aria-checked="true"] {
+    background-color: var(--ax-bg-neutral-strong-pressed);
+    color: var(--ax-text-neutral-contrast);
+  }
 }

-.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;
+/* Modifier small size */
+.navds-toggle-group--small {
+  & .navds-toggle-group__button {
+    padding: var(--ax-spacing-05) var(--ax-spacing-3);
+    min-height: 1.5rem;
+  }
+
+  & .navds-toggle-group__button-inner > svg {
+    font-size: var(--ax-font-size-xlarge);
+  }
 }

+/* High contrast */
@media (forced-colors: active) {
  .navds-toggle-group {
    border: 2px solid transparent;
  }

+  .navds-toggle-group__button[aria-checked="true"]:hover,
  .navds-toggle-group__button:hover {
+    background-color: highlighttext;
    color: highlight;
+    outline: 1px solid highlight;
  }

-  .navds-toggle-group__button[aria-checked="true"],
-  .navds-toggle-group__button[aria-pressed="true"] {
+  .navds-toggle-group__button[aria-checked="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;
  }
@@ -96,7 +96,7 @@
 }

 .navds-combobox__selected-options {
-  gap: var(--__ac-combobox-wrapper-inner-padding);
+  gap: 0;
  align-items: center;
 }

@@ -120,6 +120,14 @@
  padding-left: 0.25rem;
 }

+.navds-combobox__selected-options[data-type="multiple"] {
+  gap: var(--__ac-combobox-wrapper-inner-padding);
+}
+
+.navds-combobox__selected-options > li:only-child > .navds-combobox__input {
+  margin-left: var(--a-spacing-1);
+}
+
 .navds-combobox__input-wrapper {
  width: 100%;
 }
@@ -129,7 +137,6 @@
  border: none;
  padding: 0;
  margin: 0;
-  margin-left: var(--a-spacing-1);
  min-width: 10ch;
  width: 100%;
  height: var(--__ac-combobox-input-height);
@@ -1,12 +1,3 @@
-/**
-* 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
 */
@@ -163,6 +154,13 @@
 /**
 * FileUpload.Item
 */
+.navds-file-upload :is(ul, li),
+ul:has(> li.navds-file-item),
+li.navds-file-item {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}

 .navds-file-item__inner {
  outline: 1px solid var(--a-border-subtle);
@@ -22,7 +22,7 @@
    box-shadow: none;
  }

-  .navds-select__input.navds-select__input.navds-select__input:focus-visible {
+  .navds-select__input.navds-select__input.navds-select__input:focus {
    outline: 2px solid highlight;
    outline-offset: 2px;
  }
@@ -33,19 +33,12 @@
  cursor: pointer;
 }

-.navds-select__input:focus-visible {
+.navds-select__input:focus {
  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;
@@ -149,6 +149,14 @@
  color: var(--ac-switch-thumb-icon-checked, var(--a-icon-action-selected));
 }

+.navds-switch__input:checked ~ .navds-switch__track .navds-switch__checkmark {
+  visibility: visible;
+}
+
+.navds-switch__checkmark {
+  visibility: hidden;
+}
+
@media (hover: hover) and (pointer: fine) {
  .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
    transform: translateX(0.125rem);
@@ -14,6 +14,10 @@
  max-height: 100%;
  max-width: 100%;
  color: var(--a-text-default);
+
+  /* In case Modal is opened with `show()`, in eg. Vergic screensharing */
+  inset: 0;
+  z-index: 9999;
 }

 .navds-modal[open] {
@@ -24,6 +28,7 @@

 .navds-modal--polyfilled {
  top: 50%;
+  bottom: unset; /* Overrides inset: 0 from .navds-modal */
  transform: translate(0, -50%);

  /* From polyfill (dialog-polyfill/dist/dialog-polyfill.css): */
@@ -132,6 +137,9 @@
  overflow: auto;
  overscroll-behavior: contain;
  position: relative; /* Needed to make sr-only elements position correctly - see Storybook */
+}
+
+.navds-modal:not(.navds-modal--polyfilled) .navds-modal__body {
  background:
    linear-gradient(var(--__ac-modal-bg) 30%, transparent) top,
    linear-gradient(transparent, var(--__ac-modal-bg) 60%) bottom,
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "7.5.2",
+  "version": "7.7.0",
  "description": "CSS for NAV Designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -27,7 +27,7 @@
    "css:get-version": "node config/get-version.js"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^7.5.2",
+    "@navikt/ds-tokens": "^7.7.0",
    "autoprefixer": "^10.4.20",
    "cssnano": "6.0.0",
    "fast-glob": "3.2.11",
@@ -16,6 +16,10 @@
  padding: var(--a-spacing-05) var(--a-spacing-1-alt) var(--a-spacing-05) var(--a-spacing-05);
 }

+.navds-read-more--large .navds-read-more__button {
+  padding: var(--a-spacing-3) var(--a-spacing-1-alt) var(--a-spacing-3) var(--a-spacing-05);
+}
+
@media (forced-colors: active) {
  .navds-read-more__button {
    background-color: ButtonFace;
@@ -1,5 +1,53 @@
 # @navikt/ds-react

+## 7.7.0
+
+### Minor Changes
+
+- CopyButton: Removed prop `activeTitle`. Use `activeText` instead. ([#3426](https://github.com/navikt/aksel/pull/3426))
+
+- Combobox: :boom: Removed prop `toggleListButtonLabel` ([#3409](https://github.com/navikt/aksel/pull/3409))
+
+### Patch Changes
+
+- Combobox: Hid buttons from screen readers, added `title` on clear button, removed sr-only text on toggle list button. ([#3409](https://github.com/navikt/aksel/pull/3409))
+
+- InternalHeader.UserButton: Remove `title`-attribute on icon and improved types. ([#3424](https://github.com/navikt/aksel/pull/3424))
+
+- CopyButton: Fix issue where state changes are announced multiple times using VO in Chrome ([#3374](https://github.com/navikt/aksel/pull/3374))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@7.7.0
+  - @navikt/aksel-icons@7.7.0
+
+## 7.6.0
+
+### Minor Changes
+
+- ActionMenu: Added 'align'-prop to 'ActionMenu.Content'. This allows menu to 'start' or 'end' align in reference to anchor. ([#3414](https://github.com/navikt/aksel/pull/3414))
+
+- ReadMore: Added size 'large'. ([#3372](https://github.com/navikt/aksel/pull/3372))
+
+### Patch Changes
+
+- DatePicker/MonthPicker: Remove pointerEvents=none on CalendarIcon so that the title shows up as tooltip on hover ([#3390](https://github.com/navikt/aksel/pull/3390))
+
+- Combobox: Single-select now shows cursor closer to selected item. ([#3384](https://github.com/navikt/aksel/pull/3384))
+
+- Updated dependencies [[`9c5b32f`](https://github.com/navikt/aksel/commit/9c5b32f9bae885585b5f50b637505017482b1d59)]:
+  - @navikt/aksel-icons@7.6.0
+  - @navikt/ds-tokens@7.6.0
+
+## 7.5.3
+
+### Patch Changes
+
+- Allow RC versions of React 19 through peerDependencies ([#3391](https://github.com/navikt/aksel/pull/3391))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@7.5.3
+  - @navikt/aksel-icons@7.5.3
+
 ## 7.5.2

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "7.5.2",
+  "version": "7.7.0",
  "description": "React components from the Norwegian Labour and Welfare Administration.",
  "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
  "license": "MIT",
@@ -604,8 +604,8 @@
  "dependencies": {
    "@floating-ui/react": "0.25.4",
    "@floating-ui/react-dom": "^2.0.9",
-    "@navikt/aksel-icons": "^7.5.2",
-    "@navikt/ds-tokens": "^7.5.2",
+    "@navikt/aksel-icons": "^7.7.0",
+    "@navikt/ds-tokens": "^7.7.0",
    "clsx": "^2.1.0",
    "date-fns": "^3.0.0",
    "react-day-picker": "8.10.1"
@@ -629,7 +629,7 @@
  },
  "peerDependencies": {
    "@types/react": ">=17.0.30",
-    "react": ">=17.0.0"
+    "react": ">=17.0.0 || >19.0.0-rc"
  },
  "peerDependenciesMeta": {
    "@types/react": {
@@ -1,37 +1,21 @@
-import { StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React, { useState } from "react";
 import { Accordion, AccordionProps } from ".";
-import AccordionContent from "./AccordionContent";
-import AccordionHeader from "./AccordionHeader";
-import AccordionItem from "./AccordionItem";

 export default {
  title: "ds-react/Accordion",
  component: Accordion,
-  subcomponents: {
-    AccordionItem,
-    AccordionContent,
-    AccordionHeader,
-  },
  parameters: {
    chromatic: { disable: true },
  },
  decorators: [
    (Story) => (
-      <div
-        style={{
-          width: "600px",
-          minHeight: "100vh",
-          display: "flex",
-          flexDirection: "column",
-          gap: "1rem",
-        }}
-      >
+      <div style={{ width: "500px", minHeight: "100vh" }}>
        <Story />
      </div>
    ),
  ],
-};
+} satisfies Meta<typeof Accordion>;

 type Story = StoryObj<typeof Accordion>;

@@ -60,46 +44,21 @@ const SmallContent = () => (
  </Accordion.Content>
 );

-const Item = (props) => {
-  const [open, setOpen] = useState(false);
-
-  if (props.defaultOpen) {
-    return (
-      <Accordion.Item
-        defaultOpen={props.defaultOpen}
-        onOpenChange={console.log}
-      >
-        <Accordion.Header>Accordion header text</Accordion.Header>
-        <SmallContent />
-      </Accordion.Item>
-    );
-  }
-
-  return props.controlled ? (
-    <Accordion.Item open={open} onOpenChange={console.log}>
-      <Accordion.Header onClick={() => setOpen(!open)}>
-        Accordion header text
-      </Accordion.Header>
-      <Content />
-    </Accordion.Item>
-  ) : (
-    <Accordion.Item onOpenChange={console.log}>
-      <Accordion.Header>Accordion header text</Accordion.Header>
-      <Content />
-    </Accordion.Item>
-  );
-};
+const Item = ({ defaultOpen = false }) => (
+  <Accordion.Item defaultOpen={defaultOpen} onOpenChange={console.log}>
+    <Accordion.Header>Accordion header text</Accordion.Header>
+    {defaultOpen ? <SmallContent /> : <Content />}
+  </Accordion.Item>
+);

 export const Controls: Story = {
-  render: ({ ...props }) => {
+  render: (props) => {
    return (
-      <div style={{ width: 500 }}>
-        <Accordion {...props}>
-          {[...Array(4)].map((_, y) => (
-            <Item key={y} {...props} />
-          ))}
-        </Accordion>
-      </div>
+      <Accordion {...props}>
+        {[...Array(4)].map((_, y) => (
+          <Item key={y} />
+        ))}
+      </Accordion>
    );
  },
  argTypes: {
@@ -128,13 +87,11 @@ export const Controls: Story = {
 export const DefaultOpen: Story = {
  render: () => {
    return (
-      <div style={{ width: 500 }}>
-        <Accordion>
-          {[...Array(4)].map((_, y) => (
-            <Item key={y} defaultOpen={y === 2} />
-          ))}
-        </Accordion>
-      </div>
+      <Accordion>
+        {[...Array(4)].map((_, y) => (
+          <Item key={y} defaultOpen={y === 2} />
+        ))}
+      </Accordion>
    );
  },
 };
@@ -142,7 +99,7 @@ export const DefaultOpen: Story = {
 export const Variants: Story = {
  render: () => {
    return (
-      <div style={{ width: 500 }} className="colgap">
+      <div className="colgap">
        <h3>Default</h3>
        <Accordion>
          {[...Array(2)].map((_, y) => (
@@ -166,22 +123,20 @@ export const ControlledState: Story = {
    const [open2, setOpen2] = useState(false);

    return (
-      <div style={{ width: 500 }}>
-        <Accordion>
-          <Accordion.Item open={open}>
-            <Accordion.Header onClick={() => setOpen(!open)}>
-              Accordion header text
-            </Accordion.Header>
-            <Content />
-          </Accordion.Item>
-          <Accordion.Item open={open2}>
-            <Accordion.Header onClick={() => setOpen2(!open2)}>
-              Accordion header text
-            </Accordion.Header>
-            <Content />
-          </Accordion.Item>
-        </Accordion>
-      </div>
+      <Accordion>
+        <Accordion.Item open={open}>
+          <Accordion.Header onClick={() => setOpen(!open)}>
+            Accordion header text
+          </Accordion.Header>
+          <Content />
+        </Accordion.Item>
+        <Accordion.Item open={open2}>
+          <Accordion.Header onClick={() => setOpen2(!open2)}>
+            Accordion header text
+          </Accordion.Header>
+          <Content />
+        </Accordion.Item>
+      </Accordion>
    );
  },
 };
@@ -216,7 +171,7 @@ const headingSizes: AccordionProps["headingSize"][] = [

 export const Size: Story = {
  render: () => (
-    <div style={{ width: 500 }} className="colgap">
+    <div className="colgap">
      {sizes.map((size) => (
        <SingleHeaderAccordion key={size} size={size} />
      ))}
@@ -226,7 +181,7 @@ export const Size: Story = {

 export const HeadingSize: Story = {
  render: () => (
-    <div style={{ width: 500 }} className="colgap">
+    <div className="colgap">
      {headingSizes.map((size) => (
        <SingleHeaderAccordion key={size} headingSize={size} />
      ))}
@@ -237,14 +192,14 @@ export const HeadingSize: Story = {
 export const Indent: Story = {
  render: () => {
    return (
-      <div style={{ width: 500 }} className="colgap">
-        <h3>No indent</h3>
+      <div className="colgap">
+        <h3>Indent</h3>
        <Accordion indent>
          {[...Array(2)].map((_, y) => (
            <Item key={y} defaultOpen />
          ))}
        </Accordion>
-        <h3>Indent</h3>
+        <h3>No indent</h3>
        <Accordion indent={false}>
          {[...Array(2)].map((_, y) => (
            <Item key={y} defaultOpen />
@@ -10,6 +10,7 @@ import { CheckmarkIcon, FilesIcon } from "@navikt/aksel-icons";
 import { Label } from "../typography";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import copy from "../util/copy";
+import { useI18n } from "../util/i18n/i18n.context";

 export interface CopyButtonProps
  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
@@ -32,7 +33,7 @@ export interface CopyButtonProps
  text?: string;
  /**
   * Text shown when button is clicked.
-   * Only set if used with `text`-prop.
+   * Will be used as accessible label (title) if `text`-prop is not set.
   * @default "Kopiert!"
   */
  activeText?: string;
@@ -62,11 +63,6 @@ export interface CopyButtonProps
   * @default "Kopier"
   */
  title?: string;
-  /**
-   * Accessible label for icon in active-state (ignored if text is set).
-   * @default "Kopiert"
-   */
-  activeTitle?: string;
  /**
   * Icon position in button.
   * @default "left"
@@ -91,15 +87,14 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
      className,
      copyText,
      text,
-      activeText = "Kopiert!",
+      activeText,
      variant = "neutral",
      size = "medium",
      onActiveChange,
      icon,
      activeIcon,
      activeDuration = 2000,
-      title = "Kopier",
-      activeTitle = "Kopiert",
+      title,
      iconPosition = "left",
      onClick,
      ...rest
@@ -108,6 +103,7 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
  ) => {
    const [active, setActive] = useState(false);
    const timeoutRef = useRef<number>();
+    const translate = useI18n("CopyButton");

    useEffect(() => {
      return () => {
@@ -127,19 +123,21 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
      }, activeDuration);
    };

+    const activeString = activeText || translate("activeText");
+
    const copyIcon = (
      <span className="navds-copybutton__icon">
        {active
          ? activeIcon ?? (
              <CheckmarkIcon
                aria-hidden={!!text}
-                title={text ? undefined : activeTitle}
+                title={text ? undefined : activeString}
              />
            )
          : icon ?? (
              <FilesIcon
                aria-hidden={!!text}
-                title={text ? undefined : title}
+                title={text ? undefined : title || translate("title")}
              />
            )}
      </span>
@@ -150,7 +148,6 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
        ref={ref}
        type="button"
        {...rest}
-        aria-live="polite"
        className={cl(
          "navds-copybutton",
          className,
@@ -166,24 +163,11 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
      >
        <span className="navds-copybutton__content">
          {iconPosition === "left" && copyIcon}
-          {text &&
-            (active ? (
-              <Label
-                as="span"
-                size={size === "medium" ? "medium" : "small"}
-                aria-live="polite"
-              >
-                {activeText}
-              </Label>
-            ) : (
-              <Label
-                as="span"
-                size={size === "medium" ? "medium" : "small"}
-                aria-live="polite"
-              >
-                {text}
-              </Label>
-            ))}
+          {text && (
+            <Label as="span" size={size === "medium" ? "medium" : "small"}>
+              {active ? activeString : text}
+            </Label>
+          )}
          {iconPosition === "right" && copyIcon}
        </span>
      </button>
@@ -27,6 +27,10 @@ export const Default: Story = {
      control: { type: "radio" },
      options: ["neutral", "action"],
    },
+    iconPosition: {
+      control: { type: "radio" },
+      options: ["left", "right"],
+    },
  },
  args: {
    size: "medium",
@@ -34,6 +38,7 @@ export const Default: Story = {
    copyText: "3.14",
    text: "",
    activeText: "",
+    title: "",
  },
 };

@@ -5,10 +5,11 @@ import { DateRange, DayPicker, isMatch } from "react-day-picker";
 import { omit } from "../../util";
 import { useId } from "../../util/hooks";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
+import { useDateLocale } from "../../util/i18n/i18n.context";
 import { DateContext } from "../context";
 import { DatePickerInput } from "../parts/DateInput";
 import { DateWrapper } from "../parts/DateWrapper";
-import { getLocaleFromString, labels } from "../utils";
+import { getLocaleFromString } from "../utils";
 import DatePickerStandalone from "./DatePickerStandalone";
 import Caption from "./parts/Caption";
 import DropdownCaption from "./parts/DropdownCaption";
@@ -66,7 +67,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
  (
    {
      children,
-      locale = "nb",
+      locale,
      dropdownCaption,
      disabled = [],
      disableWeekends = false,
@@ -85,6 +86,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
    },
    ref,
  ) => {
+    const langProviderLocale = useDateLocale();
    const ariaId = useId(id);
    const [open, setOpen] = useState(_open ?? false);

@@ -114,7 +116,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(

    const DatePickerComponent = (
      <DayPicker
-        locale={getLocaleFromString(locale)}
+        locale={locale ? getLocaleFromString(locale) : langProviderLocale}
        mode={mode}
        onSelect={handleSelect}
        selected={selected ?? selectedDates}
@@ -134,7 +136,6 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
        }}
        weekStartsOn={1}
        initialFocus={false}
-        labels={labels as any}
        modifiers={{
          weekend: (day) => disableWeekends && isWeekend(day),
        }}
@@ -3,7 +3,8 @@ import { isWeekend } from "date-fns";
 import React, { forwardRef } from "react";
 import { DateRange, DayPicker, isMatch } from "react-day-picker";
 import { omit } from "../../util";
-import { getLocaleFromString, labels } from "../utils";
+import { useDateLocale } from "../../util/i18n/i18n.context";
+import { getLocaleFromString } from "../utils";
 import Caption from "./parts/Caption";
 import DropdownCaption from "./parts/DropdownCaption";
 import { HeadRow } from "./parts/HeadRow";
@@ -49,7 +50,7 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
  (
    {
      className,
-      locale = "nb",
+      locale,
      dropdownCaption,
      disabled = [],
      disableWeekends = false,
@@ -63,6 +64,7 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
    },
    ref,
  ) => {
+    const langProviderLocale = useDateLocale();
    const [selectedDates, setSelectedDates] = React.useState<
      Date | Date[] | DateRange | undefined
    >(defaultSelected);
@@ -83,7 +85,7 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
        className={cl("navds-date__standalone-wrapper", className)}
      >
        <DayPicker
-          locale={getLocaleFromString(locale)}
+          locale={locale ? getLocaleFromString(locale) : langProviderLocale}
          mode={mode}
          onSelect={handleSelect}
          selected={selected ?? selectedDates}
@@ -103,7 +105,6 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
          }}
          weekStartsOn={1}
          initialFocus={false}
-          labels={labels as any}
          modifiers={{
            weekend: (day) => disableWeekends && isWeekend(day),
          }}
@@ -3,6 +3,8 @@ import { CaptionProps, useDayPicker, useNavigation } from "react-day-picker";
 import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
 import { Button } from "../../../button";
 import { Label } from "../../../typography";
+import { useI18n } from "../../../util/i18n/i18n.context";
+import { getTranslations } from "../../utils";
 import WeekRow from "./WeekRow";

 /**
@@ -11,13 +13,10 @@ import WeekRow from "./WeekRow";
 export const DatePickerCaption = ({ displayMonth, id }: CaptionProps) => {
  const { goToMonth, nextMonth, previousMonth } = useNavigation();
  const {
-    labels: { labelPrevious, labelNext },
    formatters: { formatCaption },
    locale,
  } = useDayPicker();
-
-  const previousLabel = labelPrevious(previousMonth, { locale });
-  const nextLabel = labelNext(nextMonth, { locale });
+  const translate = useI18n("DatePicker", getTranslations(locale.code));

  return (
    <>
@@ -26,7 +25,7 @@ export const DatePickerCaption = ({ displayMonth, id }: CaptionProps) => {
          variant="tertiary"
          disabled={!previousMonth}
          onClick={() => previousMonth && goToMonth(previousMonth)}
-          icon={<ArrowLeftIcon title={previousLabel} />}
+          icon={<ArrowLeftIcon title={translate("goToPreviousMonth")} />}
          className="navds-date__caption-button"
          type="button"
        />
@@ -40,7 +39,7 @@ export const DatePickerCaption = ({ displayMonth, id }: CaptionProps) => {
          {formatCaption(displayMonth, { locale })}
        </Label>
        <Button
-          icon={<ArrowRightIcon title={nextLabel} />}
+          icon={<ArrowRightIcon title={translate("goToNextMonth")} />}
          onClick={() => nextMonth && goToMonth(nextMonth)}
          disabled={!nextMonth}
          variant="tertiary"
@@ -4,8 +4,8 @@ import { CaptionProps, useDayPicker, useNavigation } from "react-day-picker";
 import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
 import { Button } from "../../../button";
 import { Select } from "../../../form/select";
-import { getMonths, getYears } from "../../utils/get-dates";
-import { labelMonthDropdown, labelYearDropdown } from "../../utils/labels";
+import { useI18n } from "../../../util/i18n/i18n.context";
+import { getMonths, getTranslations, getYears } from "../../utils";
 import WeekRow from "./WeekRow";

 /**
@@ -17,9 +17,9 @@ export const DropdownCaption = ({ displayMonth, id }: CaptionProps) => {
    fromDate,
    toDate,
    formatters: { formatYearCaption, formatMonthCaption, formatCaption },
-    labels: { labelPrevious, labelNext },
    locale,
  } = useDayPicker();
+  const translate = useI18n("DatePicker", getTranslations(locale.code));

  if (!fromDate || !toDate) {
    console.warn("Using dropdownCaption required fromDate and toDate");
@@ -44,11 +44,6 @@ export const DropdownCaption = ({ displayMonth, id }: CaptionProps) => {
  ).reverse();
  const months = getMonths(fromDate, toDate, displayMonth);

-  const previousLabel = labelPrevious(previousMonth, { locale });
-  const nextLabel = labelNext(nextMonth, { locale });
-  const yearDropdownLabel = labelYearDropdown(locale);
-  const MonthDropdownLabel = labelMonthDropdown(locale);
-
  return (
    <>
      <div className="navds-date__caption">
@@ -64,14 +59,14 @@ export const DropdownCaption = ({ displayMonth, id }: CaptionProps) => {
          variant="tertiary"
          disabled={!previousMonth}
          onClick={() => previousMonth && goToMonth(previousMonth)}
-          icon={<ArrowLeftIcon title={previousLabel} />}
+          icon={<ArrowLeftIcon title={translate("goToPreviousMonth")} />}
          className="navds-date__caption-button"
          type="button"
        />

        <div className="navds-date__caption">
          <Select
-            label={MonthDropdownLabel}
+            label={translate("month")}
            hideLabel
            className="navds-date__caption__month"
            value={displayMonth.getMonth()}
@@ -84,7 +79,7 @@ export const DropdownCaption = ({ displayMonth, id }: CaptionProps) => {
            ))}
          </Select>
          <Select
-            label={yearDropdownLabel}
+            label={translate("year")}
            hideLabel
            value={displayMonth.getFullYear()}
            onChange={handleYearChange}
@@ -99,7 +94,7 @@ export const DropdownCaption = ({ displayMonth, id }: CaptionProps) => {
        </div>

        <Button
-          icon={<ArrowRightIcon title={nextLabel} />}
+          icon={<ArrowRightIcon title={translate("goToNextMonth")} />}
          onClick={() => nextMonth && goToMonth(nextMonth)}
          disabled={!nextMonth}
          variant="tertiary"
@@ -1,78 +1,80 @@
 /* https://github.com/gpbl/react-day-picker/blob/7f78cd5/src/components/WeekNumber/WeekNumber.tsx#L21 */
 import React from "react";
-import { Button, useDayPicker } from "react-day-picker";
-import { labelWeekNumber, labelWeekNumberButton } from "../../utils/labels";
+import { Button as RDPButton, useDayPicker } from "react-day-picker";
+import { Button } from "../../../button";
+import { UNSAFE_useAkselTheme } from "../../../provider";
+import { Detail } from "../../../typography";
+import { useI18n } from "../../../util/i18n/i18n.context";
+import { getTranslations } from "../../utils";

 export interface WeekNumberProps {
  /** The number of the week. */
  number: number;
  /** The dates in the week. */
  dates: Date[];
-  headerVersion?: boolean;
 }

 /**
 * https://github.com/gpbl/react-day-picker/tree/main/src/components/WeekNumber
 */
-function WeekNumber(props: WeekNumberProps): JSX.Element {
-  const { number: weekNumber, dates } = props;
+function WeekNumber({
+  number: weekNumber,
+  dates,
+}: WeekNumberProps): JSX.Element {
  const {
    onWeekNumberClick,
    styles,
    classNames,
    locale: { code },
  } = useDayPicker();
-
-  const weekLabel = labelWeekNumber({
-    week: Number(weekNumber),
-    localeCode: code,
-  });
+  const themeContext = UNSAFE_useAkselTheme(false);
+  const translate = useI18n("DatePicker", getTranslations(code));

  if (!onWeekNumberClick) {
    return (
-      <span
+      <Detail
+        as="span"
+        textColor="subtle"
        className={classNames.weeknumber}
        style={styles.weeknumber}
-        aria-label={weekLabel}
+        aria-label={translate("weekNumber", { week: weekNumber })}
      >
        {weekNumber}
-      </span>
+      </Detail>
    );
  }

-  const label = labelWeekNumberButton({
-    week: Number(weekNumber),
-    localeCode: code,
-  });
-
-  const handleClick: React.MouseEventHandler = function (e) {
-    onWeekNumberClick(weekNumber, dates, e);
-  };
-
-  if (props?.headerVersion) {
+  if (themeContext) {
    return (
      <Button
+        variant="secondary-neutral"
+        size="small"
        name="week-number"
-        aria-label={label}
-        className={classNames.weeknumber}
+        aria-label={translate("selectWeekNumber", { week: weekNumber })}
        style={styles.weeknumber}
-        onClick={handleClick}
-      >
-        {weekNumber}
-      </Button>
+        className="navds-date__weeknumber"
+        onClick={(event) => {
+          onWeekNumberClick(weekNumber, dates, event);
+        }}
+        icon={
+          <span className="navds-date__weeknumber-number">{weekNumber}</span>
+        }
+      />
    );
  }

  return (
-    <Button
+    <RDPButton
      name="week-number"
-      aria-label={label}
-      className={classNames.weeknumber}
+      aria-label={translate("selectWeekNumber", { week: weekNumber })}
      style={styles.weeknumber}
-      onClick={handleClick}
+      className={classNames.weeknumber}
+      onClick={(event) => {
+        onWeekNumberClick(weekNumber, dates, event);
+      }}
    >
      {weekNumber}
-    </Button>
+    </RDPButton>
  );
 }

@@ -3,13 +3,14 @@ import { useDayPicker } from "react-day-picker";
 import { Show } from "../../../layout/responsive";
 import { Detail } from "../../../typography";
 import { useId } from "../../../util/hooks";
+import { useI18n } from "../../../util/i18n/i18n.context";
+import { getTranslations } from "../../utils";
 import { getMonthWeeks } from "../../utils/get-month-weeks";
-import { labelWeek } from "../../utils/labels";
 import WeekNumber from "./WeekNumber";

 const WeekRow = ({ displayMonth }: { displayMonth: Date }) => {
  const { locale, fixedWeeks, onWeekNumberClick } = useDayPicker();
-
+  const translate = useI18n("DatePicker", getTranslations(locale.code));
  const labelId = useId();

  if (!onWeekNumberClick) {
@@ -32,7 +33,7 @@ const WeekRow = ({ displayMonth }: { displayMonth: Date }) => {
              className="rdp-cell navds-date__week-cell"
            >
              <span className="navds-date__week-wrapper" id={labelId}>
-                {labelWeek(locale?.code)}
+                {`${translate("week")}:`}
              </span>
            </Detail>

@@ -42,11 +43,7 @@ const WeekRow = ({ displayMonth }: { displayMonth: Date }) => {
                className="rdp-cell navds-date__week-cell"
              >
                <span className="navds-date__week-wrapper">
-                  <WeekNumber
-                    number={week.weekNumber}
-                    dates={week.dates}
-                    headerVersion
-                  />
+                  <WeekNumber number={week.weekNumber} dates={week.dates} />
                </span>
              </td>
            ))}
@@ -1,6 +1,7 @@
 import { differenceInCalendarDays, isWeekend } from "date-fns";
 import React, { useCallback, useState } from "react";
 import { DayClickEventHandler, isMatch } from "react-day-picker";
+import { useDateLocale } from "../../util/i18n/i18n.context";
 import { DatePickerProps } from "../datepicker/DatePicker";
 import { DateInputProps } from "../parts/DateInput";
 import {
@@ -130,7 +131,7 @@ export const useDatepicker = (
  opt: UseDatepickerOptions = {},
 ): UseDatepickerValue => {
  const {
-    locale: _locale = "nb",
+    locale: _locale,
    required,
    defaultSelected: _defaultSelected,
    today = new Date(),
@@ -146,7 +147,8 @@ export const useDatepicker = (
  } = opt;

  const [anchorRef, setAnchorRef] = useState<HTMLButtonElement | null>(null);
-  const locale = getLocaleFromString(_locale);
+  const localeFromProvider = useDateLocale();
+  const locale = _locale ? getLocaleFromString(_locale) : localeFromProvider;

  const [defaultSelected, setDefaultSelected] = useState(_defaultSelected);

@@ -1,4 +1,5 @@
 import React, { useCallback, useMemo, useState } from "react";
+import { useDateLocale } from "../../util/i18n/i18n.context";
 import { MonthPickerProps } from "../monthpicker/types";
 import { DateInputProps } from "../parts/DateInput";
 import {
@@ -126,7 +127,7 @@ export const useMonthpicker = (
  opt: UseMonthPickerOptions = {},
 ): UseMonthPickerValue => {
  const {
-    locale: _locale = "nb",
+    locale: _locale,
    defaultSelected: _defaultSelected,
    fromDate,
    toDate,
@@ -143,7 +144,8 @@ export const useMonthpicker = (
  const [defaultSelected, setDefaultSelected] = useState(_defaultSelected);

  const today = useMemo(() => new Date(), []);
-  const locale = getLocaleFromString(_locale);
+  const localeFromProvider = useDateLocale();
+  const locale = _locale ? getLocaleFromString(_locale) : localeFromProvider;

  // Initialize states
  const [year, setYear] = useState(defaultSelected ?? defaultYear ?? today);
@@ -5,6 +5,7 @@ import {
 } from "date-fns";
 import React, { useState } from "react";
 import { DateRange, isMatch } from "react-day-picker";
+import { useDateLocale } from "../../util/i18n/i18n.context";
 import { DatePickerProps } from "../datepicker/DatePicker";
 import { DateInputProps } from "../parts/DateInput";
 import {
@@ -220,7 +221,7 @@ export const useRangeDatepicker = (
  opt: UseRangeDatepickerOptions = {},
 ): UseRangeDatepickerValue => {
  const {
-    locale: _locale = "nb",
+    locale: _locale,
    defaultSelected: _defaultSelected,
    today = new Date(),
    fromDate,
@@ -236,7 +237,8 @@ export const useRangeDatepicker = (

  const [anchorRef, setAnchorRef] = useState<HTMLButtonElement | null>(null);

-  const locale = getLocaleFromString(_locale);
+  const localeFromProvider = useDateLocale();
+  const locale = _locale ? getLocaleFromString(_locale) : localeFromProvider;

  const [defaultSelected, setDefaultSelected] = useState(_defaultSelected);

@@ -10,8 +10,9 @@ import { useDayPicker } from "react-day-picker";
 import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
 import { Button } from "../../button";
 import { Select } from "../../form/select";
+import { useI18n } from "../../util/i18n/i18n.context";
 import { useSharedMonthContext } from "../context";
-import { labelNextYear, labelPrevYear } from "../utils";
+import { getTranslations } from "../utils";

 export const MonthCaption = () => {
  const {
@@ -20,8 +21,8 @@ export const MonthCaption = () => {
    formatters: { formatYearCaption },
    locale,
  } = useDayPicker();
-
  const { hasDropdown, year, toYear } = useSharedMonthContext();
+  const translate = useI18n("DatePicker", getTranslations(locale.code));

  const years: Date[] = [];

@@ -38,8 +39,8 @@ export const MonthCaption = () => {
    years.sort((a, b) => b.getFullYear() - a.getFullYear());
  }

-  const handleYearChange = (e) =>
-    toYear(setYear(startOfMonth(new Date()), Number(e.target.value)));
+  const handleYearChange = (event: React.ChangeEvent<HTMLSelectElement>) =>
+    toYear(setYear(startOfMonth(new Date()), Number(event.target.value)));

  const handleButtonClick = (val: number) => {
    const newYear = Number(year.getFullYear() + val);
@@ -64,17 +65,16 @@ export const MonthCaption = () => {
        className="navds-date__caption-button"
        disabled={disablePreviousYear()}
        onClick={() => handleButtonClick(-1)}
-        aria-label={labelPrevYear(locale?.code)}
-        icon={<ArrowLeftIcon aria-hidden />}
+        icon={<ArrowLeftIcon title={translate("goToPreviousYear")} />}
        variant="tertiary"
        type="button"
      />

      {hasDropdown ? (
        <Select
-          label="velg år"
+          label={translate("year")}
          hideLabel
-          value={year?.getFullYear()}
+          value={year.getFullYear()}
          onChange={handleYearChange}
          className="navds-date__caption__year"
        >
@@ -93,8 +93,7 @@ export const MonthCaption = () => {
        className="navds-date__caption-button"
        disabled={disableNextYear()}
        onClick={() => handleButtonClick(1)}
-        aria-label={labelNextYear(locale?.code)}
-        icon={<ArrowRightIcon aria-hidden />}
+        icon={<ArrowRightIcon title={translate("goToNextYear")} />}
        variant="tertiary"
        type="button"
      />
@@ -3,6 +3,7 @@ import React, { forwardRef, useState } from "react";
 import { DayPickerProvider } from "react-day-picker";
 import { useId } from "../../util/hooks";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
+import { useDateLocale } from "../../util/i18n/i18n.context";
 import { DateContext, SharedMonthProvider } from "../context";
 import { MonthPickerInput } from "../parts/DateInput";
 import { DateWrapper } from "../parts/DateWrapper";
@@ -67,7 +68,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
      id,
      onClose,
      onOpenToggle,
-      locale = "nb",
+      locale,
      onMonthSelect,
      className,
      wrapperClassName,
@@ -78,6 +79,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
    },
    ref,
  ) => {
+    const langProviderLocale = useDateLocale();
    const ariaId = useId(id);
    const [open, setOpen] = useState(_open ?? false);

@@ -130,7 +132,9 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
          >
            <DayPickerProvider
              initialProps={{
-                locale: getLocaleFromString(locale),
+                locale: locale
+                  ? getLocaleFromString(locale)
+                  : langProviderLocale,
                selected: selected ?? selectedMonth,
                toDate,
                fromDate,
@@ -5,6 +5,7 @@ import { ReadOnlyIcon } from "../../form/ReadOnlyIcon";
 import { FormFieldProps, useFormField } from "../../form/useFormField";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { omit } from "../../util";
+import { useI18n } from "../../util/i18n/i18n.context";
 import { useDateInputContext } from "../context";

 export interface DateInputProps
@@ -46,16 +47,17 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
  } = props;

  const buttonRef = useRef<HTMLButtonElement>(null);
+  const translate = useI18n("DatePicker");

  const isDatepickerVariant = variant === "datepicker";

  const conditionalVariables = {
    prefix: isDatepickerVariant ? "datepicker-input" : "monthpicker-input",
    iconTitle: {
-      open: isDatepickerVariant ? "Åpne datovelger" : "Åpne månedsvelger",
-      close: isDatepickerVariant ? "Lukk datovelger" : "Lukk månedsvelger",
+      open: isDatepickerVariant ? "openDatePicker" : "openMonthPicker",
+      close: isDatepickerVariant ? "closeDatePicker" : "closeMonthPicker",
    },
-  };
+  } as const;

  const context = useDateInputContext();

@@ -137,12 +139,9 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
          ref={buttonRef}
        >
          <CalendarIcon
-            pointerEvents="none"
-            title={
-              context?.open
-                ? conditionalVariables.iconTitle.close
-                : conditionalVariables.iconTitle.open
-            }
+            title={translate(
+              conditionalVariables.iconTitle[context?.open ? "close" : "open"],
+            )}
          />
        </button>
      </div>
@@ -5,14 +5,23 @@ import { Modal } from "../../modal";
 import { useModalContext } from "../../modal/Modal.context";
 import { Popover } from "../../popover";
 import { useMedia } from "../../util/hooks";
-import { modalCloseButtonLabel, modalLabel } from "../utils/labels";
+import { useI18n } from "../../util/i18n/i18n.context";
+import { getTranslations } from "../utils";
+
+const variantToLabel = {
+  single: "chooseDate",
+  multiple: "chooseDates",
+  range: "chooseDateRange",
+  month: "chooseMonth",
+} as const;

 type DateWrapperProps = {
  open: boolean;
  children: React.ReactNode;
  onClose: () => void;
  anchor: HTMLDivElement | null;
-  locale: "nb" | "nn" | "en";
+  /** @deprecated Temporary to support locale prop */
+  locale: "nb" | "nn" | "en" | undefined;
  variant: "single" | "multiple" | "range" | "month";
  popoverProps: {
    id?: string;
@@ -29,6 +38,7 @@ export const DateWrapper = ({
  variant,
  popoverProps,
 }: DateWrapperProps) => {
+  const translate = useI18n("DatePicker", getTranslations(locale));
  const modalRef = useRef<HTMLDialogElement>(null);
  const isInModal = useModalContext(false) !== undefined;
  const hideModal =
@@ -61,7 +71,7 @@ export const DateWrapper = ({
        event.stopPropagation();
        onClose();
      }}
-      aria-label={modalLabel(locale, variant)}
+      aria-label={translate(variantToLabel[variant])}
      className={cl("navds-date__modal", {
        "navds-date__nested-modal": isInModal,
        "navds-date": variant === "month",
@@ -76,7 +86,7 @@ export const DateWrapper = ({
          size="small"
          type="button"
        >
-          {modalCloseButtonLabel(locale)}
+          {translate("close")}
        </Button>
      </div>
    </Modal>
@@ -1,18 +1,11 @@
 export { formatDateForInput } from "./format-date";
 export { getMonths, getYears } from "./get-dates";
-export {
-  labelMonthDropdown,
-  labelYearDropdown,
-  labels,
-  labelNextYear,
-  labelPrevYear,
-} from "./labels";
 export {
  INPUT_DATE_STRING_FORMAT_DATE,
  INPUT_DATE_STRING_FORMAT_MONTH,
  parseDate,
 } from "./parse-date";
-export { getLocaleFromString } from "./locale";
+export { getLocaleFromString, getTranslations } from "./locale";
 export { disableDate } from "./dates-disabled";

 export { dateIsInCurrentMonth, isValidDate } from "./check-dates";
@@ -1,219 +0,0 @@
-import { Locale } from "date-fns";
-import { Labels, NavButtonLabel } from "react-day-picker";
-
-const labelNext: NavButtonLabel = (date, options) => {
-  switch (options?.locale?.code) {
-    case "nb":
-      return "Gå til neste måned";
-    case "nn":
-      return "Gå til neste månad";
-    case "en":
-      return "Go to next month";
-    default:
-      return "Gå til neste måned";
-  }
-};
-
-const labelPrevious: NavButtonLabel = (date, options) => {
-  switch (options?.locale?.code) {
-    case "nb":
-      return "Gå til forrige måned";
-    case "nn":
-      return "Gå til førre månad";
-    case "en":
-      return "Go to previous month";
-    default:
-      return "Gå til forrige måned";
-  }
-};
-
-export const labelYearDropdown = (locale: Locale) => {
-  switch (locale?.code) {
-    case "nb":
-      return "År";
-    case "nn":
-      return "År";
-    case "en":
-      return "Year";
-    default:
-      return "År";
-  }
-};
-
-export const labelMonthDropdown = (locale: Locale) => {
-  switch (locale?.code) {
-    case "nb":
-      return "Måned";
-    case "nn":
-      return "Månad";
-    case "en":
-      return "Month";
-    default:
-      return "Måned";
-  }
-};
-
-export const labelNextYear = (localeCode: string | undefined) => {
-  switch (localeCode) {
-    case "nb":
-      return "Gå til neste år";
-    case "nn":
-      return "Gå til neste år";
-    case "en-GB":
-      return "Go to next year";
-    default:
-      return "Gå til neste måned";
-  }
-};
-
-export const labelPrevYear = (localeCode: string | undefined): string => {
-  switch (localeCode) {
-    case "nb":
-      return "Gå til forrige år";
-    case "nn":
-      return "Gå til førre år";
-    case "en-GB":
-      return "Go to next year";
-    default:
-      return "Gå til neste år";
-  }
-};
-
-export const labels: Partial<Labels> = {
-  labelNext,
-  labelPrevious,
-};
-
-export const labelWeekNumber = ({
-  localeCode,
-  week,
-}: {
-  localeCode?: string;
-  week: number;
-}): string => {
-  switch (localeCode) {
-    case "nb":
-      return `Uke ${week}`;
-    case "nn":
-      return `Veke ${week}`;
-    case "en-GB":
-      return `Week ${week}`;
-    default:
-      return `Uke ${week}`;
-  }
-};
-
-export const labelWeekNumberButton = ({
-  localeCode,
-  week,
-}: {
-  localeCode?: string;
-  week: number;
-}): string => {
-  switch (localeCode) {
-    case "nb":
-      return `Velg uke ${week}`;
-    case "nn":
-      return `Vel veke ${week}`;
-    case "en-GB":
-      return `Pick week ${week}`;
-    default:
-      return `Velg uke ${week}`;
-  }
-};
-
-export const labelWeek = (localeCode?: string): string => {
-  switch (localeCode) {
-    case "nb":
-      return `Uke:`;
-    case "nn":
-      return `Veke:`;
-    case "en-GB":
-      return `Week:`;
-    default:
-      return `Uke:`;
-  }
-};
-
-const modalLabelSingle = (localeCode?: string): string => {
-  switch (localeCode) {
-    case "nb":
-      return `Velg dato`;
-    case "nn":
-      return `Vel dato`;
-    case "en-GB":
-      return `Pick a date`;
-    default:
-      return `Velg dato`;
-  }
-};
-
-const modalLabelMultiple = (localeCode?: string): string => {
-  switch (localeCode) {
-    case "nb":
-      return `Velg datoer`;
-    case "nn":
-      return `Vel datoar`;
-    case "en-GB":
-      return `Pick dates`;
-    default:
-      return `Velg datoer`;
-  }
-};
-
-const modalLabelRanged = (localeCode?: string): string => {
-  switch (localeCode) {
-    case "nb":
-      return `Velg start- og sluttdato`;
-    case "nn":
-      return `Vel start- og sluttdato`;
-    case "en-GB":
-      return `Pick a start and end date`;
-    default:
-      return `Velg start- og sluttdato`;
-  }
-};
-
-const modalLabelMonth = (localeCode?: string): string => {
-  switch (localeCode) {
-    case "nb":
-      return `Velg måned`;
-    case "nn":
-      return `Vel månad`;
-    case "en-GB":
-      return `Pick a month`;
-    default:
-      return `Velg måned`;
-  }
-};
-
-export const modalLabel = (
-  localeCode: string,
-  variant: "single" | "multiple" | "range" | "month",
-) => {
-  switch (variant) {
-    case "single":
-      return modalLabelSingle(localeCode);
-    case "multiple":
-      return modalLabelMultiple(localeCode);
-    case "range":
-      return modalLabelRanged(localeCode);
-    case "month":
-      return modalLabelMonth(localeCode);
-    default:
-      return modalLabelSingle(localeCode);
-  }
-};
-
-export const modalCloseButtonLabel = (localeCode?: string): string => {
-  switch (localeCode) {
-    case "nb":
-      return `Lukk`;
-    case "nn":
-      return `Lukk`;
-    case "en-GB":
-      return `Close`;
-    default:
-      return `Lukk`;
-  }
-};
@@ -1,4 +1,6 @@
 import { enGB, nb, nn } from "date-fns/locale";
+import en_translations from "../../util/i18n/locales/en";
+import nn_translations from "../../util/i18n/locales/nn";

 /** @private */
 export const getLocaleFromString = (locale: "nb" | "nn" | "en" = "nb") => {
@@ -11,3 +13,19 @@ export const getLocaleFromString = (locale: "nb" | "nn" | "en" = "nb") => {
      return nb;
  }
 };
+
+/**
+ * @private
+ * Temporary for backwards compatibility with locale prop
+ */
+export const getTranslations = (locale: string | undefined) => {
+  switch (locale) {
+    case "nn":
+      return nn_translations.DatePicker;
+    case "en":
+    case "en-GB":
+      return en_translations.DatePicker;
+    default:
+      return undefined;
+  }
+};
@@ -2,6 +2,7 @@ import cl from "clsx";
 import React from "react";
 import { PlusIcon } from "@navikt/aksel-icons";
 import { BodyShort, Label } from "../../../typography";
+import { useI18n } from "../../../util/i18n/i18n.context";
 import { useInputContext } from "../Input/Input.context";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import { isInList, toComboboxOption } from "../combobox-utils";
@@ -22,6 +23,7 @@ const AddNewOption = () => {
  } = useFilteredOptionsContext();
  const { isMultiSelect, selectedOptions, toggleOption } =
    useSelectedOptionsContext();
+  const translate = useI18n("Combobox");
  return (
    <li
      tabIndex={-1}
@@ -51,7 +53,7 @@ const AddNewOption = () => {
    >
      <PlusIcon aria-hidden />
      <BodyShort size={size}>
-        Legg til{" "}
+        {translate("addOption")}{" "}
        <Label as="span" size={size}>
          &#8220;{searchTerm}&#8221;
        </Label>
@@ -1,5 +1,6 @@
 import React from "react";
 import { Loader } from "../../../loader";
+import { useI18n } from "../../../util/i18n/i18n.context";
 import { useInputContext } from "../Input/Input.context";
 import filteredOptionsUtil from "./filtered-options-util";

@@ -7,12 +8,13 @@ const LoadingMessage = () => {
  const {
    inputProps: { id },
  } = useInputContext();
+  const translate = useI18n("Combobox");
  return (
    <div
      className="navds-combobox__list-item--loading"
      id={filteredOptionsUtil.getIsLoadingId(id)}
    >
-      <Loader title="Søker..." />
+      <Loader title={translate("loading")} />
    </div>
  );
 };
@@ -1,4 +1,5 @@
 import React from "react";
+import { useI18n } from "../../../util/i18n/i18n.context";
 import { useInputContext } from "../Input/Input.context";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import filteredOptionsUtil from "./filtered-options-util";
@@ -8,6 +9,10 @@ const MaxSelectedMessage = () => {
    inputProps: { id },
  } = useInputContext();
  const { maxSelected, selectedOptions } = useSelectedOptionsContext();
+  const translate = useI18n(
+    "Combobox",
+    maxSelected?.message ? { maxSelected: maxSelected.message } : undefined,
+  );

  if (!maxSelected) {
    return null;
@@ -18,8 +23,10 @@ const MaxSelectedMessage = () => {
      className="navds-combobox__list-item--max-selected"
      id={filteredOptionsUtil.getMaxSelectedOptionsId(id)}
    >
-      {maxSelected.message ??
-        `${selectedOptions.length} av ${maxSelected.limit} er valgt.`}
+      {translate("maxSelected", {
+        selected: selectedOptions.length,
+        limit: maxSelected.limit,
+      })}
    </div>
  );
 };
@@ -15,7 +15,7 @@ interface InputContextValue extends FormFieldType {
  searchTerm: string;
  setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
  shouldAutocomplete?: boolean;
-  toggleOpenButtonRef: React.RefObject<HTMLButtonElement>;
+  toggleOpenButtonRef: React.RefObject<HTMLDivElement>;
  hideCaret: boolean;
  setHideCaret: React.Dispatch<React.SetStateAction<boolean>>;
 }
@@ -72,7 +72,7 @@ const InputProvider = ({ children, value: props }: Props) => {
    "comboboxfield",
  );
  const inputRef = useRef<HTMLInputElement | null>(null);
-  const toggleOpenButtonRef = useRef<HTMLButtonElement>(null);
+  const toggleOpenButtonRef = useRef<HTMLDivElement>(null);
  const [internalValue, setInternalValue] = useState<string>(defaultValue);
  const [hideCaret, setHideCaret] = useState(false);

@@ -3,6 +3,7 @@ import cl from "clsx";
 import React, { forwardRef } from "react";
 import { XMarkIcon } from "@navikt/aksel-icons";
 import { useMergeRefs } from "../../../util/hooks";
+import { useI18n } from "../../../util/i18n/i18n.context";
 import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsContext";
 import SelectedOptions from "../SelectedOptions/SelectedOptions";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
@@ -11,7 +12,6 @@ import Input from "./Input";
 import { useInputContext } from "./Input.context";
 import ToggleListButton from "./ToggleListButton";

-/* eslint-disable jsx-a11y/click-events-have-key-events */
 export const InputController = forwardRef<
  HTMLInputElement,
  Omit<
@@ -31,7 +31,6 @@ export const InputController = forwardRef<
    clearButton = true,
    clearButtonLabel,
    toggleListButton = true,
-    toggleListButtonLabel,
    inputClassName,
    shouldShowSelectedOptions = true,
    ...rest
@@ -53,7 +52,13 @@ export const InputController = forwardRef<

  const mergedInputRef = useMergeRefs(inputRef, ref);

+  const translate = useI18n(
+    "Combobox",
+    clearButtonLabel ? { clear: clearButtonLabel } : undefined,
+  );
+
  return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
    <div
      className={cl("navds-combobox__wrapper-inner navds-text-field__input", {
        "navds-combobox__wrapper-inner--virtually-unfocused":
@@ -83,24 +88,16 @@ export const InputController = forwardRef<
      )}
      <div>
        {value && clearButton && (
-          <button
-            type="button"
+          <div
            onClick={clearInput}
            className="navds-combobox__button-clear"
-            tabIndex={-1}
+            aria-hidden
+            title={translate("clear")}
          >
-            <span className="navds-sr-only">
-              {clearButtonLabel ? clearButtonLabel : "Tøm"}
-            </span>
-            <XMarkIcon aria-hidden />
-          </button>
-        )}
-        {toggleListButton && (
-          <ToggleListButton
-            toggleListButtonLabel={toggleListButtonLabel}
-            ref={toggleOpenButtonRef}
-          />
+            <XMarkIcon />
+          </div>
        )}
+        {toggleListButton && <ToggleListButton ref={toggleOpenButtonRef} />}
      </div>
    </div>
  );
@@ -3,38 +3,22 @@ import { ChevronDownIcon, ChevronUpIcon } from "@navikt/aksel-icons";
 import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsContext";
 import { useInputContext } from "./Input.context";

-interface ToggleListButtonProps {
-  toggleListButtonLabel?: string;
-}
-
-export const ToggleListButton = forwardRef<
-  HTMLButtonElement,
-  ToggleListButtonProps
->(({ toggleListButtonLabel }, ref) => {
+export const ToggleListButton = forwardRef<HTMLDivElement>((_, ref) => {
  const { isListOpen, toggleIsListOpen } = useFilteredOptionsContext();
  const { focusInput } = useInputContext();
+
  return (
-    <button
-      type="button"
-      onPointerUp={() => {
+    <div
+      ref={ref}
+      onClick={() => {
        toggleIsListOpen();
        focusInput();
      }}
-      onKeyDown={({ key }) => key === "Enter" && toggleIsListOpen()}
      className="navds-combobox__button-toggle-list"
-      aria-expanded={isListOpen}
-      tabIndex={-1}
-      ref={ref}
+      aria-hidden
    >
-      <span className="navds-sr-only">
-        {toggleListButtonLabel ?? "Alternativer"}
-      </span>
-      {isListOpen ? (
-        <ChevronUpIcon aria-hidden />
-      ) : (
-        <ChevronDownIcon aria-hidden />
-      )}
-    </button>
+      {isListOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
+    </div>
  );
 });

@@ -14,12 +14,6 @@ const Option = ({ option }: { option: ComboboxOption }) => {
  const { isMultiSelect, removeSelectedOption } = useSelectedOptionsContext();
  const { focusInput, readOnly, inputProps } = useInputContext();

-  const onClick = (e) => {
-    e.stopPropagation();
-    removeSelectedOption(option);
-    focusInput();
-  };
-
  if (!isMultiSelect) {
    return (
      <div className="navds-combobox__selected-options--no-bg">
@@ -28,12 +22,24 @@ const Option = ({ option }: { option: ComboboxOption }) => {
    );
  }

-  return readOnly || inputProps.disabled ? (
-    <Chips.Toggle variant="neutral" checkmark={false} as="div">
+  if (readOnly || inputProps.disabled) {
+    return (
+      <Chips.Toggle variant="neutral" checkmark={false} as="div">
+        {option.label}
+      </Chips.Toggle>
+    );
+  }
+
+  return (
+    <Chips.Removable
+      onClick={(event) => {
+        event.stopPropagation();
+        removeSelectedOption(option);
+        focusInput();
+      }}
+    >
      {option.label}
-    </Chips.Toggle>
-  ) : (
-    <Chips.Removable onClick={onClick}>{option.label}</Chips.Removable>
+    </Chips.Removable>
  );
 };

@@ -45,7 +51,11 @@ const SelectedOptions: React.FC<SelectedOptionsProps> = ({
  const { value } = useInputContext();
  const { isMultiSelect } = useSelectedOptionsContext();
  return (
-    <Chips className="navds-combobox__selected-options" size={size}>
+    <Chips
+      className="navds-combobox__selected-options"
+      size={size}
+      data-type={isMultiSelect ? "multiple" : "single"}
+    >
      {value.length === 0 || (isMultiSelect && selectedOptions.length)
        ? selectedOptions.map((option, i) => (
            <Option key={option.label + i} option={option} />
@@ -3,6 +3,7 @@ import { act, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React, { useId } from "react";
 import { describe, expect, test, vi } from "vitest";
+import nb from "../../../util/i18n/locales/nb";
 import { ComboboxProps, UNSAFE_Combobox } from "../index";

 const options = [
@@ -73,7 +74,7 @@ describe("Render combobox", () => {
    test("Should show loading icon when loading (used for async search)", async () => {
      render(<App options={[]} isListOpen isLoading />);

-      expect(await screen.findByText("Søker...")).toBeInTheDocument();
+      expect(await screen.findByText(nb.Combobox.loading)).toBeInTheDocument();
    });

    test("Should not select previous focused element when closes", async () => {
@@ -38,13 +38,14 @@ const options = [
  "grapefruit",
 ];

-export const Default: StoryFn<ComboboxProps & { maxSelected?: number }> = ({
-  maxSelected,
-  ...rest
-}) => (
+export const Default: StoryFn<
+  ComboboxProps & { maxSelected?: number; maxSelectedMessage?: string }
+> = ({ maxSelected, maxSelectedMessage, ...rest }) => (
  <UNSAFE_Combobox
    {...rest}
-    maxSelected={maxSelected && { limit: maxSelected }}
+    maxSelected={
+      maxSelected && { limit: maxSelected, message: maxSelectedMessage }
+    }
    id="combobox"
  />
 );
@@ -76,11 +77,17 @@ Default.argTypes = {
  maxSelected: {
    control: { type: "number" },
  },
+  maxSelectedMessage: {
+    control: { type: "text" },
+  },
  size: {
    options: ["medium", "small"],
    defaultValue: "medium",
    control: { type: "radio" },
  },
+  clearButtonLabel: {
+    control: { type: "text" },
+  },
 };

 export const WithPlaceholder: StoryFunction = () => {
@@ -132,7 +132,8 @@ export interface ComboboxProps
     */
    limit: number;
    /**
-     * Override the message to display when the limit for maximum selected options has been reached
+     * Message to display when the limit for maximum selected options has been reached
+     * @default "{selected} av maks {limit} er valgt."
     */
    message?: string;
  };
@@ -154,12 +155,6 @@ export interface ComboboxProps
   * @default true
   */
  toggleListButton?: boolean;
-  /**
-   * Custom name for the toggle list-button. Requires "toggleListButton" to be `true`.
-   *
-   * @default "Alternativer"
-   */
-  toggleListButtonLabel?: string;
  /**
   * Set this to override the value of the input field.
   *
@@ -1,9 +1,9 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { Link } from "../../link";
+import { useI18n } from "../../util/i18n/i18n.context";
 import { OverridableComponent } from "../../util/types";

-// export type FormSummaryEditProps = Partial<LinkProps>;
 export interface FormSummaryEditProps
  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
  /**
@@ -22,17 +22,18 @@ export interface FormSummaryEditProps
 export const FormSummaryEditLink: OverridableComponent<
  FormSummaryEditProps,
  HTMLAnchorElement
-> = forwardRef(
-  ({ children = "Endre svar", className, as = "a", ...rest }, ref) => (
+> = forwardRef(({ children, className, as = "a", ...rest }, ref) => {
+  const translate = useI18n("FormSummary");
+  return (
    <Link
      ref={ref}
      as={as}
      {...rest}
      className={cl("navds-form-summary__edit", className)}
    >
-      {children}
+      {children || translate("editAnswer")}
    </Link>
-  ),
-);
+  );
+});

 export default FormSummaryEditLink;
@@ -6,6 +6,8 @@ import React, {
  useState,
 } from "react";
 import { MagnifyingGlassIcon, XMarkIcon } from "@navikt/aksel-icons";
+import { Button } from "../../button";
+import { UNSAFE_useAkselTheme } from "../../provider";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { omit } from "../../util";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
@@ -122,6 +124,8 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
      ...rest
    } = props;

+    const themeContext = UNSAFE_useAkselTheme(false);
+
    const searchRef = useRef<HTMLInputElement | null>(null);
    const mergedRef = useMergeRefs(searchRef, ref);
    const translate = useI18n("Search");
@@ -142,6 +146,34 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
      onSearchClick?.(`${value ?? internalValue}`);
    };

+    const showClearButton =
+      clearButton && !inputProps.disabled && (value ?? internalValue);
+
+    const ClearButton = () =>
+      themeContext ? (
+        <Button
+          className="navds-search__button-clear"
+          variant="tertiary-neutral"
+          size={size === "medium" ? "small" : "xsmall"}
+          icon={<XMarkIcon aria-hidden />}
+          title={clearButtonLabel || translate("clear")}
+          hidden={!showClearButton}
+          onClick={(event) => handleClear({ trigger: "Click", event })}
+        />
+      ) : (
+        <button
+          type="button"
+          onClick={(event) => handleClear({ trigger: "Click", event })}
+          className="navds-search__button-clear"
+          hidden={!showClearButton}
+        >
+          <span className="navds-sr-only">
+            {clearButtonLabel || translate("clear")}
+          </span>
+          <XMarkIcon aria-hidden />
+        </button>
+      );
+
    return (
      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
      <div
@@ -210,18 +242,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
              )}
              {...(htmlSize ? { size: Number(htmlSize) } : {})}
            />
-            {(value ?? internalValue) && clearButton && (
-              <button
-                type="button"
-                onClick={(event) => handleClear({ trigger: "Click", event })}
-                className="navds-search__button-clear"
-              >
-                <span className="navds-sr-only">
-                  {clearButtonLabel || translate("clear")}
-                </span>
-                <XMarkIcon aria-hidden />
-              </button>
-            )}
+            <ClearButton />
          </div>
          <SearchContext.Provider
            value={{
@@ -105,6 +105,21 @@ export const ErrorVariants = () => (
  </div>
 );

+export const Disabled = () => (
+  <div className="rowgap">
+    <div className="colgap">
+      <Search disabled label="Søk" />
+      <Search disabled label="Søk" variant="secondary" />
+      <Search disabled label="Søk" variant="simple" />
+    </div>
+    <div className="colgap">
+      <Search disabled error="errormsg" label="Søk" />
+      <Search disabled error="errormsg" label="Søk" variant="secondary" />
+      <Search disabled error="errormsg" label="Søk" variant="simple" />
+    </div>
+  </div>
+);
+
 export const Placeholder = () => (
  <div className="rowgap">
    <div className="colgap">
@@ -210,6 +225,10 @@ export const Chromatic: Story = {
        <h2>ErrorVariants</h2>
        <ErrorVariants />
      </div>
+      <div>
+        <h2>Disabled</h2>
+        <Disabled />
+      </div>
      <div>
        <h2>Placeholder</h2>
        <Placeholder />
@@ -6,31 +6,12 @@ import React, {
  useState,
 } from "react";
 import { Loader } from "../../loader";
+import { UNSAFE_useAkselTheme } from "../../provider";
 import { BodyShort } from "../../typography";
 import { omit } from "../../util";
 import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
 import { FormFieldProps, useFormField } from "../useFormField";

-const SelectedIcon = () => (
-  <svg
-    width="12"
-    height="10"
-    viewBox="0 0 12 10"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    focusable={false}
-    role="img"
-    aria-hidden
-  >
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M11.2674 0.647802C11.8762 1.20971 11.9141 2.1587 11.3522 2.76743L5.35221 9.26743C5.07531 9.56739 4.68813 9.74155 4.27998 9.74971C3.87184 9.75787 3.478 9.59933 3.18934 9.31067L0.68934 6.81067C0.103553 6.22488 0.103553 5.27513 0.68934 4.68935C1.27513 4.10356 2.22487 4.10356 2.81066 4.68935L4.20673 6.08541L9.14779 0.732587C9.7097 0.123856 10.6587 0.0858967 11.2674 0.647802Z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
 export interface SwitchProps
  extends Omit<FormFieldProps, "error" | "errorId">,
    Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
@@ -88,6 +69,8 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
      defaultChecked ?? checkedProp ?? false,
    );

+    const themeContext = UNSAFE_useAkselTheme(false);
+
    useEffect(() => {
      checkedProp !== undefined && setChecked(checkedProp);
    }, [checkedProp]);
@@ -138,11 +121,34 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
              <Loader
                size="xsmall"
                aria-live="polite"
-                variant={checked ? "interaction" : "neutral"}
+                variant={
+                  checked
+                    ? "interaction"
+                    : themeContext
+                      ? "inverted"
+                      : "neutral"
+                }
              />
-            ) : checked ? (
-              <SelectedIcon />
-            ) : null}
+            ) : (
+              <svg
+                width="12"
+                height="10"
+                viewBox="0 0 12 10"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                focusable={false}
+                role="img"
+                aria-hidden
+                className="navds-switch__checkmark"
+              >
+                <path
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M11.2674 0.647802C11.8762 1.20971 11.9141 2.1587 11.3522 2.76743L5.35221 9.26743C5.07531 9.56739 4.68813 9.74155 4.27998 9.74971C3.87184 9.75787 3.478 9.59933 3.18934 9.31067L0.68934 6.81067C0.103553 6.22488 0.103553 5.27513 0.68934 4.68935C1.27513 4.10356 2.22487 4.10356 2.81066 4.68935L4.20673 6.08541L9.14779 0.732587C9.7097 0.123856 10.6587 0.0858967 11.2674 0.647802Z"
+                  fill="currentColor"
+                />
+              </svg>
+            )}
          </span>
        </span>
        <label htmlFor={inputProps.id} className="navds-switch__label-wrapper">
@@ -1,5 +1,6 @@
 import React, { SVGProps } from "react";
 import { useId } from "../util/hooks";
+import { useI18n } from "../util/i18n/i18n.context";

 interface SVGRProps {
  title?: string;
@@ -15,6 +16,8 @@ export const DefaultIllustration: DefaultIllustrationType = ({
  titleId: _titleId,
  ...props
 }) => {
+  const translate = useI18n("GuidePanel");
+
  let titleId: string | undefined = useId();
  titleId = title ? (_titleId ? _titleId : "title-" + titleId) : undefined;

@@ -25,7 +28,7 @@ export const DefaultIllustration: DefaultIllustrationType = ({
      viewBox="0 0 56 85"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
-      aria-label="NAV veileder illustrasjon"
+      aria-label={translate("illustrationLabel")}
      focusable={false}
      role="img"
      aria-labelledby={titleId}
@@ -4,6 +4,7 @@ import { Popover, PopoverProps } from "../popover";
 import { UNSAFE_useAkselTheme } from "../provider";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { useMergeRefs } from "../util/hooks/useMergeRefs";
+import { useI18n } from "../util/i18n/i18n.context";
 import { HelpTextIcon } from "./HelpTextIcon";

 export interface HelpTextProps
@@ -12,7 +13,7 @@ export interface HelpTextProps
  children: React.ReactNode;
  /**
   * Adds a title-tooltip with the given text
-   * @default "hjelp"
+   * @default "Mer informasjon"
   */
  title?: string;
  /**
@@ -41,7 +42,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
      children,
      placement,
      strategy = "absolute",
-      title = "hjelp",
+      title,
      onClick,
      wrapperClassName,
      ...rest
@@ -50,10 +51,11 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
  ) => {
    const buttonRef = useRef<HTMLButtonElement | null>(null);
    const mergedRef = useMergeRefs(buttonRef, ref);
-
    const [open, setOpen] = useState(false);
-
    const themeContext = UNSAFE_useAkselTheme(false);
+    const translate = useI18n("HelpText");
+
+    const titleWithFallback = title || translate("title");

    return (
      <div className={cl("navds-help-text", wrapperClassName)}>
@@ -65,8 +67,8 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
          type="button"
          aria-expanded={open}
        >
-          <HelpTextIcon title={title} />
-          <HelpTextIcon filled title={title} />
+          <HelpTextIcon title={titleWithFallback} />
+          <HelpTextIcon filled title={titleWithFallback} />
        </button>
        <Popover
          onClose={() => setOpen(false)}
@@ -1,5 +1,6 @@
 import cl from "clsx";
 import React, { HTMLAttributes, forwardRef } from "react";
+import { UNSAFE_AkselTheme, UNSAFE_useAkselTheme } from "../provider";
 import { OverridableComponent } from "../util/types";
 import InternalHeaderButton, {
  InternalHeaderButtonProps,
@@ -76,14 +77,33 @@ interface InternalHeaderComponent
 * </InternalHeader>
 * ```
 */
-export const InternalHeader = forwardRef(({ className, ...rest }, ref) => (
-  <header
-    data-theme="dark"
-    {...rest}
-    ref={ref}
-    className={cl("navds-internalheader", className)}
-  />
-)) as InternalHeaderComponent;
+export const InternalHeader = forwardRef(({ className, ...rest }, ref) => {
+  const themeContext = UNSAFE_useAkselTheme(false);
+
+  /*
+   * Component is always in "dark" mode, so we manually override global theme.
+   */
+  if (themeContext) {
+    return (
+      <UNSAFE_AkselTheme theme="dark" asChild>
+        <header
+          {...rest}
+          ref={ref}
+          className={cl("navds-internalheader", className)}
+        />
+      </UNSAFE_AkselTheme>
+    );
+  }
+
+  return (
+    <header
+      data-theme="dark"
+      {...rest}
+      ref={ref}
+      className={cl("navds-internalheader", className)}
+    />
+  );
+}) as InternalHeaderComponent;

 InternalHeader.Title = InternalHeaderTitle;
 InternalHeader.User = InternalHeaderUser;
@@ -3,7 +3,7 @@ import React, { forwardRef } from "react";
 import { OverridableComponent } from "../util/types";

 export interface InternalHeaderButtonProps
-  extends React.AnchorHTMLAttributes<HTMLButtonElement> {
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  /**
   * Application Button
   */
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot]	fbc580e6bc	Version Packages (#3420 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-12-06 14:30:55 +01:00
Halvor Haugan	13a9a2159f	Refactor accordion stories (#3432 )	2024-12-05 22:01:54 +01:00
Vegard HaugstvedtandHalvor Haugan	89e069d1d6	CopyButton: i18n & remove prop activeTitle (#3426 ) Co-authored-by: Halvor Haugan <halvor.haugan@nav.no>	2024-12-05 13:36:33 +01:00
Halvor Haugan	4896bb1569	FormSummary: add translation (#3428 )	2024-12-05 13:17:13 +01:00
Ken	713ccafed1	🐛 Accordion now deconstructs sanity-references (#3422 )	2024-12-05 10:23:13 +01:00
Ken	4632a3ae2b	[Darkside] Updated components based on Figma-comments (#3417 ) * 💄 Alert now synced with standardized panel padding * 💄 Expansioncard synced with standardized panel padding * 💄 Chat synced with standardized panel padding * 💄 ErrorSummary synced with standardized panel padding * 💄 FileUpload synced with standardized panel padding * 💄 FormSummary synced with standardized panel padding * 💄 FormSummary synced with standardized panel padding * 💄 Modal synced with standardized panel padding * 💄 Popover/Helptext synced with standardized panel padding * 💄 Text-neutral did not work in darkmode for Button. Now uses text-default	2024-12-04 16:26:21 +01:00
KenandHalvor Haugan	f6666302f5	[Darkside] Updated Primitives CSS to use new token-prefix (#3405 ) * 📝 Overlap comments * WIP: update primitives prefixing * ♻️ Use updated prefix in primitives ts-code * ♻️ Use updated token-prefix in css * ♻️ Use updated tokens in primitives css utilities * 🔥 Removed backwards-compat with old stack CSS * [Darkside] Primtives prop-support (#3423) * :refactor: Support primitives with new theme * :refactor: Use sub-component for new Box update * ♻️ Update support for new and old theme in Page and Box * ♻️ Resolve instances where tokens were not correctly named for theme-support * ♻️ Avoid exposing component before necesarry * ♻️ Avoid having to import figma-types in ds-react * ♻️ Using camelCase on tokens breaks primtives. Now uses kebab-case * 🔥 Removed comment used as notes * Update @navikt/core/react/src/layout/page/Page.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * Update @navikt/core/react/src/layout/box/Box.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * ♻️ Remove redundant prefix const * ♻️ remove redundant T-suffix on types * ♻️ Better previews on hover when checking token-props --------- Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * ♻️ More fine-grained exception-testing for use of old props in Box --------- Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>	2024-12-04 10:35:32 +01:00
Halvor HauganandKen	bae136f847	Translate GuidePanel and HelpText, remove text from InternalHeader. (#3424 ) Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>	2024-12-04 10:29:26 +01:00
Ken	53d1fe517e	[Darkside] Tailwind: Added tests for new config setup	2024-12-03 12:48:59 +01:00
Ken	ea0d7c1386	[Darkside] Tailwind: Added shadow-token support	2024-12-03 12:41:35 +01:00
Julian Nymark Halvor Haugan Halvor Haugan Ken Ken	8ea6c220dc	[Darkside] datemonthpicker (#3357 ) * 🚧 wip * [Darkside] ErrorSummary updated CSS (#3331) * First run for errorsummary css update * Added nesting * [Darkside] Fileupload CSS update (#3343) * ✨ Updated Dropzone with darkmode * ♻️ Added nesting for root * ♻️ ac -> acx prefix for interla tokens * ♻️ Removed reduntant token * ♻️ More nesting * 💄 Align overlay on drag better * ⚰️ Removed test-code * 💄 Update hover-border for dropzone * 🐛 Removed border-color update on hover in disabled state * ♻️ Use bg input on area, use border default * [Darkside] Link CSS update (#3353) * ✨ Darkmode-support for existing link-component * :refactor: Adjusted line offsets and thickness * [Darkside] ExpansionCard CSS update (#3338) * 💄 Initial css-update expansioncard * 📝 Added sub-headers * 💫 Button animation * ✨ Added data attrb for open-state * 💫 Updated content animation * ♻️ Added nesting * ♻️ Better nesting of rules * ♻️ Use outline for hover border * ♻️ Use border as default outline * 🔥 Remove redundant border css * 🔥 Removed divider transition, unused state attributes in react * [aksel.nav.no] Update examples of Page (#3349) * Changesets: Run yarn as part of create-version * Combobox: Fix issue where using arrow keys in list would make the entire page scroll (#3364) * [Darkside] FormSummary updated CSS (#3345) * :refactor: Use updated CSS for darkside * 💄 Replace accent bg with info bg * [Docs] Use NAV-dekorator for Page examples (#3362) * [aksel.nav.no] Update examples of Page * comment * comment + rename + style->class * fix * 📝 Use NAV-dekorator for Page-examples * 🚚 Moved content to separate __parts location * :refactor: Updated examples * Update aksel.nav.no/website/components/website-modules/examples/__parts/PageDemoContent.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * 🐛 Use correct import syntax for parts * 📝 Add description to page-block default story * 💄 Removed spacing from all typo-headings in demo * 🐛 Removed react import from content part --------- Co-authored-by: Halvor Haugan <halvor.haugan@nav.no> Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * Git hooks that notify when yarn.lock have changed (#3361) * 💄 first pass css updates * 🎨 nest CSS * Datepicker: 💄 css layer changes & remove extra border * 🔥 remove resolved todo * 💄 border radius for caption buttons * 🎨 drastically simplify focus outline * change: make button selector less wildcardy * change: outline smaller for rdp-cell buttons * change: width large enough to show 4 characters in year caption * change: match design for range middle selected * change: remove redundant error CSS * change: remove unused CSS * change: un-shuffle css import ordering for date.css * change: remove unused CSS * change: week buttons & day button active * change: use secondary-neutral button for weeknumber buttons * change: same selector for month and day buttons, active state * 🐛 Fixed weeknumber as the button broke old datepicker * change: remove double border on captions, active state on disabled * ♻️ Updated weeknumber to be barkw-compat with old system * 🚚 Moved date-import further up --------- Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> Co-authored-by: Halvor Haugan <halvor.haugan@nav.no> Co-authored-by: Ken <ken.aleksander@gmail.com>	2024-12-03 12:09:53 +01:00
Ken	9a190d371b	[Darkside]: Removed hover-effect from disabled button in forced-color mode	2024-12-03 11:38:45 +01:00
KenandHalvor Haugan	685066e791	[Darkside] Search CSS update (#3385 ) * ♻️ Use variables for Button-adjustment * :refactor: Removed redundant selector nesting for disabled buttons * :refactor: Use aksel-button for clearbutton * ✨ Added darkmode support to Search * :refactor: Updated paddings * :refactor: Added disabled-support * :refactor: Updated border of button when input is hovered * Update @navikt/core/react/src/form/search/Search.tsx * 🐛 Add correct button CSS from main * 💄 Placeholder set to text-neutral * ♻️ Undo nesting * ♻️ Better error-css structure * 📝 Added disabled-stories * 💄 Set opacity on searchicon when disabled * Update @navikt/core/react/src/form/search/Search.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> --------- Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>	2024-12-03 11:24:56 +01:00
Lars Eirik Korsgaard Hansen	41a21d280a	fix forced colors toggle group (#3421 )	2024-12-02 13:26:34 +01:00
Halvor Haugan	1895f4f763	Combobox: add translations and adjust buttons (#3409 ) Hid buttons from screen readers since you can't tab to them anyways. Moved sr-only text on clear button to title attr. Removed sr-only text on toggle list button. Removed prop toggleListButtonLabel.	2024-12-02 12:55:02 +01:00
Halvor Haugan	8bc9a80bd4	Adjust examples of Combobox (#3419 )	2024-12-02 10:42:59 +01:00
Lars Eirik Korsgaard Hansen	d5a6285110	[Darkside] Togglegroup CSS update (#3400 )	2024-12-02 10:38:28 +01:00
Vegard Haugstvedt	856e54aa2d	Bugfix/CopyButton: Reduce over announcing active state (#3374 ) * Prevent active text being announced waaay too many times. * Add changeset * New attempt at consistently reduced status messages on "copy" click * Remove aria-relevant and aria-atomic to make announcement consistent between Safari and other browsers	2024-11-29 15:43:49 +01:00
github-actions[bot]andgithub-actions[bot]	8951c5c09c	Version Packages (#3404 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-11-29 15:11:37 +01:00
Lars Olav Torvik Halvor Haugan Ken Ken	fa2904d54b	Remove space from combobox single select (#3384 ) * When single select on combobox, remove the gap between the input and the selected value. * ♻️ Updated spacing between options and input in Combobox * 📝 Changeset * Revert darkside update * ♻️ Update darkside combobox * :refactor: Make gap something we add, not remove for chips based on type * Update .changeset/yellow-days-rhyme.md Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * :refactor: Only add margin-left when only-child --------- Co-authored-by: Ken <ken.aleksander@gmail.com> Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>	2024-11-29 15:03:31 +01:00
Halvor Haugan	8c9b2e268a	Adjust examples of Loader (#3418 )	2024-11-29 13:10:54 +01:00
Ken	dce149fca4	🐛 Select get focus-outline when clicked in firefox, as focus-visible were ignored previously (#3415 )	2024-11-29 12:49:24 +01:00
Ken	39db249546	[Darkside] Tabs CSS update (#3398 ) * 💫 Animate tab-border * :refactor: Shorthand box-shadow * 💄 Use 4px border-width for hover and selected state in tabs	2024-11-29 12:47:57 +01:00
KenandHalvor Haugan	9c5b32f9ba	[Icons]: Added some new icons (synced from Figma) (#3416 ) * ✨ New icons * Update .changeset/swift-bags-design.md Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> --------- Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>	2024-11-29 11:58:15 +01:00
Ken	efc1446fb9	📝 Changeset (#3414 )	2024-11-29 11:56:34 +01:00
KenandHalvor Haugan	6d74cb72ad	Fileupload: Remove list-styling when used in `ul` (#3413 ) * 📝 Changeset * Update .changeset/warm-adults-allow.md Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> --------- Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>	2024-11-29 11:36:35 +01:00
Ken	d6f08ffaaf	[Darkside]: Misc updates to darkside CSS, added shadow-token - [Darkside]: Use shadow-dialog token in components, use subtle-border in combobox list - [Darkside]: FileSummary nesten items border - [Darkside]: Adjusted ExpansionCard padding - [Darkside]: ActionMenu uses new Radio-design - [Darkside]: Added shadow-token to system	2024-11-27 20:00:53 +01:00
Halvor Haugan	1f4ac7bfde	DatePicker/MonthPicker: add support for translations provider (#3390 )	2024-11-27 12:29:56 +01:00
Halvor Haugan	34538a1cbe	Modal: Don't add scroll shadow when polyfilled (#3408 )	2024-11-26 16:51:32 +01:00
KenandHalvor Haugan	9f088a9373	🐛 Modal now handles cases where it was opened with `show()` (#3407 ) * 🐛 Modal now handles cases where it was opened with `show()` * Update .changeset/sweet-birds-care.md * 🐛 Add bottom unset to polyfilled modal * Update @navikt/core/css/modal.css * Update .changeset/sweet-birds-care.md Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> --------- Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>	2024-11-26 16:19:58 +01:00
Ken	547219923f	[Darkside] Fileitem icon centering	2024-11-26 13:03:52 +01:00
Ken	05709ca43e	[Darkside] Switch CSS update (#3389 ) * :refactor: Initial darkmode-update to switch * :refactor: Darkmode-support switch * 📝 Added comments * :refactor: Added nesting to readonly * :refactor: Updated design to match figma	2024-11-26 11:47:25 +01:00
Ken	8fdb888270	[Darkside] Select CSS update (#3378 ) * ✨ Added darkmode support to Select * 🐛 Removed highlighted border-color on hover/focus state	2024-11-26 11:25:00 +01:00
Ken	87b2e54465	[Darkside] Textarea CSS update (#3399 ) * :refactor: Added darkmode-support to textarea * 💄 add some spacing between textarea and counter	2024-11-25 20:42:08 +01:00
Ken	1270c88d19	[Darkside] Stepper: Adjusted border and text-colors to sync with figma	2024-11-25 13:33:00 +01:00
Ken	a368cd35b6	[Darkside] Stepper CSS update (#3388 ) * :refactor: Added darkmode-support to Stepper * :refactor: Restructure Stepper to support darkmode and nesting * 🐛 text-decoration now changes on hover * :refactor: Line before non-interactive step now has border-neutral	2024-11-25 13:27:20 +01:00
Ken	b752d848e1	[Darkside] Skeleton CSS update (#3381 ) * ✨ Added darkmode support to skeleton * 🐛 use correct border-radius	2024-11-25 12:54:41 +01:00
Ken	ac4b6f1713	[Darkside]: Update Textfield to show error-border on hover	2024-11-25 12:50:01 +01:00
Ken	e15c62ddfd	[Darkside] Use variables for Button (#3377 ) * ♻️ Use variables for Button-adjustment * :refactor: Removed redundant selector nesting for disabled buttons	2024-11-25 12:45:41 +01:00
KenandHalvor Haugan	641276bb44	[Darkside] ReadMore CSS update (#3372 ) * ✨ Added brandvolume support in theme-component * 📝 Added brandvolume story to readmore * ✨ Added large size to readmore * ✨ Added darkmode support for Readmore * :refactor: Updated CSS syntax * 🐛 Fixed brandvolume stories * ✨ Implemented brandvolume in ReadMore * ✨ Added large-variant of readmore to OG readmore * :refactor: Use tokens and calc to handle volume * 🐛 Added text-accent-strong on hover to high brandvolume * 🐛 Avoid adjusting readmore body when size is large * 📝 CHangeset * Update @navikt/core/react/src/provider/theme/AkselTheme.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * Update @navikt/core/react/src/provider/theme/AkselTheme.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-25 12:27:22 +01:00
Ken	0f983440ee	✨ Added logo-token (#3373 )	2024-11-25 11:06:31 +01:00
Halvor Haugan	fc62ae6870	Remove Storybook HTML addon (#3401 )	2024-11-22 14:23:19 +01:00
Halvor Haugan	293fadeaeb	Add test for placeholders in translations (#3387 )	2024-11-22 12:34:24 +01:00
Ken	eb3f830995	[Darkside] Refactor layering concept (#3395 ) * :refactor: Update layer handling * 📝 Improved comments	2024-11-22 12:32:41 +01:00
Halvor Haugan	e257bf4945	[Darkside] Combobox: add scroll-margin (#3397 )	2024-11-22 09:36:39 +01:00
Ken	c8fd958e7a	[Darkside] Internalheader CSS update (#3352 ) * ✨ Added darkmode support in react for internalheader * :refactor: Support darkmode theming for internalheader * 💄 Added bottom border to header, divider now subtleA * 🐛 Remove hover,active effect in static title * :refactor: Remove redundant :is for button * :refactor: use padding shorthand * 💄 Improved hover-effect on forced-color buttons, added story * 🐛 Revert back to is button syntax	2024-11-21 17:34:31 +01:00
Julian Nymark	0da07be3b7	Darkside combobox fixes (#3393 ) * 💄 remove unused CSS * 💄 remove sticky (and more) causing weird behaviour	2024-11-21 15:58:11 +01:00
github-actions[bot]andgithub-actions[bot]	c054a607b8	Version Packages (#3392 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-11-21 13:34:46 +01:00
Halvor HauganandKen	15b000e162	Adjust examples of Popover (#3394 ) Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>	2024-11-21 13:23:27 +01:00
Halvor Haugan	11133d1a8d	Allow RC versions of React 19 through peerDependencies (#3391 )	2024-11-21 11:29:59 +01:00
Julian Nymark	39d83bfc50	Combobox: update CSS to use new tokens (#3328 ) * 🚧 wip * 🚧 wip * Combobox: darkside (keep old border radius for now) * Combobox: 💄 replace error border with outline (on wrapper is probably fine), use tokens * Combobox: 💄 replace transparents (almost never wanted), use tokens * Combobox: 💄 only outline on --focus * Combobox: 💄 outline adjustment, remove scroll guttering * Combobox: 💄 prettify (nesting group) CSS * Combobox: 💄 tweak "legg til" margin/padding * Combobox: 💄 several small review changes * Combobox: 💄 move border to wrapper-inner, use correct token for focus color * Combobox: fix error & some outline on virtually-unfocused * Combobox: 💄 smaller box-shadow on error * Combobox: 💄 forced-colors * Combobox: 💄 forced-colors++ * Combobox: 💄 several PR review fixes (border) * Combobox: 💄 group review fixes * Combobox: 💄 remove !important * 💄 PR review changes * 💄 PR review changes * 💄 PR review changes * 💄 color > stroke * 💄 PR review changes * 💄 new design for error outline * 💄 PR group review batch fixes	2024-11-21 10:32:17 +01:00
dependabot[bot]	8ed0872b05	Bump cross-spawn from 7.0.3 to 7.0.6 in /examples/referansesider (#3386 ) Bumps [cross-spawn](https://github.com/moxystudio/node-cross-spawn) from 7.0.3 to 7.0.6. - [Changelog](https://github.com/moxystudio/node-cross-spawn/blob/master/CHANGELOG.md) - [Commits](https://github.com/moxystudio/node-cross-spawn/compare/v7.0.3...v7.0.6) --- updated-dependencies: - dependency-name: cross-spawn dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2024-11-20 16:07:54 +01:00