Version Packages (#3619)

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

.github/actions/build-website/action.yml

@@ -19,6 +19,10 @@ inputs:
   sanity_read_no_drafts_token:
     description: "Sanity read-only token allowing only published documents"
     required: true
+  production:
+    description: "Toggle to differentiate production build (inject stuff based on this)"
+    default: false
+    required: false
 
 runs:
   using: "composite"
@@ -38,6 +42,12 @@ runs:
         echo "USE_CDN_ASSETS=true" >> aksel.nav.no/website/.env
       shell: bash
 
+    - name: Set production env var
+      if: ${{ inputs.production == 'true' }}
+      run: |
+        echo "PRODUCTION=true" >> aksel.nav.no/website/.env
+      shell: bash
+
     - name: Build Next.js website
       run: yarn build:next
       env:

.github/workflows/aksel-prod.yml

@@ -46,6 +46,7 @@ jobs:
         uses: ./.github/actions/build-website
         with:
           use_cdn_assets: true
+          production: true
           npm_auth_token: ${{ secrets.READER_TOKEN }}
           nais_id_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}
           nais_project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}

.storybook/docs/PilotMigration.mdx

@@ -4,22 +4,13 @@ import { Markdown, Meta } from "@storybook/blocks";
 
 # Migration
 
-## Missing features
-
-Some components are not yet implemented in the new system. These are:
-
-- ConfirmationPanel
-- Panel
-- Dropdown
-
 ## Tokens
 
 [See tokens docs here](https://main--66b4b3beb91603ed0ab5c45e.chromatic.com/?path=/docs/docs-become-a-pilot-team-4-tokens--docs).
 
 ## CSS
 
-- Most of our CSS is re-written. This could potentially affect most custom overrides targeting `.navds`-classes.
-- You will not be able to use the old CSS and the new CSS at the same time.
+- Most of our CSS is re-written. This includes renaming all `.navds`-classNames to `.aksel`. This will affect most custom overrides targeting `.navds`-classes.
 
 As we strongly recommend avoiding custom
 overrides where possible, we would like to encourage opening an
@@ -40,6 +31,15 @@ All component-spesific tokens are no longer supported. That means all tokens lik
 
 All component-based tokens are prefixed with `--ac`, so a global search in your codebase should find all of them.
 
+## Tailwind CSS
+
+Since our Tailwind CSS config is tied to our tokens, most changes made to the tokens will affect the Tailwind CSS config.
+We have decided to prefix all our classes with `ax-` in the new config, so it should be possible to use both packages at the same time. We will develop tooling to hopefuly make the migrations easier in the future.
+
+### Removed classes
+
+z-index, maxWidth and spacing classes are removed from the new config.
+
 ## React
 
 We have made some updates to `@navikt/ds-react` that you should be aware of before testing.
@@ -64,9 +64,9 @@ custom button.
 
 Component got a complete overhaul. Custom overrides might break.
 
-### Popover, HelpText, Tooltip
+### Popover, HelpText
 
-`arrow`-prop is removed. All of our floating dialog-elements now come without arrow.
+`arrow`-prop is removed. All of our floating dialog-elements except for `Tooltip` now comes without arrow.
 If you have custom `offset`-values, you might have to update them to accommodate this.
 
 ### Pagination

.storybook/docs/PilotSetup.mdx

@@ -6,18 +6,18 @@ import { Markdown, Meta } from "@storybook/blocks";
 
 ## Clean project
 
-For new projects, setup is just as easy as before, but now requires `Theme`-component to be wrapped around your app.
+For new projects, setup is just as easy as before, but now requires a `Theme`-component to be wrapped around your app.
 The component acts as a local feature-flag for the new implementation, with the added benefit of being able to switch between light and dark mode for you.
 
 Steps:
 
 - 1. Import new CSS `@navikt/ds-css/darkside`
-- 2. Import `Theme`-component from `@navikt/ds-react`
+- 2. Import `Theme`-component from `@navikt/ds-react/Theme`
 - 3. Wrap your app in the `Theme`-component. You do not have to set the theme, but it defaults to `light`.
 
 ```tsx
 import "@navikt/ds-css/darkside";
-import { Theme } from "@navikt/ds-react";
+import { Theme } from "@navikt/ds-react/Theme";
 
 export const App = () => (
   <Theme theme="light">
@@ -32,7 +32,7 @@ If you are not using any of our React-components, you can still switch between t
 
 ## Theme switching
 
-The `Theme`-component has a `theme`-prop that can be set to either `light` or `dark`. This only sets a `class` on the element of `light` or `dark`, and the rest is handled by the CSS.
+The `Theme`-component has a `theme`-prop that can be set to either `light` or `dark`. This only sets a `class` on the element of `light` or `dark` (in addition to a `aksel-theme` class), and the rest is handled by the CSS.
 
 You have the option of using `hasBackground` (defaults to true) to make `Theme` include a built on default background.
 
@@ -83,11 +83,11 @@ For SCSS, Less and JS they are also available under the paths
 
 ## I want to test the new React-changes
 
-For the new system to work with our components, you will have to use the new `Theme`-component, and import the new CSS from `ds-css/darkside`
+For the new system to work with our components, you will have to use the new `Theme`-component, and import the new CSS from `@navikt/ds-css/darkside`
 
 ```tsx
-import "@navikt/ds-css/darkside;";
-import { Theme } from "@navikt/ds-react";
+import "@navikt/ds-css/darkside";
+import { Theme } from "@navikt/ds-react/Theme";
 
 export const App = () => (
   <Theme theme="light">
@@ -96,7 +96,30 @@ export const App = () => (
 );
 ```
 
-You will not be able to use the old CSS and the new CSS at the same time.
+You will have to check on all your custom overrides when making this switch.
+
+### Partial update
+
+You can migrate parts of your application to use the new CSS classes without having to migrate everything at once.
+
+```tsx
+// Old setup
+import "@navikt/ds-css/darkside";
+// New setup
+import "@navikt/ds-css/darkside";
+import { Theme } from "@navikt/ds-react/Theme";
+
+export const App = () => (
+  <div>
+    <StillOnOldCSSComponent>
+    /* Only this part of your app now uses new styling */
+    <Theme>
+      <YourApp />
+    </Theme>
+  </div>
+);
+```
+
 You will have to check on all your custom overrides when making this switch.
 
 ## I have to make some custom changes in darkmode
@@ -117,3 +140,12 @@ Since our implementation is based on CSS, you can easily make custom adjustments
   }
 }
 ```
+
+## Tailwind CSS
+
+```
+// Tailwind v3
+module.exports = {
+  presets: [require("@navikt/ds-tailwind/darkside-tw3")],
+}
+```

.storybook/docs/PilotsChangelog.mdx

@@ -4,4 +4,25 @@ import { Meta, Title } from "@storybook/blocks";
 
 # Darkside changelog
 
-Nothing to see here yet.
+## v7.16 (03.03.25)
+
+To allow loading old and new CSS files that the same time, we have now renamed all classes to start with `.aksel` instead of `.navds`.
+Every React component has this now feature-flagged behind using the new `Theme`-component.
+
+- **With `<Theme />`**: All components uses `.aksel`-classes internally.
+- **Without `<Theme />`**: All components uses `.navds`-classes internally like before.
+
+This means you can now migrate parts of your application to use the new CSS classes without having to migrate everything at once.
+
+```
+// MyComponent.tsx
+<div>
+  // Uses old CSS
+  <Button>Click me</Button>
+
+  // Uses new CSS
+  <Theme>
+    <Button>Click me</Button>
+  </Theme>
+</div>
+```

.storybook/docs/PilotsIntro.mdx

@@ -44,6 +44,7 @@ We welcome all forms of feedback:
 - **Design tokens**: A complete re-write of our design tokens to allow for dark mode.
 - **Dark mode**: A new dark mode implementation.
 - **Updated CSS**: Now uses new tokens, built-in CSS-layers support and most components are re-written.
+- **Updated Tailwind CSS config**: Now uses new tokens, now comes with built-in `ax`-prefix for easier separation between Aksel and your own config.
 - **Updated components**: Components use the new tokens and CSS.
 - **New Theme-component**: A new `<Theme/>`-component to handle the theming-switch locally.
 - **Updated documentation**: Updated documentation for the new implementation.
@@ -54,9 +55,14 @@ As we go, we will add more documentation to help you get started with the new im
 
 - [Design i light og dark-mode](https://aksel.nav.no/god-praksis/artikler/design-i-dark-mode-og-light-mode)
 
+### Demo page
+
+We have a demo page to show off some of the new features and tokens. [You can find it here](https://aksel-referansesider.ansatt.dev.nav.no/aktivitetsplan/).
+We recommend using "inspect-tool" in browser to get a feel for the new tokens and CSS.
+
 ## How testing could affect your application
 
-All the changes are **opt in**, meaning you can choose to use nothing, some parts of the new implementation, or go all inn.
+All the changes are **opt in**, meaning you can choose to use nothing, some parts of the new implementation, or go all-in.
 You will still be able to recieve updates to the old implementation while we are in the testing phase.
 
 ### Tokens
@@ -67,7 +73,7 @@ This includes new backgrounds, text-colors, border-colors and updated spacing-to
 - All tokens have a new prefix `--ax` to avoid conflicts with old tokens.
 - You will be able to use the new tokens at the same time as the old tokens.
 - All background, text-colors and border-colors have new names and "concepts" to learn. Migration will not be a quick one to one with old system.
-- New spacing tokens are now named `space` and based on `px` values.
+- New spacing tokens are now named `space` and based on `px` values (most devs think and deal in `px` values first, no more on-the-fly mental arithmetic! WYSIWYG).
 
 ### CSS
 
@@ -75,9 +81,13 @@ We have updated our CSS to be based on the new tokens for theming.
 
 - Most of our CSS is re-written.
 - All custom overrides targeting `.navds`-classes might have to be updated locally.
-- You will not be able to use the old CSS and the new CSS at the same time.
 - Component-based tokens are no longer avaliable.
 
+### Tailwind CSS
+
+We have made a new Tailwind CSS config based on the new tokens. Based on previous iterations, we have decided to try prefixing all our classes with `ax-`.
+While this will be a little more verbose, it makes it easier to separate your own config from ours, and hopefully makes it easier to maintain.
+
 ### React components
 
 We have made some prop-changes to some components to facilitate the new theming and updated CSS. You can read more about them under `migration` in the sidebar.

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @navikt/aksel-icons
 
+## 7.16.0
+
+## 7.15.0
+
+## 7.14.3
+
+## 7.14.2
+
+## 7.14.1
+
+## 7.14.0
+
+### Minor Changes
+
+- Icons: :tada: New icons `LineHeight`, `SpaceHorizontal` and `SpaceVertical`. ([#3587](https://github.com/navikt/aksel/pull/3587))
+
+## 7.13.0
+
+### Minor Changes
+
+- Icons: :tada: New icons `ExpandVertical` and `QuestionmarkCircle` ([#3583](https://github.com/navikt/aksel/pull/3583))
+
 ## 7.12.2
 
 ## 7.12.1

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

@@ -12,5 +12,5 @@ keywords:
   - struktur
   - innhold
 variant: Stroke
-updated_at: 05.01.2024
+updated_at: 10.02.2025
 created_at: 07.03.2023

@navikt/aksel-icons/icons/ExpandVertical.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="M12.5303 2.21967C12.2374 1.92678 11.7626 1.92678 11.4697 2.21967L7.46967 6.21967C7.17678 6.51256 7.17678 6.98744 7.46967 7.28033C7.76256 7.57322 8.23744 7.57322 8.53033 7.28033L11.25 4.56066L11.25 10C11.25 10.4142 11.5858 10.75 12 10.75C12.4142 10.75 12.75 10.4142 12.75 10L12.75 4.56066L15.4697 7.28033C15.7626 7.57322 16.2374 7.57322 16.5303 7.28033C16.8232 6.98744 16.8232 6.51256 16.5303 6.21967L12.5303 2.21967ZM11.4697 21.7803C11.7626 22.0732 12.2374 22.0732 12.5303 21.7803L16.5303 17.7803C16.8232 17.4874 16.8232 17.0126 16.5303 16.7197C16.2374 16.4268 15.7626 16.4268 15.4697 16.7197L12.75 19.4393L12.75 14C12.75 13.5858 12.4142 13.25 12 13.25C11.5858 13.25 11.25 13.5858 11.25 14L11.25 19.4393L8.53033 16.7197C8.23744 16.4268 7.76256 16.4268 7.46967 16.7197C7.17678 17.0126 7.17678 17.4874 7.46967 17.7803L11.4697 21.7803Z" fill="#23262A"/>
+</svg>

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

@@ -0,0 +1,13 @@
+name: ExpandVertical
+category: Arrows
+sub_category: Arrow
+keywords:
+  - arrows
+  - piler
+  - fullscreen
+  - fullskjerm
+  - open
+  - åpne
+variant: Stroke
+updated_at: 30.01.2025
+created_at: 29.01.2025

@navikt/aksel-icons/icons/LineHeight.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="M3.75 3.25C3.33579 3.25 3 3.58579 3 4C3 4.41421 3.33579 4.75 3.75 4.75H20.25C20.6642 4.75 21 4.41421 21 4C21 3.58579 20.6642 3.25 20.25 3.25H3.75ZM12.6855 6.9454C12.5652 6.67455 12.2966 6.5 12.0002 6.5C11.7038 6.5 11.4352 6.67455 11.3148 6.9454L7.31483 15.9454C7.1466 16.3239 7.31707 16.7671 7.69558 16.9354C8.0741 17.1036 8.51732 16.9331 8.68555 16.5546L9.5987 14.5H14.4017L15.3148 16.5546C15.4831 16.9331 15.9263 17.1036 16.3048 16.9354C16.6833 16.7671 16.8538 16.3239 16.6855 15.9454L12.6855 6.9454ZM13.735 13L12.0002 9.09666L10.2654 13H13.735ZM3 20C3 19.5858 3.33579 19.25 3.75 19.25H20.25C20.6642 19.25 21 19.5858 21 20C21 20.4142 20.6642 20.75 20.25 20.75H3.75C3.33579 20.75 3 20.4142 3 20Z" fill="#23262A"/>
+</svg>

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

@@ -0,0 +1,9 @@
+name: LineHeight
+category: Interface
+sub_category: Design
+keywords:
+  - linjehøyde
+  - linjeavstand
+variant: Stroke
+updated_at: 14.02.2025
+created_at: 14.02.2025

@navikt/aksel-icons/icons/QuestionmarkCircle.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="M12 3.75C7.44365 3.75 3.75 7.44365 3.75 12C3.75 16.5563 7.44365 20.25 12 20.25C16.5563 20.25 20.25 16.5563 20.25 12C20.25 7.44365 16.5563 3.75 12 3.75ZM2.25 12C2.25 6.61522 6.61522 2.25 12 2.25C17.3848 2.25 21.75 6.61522 21.75 12C21.75 17.3848 17.3848 21.75 12 21.75C6.61522 21.75 2.25 17.3848 2.25 12ZM11.0498 16.9C11.0498 16.3753 11.4751 15.95 11.9998 15.95C12.5245 15.95 12.9498 16.3753 12.9498 16.9C12.9498 17.4247 12.5245 17.85 11.9998 17.85C11.4751 17.85 11.0498 17.4247 11.0498 16.9ZM10.25 9.5C10.25 8.5335 11.0335 7.75 12 7.75H12.1361C13.0274 7.75 13.75 8.47255 13.75 9.36387C13.75 9.85413 13.5271 10.3178 13.1443 10.6241L12.7028 10.9773C11.7845 11.7119 11.25 12.8241 11.25 14C11.25 14.4142 11.5858 14.75 12 14.75C12.4142 14.75 12.75 14.4142 12.75 14C12.75 13.2797 13.0774 12.5985 13.6398 12.1486L14.0814 11.7954C14.82 11.2045 15.25 10.3098 15.25 9.36387C15.25 7.64413 13.8559 6.25 12.1361 6.25H12C10.2051 6.25 8.75 7.70507 8.75 9.5C8.75 9.91421 9.08579 10.25 9.5 10.25C9.91421 10.25 10.25 9.91421 10.25 9.5Z" fill="#23262A"/>
+</svg>

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

@@ -0,0 +1,17 @@
+name: QuestionmarkCircle
+category: Status
+sub_category: Guidance
+keywords:
+  - assistance
+  - support
+  - information
+  - guidance
+  - question mark
+  - hjelp
+  - støtte
+  - informasjon
+  - veiledning
+  - spørsmålstegn
+variant: Stroke
+updated_at: 29.01.2025
+created_at: 29.01.2025

@navikt/aksel-icons/icons/QuestionmarkCircleFill.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="M12 21.75C17.3848 21.75 21.75 17.3848 21.75 12C21.75 6.61522 17.3848 2.25 12 2.25C6.61522 2.25 2.25 6.61522 2.25 12C2.25 17.3848 6.61522 21.75 12 21.75ZM12 7.75C11.0335 7.75 10.25 8.5335 10.25 9.5C10.25 9.91421 9.91421 10.25 9.5 10.25C9.08579 10.25 8.75 9.91421 8.75 9.5C8.75 7.70507 10.2051 6.25 12 6.25H12.1361C13.8559 6.25 15.25 7.64413 15.25 9.36387C15.25 10.3098 14.82 11.2045 14.0814 11.7954L13.6398 12.1486C13.0774 12.5985 12.75 13.2797 12.75 14C12.75 14.4142 12.4142 14.75 12 14.75C11.5858 14.75 11.25 14.4142 11.25 14C11.25 12.8241 11.7845 11.7119 12.7028 10.9773L13.1443 10.6241C13.5271 10.3178 13.75 9.85413 13.75 9.36387C13.75 8.47255 13.0274 7.75 12.1361 7.75H12ZM11.0498 16.9C11.0498 16.3753 11.4751 15.95 11.9998 15.95C12.5245 15.95 12.9498 16.3753 12.9498 16.9C12.9498 17.4247 12.5245 17.85 11.9998 17.85C11.4751 17.85 11.0498 17.4247 11.0498 16.9Z" fill="#23262A"/>
+</svg>

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

@@ -0,0 +1,17 @@
+name: QuestionmarkCircleFill
+category: Status
+sub_category: Guidance
+keywords:
+  - assistance
+  - support
+  - information
+  - guidance
+  - question mark
+  - hjelp
+  - støtte
+  - informasjon
+  - veiledning
+  - spørsmålstegn
+variant: Fill
+updated_at: 29.01.2025
+created_at: 29.01.2025

@navikt/aksel-icons/icons/SpaceHorizontal.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="M4 4C4.41421 4 4.75 4.33579 4.75 4.75V11.25H6.75C7.16421 11.25 7.5 11.5858 7.5 12C7.5 12.4142 7.16421 12.75 6.75 12.75H4.75V19.25C4.75 19.6642 4.41421 20 4 20C3.58579 20 3.25 19.6642 3.25 19.25V4.75C3.25 4.33579 3.58579 4 4 4ZM9.25 11.25C8.83579 11.25 8.5 11.5858 8.5 12C8.5 12.4142 8.83579 12.75 9.25 12.75H10.75C11.1642 12.75 11.5 12.4142 11.5 12C11.5 11.5858 11.1642 11.25 10.75 11.25H9.25ZM12.5 12C12.5 11.5858 12.8358 11.25 13.25 11.25H14.75C15.1642 11.25 15.5 11.5858 15.5 12C15.5 12.4142 15.1642 12.75 14.75 12.75H13.25C12.8358 12.75 12.5 12.4142 12.5 12ZM17.25 11.25C16.8358 11.25 16.5 11.5858 16.5 12C16.5 12.4142 16.8358 12.75 17.25 12.75H19.25V19.25C19.25 19.6642 19.5858 20 20 20C20.4142 20 20.75 19.6642 20.75 19.25V4.75C20.75 4.33579 20.4142 4 20 4C19.5858 4 19.25 4.33579 19.25 4.75V11.25H17.25Z" fill="#23262A"/>
+</svg>

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

@@ -0,0 +1,12 @@
+name: SpaceHorizontal
+category: Interface
+sub_category: Design
+keywords:
+  - avstand
+  - padding
+  - margin
+  - horisontal
+  - luft
+variant: Stroke
+updated_at: 14.02.2025
+created_at: 14.02.2025

@navikt/aksel-icons/icons/SpaceVertical.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="M4.75 3.25C4.33579 3.25 4 3.58579 4 4C4 4.41421 4.33579 4.75 4.75 4.75H11.25V6.75C11.25 7.16421 11.5858 7.5 12 7.5C12.4142 7.5 12.75 7.16421 12.75 6.75V4.75H19.25C19.6642 4.75 20 4.41421 20 4C20 3.58579 19.6642 3.25 19.25 3.25H4.75ZM12 11.5C11.5858 11.5 11.25 11.1642 11.25 10.75V9.25C11.25 8.83579 11.5858 8.5 12 8.5C12.4142 8.5 12.75 8.83579 12.75 9.25V10.75C12.75 11.1642 12.4142 11.5 12 11.5ZM11.25 14.75C11.25 15.1642 11.5858 15.5 12 15.5C12.4142 15.5 12.75 15.1642 12.75 14.75V13.25C12.75 12.8358 12.4142 12.5 12 12.5C11.5858 12.5 11.25 12.8358 11.25 13.25V14.75ZM4.75 19.25H11.25V17.25C11.25 16.8358 11.5858 16.5 12 16.5C12.4142 16.5 12.75 16.8358 12.75 17.25V19.25H19.25C19.6642 19.25 20 19.5858 20 20C20 20.4142 19.6642 20.75 19.25 20.75H4.75C4.33579 20.75 4 20.4142 4 20C4 19.5858 4.33579 19.25 4.75 19.25Z" fill="#23262A"/>
+</svg>

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

@@ -0,0 +1,12 @@
+name: SpaceVertical
+category: Interface
+sub_category: Design
+keywords:
+  - avstand
+  - padding
+  - margin
+  - vertikal
+  - luft
+variant: Stroke
+updated_at: 14.02.2025
+created_at: 14.02.2025

@navikt/aksel-icons/package.json

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

@navikt/aksel-stylelint/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @navikt/aksel-stylelint
 
+## 7.16.0
+
+## 7.15.0
+
+## 7.14.3
+
+## 7.14.2
+
+## 7.14.1
+
+## 7.14.0
+
+## 7.13.0
+
 ## 7.12.2
 
 ## 7.12.1

@navikt/aksel-stylelint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-stylelint",
-  "version": "7.12.2",
+  "version": "7.16.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.12.2",
-    "@navikt/ds-tokens": "^7.12.2",
+    "@navikt/ds-css": "^7.16.0",
+    "@navikt/ds-tokens": "^7.16.0",
     "concurrently": "9.0.1",
     "postcss-selector-parser": "^6.0.13",
     "postcss-value-parser": "^4.2.0",

@navikt/aksel/CHANGELOG.md

@@ -1,5 +1,60 @@
 # @navikt/aksel
 
+## 7.16.0
+
+### Patch Changes
+
+- Updated dependencies [[`96b9b8e`](https://github.com/navikt/aksel/commit/96b9b8e5bc8c683893e2c79e9a84ee8a6656d34c)]:
+  - @navikt/ds-css@7.16.0
+
+## 7.15.0
+
+### Minor Changes
+
+- CLI: Added primitives migration to new space-tokens. Run `npx @navikt/aksel migration primitive-spacing` to start migrating now. This update is supported for old and new (darkside) system. ([#3597](https://github.com/navikt/aksel/pull/3597))
+
+- CLI: Added js/ts migration to new space-tokens. Run `npx @navikt/aksel migration token-spacing-js` to start migrating now. This update is supported for old and new (darkside) system. ([#3597](https://github.com/navikt/aksel/pull/3597))
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@7.15.0
+
+## 7.14.3
+
+### Patch Changes
+
+- Updated dependencies [[`06fecf2`](https://github.com/navikt/aksel/commit/06fecf2af1972a5d06ea452fc5b7431b064e1fc0)]:
+  - @navikt/ds-css@7.14.3
+
+## 7.14.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@7.14.2
+
+## 7.14.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@7.14.1
+
+## 7.14.0
+
+### Patch Changes
+
+- Updated dependencies [[`08e134e`](https://github.com/navikt/aksel/commit/08e134ef3c2238d7d405b44e27edef593339406c), [`821343b`](https://github.com/navikt/aksel/commit/821343b67d702379013ceba5961a5872dca4fd1f)]:
+  - @navikt/ds-css@7.14.0
+
+## 7.13.0
+
+### Patch Changes
+
+- Updated dependencies [[`1ba5d9b`](https://github.com/navikt/aksel/commit/1ba5d9b5a2fb74ee2c1fdb8d498520ad85323a12)]:
+  - @navikt/ds-css@7.13.0
+
 ## 7.12.2
 
 ### Patch Changes

@navikt/aksel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel",
-  "version": "7.12.2",
+  "version": "7.16.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.12.2",
+    "@navikt/ds-css": "^7.16.0",
     "axios": "1.7.4",
     "chalk": "4.1.0",
     "clipboardy": "^2.3.0",

@navikt/aksel/src/codemod/migrations.ts

@@ -97,6 +97,26 @@ export const migrations: {
         "Remember to update use of `variant`-prop to match previous use of colors. If needed the component exposes css-variables for custom overrides",
     },
   ],
+  darkside: [
+    {
+      description:
+        "Updates all Primitives to use new `space`-tokens. (Works with old and new system)",
+      value: "primitive-spacing",
+      path: "darkside/primitives-spacing/spacing",
+    },
+    {
+      description:
+        "Updates css, scss and less-variables to use new `space`-tokens. (Works with old and new system)",
+      value: "token-spacing",
+      path: "darkside/token-spacing/spacing",
+    },
+    {
+      description:
+        "Updates js-tokens to use new `space`-tokens. (Works with old and new system)",
+      value: "token-spacing-js",
+      path: "darkside/token-spacing-js/spacing",
+    },
+  ],
 };
 
 export function getMigrationPath(str: string) {

@navikt/aksel/src/codemod/transforms/darkside/darkside.utils.ts

@@ -0,0 +1,168 @@
+import type {
+  API,
+  ASTPath,
+  FileInfo,
+  ImportDeclaration,
+  JSXElement,
+  JSXOpeningElement,
+} from "jscodeshift";
+
+/**
+ * Finds a component import, accounting for sub-components and aliases.
+ * Returns the local name of the component. If the component is not found, returns null.
+ */
+function findComponentImport(input: {
+  j: API["j"];
+  file: FileInfo;
+  name: string;
+  packageType?: "react" | "tokens";
+}) {
+  const { j, file, name: _name, packageType = "react" } = input;
+
+  /* Account for sub-components */
+  const name = _name.includes(".") ? _name.split(".")[0] : _name;
+
+  const root = j(file.source);
+
+  let foundName: string | null = null;
+
+  root.find(j.ImportDeclaration).forEach((path) => {
+    if (packageType === "react" && !isAkselReactImport(path)) {
+      return;
+    }
+
+    if (packageType === "tokens" && !isAkselTokensImport(path)) {
+      return;
+    }
+
+    path.node.specifiers.forEach((specifier) => {
+      if (
+        specifier.type === "ImportSpecifier" &&
+        specifier.imported.name === name
+      ) {
+        foundName = specifier.local
+          ? specifier.local.name
+          : specifier.imported.name;
+      }
+    });
+  });
+
+  return foundName;
+}
+
+/**
+ * Finds a JSX element in the AST, accounting for sub-components.
+ */
+function findJSXElement(input: {
+  root: ReturnType<API["j"]>;
+  j: API["j"];
+  name: string;
+  originalName: string;
+}) {
+  const { root, j, name, originalName } = input;
+
+  const isSubComponent = originalName.includes(".");
+
+  const openingElement = (
+    isSubComponent
+      ? {
+          name: {
+            type: "JSXMemberExpression",
+            object: {
+              name,
+            },
+            property: {
+              name: originalName.split(".")[1],
+            },
+          },
+        }
+      : {
+          name: {
+            type: "JSXIdentifier",
+            name,
+          },
+        }
+  ) as JSXOpeningElement;
+
+  return root.find(j.JSXElement, {
+    openingElement,
+  });
+}
+
+/**
+ * Finds a prop in a JSX element.
+ */
+function findProp(input: {
+  j: API["j"];
+  path: ASTPath<JSXElement>;
+  name: string;
+}) {
+  const { j, path, name } = input;
+
+  return j(path).find(j.JSXAttribute, {
+    name: {
+      name,
+    },
+  });
+}
+
+/**
+ * Checks if an import is from @navikt/ds-react.
+ */
+function isAkselReactImport(path: ASTPath<ImportDeclaration>) {
+  const importSource = path.node.source.value;
+  return (
+    typeof importSource === "string" &&
+    importSource.startsWith("@navikt/ds-react")
+  );
+}
+
+/**
+ * Checks if an import is from @navikt/ds-tokens.
+ */
+function isAkselTokensImport(path: ASTPath<ImportDeclaration>) {
+  const importSource = path.node.source.value;
+  return (
+    typeof importSource === "string" &&
+    importSource.startsWith("@navikt/ds-tokens")
+  );
+}
+
+/**
+ * Maps old spacing-token values to new space-tokens
+ */
+const legacySpacingTokenMap = new Map<string, string>([
+  ["32", "128"],
+  ["24", "96"],
+  ["20", "80"],
+  ["18", "72"],
+  ["16", "64"],
+  ["14", "56"],
+  ["12", "48"],
+  ["11", "44"],
+  ["10", "40"],
+  ["9", "36"],
+  ["8", "32"],
+  ["7", "28"],
+  ["6", "24"],
+  ["5", "20"],
+  ["4", "16"],
+  ["3", "12"],
+  ["2", "8"],
+  ["1-alt", "6"],
+  ["1", "4"],
+  ["05", "2"],
+  ["0", "0"],
+]);
+
+function convertSpacingToSpace(spacing: string): string | null {
+  return legacySpacingTokenMap.get(spacing) || null;
+}
+
+export {
+  findComponentImport,
+  findJSXElement,
+  findProp,
+  convertSpacingToSpace,
+  legacySpacingTokenMap,
+};

@navikt/aksel/src/codemod/transforms/darkside/primitives-spacing/spacing.ts

@@ -0,0 +1,113 @@
+import type { API, FileInfo } from "jscodeshift";
+import { getLineTerminator } from "../../../utils/lineterminator";
+import {
+  findComponentImport,
+  findJSXElement,
+  findProp,
+  legacySpacingTokenMap,
+} from "../darkside.utils";
+
+export default function transformer(file: FileInfo, api: API) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  /**
+   * Migrate Primitives to `space` from `spacing`
+   */
+  const primitives = [
+    "Box",
+    "Box.New",
+    "BoxNew",
+    "Hgrid",
+    "Stack",
+    "HStack",
+    "VStack",
+    "Bleed",
+  ];
+
+  const affectedProps = [
+    "padding",
+    "paddingInline",
+    "paddingBlock",
+    "margin",
+    "marginInline",
+    "marginBlock",
+    "inset",
+    "top",
+    "right",
+    "bottom",
+    "left",
+    "gap",
+  ];
+
+  for (const primitive of primitives) {
+    const name = findComponentImport({ file, j, name: primitive });
+    if (!name) {
+      continue;
+    }
+
+    findJSXElement({
+      root,
+      j,
+      name,
+      originalName: primitive,
+    }).forEach((path) => {
+      for (const prop of affectedProps) {
+        findProp({ j, path, name: prop }).forEach((attr) => {
+          const attrValue = attr.value.value;
+
+          if (attrValue.type === "StringLiteral") {
+            /* padding="32" */
+            attrValue.value = convertSpacingToSpace(attrValue.value);
+          } else if (attrValue.type === "JSXExpressionContainer") {
+            /* padding={{xs: "16", sm: "32"}} */
+            const expression = attrValue.expression;
+            if (expression.type === "ObjectExpression") {
+              /* xs, md, sm */
+              expression.properties.forEach((property) => {
+                if (property.type === "ObjectProperty") {
+                  if (property.value.type === "StringLiteral") {
+                    property.value.value = convertSpacingToSpace(
+                      property.value.value,
+                    );
+                  }
+                }
+              });
+            }
+          }
+        });
+      }
+    });
+  }
+
+  return root.toSource(getLineTerminator(file.source));
+}
+
+/**
+ * Takes an old valid spacing-token and returns the new converted space-token
+ * oldValue: "8", "8 10", "8 auto", "auto auto", "full px"
+ * @returns "space-32", "space-32 space-40"
+ */
+function convertSpacingToSpace(oldValue: string): string {
+  const spacingTokens = oldValue.split(" ");
+
+  const newSpacing = [];
+  for (const spacingToken of spacingTokens) {
+    if (spacingToken === "px") {
+      /* We replace "px" with new `space-1` */
+      newSpacing.push(`space-1`);
+    } else if (
+      ["auto", "full", "px"].includes(spacingToken) ||
+      spacingToken.startsWith("space-")
+    ) {
+      newSpacing.push(spacingToken);
+    } else if (!legacySpacingTokenMap.get(spacingToken)) {
+      console.warn(`Possibly invalid spacing token found: ${spacingToken}\n`);
+      newSpacing.push(spacingToken);
+    } else {
+      newSpacing.push(`space-${legacySpacingTokenMap.get(spacingToken)}`);
+    }
+  }
+
+  return newSpacing.join(" ");
+}

@navikt/aksel/src/codemod/transforms/darkside/primitives-spacing/tests/directImport.input.js

@@ -0,0 +1,13 @@
+import { Box } from "@navikt/ds-react/Box";
+
+export const Demo = () => (
+  <Box
+    before="before"
+    marginInline={{ xs: "auto", sm: "24", md: "32 11" }}
+    padding="24"
+    paddingInline="12 32"
+    after="after"
+  >
+    <div>ELEMENT</div>
+  </Box>
+);

@navikt/aksel/src/codemod/transforms/darkside/primitives-spacing/tests/directImport.output.js

@@ -0,0 +1,13 @@
+import { Box } from "@navikt/ds-react/Box";
+
+export const Demo = () => (
+  <Box
+    before="before"
+    marginInline={{ xs: "auto", sm: "space-96", md: "space-128 space-44" }}
+    padding="space-96"
+    paddingInline="space-48 space-128"
+    after="after"
+  >
+    <div>ELEMENT</div>
+  </Box>
+);

@navikt/aksel/src/codemod/transforms/darkside/primitives-spacing/tests/idempotent.input.js

@@ -0,0 +1,13 @@
+import { Box } from "@navikt/ds-react";
+
+export const Demo = () => (
+  <Box
+    before="before"
+    marginInline={{ xs: "auto", sm: "space-96", md: "space-128 space-44" }}
+    padding="space-96"
+    paddingInline="space-48 space-128"
+    after="after"
+  >
+    <div>ELEMENT</div>
+  </Box>
+);

@navikt/aksel/src/codemod/transforms/darkside/primitives-spacing/tests/idempotent.output.js

@@ -0,0 +1,13 @@
+import { Box } from "@navikt/ds-react";
+
+export const Demo = () => (
+  <Box
+    before="before"
+    marginInline={{ xs: "auto", sm: "space-96", md: "space-128 space-44" }}
+    padding="space-96"
+    paddingInline="space-48 space-128"
+    after="after"
+  >
+    <div>ELEMENT</div>
+  </Box>
+);

@navikt/aksel/src/codemod/transforms/darkside/primitives-spacing/tests/import.input.js

@@ -0,0 +1,13 @@
+import { Box } from "@navikt/ds-react";
+
+export const Demo = () => (
+  <Box
+    before="before"
+    marginInline={{ xs: "auto", sm: "24", md: "32 11" }}
+    padding="24"
+    paddingInline="12 32"
+    after="after"
+  >
+    <div>ELEMENT</div>
+  </Box>
+);

@navikt/aksel/src/codemod/transforms/darkside/primitives-spacing/tests/import.output.js

@@ -0,0 +1,13 @@
+import { Box } from "@navikt/ds-react";
+
+export const Demo = () => (
+  <Box
+    before="before"
+    marginInline={{ xs: "auto", sm: "space-96", md: "space-128 space-44" }}
+    padding="space-96"
+    paddingInline="space-48 space-128"
+    after="after"
+  >
+    <div>ELEMENT</div>
+  </Box>
+);

@navikt/aksel/src/codemod/transforms/darkside/primitives-spacing/tests/importAlias.input.js

@@ -0,0 +1,13 @@
+import { Box as DSBOX } from "@navikt/ds-react";
+
+export const Demo = () => (
+  <DSBOX
+    before="before"
+    marginInline={{ xs: "auto", sm: "24", md: "32 11" }}
+    padding="24"
+    paddingInline="12 32"
+    after="after"
+  >
+    <div>ELEMENT</div>
+  </DSBOX>
+);

@navikt/aksel/src/codemod/transforms/darkside/primitives-spacing/tests/importAlias.output.js

@@ -0,0 +1,13 @@
+import { Box as DSBOX } from "@navikt/ds-react";
+
+export const Demo = () => (
+  <DSBOX
+    before="before"
+    marginInline={{ xs: "auto", sm: "space-96", md: "space-128 space-44" }}
+    padding="space-96"
+    paddingInline="space-48 space-128"
+    after="after"
+  >
+    <div>ELEMENT</div>
+  </DSBOX>
+);

@navikt/aksel/src/codemod/transforms/darkside/primitives-spacing/tests/spacing.test.ts

@@ -0,0 +1,19 @@
+import { check } from "../../../../utils/check";
+
+const migration = "spacing";
+const fixtures = [
+  "import",
+  "valueAsObject",
+  "importAlias",
+  "subComponent",
+  "idempotent",
+  "directImport",
+];
+
+for (const fixture of fixtures) {
+  check(__dirname, {
+    fixture,
+    migration,
+    extension: "js",
+  });
+}

@navikt/aksel/src/codemod/transforms/darkside/primitives-spacing/tests/subComponent.input.js

@@ -0,0 +1,13 @@
+import { Box } from "@navikt/ds-react";
+
+export const Demo = () => (
+  <Box.New
+    before="before"
+    marginInline={{ xs: "auto", sm: "24", md: "32 11" }}
+    padding="24"
+    paddingInline="12 32"
+    after="after"
+  >
+    <div>ELEMENT</div>
+  </Box.New>
+);

@navikt/aksel/src/codemod/transforms/darkside/primitives-spacing/tests/subComponent.output.js

@@ -0,0 +1,13 @@
+import { Box } from "@navikt/ds-react";
+
+export const Demo = () => (
+  <Box.New
+    before="before"
+    marginInline={{ xs: "auto", sm: "space-96", md: "space-128 space-44" }}
+    padding="space-96"
+    paddingInline="space-48 space-128"
+    after="after"
+  >
+    <div>ELEMENT</div>
+  </Box.New>
+);

@navikt/aksel/src/codemod/transforms/darkside/primitives-spacing/tests/valueAsObject.input.js

@@ -0,0 +1,13 @@
+import { Box } from "@navikt/ds-react";
+
+export const Demo = () => (
+  <Box
+    before="before"
+    marginInline={{ xs: "auto", sm: mdValue, md: getMdValue() }}
+    padding="24"
+    paddingInline="12 32"
+    after="after"
+  >
+    <div>ELEMENT</div>
+  </Box>
+);

@navikt/aksel/src/codemod/transforms/darkside/primitives-spacing/tests/valueAsObject.output.js

@@ -0,0 +1,13 @@
+import { Box } from "@navikt/ds-react";
+
+export const Demo = () => (
+  <Box
+    before="before"
+    marginInline={{ xs: "auto", sm: mdValue, md: getMdValue() }}
+    padding="space-96"
+    paddingInline="space-48 space-128"
+    after="after"
+  >
+    <div>ELEMENT</div>
+  </Box>
+);

@navikt/aksel/src/codemod/transforms/darkside/token-spacing-js/spacing.ts

@@ -0,0 +1,33 @@
+import type { API, FileInfo } from "jscodeshift";
+import { getLineTerminator } from "../../../utils/lineterminator";
+import { translateToken } from "../../../utils/translate-token";
+import { findComponentImport, legacySpacingTokenMap } from "../darkside.utils";
+
+export default function transformer(file: FileInfo, api: API) {
+  const j = api.jscodeshift;
+  let root = j(file.source);
+
+  legacySpacingTokenMap.forEach((newVar, oldVar) => {
+    const oldCSSVar = translateToken(`--a-spacing-${oldVar}`, "js");
+    const newCSSVar = translateToken(`--a-space-${newVar}`, "js");
+
+    const name = findComponentImport({
+      file,
+      j,
+      name: oldCSSVar,
+      packageType: "tokens",
+    });
+
+    if (!name) {
+      return;
+    }
+
+    let code = root.toSource(getLineTerminator(file.source));
+
+    const rgx = new RegExp("(" + oldCSSVar + ")", "gm");
+    code = code.replace(rgx, newCSSVar);
+    root = j(code);
+  });
+
+  return root.toSource(getLineTerminator(file.source));
+}

@navikt/aksel/src/codemod/transforms/darkside/token-spacing-js/tests/complete.input.js

@@ -0,0 +1,88 @@
+import styled from "styled-components";
+import {
+  ASpacing16 as abc132,
+  ASpacing32,
+  ASpacing8,
+  ASpacing1Alt,
+} from "@navikt/ds-tokens/dist/tokens";
+import { BodyShort } from "@navikt/ds-react";
+
+const StyledNavLink = styled(NavLink)`
+  border-bottom: 5px solid white;
+  color: inherit;
+  text-align: center;
+  text-decoration: none;
+  width: 100%;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  padding-left: 5px;
+  padding-right: 5px;
+  :hover {
+    border-bottom: 5px solid ${abc132};
+    p {
+      color: ${ASpacing1Alt};
+    }
+  }
+  &.active {
+    background-color: ${ASpacing32};
+    border-bottom: 5px solid ${ASpacing8};
+
+    .typo-normal {
+      font-weight: bold;
+    }
+  }
+`;
+
+const StyledLenketekst = styled(BodyShort)`
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+`;
+
+const StyledTekst = styled(BodyShort)`
+  border-bottom: 5px solid white;
+  color: ${NavdsGlobalColorGray400};
+  text-align: center;
+  text-decoration: none;
+  width: 100%;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  padding-left: 5px;
+  padding-right: 5px;
+`;
+
+const Fane = ({ side, behandlingId, index, deaktivert }) => {
+  const { gåTilUrl } = useApp();
+  const fanenavn = side.navn;
+  return (
+    <>
+      {deaktivert && (
+        <StyledTekst size={"small"}>
+          {index + 1}. {fanenavn}
+        </StyledTekst>
+      )}
+      {!deaktivert && (
+        <StyledNavLink
+          key={side.navn}
+          to={`/behandling/${behandlingId}/${side.href}`}
+          onClick={(e) => {
+            e.preventDefault();
+            gåTilUrl(`/behandling/${behandlingId}/${side.href}`);
+          }}
+        >
+          <StyledLenketekst size={"small"}>
+            {index + 1}. {fanenavn}
+          </StyledLenketekst>
+        </StyledNavLink>
+      )}
+    </>
+  );
+};
+
+export default Fane;

@navikt/aksel/src/codemod/transforms/darkside/token-spacing-js/tests/complete.output.js

@@ -0,0 +1,88 @@
+import styled from "styled-components";
+import {
+  ASpace64 as abc132,
+  ASpace128,
+  ASpace32,
+  ASpace6,
+} from "@navikt/ds-tokens/dist/tokens";
+import { BodyShort } from "@navikt/ds-react";
+
+const StyledNavLink = styled(NavLink)`
+  border-bottom: 5px solid white;
+  color: inherit;
+  text-align: center;
+  text-decoration: none;
+  width: 100%;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  padding-left: 5px;
+  padding-right: 5px;
+  :hover {
+    border-bottom: 5px solid ${abc132};
+    p {
+      color: ${ASpace6};
+    }
+  }
+  &.active {
+    background-color: ${ASpace128};
+    border-bottom: 5px solid ${ASpace32};
+
+    .typo-normal {
+      font-weight: bold;
+    }
+  }
+`;
+
+const StyledLenketekst = styled(BodyShort)`
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+`;
+
+const StyledTekst = styled(BodyShort)`
+  border-bottom: 5px solid white;
+  color: ${NavdsGlobalColorGray400};
+  text-align: center;
+  text-decoration: none;
+  width: 100%;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  padding-left: 5px;
+  padding-right: 5px;
+`;
+
+const Fane = ({ side, behandlingId, index, deaktivert }) => {
+  const { gåTilUrl } = useApp();
+  const fanenavn = side.navn;
+  return (
+    <>
+      {deaktivert && (
+        <StyledTekst size={"small"}>
+          {index + 1}. {fanenavn}
+        </StyledTekst>
+      )}
+      {!deaktivert && (
+        <StyledNavLink
+          key={side.navn}
+          to={`/behandling/${behandlingId}/${side.href}`}
+          onClick={(e) => {
+            e.preventDefault();
+            gåTilUrl(`/behandling/${behandlingId}/${side.href}`);
+          }}
+        >
+          <StyledLenketekst size={"small"}>
+            {index + 1}. {fanenavn}
+          </StyledLenketekst>
+        </StyledNavLink>
+      )}
+    </>
+  );
+};
+
+export default Fane;

@navikt/aksel/src/codemod/transforms/darkside/token-spacing-js/tests/spacing.test.ts

@@ -0,0 +1,12 @@
+import { check } from "../../../../utils/check";
+
+const migration = "spacing";
+const fixtures = ["complete"];
+
+for (const fixture of fixtures) {
+  check(__dirname, {
+    fixture,
+    migration,
+    extension: "js",
+  });
+}

@navikt/aksel/src/codemod/transforms/darkside/token-spacing/spacing.ts

@@ -0,0 +1,28 @@
+import type { FileInfo } from "jscodeshift";
+import { translateToken } from "../../../utils/translate-token";
+import { legacySpacingTokenMap } from "../darkside.utils";
+
+export default function transformer(file: FileInfo) {
+  let src = file.source;
+
+  legacySpacingTokenMap.forEach((newVar, oldVar) => {
+    const oldCSSVar = `--a-spacing-${oldVar}`;
+    const newCSSVar = `--a-space-${newVar}`;
+
+    const CSSRgx = new RegExp("(" + oldCSSVar + ")", "gm");
+    const SCSSRgx = new RegExp(
+      "(\\" + translateToken(oldCSSVar, "scss") + ")",
+      "gm",
+    );
+    const LESSRgx = new RegExp(
+      "(" + translateToken(oldCSSVar, "less") + ")",
+      "gm",
+    );
+
+    src = src.replace(CSSRgx, newCSSVar);
+    src = src.replace(SCSSRgx, translateToken(newCSSVar, "scss"));
+    src = src.replace(LESSRgx, translateToken(newCSSVar, "less"));
+  });
+
+  return src;
+}

@navikt/aksel/src/codemod/transforms/darkside/token-spacing/tests/complete.input.css

@@ -0,0 +1,7 @@
+.test {
+  margin: var(--a-spacing-4);
+  padding: var(--a-spacing-16);
+  padding: var(--a-spacing-0);
+  padding: var(--a-spacing-1-alt);
+  padding: var(--a-spacing-05);
+}

@navikt/aksel/src/codemod/transforms/darkside/token-spacing/tests/complete.input.less

@@ -0,0 +1,7 @@
+.test {
+  margin: @a-spacing-4;
+  padding: @a-spacing-16;
+  padding: @a-spacing-0;
+  padding: @a-spacing-1-alt;
+  padding: @a-spacing-05;
+}

@navikt/aksel/src/codemod/transforms/darkside/token-spacing/tests/complete.input.scss

@@ -0,0 +1,7 @@
+.test {
+  margin: $a-spacing-4;
+  padding: $a-spacing-16;
+  padding: $a-spacing-0;
+  padding: common.$a-spacing-1-alt;
+  padding: common.$a-spacing-05;
+}

@navikt/aksel/src/codemod/transforms/darkside/token-spacing/tests/complete.output.css

@@ -0,0 +1,7 @@
+.test {
+  margin: var(--a-space-16);
+  padding: var(--a-space-64);
+  padding: var(--a-space-0);
+  padding: var(--a-space-6);
+  padding: var(--a-space-2);
+}

@navikt/aksel/src/codemod/transforms/darkside/token-spacing/tests/complete.output.less

@@ -0,0 +1,7 @@
+.test {
+  margin: @a-space-16;
+  padding: @a-space-64;
+  padding: @a-space-0;
+  padding: @a-space-6;
+  padding: @a-space-2;
+}

@navikt/aksel/src/codemod/transforms/darkside/token-spacing/tests/complete.output.scss

@@ -0,0 +1,7 @@
+.test {
+  margin: $a-space-16;
+  padding: $a-space-64;
+  padding: $a-space-0;
+  padding: common.$a-space-6;
+  padding: common.$a-space-2;
+}

@navikt/aksel/src/codemod/transforms/darkside/token-spacing/tests/spacing.test.ts

@@ -0,0 +1,24 @@
+import { check } from "../../../../utils/check";
+
+const migration = "spacing";
+const fixtures = ["complete"];
+
+for (const fixture of fixtures) {
+  check(__dirname, {
+    fixture,
+    migration,
+    extension: "css",
+  });
+
+  check(__dirname, {
+    fixture,
+    migration,
+    extension: "scss",
+  });
+
+  check(__dirname, {
+    fixture,
+    migration,
+    extension: "less",
+  });
+}

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @navikt/ds-css
 
+## 7.16.0
+
+### Minor Changes
+
+- Darkside: All classNames are now starts with `.aksel` instead of `.navds`. ([#3586](https://github.com/navikt/aksel/pull/3586))
+
+## 7.15.0
+
+## 7.14.3
+
+### Patch Changes
+
+- Darkside: Changed outline-offset for tabpanel from -4px to -3px. ([`06fecf2`](https://github.com/navikt/aksel/commit/06fecf2af1972a5d06ea452fc5b7431b064e1fc0))
+
+## 7.14.2
+
+## 7.14.1
+
+## 7.14.0
+
+### Minor Changes
+
+- DatePicker: Updated `date.css` to support `react-day-picker v9`. ([#3525](https://github.com/navikt/aksel/pull/3525))
+
+### Patch Changes
+
+- Darkside: Added 'arrow' back to Tooltip. ([#3589](https://github.com/navikt/aksel/pull/3589))
+
+## 7.13.0
+
+### Patch Changes
+
+- Darkside: Added support for `ConfirmationpPanel`, `Linkpanel`, `Panel` and `Dropdown`. Note that all of these will be deprecated in the future. ([#3581](https://github.com/navikt/aksel/pull/3581))
+
 ## 7.12.2
 
 ## 7.12.1

@navikt/core/css/config/tests/bundle.test.ts

@@ -6,7 +6,7 @@ import { describe, expect, test } from "vitest";
  * Darkside config might have some new files added. We can skip these when checking for equality.
  */
 const newFiles = ["theme"];
-const deprecatedFiles = ["linkpanel"];
+const deprecatedFiles: string[] = [];
 
 describe("Check that old and new (darkside) bundle matches", () => {
   test("Darkside includes the same files as old bundle", () => {

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

@@ -1,5 +1,5 @@
 /* ---------------------------- Accordion header ---------------------------- */
-.navds-accordion__header {
+.aksel-accordion__header {
   width: 100%;
   display: flex;
   justify-content: flex-start;
@@ -32,7 +32,7 @@
       display: none;
     }
 
-    > .navds-accordion__icon-wrapper {
+    > .aksel-accordion__icon-wrapper {
       background-color: var(--ax-bg-accent-strong-hover);
       color: var(--ax-text-accent-contrast);
     }
@@ -56,12 +56,12 @@
   }
 }
 
-.navds-accordion--small .navds-accordion__header {
+.aksel-accordion--small .aksel-accordion__header {
   padding-block: var(--ax-space-8);
 }
 
-.navds-accordion__header::before,
-.navds-accordion__header::after {
+.aksel-accordion__header::before,
+.aksel-accordion__header::after {
   content: "";
   display: block;
   position: absolute;
@@ -73,24 +73,24 @@
   background-color: var(--ax-border-neutral-subtleA);
 }
 
-.navds-accordion__header::after {
+.aksel-accordion__header::after {
   top: initial;
   bottom: 0;
 }
 
-.navds-accordion__item[data-expanded="true"] > .navds-accordion__header::after,
-.navds-accordion__item:not(:last-child) > .navds-accordion__header::after {
+.aksel-accordion__item[data-expanded="true"] > .aksel-accordion__header::after,
+.aksel-accordion__item:not(:last-child) > .aksel-accordion__header::after {
   display: none;
 }
 
-.navds-accordion__item[data-expanded="false"]:has(.navds-accordion__header:where(:hover, :focus-visible))
-  + .navds-accordion__item
-  > .navds-accordion__header::before {
+.aksel-accordion__item[data-expanded="false"]:has(.aksel-accordion__header:where(:hover, :focus-visible))
+  + .aksel-accordion__item
+  > .aksel-accordion__header::before {
   display: none;
 }
 
 /* ------------------------- Accordion chevron icon ------------------------- */
-.navds-accordion__icon-wrapper {
+.aksel-accordion__icon-wrapper {
   border-radius: var(--ax-border-radius-large);
   width: 22px;
   height: 22px;
@@ -99,20 +99,20 @@
   color: var(--ax-text-accent-subtle);
 }
 
-.navds-accordion__header-chevron {
+.aksel-accordion__header-chevron {
   height: inherit;
   width: inherit;
   flex-shrink: 0;
   transition: transform 250ms cubic-bezier(0.2, 0, 0, 1);
 }
 
-.navds-accordion__item[data-expanded="true"] > .navds-accordion__header .navds-accordion__header-chevron {
+.aksel-accordion__item[data-expanded="true"] > .aksel-accordion__header .aksel-accordion__header-chevron {
   transform: rotateX(-180deg);
 }
 
 /* ---------------------------- Accordion content --------------------------- */
 
-.navds-accordion--indent > .navds-accordion__item .navds-accordion__content-inner {
+.aksel-accordion--indent > .aksel-accordion__item .aksel-accordion__content-inner {
   padding-block: var(--ax-space-8);
   padding-inline: calc(var(--ax-space-20) + 2px) var(--ax-space-20);
 
@@ -121,12 +121,12 @@
   }
 }
 
-.navds-accordion--indent > .navds-accordion__item > .navds-accordion__content {
+.aksel-accordion--indent > .aksel-accordion__item > .aksel-accordion__content {
   box-shadow: -2px 0 0 0 var(--ax-border-neutral-subtleA);
 }
 
-.navds-accordion__item {
-  & > .navds-accordion__content {
+.aksel-accordion__item {
+  & > .aksel-accordion__content {
     display: grid;
     grid-template-rows: 0fr;
     visibility: hidden;
@@ -139,14 +139,14 @@
     border-color: transparent;
     opacity: 0;
 
-    & .navds-accordion__content-inner {
+    & .aksel-accordion__content-inner {
       min-height: 0;
       padding-block: 0;
     }
   }
 
   &[data-expanded="true"] {
-    & > .navds-accordion__content {
+    & > .aksel-accordion__content {
       grid-template-rows: 1fr;
       visibility: visible;
       margin-block: var(--ax-space-8);
@@ -154,7 +154,7 @@
       border-color: var(--ax-border-neutral-subtleA);
       opacity: 1;
 
-      & .navds-accordion__content-inner {
+      & .aksel-accordion__content-inner {
         min-height: fit-content;
       }
     }
@@ -167,8 +167,8 @@
 
 /* ---------------- Accordion No Animation (defaultOpen) ---------------- */
 
-.navds-accordion__item--no-animation {
-  & > .navds-accordion__content {
+.aksel-accordion__item--no-animation {
+  & > .aksel-accordion__content {
     transition: none;
   }
 }

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

@@ -1,5 +1,5 @@
 /* --------------------------- ActionMenu content --------------------------- */
-.navds-action-menu__content {
+.aksel-action-menu__content {
   overflow: hidden;
   border-radius: var(--ax-border-radius-xlarge);
   border: 1px solid var(--ax-border-neutral-subtleA);
@@ -33,7 +33,7 @@
   }
 }
 
-.navds-action-menu__content > .navds-action-menu__content-inner {
+.aksel-action-menu__content > .aksel-action-menu__content-inner {
   --__axc-action-menu-content-p: var(--ax-space-8);
   --__axc-action-menu-item-pr: var(--ax-space-8);
   --__axc-action-menu-item-pl: var(--ax-space-8);
@@ -54,7 +54,7 @@
 }
 
 /* ----------------------------- ActionMenu Item ---------------------------- */
-.navds-action-menu__item {
+.aksel-action-menu__item {
   display: flex;
   align-items: center;
   gap: var(--ax-space-8);
@@ -86,11 +86,11 @@
   }
 }
 
-.navds-action-menu__item--has-icon {
+.aksel-action-menu__item--has-icon {
   --__axc-action-menu-item-pl: var(--ax-space-24);
 }
 
-.navds-action-menu__sub-trigger {
+.aksel-action-menu__sub-trigger {
   --__axc-action-menu-item-pr: var(--ax-space-2);
 
   &[data-state="open"] {
@@ -102,7 +102,7 @@
   }
 }
 
-.navds-action-menu__item--danger {
+.aksel-action-menu__item--danger {
   color: var(--ax-text-danger-subtle);
 
   &:focus {
@@ -112,18 +112,18 @@
 }
 
 /* ---------------------------- ActionMenu marker --------------------------- */
-.navds-action-menu__marker {
+.aksel-action-menu__marker {
   display: flex;
   align-items: center;
   gap: var(--ax-space-4);
 }
 
-.navds-action-menu__marker--right {
+.aksel-action-menu__marker--right {
   margin-left: auto;
   padding-left: var(--ax-space-16);
 }
 
-.navds-action-menu__marker--left {
+.aksel-action-menu__marker--left {
   position: absolute;
   left: 0;
   width: var(--__axc-action-menu-item-pl);
@@ -131,13 +131,13 @@
   justify-content: center;
 }
 
-.navds-action-menu__marker-icon svg {
+.aksel-action-menu__marker-icon svg {
   font-size: 18px;
   flex-shrink: 0;
 }
 
 /* --------------------------- ActionMenu shortcut -------------------------- */
-.navds-action-menu__shortcut {
+.aksel-action-menu__shortcut {
   background-color: var(--ax-bg-neutral-moderateA);
   color: var(--ax-text-neutral);
   border-radius: var(--ax-border-radius-small);
@@ -152,7 +152,7 @@
 }
 
 /* ---------------------------- ActionMenu Grouping ---------------------------- */
-.navds-action-menu__label {
+.aksel-action-menu__label {
   display: flex;
   align-items: center;
   min-height: calc(var(--__axc-action-menu-item-height) - 6px);
@@ -165,7 +165,7 @@
   font-size: var(--ax-font-size-small);
 }
 
-.navds-action-menu__divider {
+.aksel-action-menu__divider {
   height: 1px;
   margin-block: var(--ax-space-8);
   background-color: var(--ax-border-neutral-subtleA);
@@ -173,29 +173,29 @@
 
 /* -------------------------- ActionMenu indicator -------------------------- */
 
-.navds-action-menu__indicator-icon--unchecked,
-.navds-action-menu__indicator-icon--checked,
-.navds-action-menu__indicator-icon--indeterminate {
+.aksel-action-menu__indicator-icon--unchecked,
+.aksel-action-menu__indicator-icon--checked,
+.aksel-action-menu__indicator-icon--indeterminate {
   display: none;
 }
 
-.navds-action-menu__indicator {
+.aksel-action-menu__indicator {
   display: grid;
   place-content: center;
 
-  &[data-state="unchecked"] .navds-action-menu__indicator-icon--unchecked {
+  &[data-state="unchecked"] .aksel-action-menu__indicator-icon--unchecked {
     display: block;
   }
 
-  &[data-state="checked"] .navds-action-menu__indicator-icon--checked {
+  &[data-state="checked"] .aksel-action-menu__indicator-icon--checked {
     display: block;
   }
 
-  &[data-state="indeterminate"] .navds-action-menu__indicator-icon--indeterminate {
+  &[data-state="indeterminate"] .aksel-action-menu__indicator-icon--indeterminate {
     display: block;
   }
 }
 
-.navds-action-menu__indicator-icon {
+.aksel-action-menu__indicator-icon {
   font-size: 14px;
 }

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

@@ -1,4 +1,4 @@
-.navds-alert {
+.aksel-alert {
   border-radius: var(--ax-border-radius-xlarge);
   border: 1px solid;
   padding: var(--ax-space-16) var(--ax-space-20);
@@ -13,78 +13,78 @@
   }
 }
 
-.navds-alert__wrapper--maxwidth {
+.aksel-alert__wrapper--maxwidth {
   max-width: 43.5rem;
 }
 
-.navds-alert__icon {
+.aksel-alert__icon {
   flex-shrink: 0;
   font-size: 1.5rem;
   align-self: flex-start;
   height: var(--ax-font-line-height-xlarge);
 }
 
-.navds-alert--small {
+.aksel-alert--small {
   padding: var(--ax-space-12) var(--ax-space-16);
   gap: var(--ax-space-8);
 
-  > .navds-alert__icon {
+  > .aksel-alert__icon {
     margin-block-start: 0;
     height: var(--ax-font-line-height-large);
   }
 }
 
 /* ----------------------------- Alert variants ----------------------------- */
-.navds-alert--info {
+.aksel-alert--info {
   border-color: var(--ax-border-info);
   background-color: var(--ax-bg-info-moderate);
 
-  > .navds-alert__icon {
+  > .aksel-alert__icon {
     color: var(--ax-text-info-icon);
   }
 }
 
-.navds-alert--success {
+.aksel-alert--success {
   border-color: var(--ax-border-success);
   background-color: var(--ax-bg-success-moderate);
 
-  > .navds-alert__icon {
+  > .aksel-alert__icon {
     color: var(--ax-text-success-icon);
   }
 }
 
-.navds-alert--warning {
+.aksel-alert--warning {
   border-color: var(--ax-border-warning);
   background-color: var(--ax-bg-warning-moderate);
 
-  > .navds-alert__icon {
+  > .aksel-alert__icon {
     color: var(--ax-text-warning-icon);
   }
 }
 
-.navds-alert--error {
+.aksel-alert--error {
   border-color: var(--ax-border-danger);
   background-color: var(--ax-bg-danger-moderate);
 
-  > .navds-alert__icon {
+  > .aksel-alert__icon {
     color: var(--ax-text-danger-icon);
   }
 }
 
 /* ----------------------------- Alert fullwidth ---------------------------- */
-.navds-alert--full-width {
+.aksel-alert--full-width {
   border-radius: 0;
 }
 
 /* ------------------------------ Alert inline ------------------------------ */
-.navds-alert--inline {
+.aksel-alert--inline {
   background-color: transparent;
   border: none;
   padding: 0;
 }
 
 /* ------------------------- Alert with close button ------------------------ */
-.navds-alert__button-wrapper {
+.aksel-alert__button-wrapper {
   align-self: flex-start;
   flex: 1;
   display: flex;
@@ -92,23 +92,23 @@
   justify-content: flex-end;
 }
 
-.navds-alert--close-button {
-  > .navds-alert__wrapper {
+.aksel-alert--close-button {
+  > .aksel-alert__wrapper {
     margin-block-start: var(--ax-space-2);
   }
 
-  > .navds-alert__icon {
+  > .aksel-alert__icon {
     margin-block-start: var(--ax-space-2);
   }
 
-  &.navds-alert--small {
+  &.aksel-alert--small {
     align-items: flex-start;
 
-    > .navds-alert__wrapper {
+    > .aksel-alert__wrapper {
       margin-block-start: var(--ax-space-4);
     }
 
-    > .navds-alert__icon {
+    > .aksel-alert__icon {
       margin-block-start: var(--ax-space-4);
     }
   }

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

@@ -14,7 +14,7 @@ body,
 
 /* https://web.dev/prefers-reduced-motion/ */
 @media (prefers-reduced-motion: reduce) {
-  *:not(.navds-loader *, .navds-loader, .navds-progress-bar *, .navds-progress-bar),
+  *:not(.aksel-loader *, .aksel-loader, .aksel-progress-bar *, .aksel-progress-bar),
   ::before,
   ::after {
     animation-delay: -1ms !important;
@@ -39,7 +39,7 @@ body,
  */
 
 .sr-only,
-.navds-sr-only {
+.aksel-sr-only {
   border: 0;
   clip: rect(0, 0, 0, 0);
   clip-path: inset(50%);
@@ -62,8 +62,8 @@ body,
 
 .sr-only.focusable:active,
 .sr-only.focusable:focus,
-.navds-sr-only.focusable:active,
-.navds-sr-only.focusable:focus {
+.aksel-sr-only.focusable:active,
+.aksel-sr-only.focusable:focus {
   clip: auto;
   clip-path: none;
   height: auto;

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

@@ -1,4 +1,4 @@
-.navds-button {
+.aksel-button {
   --__axc-button-icon-size: 1.5rem;
   --__axc-button-icon-margin: -4px;
   --__axc-button-border-color: transparent;
@@ -22,44 +22,44 @@
   }
 }
 
-.navds-button--small,
-.navds-button--xsmall {
+.aksel-button--small,
+.aksel-button--xsmall {
   --__axc-button-icon-margin: -2px;
 }
 
-.navds-button--small {
+.aksel-button--small {
   padding: var(--ax-space-4) var(--ax-space-12);
   min-height: 2rem;
   min-width: 2rem;
   gap: var(--ax-space-6);
 }
 
-.navds-button--xsmall {
+.aksel-button--xsmall {
   padding: var(--ax-space-2) var(--ax-space-8);
   gap: var(--ax-space-4);
 
   --__axc-button-icon-size: 1.25rem;
 }
 
-.navds-button--icon-only {
+.aksel-button--icon-only {
   padding: var(--ax-space-12);
 
-  &.navds-button--small {
+  &.aksel-button--small {
     padding: var(--ax-space-4);
   }
 
-  &.navds-button--xsmall {
+  &.aksel-button--xsmall {
     padding: var(--ax-space-2);
   }
 }
 
 @supports not selector(:focus-visible) {
-  .navds-button:focus {
+  .aksel-button:focus {
     outline: 3px solid var(--ax-border-focus);
   }
 }
 
-.navds-button__icon {
+.aksel-button__icon {
   font-size: var(--__axc-button-icon-size);
   display: flex;
 
@@ -71,15 +71,15 @@
     margin-right: var(--__axc-button-icon-margin);
   }
 
-  .navds-button--icon-only & {
+  .aksel-button--icon-only & {
     margin: 0;
   }
 }
 
 /*************************
- * .navds-button--primary *
+ * .aksel-button--primary *
  *************************/
-.navds-button--primary {
+.aksel-button--primary {
   background-color: var(--ax-bg-accent-strong);
   color: var(--ax-text-accent-contrast);
 
@@ -91,7 +91,7 @@
     background-color: var(--ax-bg-accent-strong-pressed);
   }
 
-  &:is(:disabled, .navds-button--disabled) {
+  &:is(:disabled, .aksel-button--disabled) {
     background-color: var(--ax-bg-accent-strong);
   }
 
@@ -108,9 +108,9 @@
 }
 
 /*************************
- * .navds-button--primary-neutral *
+ * .aksel-button--primary-neutral *
  *************************/
-.navds-button--primary-neutral {
+.aksel-button--primary-neutral {
   background-color: var(--ax-bg-neutral-strong);
   color: var(--ax-text-neutral-contrast);
 
@@ -122,15 +122,15 @@
     background-color: var(--ax-bg-neutral-strong-pressed);
   }
 
-  &:is(:disabled, .navds-button--disabled) {
+  &:is(:disabled, .aksel-button--disabled) {
     background-color: var(--ax-bg-neutral-strong);
   }
 }
 
 /**************************
-* .navds-button--secondary *
+* .aksel-button--secondary *
  **************************/
-.navds-button--secondary {
+.aksel-button--secondary {
   --__axc-button-border-color: var(--ax-border-accent);
 
   background-color: transparent;
@@ -146,7 +146,7 @@
     background-color: var(--ax-bg-accent-moderate-pressedA);
   }
 
-  &:is(:disabled, .navds-button--disabled) {
+  &:is(:disabled, .aksel-button--disabled) {
     --__axc-button-border-color: var(--ax-border-accent);
 
     background-color: transparent;
@@ -155,9 +155,9 @@
 }
 
 /**************************
-* .navds-button--secondary-neutral *
+* .aksel-button--secondary-neutral *
  **************************/
-.navds-button--secondary-neutral {
+.aksel-button--secondary-neutral {
   --__axc-button-border-color: var(--ax-border-neutral);
 
   background-color: transparent;
@@ -173,7 +173,7 @@
     background-color: var(--ax-bg-neutral-moderate-pressedA);
   }
 
-  &:is(:disabled, .navds-button--disabled) {
+  &:is(:disabled, .aksel-button--disabled) {
     --__axc-button-border-color: var(--ax-border-neutral);
 
     color: var(--ax-text-neutral);
@@ -182,9 +182,9 @@
 }
 
 /****************************
- * .navds-button--tertiary *
+ * .aksel-button--tertiary *
  ****************************/
-.navds-button--tertiary {
+.aksel-button--tertiary {
   background-color: transparent;
   color: var(--ax-text-accent-subtle);
 
@@ -196,16 +196,16 @@
     background-color: var(--ax-bg-accent-moderate-pressedA);
   }
 
-  &:is(:disabled, .navds-button--disabled) {
+  &:is(:disabled, .aksel-button--disabled) {
     color: var(--ax-text-accent-subtle);
     background-color: transparent;
   }
 }
 
 /****************************
- * .navds-button--tertiary-neutral *
+ * .aksel-button--tertiary-neutral *
  ****************************/
-.navds-button--tertiary-neutral {
+.aksel-button--tertiary-neutral {
   background-color: transparent;
   color: var(--ax-text-neutral);
 
@@ -217,16 +217,16 @@
     background-color: var(--ax-bg-neutral-moderate-pressedA);
   }
 
-  &:is(:disabled, .navds-button--disabled) {
+  &:is(:disabled, .aksel-button--disabled) {
     color: var(--ax-text-neutral);
     background-color: transparent;
   }
 }
 
 /*************************
- * .navds-button--danger *
+ * .aksel-button--danger *
  *************************/
-.navds-button--danger {
+.aksel-button--danger {
   background-color: var(--ax-bg-danger-strong);
   color: var(--ax-text-danger-contrast);
 
@@ -238,70 +238,70 @@
     background-color: var(--ax-bg-danger-strong-pressed);
   }
 
-  &:is(:disabled, .navds-button--disabled) {
+  &:is(:disabled, .aksel-button--disabled) {
     background-color: var(--ax-bg-danger-strong);
   }
 }
 
 /**************************
- * .navds-button:disabled *
+ * .aksel-button:disabled *
  **************************/
 
-.navds-button:where(:disabled, .navds-button--disabled) {
+.aksel-button:where(:disabled, .aksel-button--disabled) {
   cursor: not-allowed;
 }
 
-.navds-button:not(.navds-button--loading):where(:disabled, .navds-button--disabled) {
+.aksel-button:not(.aksel-button--loading):where(:disabled, .aksel-button--disabled) {
   opacity: var(--ax-opacity-disabled);
 }
 
 /* Loader overrides */
-.navds-button > .navds-loader {
+.aksel-button > .aksel-loader {
   position: absolute;
 }
 
-.navds-button .navds-loader .navds-loader__foreground {
+.aksel-button .aksel-loader .aksel-loader__foreground {
   stroke: currentColor;
 }
 
-.navds-button--primary .navds-loader .navds-loader__background,
-.navds-button--danger .navds-loader .navds-loader__background {
+.aksel-button--primary .aksel-loader .aksel-loader__background,
+.aksel-button--danger .aksel-loader .aksel-loader__background {
   stroke: rgb(255 255 255 / 0.3);
 }
 
-.navds-button--loading > :not(.navds-loader) {
+.aksel-button--loading > :not(.aksel-loader) {
   visibility: hidden;
 }
 
 @media (forced-colors: active) {
-  .navds-button:not(.navds-button--loading):where(:disabled, .navds-button--disabled) {
+  .aksel-button:not(.aksel-button--loading):where(:disabled, .aksel-button--disabled) {
     opacity: 1;
     color: GrayText;
   }
 
-  .navds-button {
+  .aksel-button {
     border: 1px solid transparent;
     color: ButtonText;
     background-color: ButtonFace;
   }
 
-  .navds-button:not(:disabled):hover {
+  .aksel-button:not(:disabled):hover {
     background-color: highlighttext;
     border-color: highlight;
     color: highlight;
     box-shadow: none;
   }
 
-  .navds-button:not(:disabled):hover span {
+  .aksel-button:not(:disabled):hover span {
     forced-color-adjust: none;
   }
 
-  .navds-button .navds-loader .navds-loader__foreground {
+  .aksel-button .aksel-loader .aksel-loader__foreground {
     stroke: canvas;
   }
 
-  .navds-button--primary .navds-loader .navds-loader__background,
-  .navds-button--danger .navds-loader .navds-loader__background {
+  .aksel-button--primary .aksel-loader .aksel-loader__background,
+  .aksel-button--danger .aksel-loader .aksel-loader__background {
     stroke: canvastext;
   }
 }

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

@@ -1,25 +1,25 @@
-.navds-chat {
+.aksel-chat {
   display: flex;
   align-items: flex-end;
   gap: var(--ax-space-12);
   max-width: 40.75rem;
 }
 
-.navds-chat--right {
+.aksel-chat--right {
   flex-direction: row-reverse;
 
-  & .navds-chat__bubble-wrapper {
+  & .aksel-chat__bubble-wrapper {
     align-items: flex-end;
   }
 
-  & .navds-chat__bubble {
+  & .aksel-chat__bubble {
     border-radius: var(--ax-border-radius-xlarge);
     border-bottom-right-radius: var(--ax-border-radius-small);
   }
 }
 
 /* ------------------------------- Chat avatar ------------------------------ */
-.navds-chat__avatar {
+.aksel-chat__avatar {
   align-items: center;
   background-color: var(--ax-bg-raised);
   border-radius: var(--ax-border-radius-full);
@@ -44,7 +44,7 @@
 }
 
 /* ------------------------------- Chat bubble ------------------------------ */
-.navds-chat__bubble-wrapper {
+.aksel-chat__bubble-wrapper {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -53,7 +53,7 @@
   gap: var(--ax-space-12);
 }
 
-.navds-chat__bubble {
+.aksel-chat__bubble {
   padding: var(--ax-space-16) var(--ax-space-20);
   width: fit-content;
   background-color: var(--ax-bg-raised);
@@ -65,27 +65,27 @@
   border: 1px solid var(--ax-border-neutral-subtleA);
 }
 
-.navds-chat--small .navds-chat__bubble {
+.aksel-chat--small .aksel-chat__bubble {
   padding: var(--ax-space-12) var(--ax-space-16);
 }
 
 /* -------------------------- Chat bubble variants -------------------------- */
-.navds-chat--info {
-  & .navds-chat__bubble,
-  & .navds-chat__avatar {
+.aksel-chat--info {
+  & .aksel-chat__bubble,
+  & .aksel-chat__avatar {
     background-color: var(--ax-bg-info-moderate);
   }
 }
 
-.navds-chat--neutral {
-  & .navds-chat__bubble,
-  & .navds-chat__avatar {
+.aksel-chat--neutral {
+  & .aksel-chat__bubble,
+  & .aksel-chat__avatar {
     background-color: var(--ax-bg-neutral-moderateA);
   }
 }
 
 /* ------------------------------ Chat top text ----------------------------- */
-.navds-chat__top-text {
+.aksel-chat__top-text {
   color: var(--ax-text-neutral);
   display: flex;
   gap: var(--ax-space-8);
@@ -94,22 +94,22 @@
   margin: 0;
 }
 
-.navds-chat--right .navds-chat__top-text {
+.aksel-chat--right .aksel-chat__top-text {
   align-self: flex-end;
 }
 
-.navds-chat--top-text-left .navds-chat__top-text {
+.aksel-chat--top-text-left .aksel-chat__top-text {
   align-self: flex-start;
 }
 
-.navds-chat--top-text-right .navds-chat__top-text {
+.aksel-chat--top-text-right .aksel-chat__top-text {
   align-self: flex-end;
 }
 
-.navds-chat--left .navds-chat__top-text--right {
+.aksel-chat--left .aksel-chat__top-text--right {
   align-self: flex-end;
 }
 
-.navds-chat--right .navds-chat__top-text--left {
+.aksel-chat--right .aksel-chat__top-text--left {
   align-self: flex-start;
 }

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

@@ -1,4 +1,4 @@
-.navds-chips {
+.aksel-chips {
   display: flex;
   gap: var(--ax-space-8);
   margin: 0;
@@ -7,14 +7,14 @@
   flex-wrap: wrap;
 }
 
-.navds-chips li {
+.aksel-chips li {
   margin: 0;
   padding: 0;
   list-style: none;
   display: block;
 }
 
-.navds-chips__chip {
+.aksel-chips__chip {
   all: unset;
   display: flex;
   cursor: pointer;
@@ -33,43 +33,43 @@
   }
 }
 
-.navds-chips--readonly {
-  .navds-chips__chip {
+.aksel-chips--readonly {
+  .aksel-chips__chip {
     background-color: var(--ax-bg-neutral-moderateA);
   }
 }
 
-.navds-chips--small {
-  .navds-chips__chip {
+.aksel-chips--small {
+  .aksel-chips__chip {
     min-height: 1.5rem;
     padding: 0 var(--ax-space-8);
   }
 
-  .navds-chips__toggle-icon {
+  .aksel-chips__toggle-icon {
     width: 1rem;
     height: 1rem;
   }
 
-  .navds-chips__toggle--with-checkmark {
+  .aksel-chips__toggle--with-checkmark {
     padding-left: var(--ax-space-4);
   }
 
-  .navds-chips__removable-icon {
+  .aksel-chips__removable-icon {
     width: 1.25rem;
     height: 1.25rem;
   }
 
-  .navds-chips__removable-icon > svg {
+  .aksel-chips__removable-icon > svg {
     width: 1rem;
   }
 
-  .navds-chips--icon-right {
+  .aksel-chips--icon-right {
     padding-right: var(--ax-space-2);
   }
 }
 
 /* ------------------------------ Chips Toggle ------------------------------ */
-.navds-chips__toggle--action {
+.aksel-chips__toggle--action {
   box-shadow: inset 0 0 0 1px var(--ax-border-accent-subtleA);
   background-color: var(--ax-bg-accent-moderate);
   color: var(--ax-text-accent);
@@ -89,7 +89,7 @@
   }
 }
 
-.navds-chips__toggle--neutral {
+.aksel-chips__toggle--neutral {
   box-shadow: inset 0 0 0 1px var(--ax-border-neutral-subtleA);
   background-color: var(--ax-bg-neutral-moderate);
   color: var(--ax-text-neutral);
@@ -109,18 +109,18 @@
   }
 }
 
-.navds-chips--medium .navds-chips__toggle--with-checkmark {
+.aksel-chips--medium .aksel-chips__toggle--with-checkmark {
   padding-left: var(--ax-space-6);
 }
 
 /* -------------------------- start old CSS --------------------------  */
 
 /* ----------------------------- Chips removable ---------------------------- */
-.navds-chips__removable {
+.aksel-chips__removable {
   gap: 0;
 }
 
-.navds-chips__removable--action {
+.aksel-chips__removable--action {
   background: var(--ax-bg-accent-strong-pressed);
   color: var(--ax-text-accent-contrast);
 
@@ -129,7 +129,7 @@
   }
 }
 
-.navds-chips__removable--neutral {
+.aksel-chips__removable--neutral {
   background: var(--ax-bg-neutral-strong-pressed);
   color: var(--ax-text-neutral-contrast);
 
@@ -138,7 +138,7 @@
   }
 }
 
-.navds-chips__removable-icon {
+.aksel-chips__removable-icon {
   width: 1.5rem;
   height: 1.5rem;
   font-size: 1.25rem;
@@ -147,16 +147,16 @@
   border-radius: var(--ax-border-radius-full);
 }
 
-.navds-chips--icon-left {
+.aksel-chips--icon-left {
   padding-left: var(--ax-space-6);
 }
 
-.navds-chips--icon-right {
+.aksel-chips--icon-right {
   padding-right: var(--ax-space-6);
 }
 
 @media (forced-colors: active) {
-  .navds-chips__chip {
+  .aksel-chips__chip {
     border: 1px solid transparent;
 
     &:hover {
@@ -165,11 +165,11 @@
     }
   }
 
-  .navds-chips__chip:where([data-pressed="true"], :active, :hover) > span {
+  .aksel-chips__chip:where([data-pressed="true"], :active, :hover) > span {
     forced-color-adjust: none;
   }
 
-  .navds-chips__toggle[data-pressed="true"] {
+  .aksel-chips__toggle[data-pressed="true"] {
     background-color: selecteditem;
     color: selecteditemtext;
     border: 1px solid selecteditem;

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

@@ -1,4 +1,4 @@
-.navds-copybutton[data-active="true"] .navds-copybutton__icon {
+.aksel-copybutton[data-active="true"] .aksel-copybutton__icon {
   animation: akselCopyButtonIconAnimation 2s cubic-bezier(0.05, 0.7, 0.1, 1);
 }
 

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

@@ -1,4 +1,4 @@
-.navds-date {
+.aksel-date {
   padding: var(--ax-space-16) var(--ax-space-12);
 
   .rdp-day_range_middle {
@@ -20,7 +20,7 @@
     gap: var(--ax-space-20);
   }
 
-  .navds-date__caption-label {
+  .aksel-date__caption-label {
     text-transform: capitalize;
   }
 
@@ -50,7 +50,7 @@
     border-radius: var(--ax-border-radius-large);
   }
 
-  .navds-date__field {
+  .aksel-date__field {
     display: flex;
     flex-direction: column;
     width: 100%;
@@ -58,7 +58,7 @@
   }
 
   .rdp-day_selected,
-  .navds-monthpicker__month--selected {
+  .aksel-monthpicker__month--selected {
     color: var(--ax-text-accent-contrast);
     background: var(--ax-bg-accent-strong-pressed);
     cursor: pointer;
@@ -72,7 +72,7 @@
   }
 
   .rdp-button:where(:not(.rdp-day_selected, [disabled])):hover,
-  .navds-date__month-button:where(:not(.rdp-day_selected, [disabled])):hover {
+  .aksel-date__month-button:where(:not(.rdp-day_selected, [disabled])):hover {
     background: var(--ax-bg-accent-moderate-hoverA);
     cursor: pointer;
   }
@@ -106,16 +106,16 @@
     pointer-events: none;
   }
 
-  .navds-date__modal & {
+  .aksel-date__modal & {
     padding: 0;
   }
 
-  .navds-date__modal-body > & {
+  .aksel-date__modal-body > & {
     padding: 0;
   }
 }
 
-.navds-date__caption {
+.aksel-date__caption {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -123,18 +123,18 @@
   padding-inline: var(--ax-space-4);
 }
 
-.navds-date__caption-button {
+.aksel-date__caption-button {
   width: 2rem;
   height: 2rem;
   color: var(--ax-text-neutral);
 }
 
-.navds-date__caption__month .navds-select__container select {
+.aksel-date__caption__month .aksel-select__container select {
   text-transform: capitalize;
 }
 
 /* Monthpicker */
-.navds-date__month-button {
+.aksel-date__month-button {
   all: unset;
   text-align: center;
   width: 3rem;
@@ -144,18 +144,18 @@
   cursor: pointer;
 }
 
-.navds-date__year-label {
+.aksel-date__year-label {
   display: flex;
   align-items: center;
 }
 
-.navds-date__wrapper,
-.navds-date__standalone-wrapper {
+.aksel-date__wrapper,
+.aksel-date__standalone-wrapper {
   height: fit-content;
   width: fit-content;
 
   .rdp-cell > button.rdp-day,
-  button.navds-date__month-button {
+  button.aksel-date__month-button {
     &:focus-visible {
       outline: 3px solid var(--ax-border-focus);
       outline-offset: 3px;
@@ -168,17 +168,17 @@
   }
 }
 
-.navds-date__field-input {
-  &.navds-text-field__input {
+.aksel-date__field-input {
+  &.aksel-text-field__input {
     padding-right: var(--ax-space-48);
   }
 
-  .navds-form-field--small & {
+  .aksel-form-field--small & {
     padding-right: var(--ax-space-32);
   }
 }
 
-.navds-date__field-button {
+.aksel-date__field-button {
   position: absolute;
   right: 0.0625rem;
   top: 50%;
@@ -199,17 +199,17 @@
   border-start-start-radius: 0;
   border-end-start-radius: 0;
 
-  .navds-form-field--small & {
+  .aksel-form-field--small & {
     padding: var(--ax-space-4);
   }
 
-  .navds-form-field--disabled & {
+  .aksel-form-field--disabled & {
     opacity: 1;
     cursor: not-allowed;
   }
 
   /* Readonly */
-  .navds-date__field--readonly & {
+  .aksel-date__field--readonly & {
     cursor: default;
   }
 
@@ -218,29 +218,29 @@
   }
 }
 
-.navds-date__field-wrapper {
+.aksel-date__field-wrapper {
   display: inline-flex;
   align-items: center;
   position: relative;
   width: fit-content;
 }
 
-.navds-date__week-row {
+.aksel-date__week-row {
   display: flex;
   align-items: center;
   gap: var(--ax-space-2);
 }
 
-.navds-date__weeknumber {
+.aksel-date__weeknumber {
   --__axc-button-border-width: 1px;
 }
 
-.navds-date__weeknumber-number {
+.aksel-date__weeknumber-number {
   font-size: 0.875rem;
   color: var(--ax-text-neutral-subtle);
 }
 
-.navds-date__week-wrapper {
+.aksel-date__week-wrapper {
   width: 2.5rem;
   display: flex;
   align-items: center;
@@ -248,7 +248,7 @@
   margin: 0;
 }
 
-.navds-date__modal-body {
+.aksel-date__modal-body {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
@@ -257,20 +257,20 @@
 }
 
 @media (min-width: 480px) {
-  .navds-date {
+  .aksel-date {
     padding: var(--ax-space-20) var(--ax-space-16);
   }
 
-  .navds-date__modal-body {
+  .aksel-date__modal-body {
     padding: var(--ax-space-24);
   }
 
-  .navds-date__caption {
+  .aksel-date__caption {
     gap: var(--ax-space-8);
   }
 
-  .navds-date .rdp-button,
-  .navds-date__caption-button {
+  .aksel-date .rdp-button,
+  .aksel-date__caption-button {
     width: 3rem;
     height: 3rem;
   }

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

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

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

@@ -1,4 +1,4 @@
-.navds-expansioncard {
+.aksel-expansioncard {
   --__axc-expansioncard-border-radius: calc(var(--ax-border-radius-xlarge) - 1px);
   --__axc-expansioncard-padding-block: var(--ax-space-20);
   --__axc-expansioncard-padding-inline: var(--ax-space-20);
@@ -8,33 +8,33 @@
   height: fit-content;
   border: 1px solid var(--ax-border-neutral);
 
-  &:has(.navds-expansioncard__header:hover) {
+  &:has(.aksel-expansioncard__header:hover) {
     box-shadow: 0 0 0 1px var(--ax-border-neutral-strong);
     border-color: var(--ax-border-neutral-strong);
   }
 }
 
 /* ------------------------ ExpansionCard Small-size ------------------------ */
-.navds-expansioncard--small {
+.aksel-expansioncard--small {
   --__axc-expansioncard-padding-inline: var(--ax-space-16);
   --__axc-expansioncard-padding-block: var(--ax-space-16);
 
-  & > .navds-expansioncard__header .navds-expansioncard__title--small {
+  & > .aksel-expansioncard__header .aksel-expansioncard__title--small {
     margin-top: var(--ax-space-2);
   }
 
-  & :is(.navds-expansioncard__title--medium, .navds-expansioncard__title--large) {
+  & :is(.aksel-expansioncard__title--medium, .aksel-expansioncard__title--large) {
     margin-top: 0;
   }
 
-  & > .navds-expansioncard__header > .navds-expansioncard__header-button {
+  & > .aksel-expansioncard__header > .aksel-expansioncard__header-button {
     min-height: 2rem;
     min-width: 2rem;
   }
 }
 
 /* -------------------------- ExpansionCard Header -------------------------- */
-.navds-expansioncard__header {
+.aksel-expansioncard__header {
   width: 100%;
   display: flex;
   gap: var(--ax-space-16);
@@ -71,20 +71,20 @@
 }
 
 /* --------------------- ExpansionCard Header typography -------------------- */
-.navds-expansioncard__title--small {
+.aksel-expansioncard__title--small {
   margin-top: 0.625rem;
 }
 
-.navds-expansioncard__title--medium {
+.aksel-expansioncard__title--medium {
   margin-top: var(--ax-space-8);
 }
 
-.navds-expansioncard__title--large {
+.aksel-expansioncard__title--large {
   margin-top: var(--ax-space-4);
 }
 
 /* ----------------------- ExpansionCard Header Button ---------------------- */
-.navds-expansioncard__header-button {
+.aksel-expansioncard__header-button {
   display: grid;
   place-content: center;
   cursor: pointer;
@@ -113,25 +113,25 @@
   }
 }
 
-.navds-expansioncard__header:hover > .navds-expansioncard__header-button {
+.aksel-expansioncard__header:hover > .aksel-expansioncard__header-button {
   background-color: var(--ax-bg-neutral-moderate-hoverA);
 }
 
-.navds-expansioncard__header-chevron {
+.aksel-expansioncard__header-chevron {
   transition: transform 250ms cubic-bezier(0.2, 0, 0, 1);
 }
 
-.navds-expansioncard__header[data-open="true"] .navds-expansioncard__header-chevron {
+.aksel-expansioncard__header[data-open="true"] .aksel-expansioncard__header-chevron {
   transform: rotateX(-180deg);
 }
 
 /* Even if animation always takes 250ms, the perceived effect of current timing function makes the 'closing'-animation take longer */
-.navds-expansioncard__header[data-open="false"] .navds-expansioncard__header-chevron {
+.aksel-expansioncard__header[data-open="false"] .aksel-expansioncard__header-chevron {
   transition-duration: 400ms;
 }
 
 /* -------------------------- ExpansionCard Content ------------------------- */
-.navds-expansioncard__content {
+.aksel-expansioncard__content {
   border-end-end-radius: var(--__axc-expansioncard-border-radius);
   border-end-start-radius: var(--__axc-expansioncard-border-radius);
   padding-inline: var(--__axc-expansioncard-padding-inline);
@@ -149,21 +149,21 @@
     visibility: visible;
     padding-block: var(--__axc-expansioncard-padding-block);
 
-    & .navds-expansioncard__content-inner {
+    & .aksel-expansioncard__content-inner {
       opacity: 1;
     }
   }
 }
 
-.navds-expansioncard__content-inner {
+.aksel-expansioncard__content-inner {
   min-height: 0;
   opacity: 0;
   transition: opacity 250ms cubic-bezier(0.2, 0, 0, 1);
 }
 
 /* ---------------- ExpansionCard No Animation (defaultOpen) ---------------- */
-.navds-expansioncard--no-animation {
-  & :is(.navds-expansioncard__content, .navds-expansioncard__content-inner) {
+.aksel-expansioncard--no-animation {
+  & :is(.aksel-expansioncard__content, .aksel-expansioncard__content-inner) {
     transition: none;
   }
 }

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

@@ -1,4 +1,4 @@
-.navds-combobox__wrapper {
+.aksel-combobox__wrapper {
   --__axc-combobox-icon-size: 1.5rem;
   --__axc-combobox-wrapper-inner-padding: var(--ax-space-8);
   --__axc-combobox-list-item-padding-block: var(--ax-space-12);
@@ -13,13 +13,13 @@
   border-radius: var(--ax-border-radius-large);
 }
 
-.navds-form-field:not(:is(.navds-combobox--disabled, .navds-combobox--readonly)) {
-  & .navds-combobox__wrapper:hover {
+.aksel-form-field:not(:is(.aksel-combobox--disabled, .aksel-combobox--readonly)) {
+  & .aksel-combobox__wrapper:hover {
     border-color: var(--ax-border-accent-strong);
   }
 }
 
-.navds-form-field--small .navds-combobox__wrapper {
+.aksel-form-field--small .aksel-combobox__wrapper {
   --__axc-combobox-icon-size: 1.25rem;
   --__axc-combobox-wrapper-inner-padding: var(--ax-space-4);
   --__axc-combobox-list-item-padding-block: var(--ax-space-6);
@@ -27,10 +27,10 @@
   --__axc-combobox-input-height: 1.5rem;
 }
 
-.navds-combobox--disabled {
+.aksel-combobox--disabled {
   opacity: var(--ax-opacity-disabled);
 
-  & .navds-combobox__wrapper {
+  & .aksel-combobox__wrapper {
     &:hover {
       border-color: var(--ax-border-neutral);
     }
@@ -40,61 +40,61 @@
     }
   }
 
-  & .navds-combobox__selected-options {
+  & .aksel-combobox__selected-options {
     pointer-events: none;
   }
 
-  & .navds-combobox--readonly {
+  & .aksel-combobox--readonly {
     pointer-events: none;
   }
 }
 
-.navds-combobox--readonly {
+.aksel-combobox--readonly {
   pointer-events: none;
 
-  & .navds-combobox__selected-options {
-    & .navds-chips__chip {
+  & .aksel-combobox__selected-options {
+    & .aksel-chips__chip {
       background-color: var(--ax-bg-neutral-moderateA);
     }
   }
 
-  & .navds-combobox__button-toggle-list {
+  & .aksel-combobox__button-toggle-list {
     color: var(--ax-bg-neutral-moderate);
   }
 
-  & .navds-combobox__wrapper {
+  & .aksel-combobox__wrapper {
     border-color: var(--ax-border-neutral-subtle);
     overflow: clip;
   }
 
-  & .navds-text-field__input,
-  & .navds-combobox__input {
+  & .aksel-text-field__input,
+  & .aksel-combobox__input {
     background-color: var(--ax-bg-neutral-moderate);
   }
 }
 
-.navds-combobox__button-toggle-list svg,
-.navds-combobox__list svg {
+.aksel-combobox__button-toggle-list svg,
+.aksel-combobox__list svg {
   width: var(--__axc-combobox-icon-size);
   height: var(--__axc-combobox-icon-size);
 }
 
-.navds-combobox__wrapper-inner {
+.aksel-combobox__wrapper-inner {
   border: 1px solid var(--ax-border-neutral);
   border-radius: var(--ax-border-radius-large);
 
-  &:has(.navds-combobox__input:focus-visible) {
+  &:has(.aksel-combobox__input:focus-visible) {
     outline: 3px solid var(--ax-border-focus);
     outline-offset: 3px;
     border-color: var(--ax-border-accent-strong);
   }
 
-  &:has(.navds-combobox__input:focus-visible).navds-combobox__wrapper-inner--virtually-unfocused {
+  &:has(.aksel-combobox__input:focus-visible).aksel-combobox__wrapper-inner--virtually-unfocused {
     outline: none;
     border-color: var(--ax-border-neutral);
   }
 
-  &.navds-text-field__input {
+  &.aksel-text-field__input {
     position: relative;
     display: flex;
     flex-direction: row;
@@ -118,23 +118,23 @@
     cursor: text;
   }
 
-  .navds-combobox--disabled &:hover {
+  .aksel-combobox--disabled &:hover {
     border-color: var(--ax-border-neutral);
   }
 }
 
-.navds-combobox--error {
-  & .navds-combobox__wrapper-inner {
+.aksel-combobox--error {
+  & .aksel-combobox__wrapper-inner {
     border-color: var(--ax-border-danger-strong);
     box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
 
-    &:has(.navds-combobox__input:focus-visible) {
+    &:has(.aksel-combobox__input:focus-visible) {
       border-color: var(--ax-border-danger-strong);
     }
   }
 }
 
-.navds-combobox__selected-options {
+.aksel-combobox__selected-options {
   gap: 0;
   align-items: center;
 
@@ -153,7 +153,7 @@
   }
 }
 
-.navds-combobox__selected-options--no-bg {
+.aksel-combobox__selected-options--no-bg {
   font-family: inherit;
   font-size: var(--ax-font-size-large);
   font-weight: var(--ax-font-weight-regular);
@@ -163,11 +163,11 @@
   padding-left: 0.25rem;
 }
 
-.navds-combobox__input-wrapper {
+.aksel-combobox__input-wrapper {
   width: 100%;
 }
 
-.navds-combobox__input {
+.aksel-combobox__input {
   flex: 1;
   border: none;
   padding: 0;
@@ -182,39 +182,39 @@
     border: none;
   }
 
-  .navds-combobox__selected-options > li:only-child > & {
+  .aksel-combobox__selected-options > li:only-child > & {
     margin-left: var(--ax-space-4);
   }
 }
 
-.navds-combobox__input--hide-caret {
+.aksel-combobox__input--hide-caret {
   caret-color: transparent;
 }
 
 @supports not selector(:focus-visible) {
-  .navds-combobox__input {
+  .aksel-combobox__input {
     &:focus {
       outline: none;
       border: none;
     }
   }
 
-  .navds-combobox__wrapper-inner {
-    &:has(.navds-combobox__input:focus) {
+  .aksel-combobox__wrapper-inner {
+    &:has(.aksel-combobox__input:focus) {
       outline: none;
     }
 
-    &:has(.navds-combobox__input:focus).navds-combobox__wrapper-inner--virtually-unfocused {
+    &:has(.aksel-combobox__input:focus).aksel-combobox__wrapper-inner--virtually-unfocused {
       outline: none;
     }
   }
 }
 
-.navds-combobox__input::-webkit-search-cancel-button {
+.aksel-combobox__input::-webkit-search-cancel-button {
   display: none;
 }
 
-.navds-combobox__button-toggle-list {
+.aksel-combobox__button-toggle-list {
   color: var(--ax-text-neutral);
   display: flex;
   justify-content: center;
@@ -236,7 +236,7 @@
 
 /* dropdown & non selectable dropdown items */
 
-.navds-combobox__list {
+.aksel-combobox__list {
   max-height: 316px;
   overflow: clip;
   position: absolute;
@@ -253,20 +253,20 @@
   overscroll-behavior: contain;
   box-shadow: var(--ax-shadow-dialog);
 
-  & .navds-combobox__list-options {
+  & .aksel-combobox__list-options {
     overflow-y: auto;
   }
 }
 
-.navds-combobox__list--closed {
+.aksel-combobox__list--closed {
   display: none;
 }
 
-.navds-combobox__list-item,
-.navds-combobox__list-item--loading,
-.navds-combobox__list-item--no-options,
-.navds-combobox__list-item--new-option,
-.navds-combobox__list-item--max-selected {
+.aksel-combobox__list-item,
+.aksel-combobox__list-item--loading,
+.aksel-combobox__list-item--no-options,
+.aksel-combobox__list-item--new-option,
+.aksel-combobox__list-item--max-selected {
   align-items: center;
   display: flex;
   justify-content: space-between;
@@ -279,16 +279,16 @@
   scroll-margin-block: 8px; /* outline + outline-offset + margin-block */
 }
 
-.navds-combobox__list-item--no-options {
+.aksel-combobox__list-item--no-options {
   margin: 0;
 }
 
-.navds-combobox__list-item--loading {
+.aksel-combobox__list-item--loading {
   justify-content: center;
   margin: 0;
 }
 
-.navds-combobox__list-item--max-selected {
+.aksel-combobox__list-item--max-selected {
   background-color: var(--ax-bg-neutral-moderateA);
   margin: 0;
   border-radius: 0;
@@ -299,7 +299,7 @@
 
 /* ul-list and selectable li-items */
 
-.navds-combobox__list-options {
+.aksel-combobox__list-options {
   list-style: none;
   margin: 0;
   display: inherit;
@@ -311,12 +311,12 @@
   padding-block: var(--ax-space-4);
 }
 
-.navds-combobox__list-item--focus {
+.aksel-combobox__list-item--focus {
   cursor: pointer;
   outline: 2px solid var(--ax-border-focus);
 }
 
-.navds-combobox__list-item {
+.aksel-combobox__list-item {
   user-select: none;
 
   &[data-no-focus="true"] {
@@ -335,7 +335,7 @@
   }
 }
 
-.navds-combobox__list-item--selected {
+.aksel-combobox__list-item--selected {
   background-color: var(--ax-bg-accent-moderate-pressedA);
 
   & p {
@@ -343,7 +343,7 @@
   }
 }
 
-.navds-combobox__list-item--new-option {
+.aksel-combobox__list-item--new-option {
   border-bottom: 1px solid var(--ax-border-accent-subtleA);
   border-radius: 0;
   background: var(--ax-bg-accent-moderateA);
@@ -363,7 +363,7 @@
   }
 }
 
-.navds-combobox__list-item--new-option--focus {
+.aksel-combobox__list-item--new-option--focus {
   border-radius: calc(var(--ax-border-radius-large) - 1px) calc(var(--ax-border-radius-large) - 1px) 0 0;
 
   /* TODO: new option should get a wrapper div later to
@@ -379,39 +379,39 @@
 
 /* Mobile */
 @media (max-width: 479px) {
-  .navds-combobox__button-toggle-list {
+  .aksel-combobox__button-toggle-list {
     right: 0.5rem;
   }
 
   /* add bigger click area for input */
-  .navds-combobox__input {
+  .aksel-combobox__input {
     min-width: min-content;
     padding: 0.75rem 0;
   }
 
-  .navds-combobox__selected-options {
+  .aksel-combobox__selected-options {
     gap: var(--ax-space-4);
   }
 }
 
 @media (forced-colors: active) {
-  .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
+  .aksel-combobox__wrapper-inner:has(.aksel-combobox__input:focus-visible) {
     outline-color: highlight;
   }
 
-  .navds-combobox__list-item--focus,
-  .navds-combobox__list--with-hover
-    .navds-combobox__list-item:not([data-no-focus="true"], .navds-combobox__list-item--new-option):hover {
+  .aksel-combobox__list-item--focus,
+  .aksel-combobox__list--with-hover
+    .aksel-combobox__list-item:not([data-no-focus="true"], .aksel-combobox__list-item--new-option):hover {
     border-left-color: highlight;
     color: highlight;
   }
 
-  .navds-combobox__list-item[data-no-focus="true"] {
+  .aksel-combobox__list-item[data-no-focus="true"] {
     opacity: 1;
     color: graytext;
   }
 
-  .navds-combobox__list-item--selected {
+  .aksel-combobox__list-item--selected {
     background-color: highlight;
     color: selecteditemtext;
 
@@ -424,22 +424,22 @@
     }
   }
 
-  .navds-combobox__list-item--selected.navds-combobox__list-item--focus,
-  .navds-combobox__list--with-hover .navds-combobox__list-item--selected:hover {
+  .aksel-combobox__list-item--selected.aksel-combobox__list-item--focus,
+  .aksel-combobox__list--with-hover .aksel-combobox__list-item--selected:hover {
     border-left-color: highlight;
     color: highlight;
   }
 
-  .navds-combobox__list--with-hover .navds-combobox__list-item--new-option:hover {
+  .aksel-combobox__list--with-hover .aksel-combobox__list-item--new-option:hover {
     color: highlight;
   }
 
-  .navds-combobox__list-item--new-option--focus {
+  .aksel-combobox__list-item--new-option--focus {
     outline: 2px solid highlight;
     outline-offset: 0;
   }
 
-  .navds-combobox--disabled {
+  .aksel-combobox--disabled {
     opacity: 1;
 
     & * {
@@ -449,7 +449,7 @@
     }
   }
 
-  .navds-combobox__list-item--new-option {
+  .aksel-combobox__list-item--new-option {
     svg {
       color: canvastext;
     }

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

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

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

@@ -1,4 +1,4 @@
-.navds-error-summary {
+.aksel-error-summary {
   background-color: var(--ax-bg-default);
   padding: var(--ax-space-16) var(--ax-space-20);
   border: 4px solid var(--ax-border-danger);
@@ -6,32 +6,32 @@
   outline-offset: 3px;
 
   &:focus-visible,
-  &:has(.navds-error-summary__heading:focus-visible) {
+  &:has(.aksel-error-summary__heading:focus-visible) {
     outline: 3px solid var(--ax-border-focus);
   }
 }
 
 @supports not selector(:focus-visible) {
-  .navds-error-summary:focus {
+  .aksel-error-summary:focus {
     outline: 3px solid var(--ax-border-focus);
   }
 }
 
-.navds-error-summary--small {
+.aksel-error-summary--small {
   padding: var(--ax-space-12) var(--ax-space-16);
 
-  & .navds-error-summary__heading {
+  & .aksel-error-summary__heading {
     scroll-margin-top: var(--ax-space-16);
   }
 
-  & > .navds-error-summary__list {
+  & > .aksel-error-summary__list {
     margin: var(--ax-space-8) 0;
     gap: var(--ax-space-8);
     padding-left: var(--ax-space-20);
   }
 }
 
-.navds-error-summary__heading {
+.aksel-error-summary__heading {
   scroll-margin-top: var(--ax-space-24);
 
   &:focus {
@@ -39,7 +39,7 @@
   }
 }
 
-.navds-error-summary__list {
+.aksel-error-summary__list {
   margin: var(--ax-space-12) 0;
   display: flex;
   flex-direction: column;

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

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

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

@@ -1,5 +1,5 @@
 /* --------------------------- FileUpload Dropzone -------------------------- */
-.navds-dropzone__area {
+.aksel-dropzone__area {
   --__axc-dropzone-background: var(--ax-bg-input);
   --__axc-dropzone-icon-padding: var(--ax-space-8);
   --__axc-dropzone-animation-length-long: 400ms;
@@ -25,14 +25,14 @@
   &:hover:not([data-disabled="true"]) {
     border-color: var(--ax-border-accent-strong);
 
-    & > .navds-dropzone__area-button {
+    & > .aksel-dropzone__area-button {
       background-color: var(--ax-bg-accent-moderate-hover);
       box-shadow: inset 0 0 0 2px var(--ax-bg-accent-strong-hover);
     }
   }
 
   &:active:not([data-disabled="true"]) {
-    & > .navds-dropzone__area-button {
+    & > .aksel-dropzone__area-button {
       background-color: var(--ax-bg-accent-strong-pressed);
       color: var(--ax-text-accent-contrast);
       box-shadow: none;
@@ -47,12 +47,12 @@
   }
 }
 
-.navds-dropzone--dragging {
-  & > .navds-dropzone__area {
+.aksel-dropzone--dragging {
+  & > .aksel-dropzone__area {
     --__axc-dropzone-background: var(--ax-bg-input);
   }
 
-  & > .navds-dropzone__area::after {
+  & > .aksel-dropzone__area::after {
     color: var(--ax-text-accent);
     background-color: var(--ax-bg-accent-moderateA);
     content: "";
@@ -85,19 +85,19 @@
   }
 }
 
-.navds-dropzone__area-icon {
+.aksel-dropzone__area-icon {
   display: grid;
   padding: var(--__axc-dropzone-icon-padding);
   visibility: hidden;
 }
 
-.navds-dropzone--error > .navds-dropzone__area {
+.aksel-dropzone--error > .aksel-dropzone__area {
   border-color: transparent;
   outline: 2px solid var(--ax-border-danger-strong);
   outline-offset: -1px;
 }
 
-.navds-dropzone__area-release {
+.aksel-dropzone__area-release {
   top: var(--ax-space-16);
   display: grid;
   position: absolute;
@@ -108,7 +108,7 @@
     transform var(--__axc-dropzone-animation-length-long) var(--__axc-dropzone-animation-over-under);
 }
 
-.navds-dropzone__area-release__icon {
+.aksel-dropzone__area-release__icon {
   display: grid;
   padding: var(--__axc-dropzone-icon-padding);
   border-radius: var(--ax-border-radius-full);
@@ -119,27 +119,27 @@
   font-size: 1.5rem;
 }
 
-.navds-dropzone--dragging .navds-dropzone__area-release > .navds-dropzone__area-release__icon {
+.aksel-dropzone--dragging .aksel-dropzone__area-release > .aksel-dropzone__area-release__icon {
   background-color: transparent;
   font-size: 2rem;
 }
 
-.navds-dropzone__area-release__text {
+.aksel-dropzone__area-release__text {
   visibility: hidden;
 }
 
-.navds-dropzone--dragging .navds-dropzone__area-release > .navds-dropzone__area-release__text {
+.aksel-dropzone--dragging .aksel-dropzone__area-release > .aksel-dropzone__area-release__text {
   transition: visibility var(--__axc-dropzone-animation-length-long) var(--__axc-dropzone-animation-over-under);
   visibility: visible;
 }
 
-.navds-dropzone--dragging .navds-dropzone__area-release {
+.aksel-dropzone--dragging .aksel-dropzone__area-release {
   color: var(--ax-text-accent-subtle);
   top: 50%;
   transform: translateY(-50%);
 }
 
-.navds-dropzone__area-disabled {
+.aksel-dropzone__area-disabled {
   color: var(--ax-text-neutral-subtle);
   display: flex;
   align-items: center;
@@ -148,15 +148,15 @@
 }
 
 /* ----------------------------- FileUpload Item ---------------------------- */
-.navds-file-upload :is(ul, li),
-ul:has(> li.navds-file-item),
-li.navds-file-item {
+.aksel-file-upload :is(ul, li),
+ul:has(> li.aksel-file-item),
+li.aksel-file-item {
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
-.navds-file-item__inner {
+.aksel-file-item__inner {
   background-color: var(--ax-bg-raised);
   border: 1px solid var(--ax-border-neutral-subtleA);
   outline-offset: -1px;
@@ -168,11 +168,11 @@ li.navds-file-item {
   align-items: flex-start;
 }
 
-.navds-file-item--error > .navds-file-item__inner {
+.aksel-file-item--error > .aksel-file-item__inner {
   outline: 2px solid var(--ax-border-danger-strong);
 }
 
-.navds-file-item__icon {
+.aksel-file-item__icon {
   background-color: var(--ax-bg-neutral-moderateA);
   color: var(--ax-text-neutral);
   border-radius: var(--ax-border-radius-full);
@@ -189,19 +189,19 @@ li.navds-file-item {
   }
 }
 
-.navds-file-item__icon--loading {
+.aksel-file-item__icon--loading {
   background-color: transparent;
 }
 
-.navds-file-item__file-info {
+.aksel-file-item__file-info {
   word-break: break-word;
 }
 
-.navds-file-item__button {
+.aksel-file-item__button {
   margin-left: auto;
 }
 
-.navds-file-item__error {
+.aksel-file-item__error {
   display: grid;
   transition-property: grid-template-rows, padding-top;
   transition-duration: 250ms;
@@ -209,7 +209,7 @@ li.navds-file-item {
   overflow: hidden;
   grid-template-rows: 0fr;
 
-  .navds-file-item--error & {
+  .aksel-file-item--error & {
     grid-template-rows: 1fr;
     padding-top: var(--ax-space-4);
   }

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

@@ -1,8 +1,8 @@
-.navds-form-progress__bar {
+.aksel-form-progress__bar {
   margin-bottom: var(--ax-space-8);
 }
 
-.navds-form-progress__button {
+.aksel-form-progress__button {
   &:focus-visible {
     z-index: 1;
   }
@@ -14,12 +14,12 @@
   }
 }
 
-.navds-form-progress__button[data-state="closed"] .navds-form-progress__btn-txt-hide,
-.navds-form-progress__button[data-state="open"] .navds-form-progress__btn-txt-show {
+.aksel-form-progress__button[data-state="closed"] .aksel-form-progress__btn-txt-hide,
+.aksel-form-progress__button[data-state="open"] .aksel-form-progress__btn-txt-show {
   display: none;
 }
 
-.navds-form-progress__collapsible {
+.aksel-form-progress__collapsible {
   display: grid;
   visibility: hidden;
   overflow: hidden;
@@ -50,6 +50,6 @@
   }
 }
 
-.navds-form-progress__collapsible-content {
+.aksel-form-progress__collapsible-content {
   min-height: 0;
 }

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

@@ -1,11 +1,11 @@
-.navds-form-summary {
+.aksel-form-summary {
   overflow: hidden;
   border: 1px solid var(--ax-border-neutral-subtleA);
   border-radius: var(--ax-border-radius-xlarge);
   background: var(--ax-bg-raised);
 }
 
-.navds-form-summary__header {
+.aksel-form-summary__header {
   background: var(--ax-bg-neutral-moderateA);
   padding: var(--ax-space-20) var(--ax-space-20) var(--ax-space-16) var(--ax-space-20);
   display: flex;
@@ -14,70 +14,70 @@
 }
 
 @media (max-width: 479px) {
-  .navds-form-summary__header {
+  .aksel-form-summary__header {
     padding: var(--ax-space-16) var(--ax-space-16) var(--ax-space-12) var(--ax-space-16);
     flex-direction: column;
   }
 }
 
-.navds-form-summary__edit {
+.aksel-form-summary__edit {
   flex-shrink: 0;
   margin-top: var(--ax-space-4);
   align-self: flex-start;
 }
 
-.navds-form-summary > .navds-form-summary__answers {
+.aksel-form-summary > .aksel-form-summary__answers {
   border-top: 1px solid var(--ax-border-neutral-subtleA);
 }
 
-.navds-form-summary__answers {
+.aksel-form-summary__answers {
   padding: var(--ax-space-16) var(--ax-space-20) var(--ax-space-20) var(--ax-space-20);
   margin: 0;
 }
 
 @media (max-width: 479px) {
-  .navds-form-summary__answers {
+  .aksel-form-summary__answers {
     padding: var(--ax-space-12) var(--ax-space-16) var(--ax-space-16) var(--ax-space-16);
   }
 }
 
-.navds-form-summary__answer:not(:last-child) {
+.aksel-form-summary__answer:not(:last-child) {
   margin-bottom: var(--ax-space-16);
   padding-bottom: var(--ax-space-16);
   border-bottom: 1px solid var(--ax-border-neutral-subtleA);
 }
 
-.navds-form-summary__answer:has(.navds-form-summary__answer) {
+.aksel-form-summary__answer:has(.aksel-form-summary__answer) {
   padding-bottom: var(--ax-space-24);
 }
 
-.navds-form-summary__answer:has(.navds-form-summary__answer):last-child {
+.aksel-form-summary__answer:has(.aksel-form-summary__answer):last-child {
   padding-bottom: 0;
 }
 
 @media (max-width: 479px) {
-  .navds-form-summary__answer:not(:last-child) {
+  .aksel-form-summary__answer:not(:last-child) {
     margin-bottom: var(--ax-space-12);
     padding-bottom: var(--ax-space-12);
   }
 
-  .navds-form-summary__answer:has(.navds-form-summary__answer) {
+  .aksel-form-summary__answer:has(.aksel-form-summary__answer) {
     padding-bottom: var(--ax-space-20);
   }
 }
 
-.navds-form-summary__value:first-of-type {
+.aksel-form-summary__value:first-of-type {
   margin-top: var(--ax-space-4);
 }
 
-.navds-form-summary__value .navds-form-summary__answers {
+.aksel-form-summary__value .aksel-form-summary__answers {
   margin-top: var(--ax-space-8);
   padding: var(--ax-space-16) var(--ax-space-20);
   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 {
+  & .aksel-form-summary__answer {
     border-color: var(--ax-border-info-subtleA);
   }
 }

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

@@ -1,32 +1,32 @@
-.navds-form-field {
+.aksel-form-field {
   display: grid;
   justify-items: start;
   gap: var(--ax-space-8);
 }
 
-.navds-form-field__description {
+.aksel-form-field__description {
   margin-top: -0.375rem;
   color: var(--ax-text-neutral-subtle);
 }
 
-.navds-form-field--disabled {
+.aksel-form-field--disabled {
   opacity: var(--ax-opacity-disabled);
   cursor: not-allowed;
 }
 
-.navds-form-field__error:empty {
+.aksel-form-field__error:empty {
   display: none;
 }
 
-.navds-form-field__subdescription {
+.aksel-form-field__subdescription {
   color: var(--ax-text-neutral-subtle);
 }
 
-.navds-form-field--readonly > :where(.navds-form-field__label) {
+.aksel-form-field--readonly > :where(.aksel-form-field__label) {
   display: inline-flex;
 }
 
-.navds-form-field__readonly-icon {
+.aksel-form-field__readonly-icon {
   margin-top: var(--ax-space-2);
   margin-right: var(--ax-space-4);
   flex-shrink: 0;
@@ -34,7 +34,7 @@
 }
 
 @media (forced-colors: active) {
-  .navds-form-field--disabled {
+  .aksel-form-field--disabled {
     opacity: 1;
   }
 }

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

@@ -1,11 +1,11 @@
-.navds-checkbox,
-.navds-radio {
+.aksel-checkbox,
+.aksel-radio {
   position: relative;
   width: fit-content;
 }
 
-.navds-checkbox__input,
-.navds-radio__input {
+.aksel-checkbox__input,
+.aksel-radio__input {
   position: absolute;
   width: 3rem;
   height: 3rem;
@@ -16,8 +16,8 @@
   cursor: pointer;
 }
 
-.navds-checkbox__label,
-.navds-radio__label {
+.aksel-checkbox__label,
+.aksel-radio__label {
   padding: var(--ax-space-12) 0;
   cursor: pointer;
   display: flex;
@@ -27,8 +27,8 @@
   --__axc-radio-checkbox-readonly-border: var(--ax-border-neutral-subtle);
 }
 
-.navds-checkbox__label::before,
-.navds-radio__label::before {
+.aksel-checkbox__label::before,
+.aksel-radio__label::before {
   content: "";
   border-radius: var(--ax-border-radius-medium);
   background-color: var(--ax-bg-input);
@@ -38,38 +38,38 @@
   border: 2px solid var(--ax-border-neutral);
 }
 
-.navds-radio__label::before {
+.aksel-radio__label::before {
   border-radius: var(--ax-border-radius-full);
 }
 
-.navds-checkbox__content,
-.navds-radio__content {
+.aksel-checkbox__content,
+.aksel-radio__content {
   display: flex;
   flex-direction: column;
   gap: 0.125rem;
 }
 
-.navds-checkbox--small > .navds-checkbox__input,
-.navds-radio--small > .navds-radio__input {
+.aksel-checkbox--small > .aksel-checkbox__input,
+.aksel-radio--small > .aksel-radio__input {
   width: 2rem;
   height: 2rem;
   top: 0;
   left: -0.375rem;
 }
 
-.navds-checkbox--small > .navds-checkbox__label,
-.navds-radio--small > .navds-radio__label {
+.aksel-checkbox--small > .aksel-checkbox__label,
+.aksel-radio--small > .aksel-radio__label {
   padding: var(--ax-space-6) 0;
 }
 
-.navds-checkbox--small > .navds-checkbox__label::before,
-.navds-radio--small > .navds-radio__label::before {
+.aksel-checkbox--small > .aksel-checkbox__label::before,
+.aksel-radio--small > .aksel-radio__label::before {
   width: 1.25rem;
   height: 1.25rem;
 }
 
-.navds-checkbox__input:focus + .navds-checkbox__label::after,
-.navds-radio__input:focus + .navds-radio__label::after {
+.aksel-checkbox__input:focus + .aksel-checkbox__label::after,
+.aksel-radio__input:focus + .aksel-radio__label::after {
   content: "";
   position: absolute;
   width: 100%;
@@ -80,16 +80,16 @@
   pointer-events: none;
 }
 
-.navds-checkbox--small > .navds-checkbox__input:focus + .navds-checkbox__label::after,
-.navds-radio--small > .navds-radio__input:focus + .navds-radio__label::after {
+.aksel-checkbox--small > .aksel-checkbox__input:focus + .aksel-checkbox__label::after,
+.aksel-radio--small > .aksel-radio__input:focus + .aksel-radio__label::after {
   height: calc(100% - var(--ax-space-12));
 }
 
-.navds-checkbox__icon-indeterminate {
+.aksel-checkbox__icon-indeterminate {
   display: none;
 }
 
-.navds-checkbox__input:indeterminate + .navds-checkbox__label > .navds-checkbox__icon-indeterminate {
+.aksel-checkbox__input:indeterminate + .aksel-checkbox__label > .aksel-checkbox__icon-indeterminate {
   display: block;
   width: 0.75rem;
   height: 0.25rem;
@@ -101,26 +101,26 @@
   pointer-events: none;
 }
 
-.navds-checkbox--small .navds-checkbox__input:indeterminate + .navds-checkbox__label > .navds-checkbox__icon-indeterminate {
+.aksel-checkbox--small .aksel-checkbox__input:indeterminate + .aksel-checkbox__label > .aksel-checkbox__icon-indeterminate {
   transform: translate(var(--ax-space-4), -50%);
   height: 0.1875rem;
 }
 
-.navds-checkbox__input:where(:checked, :indeterminate) + .navds-checkbox__label::before {
+.aksel-checkbox__input:where(:checked, :indeterminate) + .aksel-checkbox__label::before {
   background-color: var(--ax-bg-accent-strong-pressed);
   border-color: var(--ax-bg-accent-strong-pressed);
 }
 
-.navds-checkbox__input:where(:checked, :indeterminate):not(:disabled):hover + .navds-checkbox__label::before {
+.aksel-checkbox__input:where(:checked, :indeterminate):not(:disabled):hover + .aksel-checkbox__label::before {
   border-color: var(--ax-bg-accent-strong-hover);
   background-color: var(--ax-bg-accent-strong-hover);
 }
 
-.navds-checkbox__input:where(:not(:checked)) + .navds-checkbox__label > .navds-checkbox__icon {
+.aksel-checkbox__input:where(:not(:checked)) + .aksel-checkbox__label > .aksel-checkbox__icon {
   display: none;
 }
 
-.navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
+.aksel-checkbox__input:checked + .aksel-checkbox__label > .aksel-checkbox__icon {
   color: var(--ax-bg-default);
   position: absolute;
   height: 1.5rem;
@@ -132,104 +132,104 @@
   align-items: center;
 }
 
-.navds-checkbox--small .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
+.aksel-checkbox--small .aksel-checkbox__input:checked + .aksel-checkbox__label > .aksel-checkbox__icon {
   transform: translate(0.25rem, -10%);
 }
 
 /* Tailwind sets all svg to block */
-.navds-checkbox__icon > svg {
+.aksel-checkbox__icon > svg {
   display: inline;
   vertical-align: initial;
 }
 
-.navds-checkbox--small > .navds-checkbox__input:checked + .navds-checkbox__label::before {
+.aksel-checkbox--small > .aksel-checkbox__input:checked + .aksel-checkbox__label::before {
   background-position: 0.25rem center;
 }
 
-.navds-radio__input:checked + .navds-radio__label::before {
+.aksel-radio__input:checked + .aksel-radio__label::before {
   background-color: var(--ax-bg-input);
   border: 8px solid var(--ax-bg-accent-strong-pressed);
 }
 
-.navds-radio--small > .navds-radio__input:checked + .navds-radio__label::before {
+.aksel-radio--small > .aksel-radio__input:checked + .aksel-radio__label::before {
   border-width: 6px;
 }
 
-.navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
-.navds-radio__input:hover:not(:disabled, :checked) + .navds-radio__label {
+.aksel-checkbox__input:hover:not(:disabled) + .aksel-checkbox__label,
+.aksel-radio__input:hover:not(:disabled, :checked) + .aksel-radio__label {
   color: var(--ax-text-accent-subtle);
 }
 
-.navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
-.navds-radio__input:hover:not(:disabled, :checked) + .navds-radio__label::before {
+.aksel-checkbox__input:hover:not(:disabled, :checked, :indeterminate) + .aksel-checkbox__label::before,
+.aksel-radio__input:hover:not(:disabled, :checked) + .aksel-radio__label::before {
   border-color: var(--ax-border-accent-strong);
   background-color: var(--ax-bg-accent-moderate-hoverA);
 }
 
-.navds-checkbox--error > .navds-checkbox__input:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:not(:disabled, :checked) + .navds-radio__label::before {
+.aksel-checkbox--error > .aksel-checkbox__input:not(:disabled, :checked, :indeterminate) + .aksel-checkbox__label::before,
+.aksel-radio--error > .aksel-radio__input:not(:disabled, :checked) + .aksel-radio__label::before {
   border-color: var(--ax-border-danger-strong);
 }
 
-.navds-checkbox--error > .navds-checkbox__input:not(:disabled, :checked, :indeterminate):hover + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:not(:disabled, :checked):hover + .navds-radio__label::before {
+.aksel-checkbox--error > .aksel-checkbox__input:not(:disabled, :checked, :indeterminate):hover + .aksel-checkbox__label::before,
+.aksel-radio--error > .aksel-radio__input:not(:disabled, :checked):hover + .aksel-radio__label::before {
   background-color: var(--ax-bg-danger-moderate-hoverA);
 }
 
-.navds-checkbox--error > .navds-checkbox__input:is(:checked, :indeterminate):not(:disabled) + .navds-checkbox__label::before {
+.aksel-checkbox--error > .aksel-checkbox__input:is(:checked, :indeterminate):not(:disabled) + .aksel-checkbox__label::before {
   background-color: var(--ax-bg-danger-strong-pressed);
   border-color: var(--ax-bg-danger-strong-pressed);
 }
 
-.navds-radio--error > .navds-radio__input:checked + .navds-radio__label::before {
+.aksel-radio--error > .aksel-radio__input:checked + .aksel-radio__label::before {
   border-color: var(--ax-bg-danger-strong-pressed);
 }
 
-.navds-checkbox--disabled,
-.navds-radio--disabled {
+.aksel-checkbox--disabled,
+.aksel-radio--disabled {
   opacity: var(--ax-opacity-disabled);
 }
 
-.navds-checkbox--disabled > .navds-checkbox__input,
-.navds-checkbox--disabled > .navds-checkbox__label,
-.navds-radio--disabled > .navds-radio__input,
-.navds-radio--disabled > .navds-radio__label {
+.aksel-checkbox--disabled > .aksel-checkbox__input,
+.aksel-checkbox--disabled > .aksel-checkbox__label,
+.aksel-radio--disabled > .aksel-radio__input,
+.aksel-radio--disabled > .aksel-radio__label {
   cursor: not-allowed;
 }
 
 /* Readonly */
-.navds-checkbox--readonly > :where(.navds-checkbox__input, .navds-checkbox__label),
-.navds-radio--readonly > :where(.navds-radio__input, .navds-radio__label) {
+.aksel-checkbox--readonly > :where(.aksel-checkbox__input, .aksel-checkbox__label),
+.aksel-radio--readonly > :where(.aksel-radio__input, .aksel-radio__label) {
   cursor: default;
 }
 
-.navds-checkbox--readonly .navds-checkbox__label-text {
+.aksel-checkbox--readonly .aksel-checkbox__label-text {
   display: inline-flex;
 }
 
-.navds-checkbox--readonly > .navds-checkbox__input:hover + .navds-checkbox__label,
-.navds-radio--readonly > .navds-radio__input:hover + .navds-radio__label {
+.aksel-checkbox--readonly > .aksel-checkbox__input:hover + .aksel-checkbox__label,
+.aksel-radio--readonly > .aksel-radio__input:hover + .aksel-radio__label {
   color: var(--ax-text-neutral);
 }
 
-.navds-checkbox--readonly > .navds-checkbox__input:not(:disabled) + .navds-checkbox__label::before,
-.navds-checkbox--readonly > .navds-checkbox__input:hover .navds-checkbox__label::before,
-.navds-radio--readonly > .navds-radio__input:not(:disabled, :checked) + .navds-radio__label::before,
-.navds-radio--readonly > .navds-radio__input:hover:not(:checked, :focus) + .navds-radio__label::before {
+.aksel-checkbox--readonly > .aksel-checkbox__input:not(:disabled) + .aksel-checkbox__label::before,
+.aksel-checkbox--readonly > .aksel-checkbox__input:hover .aksel-checkbox__label::before,
+.aksel-radio--readonly > .aksel-radio__input:not(:disabled, :checked) + .aksel-radio__label::before,
+.aksel-radio--readonly > .aksel-radio__input:hover:not(:checked, :focus) + .aksel-radio__label::before {
   background-color: var(--__axc-radio-checkbox-readonly-bg);
   border-color: var(--__axc-radio-checkbox-readonly-border);
 }
 
-.navds-checkbox--readonly > .navds-checkbox__input:where(:checked, :indeterminate) + .navds-checkbox__label::before {
+.aksel-checkbox--readonly > .aksel-checkbox__input:where(:checked, :indeterminate) + .aksel-checkbox__label::before {
   border-color: var(--__axc-radio-checkbox-readonly-border);
   background-color: var(--__axc-radio-checkbox-readonly-bg);
 }
 
-.navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
+.aksel-checkbox--readonly > .aksel-checkbox__input:checked + .aksel-checkbox__label > .aksel-checkbox__icon {
   color: var(--ax-text-neutral-subtle);
 }
 
-.navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
+.aksel-radio--readonly > .aksel-radio__input:checked + .aksel-radio__label::before {
   background-color: var(--ax-bg-neutral-strong);
   border-width: 0;
   box-shadow:
@@ -237,13 +237,13 @@
     inset 0 0 0 8px var(--ax-bg-neutral-moderate);
 }
 
-.navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label > .navds-checkbox__icon-indeterminate {
+.aksel-checkbox--readonly > .aksel-checkbox__input:indeterminate + .aksel-checkbox__label > .aksel-checkbox__icon-indeterminate {
   background-color: var(--ax-text-neutral-subtle);
 }
 
 @media (forced-colors: active) {
-  .navds-checkbox,
-  .navds-radio {
+  .aksel-checkbox,
+  .aksel-radio {
     --__axc-radio-checkbox-high-contrast-bg: field;
     --__axc-radio-checkbox-high-contrast-text: fieldtext;
     --__axc-radio-checkbox-high-contrast-highlight: highlight;
@@ -252,54 +252,54 @@
     --ax-border-focus: Highlight;
   }
 
-  .navds-checkbox__label::before,
-  .navds-radio__label::before {
+  .aksel-checkbox__label::before,
+  .aksel-radio__label::before {
     border: 1px solid var(--__axc-radio-checkbox-high-contrast-text);
     background-color: var(--__axc-radio-checkbox-high-contrast-bg);
   }
 
-  .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
+  .aksel-checkbox__input:checked + .aksel-checkbox__label > .aksel-checkbox__icon {
     color: var(--__axc-radio-checkbox-high-contrast-text);
   }
 
-  .navds-checkbox__input:indeterminate + .navds-checkbox__label > .navds-checkbox__icon-indeterminate {
+  .aksel-checkbox__input:indeterminate + .aksel-checkbox__label > .aksel-checkbox__icon-indeterminate {
     background-color: var(--__axc-radio-checkbox-high-contrast-text);
   }
 
-  .navds-radio__input:checked + .navds-radio__label::before {
+  .aksel-radio__input:checked + .aksel-radio__label::before {
     border: 6px solid var(--__axc-radio-checkbox-high-contrast-text);
   }
 
-  :not(.navds-checkbox--readonly) > .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
-  :not(.navds-radio--readonly) > .navds-radio__input:hover:not(:disabled) + .navds-radio__label {
+  :not(.aksel-checkbox--readonly) > .aksel-checkbox__input:hover:not(:disabled) + .aksel-checkbox__label,
+  :not(.aksel-radio--readonly) > .aksel-radio__input:hover:not(:disabled) + .aksel-radio__label {
     color: highlight;
   }
 
-  .navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label::before {
+  .aksel-checkbox--readonly > .aksel-checkbox__input:checked + .aksel-checkbox__label::before {
     border: 1px solid var(--__axc-radio-checkbox-high-contrast-text);
     background-color: var(--__axc-radio-checkbox-high-contrast-bg);
   }
 
-  .navds-checkbox--readonly
-    > .navds-checkbox__input:indeterminate
-    + .navds-checkbox__label
-    > .navds-checkbox__icon-indeterminate {
+  .aksel-checkbox--readonly
+    > .aksel-checkbox__input:indeterminate
+    + .aksel-checkbox__label
+    > .aksel-checkbox__icon-indeterminate {
     background-color: var(--__axc-radio-checkbox-high-contrast-text);
   }
 
-  .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
+  .aksel-radio--readonly > .aksel-radio__input:checked + .aksel-radio__label::before {
     border-width: 6px;
   }
 
-  .navds-checkbox--disabled,
-  .navds-radio--disabled {
+  .aksel-checkbox--disabled,
+  .aksel-radio--disabled {
     opacity: 1;
 
     --__axc-radio-checkbox-high-contrast-bg: field;
     --__axc-radio-checkbox-high-contrast-text: graytext;
   }
 
-  :is(.navds-checkbox--disabled, .navds-radio--disabled) :is(.navds-checkbox__label, .navds-radio__label) {
+  :is(.aksel-checkbox--disabled, .aksel-radio--disabled) :is(.aksel-checkbox__label, .aksel-radio__label) {
     color: graytext;
   }
 }

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

@@ -1,78 +1,78 @@
-.navds-search {
+.aksel-search {
   display: flex;
   flex-direction: column;
   width: 100%;
 }
 
-.navds-search__wrapper-inner {
+.aksel-search__wrapper-inner {
   position: relative;
   width: 100%;
 }
 
-.navds-search--with-size {
-  & .navds-search__wrapper-inner {
+.aksel-search--with-size {
+  & .aksel-search__wrapper-inner {
     width: inherit;
   }
 
-  & .navds-search__wrapper {
+  & .aksel-search__wrapper {
     width: fit-content;
   }
 }
 
-.navds-search__wrapper {
+.aksel-search__wrapper {
   display: inline-flex;
   align-items: center;
   border-radius: var(--ax-border-radius-large);
 
   /* We have to outline the whole container to include the Search-buttons */
-  &:has(.navds-search__input:focus-visible) {
+  &:has(.aksel-search__input:focus-visible) {
     outline: 3px solid var(--ax-border-focus);
     outline-offset: 3px;
   }
 }
 
 /* ------------------------------ Search input ------------------------------ */
-.navds-search__input {
+.aksel-search__input {
   padding-right: var(--ax-space-40);
 
   &:focus-visible {
     outline: none;
   }
 
-  &.navds-search__input--primary,
-  &.navds-search__input--secondary {
+  &.aksel-search__input--primary,
+  &.aksel-search__input--secondary {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
     border-right: none;
   }
 }
 
-.navds-search__input--simple {
+.aksel-search__input--simple {
   padding-left: var(--ax-space-40);
 }
 
 /* ------------------------------ Search sizing ----------------------------- */
-.navds-form-field--small {
-  & .navds-search__input {
+.aksel-form-field--small {
+  & .aksel-search__input {
     padding-right: var(--ax-space-28);
   }
 
-  & .navds-search__input--simple {
+  & .aksel-search__input--simple {
     padding-left: var(--ax-space-28);
   }
 
-  & .navds-search__search-icon {
+  & .aksel-search__search-icon {
     left: var(--ax-space-4);
     font-size: 1.25rem;
   }
 
-  & .navds-search__button-clear {
+  & .aksel-search__button-clear {
     right: var(--ax-space-4);
   }
 }
 
 /* ------------------------------- Search icon ------------------------------ */
-.navds-search__search-icon {
+.aksel-search__search-icon {
   position: absolute;
   left: var(--ax-space-8);
   top: 50%;
@@ -80,13 +80,13 @@
   pointer-events: none;
   font-size: 1.5rem;
 
-  .navds-search--disabled & {
+  .aksel-search--disabled & {
     opacity: var(--ax-opacity-disabled);
   }
 }
 
 /* --------------------------- Search Clear-button -------------------------- */
-.navds-search__button-clear {
+.aksel-search__button-clear {
   position: absolute;
   right: var(--ax-space-8);
   top: 50%;
@@ -94,14 +94,14 @@
 }
 
 /* ------------------------------ Search Button ----------------------------- */
-.navds-search__button-search {
+.aksel-search__button-search {
   flex-shrink: 0;
   border-radius: 0;
   border-top-right-radius: var(--ax-border-radius-large);
   border-bottom-right-radius: var(--ax-border-radius-large);
 }
 
-.navds-search__button-search.navds-button--secondary {
+.aksel-search__button-search.aksel-button--secondary {
   --__axc-button-border-width: 1px;
   --__axc-button-border-color: var(--ax-border-neutral);
 
@@ -115,35 +115,35 @@
 }
 
 /* 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) {
+.aksel-search:not(.aksel-search--error, .aksel-search--disabled)
+  .aksel-search__wrapper:has(.aksel-search__input:is(:hover, :focus-visible))
+  .aksel-search__button-search.aksel-button--secondary:not(:hover, :active) {
   --__axc-button-border-color: var(--ax-border-accent-strong);
 }
 
 /* --------------------------- Search Error-state --------------------------- */
-.navds-search--error .navds-search__input:not(:disabled) {
+.aksel-search--error .aksel-search__input:not(:disabled) {
   border-color: var(--ax-border-danger-strong);
   box-shadow:
     inset -2px 0 0 0 var(--ax-border-danger-strong),
     inset 0 0 0 1px var(--ax-border-danger-strong);
 
-  &.navds-search__input--simple {
+  &.aksel-search__input--simple {
     box-shadow: inset 0 0 0 1px var(--ax-border-danger-strong);
   }
 }
 
 /* -------------------------- Search Focus layering ------------------------- */
-.navds-search__input:focus-visible,
-.navds-search__button-search:focus-visible {
+.aksel-search__input:focus-visible,
+.aksel-search__button-search:focus-visible {
   z-index: 1;
 }
 
 /* -------------------------- Search disabled state ------------------------- */
 
 /* We can't re-use disabled-state for form-fields since opacity multiplies on search-button */
-.navds-search--disabled {
-  .navds-search__input {
+.aksel-search--disabled {
+  .aksel-search__input {
     opacity: var(--ax-opacity-disabled);
     cursor: not-allowed;
   }

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

@@ -1,4 +1,4 @@
-.navds-select__input {
+.aksel-select__input {
   appearance: none;
   background-color: var(--ax-bg-input);
   border-radius: var(--ax-border-radius-large);
@@ -32,7 +32,7 @@
   }
 }
 
-.navds-select__container {
+.aksel-select__container {
   position: relative;
   display: flex;
   width: 100%;
@@ -40,7 +40,7 @@
 }
 
 /* ------------------------------- Select Icon ------------------------------ */
-.navds-select__chevron {
+.aksel-select__chevron {
   position: absolute;
   font-size: 1.5rem;
   right: var(--ax-space-8);
@@ -56,15 +56,15 @@
 }
 
 /* ------------------------------ Select Sizing ----------------------------- */
-.navds-form-field--small {
-  & .navds-select__input {
+.aksel-form-field--small {
+  & .aksel-select__input {
     min-height: 2rem;
     padding-block: 0;
   }
 }
 
 /* --------------------------- Select Error-state --------------------------- */
-.navds-select--error {
+.aksel-select--error {
   > * select {
     box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
     border-color: var(--ax-border-danger-strong);
@@ -78,7 +78,7 @@
 }
 
 /* ----------------------------- Select disabled ---------------------------- */
-.navds-select__input:disabled {
+.aksel-select__input:disabled {
   background-color: var(--ax-bg-input);
   border: 1px solid var(--ax-border-neutral);
   box-shadow: none;
@@ -93,15 +93,15 @@
   }
 
   @media (forced-colors: active) {
-    & + .navds-select__chevron {
+    & + .aksel-select__chevron {
       color: GrayText;
     }
   }
 }
 
 /* ----------------------------- Select Readonly ---------------------------- */
-.navds-select--readonly {
-  & .navds-select__input {
+.aksel-select--readonly {
+  & .aksel-select__input {
     background-color: var(--ax-bg-neutral-moderate);
     border-color: var(--ax-border-neutral-subtleA);
     cursor: default;
@@ -115,7 +115,7 @@
     }
   }
 
-  & .navds-select__chevron {
+  & .aksel-select__chevron {
     color: var(--ax-text-neutral-subtle);
   }
 }

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

@@ -1,15 +1,15 @@
-.navds-switch {
+.aksel-switch {
   position: relative;
   min-height: 3rem;
   width: fit-content;
 }
 
-.navds-switch--small {
+.aksel-switch--small {
   min-height: 2rem;
 }
 
 /* ------------------------------ Switch Input ------------------------------ */
-.navds-switch__input {
+.aksel-switch__input {
   cursor: pointer;
   position: absolute;
   z-index: 1;
@@ -18,19 +18,19 @@
   opacity: 0;
   top: 0;
 
-  .navds-switch--small > & {
+  .aksel-switch--small > & {
     height: 2rem;
     top: 0;
   }
 }
 
 /* -------------------------- Switch content/label -------------------------- */
-.navds-switch__label-wrapper {
+.aksel-switch__label-wrapper {
   cursor: pointer;
   color: var(--ax-text-neutral);
 }
 
-.navds-switch__content {
+.aksel-switch__content {
   --__axc-switch-block-padding: 0.75rem;
 
   position: relative;
@@ -39,19 +39,19 @@
   gap: var(--ax-space-2);
   padding: var(--__axc-switch-block-padding) 0 var(--__axc-switch-block-padding) 3.25rem;
 
-  .navds-switch--right & {
+  .aksel-switch--right & {
     padding: var(--__axc-switch-block-padding) 3.25rem var(--__axc-switch-block-padding) 0;
   }
 
-  .navds-switch--small & {
+  .aksel-switch--small & {
     --__axc-switch-block-padding: 0.375rem;
   }
 
-  &.navds-switch--with-description {
+  &.aksel-switch--with-description {
     padding-bottom: 0;
   }
 
-  .navds-switch__input:focus ~ .navds-switch__label-wrapper > &::after {
+  .aksel-switch__input:focus ~ .aksel-switch__label-wrapper > &::after {
     content: "";
     position: absolute;
     left: 0;
@@ -63,22 +63,22 @@
     pointer-events: none;
   }
 
-  .navds-switch__input:focus ~ .navds-switch__label-wrapper > &.navds-switch--with-description::after {
+  .aksel-switch__input:focus ~ .aksel-switch__label-wrapper > &.aksel-switch--with-description::after {
     height: calc(100% - var(--__axc-switch-block-padding) * 1);
   }
 }
 
-.navds-switch__input:hover ~ .navds-switch__label-wrapper,
-.navds-switch__label-wrapper:hover {
+.aksel-switch__input:hover ~ .aksel-switch__label-wrapper,
+.aksel-switch__label-wrapper:hover {
   color: var(--ax-text-accent-subtle);
 }
 
-.navds-switch__input:disabled:hover ~ .navds-switch__label-wrapper {
+.aksel-switch__input:disabled:hover ~ .aksel-switch__label-wrapper {
   color: inherit;
 }
 
 /* ------------------------------ Switch Track ------------------------------ */
-.navds-switch__track {
+.aksel-switch__track {
   width: 2.75rem;
   height: 1.5rem;
   background-color: var(--ax-bg-input);
@@ -91,38 +91,38 @@
   transition-duration: 100ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 
-  .navds-switch--small > & {
+  .aksel-switch--small > & {
     top: var(--ax-space-4);
   }
 
-  .navds-switch__input:checked ~ & {
+  .aksel-switch__input:checked ~ & {
     background-color: var(--ax-bg-accent-strong-pressed);
     border-color: var(--ax-bg-accent-strong-pressed);
   }
 
-  .navds-switch__input:hover:checked ~ & {
+  .aksel-switch__input:hover:checked ~ & {
     background-color: var(--ax-bg-accent-strong-hover);
     border-color: var(--ax-bg-accent-strong-hover);
   }
 
-  .navds-switch__input:disabled ~ & {
+  .aksel-switch__input:disabled ~ & {
     background-color: var(--ax-bg-input);
     border-color: var(--ax-border-neutral);
   }
 
-  .navds-switch__input:checked:disabled ~ & {
+  .aksel-switch__input:checked:disabled ~ & {
     background-color: var(--ax-bg-accent-strong-pressed);
     border-color: var(--ax-bg-accent-strong-pressed);
   }
 
-  .navds-switch--standalone > .navds-switch__input:focus ~ & {
+  .aksel-switch--standalone > .aksel-switch__input:focus ~ & {
     outline: 3px solid var(--ax-border-focus);
     outline-offset: 3px;
   }
 }
 
 /* ------------------------------ Switch Thumb ------------------------------ */
-.navds-switch__thumb {
+.aksel-switch__thumb {
   background-color: var(--ax-bg-neutral-strong);
   border-radius: var(--ax-border-radius-full);
   width: 1.125rem;
@@ -136,7 +136,7 @@
   left: 0.0625rem;
   top: 0.0625rem;
 
-  .navds-switch__input:checked ~ .navds-switch__track > & {
+  .aksel-switch__input:checked ~ .aksel-switch__track > & {
     background-color: var(--ax-bg-raised);
     transform: translateX(1.25rem);
     color: var(--ax-text-accent-subtle);
@@ -146,91 +146,91 @@
     top: 0;
   }
 
-  .navds-switch__input:checked ~ .navds-switch__track > & > .navds-switch__checkmark {
+  .aksel-switch__input:checked ~ .aksel-switch__track > & > .aksel-switch__checkmark {
     visibility: visible;
     opacity: 1;
   }
 }
 
-.navds-switch__checkmark {
+.aksel-switch__checkmark {
   visibility: hidden;
   opacity: 0;
   transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 @media (hover: hover) and (pointer: fine) {
-  .navds-switch__input:hover:not(:disabled) ~ .navds-switch__track > .navds-switch__thumb {
+  .aksel-switch__input:hover:not(:disabled) ~ .aksel-switch__track > .aksel-switch__thumb {
     transform: translateX(0.0625rem);
   }
 
-  .navds-switch__input:checked:hover:not(:disabled) ~ .navds-switch__track > .navds-switch__thumb {
+  .aksel-switch__input:checked:hover:not(:disabled) ~ .aksel-switch__track > .aksel-switch__thumb {
     transform: translateX(1.19rem);
   }
 }
 
-.navds-switch--right {
+.aksel-switch--right {
   width: auto;
 
-  & .navds-switch__input,
-  & .navds-switch__track {
+  & .aksel-switch__input,
+  & .aksel-switch__track {
     right: 0;
     left: auto;
   }
 }
 
 /* -------------------------- Switch Disabled-state ------------------------- */
-.navds-switch__input:disabled {
+.aksel-switch__input:disabled {
   appearance: none;
 }
 
-.navds-switch--disabled:not(.navds-switch--loading) {
+.aksel-switch--disabled:not(.aksel-switch--loading) {
   opacity: var(--ax-opacity-disabled);
 }
 
-.navds-switch__input:disabled,
-.navds-switch__input:disabled ~ .navds-switch__label-wrapper {
+.aksel-switch__input:disabled,
+.aksel-switch__input:disabled ~ .aksel-switch__label-wrapper {
   cursor: not-allowed;
 }
 
 /* -------------------------- Switch Readonly state ------------------------- */
-.navds-switch--readonly {
-  & > .navds-switch__track,
-  & > .navds-switch__input:hover ~ .navds-switch__track,
-  & > .navds-switch__input:checked ~ .navds-switch__track,
-  & > .navds-switch__input:checked:hover ~ .navds-switch__track {
+.aksel-switch--readonly {
+  & > .aksel-switch__track,
+  & > .aksel-switch__input:hover ~ .aksel-switch__track,
+  & > .aksel-switch__input:checked ~ .aksel-switch__track,
+  & > .aksel-switch__input:checked:hover ~ .aksel-switch__track {
     background-color: var(--ax-bg-neutral-moderate);
     border-color: var(--ax-border-neutral-subtleA);
   }
 
-  & > .navds-switch__label-wrapper,
-  & > .navds-switch__input {
+  & > .aksel-switch__label-wrapper,
+  & > .aksel-switch__input {
     cursor: default;
   }
 
-  & > .navds-switch__input:hover ~ .navds-switch__label-wrapper,
-  & .navds-switch__label-wrapper:hover {
+  & > .aksel-switch__input:hover ~ .aksel-switch__label-wrapper,
+  & .aksel-switch__label-wrapper:hover {
     color: var(--ax-text-neutral);
   }
 
-  & .navds-switch__label {
+  & .aksel-switch__label {
     display: inline-flex;
   }
 
-  & .navds-switch__thumb {
+  & .aksel-switch__thumb {
     background-color: var(--ax-bg-neutral-strong);
   }
 
-  & > .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+  & > .aksel-switch__input:checked ~ .aksel-switch__track > .aksel-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 {
+    & > .aksel-switch__input:hover ~ .aksel-switch__track > .aksel-switch__thumb {
       transform: translateX(0);
     }
 
-    & > .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
+    & > .aksel-switch__input:checked:hover ~ .aksel-switch__track > .aksel-switch__thumb {
       transform: translateX(1.25rem);
     }
   }
@@ -238,40 +238,40 @@
 
 /* ------------------------ Switch Forced colors mode ----------------------- */
 @media (forced-colors: active) {
-  .navds-switch__input:hover ~ .navds-switch__label-wrapper,
-  .navds-switch__label-wrapper:hover {
+  .aksel-switch__input:hover ~ .aksel-switch__label-wrapper,
+  .aksel-switch__label-wrapper:hover {
     color: highlight;
   }
 
-  .navds-switch__thumb,
-  .navds-switch--readonly .navds-switch__thumb {
+  .aksel-switch__thumb,
+  .aksel-switch--readonly .aksel-switch__thumb {
     background-color: fieldtext !important;
   }
 
-  .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb,
-  .navds-switch--readonly .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+  .aksel-switch__input:checked ~ .aksel-switch__track > .aksel-switch__thumb,
+  .aksel-switch--readonly .aksel-switch__input:checked ~ .aksel-switch__track > .aksel-switch__thumb {
     color: field;
   }
 
-  .navds-switch__input:focus ~ .navds-switch__label-wrapper > .navds-switch__content::after,
-  .navds-switch--standalone > .navds-switch__input:focus ~ .navds-switch__track {
+  .aksel-switch__input:focus ~ .aksel-switch__label-wrapper > .aksel-switch__content::after,
+  .aksel-switch--standalone > .aksel-switch__input:focus ~ .aksel-switch__track {
     outline: 3px solid highlight;
   }
 
-  .navds-switch--disabled:not(.navds-switch--loading) {
+  .aksel-switch--disabled:not(.aksel-switch--loading) {
     opacity: 1;
   }
 
-  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__thumb {
+  .aksel-switch--disabled:not(.aksel-switch--loading) .aksel-switch__thumb {
     background-color: graytext !important;
   }
 
-  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__track {
+  .aksel-switch--disabled:not(.aksel-switch--loading) .aksel-switch__track {
     border-color: graytext !important;
   }
 
-  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__label-wrapper,
-  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__label-wrapper:hover {
+  .aksel-switch--disabled:not(.aksel-switch--loading) .aksel-switch__label-wrapper,
+  .aksel-switch--disabled:not(.aksel-switch--loading) .aksel-switch__label-wrapper:hover {
     color: graytext !important;
   }
 }

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

@@ -1,4 +1,4 @@
-.navds-text-field__input {
+.aksel-text-field__input {
   appearance: none;
   padding: var(--ax-space-8);
   background: var(--ax-bg-input);
@@ -33,17 +33,17 @@
   }
 }
 
-.navds-form-field--small .navds-text-field__input {
+.aksel-form-field--small .aksel-text-field__input {
   padding: 0 var(--ax-space-8);
   min-height: 2rem;
 }
 
-.navds-text-field--error .navds-text-field__input:not(:disabled) {
+.aksel-text-field--error .aksel-text-field__input:not(:disabled) {
   border-color: var(--ax-border-danger-strong);
   box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
 }
 
-.navds-text-field--readonly .navds-text-field__input {
+.aksel-text-field--readonly .aksel-text-field__input {
   background-color: var(--ax-bg-neutral-moderate);
   border-color: var(--ax-border-neutral-subtleA);
   cursor: default;
@@ -52,7 +52,7 @@
 /**
   * Removes default search icon
   */
-.navds-text-field__input[type="search"] {
+.aksel-text-field__input[type="search"] {
   &::-webkit-search-decoration,
   &::-webkit-search-cancel-button,
   &::-webkit-search-results-button,
@@ -62,7 +62,7 @@
 }
 
 @media (forced-colors: active) {
-  .navds-text-field__input {
+  .aksel-text-field__input {
     background-color: field;
     color: fieldtext;
   }

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

@@ -1,4 +1,4 @@
-.navds-textarea__input {
+.aksel-textarea__input {
   /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
   height: var(--__axc-textarea-height);
   appearance: none;
@@ -31,51 +31,51 @@
     cursor: not-allowed;
   }
 
-  .navds-form-field--small & {
+  .aksel-form-field--small & {
     padding: var(--ax-space-6);
   }
 
-  .navds-textarea--readonly & {
+  .aksel-textarea--readonly & {
     background-color: var(--ax-bg-neutral-moderate);
     border-color: var(--ax-border-neutral-subtleA);
     cursor: default;
   }
 }
 
-.navds-textarea__counter {
+.aksel-textarea__counter {
   margin-top: -0.25rem;
   color: var(--ax-text-neutral-subtle);
 }
 
-.navds-textarea__counter--error {
+.aksel-textarea__counter--error {
   color: var(--ax-text-danger-subtle);
 }
 
-.navds-textarea__sr-counter {
+.aksel-textarea__sr-counter {
   display: none;
 }
 
-.navds-textarea__input:focus ~ .navds-textarea__sr-counter {
+.aksel-textarea__input:focus ~ .aksel-textarea__sr-counter {
   display: initial;
 }
 
-.navds-textarea--resize-both .navds-textarea__input {
+.aksel-textarea--resize-both .aksel-textarea__input {
   resize: both;
   border-end-end-radius: 0;
 }
 
-.navds-textarea--resize-horizontal .navds-textarea__input {
+.aksel-textarea--resize-horizontal .aksel-textarea__input {
   resize: horizontal;
   border-end-end-radius: 0;
 }
 
-.navds-textarea--resize-vertical .navds-textarea__input {
+.aksel-textarea--resize-vertical .aksel-textarea__input {
   resize: vertical;
   border-end-end-radius: 0;
 }
 
-.navds-textarea--autoscrollbar,
-.navds-textarea--autoscrollbar .navds-textarea__wrapper {
+.aksel-textarea--autoscrollbar,
+.aksel-textarea--autoscrollbar .aksel-textarea__wrapper {
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -85,17 +85,17 @@
   margin: -3px;
 }
 
-.navds-textarea--autoscrollbar .navds-textarea__input {
+.aksel-textarea--autoscrollbar .aksel-textarea__input {
   scrollbar-gutter: stable; /* Needed to prevent scrollbar from appearing too early */
 }
 
-.navds-textarea--error .navds-textarea__input:not(:disabled) {
+.aksel-textarea--error .aksel-textarea__input:not(:disabled) {
   box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
   border-color: var(--ax-border-danger-strong);
 }
 
 @media (forced-colors: active) {
-  .navds-textarea__input {
+  .aksel-textarea__input {
     background-color: field;
     color: fieldtext;
   }

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

@@ -1,4 +1,4 @@
-.navds-guide-panel {
+.aksel-guide-panel {
   --__axc-guide-panel-guide-size: 5rem;
 
   position: relative;
@@ -32,7 +32,7 @@
   }
 }
 
-.navds-guide {
+.aksel-guide {
   box-sizing: border-box;
   border: 2px solid var(--ax-border-info);
   border-radius: var(--ax-border-radius-full);
@@ -42,42 +42,42 @@
   flex-shrink: 0;
 }
 
-.navds-guide svg,
-.navds-guide img {
+.aksel-guide svg,
+.aksel-guide img {
   height: 100%;
   width: 100%;
 }
 
-.navds-guide-panel__content {
+.aksel-guide-panel__content {
   background-color: var(--ax-bg-raised);
   border: 2px solid var(--ax-border-info);
   border-radius: var(--ax-border-radius-xlarge);
   position: relative;
 
-  .navds-guide-panel:is([data-poster="true"], [data-responsive="true"]) > & {
+  .aksel-guide-panel:is([data-poster="true"], [data-responsive="true"]) > & {
     margin-top: var(--ax-space-20);
   }
 
-  .navds-guide-panel[data-poster="false"] > & {
+  .aksel-guide-panel[data-poster="false"] > & {
     margin-left: var(--ax-space-20);
   }
 
   @media (min-width: 480px) {
-    .navds-guide-panel[data-responsive="true"] > & {
+    .aksel-guide-panel[data-responsive="true"] > & {
       margin-top: 0;
       margin-left: var(--ax-space-20);
     }
   }
 }
 
-.navds-guide-panel__content-inner {
+.aksel-guide-panel__content-inner {
   padding: var(--ax-space-12) var(--ax-space-16);
   border-radius: var(--ax-border-radius-xlarge);
   background-color: var(--ax-bg-raised);
   position: relative;
   height: 100%;
 
-  .navds-guide-panel[data-poster="false"] & {
+  .aksel-guide-panel[data-poster="false"] & {
     min-height: var(--__axc-guide-panel-guide-size);
   }
 
@@ -86,30 +86,30 @@
       padding: var(--ax-space-16) var(--ax-space-20);
     }
 
-    .navds-guide-panel[data-responsive="true"] & {
+    .aksel-guide-panel[data-responsive="true"] & {
       min-height: var(--__axc-guide-panel-guide-size);
     }
   }
 }
 
-.navds-guide-panel__tail {
+.aksel-guide-panel__tail {
   position: absolute;
   z-index: 0;
 
-  .navds-guide-panel:is([data-poster="true"], [data-responsive="true"]) & {
+  .aksel-guide-panel:is([data-poster="true"], [data-responsive="true"]) & {
     left: 50%;
     top: calc(var(--ax-space-16) * -1 - 2px);
     transform: translateX(-48%);
   }
 
-  .navds-guide-panel[data-poster="false"] & {
+  .aksel-guide-panel[data-poster="false"] & {
     top: calc(var(--__axc-guide-panel-guide-size) / 2);
     left: calc(var(--ax-space-20) * -1 - 2px);
     transform: translateY(-48%) rotateZ(-90deg) scaleX(-1);
   }
 
   @media (min-width: 480px) {
-    .navds-guide-panel[data-responsive="true"] & {
+    .aksel-guide-panel[data-responsive="true"] & {
       top: calc(var(--__axc-guide-panel-guide-size) / 2);
       left: calc(var(--ax-space-20) * -1 - 2px);
       transform: translateY(-48%) rotateZ(-90deg) scaleX(-1);

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

@@ -1,4 +1,4 @@
-.navds-help-text__button {
+.aksel-help-text__button {
   margin: 0;
   border: 0;
   cursor: pointer;
@@ -12,44 +12,44 @@
   padding: calc(var(--ax-space-4) / 2);
 }
 
-.navds-help-text__icon {
+.aksel-help-text__icon {
   border-radius: var(--ax-border-radius-full);
 }
 
-.navds-help-text__popover.navds-popover {
+.aksel-help-text__popover.aksel-popover {
   background-color: var(--ax-bg-info-moderate);
   max-width: min(65ch, calc(100vw - var(--ax-space-24)));
   border-radius: var(--ax-border-radius-large);
   border: 1px solid var(--ax-border-info);
 }
 
-.navds-help-text__icon--filled {
+.aksel-help-text__icon--filled {
   display: none;
 }
 
-.navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon {
+.aksel-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .aksel-help-text__icon {
   display: none;
 }
 
-.navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon--filled {
+.aksel-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .aksel-help-text__icon--filled {
   display: inherit;
   color: var(--ax-bg-info-strong-hover);
 }
 
-.navds-help-text__button[aria-expanded="true"] > .navds-help-text__icon--filled {
+.aksel-help-text__button[aria-expanded="true"] > .aksel-help-text__icon--filled {
   color: var(--ax-bg-info-strong-pressed);
 }
 
 @media (forced-colors: active) {
-  .navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon {
+  .aksel-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .aksel-help-text__icon {
     display: inherit;
   }
 
-  .navds-help-text__button:hover > .navds-help-text__icon {
+  .aksel-help-text__button:hover > .aksel-help-text__icon {
     color: highlight;
   }
 
-  .navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon--filled {
+  .aksel-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .aksel-help-text__icon--filled {
     display: none;
   }
 }

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

@@ -11,6 +11,7 @@
 @import "./baseline/print.darkside.css" layer(aksel.print);
 
 /* ------------------------------- Components ------------------------------- */
+@import "./theme.darkside.css" layer(aksel.components);
 @import "./typography.darkside.css" layer(aksel.components);
 @import "./button.darkside.css" layer(aksel.components);
 @import "./chips.darkside.css" layer(aksel.components);
@@ -36,6 +37,7 @@
 @import "./help-text.darkside.css" layer(aksel.components);
 @import "./internalheader.darkside.css" layer(aksel.components);
 @import "./link.darkside.css" layer(aksel.components);
+@import "./link-panel.darkside.css" layer(aksel.components);
 @import "./loader.darkside.css" layer(aksel.components);
 @import "./modal.darkside.css" layer(aksel.components);
 @import "./pagination.darkside.css" layer(aksel.components);
@@ -52,7 +54,6 @@
 @import "./table.darkside.css" layer(aksel.components);
 @import "./tabs.darkside.css" layer(aksel.components);
 @import "./list.darkside.css" layer(aksel.components);
-@import "./theme.darkside.css" layer(aksel.components);
 
 /* --------------------------------- Layout --------------------------------- */
 @import "./primitives/index.css" layer(aksel.layout);

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

@@ -1,4 +1,4 @@
-.navds-internalheader {
+.aksel-internalheader {
   display: flex;
   align-self: stretch;
   background: var(--ax-bg-raised);
@@ -7,14 +7,14 @@
 }
 
 @media (forced-colors: active) {
-  .navds-internalheader {
+  .aksel-internalheader {
     background-color: ButtonFace;
     border: solid 1px ButtonText;
     color: ButtonText;
   }
 }
 
-.navds-internalheader__title {
+.aksel-internalheader__title {
   border: none;
   overflow: visible;
   background: transparent;
@@ -44,14 +44,14 @@
   }
 }
 
-.navds-internalheader__user {
+.aksel-internalheader__user {
   padding: 0 var(--ax-space-20);
   border-left: 1px solid var(--ax-border-neutral-subtleA);
   display: flex;
   align-items: center;
 }
 
-.navds-internalheader__button {
+.aksel-internalheader__button {
   border: none;
   margin: 0;
   padding: 0 var(--ax-space-12);
@@ -74,7 +74,7 @@
 }
 
 @media (forced-colors: active) {
-  .navds-internalheader__button:hover {
+  .aksel-internalheader__button:hover {
     background-color: highlighttext;
     border-color: highlight;
     color: highlight;
@@ -83,8 +83,8 @@
   }
 }
 
-.navds-internalheader__title,
-.navds-internalheader__button {
+.aksel-internalheader__title,
+.aksel-internalheader__button {
   &:focus-visible {
     outline: 3px solid var(--ax-border-focus);
     outline-offset: -4px;
@@ -95,7 +95,7 @@
   }
 }
 
-.navds-internalheader__user-button {
+.aksel-internalheader__user-button {
   padding-left: var(--ax-space-20);
   gap: var(--ax-space-16);
 }

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

@@ -0,0 +1,37 @@
+.aksel-link-panel {
+  text-decoration: none;
+  color: var(--ax-text-neutral);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ax-space-16);
+
+  &:hover {
+    border-color: var(--ax-border-accent);
+
+    & .aksel-link-panel__title {
+      text-decoration: underline;
+      color: var(--ax-text-accent-subtle);
+    }
+  }
+
+  &:focus-visible {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+  }
+}
+
+.aksel-link-panel__chevron {
+  flex-shrink: 0;
+  font-size: 1.5rem;
+  transition: transform 200ms;
+}
+
+.aksel-link-panel:hover > .aksel-link-panel__chevron,
+.aksel-link-panel:focus-within > .aksel-link-panel__chevron {
+  transform: translateX(4px);
+}
+
+.aksel-link-panel__description {
+  margin-top: var(--a-space-4);
+}

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

@@ -1,4 +1,4 @@
-.navds-link {
+.aksel-link {
   color: var(--ax-text-accent-subtle);
   display: inline-flex;
   align-items: center;
@@ -18,7 +18,7 @@
     border-radius: 1px;
   }
 
-  &.navds-link--inline-text {
+  &.aksel-link--inline-text {
     display: inline;
 
     & > svg {
@@ -30,7 +30,7 @@
     }
   }
 
-  &.navds-link--remove-underline {
+  &.aksel-link--remove-underline {
     text-decoration: none;
 
     &:hover {
@@ -44,21 +44,21 @@
   }
 }
 
-.navds-alert:not(.navds-alert--inline),
-.navds-confirmation-panel {
-  & .navds-link {
+.aksel-alert:not(.aksel-alert--inline),
+.aksel-confirmation-panel {
+  & .aksel-link {
     color: var(--ax-text-neutral);
   }
 }
 
-.navds-link--action {
+.aksel-link--action {
   color: var(--ax-text-accent-subtle);
 }
 
-.navds-link--neutral {
+.aksel-link--neutral {
   color: var(--ax-text-neutral);
 }
 
-.navds-link--subtle {
+.aksel-link--subtle {
   color: var(--ax-text-neutral-subtle);
 }

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

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

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

@@ -1,4 +1,4 @@
-.navds-loader {
+.aksel-loader {
   width: 1.5rem;
   display: inline-block;
   position: relative;
@@ -7,49 +7,49 @@
 
   --__axc-loader-stroke-width: 5.9;
 
-  &.navds-loader--3xlarge {
+  &.aksel-loader--3xlarge {
     width: 5.5rem;
     stroke-width: 5;
 
     --__axc-loader-stroke-width: 4.8;
   }
 
-  &.navds-loader--2xlarge {
+  &.aksel-loader--2xlarge {
     width: 4rem;
     stroke-width: 6;
 
     --__axc-loader-stroke-width: 5.8;
   }
 
-  &.navds-loader--xlarge {
+  &.aksel-loader--xlarge {
     width: 2.5rem;
     stroke-width: 6;
 
     --__axc-loader-stroke-width: 5.8;
   }
 
-  &.navds-loader--large {
+  &.aksel-loader--large {
     width: 2rem;
     stroke-width: 7;
 
     --__axc-loader-stroke-width: 6.8;
   }
 
-  &.navds-loader--medium {
+  &.aksel-loader--medium {
     width: 1.5rem;
     stroke-width: 7;
 
     --__axc-loader-stroke-width: 6.8;
   }
 
-  &.navds-loader--small {
+  &.aksel-loader--small {
     width: 1.25rem;
     stroke-width: 8;
 
     --__axc-loader-stroke-width: 7.8;
   }
 
-  &.navds-loader--xsmall {
+  &.aksel-loader--xsmall {
     width: 1rem;
     stroke-width: 8;
 
@@ -57,7 +57,7 @@
   }
 }
 
-.navds-loader__foreground {
+.aksel-loader__foreground {
   animation: loader-dasharray 1.5s ease-in-out infinite;
   stroke-dasharray: 80px, 200px;
   stroke-dashoffset: 0;
@@ -66,39 +66,39 @@
   stroke-width: var(--__axc-loader-stroke-width);
 }
 
-.navds-loader__background {
+.aksel-loader__background {
   stroke: var(--ax-border-neutral-subtleA);
   stroke-width: var(--__axc-loader-stroke-width);
 }
 
-.navds-loader--neutral {
-  & .navds-loader__foreground {
+.aksel-loader--neutral {
+  & .aksel-loader__foreground {
     stroke: var(--ax-border-neutral-strong);
   }
 }
 
-.navds-loader--interaction {
-  & .navds-loader__foreground {
+.aksel-loader--interaction {
+  & .aksel-loader__foreground {
     stroke: var(--ax-border-accent-strong);
   }
 
-  & .navds-loader__background {
+  & .aksel-loader__background {
     stroke: var(--ax-border-accent-subtleA);
   }
 }
 
-.navds-loader--inverted {
-  & .navds-loader__foreground {
+.aksel-loader--inverted {
+  & .aksel-loader__foreground {
     stroke: var(--ax-border-neutral-subtle);
   }
 
-  & .navds-loader__background {
+  & .aksel-loader__background {
     stroke: var(--ax-border-neutral-strong);
   }
 }
 
-.navds-loader--transparent {
-  & .navds-loader__background {
+.aksel-loader--transparent {
+  & .aksel-loader__background {
     stroke: transparent;
   }
 }
@@ -127,7 +127,7 @@
 }
 
 @media (forced-colors: active) {
-  .navds-loader__background {
+  .aksel-loader__background {
     stroke: canvastext;
   }
 }

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

@@ -1,8 +1,8 @@
-.navds-modal__document-body {
+.aksel-modal__document-body {
   overflow: hidden;
 }
 
-.navds-modal {
+.aksel-modal {
   --__axc-modal-bg: var(--ax-bg-raised);
 
   background-color: var(--__axc-modal-bg);
@@ -23,7 +23,7 @@
   }
 }
 
-.navds-modal--polyfilled {
+.aksel-modal--polyfilled {
   top: 50%;
   transform: translate(0, -50%);
 
@@ -38,7 +38,7 @@
     display: none; /* from polyfill */
   }
 
-  & .navds-modal--polyfilled {
+  & .aksel-modal--polyfilled {
     overflow: auto;
   }
 }
@@ -53,48 +53,48 @@
   left: 0;
 }
 
-.navds-modal--medium {
+.aksel-modal--medium {
   width: 700px;
 }
 
-.navds-modal--small {
+.aksel-modal--small {
   width: 450px;
 
-  & .navds-modal__header {
+  & .aksel-modal__header {
     padding: var(--ax-space-12) var(--ax-space-16);
   }
 
-  & .navds-modal__body {
+  & .aksel-modal__body {
     padding: var(--ax-space-12) var(--ax-space-16);
   }
 
-  & .navds-modal__footer {
+  & .aksel-modal__footer {
     padding: var(--ax-space-12) var(--ax-space-16);
   }
 }
 
 @media (min-width: 480px) {
-  .navds-modal {
+  .aksel-modal {
     max-width: calc(100% - 2em);
   }
 
-  .navds-modal--autowidth {
+  .aksel-modal--autowidth {
     max-width: min(700px, calc(100% - 2em));
   }
 }
 
 @media (min-height: 480px) {
-  .navds-modal {
+  .aksel-modal {
     max-height: calc(100% - 2em);
   }
 
-  .navds-modal--top {
+  .aksel-modal--top {
     margin-top: 2em;
     max-height: calc(100% - 4em);
   }
 }
 
-.navds-modal::backdrop {
+.aksel-modal::backdrop {
   /*
    * Cannot use --ax-bg-overlay because ::backdrop does not inherit from anything but itself.
    * TODO: Consider adding `::backdrop` to global token definitions.
@@ -104,7 +104,7 @@
   animation: akselModalBackdropFadeIn 0.35s cubic-bezier(0.15, 1, 0.3, 1);
 }
 
-.navds-modal--polyfilled + .backdrop /* Cannot be combined with ::backdrop selector */ {
+.aksel-modal--polyfilled + .backdrop /* Cannot be combined with ::backdrop selector */ {
   background: #0214317d;
 
   /* From polyfill: */
@@ -116,16 +116,16 @@
   left: 0;
 }
 
-.navds-modal__button {
+.aksel-modal__button {
   margin-left: var(--ax-space-16);
   float: right;
 }
 
-.navds-modal__header {
+.aksel-modal__header {
   padding: var(--ax-space-16) var(--ax-space-20);
 }
 
-.navds-modal__header-icon {
+.aksel-modal__header-icon {
   & svg {
     display: inline;
     vertical-align: -0.25rem;
@@ -133,12 +133,12 @@
   }
 }
 
-.navds-modal__label {
+.aksel-modal__label {
   font-weight: var(--ax-font-weight-bold);
   color: var(--ax-text-neutral-subtle);
 }
 
-.navds-modal__body {
+.aksel-modal__body {
   padding: var(--ax-space-16) var(--ax-space-20);
   overflow: auto;
   overscroll-behavior: contain;
@@ -157,23 +157,23 @@
   background-repeat: no-repeat;
 }
 
-.navds-modal__header + .navds-modal__body {
+.aksel-modal__header + .aksel-modal__body {
   padding-top: var(--ax-space-0);
 }
 
-.navds-modal__footer {
+.aksel-modal__footer {
   display: flex;
   flex-flow: row-reverse wrap;
   gap: var(--ax-space-16);
   padding: var(--ax-space-16) var(--ax-space-20);
 }
 
-.navds-modal__footer :nth-of-type(2) {
+.aksel-modal__footer :nth-of-type(2) {
   margin-left: auto;
 }
 
 /* When Datepicker is used nested inside a Modal */
-.navds-modal--polyfilled .navds-modal--polyfilled.navds-date__nested-modal {
+.aksel-modal--polyfilled .aksel-modal--polyfilled.aksel-date__nested-modal {
   min-width: fit-content;
   max-width: 100vw;
   max-height: 100vh;
@@ -206,7 +206,7 @@
 }
 
 @media (forced-colors: active) {
-  .navds-modal {
+  .aksel-modal {
     outline: 2px solid transparent;
   }
 }

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

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

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

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

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

@@ -1,4 +1,4 @@
-.navds-popover {
+.aksel-popover {
   z-index: 1000;
   background: var(--ax-bg-raised);
   box-shadow: var(--ax-shadow-dialog);
@@ -9,16 +9,16 @@
   max-width: calc(100vw - var(--ax-space-24));
 }
 
-.navds-popover__content {
+.aksel-popover__content {
   padding: var(--ax-space-16);
 }
 
 @media (min-width: 480px) {
-  .navds-popover__content {
+  .aksel-popover__content {
     padding: var(--ax-space-20);
   }
 }
 
-.navds-popover--hidden {
+.aksel-popover--hidden {
   display: none;
 }

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

@@ -1,4 +1,4 @@
-.navds-r-p {
+.aksel-r-p {
   --__axc-r-p-xs: initial;
   --__axc-r-p-sm: var(--__axc-r-p-xs);
   --__axc-r-p-md: var(--__axc-r-p-sm);
@@ -10,7 +10,7 @@
   padding: var(--__axc-r-padding);
 }
 
-.navds-r-pi {
+.aksel-r-pi {
   --__axc-r-pi-xs: initial;
   --__axc-r-pi-sm: var(--__axc-r-pi-xs);
   --__axc-r-pi-md: var(--__axc-r-pi-sm);
@@ -22,7 +22,7 @@
   padding-inline: var(--__axc-r-pi, var(--__axc-r-padding));
 }
 
-.navds-r-pb {
+.aksel-r-pb {
   --__axc-r-pb-xs: initial;
   --__axc-r-pb-sm: var(--__axc-r-pb-xs);
   --__axc-r-pb-md: var(--__axc-r-pb-sm);
@@ -34,7 +34,7 @@
   padding-block: var(--__axc-r-pb, var(--__axc-r-padding));
 }
 
-.navds-r-m {
+.aksel-r-m {
   --__axc-r-m-xs: initial;
   --__axc-r-m-sm: var(--__axc-r-m-xs);
   --__axc-r-m-md: var(--__axc-r-m-sm);
@@ -46,7 +46,7 @@
   margin: var(--__axc-r-margin);
 }
 
-.navds-r-mi {
+.aksel-r-mi {
   --__axc-r-mi-xs: initial;
   --__axc-r-mi-sm: var(--__axc-r-mi-xs);
   --__axc-r-mi-md: var(--__axc-r-mi-sm);
@@ -58,7 +58,7 @@
   margin-inline: var(--__axc-r-mi, var(--__axc-r-margin));
 }
 
-.navds-r-mb {
+.aksel-r-mb {
   --__axc-r-mb-xs: initial;
   --__axc-r-mb-sm: var(--__axc-r-mb-xs);
   --__axc-r-mb-md: var(--__axc-r-mb-sm);
@@ -70,7 +70,7 @@
   margin-block: var(--__axc-r-mb, var(--__axc-r-margin));
 }
 
-.navds-r-w {
+.aksel-r-w {
   --__axc-r-w-xs: initial;
   --__axc-r-w-sm: var(--__axc-r-w-xs);
   --__axc-r-w-md: var(--__axc-r-w-sm);
@@ -82,7 +82,7 @@
   width: var(--__axc-r-w);
 }
 
-.navds-r-minw {
+.aksel-r-minw {
   --__axc-r-minw-xs: initial;
   --__axc-r-minw-sm: var(--__axc-r-minw-xs);
   --__axc-r-minw-md: var(--__axc-r-minw-sm);
@@ -94,7 +94,7 @@
   min-width: var(--__axc-r-minw);
 }
 
-.navds-r-maxw {
+.aksel-r-maxw {
   --__axc-r-maxw-xs: initial;
   --__axc-r-maxw-sm: var(--__axc-r-maxw-xs);
   --__axc-r-maxw-md: var(--__axc-r-maxw-sm);
@@ -106,7 +106,7 @@
   max-width: var(--__axc-r-maxw);
 }
 
-.navds-r-h {
+.aksel-r-h {
   --__axc-r-h-xs: initial;
   --__axc-r-h-sm: var(--__axc-r-h-xs);
   --__axc-r-h-md: var(--__axc-r-h-sm);
@@ -118,7 +118,7 @@
   height: var(--__axc-r-h);
 }
 
-.navds-r-minh {
+.aksel-r-minh {
   --__axc-r-minh-xs: initial;
   --__axc-r-minh-sm: var(--__axc-r-minh-xs);
   --__axc-r-minh-md: var(--__axc-r-minh-sm);
@@ -130,7 +130,7 @@
   min-height: var(--__axc-r-minh);
 }
 
-.navds-r-maxh {
+.aksel-r-maxh {
   --__axc-r-maxh-xs: initial;
   --__axc-r-maxh-sm: var(--__axc-r-maxh-xs);
   --__axc-r-maxh-md: var(--__axc-r-maxh-sm);
@@ -142,7 +142,7 @@
   max-height: var(--__axc-r-maxh);
 }
 
-.navds-r-position {
+.aksel-r-position {
   --__axc-r-position-xs: initial;
   --__axc-r-position-sm: var(--__axc-r-position-xs);
   --__axc-r-position-md: var(--__axc-r-position-sm);
@@ -154,7 +154,7 @@
   position: var(--__axc-r-position);
 }
 
-.navds-r-inset {
+.aksel-r-inset {
   --__axc-r-inset-xs: initial;
   --__axc-r-inset-sm: var(--__axc-r-inset-xs);
   --__axc-r-inset-md: var(--__axc-r-inset-sm);
@@ -166,7 +166,7 @@
   inset: var(--__axc-r-inset);
 }
 
-.navds-r-top {
+.aksel-r-top {
   --__axc-r-top-xs: initial;
   --__axc-r-top-sm: var(--__axc-r-top-xs);
   --__axc-r-top-md: var(--__axc-r-top-sm);
@@ -178,7 +178,7 @@
   top: var(--__axc-r-top);
 }
 
-.navds-r-right {
+.aksel-r-right {
   --__axc-r-right-xs: initial;
   --__axc-r-right-sm: var(--__axc-r-right-xs);
   --__axc-r-right-md: var(--__axc-r-right-sm);
@@ -190,7 +190,7 @@
   right: var(--__axc-r-right);
 }
 
-.navds-r-bottom {
+.aksel-r-bottom {
   --__axc-r-bottom-xs: initial;
   --__axc-r-bottom-sm: var(--__axc-r-bottom-xs);
   --__axc-r-bottom-md: var(--__axc-r-bottom-sm);
@@ -202,7 +202,7 @@
   bottom: var(--__axc-r-bottom);
 }
 
-.navds-r-left {
+.aksel-r-left {
   --__axc-r-left-xs: initial;
   --__axc-r-left-sm: var(--__axc-r-left-xs);
   --__axc-r-left-md: var(--__axc-r-left-sm);
@@ -214,7 +214,7 @@
   left: var(--__axc-r-left);
 }
 
-.navds-r-overflow {
+.aksel-r-overflow {
   --__axc-r-overflow-xs: initial;
   --__axc-r-overflow-sm: var(--__axc-r-overflow-xs);
   --__axc-r-overflow-md: var(--__axc-r-overflow-sm);
@@ -226,7 +226,7 @@
   overflow: var(--__axc-r-overflow);
 }
 
-.navds-r-overflowx {
+.aksel-r-overflowx {
   --__axc-r-overflowx-xs: initial;
   --__axc-r-overflowx-sm: var(--__axc-r-overflowx-xs);
   --__axc-r-overflowx-md: var(--__axc-r-overflowx-sm);
@@ -238,7 +238,7 @@
   overflow-x: var(--__axc-r-overflowx);
 }
 
-.navds-r-overflowy {
+.aksel-r-overflowy {
   --__axc-r-overflowy-xs: initial;
   --__axc-r-overflowy-sm: var(--__axc-r-overflowy-xs);
   --__axc-r-overflowy-md: var(--__axc-r-overflowy-sm);
@@ -250,7 +250,7 @@
   overflow-y: var(--__axc-r-overflowy);
 }
 
-.navds-r-flex-basis {
+.aksel-r-flex-basis {
   --__axc-r-flex-basis-xs: initial;
   --__axc-r-flex-basis-sm: var(--__axc-r-flex-basis-xs);
   --__axc-r-flex-basis-md: var(--__axc-r-flex-basis-sm);
@@ -262,7 +262,7 @@
   flex-basis: var(--__axc-r-flex-basis);
 }
 
-.navds-r-flex-grow {
+.aksel-r-flex-grow {
   --__axc-r-flex-grow-xs: initial;
   --__axc-r-flex-grow-sm: var(--__axc-r-flex-grow-xs);
   --__axc-r-flex-grow-md: var(--__axc-r-flex-grow-sm);
@@ -274,7 +274,7 @@
   flex-grow: var(--__axc-r-flex-grow);
 }
 
-.navds-r-flex-shrink {
+.aksel-r-flex-shrink {
   --__axc-r-flex-shrink-xs: initial;
   --__axc-r-flex-shrink-sm: var(--__axc-r-flex-shrink-xs);
   --__axc-r-flex-shrink-md: var(--__axc-r-flex-shrink-sm);
@@ -286,7 +286,7 @@
   flex-shrink: var(--__axc-r-flex-shrink);
 }
 
-.navds-r-grid-column {
+.aksel-r-grid-column {
   --__axc-r-grid-column-xs: initial;
   --__axc-r-grid-column-sm: var(--__axc-r-grid-column-xs);
   --__axc-r-grid-column-md: var(--__axc-r-grid-column-sm);
@@ -299,511 +299,511 @@
 }
 
 @media (min-width: 480px) {
-  .navds-r-p {
+  .aksel-r-p {
     --__axc-r-padding: var(--__axc-r-p-sm);
   }
 
-  .navds-r-pi {
+  .aksel-r-pi {
     --__axc-r-pi: var(--__axc-r-pi-sm);
   }
 
-  .navds-r-pb {
+  .aksel-r-pb {
     --__axc-r-pb: var(--__axc-r-pb-sm);
   }
 
-  .navds-r-m {
+  .aksel-r-m {
     --__axc-r-margin: var(--__axc-r-m-sm);
   }
 
-  .navds-r-mi {
+  .aksel-r-mi {
     --__axc-r-mi: var(--__axc-r-mi-sm);
   }
 
-  .navds-r-mb {
+  .aksel-r-mb {
     --__axc-r-mb: var(--__axc-r-mb-sm);
   }
 
-  .navds-r-w {
+  .aksel-r-w {
     --__axc-r-w: var(--__axc-r-w-sm);
   }
 
-  .navds-r-minw {
+  .aksel-r-minw {
     --__axc-r-minw: var(--__axc-r-minw-sm);
   }
 
-  .navds-r-maxw {
+  .aksel-r-maxw {
     --__axc-r-maxw: var(--__axc-r-maxw-sm);
   }
 
-  .navds-r-h {
+  .aksel-r-h {
     --__axc-r-h: var(--__axc-r-h-sm);
   }
 
-  .navds-r-minh {
+  .aksel-r-minh {
     --__axc-r-minh: var(--__axc-r-minh-sm);
   }
 
-  .navds-r-maxh {
+  .aksel-r-maxh {
     --__axc-r-maxh: var(--__axc-r-maxh-sm);
   }
 
-  .navds-r-position {
+  .aksel-r-position {
     --__axc-r-position: var(--__axc-r-position-sm);
   }
 
-  .navds-r-inset {
+  .aksel-r-inset {
     --__axc-r-inset: var(--__axc-r-inset-sm);
   }
 
-  .navds-r-top {
+  .aksel-r-top {
     --__axc-r-top: var(--__axc-r-top-sm);
   }
 
-  .navds-r-right {
+  .aksel-r-right {
     --__axc-r-right: var(--__axc-r-right-sm);
   }
 
-  .navds-r-bottom {
+  .aksel-r-bottom {
     --__axc-r-bottom: var(--__axc-r-bottom-sm);
   }
 
-  .navds-r-left {
+  .aksel-r-left {
     --__axc-r-left: var(--__axc-r-left-sm);
   }
 
-  .navds-r-overflow {
+  .aksel-r-overflow {
     --__axc-r-overflow: var(--__axc-r-overflow-sm);
   }
 
-  .navds-r-overflowx {
+  .aksel-r-overflowx {
     --__axc-r-overflowx: var(--__axc-r-overflowx-sm);
   }
 
-  .navds-r-overflowy {
+  .aksel-r-overflowy {
     --__axc-r-overflowy: var(--__axc-r-overflowy-sm);
   }
 
-  .navds-r-flex-basis {
+  .aksel-r-flex-basis {
     --__axc-r-flex-basis: var(--__axc-r-flex-basis-sm);
   }
 
-  .navds-r-flex-grow {
+  .aksel-r-flex-grow {
     --__axc-r-flex-grow: var(--__axc-r-flex-grow-sm);
   }
 
-  .navds-r-flex-shrink {
+  .aksel-r-flex-shrink {
     --__axc-r-flex-shrink: var(--__axc-r-flex-shrink-sm);
   }
 
-  .navds-r-grid-column {
+  .aksel-r-grid-column {
     --__axc-r-grid-column: var(--__axc-r-grid-column-sm);
   }
 }
 
 @media (min-width: 768px) {
-  .navds-r-p {
+  .aksel-r-p {
     --__axc-r-padding: var(--__axc-r-p-md);
   }
 
-  .navds-r-pi {
+  .aksel-r-pi {
     --__axc-r-pi: var(--__axc-r-pi-md);
   }
 
-  .navds-r-pb {
+  .aksel-r-pb {
     --__axc-r-pb: var(--__axc-r-pb-md);
   }
 
-  .navds-r-m {
+  .aksel-r-m {
     --__axc-r-margin: var(--__axc-r-m-md);
   }
 
-  .navds-r-mi {
+  .aksel-r-mi {
     --__axc-r-mi: var(--__axc-r-mi-md);
   }
 
-  .navds-r-mb {
+  .aksel-r-mb {
     --__axc-r-mb: var(--__axc-r-mb-md);
   }
 
-  .navds-r-w {
+  .aksel-r-w {
     --__axc-r-w: var(--__axc-r-w-md);
   }
 
-  .navds-r-minw {
+  .aksel-r-minw {
     --__axc-r-minw: var(--__axc-r-minw-md);
   }
 
-  .navds-r-maxw {
+  .aksel-r-maxw {
     --__axc-r-maxw: var(--__axc-r-maxw-md);
   }
 
-  .navds-r-h {
+  .aksel-r-h {
     --__axc-r-h: var(--__axc-r-h-md);
   }
 
-  .navds-r-minh {
+  .aksel-r-minh {
     --__axc-r-minh: var(--__axc-r-minh-md);
   }
 
-  .navds-r-maxh {
+  .aksel-r-maxh {
     --__axc-r-maxh: var(--__axc-r-maxh-md);
   }
 
-  .navds-r-position {
+  .aksel-r-position {
     --__axc-r-position: var(--__axc-r-position-md);
   }
 
-  .navds-r-inset {
+  .aksel-r-inset {
     --__axc-r-inset: var(--__axc-r-inset-md);
   }
 
-  .navds-r-top {
+  .aksel-r-top {
     --__axc-r-top: var(--__axc-r-top-md);
   }
 
-  .navds-r-right {
+  .aksel-r-right {
     --__axc-r-right: var(--__axc-r-right-md);
   }
 
-  .navds-r-bottom {
+  .aksel-r-bottom {
     --__axc-r-bottom: var(--__axc-r-bottom-md);
   }
 
-  .navds-r-left {
+  .aksel-r-left {
     --__axc-r-left: var(--__axc-r-left-md);
   }
 
-  .navds-r-overflow {
+  .aksel-r-overflow {
     --__axc-r-overflow: var(--__axc-r-overflow-md);
   }
 
-  .navds-r-overflowx {
+  .aksel-r-overflowx {
     --__axc-r-overflowx: var(--__axc-r-overflowx-md);
   }
 
-  .navds-r-overflowy {
+  .aksel-r-overflowy {
     --__axc-r-overflowy: var(--__axc-r-overflowy-md);
   }
 
-  .navds-r-flex-basis {
+  .aksel-r-flex-basis {
     --__axc-r-flex-basis: var(--__axc-r-flex-basis-md);
   }
 
-  .navds-r-flex-grow {
+  .aksel-r-flex-grow {
     --__axc-r-flex-grow: var(--__axc-r-flex-grow-md);
   }
 
-  .navds-r-flex-shrink {
+  .aksel-r-flex-shrink {
     --__axc-r-flex-shrink: var(--__axc-r-flex-shrink-md);
   }
 
-  .navds-r-grid-column {
+  .aksel-r-grid-column {
     --__axc-r-grid-column: var(--__axc-r-grid-column-md);
   }
 }
 
 @media (min-width: 1024px) {
-  .navds-r-p {
+  .aksel-r-p {
     --__axc-r-padding: var(--__axc-r-p-lg);
   }
 
-  .navds-r-pi {
+  .aksel-r-pi {
     --__axc-r-pi: var(--__axc-r-pi-lg);
   }
 
-  .navds-r-pb {
+  .aksel-r-pb {
     --__axc-r-pb: var(--__axc-r-pb-lg);
   }
 
-  .navds-r-m {
+  .aksel-r-m {
     --__axc-r-margin: var(--__axc-r-m-lg);
   }
 
-  .navds-r-mi {
+  .aksel-r-mi {
     --__axc-r-mi: var(--__axc-r-mi-lg);
   }
 
-  .navds-r-mb {
+  .aksel-r-mb {
     --__axc-r-mb: var(--__axc-r-mb-lg);
   }
 
-  .navds-r-w {
+  .aksel-r-w {
     --__axc-r-w: var(--__axc-r-w-lg);
   }
 
-  .navds-r-minw {
+  .aksel-r-minw {
     --__axc-r-minw: var(--__axc-r-minw-lg);
   }
 
-  .navds-r-maxw {
+  .aksel-r-maxw {
     --__axc-r-maxw: var(--__axc-r-maxw-lg);
   }
 
-  .navds-r-h {
+  .aksel-r-h {
     --__axc-r-h: var(--__axc-r-h-lg);
   }
 
-  .navds-r-minh {
+  .aksel-r-minh {
     --__axc-r-minh: var(--__axc-r-minh-lg);
   }
 
-  .navds-r-maxh {
+  .aksel-r-maxh {
     --__axc-r-maxh: var(--__axc-r-maxh-lg);
   }
 
-  .navds-r-position {
+  .aksel-r-position {
     --__axc-r-position: var(--__axc-r-position-lg);
   }
 
-  .navds-r-inset {
+  .aksel-r-inset {
     --__axc-r-inset: var(--__axc-r-inset-lg);
   }
 
-  .navds-r-top {
+  .aksel-r-top {
     --__axc-r-top: var(--__axc-r-top-lg);
   }
 
-  .navds-r-right {
+  .aksel-r-right {
     --__axc-r-right: var(--__axc-r-right-lg);
   }
 
-  .navds-r-bottom {
+  .aksel-r-bottom {
     --__axc-r-bottom: var(--__axc-r-bottom-lg);
   }
 
-  .navds-r-left {
+  .aksel-r-left {
     --__axc-r-left: var(--__axc-r-left-lg);
   }
 
-  .navds-r-overflow {
+  .aksel-r-overflow {
     --__axc-r-overflow: var(--__axc-r-overflow-lg);
   }
 
-  .navds-r-overflowx {
+  .aksel-r-overflowx {
     --__axc-r-overflowx: var(--__axc-r-overflowx-lg);
   }
 
-  .navds-r-overflowy {
+  .aksel-r-overflowy {
     --__axc-r-overflowy: var(--__axc-r-overflowy-lg);
   }
 
-  .navds-r-flex-basis {
+  .aksel-r-flex-basis {
     --__axc-r-flex-basis: var(--__axc-r-flex-basis-lg);
   }
 
-  .navds-r-flex-grow {
+  .aksel-r-flex-grow {
     --__axc-r-flex-grow: var(--__axc-r-flex-grow-lg);
   }
 
-  .navds-r-flex-shrink {
+  .aksel-r-flex-shrink {
     --__axc-r-flex-shrink: var(--__axc-r-flex-shrink-lg);
   }
 
-  .navds-r-grid-column {
+  .aksel-r-grid-column {
     --__axc-r-grid-column: var(--__axc-r-grid-column-lg);
   }
 }
 
 @media (min-width: 1280px) {
-  .navds-r-p {
+  .aksel-r-p {
     --__axc-r-padding: var(--__axc-r-p-xl);
   }
 
-  .navds-r-pi {
+  .aksel-r-pi {
     --__axc-r-pi: var(--__axc-r-pi-xl);
   }
 
-  .navds-r-pb {
+  .aksel-r-pb {
     --__axc-r-pb: var(--__axc-r-pb-xl);
   }
 
-  .navds-r-m {
+  .aksel-r-m {
     --__axc-r-margin: var(--__axc-r-m-xl);
   }
 
-  .navds-r-mi {
+  .aksel-r-mi {
     --__axc-r-mi: var(--__axc-r-mi-xl);
   }
 
-  .navds-r-mb {
+  .aksel-r-mb {
     --__axc-r-mb: var(--__axc-r-mb-xl);
   }
 
-  .navds-r-w {
+  .aksel-r-w {
     --__axc-r-w: var(--__axc-r-w-xl);
   }
 
-  .navds-r-minw {
+  .aksel-r-minw {
     --__axc-r-minw: var(--__axc-r-minw-xl);
   }
 
-  .navds-r-maxw {
+  .aksel-r-maxw {
     --__axc-r-maxw: var(--__axc-r-maxw-xl);
   }
 
-  .navds-r-h {
+  .aksel-r-h {
     --__axc-r-h: var(--__axc-r-h-xl);
   }
 
-  .navds-r-minh {
+  .aksel-r-minh {
     --__axc-r-minh: var(--__axc-r-minh-xl);
   }
 
-  .navds-r-maxh {
+  .aksel-r-maxh {
     --__axc-r-maxh: var(--__axc-r-maxh-xl);
   }
 
-  .navds-r-position {
+  .aksel-r-position {
     --__axc-r-position: var(--__axc-r-position-xl);
   }
 
-  .navds-r-inset {
+  .aksel-r-inset {
     --__axc-r-inset: var(--__axc-r-inset-xl);
   }
 
-  .navds-r-top {
+  .aksel-r-top {
     --__axc-r-top: var(--__axc-r-top-xl);
   }
 
-  .navds-r-right {
+  .aksel-r-right {
     --__axc-r-right: var(--__axc-r-right-xl);
   }
 
-  .navds-r-bottom {
+  .aksel-r-bottom {
     --__axc-r-bottom: var(--__axc-r-bottom-xl);
   }
 
-  .navds-r-left {
+  .aksel-r-left {
     --__axc-r-left: var(--__axc-r-left-xl);
   }
 
-  .navds-r-overflow {
+  .aksel-r-overflow {
     --__axc-r-overflow: var(--__axc-r-overflow-xl);
   }
 
-  .navds-r-overflowx {
+  .aksel-r-overflowx {
     --__axc-r-overflowx: var(--__axc-r-overflowx-xl);
   }
 
-  .navds-r-overflowy {
+  .aksel-r-overflowy {
     --__axc-r-overflowy: var(--__axc-r-overflowy-xl);
   }
 
-  .navds-r-flex-basis {
+  .aksel-r-flex-basis {
     --__axc-r-flex-basis: var(--__axc-r-flex-basis-xl);
   }
 
-  .navds-r-flex-grow {
+  .aksel-r-flex-grow {
     --__axc-r-flex-grow: var(--__axc-r-flex-grow-xl);
   }
 
-  .navds-r-flex-shrink {
+  .aksel-r-flex-shrink {
     --__axc-r-flex-shrink: var(--__axc-r-flex-shrink-xl);
   }
 
-  .navds-r-grid-column {
+  .aksel-r-grid-column {
     --__axc-r-grid-column: var(--__axc-r-grid-column-xl);
   }
 }
 
 @media (min-width: 1440px) {
-  .navds-r-p {
+  .aksel-r-p {
     --__axc-r-padding: var(--__axc-r-p-2xl);
   }
 
-  .navds-r-pi {
+  .aksel-r-pi {
     --__axc-r-pi: var(--__axc-r-pi-2xl);
   }
 
-  .navds-r-pb {
+  .aksel-r-pb {
     --__axc-r-pb: var(--__axc-r-pb-2xl);
   }
 
-  .navds-r-m {
+  .aksel-r-m {
     --__axc-r-margin: var(--__axc-r-m-2xl);
   }
 
-  .navds-r-mi {
+  .aksel-r-mi {
     --__axc-r-mi: var(--__axc-r-mi-2xl);
   }
 
-  .navds-r-mb {
+  .aksel-r-mb {
     --__axc-r-mb: var(--__axc-r-mb-2xl);
   }
 
-  .navds-r-w {
+  .aksel-r-w {
     --__axc-r-w: var(--__axc-r-w-2xl);
   }
 
-  .navds-r-minw {
+  .aksel-r-minw {
     --__axc-r-minw: var(--__axc-r-minw-2xl);
   }
 
-  .navds-r-maxw {
+  .aksel-r-maxw {
     --__axc-r-maxw: var(--__axc-r-maxw-2xl);
   }
 
-  .navds-r-h {
+  .aksel-r-h {
     --__axc-r-h: var(--__axc-r-h-2xl);
   }
 
-  .navds-r-minh {
+  .aksel-r-minh {
     --__axc-r-minh: var(--__axc-r-minh-2xl);
   }
 
-  .navds-r-maxh {
+  .aksel-r-maxh {
     --__axc-r-maxh: var(--__axc-r-maxh-2xl);
   }
 
-  .navds-r-position {
+  .aksel-r-position {
     --__axc-r-position: var(--__axc-r-position-2xl);
   }
 
-  .navds-r-inset {
+  .aksel-r-inset {
     --__axc-r-inset: var(--__axc-r-inset-2xl);
   }
 
-  .navds-r-top {
+  .aksel-r-top {
     --__axc-r-top: var(--__axc-r-top-2xl);
   }
 
-  .navds-r-right {
+  .aksel-r-right {
     --__axc-r-right: var(--__axc-r-right-2xl);
   }
 
-  .navds-r-bottom {
+  .aksel-r-bottom {
     --__axc-r-bottom: var(--__axc-r-bottom-2xl);
   }
 
-  .navds-r-left {
+  .aksel-r-left {
     --__axc-r-left: var(--__axc-r-left-2xl);
   }
 
-  .navds-r-overflow {
+  .aksel-r-overflow {
     --__axc-r-overflow: var(--__axc-r-overflow-2xl);
   }
 
-  .navds-r-overflowx {
+  .aksel-r-overflowx {
     --__axc-r-overflowx: var(--__axc-r-overflowx-2xl);
   }
 
-  .navds-r-overflowy {
+  .aksel-r-overflowy {
     --__axc-r-overflowy: var(--__axc-r-overflowy-2xl);
   }
 
-  .navds-r-flex-basis {
+  .aksel-r-flex-basis {
     --__axc-r-flex-basis: var(--__axc-r-flex-basis-2xl);
   }
 
-  .navds-r-flex-grow {
+  .aksel-r-flex-grow {
     --__axc-r-flex-grow: var(--__axc-r-flex-grow-2xl);
   }
 
-  .navds-r-flex-shrink {
+  .aksel-r-flex-shrink {
     --__axc-r-flex-shrink: var(--__axc-r-flex-shrink-2xl);
   }
 
-  .navds-r-grid-column {
+  .aksel-r-grid-column {
     --__axc-r-grid-column: var(--__axc-r-grid-column-2xl);
   }
 }

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

@@ -1,4 +1,4 @@
-.navds-bleed {
+.aksel-bleed {
   --__axc-bleed-margin-inline-xs: initial;
   --__axc-bleed-margin-inline-sm: var(--__axc-bleed-margin-inline-xs);
   --__axc-bleed-margin-inline-md: var(--__axc-bleed-margin-inline-sm);
@@ -20,7 +20,7 @@
   margin-block: var(--__axc-bleed-margin-block);
 }
 
-.navds-bleed--padding {
+.aksel-bleed--padding {
   --__axc-bleed-padding-inline-xs: initial;
   --__axc-bleed-padding-inline-sm: var(--__axc-bleed-padding-inline-xs);
   --__axc-bleed-padding-inline-md: var(--__axc-bleed-padding-inline-sm);
@@ -43,60 +43,60 @@
 }
 
 @media (min-width: 480px) {
-  .navds-bleed {
+  .aksel-bleed {
     --__axc-bleed-margin-inline: var(--__axc-bleed-margin-inline-sm);
     --__axc-bleed-margin-block: var(--__axc-bleed-margin-block-sm);
   }
 
-  .navds-bleed--padding {
+  .aksel-bleed--padding {
     --__axc-bleed-padding-inline: var(--__axc-bleed-padding-inline-sm);
     --__axc-bleed-padding-block: var(--__axc-bleed-padding-block-sm);
   }
 }
 
 @media (min-width: 768px) {
-  .navds-bleed {
+  .aksel-bleed {
     --__axc-bleed-margin-inline: var(--__axc-bleed-margin-inline-md);
     --__axc-bleed-margin-block: var(--__axc-bleed-margin-block-md);
   }
 
-  .navds-bleed--padding {
+  .aksel-bleed--padding {
     --__axc-bleed-padding-inline: var(--__axc-bleed-padding-inline-md);
     --__axc-bleed-padding-block: var(--__axc-bleed-padding-block-md);
   }
 }
 
 @media (min-width: 1024px) {
-  .navds-bleed {
+  .aksel-bleed {
     --__axc-bleed-margin-inline: var(--__axc-bleed-margin-inline-lg);
     --__axc-bleed-margin-block: var(--__axc-bleed-margin-block-lg);
   }
 
-  .navds-bleed--padding {
+  .aksel-bleed--padding {
     --__axc-bleed-padding-inline: var(--__axc-bleed-padding-inline-lg);
     --__axc-bleed-padding-block: var(--__axc-bleed-padding-block-lg);
   }
 }
 
 @media (min-width: 1280px) {
-  .navds-bleed {
+  .aksel-bleed {
     --__axc-bleed-margin-inline: var(--__axc-bleed-margin-inline-xl);
     --__axc-bleed-margin-block: var(--__axc-bleed-margin-block-xl);
   }
 
-  .navds-bleed--padding {
+  .aksel-bleed--padding {
     --__axc-bleed-padding-inline: var(--__axc-bleed-padding-inline-xl);
     --__axc-bleed-padding-block: var(--__axc-bleed-padding-block-xl);
   }
 }
 
 @media (min-width: 1440px) {
-  .navds-bleed {
+  .aksel-bleed {
     --__axc-bleed-margin-inline: var(--__axc-bleed-margin-inline-2xl);
     --__axc-bleed-margin-block: var(--__axc-bleed-margin-block-2xl);
   }
 
-  .navds-bleed--padding {
+  .aksel-bleed--padding {
     --__axc-bleed-padding-inline: var(--__axc-bleed-padding-inline-2xl);
     --__axc-bleed-padding-block: var(--__axc-bleed-padding-block-2xl);
   }

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-.navds-progress-bar {
+.aksel-progress-bar {
   background: var(--ax-bg-neutral-moderateA);
   position: relative;
   border-radius: var(--ax-border-radius-full);
@@ -6,22 +6,22 @@
   box-shadow: inset 0 0 0 1px var(--ax-border-neutral-subtleA);
 }
 
-.navds-progress-bar--small {
+.aksel-progress-bar--small {
   height: 0.75rem;
   min-width: 0.75rem;
 }
 
-.navds-progress-bar--medium {
+.aksel-progress-bar--medium {
   height: 1rem;
   min-width: 1rem;
 }
 
-.navds-progress-bar--large {
+.aksel-progress-bar--large {
   height: 1.5rem;
   min-width: 1.5rem;
 }
 
-.navds-progress-bar__foreground {
+.aksel-progress-bar__foreground {
   /* TODO:  rename --__ac- in ProgressBar.tsx after darkside update */
   --__ac-progress-bar-translate: initial;
 
@@ -37,10 +37,10 @@
   transition: transform 0.2s ease;
 }
 
-.navds-progress-bar__foreground--indeterminate {
+.aksel-progress-bar__foreground--indeterminate {
   --__ac-progress-bar-simulated: initial;
 
-  animation-name: navds-progress-bar-indeterminate-grow, navds-progress-bar-indeterminate;
+  animation-name: aksel-progress-bar-indeterminate-grow, aksel-progress-bar-indeterminate;
   animation-timing-function: ease-in-out, ease-in-out;
   animation-duration: var(--__ac-progress-bar-simulated), 2500ms;
   animation-fill-mode: forwards, none;
@@ -48,8 +48,8 @@
   animation-delay: 0s, var(--__ac-progress-bar-simulated);
 }
 
-/* navds-progress-bar-indeterminate wave animation */
-@keyframes navds-progress-bar-indeterminate {
+/* aksel-progress-bar-indeterminate wave animation */
+@keyframes aksel-progress-bar-indeterminate {
   0% {
     left: -50%;
     width: 50%;
@@ -70,7 +70,7 @@
   }
 }
 
-@keyframes navds-progress-bar-indeterminate-grow {
+@keyframes aksel-progress-bar-indeterminate-grow {
   0% {
     transform: translateX(-100%);
   }
@@ -97,11 +97,11 @@
 }
 
 @media (forced-colors: active) {
-  .navds-progress-bar__foreground {
+  .aksel-progress-bar__foreground {
     background: Highlight;
   }
 
-  .navds-progress-bar {
+  .aksel-progress-bar {
     outline: 1px solid transparent;
     outline-offset: -1px;
   }