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

@@ -10,8 +10,7 @@ import { Markdown, Meta } from "@storybook/blocks";
 
 ## 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

.storybook/docs/PilotSetup.mdx

@@ -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` (in addition to a `navds-theme` class), 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,10 +83,10 @@ 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 "@navikt/ds-css/darkside";
 import { Theme } from "@navikt/ds-react/Theme";
 
 export const App = () => (
@@ -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

.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

@@ -81,7 +81,6 @@ 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

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/aksel-icons
 
+## 7.16.0
+
+## 7.15.0
+
+## 7.14.3
+
 ## 7.14.2
 
 ## 7.14.1

@navikt/aksel-icons/package.json

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

@navikt/aksel-stylelint/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/aksel-stylelint
 
+## 7.16.0
+
+## 7.15.0
+
+## 7.14.3
+
 ## 7.14.2
 
 ## 7.14.1

@navikt/aksel-stylelint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-stylelint",
-  "version": "7.14.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.14.2",
-    "@navikt/ds-tokens": "^7.14.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,32 @@
 # @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

@navikt/aksel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel",
-  "version": "7.14.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.14.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,19 @@
 # @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

@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,4 +1,4 @@
-.navds-dropdown__menu {
+.aksel-dropdown__menu {
   overflow: hidden;
   padding: var(--ax-space-8);
   color: var(--ax-text-neutral);
@@ -7,32 +7,32 @@
   overflow-y: auto;
 }
 
-.navds-dropdown__divider {
+.aksel-dropdown__divider {
   margin: var(--ax-space-12) 0;
   border: none;
   border-bottom: 1px solid var(--ax-border-neutral-subtle);
 }
 
-.navds-dropdown__menu > :not(.navds-dropdown__divider, .navds-dropdown__list) {
+.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 {
+.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;
@@ -70,11 +70,11 @@
 }
 
 @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,4 +1,4 @@
-.navds-confirmation-panel__inner {
+.aksel-confirmation-panel__inner {
   display: flex;
   flex-direction: column;
   gap: var(--ax-space-12);
@@ -11,12 +11,12 @@
   position: relative;
 }
 
-.navds-confirmation-panel__content {
+.aksel-confirmation-panel__content {
   max-width: 80ch;
 }
 
 @media (forced-colors: active) {
-  .navds-confirmation-panel__inner::before {
+  .aksel-confirmation-panel__inner::before {
     content: "";
     position: absolute;
     left: 0;
@@ -29,11 +29,11 @@
     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/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

@@ -1,4 +1,4 @@
-.navds-link-panel {
+.aksel-link-panel {
   text-decoration: none;
   color: var(--ax-text-neutral);
   display: flex;
@@ -9,7 +9,7 @@
   &:hover {
     border-color: var(--ax-border-accent);
 
-    & .navds-link-panel__title {
+    & .aksel-link-panel__title {
       text-decoration: underline;
       color: var(--ax-text-accent-subtle);
     }
@@ -21,17 +21,17 @@
   }
 }
 
-.navds-link-panel__chevron {
+.aksel-link-panel__chevron {
   flex-shrink: 0;
   font-size: 1.5rem;
   transition: transform 200ms;
 }
 
-.navds-link-panel:hover > .navds-link-panel__chevron,
-.navds-link-panel:focus-within > .navds-link-panel__chevron {
+.aksel-link-panel:hover > .aksel-link-panel__chevron,
+.aksel-link-panel:focus-within > .aksel-link-panel__chevron {
   transform: translateX(4px);
 }
 
-.navds-link-panel__description {
+.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 {
+.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 {
+.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;
   }

@navikt/core/css/darkside/read-more.darkside.css

@@ -1,4 +1,4 @@
-.navds-read-more {
+.aksel-read-more {
   --__axc-read-more-icon-size: 1.5rem;
   --__axc-read-more-pi-start: 0px;
   --__axc-read-more-pi-end: var(--ax-space-4);
@@ -6,7 +6,7 @@
 }
 
 /* ----------------------------- ReadMore Button ---------------------------- */
-.navds-read-more__button {
+.aksel-read-more__button {
   cursor: pointer;
   margin: 0;
   border: none;
@@ -24,13 +24,13 @@
     outline-offset: 3px;
   }
 
-  &[data-state="open"] .navds-read-more__expand-icon {
+  &[data-state="open"] .aksel-read-more__expand-icon {
     transform: rotateX(-180deg);
   }
 }
 
-.navds-read-more:is([data-volume="low"], :not([data-volume])) {
-  & .navds-read-more__button {
+.aksel-read-more:is([data-volume="low"], :not([data-volume])) {
+  & .aksel-read-more__button {
     border-radius: var(--ax-border-radius-medium);
 
     &:hover {
@@ -39,8 +39,8 @@
   }
 }
 
-.navds-read-more[data-volume="high"] {
-  & .navds-read-more__button {
+.aksel-read-more[data-volume="high"] {
+  & .aksel-read-more__button {
     background-color: var(--ax-bg-accent-moderate);
     border-radius: var(--ax-border-radius-full);
 
@@ -50,20 +50,20 @@
     }
   }
 
-  &.navds-read-more--large {
+  &.aksel-read-more--large {
     --__axc-read-more-pi-start: var(--ax-space-12);
     --__axc-read-more-pi-end: var(--ax-space-24);
   }
 
-  &.navds-read-more--small,
-  &.navds-read-more--medium {
+  &.aksel-read-more--small,
+  &.aksel-read-more--medium {
     --__axc-read-more-pi-start: var(--ax-space-8);
     --__axc-read-more-pi-end: var(--ax-space-16);
   }
 }
 
 /* ---------------------------- ReadMore Content ---------------------------- */
-.navds-read-more__content {
+.aksel-read-more__content {
   margin-top: var(--ax-space-8);
   border-left: 2px solid var(--ax-border-neutral-subtleA);
   color: var(--ax-text-neutral);
@@ -75,25 +75,25 @@
   }
 }
 
-.navds-read-more__expand-icon {
+.aksel-read-more__expand-icon {
   font-size: var(--__axc-read-more-icon-size);
   flex-shrink: 0;
   transition: transform 100ms cubic-bezier(0.2, 0, 0, 1);
 }
 
 /* ----------------------------- ReadMore Sizes ----------------------------- */
-.navds-read-more--large {
+.aksel-read-more--large {
   --__axc-read-more-pb: var(--ax-space-12);
 }
 
-.navds-read-more--small {
+.aksel-read-more--small {
   --__axc-read-more-icon-size: 1.25rem;
   --__axc-read-more-pb: var(--ax-space-2);
 }
 
 /* ------------------------- ReadMore high-contrast ------------------------- */
 @media (forced-colors: active) {
-  .navds-read-more__button {
+  .aksel-read-more__button {
     background-color: ButtonFace;
     border: solid 1px ButtonText;
     color: ButtonText;

@navikt/core/css/darkside/skeleton.darkside.css

@@ -1,31 +1,31 @@
-.navds-skeleton {
+.aksel-skeleton {
   background-color: var(--ax-bg-neutral-moderateA);
   height: 1.3em;
   animation: akselSkeletonAnimation 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   pointer-events: none;
 }
 
-.navds-skeleton--inline {
+.aksel-skeleton--inline {
   display: inline-block;
 }
 
-.navds-skeleton--has-children {
+.aksel-skeleton--has-children {
   color: transparent;
 
   & > * {
     visibility: hidden;
   }
 
-  &.navds-skeleton--no-height {
+  &.aksel-skeleton--no-height {
     height: auto;
   }
 
-  &.navds-skeleton--no-width {
+  &.aksel-skeleton--no-width {
     width: fit-content;
   }
 }
 
-.navds-skeleton--text {
+.aksel-skeleton--text {
   height: auto;
   transform-origin: 0 55%;
   transform: scale(1, 0.6);
@@ -36,15 +36,15 @@
   }
 }
 
-.navds-skeleton--circle {
+.aksel-skeleton--circle {
   border-radius: var(--ax-border-radius-full);
 }
 
-.navds-skeleton--rectangle {
+.aksel-skeleton--rectangle {
   border-radius: 0;
 }
 
-.navds-skeleton--rounded {
+.aksel-skeleton--rounded {
   border-radius: var(--ax-border-radius-xlarge);
 }
 
@@ -55,7 +55,7 @@
 }
 
 @media (forced-colors: active) {
-  .navds-skeleton {
+  .aksel-skeleton {
     forced-color-adjust: none;
     background-color: canvastext;
     animation-duration: 2s;

@navikt/core/css/darkside/stepper.darkside.css

@@ -1,4 +1,4 @@
-.navds-stepper {
+.aksel-stepper {
   --__axc-stepper-circle-size: 1.75rem;
   --__axc-stepper-border-width: 2px;
   --__axc-stepper-line-length: 1rem;
@@ -11,7 +11,7 @@
   margin: 0;
 }
 
-.navds-stepper__item {
+.aksel-stepper__item {
   display: grid;
   grid-template-rows:
     [line-1] auto [step-start] var(--__axc-stepper-circle-size)
@@ -21,7 +21,7 @@
   gap: var(--ax-space-8);
 }
 
-.navds-stepper__line {
+.aksel-stepper__line {
   background-color: var(--ax-border-accent);
   width: var(--__axc-stepper-border-width);
   height: 100%;
@@ -29,33 +29,33 @@
   justify-self: center;
   grid-column: 1;
 
-  .navds-stepper__item--non-interactive & {
+  .aksel-stepper__item--non-interactive & {
     background-color: var(--ax-border-neutral-strong);
   }
 }
 
 /* Line before non-interactive step */
-.navds-stepper__item:has(+ .navds-stepper__item > .navds-stepper__step[data-interactive="false"]) {
-  .navds-stepper__line--2 {
+.aksel-stepper__item:has(+ .aksel-stepper__item > .aksel-stepper__step[data-interactive="false"]) {
+  .aksel-stepper__line--2 {
     background-color: var(--ax-border-neutral-strong);
   }
 }
 
-.navds-stepper__line--1 {
+.aksel-stepper__line--1 {
   grid-row: line-1;
   display: none;
 }
 
-.navds-stepper__line--2 {
+.aksel-stepper__line--2 {
   grid-row: line-2;
 
   /* Hide last line under item */
-  .navds-stepper__item:last-of-type & {
+  .aksel-stepper__item:last-of-type & {
     display: none;
   }
 }
 
-.navds-stepper__step {
+.aksel-stepper__step {
   grid-row: 2 / -1;
   grid-column: 1 / -1;
   display: grid;
@@ -77,7 +77,7 @@
   }
 
   /* Remove last item bottom margin */
-  .navds-stepper__item:last-child & {
+  .aksel-stepper__item:last-child & {
     margin-bottom: 0;
   }
 
@@ -91,7 +91,7 @@
   }
 }
 
-.navds-stepper__circle {
+.aksel-stepper__circle {
   grid-column: circle;
   display: inline-grid;
   place-items: center;
@@ -102,17 +102,17 @@
   line-height: 1;
 }
 
-.navds-stepper__circle--success {
+.aksel-stepper__circle--success {
   background: none;
   font-size: var(--__axc-stepper-circle-size);
 }
 
-.navds-stepper__step[data-interactive="true"] {
+.aksel-stepper__step[data-interactive="true"] {
   color: var(--ax-text-accent-subtle);
   border-radius: var(--ax-border-radius-medium);
   text-decoration: none;
 
-  & .navds-stepper__content {
+  & .aksel-stepper__content {
     text-decoration: underline;
     text-underline-offset: 0.1em;
     text-decoration-thickness: 0.05em;
@@ -120,22 +120,22 @@
 
   &:hover,
   &:active {
-    & .navds-stepper__content {
+    & .aksel-stepper__content {
       text-decoration-thickness: 0.111em;
     }
   }
 
-  & .navds-stepper__circle {
+  & .aksel-stepper__circle {
     color: var(--ax-text-accent-subtle);
     border-color: var(--ax-border-accent-strong);
   }
 
   &[data-active="true"] {
-    & .navds-stepper__content {
+    & .aksel-stepper__content {
       text-decoration: none;
     }
 
-    & .navds-stepper__circle {
+    & .aksel-stepper__circle {
       color: var(--ax-text-accent-contrast);
       background-color: var(--ax-bg-accent-strong-pressed);
       border-color: var(--ax-bg-accent-strong-pressed);
@@ -144,7 +144,7 @@
 
   &[data-active="false"] {
     &:hover {
-      & .navds-stepper__circle {
+      & .aksel-stepper__circle {
         background-color: var(--ax-bg-accent-moderate-hoverA);
         border-color: var(--ax-border-accent-strong);
       }
@@ -152,16 +152,16 @@
   }
 }
 
-.navds-stepper__step[data-interactive="false"] {
+.aksel-stepper__step[data-interactive="false"] {
   color: var(--ax-text-neutral-subtle);
   cursor: default;
 
-  & .navds-stepper__circle {
+  & .aksel-stepper__circle {
     border-color: var(--ax-border-neutral-strong);
   }
 
   &[data-active="true"] {
-    & .navds-stepper__circle {
+    & .aksel-stepper__circle {
       color: var(--ax-text-neutral-contrast);
       background-color: var(--ax-bg-neutral-strong-pressed);
       border-color: var(--ax-bg-neutral-strong-pressed);
@@ -169,7 +169,7 @@
   }
 }
 
-.navds-stepper__content {
+.aksel-stepper__content {
   min-width: fit-content;
   line-height: 1.5;
   grid-column: content;
@@ -177,12 +177,12 @@
 }
 
 /* Horizontal */
-.navds-stepper[data-orientation="horizontal"] {
+.aksel-stepper[data-orientation="horizontal"] {
   display: flex;
   align-items: flex-start;
   text-align: center;
 
-  & .navds-stepper__line {
+  & .aksel-stepper__line {
     height: var(--__axc-stepper-border-width);
     width: 100%;
     min-height: auto;
@@ -191,28 +191,28 @@
     align-self: center;
   }
 
-  & .navds-stepper__line--1 {
+  & .aksel-stepper__line--1 {
     grid-column: line-1;
   }
 
-  & .navds-stepper__line--2 {
+  & .aksel-stepper__line--2 {
     grid-column: line-2;
   }
 
-  & .navds-stepper__item {
+  & .aksel-stepper__item {
     flex: 1 1 100%;
     grid-template-columns:
       [line-1-start] 1fr [step-start] auto [line-1-end] var(--__axc-stepper-circle-size)
       [line-2-start] auto [step-end] 1fr [line-2-end];
     grid-template-rows: var(--__axc-stepper-circle-size) auto;
 
-    &:first-of-type .navds-stepper__line--1,
-    &:last-of-type .navds-stepper__line--2 {
+    &:first-of-type .aksel-stepper__line--1,
+    &:last-of-type .aksel-stepper__line--2 {
       visibility: hidden;
     }
   }
 
-  & .navds-stepper__step {
+  & .aksel-stepper__step {
     grid-row: 1 / -1;
     grid-column: step;
     display: grid;
@@ -224,12 +224,12 @@
     margin-bottom: 0;
   }
 
-  & .navds-stepper__circle {
+  & .aksel-stepper__circle {
     grid-row: circle;
     grid-column: 2;
   }
 
-  & .navds-stepper__content {
+  & .aksel-stepper__content {
     grid-row: content;
     grid-column: 1 / -1;
     max-width: 24ch;
@@ -237,18 +237,18 @@
 }
 
 @media (forced-colors: active) {
-  .navds-stepper__circle.navds-stepper__circle {
+  .aksel-stepper__circle.aksel-stepper__circle {
     border: 0;
     outline: 2px solid ButtonText;
     outline-offset: 2px;
   }
 
-  .navds-stepper__line.navds-stepper__line {
+  .aksel-stepper__line.aksel-stepper__line {
     background-color: ButtonText;
   }
 
-  .navds-stepper__step[data-active="true"][data-interactive] {
-    .navds-stepper__circle {
+  .aksel-stepper__step[data-active="true"][data-interactive] {
+    .aksel-stepper__circle {
       forced-color-adjust: none;
       background-color: highlight;
       color: highlighttext;

@navikt/core/css/darkside/table.darkside.css

@@ -1,116 +1,116 @@
-.navds-table {
+.aksel-table {
   width: 100%;
   border-collapse: collapse;
   display: table;
 }
 
-.navds-table__header {
+.aksel-table__header {
   display: table-header-group;
 }
 
-.navds-table__body {
+.aksel-table__body {
   display: table-row-group;
 
-  & .navds-table__row--shade-on-hover:not(.navds-table__expandable-row--expansion-disabled):hover {
+  & .aksel-table__row--shade-on-hover:not(.aksel-table__expandable-row--expansion-disabled):hover {
     background-color: var(--ax-bg-neutral-moderate-hoverA);
     transition: background-color 70ms cubic-bezier(0.2, 0, 0, 1);
   }
 
-  & .navds-table__row--shade-on-hover.navds-table__row--selected:hover {
+  & .aksel-table__row--shade-on-hover.aksel-table__row--selected:hover {
     background-color: var(--ax-bg-accent-moderate-hoverA);
   }
 }
 
-.navds-table__row {
+.aksel-table__row {
   display: table-row;
 }
 
-.navds-table__row--selected {
+.aksel-table__row--selected {
   background-color: var(--ax-bg-accent-softA);
 
-  & + .navds-table__expanded-row {
+  & + .aksel-table__expanded-row {
     background-color: var(--ax-bg-accent-softA);
   }
 }
 
-.navds-table--zebra-stripes {
-  & .navds-table__body :where(.navds-table__row:nth-child(odd):not(.navds-table__row--selected)) {
+.aksel-table--zebra-stripes {
+  & .aksel-table__body :where(.aksel-table__row:nth-child(odd):not(.aksel-table__row--selected)) {
     background-color: var(--ax-bg-neutral-softA);
   }
 
-  & .navds-table__body :where(.navds-table__expandable-row:nth-child(4n + 1):not(.navds-table__row--selected)) {
+  & .aksel-table__body :where(.aksel-table__expandable-row:nth-child(4n + 1):not(.aksel-table__row--selected)) {
     background-color: transparent;
   }
 
-  & .navds-table__body .navds-table__expanded-row:nth-child(4n) {
+  & .aksel-table__body .aksel-table__expanded-row:nth-child(4n) {
     background-color: var(--ax-bg-neutral-softA);
   }
 
-  & .navds-table__row--selected + .navds-table__expanded-row:nth-child(4n) {
+  & .aksel-table__row--selected + .aksel-table__expanded-row:nth-child(4n) {
     background-color: var(--ax-bg-accent-softA);
   }
 }
 
-.navds-table__header-cell,
-.navds-table__data-cell {
+.aksel-table__header-cell,
+.aksel-table__data-cell {
   display: table-cell;
   padding: var(--ax-space-12) var(--ax-space-8);
   border-bottom: 1px solid var(--ax-border-neutral-subtleA);
   text-align: left;
 }
 
-.navds-table__header .navds-table__header-cell,
-.navds-table__header .navds-table__data-cell {
+.aksel-table__header .aksel-table__header-cell,
+.aksel-table__header .aksel-table__data-cell {
   border-bottom-width: 2px;
 }
 
-.navds-table__header-cell--align-right,
-.navds-table__data-cell--align-right {
+.aksel-table__header-cell--align-right,
+.aksel-table__data-cell--align-right {
   text-align: right;
 }
 
-.navds-table__header-cell--align-center,
-.navds-table__data-cell--align-center {
+.aksel-table__header-cell--align-center,
+.aksel-table__data-cell--align-center {
   text-align: center;
 }
 
-:where(.navds-table__expandable-row--open:hover) .navds-table__data-cell {
+:where(.aksel-table__expandable-row--open:hover) .aksel-table__data-cell {
   border-bottom-color: transparent;
 }
 
-.navds-table--large .navds-table__header-cell,
-.navds-table--large .navds-table__data-cell {
+.aksel-table--large .aksel-table__header-cell,
+.aksel-table--large .aksel-table__data-cell {
   padding: var(--ax-space-16) var(--ax-space-8);
 }
 
-.navds-table--small .navds-table__header-cell,
-.navds-table--small .navds-table__data-cell {
+.aksel-table--small .aksel-table__header-cell,
+.aksel-table--small .aksel-table__data-cell {
   padding: var(--ax-space-4) var(--ax-space-8);
 }
 
 /* TODO: Look to handle "inline"-checkbox better than custom CSS-overrides in the future. */
-.navds-table :not(.navds-checkboxes) > .navds-checkbox .navds-checkbox__input {
+.aksel-table :not(.aksel-checkboxes) > .aksel-checkbox .aksel-checkbox__input {
   top: -0.75rem;
 }
 
-.navds-table :not(.navds-checkboxes) > .navds-checkbox--small .navds-checkbox__input {
+.aksel-table :not(.aksel-checkboxes) > .aksel-checkbox--small .aksel-checkbox__input {
   top: -0.375rem;
 }
 
-.navds-table :not(.navds-checkboxes) > .navds-checkbox .navds-checkbox__label {
+.aksel-table :not(.aksel-checkboxes) > .aksel-checkbox .aksel-checkbox__label {
   padding: 0;
 }
 
-.navds-table .navds-checkbox__input:focus + .navds-checkbox__label::after,
-.navds-table .navds-radio__input:focus + .navds-radio__label::after {
+.aksel-table .aksel-checkbox__input:focus + .aksel-checkbox__label::after,
+.aksel-table .aksel-radio__input:focus + .aksel-radio__label::after {
   height: 100%;
 }
 
-.navds-table__header-cell[aria-sort] {
+.aksel-table__header-cell[aria-sort] {
   padding: 0;
 }
 
-.navds-table__sort-button {
+.aksel-table__sort-button {
   appearance: none;
   background: none;
   color: var(--ax-text-accent-subtle);
@@ -126,68 +126,68 @@
   font-weight: inherit;
 }
 
-.navds-table--small .navds-table__sort-button {
+.aksel-table--small .aksel-table__sort-button {
   padding: var(--ax-space-8) var(--ax-space-12);
 }
 
-.navds-table__sort-button:hover {
+.aksel-table__sort-button:hover {
   background-color: var(--ax-bg-neutral-moderate-hoverA);
 }
 
-.navds-table__sort-button:focus-visible {
+.aksel-table__sort-button:focus-visible {
   outline: 3px solid var(--ax-border-focus);
   outline-offset: -5px;
 }
 
-.navds-table__header-cell[aria-sort="ascending"] .navds-table__sort-button,
-.navds-table__header-cell[aria-sort="descending"] .navds-table__sort-button {
+.aksel-table__header-cell[aria-sort="ascending"] .aksel-table__sort-button,
+.aksel-table__header-cell[aria-sort="descending"] .aksel-table__sort-button {
   background-color: var(--ax-bg-accent-moderate-pressedA);
   color: var(--ax-text-accent);
 }
 
-.navds-table__header-cell--align-right .navds-table__sort-button {
+.aksel-table__header-cell--align-right .aksel-table__sort-button {
   justify-content: flex-end;
 }
 
-.navds-table__header-cell--align-center .navds-table__sort-button {
+.aksel-table__header-cell--align-center .aksel-table__sort-button {
   justify-content: center;
 }
 
-.navds-table__sort-button svg {
+.aksel-table__sort-button svg {
   font-size: 1.5rem;
   flex-shrink: 0;
 }
 
-.navds-table__expandable-row:not(.navds-table__expandable-row--open) :where(.navds-table__data-cell, .navds-table__header-cell) {
+.aksel-table__expandable-row:not(.aksel-table__expandable-row--open) :where(.aksel-table__data-cell, .aksel-table__header-cell) {
   transition: border-bottom-color 150ms cubic-bezier(0.95, 0.05, 0.8, 0.04);
 }
 
-.navds-table__expandable-row.navds-table__expandable-row--clickable:not(.navds-table__expandable-row--expansion-disabled):hover {
+.aksel-table__expandable-row.aksel-table__expandable-row--clickable:not(.aksel-table__expandable-row--expansion-disabled):hover {
   cursor: pointer;
 }
 
-.navds-table__expandable-row--open :where(.navds-table__data-cell, .navds-table__header-cell) {
+.aksel-table__expandable-row--open :where(.aksel-table__data-cell, .aksel-table__header-cell) {
   border-bottom-color: transparent;
 }
 
-.navds-table__expandable-row--open .navds-table__toggle-expand-cell--open {
+.aksel-table__expandable-row--open .aksel-table__toggle-expand-cell--open {
   border-color: transparent;
 }
 
-.navds-table__toggle-expand-cell {
+.aksel-table__toggle-expand-cell {
   padding: 0;
   width: 3rem;
 }
 
-.navds-table--large .navds-table__toggle-expand-cell {
+.aksel-table--large .aksel-table__toggle-expand-cell {
   padding: 0 var(--ax-space-8);
 }
 
-.navds-table--small .navds-table__toggle-expand-cell {
+.aksel-table--small .aksel-table__toggle-expand-cell {
   padding: var(--ax-space-4) var(--ax-space-8);
 }
 
-.navds-table__toggle-expand-button {
+.aksel-table__toggle-expand-button {
   display: grid;
   place-content: center;
   cursor: pointer;
@@ -201,37 +201,37 @@
   transition: background-color 70ms cubic-bezier(0.2, 0, 0, 1);
 }
 
-.navds-table__expandable-icon {
+.aksel-table__expandable-icon {
   transition: transform 250ms cubic-bezier(0.2, 0, 0, 1);
 }
 
-.navds-table__expandable-row:not(.navds-table__expandable-row--expansion-disabled) .navds-table__toggle-expand-cell:hover {
+.aksel-table__expandable-row:not(.aksel-table__expandable-row--expansion-disabled) .aksel-table__toggle-expand-cell:hover {
   cursor: pointer;
 }
 
-.navds-table__toggle-expand-button:hover,
-.navds-table__toggle-expand-cell:hover > .navds-table__toggle-expand-button,
-.navds-table__expandable-row--clickable:hover .navds-table__toggle-expand-button {
+.aksel-table__toggle-expand-button:hover,
+.aksel-table__toggle-expand-cell:hover > .aksel-table__toggle-expand-button,
+.aksel-table__expandable-row--clickable:hover .aksel-table__toggle-expand-button {
   background-color: var(--ax-bg-neutral-moderate-hoverA);
 }
 
-& .navds-table__toggle-expand-button:hover,
-& .navds-table__toggle-expand-cell:hover > .navds-table__toggle-expand-button,
-& .navds-table__expandable-row--clickable:hover .navds-table__toggle-expand-button {
-  .navds-table__row--selected & {
+& .aksel-table__toggle-expand-button:hover,
+& .aksel-table__toggle-expand-cell:hover > .aksel-table__toggle-expand-button,
+& .aksel-table__expandable-row--clickable:hover .aksel-table__toggle-expand-button {
+  .aksel-table__row--selected & {
     background-color: var(--ax-bg-accent-moderate-hoverA);
   }
 }
 
-.navds-table__toggle-expand-cell--open > :where(.navds-table__toggle-expand-button) :where(.navds-table__expandable-icon) {
+.aksel-table__toggle-expand-cell--open > :where(.aksel-table__toggle-expand-button) :where(.aksel-table__expandable-icon) {
   transform: rotateX(180deg);
 }
 
-.navds-table__toggle-expand-button:focus-visible {
+.aksel-table__toggle-expand-button:focus-visible {
   outline: 3px solid var(--ax-border-focus);
 }
 
-.navds-table__expanded-row-cell {
+.aksel-table__expanded-row-cell {
   padding: 0;
 
   &:empty {
@@ -240,33 +240,33 @@
 }
 
 /* -------------------------- Table ExpandableRow -------------------------- */
-.navds-table__expanded-row-collapse:not([style*="height: 0px;"]),
-.navds-table__expanded-row-collapse[style*="transition:"] {
+.aksel-table__expanded-row-collapse:not([style*="height: 0px;"]),
+.aksel-table__expanded-row-collapse[style*="transition:"] {
   border-bottom: 1px solid var(--ax-border-neutral-subtleA);
 }
 
-.navds-table__expanded-row-content {
+.aksel-table__expanded-row-content {
   --__ac-table-expanded-row-pi: calc(var(--ax-space-8) + 3rem);
 
   padding-block: var(--ax-space-16);
 }
 
-.navds-table--small .navds-table__expanded-row-content {
+.aksel-table--small .aksel-table__expanded-row-content {
   padding-block: var(--ax-space-8);
 }
 
-.navds-table__expanded-row-content--gutter-both {
+.aksel-table__expanded-row-content--gutter-both {
   padding-inline: var(--__ac-table-expanded-row-pi);
 }
 
-.navds-table__expanded-row-content--gutter-left {
+.aksel-table__expanded-row-content--gutter-left {
   padding-inline: var(--__ac-table-expanded-row-pi) var(--ax-space-8);
 }
 
-.navds-table__expanded-row-content--gutter-right {
+.aksel-table__expanded-row-content--gutter-right {
   padding-inline: var(--ax-space-8) var(--__ac-table-expanded-row-pi);
 }
 
-.navds-table__expanded-row-content--gutter-none {
+.aksel-table__expanded-row-content--gutter-none {
   padding-inline: var(--ax-space-8);
 }

@navikt/core/css/darkside/tabs.darkside.css

@@ -1,10 +1,10 @@
-.navds-tabs__tablist-wrapper {
+.aksel-tabs__tablist-wrapper {
   box-shadow: inset 0 -1px var(--ax-border-neutral-subtleA);
   width: 100%;
   display: flex;
 }
 
-.navds-tabs__tablist {
+.aksel-tabs__tablist {
   display: flex;
   max-width: 100%;
   width: 100%;
@@ -18,7 +18,7 @@
   }
 }
 
-.navds-tabs__scroll-button {
+.aksel-tabs__scroll-button {
   padding: var(--ax-space-12) var(--ax-space-16);
   width: 2.75rem;
   display: flex;
@@ -31,17 +31,17 @@
     flex-shrink: 0;
   }
 
-  .navds-tabs--small & {
+  .aksel-tabs--small & {
     padding: var(--ax-space-6) var(--ax-space-16);
     width: 2rem;
   }
 }
 
-.navds-tabs__scroll-button--hidden {
+.aksel-tabs__scroll-button--hidden {
   visibility: hidden;
 }
 
-.navds-tabs__tab {
+.aksel-tabs__tab {
   min-height: 3rem;
   padding: var(--ax-space-12) var(--ax-space-16);
   display: inline-flex;
@@ -73,7 +73,7 @@
   }
 }
 
-.navds-tabs__tab-inner {
+.aksel-tabs__tab-inner {
   display: flex;
   align-items: center;
   gap: var(--ax-space-4);
@@ -86,62 +86,62 @@
     flex-shrink: 0;
   }
 
-  .navds-tabs__tab-icon--top > & {
+  .aksel-tabs__tab-icon--top > & {
     flex-direction: column;
     gap: 0;
   }
 }
 
-.navds-tabs__tab--small {
+.aksel-tabs__tab--small {
   min-height: 2rem;
   padding: var(--ax-space-6) var(--ax-space-16);
 }
 
-.navds-tabs__tab-icon--top,
-.navds-tabs__tab--small.navds-tabs__tab-icon--top {
+.aksel-tabs__tab-icon--top,
+.aksel-tabs__tab--small.aksel-tabs__tab-icon--top {
   padding: var(--ax-space-4) var(--ax-space-16);
 }
 
-.navds-tabs__tab,
-.navds-tabs__tab--small.navds-tabs__tab--icon-only,
-.navds-tabs__tab--small.navds-tabs__tab-icon--top {
+.aksel-tabs__tab,
+.aksel-tabs__tab--small.aksel-tabs__tab--icon-only,
+.aksel-tabs__tab--small.aksel-tabs__tab-icon--top {
   & svg {
     font-size: 1.25rem;
   }
 }
 
-.navds-tabs__tab--small svg {
+.aksel-tabs__tab--small svg {
   font-size: 1rem;
 }
 
-.navds-tabs__tab--icon-only,
-.navds-tabs__tab-icon--top {
+.aksel-tabs__tab--icon-only,
+.aksel-tabs__tab-icon--top {
   & svg {
     font-size: 1.5rem;
   }
 }
 
-.navds-tabs__tab--fill {
+.aksel-tabs__tab--fill {
   flex: 1 1 100%;
 }
 
-.navds-tabs__tabpanel:focus-visible {
+.aksel-tabs__tabpanel:focus-visible {
   outline: 3px solid var(--ax-border-focus);
-  outline-offset: -4px;
+  outline-offset: -3px;
 }
 
 @media (forced-colors: active) {
-  .navds-tabs__tab[data-state="active"] {
+  .aksel-tabs__tab[data-state="active"] {
     border-bottom: 3px solid canvastext;
     padding-block-end: calc(var(--ax-space-12) - 3px);
   }
 
-  .navds-tabs__tab--small[data-state="active"] {
+  .aksel-tabs__tab--small[data-state="active"] {
     padding-block-end: calc(var(--ax-space-6) - 3px);
   }
 
-  .navds-tabs__tab-icon--top[data-state="active"],
-  .navds-tabs__tab--small.navds-tabs__tab-icon--top[data-state="active"] {
+  .aksel-tabs__tab-icon--top[data-state="active"],
+  .aksel-tabs__tab--small.aksel-tabs__tab-icon--top[data-state="active"] {
     padding-block-end: calc(var(--ax-space-4) - 3px);
   }
 }

@navikt/core/css/darkside/tag.darkside.css

@@ -1,4 +1,4 @@
-.navds-tag {
+.aksel-tag {
   --__axc-tag-icon-size: 1.5rem;
   --__axc-tag-icon-margin: -2px;
   --__axc-tag-border: ;
@@ -15,13 +15,13 @@
   min-height: 2rem;
   line-height: 1;
 
-  &:has(.navds-tag__icon--left) {
+  &:has(.aksel-tag__icon--left) {
     gap: var(--ax-space-2);
   }
 }
 
-.navds-tag--info,
-.navds-tag--alt3 {
+.aksel-tag--info,
+.aksel-tag--alt3 {
   --__axc-tag-border: var(--ax-border-info);
   --__axc-tag-bg: var(--ax-bg-info-moderateA);
   --__axc-tag-bg-strong: var(--ax-bg-info-strong);
@@ -29,7 +29,7 @@
   --__axc-tag-text-strong: var(--ax-text-info-contrast);
 }
 
-.navds-tag--success {
+.aksel-tag--success {
   --__axc-tag-border: var(--ax-border-success);
   --__axc-tag-bg: var(--ax-bg-success-moderateA);
   --__axc-tag-bg-strong: var(--ax-bg-success-strong);
@@ -37,7 +37,7 @@
   --__axc-tag-text-strong: var(--ax-text-success-contrast);
 }
 
-.navds-tag--warning {
+.aksel-tag--warning {
   --__axc-tag-border: var(--ax-border-warning);
   --__axc-tag-bg: var(--ax-bg-warning-moderateA);
   --__axc-tag-bg-strong: var(--ax-bg-warning-strong);
@@ -45,7 +45,7 @@
   --__axc-tag-text-strong: var(--ax-text-warning-contrast);
 }
 
-.navds-tag--error {
+.aksel-tag--error {
   --__axc-tag-border: var(--ax-border-danger);
   --__axc-tag-bg: var(--ax-bg-danger-moderateA);
   --__axc-tag-bg-strong: var(--ax-bg-danger-strong);
@@ -53,7 +53,7 @@
   --__axc-tag-text-strong: var(--ax-text-danger-contrast);
 }
 
-.navds-tag--neutral {
+.aksel-tag--neutral {
   --__axc-tag-border: var(--ax-border-neutral);
   --__axc-tag-bg: var(--ax-bg-neutral-moderateA);
   --__axc-tag-bg-strong: var(--ax-bg-neutral-strong);
@@ -61,8 +61,8 @@
   --__axc-tag-text-strong: var(--ax-text-neutral-contrast);
 }
 
-.navds-tag--meta-purple,
-.navds-tag--alt1 {
+.aksel-tag--meta-purple,
+.aksel-tag--alt1 {
   --__axc-tag-border: var(--ax-border-meta-purple);
   --__axc-tag-bg: var(--ax-bg-meta-purple-moderateA);
   --__axc-tag-bg-strong: var(--ax-bg-meta-purple-strong);
@@ -70,8 +70,8 @@
   --__axc-tag-text-strong: var(--ax-text-meta-purple-contrast);
 }
 
-.navds-tag--meta-lime,
-.navds-tag--alt2 {
+.aksel-tag--meta-lime,
+.aksel-tag--alt2 {
   --__axc-tag-border: var(--ax-border-meta-lime);
   --__axc-tag-bg: var(--ax-bg-meta-lime-moderateA);
   --__axc-tag-bg-strong: var(--ax-bg-meta-lime-strong);
@@ -79,14 +79,14 @@
   --__axc-tag-text-strong: var(--ax-text-meta-lime-contrast);
 }
 
-.navds-tag--small {
+.aksel-tag--small {
   min-height: 1.5rem;
   padding: 0 var(--ax-space-6);
 
   --__axc-tag-icon-size: 1.25rem;
 }
 
-.navds-tag--xsmall {
+.aksel-tag--xsmall {
   min-height: 1.25rem;
   padding: 0 var(--ax-space-4);
 
@@ -94,39 +94,39 @@
   --__axc-tag-icon-margin: -1px;
 }
 
-.navds-tag__icon--left {
+.aksel-tag__icon--left {
   font-size: var(--__axc-tag-icon-size);
   margin-inline-start: var(--__axc-tag-icon-margin);
   display: flex;
 }
 
-.navds-tag--outline {
+.aksel-tag--outline {
   box-shadow: inset 0 0 0 1px var(--__axc-tag-border);
   background: var(--__axc-tag-bg);
   color: var(--__axc-tag-text);
 }
 
-.navds-tag--moderate {
+.aksel-tag--moderate {
   background: var(--__axc-tag-bg);
   color: var(--__axc-tag-text);
 }
 
-.navds-tag--strong {
+.aksel-tag--strong {
   background: var(--__axc-tag-bg-strong);
   color: var(--__axc-tag-text-strong);
 }
 
 @media (forced-colors: active) {
-  .navds-tag {
+  .aksel-tag {
     forced-color-adjust: none;
     color: canvastext;
   }
 
-  .navds-tag--moderate {
+  .aksel-tag--moderate {
     box-shadow: inset 0 0 0 1px var(--__axc-tag-bg-strong);
   }
 
-  .navds-tag--strong {
+  .aksel-tag--strong {
     color: canvas;
   }
 }

@navikt/core/css/darkside/theme.darkside.css

@@ -1,4 +1,4 @@
-.navds-theme {
+.aksel-theme {
   color: var(--ax-text-neutral);
 
   &[data-background="true"] {

@navikt/core/css/darkside/timeline.darkside.css

@@ -1,4 +1,4 @@
-.navds-timeline {
+.aksel-timeline {
   position: relative;
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
@@ -7,7 +7,7 @@
   align-items: center;
 }
 
-.navds-timeline__axislabels {
+.aksel-timeline__axislabels {
   position: relative;
   height: 1rem;
   box-sizing: content-box;
@@ -15,7 +15,7 @@
   margin-bottom: var(--ax-space-4);
 }
 
-.navds-timeline__row-label {
+.aksel-timeline__row-label {
   white-space: nowrap;
   width: auto;
   margin-right: var(--ax-space-16);
@@ -26,43 +26,43 @@
   gap: var(--ax-space-8);
 }
 
-.navds-timeline__row-label:where(:nth-last-child(2)) {
+.aksel-timeline__row-label:where(:nth-last-child(2)) {
   align-self: flex-end;
 }
 
-.navds-timeline__axislabels-label {
+.aksel-timeline__axislabels-label {
   position: absolute;
   color: var(--ax-text-neutral-subtle);
   white-space: nowrap;
 }
 
-.navds-timeline__row {
+.aksel-timeline__row {
   display: flex;
   background: var(--ax-bg-neutral-softA);
   margin: var(--ax-space-16) 0;
   grid-column: 2;
 }
 
-.navds-timeline__row--active {
+.aksel-timeline__row--active {
   background: var(--ax-bg-accent-moderate);
 }
 
-.navds-timeline__row:last-of-type {
+.aksel-timeline__row:last-of-type {
   margin-bottom: 0;
 }
 
-.navds-timeline__row-periods {
+.aksel-timeline__row-periods {
   min-height: 1.5rem;
   position: relative;
   width: 100%;
   margin: 0;
 }
 
-.navds-timeline__row-periods > li {
+.aksel-timeline__row-periods > li {
   list-style-type: none;
 }
 
-.navds-timeline__period:focus-visible {
+.aksel-timeline__period:focus-visible {
   z-index: 4;
   outline: 3px solid var(--ax-border-focus);
   outline-offset: 3px;
@@ -72,7 +72,7 @@
   }
 }
 
-.navds-timeline__period {
+.aksel-timeline__period {
   height: 100%;
   border-radius: var(--ax-border-radius-full);
   position: absolute;
@@ -84,7 +84,7 @@
   font-size: 1rem;
 }
 
-.navds-timeline__period--inner {
+.aksel-timeline__period--inner {
   margin: 0 var(--ax-space-8);
   overflow: hidden;
   white-space: nowrap;
@@ -94,114 +94,114 @@
   align-items: center;
 }
 
-.navds-timeline__period--inner svg {
+.aksel-timeline__period--inner svg {
   flex-shrink: 0;
 }
 
-.navds-timeline__period--clickable {
+.aksel-timeline__period--clickable {
   cursor: pointer;
 }
 
-.navds-timeline__period--success {
+.aksel-timeline__period--success {
   background: var(--ax-bg-success-moderate);
   border: solid 1px var(--ax-border-success);
   color: var(--ax-text-success-icon);
 
-  &.navds-timeline__period--clickable:hover {
+  &.aksel-timeline__period--clickable:hover {
     background: var(--ax-bg-success-moderate-hover);
     border-color: var(--ax-border-success-strong);
   }
 
-  &.navds-timeline__period--clickable.navds-timeline__period--selected {
+  &.aksel-timeline__period--clickable.aksel-timeline__period--selected {
     background: var(--ax-bg-success-strong-pressed);
     border: none;
     color: var(--ax-text-success-contrast);
   }
 }
 
-.navds-timeline__period--warning {
+.aksel-timeline__period--warning {
   background: var(--ax-bg-warning-moderate);
   border: solid 1px var(--ax-border-warning);
   color: var(--ax-text-warning-icon);
 
-  &.navds-timeline__period--clickable:hover {
+  &.aksel-timeline__period--clickable:hover {
     background: var(--ax-bg-warning-moderate-hover);
     border-color: var(--ax-border-warning-strong);
   }
 
-  &.navds-timeline__period--clickable.navds-timeline__period--selected {
+  &.aksel-timeline__period--clickable.aksel-timeline__period--selected {
     background: var(--ax-bg-warning-strong-pressed);
     border: none;
     color: var(--ax-text-warning-contrast);
   }
 }
 
-.navds-timeline__period--danger {
+.aksel-timeline__period--danger {
   background: var(--ax-bg-danger-moderate);
   border: solid 1px var(--ax-border-danger);
   color: var(--ax-text-danger-icon);
 
-  &.navds-timeline__period--clickable:hover {
+  &.aksel-timeline__period--clickable:hover {
     background: var(--ax-bg-danger-moderate-hover);
     border-color: var(--ax-border-danger-strong);
   }
 
-  &.navds-timeline__period--clickable.navds-timeline__period--selected {
+  &.aksel-timeline__period--clickable.aksel-timeline__period--selected {
     background: var(--ax-bg-danger-strong-pressed);
     border: none;
     color: var(--ax-text-danger-contrast);
   }
 }
 
-.navds-timeline__period--info {
+.aksel-timeline__period--info {
   background: var(--ax-bg-info-moderate);
   border: solid 1px var(--ax-border-info);
   color: var(--ax-text-info-icon);
 
-  &.navds-timeline__period--clickable:hover {
+  &.aksel-timeline__period--clickable:hover {
     background: var(--ax-bg-info-moderate-hover);
     border-color: var(--ax-border-info-strong);
   }
 
-  &.navds-timeline__period--clickable.navds-timeline__period--selected {
+  &.aksel-timeline__period--clickable.aksel-timeline__period--selected {
     background: var(--ax-bg-info-strong-pressed);
     border: none;
     color: var(--ax-text-info-contrast);
   }
 }
 
-.navds-timeline__period--neutral {
+.aksel-timeline__period--neutral {
   background: var(--ax-bg-neutral-moderate);
   border: solid 1px var(--ax-border-neutral);
   color: var(--ax-text-neutral-icon);
 
-  &.navds-timeline__period--clickable:hover {
+  &.aksel-timeline__period--clickable:hover {
     background: var(--ax-bg-neutral-moderate-hover);
     border-color: var(--ax-border-neutral-strong);
   }
 
-  &.navds-timeline__period--clickable.navds-timeline__period--selected {
+  &.aksel-timeline__period--clickable.aksel-timeline__period--selected {
     background: var(--ax-bg-neutral-strong-pressed);
     border: none;
     color: var(--ax-text-neutral-contrast);
   }
 }
 
-.navds-timeline__period--connected-both {
+.aksel-timeline__period--connected-both {
   border-radius: 0;
 }
 
-.navds-timeline__period--connected-right {
+.aksel-timeline__period--connected-right {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
 
-.navds-timeline__period--connected-left {
+.aksel-timeline__period--connected-left {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
 }
 
-.navds-timeline__pin-wrapper {
+.aksel-timeline__pin-wrapper {
   position: absolute;
   grid-column: 2;
   top: 0;
@@ -210,11 +210,9 @@
   display: flex;
   flex-direction: column-reverse;
   isolation: isolate;
-
-  --navdsc-timeline-pin-size: 0.9rem;
 }
 
-.navds-timeline__pin-button {
+.aksel-timeline__pin-button {
   border: none;
   cursor: pointer;
   background: var(--ax-bg-default);
@@ -248,23 +246,23 @@
   }
 }
 
-.navds-timeline__pin-wrapper::before {
+.aksel-timeline__pin-wrapper::before {
   content: "";
-  top: var(--navdsc-timeline-pin-size);
-  height: calc(100% - var(--navdsc-timeline-pin-size) * 2);
+  top: 0.9rem;
+  height: calc(100% - 0.9rem * 2);
   width: 1px;
   margin: 0 auto;
   background: var(--ax-border-neutral-strong);
 }
 
-.navds-timeline__zoom {
+.aksel-timeline__zoom {
   margin-top: var(--ax-space-24);
   float: right;
   display: flex;
   list-style-type: none;
 }
 
-.navds-timeline__zoom-button {
+.aksel-timeline__zoom-button {
   all: unset;
   cursor: pointer;
   padding: 6px 9px 6px 8px;
@@ -273,41 +271,41 @@
   background: var(--ax-bg-default);
 }
 
-.navds-timeline__zoom li:first-child .navds-timeline__zoom-button {
+.aksel-timeline__zoom li:first-child .aksel-timeline__zoom-button {
   border-radius: var(--ax-border-radius-medium) 0 0 var(--ax-border-radius-medium);
 }
 
-.navds-timeline__zoom li:last-child .navds-timeline__zoom-button {
+.aksel-timeline__zoom li:last-child .aksel-timeline__zoom-button {
   border-width: 1px;
   border-radius: 0 var(--ax-border-radius-medium) var(--ax-border-radius-medium) 0;
 }
 
-.navds-timeline__zoom li:only-child .navds-timeline__zoom-button {
+.aksel-timeline__zoom li:only-child .aksel-timeline__zoom-button {
   border-radius: var(--ax-border-radius-medium);
 }
 
-.navds-timeline__zoom-button:not([aria-pressed="true"]):hover {
+.aksel-timeline__zoom-button:not([aria-pressed="true"]):hover {
   background: var(--ax-bg-neutral-moderate-hoverA);
 }
 
-.navds-timeline__zoom-button[aria-pressed="true"] {
+.aksel-timeline__zoom-button[aria-pressed="true"] {
   background: var(--ax-bg-neutral-strong-pressed);
   border-color: var(--ax-bg-neutral-strong-pressed);
   color: var(--ax-text-neutral-contrast);
 }
 
-.navds-timeline__zoom li:focus-within {
+.aksel-timeline__zoom li:focus-within {
   z-index: 5;
 }
 
-.navds-timeline__zoom-button:focus-visible {
+.aksel-timeline__zoom-button:focus-visible {
   box-shadow:
     0 0 0 1px var(--ax-bg-default),
     0 0 0 4px var(--ax-border-focus);
   border-width: 1px;
 }
 
-.navds-timeline__zoom li:not(:last-child) .navds-timeline__zoom-button:focus-visible {
+.aksel-timeline__zoom li:not(:last-child) .aksel-timeline__zoom-button:focus-visible {
   margin-right: 2px;
   padding-right: 6px;
 }
@@ -316,7 +314,7 @@
 * Timeline Popover
 */
 
-.navds-timeline__popover {
+.aksel-timeline__popover {
   z-index: 5;
   background-color: var(--ax-bg-raised);
   box-shadow: var(--ax-shadow-dialog);
@@ -327,33 +325,33 @@
 }
 
 @media (forced-colors: active) {
-  .navds-timeline__period:focus {
+  .aksel-timeline__period:focus {
     outline: 3px solid highlight;
     outline-offset: 3px;
   }
 
-  .navds-timeline__period--success,
-  .navds-timeline__period--warning,
-  .navds-timeline__period--info,
-  .navds-timeline__period--neutral,
-  .navds-timeline__period--danger {
+  .aksel-timeline__period--success,
+  .aksel-timeline__period--warning,
+  .aksel-timeline__period--info,
+  .aksel-timeline__period--neutral,
+  .aksel-timeline__period--danger {
     forced-color-adjust: none;
   }
 
-  .navds-timeline__row {
+  .aksel-timeline__row {
     border: 1px solid transparent;
   }
 
-  .navds-timeline__pin-wrapper::before {
+  .aksel-timeline__pin-wrapper::before {
     border: 1px solid transparent;
   }
 
-  .navds-timeline__pin-button {
+  .aksel-timeline__pin-button {
     outline: 4px solid transparent;
   }
 
-  .navds-timeline__pin-button:focus,
-  .navds-timeline__pin-button:focus-visible {
+  .aksel-timeline__pin-button:focus,
+  .aksel-timeline__pin-button:focus-visible {
     outline: 4px solid highlight;
     outline-offset: 3px;
     box-shadow: none;

@navikt/core/css/darkside/toggle-group.darkside.css

@@ -1,15 +1,15 @@
-.navds-toggle-group__wrapper {
+.aksel-toggle-group__wrapper {
   display: grid;
   justify-items: start;
   gap: var(--ax-space-8);
 }
 
-.navds-toggle-group__wrapper--fill {
+.aksel-toggle-group__wrapper--fill {
   justify-items: initial;
 }
 
 /* Main Togglegroup */
-.navds-toggle-group {
+.aksel-toggle-group {
   border-radius: var(--ax-border-radius-large);
   background-color: transparent;
   box-shadow: inset 0 0 0 1px var(--ax-border-neutral);
@@ -20,7 +20,7 @@
 }
 
 /* Button */
-.navds-toggle-group__button {
+.aksel-toggle-group__button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -61,7 +61,7 @@
   }
 }
 
-.navds-toggle-group__button-inner {
+.aksel-toggle-group__button-inner {
   display: flex;
   align-items: center;
   gap: var(--ax-space-8);
@@ -76,7 +76,7 @@
 }
 
 /* Modifier neutral variant */
-:where(.navds-toggle-group--neutral) .navds-toggle-group__button {
+:where(.aksel-toggle-group--neutral) .aksel-toggle-group__button {
   &:hover {
     background-color: var(--ax-bg-neutral-moderate-hoverA);
   }
@@ -88,36 +88,36 @@
 }
 
 /* Modifier small size */
-.navds-toggle-group--small {
-  & .navds-toggle-group__button {
+.aksel-toggle-group--small {
+  & .aksel-toggle-group__button {
     padding: var(--ax-space-2) var(--ax-space-12);
     min-height: 2rem;
   }
 
-  & .navds-toggle-group__button-inner > svg {
+  & .aksel-toggle-group__button-inner > svg {
     font-size: var(--ax-font-size-xlarge);
   }
 }
 
 /* High contrast */
 @media (forced-colors: active) {
-  .navds-toggle-group {
+  .aksel-toggle-group {
     border: 2px solid transparent;
   }
 
-  .navds-toggle-group__button:hover {
+  .aksel-toggle-group__button:hover {
     background-color: highlighttext;
     color: highlight;
     outline: 1px solid highlight;
   }
 
-  .navds-toggle-group__button[data-selected="true"] {
+  .aksel-toggle-group__button[data-selected="true"] {
     background-color: selecteditem;
     color: selecteditemtext;
     forced-color-adjust: none;
   }
 
-  .navds-toggle-group__button:focus-visible {
+  .aksel-toggle-group__button:focus-visible {
     outline-color: highlight;
   }
 }

@navikt/core/css/darkside/tooltip.darkside.css

@@ -1,4 +1,4 @@
-.navds-tooltip {
+.aksel-tooltip {
   z-index: 3000;
   background-color: var(--ax-bg-neutral-strong);
   color: var(--ax-text-neutral-contrast);
@@ -34,19 +34,19 @@
   }
 }
 
-.navds-tooltip:where([data-state="open"]):where([data-side="bottom"]) {
+.aksel-tooltip:where([data-state="open"]):where([data-side="bottom"]) {
   animation-name: aksel-tooltip-from-bottom, aksel-tooltip-fade-in;
 }
 
-.navds-tooltip:where([data-state="open"]):where([data-side="top"]) {
+.aksel-tooltip:where([data-state="open"]):where([data-side="top"]) {
   animation-name: aksel-tooltip-from-top, aksel-tooltip-fade-in;
 }
 
-.navds-tooltip:where([data-state="open"]):where([data-side="left"]) {
+.aksel-tooltip:where([data-state="open"]):where([data-side="left"]) {
   animation-name: aksel-tooltip-from-left, aksel-tooltip-fade-in;
 }
 
-.navds-tooltip:where([data-state="open"]):where([data-side="right"]) {
+.aksel-tooltip:where([data-state="open"]):where([data-side="right"]) {
   animation-name: aksel-tooltip-from-right, aksel-tooltip-fade-in;
 }
 
@@ -100,13 +100,13 @@
   }
 }
 
-.navds-tooltip__keys {
+.aksel-tooltip__keys {
   padding-bottom: var(--ax-space-4);
   display: flex;
   gap: var(--ax-space-4);
 }
 
-.navds-tooltip__key {
+.aksel-tooltip__key {
   font-family: var(--ax-font-family);
   color: var(--ax-text-neutral);
   padding: 0 var(--ax-space-4);

@navikt/core/css/darkside/typography.darkside.css

@@ -1,87 +1,87 @@
 /* Heading */
-.navds-heading {
+.aksel-heading {
   font-weight: var(--ax-font-weight-bold);
   margin: 0;
 }
 
-.navds-heading--xlarge {
+.aksel-heading--xlarge {
   font-size: var(--ax-font-size-heading-2xlarge);
   letter-spacing: -0.01em;
   line-height: var(--ax-font-line-height-heading-2xlarge);
   font-weight: 650;
 }
 
-.navds-heading--xlarge.navds-typo--spacing {
+.aksel-heading--xlarge.aksel-typo--spacing {
   margin-bottom: var(--ax-space-20);
 }
 
-.navds-heading--large {
+.aksel-heading--large {
   font-size: var(--ax-font-size-heading-xlarge);
   letter-spacing: -0.008em;
   line-height: var(--ax-font-line-height-heading-xlarge);
   font-weight: 650;
 }
 
-.navds-heading--large.navds-typo--spacing {
+.aksel-heading--large.aksel-typo--spacing {
   margin-bottom: var(--ax-space-16);
 }
 
 /* Mobile scale */
 @media (max-width: 480px) {
-  .navds-heading--xlarge {
+  .aksel-heading--xlarge {
     font-size: var(--ax-font-size-heading-xlarge);
     letter-spacing: -0.008em;
     line-height: var(--ax-font-line-height-heading-xlarge);
   }
 
-  .navds-heading--xlarge.navds-typo--spacing {
+  .aksel-heading--xlarge.aksel-typo--spacing {
     margin-bottom: var(--ax-space-16);
   }
 
-  .navds-heading--large {
+  .aksel-heading--large {
     font-size: var(--ax-font-size-heading-large);
     letter-spacing: -0.004em;
     line-height: var(--ax-font-line-height-heading-large);
   }
 
-  .navds-heading--large.navds-typo--spacing {
+  .aksel-heading--large.aksel-typo--spacing {
     margin-bottom: var(--ax-space-12);
   }
 }
 
-.navds-heading--medium {
+.aksel-heading--medium {
   font-size: var(--ax-font-size-heading-medium);
   letter-spacing: -0.002em;
   line-height: var(--ax-font-line-height-heading-medium);
   font-weight: 650;
 }
 
-.navds-heading--medium.navds-typo--spacing {
+.aksel-heading--medium.aksel-typo--spacing {
   margin-bottom: var(--ax-space-12);
 }
 
-.navds-heading--small {
+.aksel-heading--small {
   font-size: var(--ax-font-size-heading-small);
   letter-spacing: -0.001em;
   line-height: var(--ax-font-line-height-heading-small);
 }
 
-.navds-heading--small.navds-typo--spacing {
+.aksel-heading--small.aksel-typo--spacing {
   margin-bottom: var(--ax-space-12);
 }
 
-.navds-heading--xsmall {
+.aksel-heading--xsmall {
   font-size: var(--ax-font-size-heading-xsmall);
   letter-spacing: -0.001em;
   line-height: var(--ax-font-line-height-heading-xsmall);
 }
 
-.navds-heading--xsmall.navds-typo--spacing {
+.aksel-heading--xsmall.aksel-typo--spacing {
   margin-bottom: var(--ax-space-12);
 }
 
 /* Ingress */
-.navds-ingress {
+.aksel-ingress {
   font-size: var(--ax-font-size-xlarge);
   font-weight: var(--ax-font-weight-regular);
   letter-spacing: -0.001em;
@@ -89,12 +89,12 @@
   margin: 0;
 }
 
-.navds-ingress.navds-typo--spacing {
+.aksel-ingress.aksel-typo--spacing {
   margin-bottom: var(--ax-space-40);
 }
 
 /* Body */
-.navds-body-long {
+.aksel-body-long {
   font-size: var(--ax-font-size-large);
   font-weight: var(--ax-font-weight-regular);
   letter-spacing: 0;
@@ -102,31 +102,31 @@
   margin: 0;
 }
 
-.navds-body-long.navds-typo--spacing {
+.aksel-body-long.aksel-typo--spacing {
   margin-bottom: var(--ax-space-28);
 }
 
-.navds-body-long--large {
+.aksel-body-long--large {
   font-size: var(--ax-font-size-xlarge);
   letter-spacing: -0.0013em;
   line-height: var(--ax-font-line-height-xlarge);
 }
 
-.navds-body-long--large.navds-typo--spacing {
+.aksel-body-long--large.aksel-typo--spacing {
   margin-bottom: var(--ax-space-40);
 }
 
-.navds-body-long--small {
+.aksel-body-long--small {
   font-size: var(--ax-font-size-medium);
   letter-spacing: 0.002em;
   line-height: var(--ax-font-line-height-large);
 }
 
-.navds-body-long--small.navds-typo--spacing {
+.aksel-body-long--small.aksel-typo--spacing {
   margin-bottom: var(--ax-space-24);
 }
 
-.navds-body-short {
+.aksel-body-short {
   font-size: var(--ax-font-size-large);
   font-weight: var(--ax-font-weight-regular);
   letter-spacing: 0;
@@ -134,32 +134,32 @@
   margin: 0;
 }
 
-.navds-body-short.navds-typo--spacing {
+.aksel-body-short.aksel-typo--spacing {
   margin-bottom: var(--ax-space-12);
 }
 
-.navds-body-short--large {
+.aksel-body-short--large {
   font-size: var(--ax-font-size-xlarge);
   letter-spacing: -0.0013em;
   line-height: var(--ax-font-line-height-large);
 }
 
-.navds-body-short--large.navds-typo--spacing {
+.aksel-body-short--large.aksel-typo--spacing {
   margin-bottom: var(--ax-space-16);
 }
 
-.navds-body-short--small {
+.aksel-body-short--small {
   font-size: var(--ax-font-size-medium);
   letter-spacing: 0.002em;
   line-height: var(--ax-font-line-height-medium);
 }
 
-.navds-body-short--small.navds-typo--spacing {
+.aksel-body-short--small.aksel-typo--spacing {
   margin-bottom: var(--ax-space-8);
 }
 
 /* Label */
-.navds-label {
+.aksel-label {
   font-size: var(--ax-font-size-large);
   font-weight: var(--ax-font-weight-bold);
   letter-spacing: 0;
@@ -167,48 +167,48 @@
   margin: 0;
 }
 
-.navds-label.navds-typo--spacing {
+.aksel-label.aksel-typo--spacing {
   margin-bottom: var(--ax-space-12);
 }
 
-.navds-label--small {
+.aksel-label--small {
   font-size: var(--ax-font-size-medium);
   letter-spacing: 0.002em;
   line-height: var(--ax-font-line-height-medium);
 }
 
-.navds-label--small.navds-typo--spacing {
+.aksel-label--small.aksel-typo--spacing {
   margin-bottom: var(--ax-space-8);
 }
 
 /* Small text */
-.navds-detail {
+.aksel-detail {
   font-size: var(--ax-font-size-small);
   letter-spacing: 0.004em;
   line-height: var(--ax-font-line-height-medium);
   margin: 0;
 }
 
-.navds-detail.navds-typo--spacing {
+.aksel-detail.aksel-typo--spacing {
   margin-bottom: var(--ax-space-8);
 }
 
-.navds-detail.navds-typo--uppercase {
+.aksel-detail.aksel-typo--uppercase {
   text-transform: uppercase;
 }
 
-.navds-detail--small {
+.aksel-detail--small {
   font-weight: var(--ax-font-weight-regular);
 }
 
-.navds-detail--small.navds-typo--spacing {
+.aksel-detail--small.aksel-typo--spacing {
   margin-bottom: var(--ax-space-8);
 }
 
-.navds-error-message {
+.aksel-error-message {
   color: var(--ax-text-danger-subtle);
 
-  &.navds-error-message--show-icon {
+  &.aksel-error-message--show-icon {
     display: flex;
     gap: var(--ax-space-4);
 
@@ -222,29 +222,29 @@
 }
 
 /* -------------------------------- Utilities ------------------------------- */
-.navds-typo--truncate {
+.aksel-typo--truncate {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
-.navds-typo--semibold {
+.aksel-typo--semibold {
   font-weight: var(--ax-font-weight-bold);
 }
 
-.navds-typo--align-start {
+.aksel-typo--align-start {
   text-align: start;
 }
 
-.navds-typo--align-center {
+.aksel-typo--align-center {
   text-align: center;
 }
 
-.navds-typo--align-end {
+.aksel-typo--align-end {
   text-align: end;
 }
 
-.navds-typo--visually-hidden {
+.aksel-typo--visually-hidden {
   border: 0 !important;
   clip: rect(0, 0, 0, 0) !important;
   height: 1px !important;
@@ -257,6 +257,6 @@
   width: 1px !important;
 }
 
-.navds-typo--color-subtle {
+.aksel-typo--color-subtle {
   color: var(--ax-text-neutral-subtle);
 }

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "7.14.2",
+  "version": "7.16.0",
   "description": "CSS for Nav Designsystem",
   "author": "Aksel | Nav designsystem team",
   "keywords": [
@@ -28,7 +28,7 @@
     "test": "yarn build && vitest run"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^7.14.2",
+    "@navikt/ds-tokens": "^7.16.0",
     "@types/clean-css": "4.2.11",
     "autoprefixer": "^10.4.20",
     "browserslist": "^4.24.2",
@@ -57,6 +57,7 @@
     ".": "./dist/index.css",
     "./dist/*": "./dist/*",
     "./darkside": "./dist/darkside/index.css",
-    "./tokens.json": "./tokens.json"
+    "./tokens.json": "./tokens.json",
+    "./config/_mappings": "./config/_mappings.js"
   }
 }

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @navikt/ds-react
 
+## 7.16.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@7.16.0
+  - @navikt/aksel-icons@7.16.0
+
+## 7.15.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@7.15.0
+  - @navikt/aksel-icons@7.15.0
+
+## 7.14.3
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@7.14.3
+  - @navikt/aksel-icons@7.14.3
+
 ## 7.14.2
 
 ### Patch Changes

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "7.14.2",
+  "version": "7.16.0",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -625,8 +625,8 @@
   "dependencies": {
     "@floating-ui/react": "0.25.4",
     "@floating-ui/react-dom": "^2.0.9",
-    "@navikt/aksel-icons": "^7.14.2",
-    "@navikt/ds-tokens": "^7.14.2",
+    "@navikt/aksel-icons": "^7.16.0",
+    "@navikt/ds-tokens": "^7.16.0",
     "clsx": "^2.1.0",
     "date-fns": "^4.0.0",
     "react-day-picker": "9.5.0"

@navikt/core/react/src/accordion/Accordion.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../theme/Theme";
 import AccordionContent, { AccordionContentProps } from "./AccordionContent";
 import { AccordionContext } from "./AccordionContext";
 import AccordionHeader, { AccordionHeaderProps } from "./AccordionHeader";
@@ -86,6 +86,8 @@ export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
     },
     ref,
   ) => {
+    const { cn } = useRenameCSS();
+
     return (
       <AccordionContext.Provider
         value={{
@@ -97,7 +99,7 @@ export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
       >
         <div
           {...rest}
-          className={cl(
+          className={cn(
             "navds-accordion",
             className,
             `navds-accordion--${size}`,