Version Packages (#3404 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Remove space from combobox single select (#3384 )
2026-10-13 01:02:02 +00:00 · 2024-11-29 15:11:37 +01:00 · 2024-11-29 15:03:31 +01:00 · 2024-11-29 13:10:54 +01:00 · 2024-11-29 12:49:24 +01:00 · 2024-11-29 12:47:57 +01:00
107 changed files with 2033 additions and 1835 deletions
@@ -51,7 +51,6 @@ export default {
  ],
  addons: [
    "@storybook/addon-a11y",
-    "@whitespace/storybook-addon-html",
    "@storybook/addon-interactions",
    "@storybook/addon-themes",
    {
@@ -1,5 +1,13 @@
 # @navikt/aksel-icons

+## 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.6.0",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -1,5 +1,9 @@
 # @navikt/aksel-stylelint

+## 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.6.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.6.0",
+    "@navikt/ds-tokens": "^7.6.0",
    "concurrently": "9.0.1",
    "postcss-selector-parser": "^6.0.13",
    "postcss-value-parser": "^4.2.0",
@@ -1,5 +1,19 @@
 # @navikt/aksel

+## 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.6.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.6.0",
    "axios": "1.7.4",
    "chalk": "4.1.0",
    "clipboardy": "^2.3.0",
@@ -1,5 +1,25 @@
 # @navikt/ds-css

+## 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,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,37 +58,40 @@
 }

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

@media (forced-colors: active) {
@@ -90,180 +105,152 @@
  }
 }

-.navds-button--primary:hover {
-  background-color: var(--ax-bg-accent-strong-hover);
-}
-
-.navds-button--primary:active {
-  background-color: var(--ax-bg-accent-strong-pressed);
-}
-
-.navds-button--primary:hover:where(:disabled, .navds-button--disabled),
-.navds-button--primary:active:where(:disabled, .navds-button--disabled) {
-  background-color: var(--ax-bg-accent-strong);
-}
-
 /*************************
 * .navds-button--primary-neutral *
 *************************/
-
 .navds-button--primary-neutral {
  background-color: var(--ax-bg-neutral-strong);
  color: var(--ax-text-neutral-contrast);
-}

-.navds-button--primary-neutral:hover {
-  background-color: var(--ax-bg-neutral-strong-hover);
-}
+  &: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);
-}
+  &:hover {
+    --__axc-button-border-color: var(--ax-border-strong);

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

-.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);
+  &: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 {
+  background-color: transparent;
  color: var(--ax-text-neutral);
-}

-.navds-button--tertiary-neutral:hover {
-  background-color: var(--ax-bg-neutral-hoverA);
-  color: var(--ax-text-neutral-strong);
-}
+  &:hover {
+    background-color: var(--ax-bg-neutral-moderate-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);
-}
+  &:active {
+    background-color: var(--ax-bg-neutral-strong-pressed);
+    color: var(--ax-text-neutral-contrast);
+  }

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

 /**************************
@@ -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,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,7 +16,6 @@

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

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

 /* -------------------------- ExpansionCard Header -------------------------- */
@@ -144,8 +139,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 +154,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,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 -------------------------- */
 .navds-dropzone__area {
  --__axc-dropzone-background: var(--ax-bg-input);
@@ -154,6 +145,14 @@
 }

 /* ----------------------------- 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);
@@ -176,6 +175,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);
@@ -75,6 +75,7 @@
  padding: var(--ax-spacing-4);
  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,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,
@@ -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,29 +1,35 @@
@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 */
+/* TODO: Remove this reference after stack is updated with darkside support */
@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 "./dropdown.darkside.css" layer(aksel.components);
@import "./action-menu.darkside.css" layer(aksel.components);
@@ -50,3 +56,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%;
@@ -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);

@@ -1,36 +1,32 @@
-@layer aksel.layout.component, aksel.layout.base;
+@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";

-@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);
-  }
+/* TODO: Custom override to avoid having to edit react-syntax in Primtives. Remove after fix */
+: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);
 }
@@ -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);
  }
 }
@@ -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.6.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.6.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,33 @@
 # @navikt/ds-react

+## 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.6.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.6.0",
+    "@navikt/ds-tokens": "^7.6.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": {
@@ -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,75 +1,52 @@
 /* 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 { 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 translate = useI18n("DatePicker", getTranslations(code));

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

-  const label = labelWeekNumberButton({
-    week: Number(weekNumber),
-    localeCode: code,
-  });
-
-  const handleClick: React.MouseEventHandler = function (e) {
-    onWeekNumberClick(weekNumber, dates, e);
-  };
-
-  if (props?.headerVersion) {
-    return (
-      <Button
-        name="week-number"
-        aria-label={label}
-        className={classNames.weeknumber}
-        style={styles.weeknumber}
-        onClick={handleClick}
-      >
-        {weekNumber}
-      </Button>
-    );
-  }
-
  return (
    <Button
      name="week-number"
-      aria-label={label}
+      aria-label={translate("selectWeekNumber", { week: weekNumber })}
      className={classNames.weeknumber}
      style={styles.weeknumber}
-      onClick={handleClick}
+      onClick={(event) => {
+        onWeekNumberClick(weekNumber, dates, event);
+      }}
    >
      {weekNumber}
    </Button>
@@ -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;
+  }
+};
@@ -45,7 +45,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} />
@@ -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 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;
@@ -232,6 +232,34 @@ export const UserWithMenuGridIconMenu = () => (
  </InternalHeader>
 );

+export const UserButton = () => (
+  <InternalHeader style={{ width: 600 }}>
+    <InternalHeader.Title as="h1">Sykepenger</InternalHeader.Title>
+    <Spacer />
+    <Dropdown>
+      <InternalHeader.UserButton
+        as={Dropdown.Toggle}
+        name="Ola N."
+        description="Enhet: Skien"
+      />
+      <Dropdown.Menu>
+        <dl>
+          <BodyShort as="dt" size="small">
+            Ola Normann
+          </BodyShort>
+          <Detail as="dd">D123456</Detail>
+        </dl>
+        <Dropdown.Menu.Divider />
+        <Dropdown.Menu.List>
+          <Dropdown.Menu.List.Item>
+            Logg ut <Spacer /> <LeaveIcon aria-hidden fontSize="1.5rem" />
+          </Dropdown.Menu.List.Item>
+        </Dropdown.Menu.List>
+      </Dropdown.Menu>
+    </Dropdown>
+  </InternalHeader>
+);
+
 export const Chromatic: Story = {
  render: () => (
    <VStack gap="4">
@@ -259,6 +287,10 @@ export const Chromatic: Story = {
        <h2>UserWithMenuGridIconMenu</h2>
        <UserWithMenuGridIconMenu />
      </div>
+      <div>
+        <h2>UserButton</h2>
+        <UserButton />
+      </div>
    </VStack>
  ),
  parameters: {
@@ -560,6 +560,48 @@ export const Links: Story = {
  decorators: [DemoDecorator],
 };

+export const Align: Story = {
+  render: (props) => {
+    return (
+      <HStack gap="24">
+        <ActionMenu open={props.open}>
+          <ActionMenu.Trigger>
+            <button>Start</button>
+          </ActionMenu.Trigger>
+          <ActionMenu.Content align="start">
+            <ActionMenu.Item onSelect={() => console.log("Item 1 clicked")}>
+              Item 1
+            </ActionMenu.Item>
+            <ActionMenu.Item onSelect={() => console.log("Item 2 clicked")}>
+              Item 2
+            </ActionMenu.Item>
+            <ActionMenu.Item onSelect={() => console.log("Item 3 clicked")}>
+              Item 3
+            </ActionMenu.Item>
+          </ActionMenu.Content>
+        </ActionMenu>
+        <ActionMenu open={props.open}>
+          <ActionMenu.Trigger>
+            <button>End</button>
+          </ActionMenu.Trigger>
+          <ActionMenu.Content align="end">
+            <ActionMenu.Item onSelect={() => console.log("Item 1 clicked")}>
+              Item 1
+            </ActionMenu.Item>
+            <ActionMenu.Item onSelect={() => console.log("Item 2 clicked")}>
+              Item 2
+            </ActionMenu.Item>
+            <ActionMenu.Item onSelect={() => console.log("Item 3 clicked")}>
+              Item 3
+            </ActionMenu.Item>
+          </ActionMenu.Content>
+        </ActionMenu>
+      </HStack>
+    );
+  },
+  decorators: [DemoDecorator],
+};
+
 export const Chromatic: Story = {
  render: (args, context) => {
    const newArgs = { ...args, open: true };
@@ -608,6 +650,10 @@ export const Chromatic: Story = {
            {Disabled.render?.(newArgs, context)}
          </div>
        </HStack>
+        <div style={{ marginBottom: "10rem" }}>
+          <h2>Align</h2>
+          {Align.render?.(newArgs, context)}
+        </div>
      </VStack>
    );
  },
@@ -2,6 +2,7 @@ import cl from "clsx";
 import React, { forwardRef, useRef } from "react";
 import { ChevronRightIcon } from "@navikt/aksel-icons";
 import { useModalContext } from "../../modal/Modal.context";
+import { UNSAFE_useAkselTheme } from "../../provider";
 import { Slot } from "../../slot/Slot";
 import { OverridableComponent, useId } from "../../util";
 import { composeEventHandlers } from "../../util/composeEventHandlers";
@@ -332,44 +333,56 @@ export const ActionMenuTrigger = forwardRef<
 interface ActionMenuContentProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "id"> {
  children?: React.ReactNode;
+  align?: "start" | "end";
 }

 export const ActionMenuContent = forwardRef<
  HTMLDivElement,
  ActionMenuContentProps
->(({ children, className, style, ...rest }: ActionMenuContentProps, ref) => {
-  const context = useActionMenuContext();
+>(
+  (
+    {
+      children,
+      className,
+      style,
+      align = "start",
+      ...rest
+    }: ActionMenuContentProps,
+    ref,
+  ) => {
+    const context = useActionMenuContext();

-  return (
-    <Menu.Portal rootElement={context.rootElement} asChild>
-      <Menu.Content
-        ref={ref}
-        id={context.contentId}
-        aria-labelledby={context.triggerId}
-        className={cl("navds-action-menu__content", className)}
-        {...rest}
-        align="start"
-        sideOffset={4}
-        collisionPadding={10}
-        onCloseAutoFocus={() => {
-          context.triggerRef.current?.focus();
-        }}
-        safeZone={{ anchor: context.triggerRef.current }}
-        style={{
-          ...style,
-          ...{
-            "--__ac-action-menu-content-transform-origin":
-              "var(--ac-floating-transform-origin)",
-            "--__ac-action-menu-content-available-height":
-              "var(--ac-floating-available-height)",
-          },
-        }}
-      >
-        <div className="navds-action-menu__content-inner">{children}</div>
-      </Menu.Content>
-    </Menu.Portal>
-  );
-});
+    return (
+      <Menu.Portal rootElement={context.rootElement} asChild>
+        <Menu.Content
+          ref={ref}
+          id={context.contentId}
+          aria-labelledby={context.triggerId}
+          className={cl("navds-action-menu__content", className)}
+          {...rest}
+          align={align}
+          sideOffset={4}
+          collisionPadding={10}
+          onCloseAutoFocus={() => {
+            context.triggerRef.current?.focus();
+          }}
+          safeZone={{ anchor: context.triggerRef.current }}
+          style={{
+            ...style,
+            ...{
+              "--__ac-action-menu-content-transform-origin":
+                "var(--ac-floating-transform-origin)",
+              "--__ac-action-menu-content-available-height":
+                "var(--ac-floating-available-height)",
+            },
+          }}
+        >
+          <div className="navds-action-menu__content-inner">{children}</div>
+        </Menu.Content>
+      </Menu.Portal>
+    );
+  },
+);

 /* -------------------------------------------------------------------------- */
 /*                              ActionMenuLabel                               */
@@ -723,6 +736,8 @@ export const ActionMenuRadioItem = forwardRef<
    { children, className, onSelect, ...rest }: ActionMenuRadioItemProps,
    ref,
  ) => {
+    const themeContext = UNSAFE_useAkselTheme(false);
+
    return (
      <Menu.RadioItem
        ref={ref}
@@ -768,29 +783,48 @@ export const ActionMenuRadioItem = forwardRef<
                  fill="var(--ax-bg-default, var(--a-surface-default))"
                />
              </g>
-              <g className="navds-action-menu__indicator-icon--checked">
-                <rect
-                  x="1"
-                  y="1"
-                  width="22"
-                  height="22"
-                  rx="11"
-                  fill="var(--ax-bg-default, var(--a-surface-default))"
-                />
-                <rect
-                  x="1"
-                  y="1"
-                  width="22"
-                  height="22"
-                  rx="11"
-                  stroke="var(--ax-bg-accent-strong-pressed, var(--a-surface-action-selected))"
-                  strokeWidth="2"
-                />
-                <path
-                  d="M20 12C20 16.4178 16.4178 20 12 20C7.58222 20 4 16.4178 4 12C4 7.58222 7.58222 4 12 4C16.4178 4 20 7.58222 20 12Z"
-                  fill="var(--ax-bg-accent-strong-pressed, var(--a-surface-action-selected))"
-                />
-              </g>
+              {themeContext ? (
+                <g className="navds-action-menu__indicator-icon--checked">
+                  <rect
+                    width="24"
+                    height="24"
+                    rx="12"
+                    fill="var(--ax-bg-accent-strong-pressed)"
+                  />
+                  <rect
+                    x="8"
+                    y="8"
+                    width="8"
+                    height="8"
+                    rx="4"
+                    fill="var(--ax-bg-default, var(--a-surface-default))"
+                  />
+                </g>
+              ) : (
+                <g className="navds-action-menu__indicator-icon--checked">
+                  <rect
+                    x="1"
+                    y="1"
+                    width="22"
+                    height="22"
+                    rx="11"
+                    fill="var(--ax-bg-default, var(--a-surface-default))"
+                  />
+                  <rect
+                    x="1"
+                    y="1"
+                    width="22"
+                    height="22"
+                    rx="11"
+                    stroke="var(--ax-bg-accent-strong-pressed, var(--a-surface-action-selected))"
+                    strokeWidth="2"
+                  />
+                  <path
+                    d="M20 12C20 16.4178 16.4178 20 12 20C7.58222 20 4 16.4178 4 12C4 7.58222 7.58222 4 12 4C16.4178 4 20 7.58222 20 12Z"
+                    fill="var(--ax-bg-accent-strong-pressed, var(--a-surface-action-selected))"
+                  />
+                </g>
+              )}
            </svg>
          </Menu.ItemIndicator>
        </Marker>
@@ -955,11 +989,11 @@ ActionMenu.SubTrigger = ActionMenuSubTrigger;
 ActionMenu.SubContent = ActionMenuSubContent;

 export type {
-  ActionMenuItemProps,
  ActionMenuCheckboxItemProps,
  ActionMenuContentProps,
  ActionMenuDividerProps,
  ActionMenuGroupProps,
+  ActionMenuItemProps,
  ActionMenuLabelProps,
  ActionMenuProps,
  ActionMenuRadioGroupProps,
@@ -1,9 +1,20 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
+import { Slot } from "../../slot/Slot";
 import { createContext } from "../../util/create-context";

 type AkselThemeContext = {
-  theme: "light" | "dark";
+  /**
+   * Color theme
+   * @default "light"
+   */
+  theme?: "light" | "dark";
+  /**
+   * Brand volume
+   * @default "low"
+   * This is experimental and subject to changes
+   */
+  volume?: "high" | "low";
 };

 const [ThemeProvider, useAkselTheme] = createContext<AkselThemeContext>({
@@ -17,6 +28,8 @@ type AkselThemeProps = {
  children: React.ReactNode;
  className?: string;
  hasBackground?: boolean;
+  /* TODO: Handle this correctly with types */
+  asChild?: boolean;
 } & AkselThemeContext;

 const AkselTheme = forwardRef<HTMLDivElement, AkselThemeProps>(
@@ -26,7 +39,9 @@ const AkselTheme = forwardRef<HTMLDivElement, AkselThemeProps>(
    const {
      children,
      className,
+      asChild = false,
      theme = context?.theme ?? "light",
+      volume = context?.volume ?? "low",
      hasBackground: hasBackgroundProp = true,
    } = props;

@@ -35,15 +50,18 @@ const AkselTheme = forwardRef<HTMLDivElement, AkselThemeProps>(
    const hasBackground =
      hasBackgroundProp ?? (isRoot || props.theme !== undefined);

+    const SlotElement = asChild ? Slot : "div";
+
    return (
-      <ThemeProvider theme={theme}>
-        <div
+      <ThemeProvider theme={theme} volume={volume}>
+        <SlotElement
          ref={ref}
          className={cl("navds-theme", className, theme)}
          data-background={hasBackground}
+          data-volume={volume}
        >
          {children}
-        </div>
+        </SlotElement>
      </ThemeProvider>
    );
  },
@@ -4,5 +4,7 @@ declare module "react" {
  interface CSSProperties {
    [key: `--ac-${string}`]: string | number | undefined;
    [key: `--__ac-${string}`]: string | number | undefined;
+    [key: `--axc-${string}`]: string | number | undefined;
+    [key: `--__axc-${string}`]: string | number | undefined;
  }
 }
@@ -1,6 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
+import { UNSAFE_useAkselTheme } from "../provider";
 import { BodyLong } from "../typography";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { useControllableState } from "../util/hooks/useControllableState";
@@ -33,7 +34,7 @@ export interface ReadMoreProps
   * Changes fontsize for content.
   * @default "medium"
   */
-  size?: "medium" | "small";
+  size?: "large" | "medium" | "small";
 }

 /**
@@ -74,6 +75,10 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
      onChange: onOpenChange,
    });

+    const themeContext = UNSAFE_useAkselTheme(false);
+
+    const typoSize = size === "small" ? "small" : "medium";
+
    return (
      <div
        className={cl(
@@ -82,6 +87,7 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
          className,
          { "navds-read-more--open": _open },
        )}
+        data-volume={themeContext?.volume}
      >
        <button
          {...rest}
@@ -92,6 +98,7 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
          })}
          onClick={composeEventHandlers(onClick, () => _setOpen((x) => !x))}
          aria-expanded={_open}
+          data-state={_open ? "open" : "closed"}
        >
          <ChevronDownIcon
            className="navds-read-more__expand-icon"
@@ -106,7 +113,8 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
          className={cl("navds-read-more__content", {
            "navds-read-more__content--closed": !_open,
          })}
-          size={size}
+          size={typoSize}
+          data-state={_open ? "open" : "closed"}
        >
          {children}
        </BodyLong>
@@ -3,6 +3,7 @@ import { fn } from "@storybook/test";
 import React from "react";
 import { ReadMore } from ".";
 import { VStack } from "../layout/stack";
+import { UNSAFE_AkselTheme } from "../provider";

 export default {
  title: "ds-react/ReadMore",
@@ -37,6 +38,13 @@ export const Default: Story = {
  },
 };

+export const Large: Story = {
+  args: {
+    ...Default.args,
+    size: "large",
+  },
+};
+
 export const Small: Story = {
  args: {
    ...Default.args,
@@ -58,8 +66,44 @@ export const Open: Story = {
  },
 };

+export const BrandVolumeLow: Story = {
+  render: () => (
+    <UNSAFE_AkselTheme volume="low">
+      <VStack gap="4">
+        <ReadMore size="large" header={Default.args?.header}>
+          {Content}
+        </ReadMore>
+        <ReadMore header={Default.args?.header}>{Content}</ReadMore>
+        <ReadMore size="small" header={Default.args?.header}>
+          {Content}
+        </ReadMore>
+      </VStack>
+    </UNSAFE_AkselTheme>
+  ),
+  args: {
+    ...Default.args,
+    open: true,
+  },
+};
+
+export const BrandVolumeHigh: Story = {
+  render: () => (
+    <UNSAFE_AkselTheme volume="high">
+      <VStack gap="4">
+        <ReadMore size="large" header={Default.args?.header}>
+          {Content}
+        </ReadMore>
+        <ReadMore header={Default.args?.header}>{Content}</ReadMore>
+        <ReadMore size="small" header={Default.args?.header}>
+          {Content}
+        </ReadMore>
+      </VStack>
+    </UNSAFE_AkselTheme>
+  ),
+};
+
 export const Chromatic: Story = {
-  render: () => {
+  render: (...props) => {
    return (
      <VStack gap="4">
        <div>
@@ -72,6 +116,11 @@ export const Chromatic: Story = {
          {/* @ts-expect-error Args are partial, leading to required prop mismatch */}
          <ReadMore {...Small.args} />
        </div>
+        <div>
+          <h2>Large</h2>
+          {/* @ts-expect-error Args are partial, leading to required prop mismatch */}
+          <ReadMore {...Large.args} />
+        </div>
        <div>
          <h2>DefaultOpen</h2>
          {/* @ts-expect-error Args are partial, leading to required prop mismatch */}
@@ -82,6 +131,14 @@ export const Chromatic: Story = {
          {/* @ts-expect-error Args are partial, leading to required prop mismatch */}
          <ReadMore {...Open.args} />
        </div>
+        <div>
+          <h2>BrandVolumeLow</h2>
+          {BrandVolumeLow?.render?.(...props)}
+        </div>
+        <div>
+          <h2>BrandVolumeHigh</h2>
+          {BrandVolumeHigh?.render?.(...props)}
+        </div>
      </VStack>
    );
  },
@@ -60,6 +60,9 @@ export const Step: OverridableComponent<StepperStepProps, HTMLAnchorElement> =
            "navds-stepper__step--non-interactive": !isInteractive,
            "navds-stepper__step--completed": completed,
          })}
+          data-active={activeStep === context.index}
+          data-completed={completed}
+          data-interactive={isInteractive}
          onClick={composeEventHandlers(onClick, handleStepClick)}
        >
          {completed ? (
@@ -93,6 +93,7 @@ export const Stepper: StepperComponent = forwardRef<
          orientation === "horizontal" ? "navds-stepper--horizontal" : "",
          className,
        )}
+        data-orientation={orientation}
      >
        {React.Children.map(children, (step, index) => {
          const stepProps: Partial<StepperStepProps> =
@@ -101,10 +102,12 @@ export const Stepper: StepperComponent = forwardRef<
          return (
            <li
              className={cl("navds-stepper__item", {
+                /* TODO: Remove these 3 classNames in darkmode update */
                "navds-stepper__item--behind": activeStep > index,
                "navds-stepper__item--completed": stepProps.completed,
-                "navds-stepper__item--non-interactive":
-                  stepProps.interactive ?? interactive,
+                "navds-stepper__item--non-interactive": !(
+                  stepProps.interactive ?? interactive
+                ),
              })}
              key={index + (children?.toString?.() ?? "")}
            >
@@ -180,7 +180,9 @@ export const CompletedSteps: StoryFn<Story> = () => {
        <Stepper.Step completed={activeStep >= 4}>
          Søknadstekst for en veldig spesifikk prosess i NAV som har lang tekst
        </Stepper.Step>
-        <Stepper.Step completed={activeStep > 5}>Vedlegg</Stepper.Step>
+        <Stepper.Step completed={activeStep > 5} interactive={false}>
+          Vedlegg
+        </Stepper.Step>
        <Stepper.Step completed={activeStep > 6}>Oppsummering</Stepper.Step>
        <Stepper.Step completed={activeStep > 7}>Innsending</Stepper.Step>
      </Stepper>
@@ -224,6 +224,7 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(

    const mainStyle: React.CSSProperties = {
      "--__ac-textarea-height": state.outerHeightStyle + "px",
+      "--__axc-textarea-height": state.outerHeightStyle + "px",
      // Need a large enough difference to allow scrolling.
      // This prevents infinite rendering loop.
      overflow:
@@ -5,22 +5,54 @@ import en from "./locales/en";
 import nb from "./locales/nb";
 import nn from "./locales/nn";

-function checkValues(obj: Translations | Record<string, string>) {
-  Object.entries(obj).forEach(([key, value]) => {
-    if (key === "dateLocale") {
-      return;
-    }
-    if (typeof value === "object") {
-      checkValues(value);
-    } else {
-      expect(value).toBeTypeOf("string");
-      expect(value).not.toBe("");
-    }
-  });
+type NestedObject = Record<string, string | Record<string, string>>;
+
+function checkValues(obj: Translations | NestedObject) {
+  Object.entries(obj).forEach(
+    ([key, value]: [string, string | NestedObject]) => {
+      if (key === "dateLocale") {
+        return;
+      }
+      if (typeof value === "object") {
+        checkValues(value);
+      } else {
+        expect(value).toBeTypeOf("string");
+        expect(value).not.toBe("");
+      }
+    },
+  );
+}
+
+function checkTranslationPlaceholders(
+  baseTranslations: Translations | NestedObject, // Translations to check against
+  translations: Translations | NestedObject, // Translations to check
+) {
+  Object.entries(baseTranslations).forEach(
+    ([key, baseVal]: [string, string | NestedObject]) => {
+      if (key === "dateLocale") {
+        return;
+      }
+      if (typeof baseVal === "object") {
+        checkTranslationPlaceholders(baseVal, translations[key]);
+      } else {
+        const correctPlaceholders = baseVal.match(/{[^}]*}/g) || [];
+        const transPlaceholders = translations[key].match(/{[^}]*}/g) || [];
+        expect(
+          transPlaceholders.sort(),
+          `Wrong placeholders in "${translations[key]}" (key=${key})`,
+        ).toEqual(correctPlaceholders.sort());
+      }
+    },
+  );
 }

 describe("Locale", () => {
  test("NB should have no empty strings", () => checkValues(nb));
  test("NN should have no empty strings", () => checkValues(nn));
  test("EN should have no empty strings", () => checkValues(en));
+
+  test("NN should have the same placeholders as NB", () =>
+    checkTranslationPlaceholders(nb, nn));
+  test("EN should have the same placeholders as NB", () =>
+    checkTranslationPlaceholders(nb, en));
 });
@@ -97,4 +97,24 @@ export default {
      reset: "Reset zoom",
    },
  },
+  DatePicker: {
+    close: "Close",
+    chooseDate: "Choose date",
+    chooseDates: "Choose dates",
+    chooseDateRange: "Choose start and end date",
+    chooseMonth: "Choose month",
+    week: "Week",
+    weekNumber: "Week {week}",
+    selectWeekNumber: "Select week {week}",
+    month: "Month",
+    goToNextMonth: "Go to next month",
+    goToPreviousMonth: "Go to previous month",
+    year: "Year",
+    goToNextYear: "Go to next year",
+    goToPreviousYear: "Go to previous year",
+    openDatePicker: "Open date picker",
+    openMonthPicker: "Open month picker",
+    closeDatePicker: "Close date picker",
+    closeMonthPicker: "Close month picker",
+  },
 } satisfies Translations;
@@ -102,4 +102,24 @@ export default {
      reset: "Tilbakestill tidsperspektiv",
    },
  },
+  DatePicker: {
+    close: "Lukk", // TODO: Consider making global
+    chooseDate: "Velg dato",
+    chooseDates: "Velg datoer",
+    chooseDateRange: "Velg start- og sluttdato",
+    chooseMonth: "Velg måned",
+    week: "Uke",
+    weekNumber: "Uke {week}",
+    selectWeekNumber: "Velg uke {week}",
+    month: "Måned",
+    goToNextMonth: "Gå til neste måned",
+    goToPreviousMonth: "Gå til forrige måned",
+    year: "År",
+    goToNextYear: "Gå til neste år",
+    goToPreviousYear: "Gå til forrige år",
+    openDatePicker: "Åpne datovelger",
+    openMonthPicker: "Åpne månedsvelger",
+    closeDatePicker: "Lukk datovelger",
+    closeMonthPicker: "Lukk månedsvelger",
+  },
 } satisfies TranslationMap;
@@ -97,4 +97,24 @@ export default {
      reset: "Tilbakestill tidsperspektiv",
    },
  },
+  DatePicker: {
+    close: "Lukk",
+    chooseDate: "Vel dato",
+    chooseDates: "Vel datoar",
+    chooseDateRange: "Vel start- og sluttdato",
+    chooseMonth: "Vel månad",
+    week: "Veke",
+    weekNumber: "Veke {week}",
+    selectWeekNumber: "Vel veke {week}",
+    month: "Månad",
+    goToNextMonth: "Gå til neste månad",
+    goToPreviousMonth: "Gå til førre månad",
+    year: "År",
+    goToNextYear: "Gå til neste år",
+    goToPreviousYear: "Gå til førre år",
+    openDatePicker: "Opne datoveljar",
+    openMonthPicker: "Opne månadsveljar",
+    closeDatePicker: "Lukk datoveljar",
+    closeMonthPicker: "Lukk månadsveljar",
+  },
 } satisfies Translations;
@@ -1,5 +1,9 @@
 # @navikt/ds-tailwind

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

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

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

 ## 7.5.1
@@ -7,6 +7,7 @@ import {
 import { radiusTokenConfig } from "./tokens/radius";
 import { semanticTokenConfig } from "./tokens/semantic";
 import { semanticTokensForAllRolesConfig } from "./tokens/semantic-roles";
+import { shadowTokenConfig } from "./tokens/shadow";
 import { spacingTokenConfig } from "./tokens/spacing";
 import { textContrastTokenConfig } from "./tokens/text-contrast";
 import { mergeConfigs, tokensWithPrefix } from "./util";
@@ -23,6 +24,7 @@ export const lightModeTokens = () => {
      semanticTokensForAllRolesConfig("light"),
      textContrastTokenConfig(),
      semanticTokenConfig("light"),
+      shadowTokenConfig("light"),
      globalColorLightModeConfig,
    ]),
  );
@@ -38,6 +40,7 @@ export const darkModeTokens = () => {
      semanticTokensForAllRolesConfig("dark"),
      textContrastTokenConfig(),
      semanticTokenConfig("dark"),
+      shadowTokenConfig("dark"),
      globalColorDarkModeConfig,
    ]),
  );
@@ -46,21 +46,23 @@ export const getTokensForCollection = async (

  const dictionary = await SD.getPlatformTokens(collection);

-  return dictionary.allTokens.map((token) => {
-    const reference = getReferences(token.original, dictionary.tokens);
-    /*
-     * Currently only supports 1 level of references.
-     */
-    return reference.length > 0
-      ? prepareToken(
-          {
-            ...(token as TransformedTokenWithScopes),
-            alias: createTokenName(reference[0]),
-          },
-          dictionary,
-        )
-      : prepareToken(token as TransformedTokenWithScopes, dictionary);
-  });
+  return dictionary.allTokens
+    .filter((token) => !token.figmaIgnore)
+    .map((token) => {
+      const reference = getReferences(token.original, dictionary.tokens);
+      /*
+       * Currently only supports 1 level of references.
+       */
+      return reference.length > 0
+        ? prepareToken(
+            {
+              ...(token as TransformedTokenWithScopes),
+              alias: createTokenName(reference[0]),
+            },
+            dictionary,
+          )
+        : prepareToken(token as TransformedTokenWithScopes, dictionary);
+    });
 };

 type TransformedTokenWithScopes = TransformedToken & {
@@ -20,6 +20,11 @@ export function semanticTokenConfig(
        type: "color",
        group: "text",
      },
+      logo: {
+        value: theme === "light" ? "#C30000" : "{ax.neutral.1000.value}",
+        type: "color",
+        group: "text",
+      },
    },
    bg: {
      default: {
@@ -0,0 +1,19 @@
+import { ColorTheme, StyleDictionaryTokenConfig } from "../util";
+
+export function shadowTokenConfig(
+  theme: ColorTheme,
+): StyleDictionaryTokenConfig<"shadow"> {
+  return {
+    shadow: {
+      dialog: {
+        value:
+          theme === "light"
+            ? `0px 0px 1px 0px rgba(7 9 13 / 0.02), 0px 2px 5px 0px rgba(7 9 13 / 0.10), 0px 5px 12px 0px rgba(7 9 13 / 0.12)`
+            : `0px 0px 1px 0px rgba(7 9 13 / 0.00), 0px 2px 5px 0px rgba(7 9 13 / 0.35), 0px 5px 12px 0px rgba(7 9 13 / 0.50)`,
+        type: "shadow",
+        comment: "Used for dialog elements like modals and popovers.",
+        figmaIgnore: true,
+      },
+    },
+  };
+}
@@ -50,6 +50,7 @@ type GlobalColorScale =

 export type TokenTypes =
  | "color"
+  | "shadow"
  | "global-color"
  | "global-radius"
  | "global-spacing"
@@ -88,6 +89,11 @@ export type StyleDictionaryToken<T extends TokenTypes> = {
   * Token will include all default scopes based on `type`, and any extra specified here.
   */
  scopes?: VariableScope[];
+  /**
+   * In some cases, we want to hide tokens from the Figma plugin.
+   * Currently only relevant for shadow-tokens.
+   */
+  figmaIgnore?: boolean;
 };

 export type StyleDictionaryTokenConfig<T extends TokenTypes> = {
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "7.5.2",
+  "version": "7.6.0",
  "description": "Design-tokens for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -1,5 +1,35 @@
 # Changelog

+## 7.6
+
+### @navikt/aksel-icons
+
+- Icons: Added new icons 'TruckPercent' and 'ShieldCheckmark' 🎉. ([#3416](https://github.com/navikt/aksel/pull/3416))
+
+### @navikt/ds-react
+
+- 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))
+
+* 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))
+
+### @navikt/ds-css
+
+- ReadMore: Added size 'large'. ([#3372](https://github.com/navikt/aksel/pull/3372))
+
+* 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

 ### @navikt/aksel-icons
@@ -12,11 +42,13 @@

 ### @navikt/ds-react

- Combobox: Fix issue where using arrow keys in list would make the entire page scroll ([#3364](https://github.com/navikt/aksel/pull/3364))
+- Allow RC versions of React 19 through peerDependencies ([#3391](https://github.com/navikt/aksel/pull/3391))

-* React: Allow all react versions above 17.0.0 trough peerDependencies. ([#3334](https://github.com/navikt/aksel/pull/3334))
+* Combobox: Fix issue where using arrow keys in list would make the entire page scroll ([#3364](https://github.com/navikt/aksel/pull/3364))

- Datepicker: Use of 'open'-prop set to 'true' on first render could lead to the dialog not opening. ([#3333](https://github.com/navikt/aksel/pull/3333))
+- React: Allow all react versions above 17.0.0 trough peerDependencies. ([#3334](https://github.com/navikt/aksel/pull/3334))
+
+* Datepicker: Use of 'open'-prop set to 'true' on first render could lead to the dialog not opening. ([#3333](https://github.com/navikt/aksel/pull/3333))

 ### @navikt/ds-css

@@ -15,10 +15,10 @@
    "playroom"
  ],
  "dependencies": {
-    "@navikt/aksel-icons": "^7.5.2",
-    "@navikt/ds-css": "^7.5.2",
-    "@navikt/ds-react": "^7.5.2",
-    "@navikt/ds-tailwind": "^7.5.2",
-    "@navikt/ds-tokens": "^7.5.2"
+    "@navikt/aksel-icons": "^7.6.0",
+    "@navikt/ds-css": "^7.6.0",
+    "@navikt/ds-react": "^7.6.0",
+    "@navikt/ds-tailwind": "^7.6.0",
+    "@navikt/ds-tokens": "^7.6.0"
  }
 }
@@ -15,4 +15,5 @@ export const Demo = {

 export const args = {
  index: 1,
+  desc: "Interaction-varianten er ment for interaktive elementer.",
 };
@@ -10,4 +10,5 @@ export default withDsExample(Example, { background: "inverted" });

 export const args = {
  index: 2,
+  desc: "Inverted-varianten passer bedre på mørkere flater.",
 };
@@ -15,4 +15,5 @@ export const Demo = {

 export const args = {
  index: 0,
+  desc: "Neutral-varianten blir ofte brukt for innholdslasting.",
 };
@@ -3,7 +3,7 @@ import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  return (
-    <HStack gap="18">
+    <HStack gap="16">
      <Loader size="3xlarge" title="Venter..." />
      <Loader size="2xlarge" title="Venter..." />
      <Loader size="xlarge" title="Venter..." />
@@ -10,5 +10,5 @@ export default withDsExample(Example);

 export const args = {
  index: 3,
-  desc: "Prop-en 'transparent' fjerner bakgrunnselementet på Loader.",
+  desc: "Prop-en `transparent` skjuler bakgrunnselementet på Loader.",
 };
Author	SHA1	Message	Date
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