Version Packages (#3439 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
✨ Release i18n support (#3429 )
2026-10-13 09:12:03 +00:00 · 2024-12-09 15:42:28 +01:00 · 2024-12-09 15:38:49 +01:00 · 2024-12-09 13:43:12 +01:00 · 2024-12-09 12:23:54 +01:00 · 2024-12-06 20:44:56 +01:00
206 changed files with 4993 additions and 4337 deletions
@@ -51,7 +51,6 @@ export default {
  ],
  addons: [
    "@storybook/addon-a11y",
-    "@whitespace/storybook-addon-html",
    "@storybook/addon-interactions",
    "@storybook/addon-themes",
    {
@@ -5,8 +5,10 @@ import React, { useLayoutEffect } from "react";
 import darksideCss from "@navikt/ds-css/darkside/index.css?inline";
 // @ts-expect-error - Temporary
 import defaultCss from "@navikt/ds-css/index.css?inline";
-import { UNSAFE_AkselTheme } from "../@navikt/core/react/src/provider";
-import UNSAFE_AkselLanguageProvider from "../@navikt/core/react/src/provider/i18n/LanguageProvider";
+import {
+  Provider,
+  UNSAFE_AkselTheme,
+} from "../@navikt/core/react/src/provider";
 import en from "../@navikt/core/react/src/util/i18n/locales/en";
 import nb from "../@navikt/core/react/src/util/i18n/locales/nb";
 import nn from "../@navikt/core/react/src/util/i18n/locales/nn";
@@ -46,9 +48,7 @@ const translations = {
 const LanguageDecorator = ({ children, language }) => {
  if (language) {
    return (
-      <UNSAFE_AkselLanguageProvider translations={translations[language]}>
-        {children}
-      </UNSAFE_AkselLanguageProvider>
+      <Provider translations={translations[language]}>{children}</Provider>
    );
  }
  return children;
@@ -1,5 +1,17 @@
 # @navikt/aksel-icons

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

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

+## 7.8.0
+
+### Minor Changes
+
+- Combobox: Removed clear button, removed tokens staring with `--ac-combobox-clear`, deprecated props `clearButton`/`clearButtonLabel`. ([#3433](https://github.com/navikt/aksel/pull/3433))
+
+## 7.7.0
+
+## 7.6.0
+
+## 7.5.3
+
 ## 7.5.2

 ## 7.5.1
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-stylelint",
-  "version": "7.5.2",
+  "version": "7.8.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.8.0",
+    "@navikt/ds-tokens": "^7.8.0",
    "concurrently": "9.0.1",
    "postcss-selector-parser": "^6.0.13",
    "postcss-value-parser": "^4.2.0",
@@ -72,4 +72,8 @@ export const deprecations: DeprecatedList = [
    classes: ["navds-list--nested", "navds-list__item-content"],
    message: "Removed in v7.1.1",
  },
+  {
+    classes: ["navds-combobox__button-clear"],
+    message: "Removed in v7.8.0",
+  },
 ];
@@ -1,5 +1,33 @@
 # @navikt/aksel

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

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel",
-  "version": "7.5.2",
+  "version": "7.8.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.8.0",
    "axios": "1.7.4",
    "chalk": "4.1.0",
    "clipboardy": "^2.3.0",
@@ -1,5 +1,37 @@
 # @navikt/ds-css

+## 7.8.0
+
+### Minor Changes
+
+- Combobox: Removed clear button, removed tokens staring with `--ac-combobox-clear`, deprecated props `clearButton`/`clearButtonLabel`. ([#3433](https://github.com/navikt/aksel/pull/3433))
+
+### Patch Changes
+
+- CSS: Resolved regression where the complete stylesheet was included in scoped 'components.css' file. ([#3427](https://github.com/navikt/aksel/pull/3427))
+
+## 7.7.0
+
+## 7.6.0
+
+### Minor Changes
+
+- ReadMore: Added size 'large'. ([#3372](https://github.com/navikt/aksel/pull/3372))
+
+### Patch Changes
+
+- Select: Now shows focus-outline when ':focus' is set trough pointer or label in all browsers. Chrome and Firefox handles `:focus-visible` differently for 'select', previously causing outline-border not to show in Firefox. ([#3415](https://github.com/navikt/aksel/pull/3415))
+
+- Modal: Don't add scroll shadow when polyfilled ([#3408](https://github.com/navikt/aksel/pull/3408))
+
+- Modal: Now shows up while screensharing with Vergic ([#3407](https://github.com/navikt/aksel/pull/3407))
+
+- FileUpload: Remove browser styling from FileUpload.Item when used in list. ([#3413](https://github.com/navikt/aksel/pull/3413))
+
+- Combobox: Single-select now shows cursor closer to selected item. ([#3384](https://github.com/navikt/aksel/pull/3384))
+
+## 7.5.3
+
 ## 7.5.2

 ### Patch Changes
@@ -66,7 +66,13 @@ async function bundleComponents() {
  const css = fs.readFileSync(indexSrc);

  /* Remove @charset, baseline */
-  const cssString = css.toString().split("\n").slice(2).join("\n");
+  const cssString = css
+    .toString()
+    .split("\n")
+    .filter((line) => {
+      return line.startsWith("@import") && !line.includes("baseline");
+    })
+    .join("\n");

  const result = await postcss([cssImports, combineSelectors]).process(
    cssString,
@@ -3,12 +3,7 @@
  overflow: hidden;
  border-radius: var(--ax-border-radius-large);
  border: 1px solid var(--ax-border-subtleA);
-
-  /* TODO: Use token here when added */
-  box-shadow:
-    0 0 1px 0 rgb(7 9 13/ 0.02),
-    0 2px 5px 0 rgb(7 9 13/ 0.1),
-    0 10px 16px 0 rgb(7 9 13/ 0.12);
+  box-shadow: var(--ax-shadow-dialog);
  transition: transform 250ms cubic-bezier(0, 0, 0, 1) allow-discrete;

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

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

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

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

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

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

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

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

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

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

-.navds-button__icon:first-child {
-  margin-left: var(--__axc-button-icon-margin);
-}
+  &:last-child {
+    margin-right: var(--__axc-button-icon-margin);
+  }

-.navds-button__icon:last-child {
-  margin-right: var(--__axc-button-icon-margin);
-}
-
-:where(.navds-button--xsmall, .navds-button--small) .navds-button__icon {
-  --__axc-button-icon-margin: -2px;
-
-  font-size: 1.25rem;
-}
-
-.navds-button__icon:only-child {
-  margin: 0;
+  &:only-child {
+    margin: 0;
+  }
 }

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

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

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

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

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

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

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

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

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

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

 /**************************
 * .navds-button--secondary *
 **************************/
-
 .navds-button--secondary {
+  --__axc-button-border-color: var(--ax-border-accent);
+
  background-color: transparent;
  color: var(--ax-text-accent);
-  box-shadow: inset 0 0 0 2px var(--ax-border-accent);
-}

-.navds-button--secondary:hover {
-  background-color: var(--ax-bg-accent-moderate-hoverA);
-  color: var(--ax-text-accent-strong);
-  box-shadow: inset 0 0 0 2px var(--ax-bg-accent-strong-hover);
-}
+  &:hover {
+    --__axc-button-border-color: var(--ax-border-accent-strong);

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

-.navds-button--secondary:where(:disabled, .navds-button--disabled),
-.navds-button--secondary:hover:where(:disabled, .navds-button--disabled) {
-  background-color: transparent;
-  color: var(--ax-text-accent);
+  &:active {
+    --__axc-button-border-color: transparent;
+
+    background-color: var(--ax-bg-accent-strong-pressed);
+    color: var(--ax-text-accent-contrast);
+  }
+
+  &:is(:disabled, .navds-button--disabled) {
+    --__axc-button-border-color: var(--ax-border-accent);
+
+    background-color: transparent;
+    color: var(--ax-text-accent);
+  }
 }

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

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

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

-.navds-button--tertiary:active {
-  background-color: var(--ax-bg-accent-strong-pressed);
-  color: var(--ax-text-accent-contrast);
-}
+  &:active {
+    background-color: var(--ax-bg-accent-strong-pressed);
+    color: var(--ax-text-accent-contrast);
+  }

-.navds-button--tertiary:active:hover {
-  background-color: var(--ax-bg-accent-strong-pressed);
-}
-
-.navds-button--tertiary:where(:disabled, .navds-button--disabled),
-.navds-button--tertiary:hover:where(:disabled, .navds-button--disabled),
-.navds-button--tertiary:active:where(:disabled, .navds-button--disabled),
-.navds-button--tertiary:active:hover:where(:disabled, .navds-button--disabled) {
-  color: var(--ax-text-accent);
-  background: none;
-  box-shadow: none;
+  &:is(:disabled, .navds-button--disabled) {
+    color: var(--ax-text-accent);
+    background-color: transparent;
+  }
 }

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

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

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

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

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

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

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

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

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

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

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

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

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

-.navds-date .rdp-day_range_middle.rdp-day_disabled {
-  color: var(--ac-date-middle-text, var(--a-text-on-action));
-  background: var(--ac-date-middle-bg, var(--a-surface-action-selected));
-}
-
-.navds-date .rdp-month,
-.navds-date.rdp-month {
-  display: grid;
-  gap: var(--a-spacing-5);
-}
-
-.navds-date__caption-label {
-  text-transform: capitalize;
-}
-
-.navds-date .rdp-head_cell {
-  text-transform: capitalize;
-  font-size: var(--a-font-size-small);
-}
-
-.navds-date .rdp-weeknumber {
-  font-size: var(--a-font-size-small);
+.navds-date__caption {
  display: flex;
+  justify-content: space-between;
  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  border-radius: var(--a-border-radius-medium);
-  margin: var(--a-spacing-2);
-  color: var(--a-text-subtle);
+  gap: var(--ax-spacing-1);
+  padding-inline: var(--ax-spacing-1);
 }

-.navds-date .rdp-weeknumber.rdp-button {
+.navds-date__caption-button {
  width: 2rem;
  height: 2rem;
-  box-shadow: 0 0 0 1px var(--a-border-default);
-  color: var(--a-text-subtle);
-  font-size: var(--a-font-size-small);
-}
-
-.navds-date .rdp-weeknumber.rdp-button:active {
-  background-color: var(--a-surface-action-active);
-  color: var(--a-text-on-action);
-  box-shadow: none;
+  color: var(--ax-text-default);
 }

 .navds-date__caption__month .navds-select__container select {
  text-transform: capitalize;
 }

-.navds-date .rdp-button {
-  all: unset;
-  display: block;
-  width: 2.5rem;
-  height: 2.5rem;
-  text-align: center;
-  border-radius: var(--a-border-radius-medium);
-}
-
-.navds-date .rdp-day_range_start {
-  border-radius: var(--a-border-radius-xlarge) var(--a-border-radius-medium) var(--a-border-radius-medium)
-    var(--a-border-radius-xlarge);
-}
-
-.navds-date .rdp-day_range_end:not(.rdp-day_range_start) {
-  border-radius: var(--a-border-radius-medium) var(--a-border-radius-xlarge) var(--a-border-radius-xlarge)
-    var(--a-border-radius-medium);
-}
-
-.navds-date .rdp-day_range_start.rdp-day_range_end {
-  border-radius: var(--a-border-radius-xlarge);
-}
-
-.navds-date .rdp-button:not(.rdp-day_selected, [disabled]):focus-visible,
-.navds-date .navds-date__month-button:not(.rdp-day_selected, [disabled]):focus-visible {
-  box-shadow: var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-date .rdp-button:not(.rdp-day_selected, [disabled]):focus,
-  .navds-date .navds-date__month-button:not(.rdp-day_selected, [disabled]):focus {
-    box-shadow: var(--a-shadow-focus);
-  }
-}
-
-.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus-visible,
-.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus-visible {
-  box-shadow:
-    inset 0 0 0 1px var(--a-surface-default),
-    var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-date .rdp-button.rdp-day_selected:not([disabled]):focus,
-  .navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus {
-    box-shadow:
-      inset 0 0 0 1px var(--a-surface-default),
-      var(--a-shadow-focus);
-  }
-}
-
 /* Monthpicker */
 .navds-date__month-button {
  all: unset;
@@ -110,24 +142,10 @@
  width: 3rem;
  height: 3rem;
  text-transform: capitalize;
-  border-radius: var(--a-border-radius-medium);
+  border-radius: var(--ax-border-radius-medium);
  cursor: pointer;
 }

-.navds-date__month-button:focus-visible,
-.navds-monthpicker__caption-button:focus-visible {
-  box-shadow: var(--a-shadow-focus);
-  z-index: 1;
-}
-
-@supports not selector(:focus-visible) {
-  .navds-date__month-button:focus,
-  .navds-monthpicker__caption-button:focus {
-    box-shadow: var(--a-shadow-focus);
-    z-index: 1;
-  }
-}
-
 .navds-date__year-label {
  display: flex;
  align-items: center;
@@ -137,13 +155,69 @@
 .navds-date__standalone-wrapper {
  height: fit-content;
  width: fit-content;
+
+  .rdp-cell > button.rdp-day,
+  button.navds-date__month-button {
+    &:focus-visible {
+      outline: 2px solid var(--ax-border-focus);
+      outline-offset: 1px;
+    }
+
+    &:active:not(:disabled) {
+      color: var(--ax-text-accent-contrast);
+      background-color: var(--ax-bg-accent-strong-pressed);
+    }
+  }
 }

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

 .navds-date__field-wrapper {
@@ -153,146 +227,23 @@
  width: fit-content;
 }

-.navds-date .rdp-day_selected,
-.navds-monthpicker__month--selected {
-  color: var(--ac-date-selected-text, var(--a-text-on-action));
-  background: var(--ac-date-selected-bg, var(--a-surface-action-selected));
-  cursor: pointer;
-}
-
-.navds-date .rdp-day_disabled {
-  cursor: not-allowed;
-  text-decoration: line-through;
-  background-color: var(--ac-date-disabled-bg, var(--a-surface-neutral-subtle));
-  color: var(--ac-date-disabled-text, var(--a-text-subtle));
-}
-
-.navds-date .rdp-button:where(:not(.rdp-day_selected, [disabled])):hover,
-.navds-date__month-button:where(:not(.rdp-day_selected, [disabled])):hover {
-  background: var(--ac-date-hover-bg, var(--a-surface-action-subtle-hover));
-  cursor: pointer;
-}
-
-.navds-date .rdp-day_today {
-  box-shadow: 0 0 0 1px var(--ac-date-today-border, var(--a-border-action-selected));
-  text-decoration: underline;
-}
-
-.navds-date__caption {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--a-spacing-1);
-  padding-inline: var(--a-spacing-1);
-}
-
-.navds-date__caption-button,
-.navds-date__caption-button:disabled,
-.navds-date__caption-button:disabled:hover {
-  color: var(--ac-date-caption-text, var(--a-text-default));
-}
-
-.navds-date__field-input {
-  padding-right: var(--a-spacing-12);
-}
-
-.navds-form-field--small .navds-date__field-input {
-  padding-right: var(--a-spacing-8);
-}
-
-/* Error-handling */
-.navds-date__field--error .navds-date__field-input:not(:hover, :disabled) {
-  border-color: var(--ac-date-input-error-border, var(--a-border-danger));
-  box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger));
-}
-
-.navds-date__field--error .navds-date__field-input:focus-visible:not(:hover, :disabled) {
-  box-shadow:
-    inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)),
-    var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-date__field--error .navds-date__field-input:focus:not(:hover, :disabled) {
-    box-shadow:
-      inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)),
-      var(--a-shadow-focus);
-  }
-}
-
-.navds-date__field-button {
-  position: absolute;
-  right: 0.0625rem;
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--ac-date-input-button-text, var(--a-text-default));
-  display: inline-flex;
-  cursor: pointer;
-  margin: 0;
-  text-decoration: none;
-  border: none;
-  background: none;
-  border-radius: calc(var(--a-border-radius-medium) - 1px);
-  padding: var(--a-spacing-3);
-  align-items: center;
-  justify-content: center;
-  font-size: 1.5rem;
-  height: calc(100% - 0.125rem);
-  border-start-start-radius: 0;
-  border-end-start-radius: 0;
-}
-
-.navds-form-field--small .navds-date__field-button {
-  padding: var(--a-spacing-1);
-}
-
-.navds-date__field-button:hover:where(:not([disabled])) {
-  color: var(--ac-date-input-button-hover-text, var(--a-text-action-on-action-subtle));
-  background-color: var(--ac-date-input-button-hover-bg, var(--a-surface-action-subtle-hover));
-}
-
-.navds-form-field--disabled .navds-date__field-button {
-  opacity: 1;
-  cursor: not-allowed;
-}
-
-.navds-date__field-button:focus-visible {
-  outline: none;
-  box-shadow: var(--a-shadow-focus);
-  border-radius: var(--a-border-radius-medium);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-date__field-button:focus {
-    outline: none;
-    box-shadow: var(--a-shadow-focus);
-  }
-}
-
-.navds-date__caption__year {
-  width: 5rem;
-}
-
-.navds-date .rdp-day_outside {
-  visibility: hidden;
-  pointer-events: none;
-}
-
-/* Readonly */
-.navds-date__field--readonly .navds-date__field-button {
-  cursor: default;
-  color: var(--a-gray-500);
-}
-
-.navds-date__caption-button {
-  width: 2rem;
-  height: 2rem;
-}
-
 .navds-date__week-row {
  display: flex;
  align-items: center;
-  gap: var(--a-spacing-05);
+  gap: var(--ax-spacing-05);
+}
+
+.navds-date__weeknumber {
+  --__axc-button-border-width: 1px;
+}
+
+.navds-date__weeknumber-number {
+  font-size: 0.875rem;
+  color: var(--ax-text-subtle);
+
+  .navds-date__weeknumber:active & {
+    color: var(--ax-text-neutral-contrast);
+  }
 }

 .navds-date__week-wrapper {
@@ -303,37 +254,25 @@
  margin: 0;
 }

-.navds-date__modal.navds-date {
-  padding: 0;
-}
-
 .navds-date__modal-body {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
-  padding: var(--a-spacing-4);
-  gap: var(--a-spacing-2);
-}
-
-.navds-date__modal-body > .navds-date {
-  padding: 0;
-}
-
-.navds-date__popover:where(.navds-popover) {
-  border: none;
+  padding: var(--ax-spacing-4);
+  gap: var(--ax-spacing-2);
 }

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

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

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

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

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

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

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

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

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

    & .navds-expansioncard__content-inner {
      opacity: 1;
@@ -1,121 +1,156 @@
 .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__selected-options {
+    & .navds-chips__chip {
+      background-color: var(--ax-bg-neutral-moderateA);
+    }
+  }
+
+  & .navds-combobox__button-toggle-list {
+    color: var(--ax-bg-neutral-moderate);
+  }
+
+  & .navds-combobox__wrapper {
+    border-color: var(--ax-border-subtle);
+    overflow: clip;
+  }
+
+  & .navds-text-field__input,
+  & .navds-combobox__input {
+    background-color: var(--ax-bg-neutral-moderate);
+  }
 }

-.navds-combobox--readonly .navds-combobox__button-toggle-list {
-  color: var(--a-gray-500);
-}
-
-.navds-combobox--readonly .navds-text-field__input,
-.navds-combobox--readonly .navds-combobox__input {
-  background-color: var(--a-surface-subtle);
-  border-color: var(--a-border-subtle);
-}
-
-.navds-combobox__button-clear svg,
 .navds-combobox__button-toggle-list svg,
 .navds-combobox__list svg {
-  width: var(--__ac-combobox-icon-size);
-  height: var(--__ac-combobox-icon-size);
+  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,85 +164,51 @@
  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;
+    &:has(.navds-combobox__input:focus).navds-combobox__wrapper-inner--virtually-unfocused {
+      outline: none;
+    }
  }
 }

-@supports not selector(:has) {
-  .navds-combobox--focused .navds-combobox__wrapper-inner {
-    box-shadow: var(--a-shadow-focus);
-    outline: 3px solid transparent;
-    outline-offset: 2px;
-  }
-
-  .navds-combobox--focused .navds-combobox__wrapper-inner.navds-combobox__wrapper-inner--virtually-unfocused {
-    box-shadow: none;
-    outline: none;
-  }
-}
-
-.navds-combobox__button-clear {
-  border-radius: var(--a-border-radius-medium);
-  color: var(--ac-combobox-clear-icon, var(--a-text-subtle));
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  background: none;
-  border: none;
-  font-size: 1rem;
-  padding: 0;
-}
-
 .navds-combobox__input::-webkit-search-cancel-button {
  display: none;
 }

 .navds-combobox__button-toggle-list {
-  border-radius: var(--a-border-radius-medium);
-  color: var(--a-text-default);
+  border-radius: var(--ax-border-radius-medium);
+  color: var(--ax-text-default);
  display: flex;
  justify-content: center;
  align-items: center;
@@ -216,33 +217,13 @@
  border: none;
  font-size: 1rem;
  padding: 0;
-}

-.navds-combobox__button-clear:active:hover,
-.navds-combobox__button-toggle-list:active:hover {
-  color: var(--ac-combobox-clear-icon-active, var(--a-text-action));
-}
+  &: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 +231,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 +262,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 +295,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,15 +383,11 @@
  }

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

@media (forced-colors: active) {
-  .navds-combobox__button-clear:hover {
-    color: highlight;
-  }
-
  .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
    outline-color: highlight;
  }
@@ -416,12 +405,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 +429,30 @@

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

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

  & .navds-error-summary__heading {
    scroll-margin-top: var(--ax-spacing-4);
@@ -1,16 +1,6 @@
-/* Makes it easier for user to use FileItem in semantic lists */
-.navds-file-upload {
-  & :is(ul, li) {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-}
-
 /* --------------------------- FileUpload Dropzone -------------------------- */
 .navds-dropzone__area {
  --__axc-dropzone-background: var(--ax-bg-input);
-  --__axc-dropzone-padding: var(--ax-spacing-6);
  --__axc-dropzone-icon-padding: var(--ax-spacing-2);
  --__axc-dropzone-animation-length-long: 400ms;
  --__axc-dropzone-animation-length-short: 250ms;
@@ -24,7 +14,7 @@
  flex-direction: column;
  gap: var(--ax-spacing-4);
  text-align: center;
-  padding: var(--__axc-dropzone-padding);
+  padding: var(--ax-spacing-4) var(--ax-spacing-5);
  border: 1px dashed var(--ax-border-default);
  border-radius: var(--ax-border-radius-xlarge);
  background-color: var(--__axc-dropzone-background);
@@ -104,7 +94,7 @@
 }

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

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

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

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

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

  & .navds-form-summary__answer {
    border-color: var(--ax-border-info-subtleA);
@@ -1,16 +1,14 @@
-@layer aksel.forms.base, aksel.forms.component;
-
-@import "./fieldset.darkside.css" layer(aksel.forms.base);
-@import "./file-upload.darkside.css" layer(aksel.forms.component);
-@import "./form.darkside.css" layer(aksel.forms.component);
-@import "./error-summary.darkside.css" layer(aksel.forms.component);
-@import "./confirmation-panel.darkside.css" layer(aksel.forms.component);
-@import "./radio-checkbox.darkside.css" layer(aksel.forms.component);
-@import "./select.darkside.css" layer(aksel.forms.component);
-@import "./switch.darkside.css" layer(aksel.forms.component);
-@import "./text-field.darkside.css" layer(aksel.forms.component);
-@import "./textarea.darkside.css" layer(aksel.forms.component);
-@import "./search.darkside.css" layer(aksel.forms.component);
-@import "./combobox.darkside.css" layer(aksel.forms.component);
-@import "./form-summary.darkside.css" layer(aksel.forms.component);
-@import "./form-progress.darkside.css" layer(aksel.forms.component);
+@import "./fieldset.darkside.css";
+@import "./file-upload.darkside.css";
+@import "./form.darkside.css";
+@import "./error-summary.darkside.css";
+@import "./confirmation-panel.darkside.css";
+@import "./radio-checkbox.darkside.css";
+@import "./select.darkside.css";
+@import "./switch.darkside.css";
+@import "./text-field.darkside.css";
+@import "./textarea.darkside.css";
+@import "./search.darkside.css";
+@import "./combobox.darkside.css";
+@import "./form-summary.darkside.css";
+@import "./form-progress.darkside.css";
@@ -1,19 +1,3 @@
-[data-theme="dark"] {
-  --__ac-search-button-border: var(--a-border-on-inverted);
-  --__ac-search-button-border-hover: var(--a-blue-200);
-  --__ac-search-clear-icon: var(--a-white);
-  --__ac-search-clear-icon-hover: var(--a-blue-200);
-  --__ac-search-error-border: var(--a-red-300);
-}
-
-[data-theme="light"] {
-  --__ac-search-button-border: initial;
-  --__ac-search-button-border-hover: initial;
-  --__ac-search-clear-icon: initial;
-  --__ac-search-clear-icon-hover: initial;
-  --__ac-search-error-border: initial;
-}
-
 .navds-search {
  display: flex;
  flex-direction: column;
@@ -25,204 +9,146 @@
  width: 100%;
 }

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

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

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

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

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

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

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

+/* ------------------------------- Search icon ------------------------------ */
 .navds-search__search-icon {
  position: absolute;
-  left: var(--a-spacing-3);
+  left: var(--ax-spacing-2);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 1.5rem;
-}

-.navds-form-field--small .navds-search__search-icon {
-  left: var(--a-spacing-2);
-  font-size: 1rem;
-}
-
-.navds-search__button-clear {
-  position: absolute;
-  right: 0.75rem;
-  border-radius: var(--a-border-radius-medium);
-  color: var(--ac-search-clear-icon, var(--__ac-search-clear-icon, var(--a-text-default)));
-  height: 32px;
-  width: 32px;
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  background: none;
-  border: none;
-  font-size: 1.25rem;
-  padding: 0;
-}
-
-.navds-form-field--small .navds-search__button-clear {
-  right: 0.5rem;
-  height: 24px;
-  width: 24px;
-}
-
-.navds-search__button-clear:hover {
-  color: var(--ac-search-clear-icon-hover, var(--__ac-search-clear-icon-hover, var(--a-text-action-hover)));
-}
-
-.navds-search__button-clear:focus-visible {
-  outline: 2px solid transparent;
-  box-shadow: var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-search__button-clear:focus {
-    outline: 2px solid transparent;
-    box-shadow: var(--a-shadow-focus);
+  .navds-search--disabled & {
+    opacity: 0.3;
  }
 }

+/* --------------------------- Search Clear-button -------------------------- */
+.navds-search__button-clear {
+  position: absolute;
+  right: var(--ax-spacing-2);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* ------------------------------ Search Button ----------------------------- */
 .navds-search__button-search {
  flex-shrink: 0;
-  min-width: 4rem;
-  min-height: 2rem;
  border-radius: 0;
-  border-top-right-radius: var(--a-border-radius-medium);
-  border-bottom-right-radius: var(--a-border-radius-medium);
-}
-
-.navds-form-field--small .navds-search__button-search svg {
-  font-size: 1rem;
-}
-
-.navds-form-field--small .navds-search__button-search {
-  min-width: 2.5rem;
+  border-top-right-radius: var(--ax-border-radius-medium);
+  border-bottom-right-radius: var(--ax-border-radius-medium);
 }

 .navds-search__button-search.navds-button--secondary {
-  box-shadow:
-    -1px 0 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
-    0 1px 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
-    0 -1px 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset;
-}
+  --__axc-button-border-width: 1px;
+  --__axc-button-border-color: var(--ax-border-default);

-.navds-search__button-search.navds-button--secondary:where(:hover, :active) {
-  box-shadow:
-    -1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
-    0 1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
-    0 -1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
-    -1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover)));
-  z-index: 1;
-}
-
-.navds-search__wrapper-inner:focus-within + .navds-search__button-search.navds-button--secondary:hover {
-  z-index: auto;
-}
-
-.navds-search__button-search.navds-button--secondary:focus-visible {
-  box-shadow:
-    0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
-    var(--a-shadow-focus);
-}
-
-.navds-search__button-search.navds-button--secondary:focus-visible:hover {
-  box-shadow:
-    0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
-    var(--a-shadow-focus);
-}
-
-.navds-search__button-search.navds-button--secondary:focus-visible:active {
-  box-shadow:
-    0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset,
-    var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-search__button-search.navds-button--secondary:focus {
-    box-shadow:
-      0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
-      var(--a-shadow-focus);
+  &:not(:hover, :active) {
+    background-color: var(--ax-bg-input);
  }

-  .navds-search__button-search.navds-button--secondary:focus:hover {
-    box-shadow:
-      0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
-      var(--a-shadow-focus);
+  &:hover:not(:disabled) {
+    --__axc-button-border-color: var(--ax-border-accent-strong);
  }

-  .navds-search__button-search.navds-button--secondary:focus:active {
-    box-shadow:
-      0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset,
-      var(--a-shadow-focus);
+  &:active:not(:disabled) {
+    --__axc-button-border-color: transparent;
  }
 }

-/* Error-handling */
-.navds-search--error .navds-search__input:not(:hover, :disabled) {
-  border-color: var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger)));
-  box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger)));
+/* Special-case where we hover/focus input, and want the secondary-button to match input-border */
+.navds-search:not(.navds-search--error, .navds-search--disabled)
+  .navds-search__wrapper:has(.navds-search__input:is(:hover, :focus-visible))
+  .navds-search__button-search.navds-button--secondary:not(:hover, :active) {
+  --__axc-button-border-color: var(--ax-border-accent-strong);
 }

-.navds-search--error .navds-search__input:focus-visible:not(:hover, :disabled) {
+/* --------------------------- Search Error-state --------------------------- */
+.navds-search--error .navds-search__input:not(:disabled) {
+  border-color: var(--ax-border-danger);
  box-shadow:
-    inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
-    var(--a-shadow-focus);
+    inset -2px 0 0 0 var(--ax-border-danger),
+    inset 0 0 0 1px var(--ax-border-danger);
+
+  &.navds-search__input--simple {
+    box-shadow: inset 0 0 0 1px var(--ax-border-danger);
+  }
 }

-/* Focus layering */
+/* -------------------------- Search Focus layering ------------------------- */
 .navds-search__input:focus-visible,
-.navds-search__button-clear,
 .navds-search__button-search:focus-visible {
  z-index: 1;
 }

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

-  .navds-search__input:focus,
-  .navds-search__button-search:focus {
-    z-index: 1;
-  }
-}
-
-@media (forced-colors: active) {
-  .navds-modal {
-    outline: 2px solid transparent;
-  }
-
-  .navds-search__button-clear:hover {
-    color: highlight;
+/* We can't re-use disabled-state for form-fields since opacity multiplies on search-button */
+.navds-search--disabled {
+  .navds-search__input {
+    opacity: 0.3;
+    cursor: not-allowed;
  }
 }
@@ -1,48 +1,34 @@
 .navds-select__input {
  appearance: none;
-  background-color: var(--ac-select-bg, var(--a-surface-default));
-  border-radius: var(--a-border-radius-medium);
-  border: 1px solid var(--ac-select-border, var(--a-border-default));
-  color: var(--ac-select-text, var(--a-text-default));
+  background-color: var(--ax-bg-input);
+  border-radius: var(--ax-border-radius-medium);
+  border: 1px solid var(--ax-border-default);
+  color: var(--ax-text-default);
  width: 100%;
  box-sizing: border-box;
  min-height: 3rem;
  display: inline-block;
  position: relative;
-  padding: 0.5rem;
-  padding-right: 2rem;
-}
+  padding: var(--ax-spacing-2);
+  padding-right: var(--ax-spacing-10);

-@media (forced-colors: active) {
-  .navds-select__input.navds-select__input.navds-select__input {
-    background-color: ButtonFace;
-    border-color: ButtonText;
-    color: ButtonText;
-    forced-color-adjust: none;
-    box-shadow: none;
+  &:hover {
+    border-color: var(--ax-border-accent-strong);
+    cursor: pointer;
  }

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

-.navds-select__input:hover {
-  border-color: var(--ac-select-hover-border, var(--a-border-action-hover));
-  cursor: pointer;
-}
-
-.navds-select__input:focus-visible {
-  outline: none;
-  border-color: var(--ac-select-active-border, var(--a-border-action-selected));
-  box-shadow: var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-select__input:focus {
-    outline: none;
-    box-shadow: var(--a-shadow-focus);
+  @media (forced-colors: active) {
+    & {
+      background-color: ButtonFace;
+      border-color: ButtonText;
+      color: ButtonText;
+    }
  }
 }

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

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

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

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

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

-/**
-  Error handling
-*/
-.navds-select--error > * select:not(:hover, :focus, :disabled) {
-  box-shadow: 0 0 0 1px var(--ac-select-error-border, var(--a-surface-danger));
-  border-color: var(--ac-select-error-border, var(--a-surface-danger));
-}
-
-/**
-  Disabled
-*/
+/* ----------------------------- Select disabled ---------------------------- */
 .navds-select__input:disabled {
-  background-color: var(--ac-select-bg, var(--a-surface-default));
-  border: 1px solid var(--ac-select-border, var(--a-border-default));
+  background-color: var(--ax-bg-input);
+  border: 1px solid var(--ax-border-default);
  box-shadow: none;
  cursor: not-allowed;

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

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

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

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

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

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

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

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

-.navds-switch--right > .navds-switch__label-wrapper > .navds-switch__content {
-  padding: 0.75rem 3.25rem 0.75rem 0;
-}
-
-.navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
-  padding: calc(var(--a-spacing-2) - var(--a-spacing-05)) 0 calc(var(--a-spacing-2) - var(--a-spacing-05)) 3.25rem;
-}
-
-.navds-switch--right.navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
-  padding: calc(var(--a-spacing-2) - var(--a-spacing-05)) 3.25rem calc(var(--a-spacing-2) - var(--a-spacing-05)) 0;
-}
-
-.navds-switch--with-description,
-.navds-switch--small > .navds-switch__label-wrapper > .navds-switch--with-description {
+.navds-switch--with-description {
  padding-bottom: 0;
 }

 .navds-switch__input:hover ~ .navds-switch__label-wrapper,
 .navds-switch__label-wrapper:hover {
-  color: var(--ac-switch-action, var(--a-surface-action-selected));
+  color: var(--ax-text-accent-strong);
 }

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

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

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

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

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

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

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

-.navds-switch__input:disabled ~ .navds-switch__track {
-  background-color: var(--ac-switch-bg, var(--a-surface-neutral));
-}
-
-.navds-switch__input:checked:disabled ~ .navds-switch__track {
-  background-color: var(--ac-switch-checked-bg, var(--a-border-action-selected));
-}
-
-.navds-switch__input:focus-visible ~ .navds-switch__track {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  box-shadow:
-    0 0 0 1px var(--a-surface-default),
-    var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-switch__input:focus ~ .navds-switch__track {
-    outline: 2px solid transparent;
-    box-shadow:
-      0 0 0 1px var(--a-surface-default),
-      var(--a-shadow-focus);
+  .navds-switch__input:focus-visible ~ & {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
  }
 }

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

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

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

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

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

-.navds-switch__input:checked:disabled:hover ~ .navds-switch__track > .navds-switch__thumb {
-  transform: translateX(1.25rem);
-}
-
-/* Disabled */
+/* -------------------------- Switch Disabled-state ------------------------- */
 .navds-switch__input:disabled {
  appearance: none;
 }
@@ -181,47 +177,51 @@
  cursor: not-allowed;
 }

-/* Readonly */
-.navds-switch--readonly > .navds-switch__track,
-.navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__track,
-.navds-switch--readonly > .navds-switch__input:checked ~ .navds-switch__track,
-.navds-switch--readonly > .navds-switch__input:checked:hover ~ .navds-switch__track {
-  background-color: var(--a-surface-neutral-moderate);
-}
-
-.navds-switch--readonly > .navds-switch__label-wrapper,
-.navds-switch--readonly > .navds-switch__input {
-  cursor: default;
-}
-
-.navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__label-wrapper,
-.navds-switch--readonly .navds-switch__label-wrapper:hover {
-  color: var(--a-text-default);
-}
-
-.navds-switch--readonly .navds-switch__label {
-  display: inline-flex;
-}
-
-.navds-switch--readonly .navds-switch__thumb {
-  background-color: var(--a-surface-subtle);
-  box-shadow: 0 0 0 2px var(--a-border-default);
-}
-
-.navds-switch--readonly > .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
-  color: var(--a-icon-subtle);
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
-    transform: translateX(0);
+/* -------------------------- Switch Readonly state ------------------------- */
+.navds-switch--readonly {
+  & > .navds-switch__track,
+  & > .navds-switch__input:hover ~ .navds-switch__track,
+  & > .navds-switch__input:checked ~ .navds-switch__track,
+  & > .navds-switch__input:checked:hover ~ .navds-switch__track {
+    background-color: var(--ax-bg-neutral-moderate);
+    border-color: var(--ax-border-neutral-subtleA);
  }

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

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

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

  .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb,
@@ -238,13 +238,6 @@
    color: field;
  }

-  .navds-switch__track {
-    width: calc(2.75rem + 4px);
-    height: calc(1.5rem + 4px);
-    top: var(--a-spacing-3);
-    border: 2px solid fieldtext;
-  }
-
  .navds-switch__input:focus-visible ~ .navds-switch__track {
    outline: 2px solid highlight;
    outline-offset: 2px;
@@ -259,7 +252,7 @@
  }

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

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

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

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

-.navds-text-field--error > .navds-text-field__input:not(:hover, :disabled) {
+.navds-text-field--error .navds-text-field__input:not(:disabled) {
  border-color: var(--ax-border-danger);
  box-shadow: 0 0 0 1px var(--ax-border-danger);
 }
@@ -1,73 +1,54 @@
-[data-theme="dark"] {
-  --__ac-textarea-text: var(--a-text-on-inverted);
-  --__ac-textarea-bg: var(--a-transparent);
-  --__ac-textarea-border: var(--a-border-on-inverted);
-  --__ac-textarea-hover-border: var(--a-blue-200);
-  --__ac-textarea-placeholder: var(--a-gray-500);
-  --__ac-textarea-error-border: var(--a-red-300);
-  --__ac-textarea-counter-text: var(--a-gray-300);
-  --__ac-textarea-counter-error-text: var(--a-red-300);
-}
-
-[data-theme="light"] {
-  --__ac-textarea-text: initial;
-  --__ac-textarea-bg: initial;
-  --__ac-textarea-border: initial;
-  --__ac-textarea-hover-border: initial;
-  --__ac-textarea-placeholder: initial;
-  --__ac-textarea-error-border: initial;
-  --__ac-textarea-counter-text: initial;
-  --__ac-textarea-counter-error-text: initial;
-}
-
 .navds-textarea__input {
  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
-  height: var(--__ac-textarea-height);
+  height: var(--__axc-textarea-height);
  appearance: none;
-  padding: var(--a-spacing-2);
-  background-color: var(--ac-textarea-bg, var(--__ac-textarea-bg, var(--a-surface-default)));
-  border-radius: var(--a-border-radius-medium);
-  border: 1px solid var(--ac-textarea-border, var(--__ac-textarea-border, var(--a-border-default)));
+  padding: var(--ax-spacing-2);
+  background-color: var(--ax-bg-input);
+  border-radius: var(--ax-border-radius-medium);
+  border: 1px solid var(--ax-border-default);
  resize: none;
  width: 100%;
  display: block;
-  color: var(--ac-textarea-text, var(--__ac-textarea-text, var(--a-text-default)));
-}
+  color: var(--ax-text-default);

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

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

-.navds-textarea__input:focus-visible {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  box-shadow: var(--a-shadow-focus);
-  border-color: var(--ac-textarea-active-border, var(--a-border-action-selected));
-}
-
-@supports not selector(:focus-visible) {
-  .navds-textarea__input:focus {
-    outline: 2px solid transparent;
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
    outline-offset: 2px;
-    box-shadow: var(--a-shadow-focus);
+    border-color: var(--ax-border-accent-strong);
+  }
+
+  &:disabled {
+    background-color: var(--ax-bg-input);
+    border-color: var(--ax-border-default);
+    cursor: not-allowed;
+  }
+
+  .navds-form-field--small & {
+    padding: var(--ax-spacing-1-alt);
+  }
+
+  .navds-textarea--readonly & {
+    background-color: var(--ax-bg-neutral-moderate);
+    border-color: var(--ax-border-neutral-subtleA);
+    cursor: default;
  }
 }

-.navds-form-field--small .navds-textarea__input {
-  padding: var(--a-spacing-1-alt);
-}
-
 .navds-textarea__counter {
-  margin-top: -0.375rem;
-  color: var(--ac-textarea-counter-text, var(--__ac-textarea-counter-text, var(--a-text-subtle)));
+  margin-top: -0.25rem;
+  color: var(--ax-text-subtle);
 }

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

 .navds-textarea__sr-counter {
@@ -108,32 +89,9 @@
  scrollbar-gutter: stable; /* Needed to prevent scrollbar from appearing too early */
 }

-/**
-  Error handling
-*/
-.navds-textarea--error .navds-textarea__input:not(:hover, :focus-visible, :disabled) {
-  box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
-  border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
-}
-
-@supports not selector(:focus-visible) {
-  .navds-textarea--error .navds-textarea__input:not(:hover, :focus, :disabled) {
-    box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
-    border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
-  }
-}
-
-.navds-textarea__input:disabled {
-  background-color: var(--ac-textarea-bg, var(--__ac-textarea-bg, var(--a-surface-default)));
-  border-color: var(--ac-textarea-border, var(--__ac-textarea-border, var(--a-border-default)));
-  box-shadow: none;
-  cursor: not-allowed;
-}
-
-.navds-textarea--readonly .navds-textarea__input {
-  background-color: var(--a-surface-subtle);
-  border-color: var(--a-border-subtle);
-  cursor: default;
+.navds-textarea--error .navds-textarea__input:not(:disabled) {
+  box-shadow: 0 0 0 1px var(--ax-border-danger);
+  border-color: var(--ax-border-danger);
 }

@media (forced-colors: active) {
@@ -1,20 +1,41 @@
 .navds-guide-panel {
-  --__ac-guide-panel-guide-size: 4rem;
+  --__axc-guide-panel-guide-size: 3.75rem;

  position: relative;
-  padding-top: calc(var(--__ac-guide-panel-guide-size) / 2);
+  display: flex;
+  width: fit-content;
+
+  &[data-poster="true"],
+  &[data-responsive="true"] {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &[data-poster="false"] {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+
+  @media (min-width: 480px) {
+    & {
+      --__axc-guide-panel-guide-size: 5rem;
+    }
+
+    &[data-responsive="true"] {
+      flex-direction: row;
+      align-items: flex-start;
+    }
+  }
 }

 .navds-guide {
-  background: var(--ac-guide-panel-illustration-bg, var(--a-surface-alt-3-subtle));
-  border: 2px solid var(--ac-guide-panel-border, var(--a-border-alt-3));
-  border-radius: var(--a-border-radius-full);
+  box-sizing: border-box;
+  border: 2px solid var(--ax-border-info);
+  border-radius: var(--ax-border-radius-full);
  overflow: hidden;
-  position: absolute;
-  width: var(--__ac-guide-panel-guide-size);
-  height: var(--__ac-guide-panel-guide-size);
-  left: 50%;
-  transform: translate(-50%, -50%);
+  width: var(--__axc-guide-panel-guide-size);
+  height: var(--__axc-guide-panel-guide-size);
+  flex-shrink: 0;
 }

 .navds-guide svg,
@@ -24,73 +45,70 @@
 }

 .navds-guide-panel__content {
-  background-color: var(--ac-guide-panel-bg, var(--a-surface-default));
-  border: 2px solid var(--ac-guide-panel-border, var(--a-border-alt-3));
-  border-radius: var(--a-border-radius-large);
-  padding: var(--a-spacing-4);
-  padding-top: var(--a-spacing-12);
-}
+  background-color: var(--ax-bg-raised);
+  border: 2px solid var(--ax-border-info);
+  border-radius: var(--ax-border-radius-xlarge);
+  position: relative;

-@media (min-width: 480px) {
-  .navds-guide-panel {
-    --__ac-guide-panel-guide-size: 6.25rem;
+  .navds-guide-panel:is([data-poster="true"], [data-responsive="true"]) > & {
+    margin-top: var(--ax-spacing-5);
  }

-  .navds-guide-panel__content {
-    padding: var(--a-spacing-8);
-    padding-top: 4.25rem;
+  .navds-guide-panel[data-poster="false"] > & {
+    margin-left: var(--ax-spacing-5);
+  }
+
+  @media (min-width: 480px) {
+    .navds-guide-panel[data-responsive="true"] > & {
+      margin-top: 0;
+      margin-left: var(--ax-spacing-5);
+    }
  }
 }

-/* not-poster */
+.navds-guide-panel__content-inner {
+  padding: var(--ax-spacing-3) var(--ax-spacing-4);
+  border-radius: var(--ax-border-radius-xlarge);
+  background-color: var(--ax-bg-raised);
+  position: relative;
+  height: 100%;

-.navds-guide-panel--not-poster {
-  padding-top: 0;
-  padding-left: calc(var(--__ac-guide-panel-guide-size) / 2);
-}
-
-.navds-guide-panel--not-poster .navds-guide {
-  left: 0;
-  top: var(--a-spacing-5);
-  transform: none;
-}
-
-.navds-guide-panel--not-poster .navds-guide-panel__content {
-  padding: var(--a-spacing-4);
-  padding-left: var(--a-spacing-10);
-  min-height: calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5));
-}
-
-@media (min-width: 480px) {
-  .navds-guide-panel--not-poster {
-    --__ac-guide-panel-guide-size: 5rem;
+  .navds-guide-panel[data-poster="false"] & {
+    min-height: var(--__axc-guide-panel-guide-size);
  }

-  .navds-guide-panel--not-poster .navds-guide-panel__content {
-    padding: var(--a-spacing-6);
-    padding-left: var(--a-spacing-14);
+  @media (min-width: 480px) {
+    & {
+      padding: var(--ax-spacing-4) var(--ax-spacing-5);
+    }
+
+    .navds-guide-panel[data-responsive="true"] & {
+      min-height: var(--__axc-guide-panel-guide-size);
+    }
  }
 }

-/* responsive-poster (on desktop) */
+.navds-guide-panel__tail {
+  position: absolute;
+  z-index: 0;

-@media (min-width: 480px) {
-  .navds-guide-panel--responsive-poster {
-    --__ac-guide-panel-guide-size: 5rem;
-
-    padding-top: 0;
-    padding-left: calc(var(--__ac-guide-panel-guide-size) / 2);
+  .navds-guide-panel:is([data-poster="true"], [data-responsive="true"]) & {
+    left: 50%;
+    top: calc(var(--ax-spacing-4) * -1 - 2px);
+    transform: translateX(-48%);
  }

-  .navds-guide-panel--responsive-poster .navds-guide {
-    left: 0;
-    top: var(--a-spacing-5);
-    transform: none;
+  .navds-guide-panel[data-poster="false"] & {
+    top: calc(var(--__axc-guide-panel-guide-size) / 2);
+    left: calc(var(--ax-spacing-5) * -1 - 2px);
+    transform: translateY(-48%) rotateZ(-90deg) scaleX(-1);
  }

-  .navds-guide-panel--responsive-poster .navds-guide-panel__content {
-    padding: var(--a-spacing-6);
-    padding-left: var(--a-spacing-14);
-    min-height: calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5));
+  @media (min-width: 480px) {
+    .navds-guide-panel[data-responsive="true"] & {
+      top: calc(var(--__axc-guide-panel-guide-size) / 2);
+      left: calc(var(--ax-spacing-5) * -1 - 2px);
+      transform: translateY(-48%) rotateZ(-90deg) scaleX(-1);
+    }
  }
 }
@@ -21,12 +21,6 @@
  max-width: min(65ch, calc(100vw - var(--ax-spacing-6)));
  border-radius: var(--ax-border-radius-large);
  border: 1px solid var(--ax-border-info);
-  box-shadow:
-    0 0 1px 0 rgba(7 9 13/ 0.15),
-    0 1px 3px 0 rgba(7 9 13/ 0.1),
-    0 5px 12px 0 rgba(7 9 13/ 0.13),
-    0 0.5px 0 0 rgba(255 255 255/ 0) inset,
-    0 0 1px 0 rgba(255 255 255/ 0) inset;
 }

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

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

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

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

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

@media (forced-colors: active) {
@@ -13,18 +12,6 @@
    border: solid 1px ButtonText;
    color: ButtonText;
  }
-
-  .navds-internalheader a:focus-visible {
-    box-shadow: none;
-    outline: 2px solid highlight;
-    outline-offset: 2px;
-  }
-
-  .navds-internalheader .navds-internalheader__button:focus-visible {
-    box-shadow: none;
-    outline: 2px solid highlight;
-    outline-offset: 2px;
-  }
 }

 .navds-internalheader__title {
@@ -32,25 +19,34 @@
  overflow: visible;
  background: transparent;
  font: inherit;
-  font-weight: var(--a-font-weight-bold);
+  font-weight: var(--ax-font-weight-bold);
  line-height: normal;
  text-align: left;
-  padding: 0 var(--a-spacing-5) 0 var(--a-spacing-6);
-  border-right: 1px solid var(--ac-internalheader-divider, var(--a-gray-600));
+  padding-block: 0;
+  padding-inline: var(--ax-spacing-6) var(--ax-spacing-5);
+  border-right: 1px solid var(--ax-border-subtleA);
  display: flex;
  align-items: center;
  text-decoration: none;
  margin: 0;
-  color: var(--ac-internalheader-text, var(--a-text-on-inverted));
-}
+  color: var(--ax-text-default);

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

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

-a.navds-internalheader__title:hover,
-button.navds-internalheader__title:hover,
-.navds-internalheader__button:hover {
-  background-color: var(--ac-internalheader-hover-bg, var(--a-surface-inverted-hover));
-}
-
-.navds-internalheader__title:focus-visible,
-.navds-internalheader__button:focus-visible {
-  box-shadow: var(--navds-internalheader-focus);
-  outline: none;
-}
-
-@supports not selector(:focus-visible) {
-  .navds-internalheader__title:focus,
-  .navds-internalheader__button:focus {
-    box-shadow: var(--navds-internalheader-focus);
-    outline: none;
+  &:hover {
+    background: var(--ax-bg-neutral-moderate-hover);
  }
 }

-a.navds-internalheader__title:active,
-button.navds-internalheader__title:active,
-.navds-internalheader__button:active {
-  background-color: var(--ac-internalheader-active-bg, var(--a-surface-inverted-active));
+@media (forced-colors: active) {
+  .navds-internalheader__button:hover {
+    background-color: highlighttext;
+    border-color: highlight;
+    color: highlight;
+    outline: 1px solid highlight;
+    isolation: isolate;
+  }
+}
+
+.navds-internalheader__title,
+.navds-internalheader__button {
+  &:focus-visible {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: -3px;
+  }
+
+  &:active {
+    background: var(--ax-bg-neutral-moderate-pressed);
+  }
 }

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

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

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

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

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

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

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

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

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

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

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

 .navds-popover--hidden {
@@ -1,103 +1,103 @@
 .navds-bleed {
-  --__ac-bleed-margin-inline-xs: initial;
-  --__ac-bleed-margin-inline-sm: var(--__ac-bleed-margin-inline-xs);
-  --__ac-bleed-margin-inline-md: var(--__ac-bleed-margin-inline-sm);
-  --__ac-bleed-margin-inline-lg: var(--__ac-bleed-margin-inline-md);
-  --__ac-bleed-margin-inline-xl: var(--__ac-bleed-margin-inline-lg);
-  --__ac-bleed-margin-inline-2xl: var(--__ac-bleed-margin-inline-xl);
-  --__ac-bleed-margin-block-xs: initial;
-  --__ac-bleed-margin-block-sm: var(--__ac-bleed-margin-block-xs);
-  --__ac-bleed-margin-block-md: var(--__ac-bleed-margin-block-sm);
-  --__ac-bleed-margin-block-lg: var(--__ac-bleed-margin-block-md);
-  --__ac-bleed-margin-block-xl: var(--__ac-bleed-margin-block-lg);
-  --__ac-bleed-margin-block-2xl: var(--__ac-bleed-margin-block-xl);
+  --__axc-bleed-margin-inline-xs: initial;
+  --__axc-bleed-margin-inline-sm: var(--__axc-bleed-margin-inline-xs);
+  --__axc-bleed-margin-inline-md: var(--__axc-bleed-margin-inline-sm);
+  --__axc-bleed-margin-inline-lg: var(--__axc-bleed-margin-inline-md);
+  --__axc-bleed-margin-inline-xl: var(--__axc-bleed-margin-inline-lg);
+  --__axc-bleed-margin-inline-2xl: var(--__axc-bleed-margin-inline-xl);
+  --__axc-bleed-margin-block-xs: initial;
+  --__axc-bleed-margin-block-sm: var(--__axc-bleed-margin-block-xs);
+  --__axc-bleed-margin-block-md: var(--__axc-bleed-margin-block-sm);
+  --__axc-bleed-margin-block-lg: var(--__axc-bleed-margin-block-md);
+  --__axc-bleed-margin-block-xl: var(--__axc-bleed-margin-block-lg);
+  --__axc-bleed-margin-block-2xl: var(--__axc-bleed-margin-block-xl);

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

-  margin-inline: var(--__ac-bleed-margin-inline);
-  margin-block: var(--__ac-bleed-margin-block);
+  margin-inline: var(--__axc-bleed-margin-inline);
+  margin-block: var(--__axc-bleed-margin-block);
 }

 .navds-bleed--padding {
-  --__ac-bleed-padding-inline-xs: initial;
-  --__ac-bleed-padding-inline-sm: var(--__ac-bleed-padding-inline-xs);
-  --__ac-bleed-padding-inline-md: var(--__ac-bleed-padding-inline-sm);
-  --__ac-bleed-padding-inline-lg: var(--__ac-bleed-padding-inline-md);
-  --__ac-bleed-padding-inline-xl: var(--__ac-bleed-padding-inline-lg);
-  --__ac-bleed-padding-inline-2xl: var(--__ac-bleed-padding-inline-xl);
-  --__ac-bleed-padding-block-xs: initial;
-  --__ac-bleed-padding-block-sm: var(--__ac-bleed-padding-block-xs);
-  --__ac-bleed-padding-block-md: var(--__ac-bleed-padding-block-sm);
-  --__ac-bleed-padding-block-lg: var(--__ac-bleed-padding-block-md);
-  --__ac-bleed-padding-block-xl: var(--__ac-bleed-padding-block-lg);
-  --__ac-bleed-padding-block-2xl: var(--__ac-bleed-padding-block-xl);
+  --__axc-bleed-padding-inline-xs: initial;
+  --__axc-bleed-padding-inline-sm: var(--__axc-bleed-padding-inline-xs);
+  --__axc-bleed-padding-inline-md: var(--__axc-bleed-padding-inline-sm);
+  --__axc-bleed-padding-inline-lg: var(--__axc-bleed-padding-inline-md);
+  --__axc-bleed-padding-inline-xl: var(--__axc-bleed-padding-inline-lg);
+  --__axc-bleed-padding-inline-2xl: var(--__axc-bleed-padding-inline-xl);
+  --__axc-bleed-padding-block-xs: initial;
+  --__axc-bleed-padding-block-sm: var(--__axc-bleed-padding-block-xs);
+  --__axc-bleed-padding-block-md: var(--__axc-bleed-padding-block-sm);
+  --__axc-bleed-padding-block-lg: var(--__axc-bleed-padding-block-md);
+  --__axc-bleed-padding-block-xl: var(--__axc-bleed-padding-block-lg);
+  --__axc-bleed-padding-block-2xl: var(--__axc-bleed-padding-block-xl);

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

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

@media (min-width: 480px) {
  .navds-bleed {
-    --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-sm);
-    --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-sm);
+    --__axc-bleed-margin-inline: var(--__axc-bleed-margin-inline-sm);
+    --__axc-bleed-margin-block: var(--__axc-bleed-margin-block-sm);
  }

  .navds-bleed--padding {
-    --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-sm);
-    --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-sm);
+    --__axc-bleed-padding-inline: var(--__axc-bleed-padding-inline-sm);
+    --__axc-bleed-padding-block: var(--__axc-bleed-padding-block-sm);
  }
 }

@media (min-width: 768px) {
  .navds-bleed {
-    --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-md);
-    --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-md);
+    --__axc-bleed-margin-inline: var(--__axc-bleed-margin-inline-md);
+    --__axc-bleed-margin-block: var(--__axc-bleed-margin-block-md);
  }

  .navds-bleed--padding {
-    --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-md);
-    --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-md);
+    --__axc-bleed-padding-inline: var(--__axc-bleed-padding-inline-md);
+    --__axc-bleed-padding-block: var(--__axc-bleed-padding-block-md);
  }
 }

@media (min-width: 1024px) {
  .navds-bleed {
-    --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-lg);
-    --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-lg);
+    --__axc-bleed-margin-inline: var(--__axc-bleed-margin-inline-lg);
+    --__axc-bleed-margin-block: var(--__axc-bleed-margin-block-lg);
  }

  .navds-bleed--padding {
-    --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-lg);
-    --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-lg);
+    --__axc-bleed-padding-inline: var(--__axc-bleed-padding-inline-lg);
+    --__axc-bleed-padding-block: var(--__axc-bleed-padding-block-lg);
  }
 }

@media (min-width: 1280px) {
  .navds-bleed {
-    --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-xl);
-    --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-xl);
+    --__axc-bleed-margin-inline: var(--__axc-bleed-margin-inline-xl);
+    --__axc-bleed-margin-block: var(--__axc-bleed-margin-block-xl);
  }

  .navds-bleed--padding {
-    --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-xl);
-    --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-xl);
+    --__axc-bleed-padding-inline: var(--__axc-bleed-padding-inline-xl);
+    --__axc-bleed-padding-block: var(--__axc-bleed-padding-block-xl);
  }
 }

@media (min-width: 1440px) {
  .navds-bleed {
-    --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-2xl);
-    --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-2xl);
+    --__axc-bleed-margin-inline: var(--__axc-bleed-margin-inline-2xl);
+    --__axc-bleed-margin-block: var(--__axc-bleed-margin-block-2xl);
  }

  .navds-bleed--padding {
-    --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-2xl);
-    --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-2xl);
+    --__axc-bleed-padding-inline: var(--__axc-bleed-padding-inline-2xl);
+    --__axc-bleed-padding-block: var(--__axc-bleed-padding-block-2xl);
  }
 }
@@ -1,66 +1,66 @@
 .navds-box-bg {
-  --__ac-box-background: initial;
+  --__axc-box-background: initial;

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

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

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

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

  border-style: solid;
-  border-width: var(--__ac-box-border-width, 0);
+  border-width: var(--__axc-box-border-width, 0);
 }

 .navds-box-border-radius {
-  --__ac-box-border-radius-xs: initial;
-  --__ac-box-border-radius-sm: var(--__ac-box-border-radius-xs);
-  --__ac-box-border-radius-md: var(--__ac-box-border-radius-sm);
-  --__ac-box-border-radius-lg: var(--__ac-box-border-radius-md);
-  --__ac-box-border-radius-xl: var(--__ac-box-border-radius-lg);
-  --__ac-box-border-radius-2xl: var(--__ac-box-border-radius-xl);
-  --__ac-box-border-radius: var(--__ac-box-border-radius-xs);
+  --__axc-box-border-radius-xs: initial;
+  --__axc-box-border-radius-sm: var(--__axc-box-border-radius-xs);
+  --__axc-box-border-radius-md: var(--__axc-box-border-radius-sm);
+  --__axc-box-border-radius-lg: var(--__axc-box-border-radius-md);
+  --__axc-box-border-radius-xl: var(--__axc-box-border-radius-lg);
+  --__axc-box-border-radius-2xl: var(--__axc-box-border-radius-xl);
+  --__axc-box-border-radius: var(--__axc-box-border-radius-xs);

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

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

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

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

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

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

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

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

  display: grid;
-  grid-template-columns: var(--__ac-hgrid-columns);
+  grid-template-columns: var(--__axc-hgrid-columns);
 }

 .navds-hgrid-gap {
-  --__ac-hgrid-gap-xs: initial;
-  --__ac-hgrid-gap-sm: var(--__ac-hgrid-gap-xs);
-  --__ac-hgrid-gap-md: var(--__ac-hgrid-gap-sm);
-  --__ac-hgrid-gap-lg: var(--__ac-hgrid-gap-md);
-  --__ac-hgrid-gap-xl: var(--__ac-hgrid-gap-lg);
-  --__ac-hgrid-gap-2xl: var(--__ac-hgrid-gap-xl);
-  --__ac-hgrid-gap: var(--__ac-hgrid-gap-xs);
+  --__axc-hgrid-gap-xs: initial;
+  --__axc-hgrid-gap-sm: var(--__axc-hgrid-gap-xs);
+  --__axc-hgrid-gap-md: var(--__axc-hgrid-gap-sm);
+  --__axc-hgrid-gap-lg: var(--__axc-hgrid-gap-md);
+  --__axc-hgrid-gap-xl: var(--__axc-hgrid-gap-lg);
+  --__axc-hgrid-gap-2xl: var(--__axc-hgrid-gap-xl);
+  --__axc-hgrid-gap: var(--__axc-hgrid-gap-xs);

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

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

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

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

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

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

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

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

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

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

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

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

  .navds-hgrid-gap {
-    --__ac-hgrid-gap: var(--__ac-hgrid-gap-2xl);
+    --__axc-hgrid-gap: var(--__axc-hgrid-gap-2xl);
  }
 }
@@ -1,36 +1,7 @@
-@layer aksel.layout.component, aksel.layout.base;
-
-@import "./base.darkside.css" layer(aksel.layout.base);
-@import "./box.darkside.css" layer(aksel.layout.component);
-@import "./bleed.darkside.css" layer(aksel.layout.component);
-@import "./page.darkside.css" layer(aksel.layout.component);
-@import "./hgrid.darkside.css" layer(aksel.layout.component);
-@import "./stack.darkside.css" layer(aksel.layout.component);
-@import "./responsive.darkside.css" layer(aksel.layout.component);
-
-/* Custom override to avoid having to edit react-syntax in Primtives */
-@layer aksel.layout {
-  :root {
-    --a-spacing-1-alt: var(--ax-spacing-1-alt);
-    --a-spacing-05: var(--ax-spacing-05);
-    --a-spacing-32: var(--ax-spacing-32);
-    --a-spacing-24: var(--ax-spacing-24);
-    --a-spacing-20: var(--ax-spacing-20);
-    --a-spacing-18: var(--ax-spacing-18);
-    --a-spacing-16: var(--ax-spacing-16);
-    --a-spacing-14: var(--ax-spacing-14);
-    --a-spacing-12: var(--ax-spacing-12);
-    --a-spacing-11: var(--ax-spacing-11);
-    --a-spacing-10: var(--ax-spacing-10);
-    --a-spacing-9: var(--ax-spacing-9);
-    --a-spacing-8: var(--ax-spacing-8);
-    --a-spacing-7: var(--ax-spacing-7);
-    --a-spacing-6: var(--ax-spacing-6);
-    --a-spacing-5: var(--ax-spacing-5);
-    --a-spacing-4: var(--ax-spacing-4);
-    --a-spacing-3: var(--ax-spacing-3);
-    --a-spacing-2: var(--ax-spacing-2);
-    --a-spacing-1: var(--ax-spacing-1);
-    --a-spacing-0: var(--ax-spacing-0);
-  }
-}
+@import "./base.darkside.css";
+@import "./box.darkside.css";
+@import "./bleed.darkside.css";
+@import "./page.darkside.css";
+@import "./hgrid.darkside.css";
+@import "./stack.darkside.css";
+@import "./responsive.darkside.css";
@@ -3,15 +3,12 @@
  flex-direction: column;
  min-height: 100vh;
  min-height: 100lvh;
-
-  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
-  background-color: var(--__ac-page-background);
 }

 /* Page.Block */
 .navds-pageblock {
  /* stylelint-disable-next-line length-zero-no-unit */
-  --__ac-page-padding-inline: 0px;
+  --__axc-page-padding-inline: 0px;

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

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

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

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

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

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

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

 .navds-stack-gap {
-  --__ac-stack-gap-xs: initial;
-  --__ac-stack-gap-sm: var(--__ac-stack-gap-xs);
-  --__ac-stack-gap-md: var(--__ac-stack-gap-sm);
-  --__ac-stack-gap-lg: var(--__ac-stack-gap-md);
-  --__ac-stack-gap-xl: var(--__ac-stack-gap-lg);
-  --__ac-stack-gap-2xl: var(--__ac-stack-gap-xl);
-  --__ac-stack-gap: var(--__ac-stack-gap-xs);
+  --__axc-stack-gap-xs: initial;
+  --__axc-stack-gap-sm: var(--__axc-stack-gap-xs);
+  --__axc-stack-gap-md: var(--__axc-stack-gap-sm);
+  --__axc-stack-gap-lg: var(--__axc-stack-gap-md);
+  --__axc-stack-gap-xl: var(--__axc-stack-gap-lg);
+  --__axc-stack-gap-2xl: var(--__axc-stack-gap-xl);
+  --__axc-stack-gap: var(--__axc-stack-gap-xs);

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

 .navds-stack-align {
-  --__ac-stack-align-xs: initial;
-  --__ac-stack-align-sm: var(--__ac-stack-align-xs);
-  --__ac-stack-align-md: var(--__ac-stack-align-sm);
-  --__ac-stack-align-lg: var(--__ac-stack-align-md);
-  --__ac-stack-align-xl: var(--__ac-stack-align-lg);
-  --__ac-stack-align-2xl: var(--__ac-stack-align-xl);
-  --__ac-stack-align: var(--__ac-stack-align-xs);
+  --__axc-stack-align-xs: initial;
+  --__axc-stack-align-sm: var(--__axc-stack-align-xs);
+  --__axc-stack-align-md: var(--__axc-stack-align-sm);
+  --__axc-stack-align-lg: var(--__axc-stack-align-md);
+  --__axc-stack-align-xl: var(--__axc-stack-align-lg);
+  --__axc-stack-align-2xl: var(--__axc-stack-align-xl);
+  --__axc-stack-align: var(--__axc-stack-align-xs);

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

 .navds-stack-justify {
-  --__ac-stack-justify-xs: initial;
-  --__ac-stack-justify-sm: var(--__ac-stack-justify-xs);
-  --__ac-stack-justify-md: var(--__ac-stack-justify-sm);
-  --__ac-stack-justify-lg: var(--__ac-stack-justify-md);
-  --__ac-stack-justify-xl: var(--__ac-stack-justify-lg);
-  --__ac-stack-justify-2xl: var(--__ac-stack-justify-xl);
-  --__ac-stack-justify: var(--__ac-stack-justify-xs);
+  --__axc-stack-justify-xs: initial;
+  --__axc-stack-justify-sm: var(--__axc-stack-justify-xs);
+  --__axc-stack-justify-md: var(--__axc-stack-justify-sm);
+  --__axc-stack-justify-lg: var(--__axc-stack-justify-md);
+  --__axc-stack-justify-xl: var(--__axc-stack-justify-lg);
+  --__axc-stack-justify-2xl: var(--__axc-stack-justify-xl);
+  --__axc-stack-justify: var(--__axc-stack-justify-xs);

-  justify-content: var(--__ac-stack-justify);
+  justify-content: var(--__axc-stack-justify);
 }

 .navds-stack-direction {
-  --__ac-stack-direction-xs: initial;
-  --__ac-stack-direction-sm: var(--__ac-stack-direction-xs);
-  --__ac-stack-direction-md: var(--__ac-stack-direction-sm);
-  --__ac-stack-direction-lg: var(--__ac-stack-direction-md);
-  --__ac-stack-direction-xl: var(--__ac-stack-direction-lg);
-  --__ac-stack-direction-2xl: var(--__ac-stack-direction-xl);
-  --__ac-stack-direction: var(--__ac-stack-direction-xs);
+  --__axc-stack-direction-xs: initial;
+  --__axc-stack-direction-sm: var(--__axc-stack-direction-xs);
+  --__axc-stack-direction-md: var(--__axc-stack-direction-sm);
+  --__axc-stack-direction-lg: var(--__axc-stack-direction-md);
+  --__axc-stack-direction-xl: var(--__axc-stack-direction-lg);
+  --__axc-stack-direction-2xl: var(--__axc-stack-direction-xl);
+  --__axc-stack-direction: var(--__axc-stack-direction-xs);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

-.navds-skeleton--has-children.navds-skeleton--no-width {
-  width: fit-content;
+  &.navds-skeleton--no-width {
+    width: fit-content;
+  }
 }

 .navds-skeleton--text {
  height: auto;
  transform-origin: 0 55%;
  transform: scale(1, 0.6);
-  border-radius: var(--a-border-radius-medium);
-}
+  border-radius: var(--ax-border-radius-large);

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

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

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

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

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

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

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

-.navds-stepper--horizontal {
-  display: flex;
-  align-items: flex-start;
-  text-align: center;
-}
-
 .navds-stepper__item {
  display: grid;
  grid-template-rows:
-    [line-1] auto [step-start] var(--navds-stepper-circle-size)
+    [line-1] auto [step-start] var(--__axc-stepper-circle-size)
    [line-2 step-end] auto;
-  grid-template-columns: var(--navds-stepper-circle-size) auto;
+  grid-template-columns: var(--__axc-stepper-circle-size) auto;
  justify-items: flex-start;
-  gap: 0.5rem;
+  gap: var(--ax-spacing-2);
 }

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

-.navds-stepper__step--behind.navds-stepper__step--completed + .navds-stepper__line {
-  background-color: var(--ac-stepper-line-completed, var(--a-border-selected));
-}
-
-.navds-stepper__item--behind.navds-stepper__item--completed + .navds-stepper__item > .navds-stepper__line--1 {
-  background-color: var(--ac-stepper-line-completed, var(--a-border-selected));
+/* Line before non-interactive step */
+.navds-stepper__item:has(+ .navds-stepper__item > .navds-stepper__step[data-interactive="false"]) {
+  .navds-stepper__line--2 {
+    background-color: var(--ax-border-neutral-strong);
+  }
 }

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

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

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

 .navds-stepper__step {
  grid-row: 2 / -1;
  grid-column: 1 / -1;
  display: grid;
-  grid-template-columns: [circle] var(--navds-stepper-circle-size) [content] auto;
-  gap: var(--a-spacing-2);
+  grid-template-columns: [circle] var(--__axc-stepper-circle-size) [content] auto;
+  gap: var(--ax-spacing-2);
  justify-content: flex-start;
-  text-decoration: none;
  cursor: pointer;
-  padding: var(--navds-stepper-border-width);
-  margin: calc(var(--navds-stepper-border-width) * -1) calc(var(--navds-stepper-border-width) * -1) 1.75rem;
-}
+  padding: var(--__axc-stepper-border-width);
+  margin: calc(var(--__axc-stepper-border-width) * -1) calc(var(--__axc-stepper-border-width) * -1)
+    var(--__axc-stepper-circle-size);

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

-@media (forced-colors: active) {
-  .navds-stepper__step {
-    background-color: ButtonFace;
-    color: ButtonText;
-  }
-
-  .navds-stepper__circle.navds-stepper__circle {
-    border: 0;
-  }
-
-  .navds-stepper__step .navds-stepper__circle {
-    forced-color-adjust: none;
-    background-color: ButtonText;
-    border-color: ButtonText;
-    color: ButtonFace;
-  }
-
-  .navds-stepper__step.navds-stepper__step:focus-visible {
-    box-shadow: none;
-    outline: 2px solid highlight;
-    outline-offset: 2px;
-  }
-
-  .navds-stepper__step.navds-stepper__step--active .navds-stepper__circle {
-    forced-color-adjust: none;
-    background-color: highlight;
-    border-color: highlighttext;
-    color: highlighttext;
-  }
-
-  .navds-stepper__line {
-    background-color: ButtonText;
-  }
-}
-
-button.navds-stepper__step {
-  appearance: none;
-  border: none;
-  background-color: transparent;
-  font: inherit;
-  color: inherit;
-  text-align: inherit;
-}
-
-.navds-stepper__step--non-interactive {
-  color: var(--ac-stepper-non-interactive, var(--a-text-subtle));
-  cursor: default;
-}
-
-:where(.navds-stepper__step):focus-visible {
-  outline: none;
-  box-shadow: var(--a-shadow-focus);
-  isolation: isolate;
-}
-
-@supports not selector(:focus-visible) {
-  .navds-stepper__step:focus {
-    outline: none;
-    box-shadow: var(--a-shadow-focus);
+    /* Isolate item to make outline show above line--2 */
    isolation: isolate;
  }
+
+  /* Remove last item bottom margin */
+  .navds-stepper__item:last-child & {
+    margin-bottom: 0;
+  }
+
+  &:is(button) {
+    appearance: none;
+    border: none;
+    background-color: transparent;
+    font: inherit;
+    color: inherit;
+    text-align: inherit;
+  }
 }

 .navds-stepper__circle {
  grid-column: circle;
  display: inline-grid;
  place-items: center;
-  flex-shrink: 0;
-  width: var(--navds-stepper-circle-size);
-  height: var(--navds-stepper-circle-size);
-  border: var(--navds-stepper-border-width) solid currentColor;
-  border-radius: var(--a-border-radius-full);
+  width: var(--__axc-stepper-circle-size);
+  height: var(--__axc-stepper-circle-size);
+  border: var(--__axc-stepper-border-width) solid currentColor;
+  border-radius: var(--ax-border-radius-full);
  line-height: 1;
 }

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

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

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

-:where(.navds-stepper--horizontal) .navds-stepper__line {
-  height: var(--navds-stepper-border-width);
-  width: 100%;
-  min-height: auto;
-  grid-row: 1;
-  display: block;
-  align-self: center;
-}
+@media (forced-colors: active) {
+  .navds-stepper__circle.navds-stepper__circle {
+    border: 0;
+    outline: 2px solid ButtonText;
+    outline-offset: 2px;
+  }

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

-:where(.navds-stepper--horizontal) .navds-stepper__line--2 {
-  grid-column: line-2;
-}
-
-:where(.navds-stepper--horizontal .navds-stepper__item:first-of-type) .navds-stepper__line--1,
-:where(.navds-stepper--horizontal .navds-stepper__item:last-of-type) .navds-stepper__line--2 {
-  visibility: hidden;
-}
-
-:where(.navds-stepper--horizontal) .navds-stepper__step {
-  grid-row: 1 / -1;
-  grid-column: step;
-  display: grid;
-  grid-template-rows: [circle] var(--navds-stepper-circle-size) [content] auto;
-  grid-template-columns:
-    [content-start] auto [circle] var(--navds-stepper-circle-size)
-    [content-end] auto;
-  place-items: center center;
-  margin-bottom: 0;
-}
-
-:where(.navds-stepper--horizontal) .navds-stepper__circle {
-  grid-row: circle;
-  grid-column: 2;
-}
-
-:where(.navds-stepper--horizontal) .navds-stepper__content {
-  grid-row: content;
-  grid-column: 1 / -1;
-  max-width: 24ch;
-}
-
-/* Active step */
-:where(.navds-stepper__step--active) .navds-stepper__content {
-  color: var(--ac-stepper-active, var(--a-text-action-selected));
-}
-
-.navds-stepper__step:hover:where(:not(.navds-stepper__step--non-interactive)) {
-  color: var(--ac-stepper-hover-active, var(--a-text-action-hover));
-}
-
-:where(.navds-stepper__step:hover) .navds-stepper__content {
-  text-decoration: underline;
-}
-
-:where(.navds-stepper__step--non-interactive:hover, .navds-stepper__step--active:hover) .navds-stepper__content {
-  text-decoration: none;
-}
-
-:where(.navds-stepper__step--active) .navds-stepper__circle {
-  background-color: var(--ac-stepper-active-bg, var(--a-surface-action-selected));
-  border-color: var(--ac-stepper-active-border, var(--a-border-action-selected));
-  color: var(--ac-stepper-active-text, var(--a-text-on-action));
-}
-
-:where(.navds-stepper__step:not(.navds-stepper__step--active):hover) .navds-stepper__circle {
-  background-color: var(--ac-stepper-hover-bg, var(--a-surface-action-subtle-hover));
-}
-
-:where(.navds-stepper__step:not(.navds-stepper__step--active):hover) .navds-stepper__circle--success {
-  background-color: var(--ac-stepper-text, var(--a-surface-action-hover));
-}
-
-/* Non-interactive */
-:where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__content {
-  color: var(--ac-stepper-non-interactive-active, var(--a-text-default));
-}
-
-.navds-stepper__step--non-interactive.navds-stepper__step--behind.navds-stepper__step--completed + .navds-stepper__line {
-  background-color: var(--ac-stepper-non-interactive-line-completed, var(--a-border-strong));
-}
-
-.navds-stepper__item--non-interactive.navds-stepper__item--behind.navds-stepper__item--completed
-  + .navds-stepper__item
-  > .navds-stepper__line--1 {
-  background-color: var(--ac-stepper-non-interactive-line-completed, var(--a-border-strong));
-}
-
-:where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__circle {
-  background-color: var(--ac-stepper-non-interactive-active-bg, var(--a-surface-inverted));
-  border-color: var(--ac-stepper-non-interactive-active-border, var(--a-surface-inverted));
-  color: var(--ac-stepper-non-interactive-active-text, var(--a-text-on-inverted));
-}
-
-:where(.navds-stepper__step--non-interactive:hover) .navds-stepper__circle {
-  background-color: transparent;
-}
-
-:where(.navds-stepper__step--non-interactive.navds-stepper__step--active:hover) .navds-stepper__circle {
-  background-color: var(--ac-stepper-non-interactive-active-bg, var(--a-surface-inverted));
-}
-
-:where(.navds-stepper__step--completed.navds-stepper__step--active) .navds-stepper__circle {
-  background-color: inherit;
-  color: var(--ac-stepper-active-completed, var(--a-text-action-selected));
-}
-
-:where(.navds-stepper__step--completed.navds-stepper__step--active) .navds-stepper__circle--success {
-  color: var(--a-text-on-action);
-  background-color: var(--ac-stepper-active-completed, var(--a-surface-action-selected));
-}
-
-:where(.navds-stepper__step--non-interactive, .navds-stepper__step--non-interactive:hover) .navds-stepper__circle--success {
-  color: var(--a-text-on-inverted);
-  background-color: var(--ac-stepper-non-interactive-completed-bg, var(--a-surface-neutral));
-}
-
-:where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__circle--success {
-  color: var(--a-text-on-inverted);
-  background-color: var(--ac-stepper-non-interactive-active-completed, var(--a-surface-inverted));
-}
-
-:where(.navds-stepper__step--completed.navds-stepper__step--active.navds-stepper__step--non-interactive) .navds-stepper__circle {
-  color: var(--ac-stepper-non-interactive-active-completed, var(--a-text-default));
-}
-
-:where(.navds-stepper__step--completed.navds-stepper__step--active.navds-stepper__step--non-interactive)
-  .navds-stepper__circle--success {
-  color: var(--ac-stepper-non-interactive-active-completed, var(--a-text-on-inverted));
+  .navds-stepper__step[data-active="true"][data-interactive] {
+    .navds-stepper__circle {
+      forced-color-adjust: none;
+      background-color: highlight;
+      color: highlighttext;
+    }
+  }
 }
@@ -10,43 +10,44 @@

 .navds-table__body {
  display: table-row-group;
+
+  & .navds-table__row--shade-on-hover:not(.navds-table__expandable-row--expansion-disabled):hover {
+    background-color: var(--ax-bg-neutral-hoverA);
+    transition: background-color 70ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  & .navds-table__row--shade-on-hover.navds-table__row--selected:hover {
+    background-color: var(--ax-bg-accent-hoverA);
+  }
 }

 .navds-table__row {
  display: table-row;
 }

-.navds-table__body .navds-table__row--shade-on-hover:not(.navds-table__expandable-row--expansion-disabled):hover {
-  background-color: var(--ac-table-row-hover, var(--a-bg-subtle));
-}
-
 .navds-table__row--selected {
-  background-color: var(--ac-table-row-selected, var(--a-surface-action-subtle));
+  background-color: var(--ax-bg-accent);
 }

-.navds-table__body .navds-table__row--shade-on-hover.navds-table__row--selected:hover {
-  background-color: var(--ac-table-row-selected-hover, var(--a-surface-action-subtle-hover));
-}
+.navds-table--zebra-stripes {
+  & .navds-table__body :where(.navds-table__row:nth-child(odd):not(.navds-table__row--selected)) {
+    background-color: var(--ax-bg-neutral);
+  }

-.navds-table--zebra-stripes .navds-table__body :where(.navds-table__row:nth-child(odd):not(.navds-table__row--selected)) {
-  background-color: var(--ac-table-row-zebra, var(--a-surface-subtle));
-}
-
-.navds-table--zebra-stripes
-  .navds-table__body
-  :where(.navds-table__expandable-row:nth-child(4n + 1):not(.navds-table__row--selected)) {
-  background-color: transparent;
+  & .navds-table__body :where(.navds-table__expandable-row:nth-child(4n + 1):not(.navds-table__row--selected)) {
+    background-color: transparent;
+  }
 }

 .navds-table--zebra-stripes .navds-table__body .navds-table__expanded-row:nth-child(4n) {
-  background-color: var(--ac-table-row-zebra, var(--a-surface-subtle));
+  background-color: var(--ax-bg-neutral);
 }

 .navds-table__header-cell,
 .navds-table__data-cell {
  display: table-cell;
-  padding: var(--a-spacing-3) var(--a-spacing-2);
-  border-bottom: 1px solid var(--ac-table-row-border, var(--a-border-default));
+  padding: var(--ax-spacing-3) var(--ax-spacing-2);
+  border-bottom: 1px solid var(--ax-border-default);
  text-align: left;
 }

@@ -67,7 +68,7 @@

 :where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__header-cell,
 :where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__data-cell {
-  border-color: var(--ac-table-cell-hover-border, var(--a-border-strong));
+  border-color: var(--ax-border-strong);
 }

 :where(.navds-table__expandable-row--open:hover) .navds-table__data-cell {
@@ -76,12 +77,12 @@

 .navds-table--large .navds-table__header-cell,
 .navds-table--large .navds-table__data-cell {
-  padding: var(--a-spacing-4) var(--a-spacing-2);
+  padding: var(--ax-spacing-4) var(--ax-spacing-2);
 }

 .navds-table--small .navds-table__header-cell,
 .navds-table--small .navds-table__data-cell {
-  padding: var(--a-spacing-1) var(--a-spacing-2);
+  padding: var(--ax-spacing-1) var(--ax-spacing-2);
 }

 .navds-table :not(.navds-checkboxes) > .navds-checkbox .navds-checkbox__input {
@@ -103,43 +104,36 @@
 .navds-table__sort-button {
  appearance: none;
  background: none;
-  color: var(--ac-table-sort-button-text, var(--a-text-action));
+  color: var(--ax-text-accent);
  border: none;
  cursor: pointer;
  margin: 0;
-  padding: var(--a-spacing-4) var(--a-spacing-3);
+  padding: var(--ax-spacing-4) var(--ax-spacing-3);
  width: 100%;
  display: flex;
-  gap: var(--a-spacing-2);
+  gap: var(--ax-spacing-2);
  align-items: center;
  line-height: inherit;
  font-weight: inherit;
 }

 .navds-table--small .navds-table__sort-button {
-  padding: var(--a-spacing-2) var(--a-spacing-3);
+  padding: var(--ax-spacing-2) var(--ax-spacing-3);
 }

 .navds-table__sort-button:hover {
-  background-color: var(--ac-table-sort-button-hover-bg, var(--a-bg-subtle));
+  background-color: var(--ax-bg-neutral-hoverA);
 }

 .navds-table__sort-button:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 2px var(--a-border-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-table__sort-button:focus {
-    outline: none;
-    box-shadow: inset 0 0 0 2px var(--a-border-focus);
-  }
+  outline: 2px solid var(--ax-border-focus);
+  outline-offset: -4px;
 }

 .navds-table__header-cell[aria-sort="ascending"] .navds-table__sort-button,
 .navds-table__header-cell[aria-sort="descending"] .navds-table__sort-button {
-  background-color: var(--ac-table-sort-button-sorted-bg, var(--a-surface-selected));
-  color: var(--ac-table-sort-button-sorted-text, var(--a-table-sort-button-sorted-text, var(--a-text-action-on-action-subtle)));
+  background-color: var(--ax-bg-accent-moderate);
+  color: var(--ax-text-accent-strong);
 }

 .navds-table__header-cell--align-right .navds-table__sort-button {
@@ -156,7 +150,7 @@
 }

 .navds-table__expandable-row:not(.navds-table__expandable-row--open) .navds-table__data-cell {
-  transition: border-bottom-color 190ms cubic-bezier(0.6, 0.04, 0.98, 0.335);
+  transition: border-bottom-color 150ms cubic-bezier(0.95, 0.05, 0.8, 0.04);
 }

 .navds-table__expandable-row.navds-table__expandable-row--clickable:not(.navds-table__expandable-row--expansion-disabled):hover {
@@ -168,7 +162,7 @@
 }

 .navds-table__expandable-row--open .navds-table__header-cell {
-  border-color: var(--ac-table-row-border, var(--a-border-default));
+  border-color: var(--ax-border-default);
 }

 .navds-table__expandable-row--open .navds-table__toggle-expand-cell--open {
@@ -181,11 +175,11 @@
 }

 .navds-table--large .navds-table__toggle-expand-cell {
-  padding: 0 var(--a-spacing-2);
+  padding: 0 var(--ax-spacing-2);
 }

 .navds-table--small .navds-table__toggle-expand-cell {
-  padding: var(--a-spacing-1) var(--a-spacing-2);
+  padding: var(--ax-spacing-1) var(--ax-spacing-2);
 }

 .navds-table__toggle-expand-button {
@@ -194,93 +188,54 @@
  cursor: pointer;
  background: transparent;
  border: none;
-  border-radius: var(--a-border-radius-medium);
+  border-radius: var(--ax-border-radius-medium);
  height: 2rem;
  width: 2rem;
  font-size: 1.5rem;
  margin: 0 auto;
+  transition: background-color 70ms cubic-bezier(0.2, 0, 0, 1);
 }

 .navds-table__expandable-icon {
-  transition: transform 150ms ease-in-out;
+  transition: transform 250ms cubic-bezier(0.2, 0, 0, 1);
 }

-.navds-table__toggle-expand-cell:hover {
+.navds-table__expandable-row:not(.navds-table__expandable-row--expansion-disabled) .navds-table__toggle-expand-cell:hover {
  cursor: pointer;
 }

 .navds-table__toggle-expand-button:hover,
 .navds-table__toggle-expand-cell:hover > .navds-table__toggle-expand-button,
 .navds-table__expandable-row--clickable:hover .navds-table__toggle-expand-button {
-  background-color: var(--a-surface-hover);
+  background-color: var(--ax-bg-neutral-hoverA);
 }

 .navds-table__toggle-expand-cell--open > :where(.navds-table__toggle-expand-button) :where(.navds-table__expandable-icon) {
-  transform: translateY(0) rotate(180deg);
-}
-
-.navds-table__toggle-expand-button:hover > :where(.navds-table__expandable-icon) {
-  transform: translateY(1px);
-}
-
-.navds-table__toggle-expand-cell--open > .navds-table__toggle-expand-button:hover > :where(.navds-table__expandable-icon) {
-  transform: translateY(-1px) rotate(180deg);
+  transform: rotateX(180deg);
 }

 .navds-table__toggle-expand-button:focus-visible {
-  outline: none;
-  box-shadow: var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-table__toggle-expand-button:focus {
-    outline: none;
-    box-shadow: var(--a-shadow-focus);
-  }
+  outline: 2px solid var(--ax-border-focus);
 }

 .navds-table__expanded-row-cell {
  padding: 0;
+
+  &:empty {
+    display: none;
+  }
 }

-.navds-table__expanded-row-cell:empty {
-  display: none;
-}
-
-.navds-table__expanded-row-collapse:not([style*="height: 0px;"]) {
-  border-bottom: 1px solid var(--ac-table-row-border, var(--a-border-default));
+/* -------------------------- Table ExpandableRow -------------------------- */
+.navds-table__expanded-row-collapse:not([style*="height: 0px;"]),
+.navds-table__expanded-row-collapse[style*="transition:"] {
+  border-bottom: 1px solid var(--ax-border-default);
 }

 .navds-table__expanded-row-content {
-  padding: var(--a-spacing-4) calc(var(--a-spacing-2) + 3rem);
+  padding: var(--ax-spacing-4) calc(var(--ax-spacing-2) + 3rem);
 }

 .navds-table--small .navds-table__expanded-row-content {
-  padding: var(--a-spacing-2) calc(var(--a-spacing-2) + 3rem);
-}
-
-@media (forced-colors: active) {
-  .navds-date.navds-date button.rdp-day_selected {
-    forced-color-adjust: none;
-    background-color: highlight;
-    color: highlighttext;
-    box-shadow: none;
-  }
-
-  .navds-date.navds-date button {
-    color: buttontext;
-    forced-color-adjust: none;
-    outline: none;
-    box-shadow: none;
-  }
-
-  .navds-date button:focus-visible {
-    color: buttontext;
-    forced-color-adjust: none;
-    outline: 2px solid highlight;
-  }
-
-  .navds-date.navds-date button.rdp-day_disabled {
-    color: GrayText;
-  }
+  padding: var(--ax-spacing-2) calc(var(--ax-spacing-2) + 3rem);
 }
@@ -1,5 +1,5 @@
 .navds-tabs__tablist-wrapper {
-  box-shadow: inset 0 -1px 0 0 var(--ac-tabs-border, var(--a-border-divider));
+  box-shadow: inset 0 -1px var(--ax-border-neutral-subtle);
  width: 100%;
  display: flex;
 }
@@ -9,116 +9,116 @@
  max-width: 100%;
  width: 100%;
  scroll-behavior: smooth;
-  -ms-overflow-style: none; /* for Internet Explorer, Edge */
-  scrollbar-width: none; /* for Firefox */
+  -ms-overflow-style: none; /* Internet Explorer, Edge */
+  scrollbar-width: none; /*  Firefox */
  overflow-x: scroll;
-}

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

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

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

-.navds-tabs__scroll-button svg {
-  font-size: 1.25rem;
-  flex-shrink: 0;
-}
-
-.navds-tabs--small .navds-tabs__scroll-button {
-  padding: var(--a-spacing-1-alt) var(--a-spacing-4);
-  width: 2rem;
-}
-
 .navds-tabs__tab {
  min-height: 3rem;
-  padding: var(--a-spacing-3) var(--a-spacing-4);
+  padding: var(--ax-spacing-3) var(--ax-spacing-4);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: none;
  border: none;
-  color: var(--ac-tabs-text, var(--a-text-default));
+  color: var(--ax-text-default);
  cursor: pointer;
-}

-.navds-tabs__tab:hover {
-  box-shadow: inset 0 -3px 0 0 var(--ac-tabs-hover-border, var(--a-border-subtle-hover));
-}
+  --__axc-tabs-line-width: 0;
+  --__axc-tabs-line-color: var(--ax-border-neutral-subtle);

-.navds-tabs__tab[aria-selected="true"] {
-  box-shadow: inset 0 -3px 0 0 var(--ac-tabs-selected-border, var(--a-border-action-selected));
-  color: var(--ac-tabs-selected-text, var(--a-text-default));
-}
+  box-shadow: inset 0 var(--__axc-tabs-line-width) var(--__axc-tabs-line-color);
+  transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);

-.navds-tabs__tab:focus-visible {
-  outline: 2px solid transparent;
-  outline-offset: -2px;
-  box-shadow: inset var(--a-shadow-focus);
-  color: var(--ac-tabs-focus-text, var(--a-text-default));
-}
+  &:hover {
+    --__axc-tabs-line-width: -4px;
+  }

-@supports not selector(:focus-visible) {
-  .navds-tabs__tab:focus {
-    outline: 2px solid transparent;
-    box-shadow: inset var(--a-shadow-focus);
-    color: var(--ac-tabs-focus-text, var(--a-text-default));
+  &[data-state="active"] {
+    --__axc-tabs-line-width: -4px;
+    --__axc-tabs-line-color: var(--ax-border-accent-strong);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: -2px;
  }
 }

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

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

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

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

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

 .navds-tabs__tab-icon--top,
 .navds-tabs__tab--small.navds-tabs__tab-icon--top {
-  padding: var(--a-spacing-1) var(--a-spacing-4);
+  padding: var(--ax-spacing-1) var(--ax-spacing-4);
 }

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

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

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

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

 .navds-tabs__tabpanel:focus-visible {
-  outline: 2px solid transparent;
-  box-shadow: inset 0 0 0 2px var(--a-border-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-tabs__tabpanel:focus {
-    outline: 2px solid transparent;
-    box-shadow: inset 0 0 0 2px var(--a-border-focus);
-  }
+  outline: 2px solid var(--ax-border-focus);
+  outline-offset: -2px;
 }

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

-  .navds-tabs__tab--small[aria-selected="true"] {
-    padding-block-end: calc(var(--a-spacing-1-alt) - 3px);
+  .navds-tabs__tab--small[data-state="active"] {
+    padding-block-end: calc(var(--ax-spacing-1-alt) - 3px);
  }

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

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

+/* Main Togglegroup */
 .navds-toggle-group {
-  border-radius: var(--a-border-radius-medium);
-  background-color: var(--ac-toggle-group-bg, var(--a-surface-transparent));
-  box-shadow: inset 0 0 0 1px var(--ac-toggle-group-border, var(--a-border-default));
-  padding: calc(var(--a-spacing-1) + 0.0625rem);
-  gap: var(--a-spacing-1);
+  border-radius: var(--ax-border-radius-medium);
+  background-color: transparent;
+  box-shadow: inset 0 0 0 1px var(--ax-border-default);
+  padding: var(--ax-spacing-1);
+  gap: var(--ax-spacing-1);
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
 }

-.navds-toggle-group--small {
-  padding: calc(var(--a-spacing-05) + 0.0625rem);
-}
-
-.navds-toggle-group--neutral {
-  background-color: var(--ac-toggle-group-neutral-bg, var(--a-surface-transparent));
-  box-shadow: inset 0 0 0 1px var(--ac-toggle-group-neutral-border, var(--a-border-default));
-}
-
+/* Button */
 .navds-toggle-group__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
-  padding: var(--a-spacing-1) var(--a-spacing-3);
-  min-height: 2.375rem;
+  padding: var(--ax-spacing-1) var(--ax-spacing-3);
+  min-height: 2.5rem;
  border: none;
  cursor: pointer;
-  background-color: var(--ac-toggle-group-button-bg, var(--a-surface-transparent));
-  color: var(--ac-toggle-group-button-text, var(--a-text-default));
-  border-radius: var(--a-border-radius-small);
+  background-color: transparent;
+  color: var(--ax-text-default);
+  border-radius: var(--ax-border-radius-small);
  min-width: fit-content;
-  font-weight: var(--a-font-weight-regular);
-}

-.navds-toggle-group--medium > :where(.navds-toggle-group__button:first-of-type:focus-visible) {
-  border-start-start-radius: 1px;
-  border-end-start-radius: 1px;
-}
-
-.navds-toggle-group--medium > :where(.navds-toggle-group__button:last-of-type:focus-visible) {
-  border-start-end-radius: 1px;
-  border-end-end-radius: 1px;
-}
-
-.navds-toggle-group--neutral > .navds-toggle-group__button {
-  background-color: var(--ac-toggle-group-button-neutral-bg, var(--a-surface-transparent));
-  color: var(--ac-toggle-group-button-neutral-text, var(--a-text-default));
-}
-
-.navds-toggle-group__button:hover {
-  background-color: var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle));
-  color: var(--ac-toggle-group-button-hover-text, var(--a-text-default));
-}
-
-.navds-toggle-group--neutral > .navds-toggle-group__button:hover {
-  background-color: var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
-  color: var(--ac-toggle-group-button-neutral-hover-text, var(--a-text-default));
-}
-
-.navds-toggle-group__button:focus-visible {
-  outline: 2px solid transparent;
-  outline-offset: 1px;
-  box-shadow:
-    0 0 0 1px var(--a-surface-default),
-    0 0 0 4px var(--a-border-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-toggle-group__button:focus {
-    outline: 2px solid transparent;
-    outline-offset: 1px;
-    box-shadow:
-      0 0 0 1px var(--a-surface-default),
-      0 0 0 4px var(--a-border-focus);
+  &:hover {
+    background-color: var(--ax-bg-accent-moderate-hoverA);
+    color: var(--ax-text-default);
  }
-}

-.navds-toggle-group__button:focus-visible:hover[aria-pressed="false"] {
-  box-shadow:
-    0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)),
-    0 0 0 4px var(--a-border-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
-    box-shadow:
-      0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)),
-      0 0 0 4px var(--a-border-focus);
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
  }
-}

-.navds-toggle-group--neutral > .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
-  box-shadow:
-    0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
-    0 0 0 4px var(--a-border-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-toggle-group--neutral > .navds-toggle-group__button:focus-visible:hover[aria-pressed="false"] {
-    box-shadow:
-      0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
-      0 0 0 4px var(--a-border-focus);
+  &[aria-checked="true"] {
+    background-color: var(--ax-bg-accent-strong-pressed);
+    color: var(--ax-text-accent-contrast);
  }
 }

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

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

-.navds-toggle-group__button[aria-pressed="true"],
-.navds-toggle-group__button[aria-checked="true"] {
-  background-color: var(--ac-toggle-group-selected-bg, var(--a-surface-action-selected));
-  color: var(--ac-toggle-group-selected-text, var(--a-text-on-action));
-}
-
-.navds-toggle-group--neutral > .navds-toggle-group__button[aria-pressed="true"],
-.navds-toggle-group--neutral > .navds-toggle-group__button[aria-checked="true"] {
-  background-color: var(--ac-toggle-group-neutral-selected-bg, var(--a-surface-neutral-selected));
-  color: var(--ac-toggle-group-neutral-selected-text, var(--a-text-on-neutral));
-}
-
-.navds-toggle-group--small > .navds-toggle-group__button {
-  padding: var(--a-spacing-05) var(--a-spacing-3);
-  min-height: 1.625rem;
-  min-width: fit-content;
-}
-
-.navds-toggle-group__button > .navds-toggle-group__button-inner > svg {
-  font-size: 1.5rem;
-}
-
-.navds-toggle-group--small > .navds-toggle-group__button > .navds-toggle-group__button-inner > svg {
-  font-size: 1.125rem;
+/* Modifier small size */
+.navds-toggle-group--small {
+  & .navds-toggle-group__button {
+    padding: var(--ax-spacing-05) var(--ax-spacing-3);
+    min-height: 1.5rem;
+  }
+
+  & .navds-toggle-group__button-inner > svg {
+    font-size: var(--ax-font-size-xlarge);
+  }
 }

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

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

-  .navds-toggle-group__button[aria-checked="true"],
-  .navds-toggle-group__button[aria-pressed="true"] {
+  .navds-toggle-group__button[aria-checked="true"] {
    background-color: selecteditem;
    color: selecteditemtext;
-  }
-
-  .navds-toggle-group__button[aria-checked="true"] > *,
-  .navds-toggle-group__button[aria-pressed="true"] > * {
    forced-color-adjust: none;
  }

-  .navds-toggle-group__button:active {
-    background-color: unset !important;
-  }
-
  .navds-toggle-group__button:focus-visible {
    outline-color: highlight;
  }
@@ -50,7 +50,6 @@
  border-color: var(--a-border-subtle);
 }

-.navds-combobox__button-clear svg,
 .navds-combobox__button-toggle-list svg,
 .navds-combobox__list svg {
  width: var(--__ac-combobox-icon-size);
@@ -96,7 +95,7 @@
 }

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

@@ -120,6 +119,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 +136,6 @@
  border: none;
  padding: 0;
  margin: 0;
-  margin-left: var(--a-spacing-1);
  min-width: 10ch;
  width: 100%;
  height: var(--__ac-combobox-input-height);
@@ -188,19 +194,6 @@
  }
 }

-.navds-combobox__button-clear {
-  border-radius: var(--a-border-radius-medium);
-  color: var(--ac-combobox-clear-icon, var(--a-text-subtle));
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  background: none;
-  border: none;
-  font-size: 1rem;
-  padding: 0;
-}
-
 .navds-combobox__input::-webkit-search-cancel-button {
  display: none;
 }
@@ -218,14 +211,12 @@
  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));
+  color: var(--a-text-action);
 }

-.navds-combobox__button-clear:hover,
 .navds-combobox__button-toggle-list:hover {
-  color: var(--ac-combobox-clear-icon-hover, var(--a-text-action-selected));
+  color: var(--a-text-action-selected);
 }

 .navds-combobox__button-toggle-list:focus-visible {
@@ -399,10 +390,6 @@
 }

@media (forced-colors: active) {
-  .navds-combobox__button-clear:hover {
-    color: highlight;
-  }
-
  .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
    outline-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
 */
@@ -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.8.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.8.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;
@@ -387,9 +387,6 @@
    "--ac-search-error-border": "--a-border-danger"
  },
  "combobox": {
-    "--ac-combobox-clear-icon": "--a-text-subtle",
-    "--ac-combobox-clear-icon-hover": "--a-text-action-selected",
-    "--ac-combobox-clear-icon-active": "--a-text-action",
    "--ac-combobox-list-bg": "--a-surface-default",
    "--ac-combobox-list-text": "--a-text-default",
    "--ac-combobox-list-border-color": "--a-border-divider",
@@ -1,5 +1,79 @@
 # @navikt/ds-react

+## 7.8.0
+
+### Minor Changes
+
+- Chips.Removable: Removed prop `removeLabel` ([#3429](https://github.com/navikt/aksel/pull/3429))
+
+- i18n: :sparkles: Implemented i18n support for all components. Components come with support for nb, nn and en locales ([Docs](https://aksel.nav.no/komponenter/core/provider#84d7ea5ec517)) ([#3429](https://github.com/navikt/aksel/pull/3429))
+
+- Combobox: Removed clear button, removed tokens staring with `--ac-combobox-clear`, deprecated props `clearButton`/`clearButtonLabel`. ([#3433](https://github.com/navikt/aksel/pull/3433))
+
+- Combobox: Changed prop `maxSelected` to number ([#3433](https://github.com/navikt/aksel/pull/3433))
+
+- DatePicker/MonthPicker: Added new `translations` prop and deprecated `locale` prop ([#3429](https://github.com/navikt/aksel/pull/3429))
+
+### Patch Changes
+
+- Timeline: Deprecated prop `axisLabelTemplates`. Use [Provider](https://aksel.nav.no/komponenter/core/provider#84d7ea5ec517) if you still need to change the date formats. ([#3429](https://github.com/navikt/aksel/pull/3429))
+
+- Search: Deprecated prop `clearButtonLabel`. Use [Provider](https://aksel.nav.no/komponenter/core/provider#84d7ea5ec517) if you still need to change the label. ([#3429](https://github.com/navikt/aksel/pull/3429))
+
+- Textarea: Deprecated prop `i18n`. Use [Provider](https://aksel.nav.no/komponenter/core/provider#84d7ea5ec517) if you still need to change these texts. ([#3429](https://github.com/navikt/aksel/pull/3429))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@7.8.0
+  - @navikt/aksel-icons@7.8.0
+
+## 7.7.0
+
+### Minor Changes
+
+- CopyButton: Removed prop `activeTitle`. Use `activeText` instead. ([#3426](https://github.com/navikt/aksel/pull/3426))
+
+- Combobox: :boom: Removed prop `toggleListButtonLabel` ([#3409](https://github.com/navikt/aksel/pull/3409))
+
+### Patch Changes
+
+- Combobox: Hid buttons from screen readers, added `title` on clear button, removed sr-only text on toggle list button. ([#3409](https://github.com/navikt/aksel/pull/3409))
+
+- InternalHeader.UserButton: Remove `title`-attribute on icon and improved types. ([#3424](https://github.com/navikt/aksel/pull/3424))
+
+- CopyButton: Fix issue where state changes are announced multiple times using VO in Chrome ([#3374](https://github.com/navikt/aksel/pull/3374))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@7.7.0
+  - @navikt/aksel-icons@7.7.0
+
+## 7.6.0
+
+### Minor Changes
+
+- ActionMenu: Added 'align'-prop to 'ActionMenu.Content'. This allows menu to 'start' or 'end' align in reference to anchor. ([#3414](https://github.com/navikt/aksel/pull/3414))
+
+- ReadMore: Added size 'large'. ([#3372](https://github.com/navikt/aksel/pull/3372))
+
+### Patch Changes
+
+- DatePicker/MonthPicker: Remove pointerEvents=none on CalendarIcon so that the title shows up as tooltip on hover ([#3390](https://github.com/navikt/aksel/pull/3390))
+
+- Combobox: Single-select now shows cursor closer to selected item. ([#3384](https://github.com/navikt/aksel/pull/3384))
+
+- Updated dependencies [[`9c5b32f`](https://github.com/navikt/aksel/commit/9c5b32f9bae885585b5f50b637505017482b1d59)]:
+  - @navikt/aksel-icons@7.6.0
+  - @navikt/ds-tokens@7.6.0
+
+## 7.5.3
+
+### Patch Changes
+
+- Allow RC versions of React 19 through peerDependencies ([#3391](https://github.com/navikt/aksel/pull/3391))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@7.5.3
+  - @navikt/aksel-icons@7.5.3
+
 ## 7.5.2

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "7.5.2",
+  "version": "7.8.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",
@@ -40,6 +40,16 @@
        "default": "./cjs/index.js"
      }
    },
+    "./locales": {
+      "import": {
+        "types": "./esm/util/i18n/locales/index.d.ts",
+        "default": "./esm/util/i18n/locales/index.js"
+      },
+      "require": {
+        "types": "./cjs/util/i18n/locales/index.d.ts",
+        "default": "./cjs/util/i18n/locales/index.js"
+      }
+    },
    "./Accordion": {
      "import": {
        "types": "./esm/accordion/index.d.ts",
@@ -604,8 +614,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.8.0",
+    "@navikt/ds-tokens": "^7.8.0",
    "clsx": "^2.1.0",
    "date-fns": "^3.0.0",
    "react-day-picker": "8.10.1"
@@ -629,7 +639,7 @@
  },
  "peerDependencies": {
    "@types/react": ">=17.0.30",
-    "react": ">=17.0.0"
+    "react": ">=17.0.0 || >19.0.0-rc"
  },
  "peerDependenciesMeta": {
    "@types/react": {
@@ -1,37 +1,21 @@
-import { StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React, { useState } from "react";
 import { Accordion, AccordionProps } from ".";
-import AccordionContent from "./AccordionContent";
-import AccordionHeader from "./AccordionHeader";
-import AccordionItem from "./AccordionItem";

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

 type Story = StoryObj<typeof Accordion>;

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

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

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

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

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

 export const HeadingSize: Story = {
  render: () => (
-    <div style={{ width: 500 }} className="colgap">
+    <div className="colgap">
      {headingSizes.map((size) => (
        <SingleHeaderAccordion key={size} headingSize={size} />
      ))}
@@ -237,14 +192,14 @@ export const HeadingSize: Story = {
 export const Indent: Story = {
  render: () => {
    return (
-      <div style={{ width: 500 }} className="colgap">
-        <h3>No indent</h3>
+      <div className="colgap">
+        <h3>Indent</h3>
        <Accordion indent>
          {[...Array(2)].map((_, y) => (
            <Item key={y} defaultOpen />
          ))}
        </Accordion>
-        <h3>Indent</h3>
+        <h3>No indent</h3>
        <Accordion indent={false}>
          {[...Array(2)].map((_, y) => (
            <Item key={y} defaultOpen />
@@ -16,11 +16,6 @@ export interface ChipsRemovableProps
   * Click callback
   */
  onDelete?: () => void;
-  /**
-   * Replaces label read for screen-readers
-   * @default "slett"
-   */
-  removeLabel?: string;
 }

 export const RemovableChips = forwardRef<
@@ -32,7 +27,6 @@ export const RemovableChips = forwardRef<
      children,
      variant = "action",
      onDelete,
-      removeLabel,
      className,
      onClick,
      type = "button",
@@ -51,9 +45,7 @@ export const RemovableChips = forwardRef<
          className,
          `navds-chips__removable--${variant}`,
        )}
-        aria-label={`${children} ${
-          removeLabel ?? translate("Removable.labelSuffix")
-        }`}
+        aria-label={`${children} ${translate("Removable.labelSuffix")}`}
        onClick={composeEventHandlers(onClick, onDelete)}
      >
        <span className="navds-chips__chip-text">{children}</span>
@@ -10,6 +10,7 @@ import { CheckmarkIcon, FilesIcon } from "@navikt/aksel-icons";
 import { Label } from "../typography";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import copy from "../util/copy";
+import { useI18n } from "../util/i18n/i18n.context";

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

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

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

@@ -1,5 +1,9 @@
-export { useDateInputContext, DateContext } from "./useDateInputContext";
+export { useDateInputContext, DateInputContext } from "./useDateInputContext";
 export {
  useSharedMonthContext,
  SharedMonthProvider,
 } from "./useSharedMonthContext";
+export {
+  useDateTranslationContext,
+  DateTranslationContextProvider,
+} from "./useDateTranslationContext";
@@ -1,6 +1,6 @@
 import { createContext, useContext } from "react";

-interface DateContextContextProps {
+interface DateInputContextProps {
  /**
   * Open state for popover
   */
@@ -19,13 +19,15 @@ interface DateContextContextProps {
  defined: boolean;
 }

-export const DateContext = createContext<DateContextContextProps | null>(null);
+export const DateInputContext = createContext<DateInputContextProps | null>(
+  null,
+);

 export const useDateInputContext = () => {
-  const context = useContext(DateContext);
+  const context = useContext(DateInputContext);

  if (!context) {
-    console.warn("useDateInputContext must be used with DateContext");
+    console.warn("useDateInputContext must be used with DateInputContext");
  }

  return context;
@@ -0,0 +1,9 @@
+import { createContext } from "../../util/create-context";
+import { TFunction } from "../../util/i18n/i18n.context";
+
+interface DateTranslationContextProps {
+  translate: TFunction<"DatePicker">;
+}
+
+export const [DateTranslationContextProvider, useDateTranslationContext] =
+  createContext<DateTranslationContextProps>();
@@ -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 { DateContext } from "../context";
+import { useDateLocale, useI18n } from "../../util/i18n/i18n.context";
+import { DateInputContext, DateTranslationContextProvider } from "../context";
 import { DatePickerInput } from "../parts/DateInput";
 import { DateWrapper } from "../parts/DateWrapper";
-import { getLocaleFromString, labels } from "../utils";
+import { getLocaleFromString, getTranslations } from "../utils";
 import DatePickerStandalone from "./DatePickerStandalone";
 import Caption from "./parts/Caption";
 import DropdownCaption from "./parts/DropdownCaption";
@@ -66,7 +67,8 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
  (
    {
      children,
-      locale = "nb",
+      locale,
+      translations,
      dropdownCaption,
      disabled = [],
      disableWeekends = false,
@@ -85,6 +87,12 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
    },
    ref,
  ) => {
+    const translate = useI18n(
+      "DatePicker",
+      translations,
+      getTranslations(locale),
+    );
+    const langProviderLocale = useDateLocale();
    const ariaId = useId(id);
    const [open, setOpen] = useState(_open ?? false);

@@ -114,7 +122,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 +142,6 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
        }}
        weekStartsOn={1}
        initialFocus={false}
-        labels={labels as any}
        modifiers={{
          weekend: (day) => disableWeekends && isWeekend(day),
        }}
@@ -150,37 +157,40 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
    );

    return (
-      <DateContext.Provider
-        value={{
-          open: _open ?? open,
-          onOpen: () => {
-            setOpen((x) => !x);
-            onOpenToggle?.();
-          },
-          ariaId,
-          defined: true,
-        }}
-      >
-        <div
-          ref={mergedRef}
-          className={cl("navds-date__wrapper", wrapperClassName)}
+      <DateTranslationContextProvider translate={translate}>
+        <DateInputContext.Provider
+          value={{
+            open: _open ?? open,
+            onOpen: () => {
+              setOpen((x) => !x);
+              onOpenToggle?.();
+            },
+            ariaId,
+            defined: true,
+          }}
        >
-          {children}
-          <DateWrapper
-            open={_open ?? open}
-            anchor={wrapperRef}
-            onClose={() => onClose?.() ?? setOpen(false)}
-            locale={locale}
-            variant={mode}
-            popoverProps={{
-              id: ariaId,
-              strategy,
-            }}
+          <div
+            ref={mergedRef}
+            className={cl("navds-date__wrapper", wrapperClassName)}
          >
-            {DatePickerComponent}
-          </DateWrapper>
-        </div>
-      </DateContext.Provider>
+            {children}
+            <DateWrapper
+              open={_open ?? open}
+              anchor={wrapperRef}
+              onClose={() => onClose?.() ?? setOpen(false)}
+              locale={locale}
+              translate={translate}
+              variant={mode}
+              popoverProps={{
+                id: ariaId,
+                strategy,
+              }}
+            >
+              {DatePickerComponent}
+            </DateWrapper>
+          </div>
+        </DateInputContext.Provider>
+      </DateTranslationContextProvider>
    );
  },
 ) as DatePickerComponent;
@@ -3,7 +3,9 @@ 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, useI18n } from "../../util/i18n/i18n.context";
+import { DateTranslationContextProvider } from "../context";
+import { getLocaleFromString, getTranslations } from "../utils";
 import Caption from "./parts/Caption";
 import DropdownCaption from "./parts/DropdownCaption";
 import { HeadRow } from "./parts/HeadRow";
@@ -49,7 +51,8 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
  (
    {
      className,
-      locale = "nb",
+      locale,
+      translations,
      dropdownCaption,
      disabled = [],
      disableWeekends = false,
@@ -63,6 +66,12 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
    },
    ref,
  ) => {
+    const translate = useI18n(
+      "DatePicker",
+      translations,
+      getTranslations(locale),
+    );
+    const langProviderLocale = useDateLocale();
    const [selectedDates, setSelectedDates] = React.useState<
      Date | Date[] | DateRange | undefined
    >(defaultSelected);
@@ -82,42 +91,43 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
        ref={ref}
        className={cl("navds-date__standalone-wrapper", className)}
      >
-        <DayPicker
-          locale={getLocaleFromString(locale)}
-          mode={mode}
-          onSelect={handleSelect}
-          selected={selected ?? selectedDates}
-          components={{
-            Caption: dropdownCaption ? DropdownCaption : Caption,
-            Head: TableHead,
-            HeadRow,
-            WeekNumber,
-            Row,
-          }}
-          className="navds-date"
-          classNames={{ vhidden: "navds-sr-only" }}
-          disabled={(day) => {
-            return (
-              (disableWeekends && isWeekend(day)) || isMatch(day, disabled)
-            );
-          }}
-          weekStartsOn={1}
-          initialFocus={false}
-          labels={labels as any}
-          modifiers={{
-            weekend: (day) => disableWeekends && isWeekend(day),
-          }}
-          modifiersClassNames={{
-            weekend: "rdp-day__weekend",
-          }}
-          showWeekNumber={showWeekNumber}
-          onWeekNumberClick={
-            mode === "multiple" ? onWeekNumberClick : undefined
-          }
-          fixedWeeks={fixedWeeks}
-          showOutsideDays
-          {...omit(rest, ["children", "id"])}
-        />
+        <DateTranslationContextProvider translate={translate}>
+          <DayPicker
+            locale={locale ? getLocaleFromString(locale) : langProviderLocale}
+            mode={mode}
+            onSelect={handleSelect}
+            selected={selected ?? selectedDates}
+            components={{
+              Caption: dropdownCaption ? DropdownCaption : Caption,
+              Head: TableHead,
+              HeadRow,
+              WeekNumber,
+              Row,
+            }}
+            className="navds-date"
+            classNames={{ vhidden: "navds-sr-only" }}
+            disabled={(day) => {
+              return (
+                (disableWeekends && isWeekend(day)) || isMatch(day, disabled)
+              );
+            }}
+            weekStartsOn={1}
+            initialFocus={false}
+            modifiers={{
+              weekend: (day) => disableWeekends && isWeekend(day),
+            }}
+            modifiersClassNames={{
+              weekend: "rdp-day__weekend",
+            }}
+            showWeekNumber={showWeekNumber}
+            onWeekNumberClick={
+              mode === "multiple" ? onWeekNumberClick : undefined
+            }
+            fixedWeeks={fixedWeeks}
+            showOutsideDays
+            {...omit(rest, ["children", "id"])}
+          />
+        </DateTranslationContextProvider>
      </div>
    );
  },
@@ -3,6 +3,7 @@ import { CaptionProps, useDayPicker, useNavigation } from "react-day-picker";
 import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
 import { Button } from "../../../button";
 import { Label } from "../../../typography";
+import { useDateTranslationContext } from "../../context";
 import WeekRow from "./WeekRow";

 /**
@@ -11,13 +12,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 = useDateTranslationContext().translate;

  return (
    <>
@@ -26,7 +24,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 +38,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 { useDateTranslationContext } from "../../context";
+import { getMonths, 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 = useDateTranslationContext().translate;

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

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

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

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

 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;
-  const {
-    onWeekNumberClick,
-    styles,
-    classNames,
-    locale: { code },
-  } = useDayPicker();
-
-  const weekLabel = labelWeekNumber({
-    week: Number(weekNumber),
-    localeCode: code,
-  });
+function WeekNumber({
+  number: weekNumber,
+  dates,
+}: WeekNumberProps): JSX.Element {
+  const { onWeekNumberClick, styles, classNames } = useDayPicker();
+  const themeContext = UNSAFE_useAkselTheme(false);
+  const translate = useDateTranslationContext().translate;

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

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

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

@@ -3,13 +3,13 @@ import { useDayPicker } from "react-day-picker";
 import { Show } from "../../../layout/responsive";
 import { Detail } from "../../../typography";
 import { useId } from "../../../util/hooks";
+import { useDateTranslationContext } from "../../context";
 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 = useDateTranslationContext().translate;
  const labelId = useId();

  if (!onWeekNumberClick) {
@@ -32,7 +32,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 +42,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,4 +1,5 @@
 import { DateRange, DayPickerBase, Matcher } from "react-day-picker";
+import { ComponentTranslation } from "../../util/i18n/i18n.types";

 export type SingleMode = {
  mode?: "single";
@@ -52,8 +53,15 @@ export interface DatePickerDefaultProps
  /**
   * Changes datepicker locale
   * @default "nb" (norsk bokmål)
+   * @deprecated Use `<Provider />`-component
   */
  locale?: "nb" | "nn" | "en";
+  /**
+   * i18n-API for customizing texts and labels.
+   *
+   * **NB: If you need to change the language, use [Provider](https://aksel.nav.no/komponenter/core/provider#84d7ea5ec517) instead.**
+   */
+  translations?: ComponentTranslation<"DatePicker">;
  /**
   * The earliest day to start navigation.
   */
@@ -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,7 @@ import { useDayPicker } from "react-day-picker";
 import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
 import { Button } from "../../button";
 import { Select } from "../../form/select";
-import { useSharedMonthContext } from "../context";
-import { labelNextYear, labelPrevYear } from "../utils";
+import { useDateTranslationContext, useSharedMonthContext } from "../context";

 export const MonthCaption = () => {
  const {
@@ -20,8 +19,8 @@ export const MonthCaption = () => {
    formatters: { formatYearCaption },
    locale,
  } = useDayPicker();
-
  const { hasDropdown, year, toYear } = useSharedMonthContext();
+  const translate = useDateTranslationContext().translate;

  const years: Date[] = [];

@@ -38,8 +37,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 +63,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 +91,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,10 +3,15 @@ import React, { forwardRef, useState } from "react";
 import { DayPickerProvider } from "react-day-picker";
 import { useId } from "../../util/hooks";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
-import { DateContext, SharedMonthProvider } from "../context";
+import { useDateLocale, useI18n } from "../../util/i18n/i18n.context";
+import {
+  DateInputContext,
+  DateTranslationContextProvider,
+  SharedMonthProvider,
+} from "../context";
 import { MonthPickerInput } from "../parts/DateInput";
 import { DateWrapper } from "../parts/DateWrapper";
-import { getLocaleFromString } from "../utils";
+import { getLocaleFromString, getTranslations } from "../utils";
 import MonthCaption from "./MonthCaption";
 import MonthPickerStandalone from "./MonthPickerStandalone";
 import MonthSelector from "./MonthSelector";
@@ -67,7 +72,8 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
      id,
      onClose,
      onOpenToggle,
-      locale = "nb",
+      locale,
+      translations,
      onMonthSelect,
      className,
      wrapperClassName,
@@ -78,6 +84,12 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
    },
    ref,
  ) => {
+    const translate = useI18n(
+      "DatePicker",
+      translations,
+      getTranslations(locale),
+    );
+    const langProviderLocale = useDateLocale();
    const ariaId = useId(id);
    const [open, setOpen] = useState(_open ?? false);

@@ -101,59 +113,64 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
    }

    return (
-      <DateContext.Provider
-        value={{
-          open: _open ?? open,
-          onOpen: () => {
-            setOpen((x) => !x);
-            onOpenToggle?.();
-          },
-          ariaId,
-          defined: true,
-        }}
-      >
-        <div
-          ref={mergedRef}
-          className={cl("navds-date__wrapper", wrapperClassName)}
+      <DateTranslationContextProvider translate={translate}>
+        <DateInputContext.Provider
+          value={{
+            open: _open ?? open,
+            onOpen: () => {
+              setOpen((x) => !x);
+              onOpenToggle?.();
+            },
+            ariaId,
+            defined: true,
+          }}
        >
-          {children}
-          <DateWrapper
-            open={_open ?? open}
-            anchor={wrapperRef}
-            onClose={() => onClose?.() ?? setOpen(false)}
-            locale={locale}
-            variant="month"
-            popoverProps={{
-              id: ariaId,
-              strategy,
-            }}
+          <div
+            ref={mergedRef}
+            className={cl("navds-date__wrapper", wrapperClassName)}
          >
-            <DayPickerProvider
-              initialProps={{
-                locale: getLocaleFromString(locale),
-                selected: selected ?? selectedMonth,
-                toDate,
-                fromDate,
-                month: selected ?? selectedMonth,
+            {children}
+            <DateWrapper
+              open={_open ?? open}
+              anchor={wrapperRef}
+              onClose={() => onClose?.() ?? setOpen(false)}
+              locale={locale}
+              translate={translate}
+              variant="month"
+              popoverProps={{
+                id: ariaId,
+                strategy,
              }}
            >
-              <div className={cl("rdp-month", className)}>
-                <SharedMonthProvider
-                  dropdownCaption={dropdownCaption}
-                  disabled={disabled}
-                  selected={selected ?? selectedMonth}
-                  onSelect={handleSelect}
-                  year={year}
-                  onYearChange={onYearChange}
-                >
-                  <MonthCaption />
-                  <MonthSelector />
-                </SharedMonthProvider>
-              </div>
-            </DayPickerProvider>
-          </DateWrapper>
-        </div>
-      </DateContext.Provider>
+              <DayPickerProvider
+                initialProps={{
+                  locale: locale
+                    ? getLocaleFromString(locale)
+                    : langProviderLocale,
+                  selected: selected ?? selectedMonth,
+                  toDate,
+                  fromDate,
+                  month: selected ?? selectedMonth,
+                }}
+              >
+                <div className={cl("rdp-month", className)}>
+                  <SharedMonthProvider
+                    dropdownCaption={dropdownCaption}
+                    disabled={disabled}
+                    selected={selected ?? selectedMonth}
+                    onSelect={handleSelect}
+                    year={year}
+                    onYearChange={onYearChange}
+                  >
+                    <MonthCaption />
+                    <MonthSelector />
+                  </SharedMonthProvider>
+                </div>
+              </DayPickerProvider>
+            </DateWrapper>
+          </div>
+        </DateInputContext.Provider>
+      </DateTranslationContextProvider>
    );
  },
 ) as MonthPickerComponent;
@@ -1,8 +1,12 @@
 import cl from "clsx";
 import React, { forwardRef, useState } from "react";
 import { DayPickerProvider } from "react-day-picker";
-import { SharedMonthProvider } from "../context";
-import { getLocaleFromString } from "../utils";
+import { useDateLocale, useI18n } from "../../util/i18n/i18n.context";
+import {
+  DateTranslationContextProvider,
+  SharedMonthProvider,
+} from "../context";
+import { getLocaleFromString, getTranslations } from "../utils";
 import MonthCaption from "./MonthCaption";
 import MonthSelector from "./MonthSelector";
 import { MonthPickerProps } from "./types";
@@ -34,7 +38,8 @@ export const MonthPickerStandalone = forwardRef<
      disabled = [],
      selected,
      className,
-      locale = "nb",
+      locale,
+      translations,
      onMonthSelect,
      defaultSelected,
      year,
@@ -42,6 +47,12 @@ export const MonthPickerStandalone = forwardRef<
    },
    ref,
  ) => {
+    const translate = useI18n(
+      "DatePicker",
+      translations,
+      getTranslations(locale),
+    );
+    const langProviderLocale = useDateLocale();
    const [selectedMonth, setSelectedMonth] = useState<Date | undefined>(
      defaultSelected,
    );
@@ -58,29 +69,31 @@ export const MonthPickerStandalone = forwardRef<

    return (
      <div ref={ref} className={cl("navds-date__wrapper", className)}>
-        <DayPickerProvider
-          initialProps={{
-            locale: getLocaleFromString(locale),
-            selected: selected ?? selectedMonth,
-            toDate,
-            fromDate,
-            month: selected ?? selectedMonth,
-          }}
-        >
-          <div className="navds-date rdp-month">
-            <SharedMonthProvider
-              dropdownCaption={dropdownCaption}
-              disabled={disabled}
-              selected={selected ?? selectedMonth}
-              onSelect={handleSelect}
-              year={year}
-              onYearChange={onYearChange}
-            >
-              <MonthCaption />
-              <MonthSelector />
-            </SharedMonthProvider>
-          </div>
-        </DayPickerProvider>
+        <DateTranslationContextProvider translate={translate}>
+          <DayPickerProvider
+            initialProps={{
+              locale: locale ? getLocaleFromString(locale) : langProviderLocale,
+              selected: selected ?? selectedMonth,
+              toDate,
+              fromDate,
+              month: selected ?? selectedMonth,
+            }}
+          >
+            <div className="navds-date rdp-month">
+              <SharedMonthProvider
+                dropdownCaption={dropdownCaption}
+                disabled={disabled}
+                selected={selected ?? selectedMonth}
+                onSelect={handleSelect}
+                year={year}
+                onYearChange={onYearChange}
+              >
+                <MonthCaption />
+                <MonthSelector />
+              </SharedMonthProvider>
+            </div>
+          </DayPickerProvider>
+        </DateTranslationContextProvider>
      </div>
    );
  },
@@ -1,3 +1,4 @@
+import { ComponentTranslation } from "../../util/i18n/i18n.types";
 import { Matcher } from "../utils";

 export interface MonthPickerProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -25,8 +26,15 @@ export interface MonthPickerProps extends React.HTMLAttributes<HTMLDivElement> {
  /**
   * Changes monthpicker locale
   * @default "nb" (norsk bokmål)
+   * @deprecated Use `<Provider />`-component
   */
  locale?: "nb" | "nn" | "en";
+  /**
+   * i18n-API for customizing texts and labels.
+   *
+   * **NB: If you need to change the language, use [Provider](https://aksel.nav.no/komponenter/core/provider#84d7ea5ec517) instead.**
+   */
+  translations?: ComponentTranslation<"DatePicker">;
  /**
   * Display dropdown for choosing year. Needs `fromDate` + `toDate` to work.
   * @default false
@@ -5,7 +5,7 @@ import { ReadOnlyIcon } from "../../form/ReadOnlyIcon";
 import { FormFieldProps, useFormField } from "../../form/useFormField";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { omit } from "../../util";
-import { useDateInputContext } from "../context";
+import { useDateInputContext, useDateTranslationContext } from "../context";

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

  const buttonRef = useRef<HTMLButtonElement>(null);
+  const translate = useDateTranslationContext().translate;

  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 +138,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,24 @@ 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 { TFunction, useI18n } from "../../util/i18n/i18n.context";
+import { getGlobalTranslations } 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;
+  translate: TFunction<"DatePicker">;
  variant: "single" | "multiple" | "range" | "month";
  popoverProps: {
    id?: string;
@@ -26,9 +36,11 @@ export const DateWrapper = ({
  onClose,
  anchor,
  locale,
+  translate,
  variant,
  popoverProps,
 }: DateWrapperProps) => {
+  const translateGlobal = useI18n("global", getGlobalTranslations(locale));
  const modalRef = useRef<HTMLDialogElement>(null);
  const isInModal = useModalContext(false) !== undefined;
  const hideModal =
@@ -61,7 +73,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 +88,7 @@ export const DateWrapper = ({
          size="small"
          type="button"
        >
-          {modalCloseButtonLabel(locale)}
+          {translateGlobal("close")}
        </Button>
      </div>
    </Modal>
@@ -1,18 +1,15 @@
 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,
+  getGlobalTranslations,
+} 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,35 @@ export const getLocaleFromString = (locale: "nb" | "nn" | "en" = "nb") => {
      return nb;
  }
 };
+
+/**
+ * @private
+ * Temporary for backwards compatibility with locale prop. Can be removed when locale prop has been removed.
+ */
+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;
+  }
+};
+
+/**
+ * @private
+ * Temporary for backwards compatibility with locale prop. Can be removed when locale prop has been removed.
+ */
+export const getGlobalTranslations = (locale: string | undefined) => {
+  switch (locale) {
+    case "nn":
+      return nn_translations.global;
+    case "en":
+    case "en-GB":
+      return en_translations.global;
+    default:
+      return undefined;
+  }
+};
@@ -27,21 +27,21 @@ const ComboboxWrapper = ({
  const wrapperRef = useRef<HTMLDivElement | null>(null);
  const [hasFocusWithin, setHasFocusWithin] = useState(false);

-  function onFocusInsideWrapper(e) {
+  function onFocusInsideWrapper(event: React.FocusEvent<HTMLDivElement>) {
    if (
-      !wrapperRef.current?.contains(e.relatedTarget) &&
-      toggleOpenButtonRef?.current !== e.target
+      !wrapperRef.current?.contains(event.relatedTarget) &&
+      toggleOpenButtonRef?.current !== event.target
    ) {
      toggleIsListOpen(true);
      setHasFocusWithin(true);
    }
  }

-  function onBlurWrapper(e) {
-    if (!wrapperRef.current?.contains(e.relatedTarget)) {
+  function onBlurWrapper(event: React.FocusEvent<HTMLDivElement>) {
+    if (!wrapperRef.current?.contains(event.relatedTarget)) {
      toggleIsListOpen(false);
      setHasFocusWithin(false);
-      clearInput(e);
+      clearInput(event);
    }
  }

@@ -2,6 +2,7 @@ import cl from "clsx";
 import React from "react";
 import { PlusIcon } from "@navikt/aksel-icons";
 import { BodyShort, Label } from "../../../typography";
+import { useI18n } from "../../../util/i18n/i18n.context";
 import { useInputContext } from "../Input/Input.context";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import { isInList, toComboboxOption } from "../combobox-utils";
@@ -22,6 +23,7 @@ const AddNewOption = () => {
  } = useFilteredOptionsContext();
  const { isMultiSelect, selectedOptions, toggleOption } =
    useSelectedOptionsContext();
+  const translate = useI18n("Combobox");
  return (
    <li
      tabIndex={-1}
@@ -51,7 +53,7 @@ const AddNewOption = () => {
    >
      <PlusIcon aria-hidden />
      <BodyShort size={size}>
-        Legg til{" "}
+        {translate("addOption")}{" "}
        <Label as="span" size={size}>
          &#8220;{searchTerm}&#8221;
        </Label>
@@ -26,12 +26,12 @@ const FilteredOptions = () => {
  const { maxSelected } = useSelectedOptionsContext();

  const shouldRenderNonSelectables =
-    maxSelected?.isLimitReached || // Render maxSelected message
+    maxSelected.isLimitReached || // Render maxSelected message
    isLoading || // Render loading message
    (!isLoading && filteredOptions.length === 0 && !allowNewValues); // Render no hits message

  const shouldRenderFilteredOptionsList =
-    (allowNewValues && isValueNew && !maxSelected?.isLimitReached) || // Render add new option
+    (allowNewValues && isValueNew && !maxSelected.isLimitReached) || // Render add new option
    filteredOptions.length > 0; // Render filtered options

  return (
@@ -45,7 +45,7 @@ const FilteredOptions = () => {
    >
      {shouldRenderNonSelectables && (
        <div className="navds-combobox__list_non-selectables" role="status">
-          {maxSelected?.isLimitReached && <MaxSelectedMessage />}
+          {maxSelected.isLimitReached && <MaxSelectedMessage />}
          {isLoading && <LoadingMessage />}
          {!isLoading && filteredOptions.length === 0 && !allowNewValues && (
            <NoSearchHitsMessage />
@@ -60,7 +60,7 @@ const FilteredOptions = () => {
          role="listbox"
          className="navds-combobox__list-options"
        >
-          {isValueNew && !maxSelected?.isLimitReached && allowNewValues && (
+          {isValueNew && !maxSelected.isLimitReached && allowNewValues && (
            <AddNewOption />
          )}
          {filteredOptions.map((option) => (
@@ -39,7 +39,7 @@ const FilteredOptionsItem = ({ option }: { option: ComboboxOption }) => {
  const [start, highlight, end] = useTextHighlight(option.label, searchTerm);

  const isDisabled = (_option: ComboboxOption) =>
-    maxSelected?.isLimitReached && !isInList(_option.value, selectedOptions);
+    maxSelected.isLimitReached && !isInList(_option.value, selectedOptions);

  return (
    <li
@@ -1,5 +1,6 @@
 import React from "react";
 import { Loader } from "../../../loader";
+import { useI18n } from "../../../util/i18n/i18n.context";
 import { useInputContext } from "../Input/Input.context";
 import filteredOptionsUtil from "./filtered-options-util";

@@ -7,12 +8,13 @@ const LoadingMessage = () => {
  const {
    inputProps: { id },
  } = useInputContext();
+  const translate = useI18n("Combobox");
  return (
    <div
      className="navds-combobox__list-item--loading"
      id={filteredOptionsUtil.getIsLoadingId(id)}
    >
-      <Loader title="Søker..." />
+      <Loader title={translate("loading")} />
    </div>
  );
 };