Version Packages (#3307)

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

.eslintrc.js

@@ -6,6 +6,14 @@
  * - We should add "plugin:react/jsx-runtime", but not sure if this will cause problems for projects not using the new JSX transform
  * - Consider adding the rule "id-length"
  */
+
+/**
+ * V9 migration WIP
+ * - eslint-plugin-storybook does not support v9 yet: https://github.com/storybookjs/eslint-plugin-storybook/issues/157
+ * - eslint-plugin-testing-library does not support v9 yet: https://github.com/testing-library/eslint-plugin-testing-library/issues?q=is%3Aissue+is%3Aopen+v9
+ * - @vitest/eslint-plugin supports v9, just need to replace @vitest/legacy-recommended: https://github.com/vitest-dev/eslint-plugin-vitest?tab=readme-ov-file#usage
+ * - Looks like @typescript-eslint/eslint-plugin and @typescript-eslint/parser can both be replaced by just typescript-eslint in v9: https://typescript-eslint.io/getting-started#step-2-configuration
+ */
 module.exports = {
   env: {
     browser: true,
@@ -77,6 +85,11 @@ module.exports = {
         "@typescript-eslint/no-shadow": ["error", { hoist: "all" }],
         "@typescript-eslint/no-explicit-any": "off", // Temporary
         "@typescript-eslint/array-type": "error",
+        "@typescript-eslint/no-unused-expressions": [
+          "error",
+          /* https://eslint.org/docs/latest/rules/no-unused-expressions#allowshortcircuit-and-allowternary */
+          { allowShortCircuit: true, allowTernary: true },
+        ],
       },
     },
     {

.github/PULL_REQUEST_TEMPLATE.md

@@ -6,7 +6,7 @@
 
 - [ ] JSDoc
 - [ ] Examples
-- [ ] Documentation
+- [ ] Documentation / Decision Records
 - [ ] Storybook
 - [ ] Style mappings (`@navikt/core/css/config/_mappings.js`)
 - [ ] Component tokens (`@navikt/core/css/tokens.json`)

.github/workflows/e2e.yml

@@ -13,7 +13,7 @@ jobs:
   playwright:
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.35.1-jammy
+      image: mcr.microsoft.com/playwright:v1.48.1-jammy
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4

.storybook/getting-started.mdx

@@ -136,34 +136,34 @@ import Setup from "./assets/setup.png";
     width: 100%;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    grid-gap: var(--a-spacing-6);
+    grid-gap: 1.5rem;
   }
 
   .sb-link{
     text-decoration: underline;
-    color: var(--a-text-default);
+    color: #111;
   }
 
   img {
     object-fit: cover;
-    padding-bottom: var(--a-spacing-5);
+    padding-bottom: 1.25rem;
     border-radius: 8px;
   }
 
   .sb-section-title {
-    margin-bottom: var(--a-spacing-8);
+    margin-bottom: 2rem;
   }
 
 
 
   .sb-section-item-heading {
-    padding-bottom: var(--a-spacing-1);
+    padding-bottom: 0.25rem
     margin: 0 !important;
   }
 
   .sb-section-item-paragraph {
     margin: 0;
-    padding-bottom: var(--a-spacing-3);
+    padding-bottom: 0.75rem;
   }
 
   @media screen and (max-width: 768px) {

.storybook/main.ts

@@ -53,6 +53,7 @@ export default {
     "@storybook/addon-a11y",
     "@whitespace/storybook-addon-html",
     "@storybook/addon-interactions",
+    "@storybook/addon-themes",
     {
       name: "@storybook/addon-storysource",
       options: {

.storybook/preview.jsx

@@ -1,5 +1,7 @@
-import React from "react";
-import "@navikt/ds-css/index.css";
+import { withThemeByClassName } from "@storybook/addon-themes";
+import React, { useLayoutEffect } from "react";
+import darksideCss from "@navikt/ds-css/darkside/index.css?inline";
+import defaultCss from "@navikt/ds-css/index.css?inline";
 import "./layout.css";
 
 export const parameters = {
@@ -16,44 +18,61 @@ export const parameters = {
     },
   },
   layout: "centered",
-  backgrounds: {
-    values: [
-      {
-        name: "Canvas",
-        value: "#ffffff",
-      },
-      {
-        name: "Darkmode",
-        value: "#23262a",
-      },
-    ],
-  },
+  backgrounds: { disable: true },
 };
 
 export const globalTypes = {
-  theme: {
-    name: "Theme",
+  mode: {
+    name: "Darkside",
     toolbar: {
-      icon: "circlehollow",
       items: [
-        { value: "light", icon: "circlehollow", title: "light" },
-        { value: "dark", icon: "circle", title: "dark" },
+        {
+          value: "default",
+          icon: "hourglass",
+          title: "Default (old)",
+        },
+        { value: "darkside", icon: "beaker", title: "Darkside (new)" },
       ],
       showName: true,
+      dynamicTitle: true,
     },
   },
 };
 
-export const withTheme = (StoryFn, context) => {
-  return (
-    <div
-      data-theme={context.parameters.theme || context.globals.theme || "light"}
-      lang="no"
-      id="root"
-    >
-      <StoryFn />
-    </div>
-  );
+export const initialGlobals = {
+  mode: "default",
 };
 
-export const decorators = [withTheme];
+const ModeDecorator = ({ children, mode }) => {
+  useLayoutEffect(() => {
+    const style = document.createElement("style");
+    style.innerHTML = mode === "darkside" ? darksideCss : defaultCss;
+    document.head.appendChild(style);
+
+    if (mode === "darkside") {
+      document.body.style.setProperty("background", "var(--ax-bg-default)");
+    }
+
+    return () => {
+      document.head.removeChild(style);
+      document.body.style.removeProperty("background");
+    };
+  }, [mode]);
+
+  return children;
+};
+
+export const decorators = [
+  (StoryFn, context) => (
+    <ModeDecorator mode={context.globals.mode}>
+      <StoryFn />
+    </ModeDecorator>
+  ),
+  withThemeByClassName({
+    themes: {
+      light: "light",
+      dark: "dark",
+    },
+    defaultTheme: "light",
+  }),
+];

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @navikt/aksel-icons
 
+## 7.4.2
+
+## 7.4.1
+
+## 7.4.0
+
+## 7.3.1
+
+## 7.3.0
+
 ## 7.2.1
 
 ## 7.2.0

@navikt/aksel-icons/__tests__/figma.test.ts

@@ -0,0 +1,16 @@
+import { describe, expect, test } from "vitest";
+import { splitIntoParts } from "../config/figma/fetch-icons";
+
+describe("splitIntoParts", () => {
+  test("should split array into parts correctly with odd count array", () => {
+    const arr = ["a", "b", "c", "d", "e"];
+    const result = splitIntoParts(arr, 4);
+    expect(result).toEqual(["a,b", "c,d", "e"]);
+  });
+
+  test("should split array into parts correctly with even count array", () => {
+    const arr = ["a", "b", "c", "d", "e", "f"];
+    const result = splitIntoParts(arr, 4);
+    expect(result).toEqual(["a,b", "c,d", "e,f"]);
+  });
+});

@navikt/aksel-icons/__tests__/validate-config.test.ts

@@ -1,9 +1,9 @@
-/* eslint-disable import/no-named-as-default-member */
 import fastglob from "fast-glob";
 import fs from "fs";
-import jsYaml from "js-yaml";
+import { JSON_SCHEMA, load } from "js-yaml";
 import path from "path";
 import { describe, expect, test } from "vitest";
+import { IconYml } from "../config/figma/make-configs";
 
 const basePath = path.resolve(__dirname, "../icons");
 
@@ -14,9 +14,10 @@ const ymlList = fastglob
 describe(`Each icons YML-config is valid`, () => {
   ymlList.forEach((file) => {
     test(`${file} has valid YML-config`, () => {
-      const ymlData = jsYaml.load(fs.readFileSync(`${basePath}/${file}`), {
-        schema: jsYaml.JSON_SCHEMA,
-      });
+      const ymlData = load(fs.readFileSync(`${basePath}/${file}`).toString(), {
+        schema: JSON_SCHEMA,
+      }) as IconYml;
+
       expect(ymlData.name).toBeTruthy();
       expect(ymlData.category).toBeTruthy();
       expect(ymlData.sub_category).toBeTruthy();
@@ -31,7 +32,7 @@ describe(`Each icons YML-config is valid`, () => {
   });
 });
 
-function isDate(dateStr) {
+function isDate(dateStr: string) {
   return !Number.isNaN(
     new Date(dateStr.split(".").reverse().join(".")).getDate(),
   );

@navikt/aksel-icons/config/figma/fetch-icons.mjs

@@ -1,63 +0,0 @@
-const file_key = "wEdyFjCQSBR3U7FvrMbPXa";
-
-export const fetchIcons = async () => {
-  console.info("Fetching new icons from Figma...");
-  const data = await fetch(
-    `https://api.figma.com/v1/files/${file_key}/components`,
-    {
-      headers: {
-        "Content-type": "application/json",
-        "X-FIGMA-TOKEN": process.env.FIGMA_TOKEN,
-      },
-    },
-  )
-    .then((x) => x.json())
-    .catch((e) => {
-      throw e.message;
-    });
-
-  if (data?.err) {
-    throw new Error(data.err);
-  }
-
-  if (!data?.meta?.components || data?.meta?.components.length === 0) {
-    throw new Error("Fant ingen publiserte ikoner");
-  }
-
-  return data?.meta?.components;
-};
-
-export const fetchDownloadUrls = async (idArray) => {
-  const urls = { images: null };
-
-  for (let ids of idArray) {
-    await fetch(
-      `https://api.figma.com/v1/images/${file_key}/?ids=${ids}&format=svg`,
-      {
-        headers: {
-          "Content-type": "application/json",
-          "X-FIGMA-TOKEN": process.env.FIGMA_TOKEN,
-        },
-      },
-    )
-      .then((x) => x.json())
-      .then((x) => {
-        urls.images = {
-          ...urls.images,
-          ...x.images,
-        };
-      })
-      .catch((e) => {
-        throw e.message;
-      });
-  }
-  return urls;
-};
-
-export const fetchIcon = async (url) => {
-  return await fetch(url)
-    .then((x) => x.text())
-    .catch((e) => {
-      throw e.message;
-    });
-};

@navikt/aksel-icons/config/figma/fetch-icons.ts

@@ -0,0 +1,114 @@
+import {
+  BadRequestErrorResponseWithErrMessage,
+  ErrorResponsePayloadWithErrMessage,
+  GetFileComponentsResponse,
+  GetImagesResponse,
+  PublishedComponent,
+} from "@figma/rest-api-spec";
+
+/* https://www.figma.com/developers/api#library-items */
+const FIGMA_FILE_KEY = "wEdyFjCQSBR3U7FvrMbPXa";
+
+export const fetchIcons = async (): Promise<PublishedComponent[]> => {
+  console.group("Fetching list of published icons from Figma...");
+  const data:
+    | GetFileComponentsResponse
+    | BadRequestErrorResponseWithErrMessage = await fetch(
+    `https://api.figma.com/v1/files/${FIGMA_FILE_KEY}/components`,
+    {
+      headers: {
+        "Content-type": "application/json",
+        "X-FIGMA-TOKEN": process.env.FIGMA_TOKEN ?? "",
+      },
+    },
+  )
+    .then((x) => x.json())
+    .catch((e) => {
+      throw e.message;
+    });
+
+  if (data.status !== 200) {
+    throw new Error(data.err);
+  }
+
+  if (data.meta.components.length === 0) {
+    throw new Error("No published icons found");
+  }
+
+  /* Filtes out any 'random' icons not meant for the icon-library */
+  const validIcons = data.meta.components.filter((icon) => {
+    const validIcon =
+      !!icon.containing_frame?.pageName && !!icon.containing_frame?.name;
+
+    if (!validIcon) {
+      console.warn(`Ignoring icon '${icon.name}' as it is missing metadata`);
+    }
+    return validIcon;
+  });
+
+  console.info(
+    `Found ${validIcons.length} published icons in Figma. ${
+      data.meta.components.length - validIcons.length
+    } icons were ignored due to missing metadata.`,
+  );
+
+  console.groupEnd();
+
+  return validIcons;
+};
+
+export const fetchDownloadUrls = async (
+  nodeIds: string[],
+): Promise<Record<string, string>> => {
+  /* Would just using Record be better here? Yes. But is a self-referencing return kinda cool? Also yes */
+  const idUrlPairs: Awaited<ReturnType<typeof fetchDownloadUrls>> = {};
+
+  /* Figma accepts a comma-separated list of ids: GET /v1/images/:key?ids=1:2,1:3,1:4 */
+  const paginatedNodeIds = splitIntoParts(nodeIds, 5);
+
+  for (const ids of paginatedNodeIds) {
+    const data: GetImagesResponse | ErrorResponsePayloadWithErrMessage =
+      await fetch(
+        `https://api.figma.com/v1/images/${FIGMA_FILE_KEY}/?ids=${ids}&format=svg`,
+        {
+          headers: {
+            "Content-type": "application/json",
+            "X-FIGMA-TOKEN": process.env.FIGMA_TOKEN ?? "",
+          },
+        },
+      )
+        .then((x) => x.json())
+        .catch((e) => {
+          throw e.message;
+        });
+
+    if (data.err !== null) {
+      throw new Error(data.err);
+    }
+
+    for (const [key, value] of Object.entries(data.images)) {
+      if (!value) {
+        console.warn(`No image found for ${key}`);
+        continue;
+      }
+      idUrlPairs[key] = value;
+    }
+  }
+  return idUrlPairs;
+};
+
+/**
+ * Splits an array of strings into parts where each part is a comma-separated string of all the strings for that part.
+ * @returns An array of comma-separated strings.
+ */
+export function splitIntoParts(arr: string[], parts: number): string[] {
+  const partSize = Math.ceil(arr.length / parts);
+  const blocks: string[] = [];
+
+  for (let i = 0; i < parts && i * partSize < arr.length; i++) {
+    const part = arr.slice(i * partSize, (i + 1) * partSize);
+    blocks.push(part.join(","));
+  }
+
+  return blocks;
+}

@navikt/aksel-icons/config/figma/icon-name.ts

@@ -1,11 +1,13 @@
-import camelCase from "lodash.camelCase";
-import startCase from "lodash.startcase";
+import { PublishedComponent } from "@figma/rest-api-spec";
+import { camelCase, startCase } from "lodash";
 
-export const resolveName = (icon) => {
+export const resolveName = (icon: PublishedComponent) => {
   const isVariant = icon.name.startsWith("Variant=");
 
   if (isVariant) {
     const variant = icon.name.replace("Variant=", "").replace("Stroke", "");
+
+    /* @ts-expect-error Figma now includes the key:value pair `containingStateGroup: { name: string, nodeId: string }` */
     const actualName = icon.containing_frame?.containingStateGroup?.name;
     const name = `${actualName}${variant}`;
     return `${startCase(camelCase(name)).replace(/ /g, "")}.svg`;

@navikt/aksel-icons/config/figma/index.mjs

@@ -1,64 +0,0 @@
-import { existsSync, mkdirSync, readdirSync, rmSync, writeFileSync } from "fs";
-import { resolve } from "path";
-import { fetchDownloadUrls, fetchIcon, fetchIcons } from "./fetch-icons.mjs";
-import { resolveName } from "./icon-name.mjs";
-import { makeConfig } from "./make-configs.mjs";
-import { paginate } from "./paginate.mjs";
-
-/* https://www.figma.com/file/wEdyFjCQSBR3U7FvrMbPXa/Core-Icons-Next?node-id=277%3A1221&t=mUJzFvnsceYYXNL5-0 */
-
-const iconFolder = "./icons";
-
-if (!process.env.FIGMA_TOKEN) {
-  throw new Error("FIGMA_TOKEN not set in .env");
-}
-
-async function main() {
-  console.info("Started icon-update from Figma");
-  let icons = await fetchIcons();
-
-  const totalIcons = icons.length;
-
-  const { images } = await fetchDownloadUrls(
-    paginate(
-      icons.map((x) => x.node_id),
-      400,
-    ).map((x) => x.join(",")),
-  );
-
-  if (existsSync(iconFolder)) {
-    rmSync(iconFolder, { recursive: true, force: true });
-  }
-
-  mkdirSync(iconFolder);
-
-  console.info(`Laster ned ${Object.keys(images).length} ikoner`);
-
-  for (const [key, value] of Object.entries(images)) {
-    const icon = await fetchIcon(value).catch((e) => {
-      throw e;
-    });
-    await new Promise((r) => setTimeout(r, 20));
-
-    icon &&
-      writeFileSync(
-        resolve(iconFolder, resolveName(icons.find((x) => x.node_id === key))),
-        icon,
-        {
-          encoding: "utf8",
-        },
-      );
-  }
-
-  makeConfig(icons, iconFolder);
-
-  readdirSync(iconFolder, (_, files) => {
-    if (files.length * 2 !== totalIcons) {
-      throw new Error(`Ikoner mangler!`);
-    }
-  });
-
-  console.info(`Success! ${Object.keys(images).length} ikoner lastet ned`);
-}
-
-main();

@navikt/aksel-icons/config/figma/index.ts

@@ -0,0 +1,106 @@
+import { existsSync, mkdirSync, readdirSync, rmSync, writeFileSync } from "fs";
+import { resolve } from "path";
+import { fetchDownloadUrls, fetchIcons } from "./fetch-icons";
+import { resolveName } from "./icon-name";
+import { makeConfig } from "./make-configs";
+
+/**
+ * https://www.figma.com/file/wEdyFjCQSBR3U7FvrMbPXa/Core-Icons-Next?node-id=277%3A1221&t=mUJzFvnsceYYXNL5-0
+ * This is the current source for all icons we are working with.
+ */
+
+const iconFolder = "./icons";
+
+if (!process.env.FIGMA_TOKEN) {
+  throw new Error("FIGMA_TOKEN not set in .env");
+}
+
+main();
+
+async function main() {
+  console.info("Started icon-update from Figma");
+  /* Icons are published as 'components' in Figma */
+  const publishedIconComponents = await fetchIcons();
+
+  /* When we have all the published icons, we can ask figma for URL's for downloading them as assets */
+  const imagesUrls = await fetchDownloadUrls(
+    publishedIconComponents.map((x) => x.node_id),
+  );
+
+  /* Lets do a clean install */
+  if (existsSync(iconFolder)) {
+    rmSync(iconFolder, { recursive: true, force: true });
+  }
+  mkdirSync(iconFolder);
+
+  console.group(`Processing ${Object.keys(imagesUrls).length} icons...`);
+
+  const fileNames = new Set<string>();
+
+  await Promise.all(
+    Object.entries(imagesUrls).map(async ([nodeId, iconUrl]) => {
+      /* Each icon is now a raw string for a complete SVG */
+      const iconSvg = await fetch(iconUrl)
+        .then((x) => x.text())
+        .catch((e) => {
+          throw e.message;
+        });
+
+      const matchingIcon = publishedIconComponents.find(
+        (x) => x.node_id === nodeId,
+      );
+
+      if (!matchingIcon) {
+        throw new Error(
+          `No matching icon found for ${nodeId}. It should not be possible to dowload icon without a matching icon in the list of icons fetched from Figma.`,
+        );
+      }
+
+      const fileName = resolveName(matchingIcon);
+
+      /*
+       * In some cases if multiple icons are published in Figma with the same name,
+       * we will end up overwriting the icon with the same name.
+       */
+      if (fileNames.has(fileName)) {
+        console.warn(`Duplicate name detected: ${fileName}.`);
+      }
+
+      fileNames.add(fileName);
+
+      writeFileSync(resolve(iconFolder, resolveName(matchingIcon)), iconSvg, {
+        encoding: "utf8",
+      });
+    }),
+  );
+
+  if (fileNames.size !== publishedIconComponents.length) {
+    console.warn(
+      `Duplicate icon names from Figma leads to them being overwritten. This will cause the icon-library to be out of sync with Figma.`,
+    );
+  }
+
+  console.info(`Completed processing 🎉`);
+  console.groupEnd();
+
+  makeConfig(publishedIconComponents, iconFolder);
+
+  const filesInDir = readdirSync(iconFolder);
+  const svgFiles = filesInDir.filter((x) => x.endsWith(".svg"));
+  const ymlFiles = filesInDir.filter((x) => x.endsWith(".yml"));
+
+  if (
+    svgFiles.length !== publishedIconComponents.length ||
+    ymlFiles.length !== publishedIconComponents.length
+  ) {
+    throw new Error(
+      `Icons (${svgFiles.length}) and configs (${ymlFiles.length}) written to directory does not match the expected amount of icons located in Figma (${publishedIconComponents.length}).\nThis is most likely caused by duplicate icon names from figma.`,
+    );
+  }
+
+  console.info(
+    `Success! A total of ${
+      Object.keys(imagesUrls).length
+    } were fetched and downloaded from Figma 🎉`,
+  );
+}

@navikt/aksel-icons/config/figma/make-configs.ts

@@ -1,17 +1,40 @@
+import { PublishedComponent } from "@figma/rest-api-spec";
 import { writeFileSync } from "fs";
-import jsYaml from "js-yaml";
+import { dump } from "js-yaml";
 import { resolve } from "path";
-import { resolveName } from "./icon-name.mjs";
+import { resolveName } from "./icon-name";
 
-export const makeConfig = (icons, folder) => {
-  icons.forEach((icon) => {
+export type IconYml = {
+  name: string;
+  category: string;
+  sub_category: string;
+  keywords: string[];
+  variant: string;
+  updated_at: string;
+  created_at: string;
+};
+
+export const makeConfig = (
+  icons: PublishedComponent[],
+  dirLocation: string,
+) => {
+  console.group("Creating icon yml...");
+
+  let counter = 0;
+  for (const icon of icons) {
     const name = resolveName(icon).replace(".svg", "");
     const keywords = icon.description
       .split(",")
       .map((x) => x.trim())
       .filter(Boolean);
 
-    const config = {
+    if (!icon.containing_frame?.pageName || !icon.containing_frame?.name) {
+      throw new Error(
+        `Missing containing_frame.pageName or containing_frame.name for icon ${name}`,
+      );
+    }
+
+    const config: IconYml = {
       name,
       category: icon.containing_frame.pageName,
       sub_category: icon.containing_frame.name,
@@ -33,14 +56,18 @@ export const makeConfig = (icons, folder) => {
         .join("."),
     };
 
-    const yml = jsYaml.dump(config, {
+    const yml = dump(config, {
       noRefs: true,
       skipInvalid: false,
       quotingType: '"',
     });
 
-    writeFileSync(resolve(folder, `${config.name}.yml`), yml, {
+    writeFileSync(resolve(dirLocation, `${config.name}.yml`), yml, {
       encoding: "utf8",
     });
-  });
+    counter++;
+  }
+
+  console.info(`Created ${counter} icon yml files`);
+  console.groupEnd();
 };

@navikt/aksel-icons/config/figma/paginate.mjs

@@ -1,12 +0,0 @@
-export function paginate(arr, size) {
-  return arr.reduce((acc, val, i) => {
-    let idx = Math.floor(i / size);
-    if (!acc[idx]) {
-      acc[idx] = [];
-    }
-    let page = acc[idx];
-    page.push(val);
-
-    return acc;
-  }, []);
-}

@navikt/aksel-icons/figma-plugin/package.json

@@ -27,7 +27,7 @@
     "@vitejs/plugin-react": "^4.2.1",
     "postcss": "^8.4.31",
     "postcss-url": "^10.1.3",
-    "typescript": "^5.1.6",
+    "typescript": "5.5.4",
     "vite": "^5.4.6",
     "vite-plugin-singlefile": "^1.0.0",
     "vite-plugin-svgr": "^4.2.0"

@navikt/aksel-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-icons",
-  "version": "7.2.1",
+  "version": "7.4.2",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/ikoner",
   "repository": {
@@ -62,28 +62,30 @@
     "update-metadata": "node config/metadata.js",
     "write-packagejson": "echo '{\"type\": \"module\"}' > dist/react/esm/package.json",
     "build": "yarn copy && yarn create-icons && concurrently \"tsc\" \"tsc -p tsconfig.esm.json && tsc-alias -p tsconfig.esm.json && yarn write-packagejson\" && node config/cleanTypes.js && yarn update-metadata && yarn parse-svg",
-    "fetch-new:icons": "tsx --env-file=.env config/figma/index.mjs",
+    "fetch-new:icons": "tsx --env-file=.env config/figma/index.ts",
     "zip:icons": "node config/zip.js",
     "test": "vitest run",
     "test:watch": "vitest watch"
   },
   "devDependencies": {
+    "@figma/rest-api-spec": "^0.19.0",
     "@svgr/cli": "8.1.0",
+    "@types/js-yaml": "^4.0.9",
+    "@types/react": "^18.3.11",
     "adm-zip": "^0.5.10",
-    "concurrently": "7.2.1",
+    "concurrently": "9.0.1",
     "copyfiles": "^2.4.1",
     "cross-zip-cli": "1.0.0",
     "fast-glob": "3.2.11",
     "hast-util-select": "5.0.5",
     "js-yaml": "^4.1.0",
-    "lodash.camelcase": "4.3.0",
-    "lodash.startcase": "4.4.0",
+    "lodash": "^4.17.21",
     "prettier": "3.1.1",
     "react": "^18.0.0",
     "rehype-parse": "8.0.4",
     "tsc-alias": "1.8.8",
     "tsx": "^4.7.1",
-    "typescript": "^5.1.6",
+    "typescript": "5.5.4",
     "unified": "10.1.2",
     "vitest": "^1.2.2"
   }

@navikt/aksel-stylelint/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @navikt/aksel-stylelint
 
+## 7.4.2
+
+## 7.4.1
+
+## 7.4.0
+
+## 7.3.1
+
+## 7.3.0
+
 ## 7.2.1
 
 ## 7.2.0

@navikt/aksel-stylelint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-stylelint",
-  "version": "7.2.1",
+  "version": "7.4.2",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
   "repository": {
@@ -35,14 +35,14 @@
     "dev": "yarn watch:lint"
   },
   "devDependencies": {
-    "@navikt/ds-css": "^7.2.1",
-    "@navikt/ds-tokens": "^7.2.1",
-    "concurrently": "7.2.1",
+    "@navikt/ds-css": "^7.4.2",
+    "@navikt/ds-tokens": "^7.4.2",
+    "concurrently": "9.0.1",
     "postcss-selector-parser": "^6.0.13",
     "postcss-value-parser": "^4.2.0",
     "stylelint": "^14.8.5",
     "stylelint-test-rule-node": "^0.2.1",
     "tsx": "^4.7.1",
-    "typescript": "^5.1.6"
+    "typescript": "5.5.4"
   }
 }

@navikt/aksel/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @navikt/aksel
 
+## 7.4.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@7.4.2
+
+## 7.4.1
+
+### Patch Changes
+
+- Updated dependencies [[`81c79d8`](https://github.com/navikt/aksel/commit/81c79d8355e5533bb85081d58f82f37202ff812c)]:
+  - @navikt/ds-css@7.4.1
+
+## 7.4.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@7.4.0
+
+## 7.3.1
+
+### Patch Changes
+
+- Updated dependencies [[`64aab73`](https://github.com/navikt/aksel/commit/64aab7361a512af93d93825c0b5c98a6fd39cf95)]:
+  - @navikt/ds-css@7.3.1
+
+## 7.3.0
+
+### Patch Changes
+
+- Updated dependencies [[`20ced9b`](https://github.com/navikt/aksel/commit/20ced9b084a1f4bb56a1e1c07ef92010c9f4d71c), [`536f088`](https://github.com/navikt/aksel/commit/536f088b97ab9ae139d6974deb2a3c69e4fb6db3)]:
+  - @navikt/ds-css@7.3.0
+
 ## 7.2.1
 
 ### Patch Changes

@navikt/aksel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel",
-  "version": "7.2.1",
+  "version": "7.4.2",
   "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.2.1",
+    "@navikt/ds-css": "7.4.2",
     "axios": "1.7.4",
     "chalk": "4.1.0",
     "clipboardy": "^2.3.0",
@@ -45,7 +45,7 @@
   },
   "devDependencies": {
     "rimraf": "6.0.1",
-    "typescript": "^5.1.6",
+    "typescript": "5.5.4",
     "vitest": "^1.2.2"
   },
   "sideEffects": false,

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @navikt/ds-css
 
+## 7.4.2
+
+## 7.4.1
+
+### Patch Changes
+
+- Combobox: :bug: Fix scroll issue when using arrow keys to navigate list ([#3269](https://github.com/navikt/aksel/pull/3269))
+
+## 7.4.0
+
+## 7.3.1
+
+### Patch Changes
+
+- Updated to Selectors Level 4 syntax. ([#3250](https://github.com/navikt/aksel/pull/3250))
+
+## 7.3.0
+
+### Minor Changes
+
+- ActionMenu: :tada: New component! Replaces DropdownMenu as the go-to solution for floating menus. Includes support for grouping, sub-menus, checkboxes, radios and dividers. Read more in the [documentation](https://aksel.nav.no/komponenter/core/actionmenu). ([#3081](https://github.com/navikt/aksel/pull/3081))
+
+### Patch Changes
+
+- List.Item: Center icon horizontally inside it's container ([#3253](https://github.com/navikt/aksel/pull/3253))
+
 ## 7.2.1
 
 ### Patch Changes

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

@@ -0,0 +1,227 @@
+.navds-action-menu__content {
+  overflow: hidden;
+  box-shadow: var(--a-shadow-medium);
+  border-radius: var(--a-border-radius-large);
+}
+
+/* stylelint-disable csstools/value-no-unknown-custom-properties */
+.navds-action-menu__content > .navds-action-menu__content-inner {
+  --__ac-action-menu-content-p: var(--a-spacing-2);
+  --__ac-action-menu-item-pr: var(--a-spacing-3);
+  --__ac-action-menu-item-pl: var(--a-spacing-2);
+  --__ac-action-menu-item-height: 2rem;
+
+  border-radius: var(--a-border-radius-large);
+  background-color: var(--a-surface-default);
+  min-width: 128px;
+  max-width: min(95vw, 640px);
+  transform-origin: var(--__ac-action-menu-content-transform-origin);
+  animation-duration: 160ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  padding: var(--__ac-action-menu-content-p);
+  overflow: auto;
+  max-height: var(--__ac-action-menu-content-available-height);
+}
+
+.navds-action-menu__content:where([data-state="open"]):where([data-side="bottom"]) {
+  animation-name: aksel-action-from-bottom, aksel-action-fade-in;
+}
+
+.navds-action-menu__content:where([data-state="open"]):where([data-side="top"]) {
+  animation-name: aksel-action-from-top, aksel-action-fade-in;
+}
+
+.navds-action-menu__content:where([data-state="open"]):where([data-side="left"]) {
+  animation-name: aksel-action-from-left, aksel-action-fade-in;
+}
+
+.navds-action-menu__content:where([data-state="open"]):where([data-side="right"]) {
+  animation-name: aksel-action-from-right, aksel-action-fade-in;
+}
+
+@keyframes aksel-action-from-bottom {
+  from {
+    transform: translateY(-4px);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes aksel-action-from-top {
+  from {
+    transform: translateY(4px);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes aksel-action-from-left {
+  from {
+    transform: translateX(4px);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes aksel-action-from-right {
+  from {
+    transform: translateX(-4px);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes aksel-action-fade-in {
+  from {
+    opacity: 0.01;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.navds-action-menu__item {
+  display: flex;
+  align-items: center;
+  gap: var(--a-spacing-2);
+  min-height: var(--__ac-action-menu-item-height);
+  cursor: default;
+  border-radius: var(--a-border-radius-medium);
+  position: relative;
+  padding-left: var(--__ac-action-menu-item-pl);
+  padding-right: var(--__ac-action-menu-item-pr);
+  font-size: var(--a-font-size-medium);
+  scroll-margin-block: var(--__ac-action-menu-content-p);
+  line-height: 1.5;
+  color: var(--a-text-default);
+  text-decoration: none;
+}
+
+.navds-action-menu__item svg {
+  flex-shrink: 0;
+}
+
+.navds-action-menu__item--has-icon {
+  --__ac-action-menu-item-pl: var(--a-spacing-6);
+}
+
+.navds-action-menu__sub-trigger {
+  --__ac-action-menu-item-pr: var(--a-spacing-05);
+}
+
+.navds-action-menu__item:focus {
+  outline: none;
+  background-color: var(--a-surface-action-subtle-hover);
+  color: var(--a-text-default);
+}
+
+.navds-action-menu__item--danger {
+  color: var(--a-text-danger);
+}
+
+.navds-action-menu__item--danger:focus {
+  background-color: var(--a-surface-danger-subtle);
+}
+
+.navds-action-menu__marker {
+  display: flex;
+  align-items: center;
+  gap: var(--a-spacing-1);
+}
+
+.navds-action-menu__marker--right {
+  margin-left: auto;
+  padding-left: var(--a-spacing-4);
+}
+
+.navds-action-menu__marker--left {
+  position: absolute;
+  left: 0;
+  width: var(--__ac-action-menu-item-pl);
+  display: inline-flex;
+  justify-content: center;
+}
+
+.navds-action-menu__marker-icon svg {
+  font-size: 18px;
+  flex-shrink: 0;
+}
+
+.navds-action-menu__shortcut {
+  background-color: var(--a-surface-neutral-subtle);
+  color: var(--a-text-default);
+  border-radius: var(--a-border-radius-small);
+  padding: 0 var(--a-spacing-1);
+  min-width: 1.125rem;
+  height: 1.125rem;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--a-font-size-small);
+}
+
+.navds-action-menu__label {
+  display: flex;
+  align-items: center;
+  min-height: calc(var(--__ac-action-menu-item-height) - 6px);
+  padding-right: var(--__ac-action-menu-item-pr);
+  padding-left: var(--__ac-action-menu-item-pl);
+  color: var(--a-text-subtle);
+  border-radius: var(--a-border-radius-medium);
+  user-select: none;
+  cursor: default;
+  font-size: var(--a-font-size-small);
+}
+
+.navds-action-menu__divider {
+  height: 1px;
+  margin-block: var(--a-spacing-2);
+  background-color: var(--a-border-divider);
+}
+
+.navds-action-menu__indicator {
+  display: grid;
+  place-content: center;
+}
+
+.navds-action-menu__indicator-icon {
+  font-size: 14px;
+}
+
+.navds-action-menu__indicator-icon--unchecked,
+.navds-action-menu__indicator-icon--checked,
+.navds-action-menu__indicator-icon--indeterminate {
+  display: none;
+}
+
+.navds-action-menu__indicator[data-state="unchecked"] .navds-action-menu__indicator-icon--unchecked {
+  display: block;
+}
+
+.navds-action-menu__indicator:where([data-state="checked"]) .navds-action-menu__indicator-icon--checked {
+  display: block;
+}
+
+.navds-action-menu__indicator:where([data-state="indeterminate"]) .navds-action-menu__indicator-icon--indeterminate {
+  display: block;
+}
+
+.navds-action-menu__item:where([aria-disabled="true"]) {
+  color: var(--a-text-subtle);
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.navds-action-menu__sub-trigger:where([data-state="open"]) {
+  background-color: var(--a-surface-neutral-subtle);
+}

@navikt/core/css/baseline/_inline-reset.css

@@ -47,6 +47,8 @@ legend {
   white-space: normal;
 }
 
+/* Make elements with the HTML hidden attribute stay hidden by default. */
+
 [hidden] {
-  display: none;
+  display: none !important;
 }

@navikt/core/css/baseline/_utilities.css

@@ -1,6 +1,6 @@
 /* https://web.dev/prefers-reduced-motion/ */
 @media (prefers-reduced-motion: reduce) {
-  *:not(.navds-loader *):not(.navds-loader):not(.navds-progress-bar *):not(.navds-progress-bar),
+  *:not(.navds-loader *, .navds-loader, .navds-progress-bar *, .navds-progress-bar),
   ::before,
   ::after {
     animation-delay: -1ms !important;

@navikt/core/css/button.css

@@ -154,6 +154,7 @@
     inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--__ac-button-primary-focus-border, var(--a-surface-default))),
     var(--a-shadow-focus);
 }
+
 @media (forced-colors: active) {
   .navds-button--primary:focus-visible {
     box-shadow: none;

@navikt/core/css/config/_mappings.js

@@ -69,6 +69,11 @@ const StyleMappings = {
       dependencies: [typoCss],
     },
     { component: "Alert", main: "alert.css", dependencies: [typoCss] },
+    {
+      component: "ActionMenu",
+      main: "action-menu.css",
+      dependencies: [typoCss],
+    },
     {
       component: "BodyLong",
       main: typoCss,

@navikt/core/css/darkside/README.md

@@ -0,0 +1,25 @@
+# Template for writing new CSS
+
+## File setup
+
+1. Create new CSS-file for component: "alert.darkside.css", "button.darkside.css" etc. Remember to add `.darkside.` for easier lookup.
+2. Import file in "darkside/index.css": `@import "./alert.darkside.css`
+
+Files will not be included in `/dist` for now to avoid it potentially polluting production-code. This will need to be revisited when we want to expose the new systems outside the team.
+
+## Development
+
+1. Write new CSS for component. Use same prefix `.navds` as before.
+2. Run storybook and change from "Default (old)" to "Darkside (new)" in toolbar. You are now developing new CSS 🎉
+
+## Syntax
+
+- Test using outline + outline-offset for focus-markings.
+
+## Checklist
+
+- Add new CSS-files under `core/css/darkside`.
+- New files should include `.darkside.` for easier lookup.
+- Import new CSS-files in `core/css/darkside/index.css`
+- New CSS-selectors should have `.navds` as prefix, same as original code.
+- Test changes in Storybook by changing mode in toolbar from "default (old)" -> "darkside (new)"

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

@@ -0,0 +1,198 @@
+.navds-accordion {
+  --__ac-accordion-header-shadow-color: var(--ac-accordion-header-border, var(--a-border-divider));
+}
+
+/*************************
+ * Header *
+ *************************/
+.navds-accordion__header {
+  --__ac-accordion-header-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent),
+    inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
+
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: var(--a-spacing-2);
+  padding: var(--a-spacing-3);
+  margin: 0;
+  text-align: left;
+  background: var(--ac-accordion-header-bg, var(--a-surface-transparent));
+  cursor: pointer;
+  border: none;
+  position: relative;
+  box-shadow: var(--__ac-accordion-header-shadow);
+  z-index: 1;
+}
+
+.navds-accordion__header:hover {
+  background-color: var(--ac-accordion-header-bg-hover, var(--a-surface-hover));
+  text-decoration: underline;
+  color: var(--ac-accordion-header-text-hover, inherit);
+}
+
+.navds-accordion--small .navds-accordion__header {
+  padding: var(--a-spacing-2) var(--a-spacing-3);
+}
+
+.navds-accordion--medium .navds-accordion__header {
+  padding: var(--a-spacing-3);
+}
+
+.navds-accordion--large .navds-accordion__header {
+  padding: var(--a-spacing-4) var(--a-spacing-3);
+}
+
+.navds-accordion__item:last-child > :where(.navds-accordion__header) {
+  box-shadow:
+    var(--__ac-accordion-header-shadow),
+    inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
+}
+
+.navds-accordion__item:last-child:where(.navds-accordion__item--open) :where(.navds-accordion__header) {
+  box-shadow:
+    inset 2px 0 0 0 var(--a-transparent),
+    inset -2px 0 0 0 var(--a-transparent),
+    inset 0 2px 0 0 var(--a-transparent),
+    inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
+}
+
+.navds-accordion__item:last-child:where(.navds-accordion__item--open) {
+  box-shadow:
+    inset 2px 0 0 0 var(--a-transparent),
+    inset -2px 0 0 0 var(--a-transparent),
+    inset 0 2px 0 0 var(--a-transparent),
+    inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
+}
+
+.navds-accordion__item--open > :where(.navds-accordion__header) {
+  box-shadow: var(--__ac-accordion-header-shadow);
+}
+
+.navds-accordion__header:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 3px;
+  box-shadow: var(--a-shadow-focus);
+  border-radius: var(--a-border-radius-large);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-accordion__header:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+    border-radius: var(--a-border-radius-large);
+  }
+}
+
+.navds-accordion__header-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/*************************
+ * Icon *
+ *************************/
+.navds-accordion__icon-wrapper {
+  display: grid;
+  place-content: center;
+  border-radius: var(--a-border-radius-medium);
+  height: var(--a-spacing-6);
+  width: var(--a-spacing-6);
+  align-self: center;
+}
+
+.navds-accordion__header:hover > .navds-accordion__icon-wrapper {
+  background-color: var(--ac-accordion-header-icon-bg-hover, var(--a-surface-neutral-subtle-hover));
+}
+
+.navds-accordion__header-chevron {
+  border-radius: var(--a-border-radius-medium);
+  font-size: 1.5rem;
+  height: 1.75rem;
+  flex-shrink: 0;
+  transition: transform 150ms ease-in-out;
+  align-self: center;
+}
+
+:where(.navds-accordion__header):hover > :where(.navds-accordion__icon-wrapper) > :where(.navds-accordion__header-chevron) {
+  transform: translateY(1px);
+}
+
+.navds-accordion__item--open
+  > :where(.navds-accordion__header)
+  > :where(.navds-accordion__icon-wrapper)
+  > :where(.navds-accordion__header-chevron) {
+  transform: translateY(0) rotate(-180deg);
+}
+
+.navds-accordion__item--open
+  > :where(.navds-accordion__header):hover
+  > :where(.navds-accordion__icon-wrapper)
+  > :where(.navds-accordion__header-chevron) {
+  transform: translateY(-1px) rotate(-180deg);
+}
+
+/*************************
+ * Variant/Default *
+ *************************/
+.navds-accordion__item--open {
+  background-color: var(--ac-accordion-item-bg-open, var(--a-transparent));
+}
+
+/*************************
+ * Variant/Neutral *
+ *************************/
+.navds-accordion__item--open.navds-accordion__item--neutral {
+  background-color: var(--ac-accordion-neutral-item-bg-open, var(--a-surface-neutral-subtle));
+}
+
+/*************************
+ * Content *
+ *************************/
+
+.navds-accordion__content {
+  padding: var(--a-spacing-1) var(--a-spacing-3) var(--a-spacing-5);
+  animation: fadeAccordionContent 250ms ease;
+}
+
+.navds-accordion--indent > :where(.navds-accordion__item) > :where(.navds-accordion__content) {
+  padding: var(--a-spacing-1) var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-11);
+}
+
+.navds-accordion__content--closed {
+  display: none;
+}
+
+.navds-accordion__item--no-animation :where(.navds-accordion__content) {
+  animation: none;
+}
+
+@keyframes fadeAccordionContent {
+  0% {
+    opacity: 0.25;
+    transform: translateY(-8px);
+  }
+
+  40% {
+    opacity: 0.7;
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (forced-colors: active) {
+  .navds-accordion__header {
+    border: 1px solid buttonborder;
+    background-color: canvas;
+    color: canvastext;
+  }
+
+  .navds-accordion__header:hover {
+    background-color: canvas;
+    border: 1px solid highlight;
+    color: highlight;
+  }
+}

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

@@ -0,0 +1,227 @@
+.navds-action-menu__content {
+  overflow: hidden;
+  box-shadow: var(--a-shadow-medium);
+  border-radius: var(--a-border-radius-large);
+}
+
+/* stylelint-disable csstools/value-no-unknown-custom-properties */
+.navds-action-menu__content > .navds-action-menu__content-inner {
+  --__ac-action-menu-content-p: var(--a-spacing-2);
+  --__ac-action-menu-item-pr: var(--a-spacing-3);
+  --__ac-action-menu-item-pl: var(--a-spacing-2);
+  --__ac-action-menu-item-height: 2rem;
+
+  border-radius: var(--a-border-radius-large);
+  background-color: var(--a-surface-default);
+  min-width: 128px;
+  max-width: min(95vw, 640px);
+  transform-origin: var(--__ac-action-menu-content-transform-origin);
+  animation-duration: 160ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  padding: var(--__ac-action-menu-content-p);
+  overflow: auto;
+  max-height: var(--__ac-action-menu-content-available-height);
+}
+
+.navds-action-menu__content:where([data-state="open"]):where([data-side="bottom"]) {
+  animation-name: aksel-action-from-bottom, aksel-action-fade-in;
+}
+
+.navds-action-menu__content:where([data-state="open"]):where([data-side="top"]) {
+  animation-name: aksel-action-from-top, aksel-action-fade-in;
+}
+
+.navds-action-menu__content:where([data-state="open"]):where([data-side="left"]) {
+  animation-name: aksel-action-from-left, aksel-action-fade-in;
+}
+
+.navds-action-menu__content:where([data-state="open"]):where([data-side="right"]) {
+  animation-name: aksel-action-from-right, aksel-action-fade-in;
+}
+
+@keyframes aksel-action-from-bottom {
+  from {
+    transform: translateY(-4px);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes aksel-action-from-top {
+  from {
+    transform: translateY(4px);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes aksel-action-from-left {
+  from {
+    transform: translateX(4px);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes aksel-action-from-right {
+  from {
+    transform: translateX(-4px);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes aksel-action-fade-in {
+  from {
+    opacity: 0.01;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.navds-action-menu__item {
+  display: flex;
+  align-items: center;
+  gap: var(--a-spacing-2);
+  min-height: var(--__ac-action-menu-item-height);
+  cursor: default;
+  border-radius: var(--a-border-radius-medium);
+  position: relative;
+  padding-left: var(--__ac-action-menu-item-pl);
+  padding-right: var(--__ac-action-menu-item-pr);
+  font-size: var(--a-font-size-medium);
+  scroll-margin-block: var(--__ac-action-menu-content-p);
+  line-height: 1.5;
+  color: var(--a-text-default);
+  text-decoration: none;
+}
+
+.navds-action-menu__item svg {
+  flex-shrink: 0;
+}
+
+.navds-action-menu__item--has-icon {
+  --__ac-action-menu-item-pl: var(--a-spacing-6);
+}
+
+.navds-action-menu__sub-trigger {
+  --__ac-action-menu-item-pr: var(--a-spacing-05);
+}
+
+.navds-action-menu__item:focus {
+  outline: none;
+  background-color: var(--a-surface-action-subtle-hover);
+  color: var(--a-text-default);
+}
+
+.navds-action-menu__item--danger {
+  color: var(--a-text-danger);
+}
+
+.navds-action-menu__item--danger:focus {
+  background-color: var(--a-surface-danger-subtle);
+}
+
+.navds-action-menu__marker {
+  display: flex;
+  align-items: center;
+  gap: var(--a-spacing-1);
+}
+
+.navds-action-menu__marker--right {
+  margin-left: auto;
+  padding-left: var(--a-spacing-4);
+}
+
+.navds-action-menu__marker--left {
+  position: absolute;
+  left: 0;
+  width: var(--__ac-action-menu-item-pl);
+  display: inline-flex;
+  justify-content: center;
+}
+
+.navds-action-menu__marker-icon svg {
+  font-size: 18px;
+  flex-shrink: 0;
+}
+
+.navds-action-menu__shortcut {
+  background-color: var(--a-surface-neutral-subtle);
+  color: var(--a-text-default);
+  border-radius: var(--a-border-radius-small);
+  padding: 0 var(--a-spacing-1);
+  min-width: 1.125rem;
+  height: 1.125rem;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--a-font-size-small);
+}
+
+.navds-action-menu__label {
+  display: flex;
+  align-items: center;
+  min-height: calc(var(--__ac-action-menu-item-height) - 6px);
+  padding-right: var(--__ac-action-menu-item-pr);
+  padding-left: var(--__ac-action-menu-item-pl);
+  color: var(--a-text-subtle);
+  border-radius: var(--a-border-radius-medium);
+  user-select: none;
+  cursor: default;
+  font-size: var(--a-font-size-small);
+}
+
+.navds-action-menu__divider {
+  height: 1px;
+  margin-block: var(--a-spacing-2);
+  background-color: var(--a-border-divider);
+}
+
+.navds-action-menu__indicator {
+  display: grid;
+  place-content: center;
+}
+
+.navds-action-menu__indicator-icon {
+  font-size: 14px;
+}
+
+.navds-action-menu__indicator-icon--unchecked,
+.navds-action-menu__indicator-icon--checked,
+.navds-action-menu__indicator-icon--indeterminate {
+  display: none;
+}
+
+.navds-action-menu__indicator[data-state="unchecked"] .navds-action-menu__indicator-icon--unchecked {
+  display: block;
+}
+
+.navds-action-menu__indicator:where([data-state="checked"]) .navds-action-menu__indicator-icon--checked {
+  display: block;
+}
+
+.navds-action-menu__indicator:where([data-state="indeterminate"]) .navds-action-menu__indicator-icon--indeterminate {
+  display: block;
+}
+
+.navds-action-menu__item:where([aria-disabled="true"]) {
+  color: var(--a-text-subtle);
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.navds-action-menu__sub-trigger:where([data-state="open"]) {
+  background-color: var(--a-surface-neutral-subtle);
+}

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

@@ -0,0 +1,113 @@
+.navds-alert {
+  border-radius: var(--a-border-radius-medium);
+  border: 1px solid;
+  padding: var(--a-spacing-4);
+  display: flex;
+  gap: var(--a-spacing-3);
+  align-items: center;
+}
+
+.navds-alert--small.navds-alert--close-button {
+  align-items: flex-start;
+}
+
+.navds-alert__wrapper--maxwidth {
+  max-width: 43.5rem;
+}
+
+.navds-alert--close-button > .navds-alert__wrapper {
+  margin-block-start: var(--a-spacing-05);
+}
+
+.navds-alert--small.navds-alert--close-button > .navds-alert__wrapper {
+  margin-block-start: var(--a-spacing-1);
+}
+
+.navds-alert--small {
+  padding: var(--a-spacing-2) var(--a-spacing-4);
+  gap: var(--a-spacing-2);
+}
+
+.navds-alert--full-width {
+  border-radius: 0;
+}
+
+.navds-alert > .navds-alert__icon {
+  flex-shrink: 0;
+  font-size: 1.5rem;
+  align-self: flex-start;
+  height: var(--a-font-line-height-xlarge);
+  background: radial-gradient(circle, var(--a-surface-default) 47%, 0, transparent);
+}
+
+.navds-alert--small > .navds-alert__icon {
+  margin-block-start: 0;
+  height: var(--a-font-line-height-large);
+}
+
+.navds-alert--close-button > .navds-alert__icon {
+  margin-block-start: var(--a-spacing-05);
+}
+
+.navds-alert--small.navds-alert--close-button > .navds-alert__icon {
+  margin-block-start: var(--a-spacing-1);
+}
+
+.navds-alert--error {
+  border-color: var(--ac-alert-error-border, var(--a-border-danger));
+  background-color: var(--ac-alert-error-bg, var(--a-surface-danger-subtle));
+}
+
+.navds-alert--error > .navds-alert__icon {
+  color: var(--ac-alert-icon-error-color, var(--a-icon-danger));
+}
+
+.navds-alert--warning {
+  border-color: var(--ac-alert-warning-border, var(--a-border-warning));
+  background-color: var(--ac-alert-warning-bg, var(--a-surface-warning-subtle));
+}
+
+.navds-alert--warning > .navds-alert__icon {
+  background: radial-gradient(circle at 50% 57%, var(--a-surface-default) 30%, 0, transparent);
+  color: var(--ac-alert-icon-warning-color, var(--a-icon-warning));
+}
+
+.navds-alert--info {
+  border-color: var(--ac-alert-info-border, var(--a-border-info));
+  background-color: var(--ac-alert-info-bg, var(--a-surface-info-subtle));
+}
+
+.navds-alert--info > .navds-alert__icon {
+  color: var(--ac-alert-icon-info-color, var(--a-icon-info));
+}
+
+.navds-alert--success {
+  border-color: var(--ac-alert-success-border, var(--a-border-success));
+  background-color: var(--ac-alert-success-bg, var(--a-surface-success-subtle));
+}
+
+.navds-alert--success > .navds-alert__icon {
+  color: var(--ac-alert-icon-success-color, var(--a-icon-success));
+}
+
+.navds-alert--inline {
+  background-color: transparent;
+  border: none;
+  padding: 0;
+}
+
+.navds-alert__button-wrapper {
+  align-self: flex-start;
+  flex: 1;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-end;
+}
+
+@media (forced-colors: active) {
+  .navds-alert {
+    border: 1px solid canvastext;
+    background-color: canvas;
+    color: canvastext;
+  }
+}

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

@@ -0,0 +1,129 @@
+/* cyrillic-ext */
+@font-face {
+  font-family: "Source Sans 3";
+  font-style: italic;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic-cyrillic_ext.woff2) format("woff2");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+  font-family: "Source Sans 3";
+  font-style: italic;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic-cyrillic.woff2) format("woff2");
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: "Source Sans 3";
+  font-style: italic;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic-latin_ext.woff2) format("woff2");
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
+    U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: "Source Sans 3";
+  font-style: italic;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+  font-family: "Source Sans 3";
+  font-style: normal;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal-cyrillic_ext.woff2) format("woff2");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+  font-family: "Source Sans 3";
+  font-style: normal;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal-cyrillic.woff2) format("woff2");
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: "Source Sans 3";
+  font-style: normal;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal-latin_ext.woff2) format("woff2");
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
+    U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: "Source Sans 3";
+  font-style: normal;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* Legacy support */
+
+/* latin-ext */
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: italic;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic-latin_ext.woff2) format("woff2");
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
+    U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: italic;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal-latin_ext.woff2) format("woff2");
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
+    U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

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

@@ -0,0 +1,75 @@
+/* ==========================================================================
+   Print styles copied from https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/style.css
+   Inlined to avoid the additional HTTP request:
+   https://www.phpied.com/delay-loading-your-print-css/
+   ========================================================================== */
+
+@media print {
+  *,
+  *::before,
+  *::after {
+    background: #fff !important;
+    color: #000 !important;
+
+    /* Black prints faster */
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+
+  a,
+  a:visited {
+    text-decoration: underline;
+  }
+
+  a[href]::after {
+    content: " (" attr(href) ")";
+  }
+
+  abbr[title]::after {
+    content: " (" attr(title) ")";
+  }
+
+  /*
+     * Don't show links that are fragment identifiers,
+     * or use the `javascript:` pseudo protocol
+     */
+  a[href^="#"]::after,
+  a[href^="javascript:"]::after {
+    content: "";
+  }
+
+  pre {
+    white-space: pre-wrap !important;
+  }
+
+  pre,
+  blockquote {
+    border: 1px solid #999;
+    page-break-inside: avoid;
+  }
+
+  /*
+     * Printing Tables:
+     * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
+     */
+  thead {
+    display: table-header-group;
+  }
+
+  tr,
+  img {
+    page-break-inside: avoid;
+  }
+
+  p,
+  h2,
+  h3 {
+    orphans: 3;
+    widows: 3;
+  }
+
+  h2,
+  h3 {
+    page-break-after: avoid;
+  }
+}

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

@@ -0,0 +1,148 @@
+/* Modern-normalize: https://github.com/sindresorhus/modern-normalize/blob/main/modern-normalize.css */
+
+/* Better box-model */
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  line-height: 1.15; /* Correct the line height in all browsers. */
+  -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. */
+  tab-size: 4; /* Use a more readable tab size (opinionated). */
+}
+
+body {
+  margin: 0; /* Remove the margin in all browsers. */
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+2. Correct the odd 'em' font sizing in all browsers.
+*/
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+Add the correct font size in all browsers.
+*/
+small {
+  font-size: 80%;
+}
+
+/**
+Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
+*/
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/**
+Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
+*/
+table {
+  border-color: currentColor;
+}
+
+/**
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+*/
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+Correct the inability to style clickable types in iOS and Safari.
+*/
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
+*/
+legend {
+  padding: 0;
+}
+
+/**
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+progress {
+  vertical-align: baseline;
+}
+
+/**
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to 'inherit' in Safari.
+*/
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+summary {
+  display: list-item;
+}

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

@@ -0,0 +1,12 @@
+/* stylelint-disable csstools/value-no-unknown-custom-properties */
+
+/* To support nested theming, we want to declare color on each scoped elements */
+:root,
+:host,
+.light {
+  color: var(--ax-text-default);
+}
+
+.dark {
+  color: var(--ax-text-default);
+}

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

@@ -0,0 +1,65 @@
+[hidden] {
+  display: none !important;
+}
+
+/* https://web.dev/prefers-reduced-motion/ */
+@media (prefers-reduced-motion: reduce) {
+  *:not(.navds-loader *, .navds-loader, .navds-progress-bar *, .navds-progress-bar),
+  ::before,
+  ::after {
+    animation-delay: -1ms !important;
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    background-attachment: initial !important;
+    scroll-behavior: auto !important;
+    transition-duration: 0s !important;
+    transition-delay: 0s !important;
+  }
+}
+
+/*
+ * From https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/style.css
+ *
+ * Hide only visually, but have it available for screen readers:
+ * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+ *
+ * 1. For long content, line feeds are not interpreted as spaces and small width
+ *    causes content to wrap 1 word per line:
+ *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
+ */
+
+.sr-only,
+.navds-sr-only {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+/*
+* From https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/style.css
+*
+* Extends the .sr-only class to allow the element
+* to be focusable when navigated to via the keyboard:
+* https://www.drupal.org/node/897638
+*/
+
+.sr-only.focusable:active,
+.sr-only.focusable:focus,
+.navds-sr-only.focusable:active,
+.navds-sr-only.focusable:focus {
+  clip: auto;
+  clip-path: none;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  position: static;
+  white-space: inherit;
+  width: auto;
+}

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

@@ -0,0 +1,320 @@
+.navds-button {
+  padding: var(--ax-spacing-3) var(--ax-spacing-5);
+  border-radius: var(--ax-border-radius-medium);
+  display: inline-flex;
+  cursor: pointer;
+  text-decoration: none;
+  border: none;
+  background: none;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ax-spacing-2);
+}
+
+.navds-button--small {
+  padding: var(--ax-spacing-1) var(--ax-spacing-3);
+  min-height: 2rem;
+  min-width: 2rem;
+}
+
+.navds-button--xsmall {
+  padding: var(--ax-spacing-05) var(--ax-spacing-2);
+  gap: var(--ax-spacing-1);
+}
+
+.navds-button--icon-only {
+  padding: var(--ax-spacing-3);
+}
+
+.navds-button--small.navds-button--icon-only {
+  padding: var(--ax-spacing-1);
+}
+
+.navds-button--xsmall.navds-button--icon-only {
+  padding: var(--ax-spacing-05);
+}
+
+.navds-button:focus-visible {
+  outline: 4px solid var(--ax-border-focus);
+  outline-offset: 2px;
+}
+
+@supports not selector(:focus-visible) {
+  .navds-button:focus {
+    outline: 4px solid var(--ax-border-focus);
+  }
+}
+
+.navds-button__icon {
+  font-size: 1.5rem;
+  display: flex;
+
+  --__axc-button-icon-margin: -4px;
+}
+
+.navds-button__icon:first-child {
+  margin-left: var(--__axc-button-icon-margin);
+}
+
+.navds-button__icon:last-child {
+  margin-right: var(--__axc-button-icon-margin);
+}
+
+:where(.navds-button--xsmall, .navds-button--small) .navds-button__icon {
+  --__axc-button-icon-margin: -2px;
+
+  font-size: 1.25rem;
+}
+
+.navds-button__icon:only-child {
+  margin: 0;
+}
+
+/*************************
+ * .navds-button--primary *
+ *************************/
+
+.navds-button--primary {
+  background-color: var(--ax-bg-accent-strong);
+  color: var(--ax-text-accent-contrast);
+}
+
+@media (forced-colors: active) {
+  .navds-button.navds-button--primary {
+    background-color: highlight;
+    color: highlighttext;
+  }
+
+  .navds-button.navds-button--primary span {
+    forced-color-adjust: none;
+  }
+}
+
+.navds-button--primary:hover {
+  background-color: var(--ax-bg-accent-strong-hover);
+}
+
+.navds-button--primary:active {
+  background-color: var(--ax-bg-accent-strong-pressed);
+}
+
+.navds-button--primary:hover:where(:disabled, .navds-button--disabled),
+.navds-button--primary:active:where(:disabled, .navds-button--disabled) {
+  background-color: var(--ax-bg-accent-strong);
+}
+
+/*************************
+ * .navds-button--primary-neutral *
+ *************************/
+
+.navds-button--primary-neutral {
+  background-color: var(--ax-bg-neutral-strong);
+  color: var(--ax-text-neutral-contrast);
+}
+
+.navds-button--primary-neutral:hover {
+  background-color: var(--ax-bg-neutral-strong-hover);
+}
+
+.navds-button--primary-neutral:active {
+  background-color: var(--ax-bg-neutral-strong-pressed);
+}
+
+.navds-button--primary-neutral:hover:where(:disabled, .navds-button--disabled),
+.navds-button--primary-neutral:active:where(:disabled, .navds-button--disabled) {
+  background-color: var(--ax-bg-neutral-strong);
+}
+
+/**************************
+* .navds-button--secondary *
+ **************************/
+
+.navds-button--secondary {
+  background-color: transparent;
+  color: var(--ax-text-accent);
+  box-shadow: inset 0 0 0 2px var(--ax-border-accent);
+}
+
+.navds-button--secondary:hover {
+  background-color: var(--ax-bg-accent-moderate-hoverA);
+  color: var(--ax-bg-accent-strong-hover);
+  box-shadow: inset 0 0 0 2px var(--ax-bg-accent-strong-hover);
+}
+
+.navds-button--secondary:active {
+  background-color: var(--ax-bg-accent-strong-pressed);
+  color: var(--ax-text-accent-contrast);
+  box-shadow: none;
+}
+
+.navds-button--secondary:where(:disabled, .navds-button--disabled),
+.navds-button--secondary:hover:where(:disabled, .navds-button--disabled) {
+  background-color: transparent;
+  color: var(--ax-text-accent);
+}
+
+/**************************
+* .navds-button--secondary-neutral *
+ **************************/
+
+.navds-button--secondary-neutral {
+  background-color: transparent;
+  color: var(--ax-text-default);
+  box-shadow: inset 0 0 0 2px var(--ax-border-neutral);
+}
+
+.navds-button--secondary-neutral:hover {
+  background-color: var(--ax-bg-neutral-moderate-hoverA);
+}
+
+.navds-button--secondary-neutral:active {
+  color: var(--ax-text-neutral-contrast);
+  background-color: var(--ax-bg-neutral-strong-pressed);
+  box-shadow: none;
+}
+
+.navds-button--secondary-neutral:where(:disabled, .navds-button--disabled),
+.navds-button--secondary-neutral:hover:where(:disabled, .navds-button--disabled) {
+  color: var(--ax-text-default);
+  background-color: transparent;
+  box-shadow: inset 0 0 0 2px var(--ax-border-strong);
+}
+
+/****************************
+ * .navds-button--tertiary *
+ ****************************/
+
+.navds-button--tertiary {
+  background-color: transparent;
+  color: var(--ax-text-accent);
+}
+
+.navds-button--tertiary:hover {
+  background-color: var(--ax-bg-accent-hoverA);
+  color: var(--ax-text-accent);
+}
+
+.navds-button--tertiary:active {
+  background-color: var(--ax-bg-accent-strong-pressed);
+  color: var(--ax-text-accent-contrast);
+}
+
+.navds-button--tertiary:active:hover {
+  background-color: var(--ax-bg-accent-strong-pressed);
+}
+
+.navds-button--tertiary:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary:hover:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary:active:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary:active:hover:where(:disabled, .navds-button--disabled) {
+  color: var(--ax-text-accent);
+  background: none;
+  box-shadow: none;
+}
+
+/****************************
+ * .navds-button--tertiary-neutral *
+ ****************************/
+
+.navds-button--tertiary-neutral {
+  color: var(--ax-text-default);
+}
+
+.navds-button--tertiary-neutral:hover {
+  background-color: var(--ax-bg-neutral-hoverA);
+}
+
+.navds-button--tertiary-neutral:active {
+  background-color: var(--ax-bg-neutral-strong-pressed);
+  color: var(--ax-text-neutral-contrast);
+}
+
+.navds-button--tertiary-neutral:active:hover {
+  background-color: var(--ax-bg-neutral-strong-pressed);
+}
+
+.navds-button--tertiary-neutral:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary-neutral:hover:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary-neutral:active:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary-neutral:active:hover:where(:disabled, .navds-button--disabled) {
+  color: var(--ax-text-default);
+  background: none;
+  box-shadow: none;
+}
+
+/*************************
+ * .navds-button--danger *
+ *************************/
+
+.navds-button--danger {
+  background-color: var(--ax-bg-danger-strong);
+  color: var(--ax-text-danger-contrast);
+}
+
+.navds-button--danger:hover {
+  background-color: var(--ax-bg-danger-strong-hover);
+}
+
+.navds-button--danger:active {
+  background-color: var(--ax-bg-danger-strong-pressed);
+}
+
+.navds-button--danger:active:where(:disabled, .navds-button--disabled),
+.navds-button--danger:hover:where(:disabled, .navds-button--disabled) {
+  background-color: var(--ax-bg-danger-strong);
+}
+
+/**************************
+ * .navds-button:disabled *
+ **************************/
+
+.navds-button:where(:disabled, .navds-button--disabled) {
+  cursor: not-allowed;
+}
+
+.navds-button:not(.navds-button--loading):where(:disabled, .navds-button--disabled) {
+  opacity: 0.3;
+}
+
+/* Loader overrides */
+.navds-button .navds-loader .navds-loader__foreground {
+  stroke: currentColor;
+}
+
+.navds-button--primary .navds-loader .navds-loader__background,
+.navds-button--danger .navds-loader .navds-loader__background {
+  stroke: rgb(255 255 255 / 0.3);
+}
+
+@media (forced-colors: active) {
+  .navds-button:not(.navds-button--loading):where(:disabled, .navds-button--disabled) {
+    opacity: 1;
+    color: GrayText;
+  }
+
+  .navds-button {
+    border: 1px solid transparent;
+    color: ButtonText;
+    background-color: ButtonFace;
+  }
+
+  .navds-button:hover {
+    background-color: highlighttext;
+    border-color: highlight;
+    color: highlight;
+    box-shadow: none;
+  }
+
+  .navds-button:hover span {
+    forced-color-adjust: none;
+  }
+
+  .navds-button .navds-loader .navds-loader__foreground {
+    stroke: canvas;
+  }
+
+  .navds-button--primary .navds-loader .navds-loader__background,
+  .navds-button--danger .navds-loader .navds-loader__background {
+    stroke: canvastext;
+  }
+}

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

@@ -0,0 +1,120 @@
+.navds-chat {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--a-spacing-3);
+  max-width: 40.75rem;
+}
+
+.navds-chat--right {
+  flex-direction: row-reverse;
+}
+
+.navds-chat__bubble-wrapper {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--a-spacing-3);
+}
+
+.navds-chat--right .navds-chat__bubble-wrapper {
+  align-items: flex-end;
+}
+
+.navds-chat__avatar {
+  align-items: center;
+  box-shadow: var(--a-shadow-xsmall);
+  background-color: var(--ac-chat-avatar-bg, var(--a-surface-neutral-subtle));
+  border-radius: var(--a-border-radius-full);
+  color: var(--ac-chat-avatar-color, var(--a-text-default));
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  overflow: hidden;
+  height: 2.5rem;
+  width: 2.5rem;
+  line-height: 2.5rem; /* Makes text properly vertically centered in Chrome */
+  font-size: 1.06rem;
+  letter-spacing: 0.024rem;
+}
+
+.navds-chat__avatar svg {
+  align-self: center;
+  width: 100%;
+  max-width: 1.5rem;
+  max-height: 1.5rem;
+}
+
+.navds-chat__bubble {
+  padding: var(--a-spacing-4);
+  box-shadow: var(--a-shadow-xsmall);
+  width: fit-content;
+  background-color: var(--ac-chat-bubble-bg, var(--a-surface-neutral-subtle));
+  border-radius: var(--a-border-radius-xlarge);
+  border-bottom-left-radius: 2px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--a-spacing-2);
+}
+
+.navds-chat--right .navds-chat__bubble {
+  border-radius: var(--a-border-radius-xlarge);
+  border-bottom-right-radius: 2px;
+}
+
+.navds-chat--small .navds-chat__bubble {
+  padding: var(--a-spacing-3);
+}
+
+.navds-chat--info .navds-chat__bubble,
+.navds-chat--info .navds-chat__avatar {
+  background-color: var(--a-surface-info-subtle);
+}
+
+.navds-chat--subtle .navds-chat__bubble,
+.navds-chat--subtle .navds-chat__avatar {
+  background-color: var(--a-surface-default);
+}
+
+.navds-chat__top-text {
+  color: var(--ac-chat-top-text, var(--a-text-default));
+  display: flex;
+  gap: var(--a-spacing-2);
+  align-items: baseline;
+  font-weight: normal;
+  margin: 0;
+}
+
+.navds-chat--right .navds-chat__top-text {
+  align-self: flex-end;
+}
+
+.navds-chat--top-text-left .navds-chat__top-text {
+  align-self: flex-start;
+}
+
+.navds-chat--top-text-right .navds-chat__top-text {
+  align-self: flex-end;
+}
+
+.navds-chat--left .navds-chat__top-text--right {
+  align-self: flex-end;
+}
+
+.navds-chat--right .navds-chat__top-text--left {
+  align-self: flex-start;
+}
+
+@media (forced-colors: active) {
+  .navds-chat__bubble,
+  .navds-chat__avatar {
+    border: 1px solid canvastext;
+    background-color: canvas;
+    color: canvastext;
+  }
+
+  .navds-chat__avatar svg {
+    forced-color-adjust: none;
+  }
+}

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

@@ -0,0 +1,234 @@
+.navds-chips {
+  display: flex;
+  gap: var(--a-spacing-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  flex-wrap: wrap;
+}
+
+.navds-chips :where(li) {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: block;
+}
+
+.navds-chips__chip {
+  all: unset;
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  gap: var(--a-spacing-05);
+  margin: 0;
+  padding: 0 var(--a-spacing-3);
+  text-decoration: none;
+  border-radius: var(--a-border-radius-full);
+  min-height: 2rem;
+}
+
+.navds-chips--small .navds-chips__chip {
+  min-height: 1.5rem;
+  padding: 0 var(--a-spacing-2);
+}
+
+.navds-chips__toggle {
+  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-border, var(--a-border-subtle));
+  background-color: var(--ac-chip-toggle-bg, var(--a-surface-action-subtle));
+  color: var(--ac-chip-toggle-text, var(--a-text-default));
+}
+
+.navds-chips__toggle:hover {
+  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-hover-border, var(--a-border-subtle-hover));
+  background-color: var(--ac-chip-toggle-hover-bg, var(--a-surface-action-subtle-hover));
+}
+
+.navds-chips__toggle[aria-pressed="true"] {
+  box-shadow: none;
+  background-color: var(--ac-chip-toggle-pressed-bg, var(--a-surface-action-selected));
+  color: var(--ac-chip-toggle-pressed-text, var(--a-text-on-action));
+}
+
+.navds-chips__toggle[aria-pressed="true"]:hover {
+  background-color: var(--ac-chip-toggle-pressed-hover-bg, var(--a-surface-action-selected-hover));
+}
+
+/* Toggle variant neutral */
+.navds-chips__toggle--neutral {
+  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-neutral-border, var(--a-border-subtle));
+  background-color: var(--ac-chip-toggle-neutral-bg, var(--a-surface-neutral-subtle));
+  color: var(--ac-chip-toggle-neutral-text, var(--a-text-default));
+}
+
+.navds-chips__toggle--neutral:hover {
+  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-neutral-hover-border, var(--a-border-subtle-hover));
+  background-color: var(--ac-chip-toggle-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
+}
+
+.navds-chips__toggle--neutral[aria-pressed="true"] {
+  box-shadow: none;
+  background-color: var(--ac-chip-toggle-neutral-pressed-bg, var(--a-surface-neutral-selected));
+  color: var(--ac-chip-toggle-neutral-pressed-text, var(--a-text-on-neutral));
+}
+
+.navds-chips__toggle--neutral[aria-pressed="true"]:hover {
+  background-color: var(--ac-chip-toggle-neutral-pressed-hover-bg, var(--a-surface-neutral-selected));
+}
+
+.navds-chips__toggle:focus-visible {
+  box-shadow: 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
+}
+
+.navds-chips__toggle[aria-pressed="true"]:focus-visible,
+.navds-chips__toggle:active:focus-visible {
+  box-shadow:
+    inset 0 0 0 1px var(--a-surface-default),
+    0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
+}
+
+@supports not selector(:focus-visible) {
+  .navds-chips__toggle:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
+  }
+
+  .navds-chips__toggle[aria-pressed="true"]:focus,
+  .navds-chips__toggle:active:focus {
+    box-shadow:
+      inset 0 0 0 1px var(--a-surface-default),
+      0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
+  }
+}
+
+.navds-chips--medium .navds-chips__toggle--with-checkmark {
+  padding-left: var(--a-spacing-1-alt);
+}
+
+.navds-chips--small .navds-chips__toggle--with-checkmark {
+  padding-left: var(--a-spacing-1);
+}
+
+.navds-chips--small .navds-chips__toggle-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+.navds-chips__removable {
+  gap: 0;
+}
+
+.navds-chips__removable--action {
+  background-color: var(--ac-chip-removable-action-bg, var(--a-surface-action-selected));
+  color: var(--ac-chip-removable-action-text, var(--a-text-on-action));
+}
+
+.navds-chips__removable--neutral {
+  background-color: var(--ac-chip-removable-neutral-bg, var(--a-surface-neutral-subtle));
+  color: var(--ac-chip-removable-neutral-text, var(--a-text-default));
+  box-shadow: inset 0 0 0 1px var(--ac-chip-removable-neutral-border, var(--a-border-default));
+}
+
+.navds-chips__removable-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: 1.25rem;
+  display: grid;
+  place-items: center;
+  border-radius: var(--a-border-radius-full);
+}
+
+.navds-chips--small .navds-chips__removable-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.navds-chips--small .navds-chips__removable-icon > svg {
+  width: 1rem;
+}
+
+.navds-chips__removable--action:focus-visible {
+  box-shadow:
+    inset 0 0 0 1px var(--a-surface-default),
+    0 0 0 2px var(--a-border-focus);
+}
+
+.navds-chips__removable--neutral:focus-visible {
+  box-shadow: 0 0 0 2px var(--a-border-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-chips__removable--action:focus {
+    outline: none;
+    box-shadow:
+      inset 0 0 0 1px var(--a-surface-default),
+      0 0 0 2px var(--a-border-focus);
+  }
+
+  .navds-chips__removable--neutral:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--a-border-focus);
+  }
+}
+
+.navds-chips__removable--action:hover {
+  background-color: var(--ac-chip-removable-action-hover-bg, var(--a-surface-action-selected-hover));
+}
+
+.navds-chips__removable--neutral:hover {
+  background-color: var(--ac-chip-removable-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
+  box-shadow: inset 0 0 0 1px var(--ac-chip-removable-neutral-hover-border, var(--a-border-strong));
+}
+
+.navds-chips--icon-left {
+  padding-left: var(--a-spacing-1-alt);
+}
+
+.navds-chips--icon-right {
+  padding-right: var(--a-spacing-1-alt);
+}
+
+.navds-chips--small .navds-chips--icon-right {
+  padding-right: var(--a-spacing-05);
+}
+
+@media (forced-colors: active) {
+  .navds-chips__chip {
+    border: 1px solid transparent;
+  }
+
+  .navds-chips__chip:hover {
+    background-color: highlighttext;
+    color: highlight;
+  }
+
+  .navds-chips__chip:focus-visible {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+
+  .navds-chips__chip:where([aria-pressed="true"], :active, :hover) > span {
+    forced-color-adjust: none;
+  }
+
+  .navds-chips__toggle:active {
+    background-color: highlight;
+    color: highlighttext;
+  }
+
+  .navds-chips__toggle[aria-pressed="true"] {
+    background-color: selecteditem;
+    color: selecteditemtext;
+    border: 1px solid selecteditem;
+  }
+
+  .navds-chips__toggle[aria-pressed="true"]:hover {
+    background-color: selecteditemtext;
+    color: selecteditem;
+  }
+
+  .navds-chips__toggle[aria-pressed="true"]:active {
+    background-color: highlight;
+    color: highlighttext;
+  }
+}

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

@@ -0,0 +1,226 @@
+[data-theme="dark"] {
+  --__ac-copybutton-action-text: var(--a-blue-300);
+  --__ac-copybutton-bg-hover: rgb(214 231 255 /0.13);
+  --__ac-copybutton-icon-success: rgb(51 170 95 /1);
+  --__ac-copybutton-neutral-text: rgb(231 240 254 /0.69);
+  --__ac-copybutton-text: rgb(251 252 254 /0.96);
+}
+
+[data-theme="light"] {
+  --__ac-copybutton-action-text: initial;
+  --__ac-copybutton-bg-hover: initial;
+  --__ac-copybutton-icon-success: initial;
+  --__ac-copybutton-neutral-text: initial;
+  --__ac-copybutton-text: initial;
+}
+
+.navds-copybutton {
+  --__ac-copybutton-padding: var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-3) var(--a-spacing-4);
+
+  cursor: pointer;
+  margin: 0;
+  text-decoration: none;
+  border: none;
+  background: none;
+  border-radius: var(--ac-copybutton-border-radius, var(--a-border-radius-medium));
+  padding: var(--__ac-copybutton-padding);
+  display: grid;
+  place-content: center;
+}
+
+@media (forced-colors: active) {
+  .navds-copybutton {
+    background-color: ButtonFace;
+    border: solid 1px ButtonText;
+    color: ButtonText;
+  }
+
+  .navds-copybutton.navds-copybutton:focus-visible {
+    box-shadow: none;
+    outline: 2px solid highlight;
+    outline-offset: 2px;
+  }
+}
+
+.navds-copybutton--icon-right {
+  --__ac-copybutton-padding: var(--a-spacing-3) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-5);
+}
+
+.navds-copybutton--small {
+  --__ac-copybutton-padding: var(--a-spacing-1) var(--a-spacing-3) var(--a-spacing-1) var(--a-spacing-2);
+
+  min-height: 2rem;
+  min-width: 2rem;
+}
+
+.navds-copybutton--small.navds-copybutton--icon-right {
+  --__ac-copybutton-padding: var(--a-spacing-1) var(--a-spacing-2) var(--a-spacing-1) var(--a-spacing-3);
+}
+
+.navds-copybutton--xsmall {
+  --__ac-copybutton-padding: var(--a-spacing-05) var(--a-spacing-2) var(--a-spacing-05) var(--a-spacing-1);
+
+  min-height: 1.5rem;
+  min-width: 1.5rem;
+}
+
+.navds-copybutton--xsmall.navds-copybutton--icon-right {
+  --__ac-copybutton-padding: var(--a-spacing-05) var(--a-spacing-1) var(--a-spacing-05) var(--a-spacing-2);
+}
+
+.navds-copybutton--icon-only {
+  --__ac-copybutton-padding: var(--a-spacing-3);
+}
+
+.navds-copybutton--small.navds-copybutton--icon-only {
+  --__ac-copybutton-padding: var(--a-spacing-1);
+}
+
+.navds-copybutton--xsmall.navds-copybutton--icon-only {
+  --__ac-copybutton-padding: var(--a-spacing-05);
+}
+
+.navds-copybutton__icon {
+  font-size: 1.5rem;
+  display: flex;
+}
+
+:where(.navds-copybutton--xsmall, .navds-copybutton--small) .navds-copybutton__icon {
+  font-size: 1.25rem;
+}
+
+.navds-copybutton__icon:first-of-type {
+  margin-left: -0.25rem;
+}
+
+.navds-copybutton__icon:last-of-type {
+  margin-right: -0.25rem;
+}
+
+.navds-copybutton__icon:only-child {
+  margin: 0;
+}
+
+.navds-copybutton--active .navds-copybutton__icon {
+  animation: akselCopyButtonIconAnimation 2s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+@keyframes akselCopyButtonIconAnimation {
+  8% {
+    transform: translateY(0);
+  }
+
+  17% {
+    transform: translateY(-10%);
+  }
+
+  25% {
+    transform: translateY(2%);
+  }
+
+  30% {
+    transform: translateY(0);
+  }
+}
+
+:where(.navds-copybutton--small, .navds-copybutton--xsmall):where(:not(:only-child)) {
+  margin: -0.125rem;
+}
+
+.navds-copybutton:focus-visible {
+  outline: none;
+  box-shadow: var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-copybutton:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
+/* Variant/action */
+.navds-copybutton--action {
+  color: var(--ac-copybutton-action-text, var(--__ac-copybutton-action-text, var(--a-text-action)));
+  background-color: var(--ac-copybutton-action-bg, var(--a-surface-transparent));
+}
+
+.navds-copybutton--action:hover {
+  color: var(--ac-copybutton-action-hover-text, var(--__ac-copybutton-action-text, var(--a-text-action-hover)));
+  background-color: var(--ac-copybutton-action-hover-bg, var(--__ac-copybutton-bg-hover, var(--a-surface-hover)));
+}
+
+.navds-copybutton--action:where(:disabled),
+.navds-copybutton--action:hover:where(:disabled) {
+  color: var(--ac-copybutton-action-text, var(--__ac-copybutton-action-text, var(--a-text-action)));
+  background-color: var(--ac-copybutton-action-bg, var(--a-surface-transparent));
+  box-shadow: none;
+}
+
+.navds-copybutton--active.navds-copybutton--action {
+  color: var(--ac-copybutton-action-active-text, var(--__ac-copybutton-icon-success, var(--a-icon-success)));
+}
+
+/* Variant/neutral */
+.navds-copybutton--neutral {
+  color: var(--ac-copybutton-neutral-text, var(--__ac-copybutton-neutral-text, var(--a-text-subtle)));
+  background-color: var(--ac-copybutton-neutral-bg, var(--a-surface-transparent));
+}
+
+.navds-copybutton--neutral:hover {
+  color: var(--ac-copybutton-neutral-hover-text, var(--__ac-copybutton-text, var(--a-text-default)));
+  background-color: var(--ac-copybutton-neutral-hover-bg, var(--__ac-copybutton-bg-hover, var(--a-surface-hover)));
+}
+
+.navds-copybutton--neutral:where(:disabled, .navds-copybutton--disabled),
+.navds-copybutton--neutral:hover:where(:disabled, .navds-copybutton--disabled) {
+  color: var(--ac-copybutton-neutral-text, var(--__ac-copybutton-text, var(--a-text-default)));
+  background-color: var(--ac-copybutton-neutral-bg, var(--a-surface-transparent));
+  box-shadow: none;
+}
+
+.navds-copybutton--active.navds-copybutton--neutral {
+  color: var(--ac-copybutton-neutral-active-text, var(--__ac-copybutton-text, var(--a-text-default)));
+}
+
+.navds-copybutton__content {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--a-spacing-2);
+}
+
+.navds-copybutton--small > .navds-copybutton__content {
+  gap: var(--a-spacing-1-alt);
+}
+
+.navds-copybutton--xsmall > .navds-copybutton__content {
+  gap: var(--a-spacing-1);
+}
+
+.navds-copybutton--active > .navds-copybutton__content {
+  animation: var(--ac-copybutton-animation, akselCopyButtonAnimation 0.4s linear);
+}
+
+@keyframes akselCopyButtonAnimation {
+  0% {
+    opacity: 0.4;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+/* Disabled */
+.navds-copybutton:where(:disabled) {
+  cursor: not-allowed;
+  opacity: 0.3;
+}
+
+@media (forced-colors: active) {
+  .navds-copybutton:where(:disabled) {
+    opacity: 1;
+    border-color: GrayText;
+  }
+}

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

@@ -0,0 +1,344 @@
+.navds-date {
+  padding: var(--a-spacing-4) var(--a-spacing-3);
+}
+
+.navds-date .rdp-day_range_middle.rdp-day_disabled {
+  color: var(--ac-date-middle-text, var(--a-text-on-action));
+  background: var(--ac-date-middle-bg, var(--a-surface-action-selected));
+}
+
+.navds-date .rdp-month,
+.navds-date.rdp-month {
+  display: grid;
+  gap: var(--a-spacing-5);
+}
+
+.navds-date__caption-label {
+  text-transform: capitalize;
+}
+
+.navds-date .rdp-head_cell {
+  text-transform: capitalize;
+  font-size: var(--a-font-size-small);
+}
+
+.navds-date .rdp-weeknumber {
+  font-size: var(--a-font-size-small);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--a-border-radius-medium);
+  margin: var(--a-spacing-2);
+  color: var(--a-text-subtle);
+}
+
+.navds-date .rdp-weeknumber.rdp-button {
+  width: 2rem;
+  height: 2rem;
+  box-shadow: 0 0 0 1px var(--a-border-default);
+  color: var(--a-text-subtle);
+  font-size: var(--a-font-size-small);
+}
+
+.navds-date .rdp-weeknumber.rdp-button:active {
+  background-color: var(--a-surface-action-active);
+  color: var(--a-text-on-action);
+  box-shadow: none;
+}
+
+.navds-date__caption__month .navds-select__container select {
+  text-transform: capitalize;
+}
+
+.navds-date .rdp-button {
+  all: unset;
+  display: block;
+  width: 2.5rem;
+  height: 2.5rem;
+  text-align: center;
+  border-radius: var(--a-border-radius-medium);
+}
+
+.navds-date .rdp-day_range_start {
+  border-radius: var(--a-border-radius-xlarge) var(--a-border-radius-medium) var(--a-border-radius-medium)
+    var(--a-border-radius-xlarge);
+}
+
+.navds-date .rdp-day_range_end:not(.rdp-day_range_start) {
+  border-radius: var(--a-border-radius-medium) var(--a-border-radius-xlarge) var(--a-border-radius-xlarge)
+    var(--a-border-radius-medium);
+}
+
+.navds-date .rdp-day_range_start.rdp-day_range_end {
+  border-radius: var(--a-border-radius-xlarge);
+}
+
+.navds-date .rdp-button:not(.rdp-day_selected, [disabled]):focus-visible,
+.navds-date .navds-date__month-button:not(.rdp-day_selected, [disabled]):focus-visible {
+  box-shadow: var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-date .rdp-button:not(.rdp-day_selected, [disabled]):focus,
+  .navds-date .navds-date__month-button:not(.rdp-day_selected, [disabled]):focus {
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
+.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus-visible,
+.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus-visible {
+  box-shadow:
+    inset 0 0 0 1px var(--a-surface-default),
+    var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-date .rdp-button.rdp-day_selected:not([disabled]):focus,
+  .navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus {
+    box-shadow:
+      inset 0 0 0 1px var(--a-surface-default),
+      var(--a-shadow-focus);
+  }
+}
+
+/* Monthpicker */
+.navds-date__month-button {
+  all: unset;
+  text-align: center;
+  width: 3rem;
+  height: 3rem;
+  text-transform: capitalize;
+  border-radius: var(--a-border-radius-medium);
+  cursor: pointer;
+}
+
+.navds-date__month-button:focus-visible,
+.navds-monthpicker__caption-button:focus-visible {
+  box-shadow: var(--a-shadow-focus);
+  z-index: 1;
+}
+
+@supports not selector(:focus-visible) {
+  .navds-date__month-button:focus,
+  .navds-monthpicker__caption-button:focus {
+    box-shadow: var(--a-shadow-focus);
+    z-index: 1;
+  }
+}
+
+.navds-date__year-label {
+  display: flex;
+  align-items: center;
+}
+
+.navds-date__wrapper,
+.navds-date__standalone-wrapper {
+  height: fit-content;
+  width: fit-content;
+}
+
+.navds-date .navds-date__field {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  position: relative;
+}
+
+.navds-date__field-wrapper {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  width: fit-content;
+}
+
+.navds-date .rdp-day_selected,
+.navds-monthpicker__month--selected {
+  color: var(--ac-date-selected-text, var(--a-text-on-action));
+  background: var(--ac-date-selected-bg, var(--a-surface-action-selected));
+  cursor: pointer;
+}
+
+.navds-date .rdp-day_disabled {
+  cursor: not-allowed;
+  text-decoration: line-through;
+  background-color: var(--ac-date-disabled-bg, var(--a-surface-neutral-subtle));
+  color: var(--ac-date-disabled-text, var(--a-text-subtle));
+}
+
+.navds-date .rdp-button:where(:not(.rdp-day_selected, [disabled])):hover,
+.navds-date__month-button:where(:not(.rdp-day_selected, [disabled])):hover {
+  background: var(--ac-date-hover-bg, var(--a-surface-action-subtle-hover));
+  cursor: pointer;
+}
+
+.navds-date .rdp-day_today {
+  box-shadow: 0 0 0 1px var(--ac-date-today-border, var(--a-border-action-selected));
+  text-decoration: underline;
+}
+
+.navds-date__caption {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--a-spacing-1);
+  padding-inline: var(--a-spacing-1);
+}
+
+.navds-date__caption-button,
+.navds-date__caption-button:disabled,
+.navds-date__caption-button:disabled:hover {
+  color: var(--ac-date-caption-text, var(--a-text-default));
+}
+
+.navds-date__field-input {
+  padding-right: var(--a-spacing-12);
+}
+
+.navds-form-field--small .navds-date__field-input {
+  padding-right: var(--a-spacing-8);
+}
+
+/* Error-handling */
+.navds-date__field--error .navds-date__field-input:not(:hover, :disabled) {
+  border-color: var(--ac-date-input-error-border, var(--a-border-danger));
+  box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger));
+}
+
+.navds-date__field--error .navds-date__field-input:focus-visible:not(:hover, :disabled) {
+  box-shadow:
+    inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)),
+    var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-date__field--error .navds-date__field-input:focus:not(:hover, :disabled) {
+    box-shadow:
+      inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)),
+      var(--a-shadow-focus);
+  }
+}
+
+.navds-date__field-button {
+  position: absolute;
+  right: 0.0625rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--ac-date-input-button-text, var(--a-text-default));
+  display: inline-flex;
+  cursor: pointer;
+  margin: 0;
+  text-decoration: none;
+  border: none;
+  background: none;
+  border-radius: calc(var(--a-border-radius-medium) - 1px);
+  padding: var(--a-spacing-3);
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+  height: calc(100% - 0.125rem);
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+
+.navds-form-field--small .navds-date__field-button {
+  padding: var(--a-spacing-1);
+}
+
+.navds-date__field-button:hover:where(:not([disabled])) {
+  color: var(--ac-date-input-button-hover-text, var(--a-text-action-on-action-subtle));
+  background-color: var(--ac-date-input-button-hover-bg, var(--a-surface-action-subtle-hover));
+}
+
+.navds-form-field--disabled .navds-date__field-button {
+  opacity: 1;
+  cursor: not-allowed;
+}
+
+.navds-date__field-button:focus-visible {
+  outline: none;
+  box-shadow: var(--a-shadow-focus);
+  border-radius: var(--a-border-radius-medium);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-date__field-button:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
+.navds-date__caption__year {
+  width: 5rem;
+}
+
+.navds-date .rdp-day_outside {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+/* Readonly */
+.navds-date__field--readonly .navds-date__field-button {
+  cursor: default;
+  color: var(--a-gray-500);
+}
+
+.navds-date__caption-button {
+  width: 2rem;
+  height: 2rem;
+}
+
+.navds-date__week-row {
+  display: flex;
+  align-items: center;
+  gap: var(--a-spacing-05);
+}
+
+.navds-date__week-wrapper {
+  width: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+}
+
+.navds-date__modal.navds-date {
+  padding: 0;
+}
+
+.navds-date__modal-body {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  padding: var(--a-spacing-4);
+  gap: var(--a-spacing-2);
+}
+
+.navds-date__modal-body > .navds-date {
+  padding: 0;
+}
+
+.navds-date__popover:where(.navds-popover) {
+  border: none;
+}
+
+@media (min-width: 480px) {
+  .navds-date {
+    padding: var(--a-spacing-5) var(--a-spacing-4);
+  }
+
+  .navds-date__modal-body {
+    padding: var(--a-spacing-6);
+  }
+
+  .navds-date__caption {
+    gap: var(--a-spacing-2);
+  }
+
+  .navds-date .rdp-button,
+  .navds-date__caption-button {
+    width: 3rem;
+    height: 3rem;
+  }
+}

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

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

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

@@ -0,0 +1,235 @@
+.navds-expansioncard {
+  --__ac-expansioncard-border-color: var(--ac-expansioncard-border-color, var(--a-border-default));
+  --__ac-expansioncard-border-radius: var(--ac-expansioncard-border-radius, var(--a-border-radius-large));
+  --__ac-expansioncard-border-width: 1px;
+  --__ac-expansioncard-padding-block: var(--a-spacing-4);
+  --__ac-expansioncard-padding-inline: var(--a-spacing-6);
+
+  border-radius: var(--__ac-expansioncard-border-radius);
+  background-color: var(--ac-expansioncard-bg, var(--a-surface-default));
+  height: fit-content;
+}
+
+.navds-expansioncard--open {
+  --__ac-expansioncard-border-color: var(
+    --ac-expansioncard-border-open-color,
+    var(--ac-expansioncard-border-color, var(--a-border-default))
+  );
+}
+
+.navds-expansioncard:hover {
+  --__ac-expansioncard-border-color: var(--ac-expansioncard-border-hover-color, var(--a-border-strong));
+}
+
+:where(.navds-expansioncard.navds-expansioncard--open):hover {
+  --__ac-expansioncard-border-color: var(--ac-expansioncard-border-hover-color, var(--a-border-strong));
+}
+
+/*************************
+ * Header *
+ *************************/
+.navds-expansioncard__header {
+  width: 100%;
+  display: flex;
+  gap: var(--a-spacing-4);
+  padding: var(--__ac-expansioncard-padding-block) var(--__ac-expansioncard-padding-inline);
+  border-radius: var(--__ac-expansioncard-border-radius);
+  background-color: var(--ac-expansioncard-header-bg, var(--a-surface-transparent));
+  position: relative;
+  border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
+  justify-content: space-between;
+}
+
+.navds-expansioncard--small {
+  --__ac-expansioncard-padding-block: var(--a-spacing-3);
+  --__ac-expansioncard-padding-inline: var(--a-spacing-4);
+}
+
+.navds-expansioncard__header:hover {
+  background-color: var(--ac-expansioncard-header-bg-hover, var(--a-surface-hover));
+  box-shadow: 0 0 0 1px var(--__ac-expansioncard-border-color);
+}
+
+.navds-expansioncard--open > :where(.navds-expansioncard__header) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
+  border-bottom: none;
+  background-color: var(--ac-expansioncard-header-open-bg, var(--a-surface-transparent));
+}
+
+.navds-expansioncard--open > :where(.navds-expansioncard__header):hover {
+  background-color: var(--ac-expansioncard-header-bg-hover, var(--a-surface-hover));
+  box-shadow:
+    1px 0 0 0 var(--__ac-expansioncard-border-color),
+    -1px 0 0 0 var(--__ac-expansioncard-border-color),
+    0 -1px 0 0 var(--__ac-expansioncard-border-color);
+}
+
+.navds-expansioncard--open > :where(.navds-expansioncard__header)::after {
+  content: "";
+  background-color: var(--a-border-divider);
+  bottom: 0;
+  left: var(--__ac-expansioncard-padding-inline);
+  height: 1px;
+  width: calc(100% - 2 * var(--__ac-expansioncard-padding-inline));
+  position: absolute;
+  opacity: 1;
+  transition: opacity 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.navds-expansioncard--open > :where(.navds-expansioncard__header:hover)::after {
+  opacity: 0;
+}
+
+/*************************
+ * Header/Typography *
+ *************************/
+
+.navds-expansioncard__title--small {
+  margin-top: 0.625rem;
+}
+
+.navds-expansioncard__title--medium {
+  margin-top: var(--a-spacing-2);
+}
+
+.navds-expansioncard__title--large {
+  margin-top: var(--a-spacing-1);
+}
+
+.navds-expansioncard--small > :where(.navds-expansioncard__header) :where(.navds-expansioncard__title--small) {
+  margin-top: var(--a-spacing-05);
+}
+
+.navds-expansioncard--small :where(.navds-expansioncard__title--medium, .navds-expansioncard__title--large) {
+  margin-top: 0;
+}
+
+/*************************
+ * Header/Button *
+ *************************/
+.navds-expansioncard__header-button {
+  display: grid;
+  place-content: center;
+  cursor: pointer;
+  margin: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--ac-expansioncard-button-border-radius, var(--a-border-radius-medium));
+  min-height: 3rem;
+  min-width: 3rem;
+  font-size: 1.5rem;
+  align-self: flex-start;
+}
+
+.navds-expansioncard--small > :where(.navds-expansioncard__header) > :where(.navds-expansioncard__header-button) {
+  min-height: 2rem;
+  min-width: 2rem;
+}
+
+:where(.navds-expansioncard__header):hover > :where(.navds-expansioncard__header-button) {
+  background-color: var(--a-surface-hover);
+}
+
+.navds-expansioncard__header-chevron {
+  transition: transform 150ms ease-in-out;
+}
+
+.navds-expansioncard--open > :where(.navds-expansioncard__header) :where(.navds-expansioncard__header-chevron) {
+  transform: translateY(0) rotate(180deg);
+}
+
+.navds-expansioncard__header-button:hover > :where(.navds-expansioncard__header-chevron) {
+  transform: translateY(1px);
+}
+
+.navds-expansioncard__header-button:focus-visible {
+  outline: 3px solid transparent;
+  box-shadow: var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-expansioncard__header-button:focus {
+    outline: 3px solid transparent;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
+.navds-expansioncard--open
+  > :where(.navds-expansioncard__header)
+  > :where(.navds-expansioncard__header-button):hover
+  :where(.navds-expansioncard__header-chevron) {
+  transform: translateY(-1px) rotate(180deg);
+}
+
+.navds-expansioncard__header-button::after {
+  inset: 0;
+  z-index: 1;
+  position: absolute;
+  content: "";
+  height: 100%;
+  width: 100%;
+  cursor: pointer;
+}
+
+/*************************
+ * Content *
+ *************************/
+.navds-expansioncard__content {
+  --__ac-expansioncard-padding-block: var(--a-spacing-5);
+
+  border-end-end-radius: var(--__ac-expansioncard-border-radius);
+  border-end-start-radius: var(--__ac-expansioncard-border-radius);
+  padding: var(--__ac-expansioncard-padding-block) var(--__ac-expansioncard-padding-inline)
+    var(--__ac-expansioncard-padding-inline);
+  border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
+  border-top: none;
+}
+
+.navds-expansioncard--small .navds-expansioncard__content {
+  --__ac-expansioncard-padding-block: var(--a-spacing-4);
+}
+
+.navds-expansioncard__content--closed {
+  display: none;
+}
+
+:where(.navds-expansioncard__header):hover + .navds-expansioncard__content {
+  box-shadow:
+    1px 0 0 0 var(--__ac-expansioncard-border-color),
+    -1px 0 0 0 var(--__ac-expansioncard-border-color),
+    0 1px 0 0 var(--__ac-expansioncard-border-color);
+}
+
+.navds-expansioncard__content-inner {
+  animation: fadeExpansionCard 250ms ease;
+}
+
+.navds-expansioncard--no-animation :where(.navds-expansioncard__content-inner) {
+  animation: none;
+}
+
+@keyframes fadeExpansionCard {
+  0% {
+    opacity: 0.25;
+    transform: translateY(-8px);
+  }
+
+  40% {
+    opacity: 0.7;
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (forced-colors: active) {
+  .navds-expansioncard:hover {
+    --__ac-expansioncard-border-color: highlight;
+
+    outline: 1px solid highlight;
+  }
+}

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

@@ -0,0 +1,441 @@
+.navds-combobox__wrapper {
+  --__ac-combobox-icon-size: 1.5rem;
+  --__ac-combobox-wrapper-inner-padding: var(--a-spacing-2);
+  --__ac-combobox-list-item-padding-block: var(--a-spacing-3);
+  --__ac-combobox-list-item-padding-inline: var(--a-spacing-3);
+  --__ac-combobox-border-width: 1px;
+  --__ac-combobox-input-height: 2rem;
+
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  position: relative;
+}
+
+.navds-form-field--small .navds-combobox__wrapper {
+  --__ac-combobox-icon-size: 1.25rem;
+  --__ac-combobox-wrapper-inner-padding: var(--a-spacing-1);
+  --__ac-combobox-list-item-padding-block: var(--a-spacing-1-alt);
+  --__ac-combobox-list-item-padding-inline: var(--a-spacing-2);
+  --__ac-combobox-input-height: 1.5rem;
+}
+
+.navds-combobox--disabled {
+  opacity: 0.3;
+}
+
+.navds-combobox--disabled .navds-combobox__wrapper *:hover {
+  cursor: not-allowed;
+}
+
+.navds-combobox--disabled .navds-text-field__input {
+  border: 1px solid var(--a-border-default);
+}
+
+.navds-combobox--disabled .navds-combobox__selected-options {
+  pointer-events: none;
+}
+
+.navds-combobox--readonly {
+  pointer-events: none;
+}
+
+.navds-combobox--readonly .navds-combobox__button-toggle-list {
+  color: var(--a-gray-500);
+}
+
+.navds-combobox--readonly .navds-text-field__input,
+.navds-combobox--readonly .navds-combobox__input {
+  background-color: var(--a-surface-subtle);
+  border-color: var(--a-border-subtle);
+}
+
+.navds-combobox__button-clear svg,
+.navds-combobox__button-toggle-list svg,
+.navds-combobox__list svg {
+  width: var(--__ac-combobox-icon-size);
+  height: var(--__ac-combobox-icon-size);
+}
+
+.navds-combobox__wrapper-inner.navds-text-field__input {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding-block: calc(var(--__ac-combobox-wrapper-inner-padding) - var(--__ac-combobox-border-width));
+  padding-inline: var(--__ac-combobox-wrapper-inner-padding);
+}
+
+.navds-combobox__wrapper-inner > :first-child {
+  flex: 2;
+}
+
+.navds-combobox__wrapper-inner > :last-child {
+  display: flex;
+  flex-flow: row nowrap;
+}
+
+.navds-combobox__wrapper-inner:hover {
+  cursor: text;
+}
+
+.navds-combobox--error .navds-text-field__input:not(:hover, :disabled) {
+  border-color: var(--ac-combobox-error-border, var(--a-border-danger));
+  box-shadow: 0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger));
+}
+
+.navds-combobox--error
+  .navds-text-field__input:not(:hover, :disabled, .navds-combobox__wrapper-inner--virtually-unfocused):focus-within {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow:
+    0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger)),
+    var(--a-shadow-focus);
+}
+
+.navds-combobox__selected-options {
+  gap: var(--__ac-combobox-wrapper-inner-padding);
+  align-items: center;
+}
+
+.navds-combobox__selected-options > li {
+  margin: auto 0;
+  border-radius: var(--a-border-radius-full);
+}
+
+.navds-combobox__selected-options > li:last-of-type {
+  display: flex;
+  flex: 1;
+}
+
+.navds-combobox__selected-options--no-bg {
+  font-family: inherit;
+  font-size: var(--a-font-size-large);
+  font-weight: var(--a-font-weight-regular);
+  letter-spacing: 0;
+  line-height: var(--a-font-line-height-large);
+  margin: 0;
+  padding-left: 0.25rem;
+}
+
+.navds-combobox__input-wrapper {
+  width: 100%;
+}
+
+.navds-combobox__input {
+  flex: 1;
+  border: none;
+  padding: 0;
+  margin: 0;
+  margin-left: var(--a-spacing-1);
+  min-width: 10ch;
+  width: 100%;
+  height: var(--__ac-combobox-input-height);
+}
+
+.navds-combobox__input--hide-caret {
+  caret-color: transparent;
+}
+
+.navds-combobox__input:focus-visible {
+  outline: none;
+  border: none;
+  box-shadow: none;
+}
+
+.navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
+  box-shadow: var(--a-shadow-focus);
+  outline: 3px solid transparent;
+  outline-offset: 2px;
+}
+
+.navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible).navds-combobox__wrapper-inner--virtually-unfocused {
+  box-shadow: none;
+  outline: none;
+}
+
+@supports not selector(:focus-visible) {
+  .navds-combobox__input:focus {
+    outline: none;
+    border: none;
+    box-shadow: none;
+  }
+
+  .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus) {
+    box-shadow: var(--a-shadow-focus);
+    outline: 3px solid transparent;
+    outline-offset: 2px;
+  }
+
+  .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus).navds-combobox__wrapper-inner--virtually-unfocused {
+    box-shadow: none;
+    outline: none;
+  }
+}
+
+@supports not selector(:has) {
+  .navds-combobox--focused .navds-combobox__wrapper-inner {
+    box-shadow: var(--a-shadow-focus);
+    outline: 3px solid transparent;
+    outline-offset: 2px;
+  }
+
+  .navds-combobox--focused .navds-combobox__wrapper-inner.navds-combobox__wrapper-inner--virtually-unfocused {
+    box-shadow: none;
+    outline: none;
+  }
+}
+
+.navds-combobox__button-clear {
+  border-radius: var(--a-border-radius-medium);
+  color: var(--ac-combobox-clear-icon, var(--a-text-subtle));
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  background: none;
+  border: none;
+  font-size: 1rem;
+  padding: 0;
+}
+
+.navds-combobox__input::-webkit-search-cancel-button {
+  display: none;
+}
+
+.navds-combobox__button-toggle-list {
+  border-radius: var(--a-border-radius-medium);
+  color: var(--a-text-default);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  background: none;
+  border: none;
+  font-size: 1rem;
+  padding: 0;
+}
+
+.navds-combobox__button-clear:active:hover,
+.navds-combobox__button-toggle-list:active:hover {
+  color: var(--ac-combobox-clear-icon-active, var(--a-text-action));
+}
+
+.navds-combobox__button-clear:hover,
+.navds-combobox__button-toggle-list:hover {
+  color: var(--ac-combobox-clear-icon-hover, var(--a-text-action-selected));
+}
+
+.navds-combobox__button-toggle-list:focus-visible {
+  box-shadow:
+    0 0 0 1px var(--a-surface-default) inset,
+    var(--a-shadow-focus);
+  box-shadow: var(--a-shadow-focus);
+  outline: none;
+}
+
+@supports not selector(:focus-visible) {
+  .navds-combobox__button-toggle-list:focus {
+    box-shadow:
+      0 0 0 1px var(--a-surface-default) inset,
+      var(--a-shadow-focus);
+    box-shadow: var(--a-shadow-focus);
+    outline: none;
+  }
+}
+
+/* dropdown & non selectable dropdown items */
+
+.navds-combobox__list {
+  max-height: 290px;
+  overflow-y: auto;
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: var(--a-z-index-popover);
+  top: calc(100% + var(--a-spacing-2));
+  border: 1px solid var(--ac-combobox-list-border-color, var(--a-border-divider));
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--a-shadow-small);
+  border-radius: var(--a-border-radius-medium);
+  background-color: var(--ac-combobox-list-bg, var(--a-surface-default));
+  color: var(--ac-combobox-list-text, var(--a-text-default));
+  overscroll-behavior: contain;
+}
+
+.navds-combobox__list--closed {
+  display: none;
+}
+
+.navds-combobox__list_non-selectables {
+  position: sticky;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+}
+
+.navds-combobox__list-item,
+.navds-combobox__list-item--loading,
+.navds-combobox__list-item--no-options,
+.navds-combobox__list-item--new-option,
+.navds-combobox__list-item--max-selected {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding-block: var(--__ac-combobox-list-item-padding-block);
+  padding-inline: var(--__ac-combobox-list-item-padding-inline);
+  width: 100%;
+  background-color: var(--ac-combobox-list-item-bg, var(--a-surface-default));
+}
+
+.navds-combobox__list-item--loading {
+  justify-content: center;
+  background-color: var(--ac-combobox-list-item-loading-bg, var(--a-surface-default));
+}
+
+.navds-combobox__list-item--max-selected {
+  background: var(--ac-combobox-list-item-max-selected-bg, var(--a-surface-info-subtle));
+  border-start-start-radius: calc(var(--a-border-radius-medium) - 1px);
+  border-start-end-radius: calc(var(--a-border-radius-medium) - 1px);
+  border: 1px solid var(--ac-combobox-list-item-max-selected-border, var(--a-border-info));
+}
+
+.navds-combobox__list_non-selectables:hover {
+  cursor: default;
+}
+
+/* ul-list and selectable li-items */
+
+.navds-combobox__list-options {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  display: inherit;
+  flex-direction: inherit;
+  gap: inherit;
+  background-color: inherit;
+  align-items: flex-start;
+}
+
+.navds-combobox__list-item--focus,
+.navds-combobox__list--with-hover
+  .navds-combobox__list-item:where(:not([data-no-focus="true"], .navds-combobox__list-item--new-option)):hover {
+  background-color: var(--ac-combobox-list-item-hover-bg, var(--a-surface-hover));
+  cursor: pointer;
+  border-left: 4px solid var(--ac-combobox-list-item-hover-border-left, var(--a-border-strong));
+  padding-inline-start: calc(var(--__ac-combobox-list-item-padding-inline) - 4px);
+}
+
+.navds-combobox__list-item[data-no-focus="true"] {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+.navds-combobox__list-item--selected {
+  background-color: var(--ac-combobox-list-item-selected-bg, var(--a-surface-selected));
+}
+
+.navds-combobox__list-item--selected p {
+  font-weight: var(--a-font-weight-bold);
+}
+
+.navds-combobox__list-item--selected.navds-combobox__list-item--focus,
+.navds-combobox__list--with-hover .navds-combobox__list-item--selected:hover {
+  background-color: var(--ac-combobox-list-item-selected-hover-bg, var(--a-surface-action-subtle-hover));
+  border-left: 4px solid var(--ac-combobox-list-item-selected-hover-border-left, var(--a-border-focus));
+}
+
+.navds-combobox__list-item--new-option {
+  border-bottom: 1px solid var(--a-border-divider);
+  background: var(--a-surface-neutral-subtle);
+  cursor: pointer;
+  justify-content: flex-start;
+  gap: 0.25rem;
+}
+
+.navds-combobox__list--with-hover .navds-combobox__list-item--new-option:hover {
+  border-bottom: 1px solid var(--a-border-divider);
+  background: var(--a-surface-neutral-subtle-hover);
+}
+
+.navds-combobox__list-item--new-option--focus {
+  box-shadow:
+    var(--a-shadow-focus) inset,
+    var(--a-border-action) 0 0 0 5px inset;
+  border-radius: calc(var(--a-border-radius-medium) - 1px);
+}
+
+.navds-combobox__list-item mark {
+  background-color: transparent;
+  font-weight: bold;
+}
+
+/* Mobile */
+
+@media (max-width: 479px) {
+  .navds-combobox__button-toggle-list {
+    right: 0.5rem;
+  }
+
+  /* add bigger click area for input */
+  .navds-combobox__input {
+    min-width: min-content;
+    padding: 0.75rem 0;
+  }
+
+  .navds-combobox__selected-options {
+    gap: var(--a-spacing-1);
+  }
+}
+
+@media (forced-colors: active) {
+  .navds-combobox__button-clear:hover {
+    color: highlight;
+  }
+
+  .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
+    outline-color: highlight;
+  }
+
+  .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 {
+    border-left-color: highlight;
+    color: highlight;
+  }
+
+  .navds-combobox__list-item[data-no-focus="true"] {
+    opacity: 1;
+    color: graytext;
+  }
+
+  .navds-combobox__list-item--selected {
+    background-color: selecteditem;
+    color: selecteditemtext;
+  }
+
+  .navds-combobox__list-item--selected > * {
+    forced-color-adjust: none;
+  }
+
+  .navds-combobox__list-item--selected.navds-combobox__list-item--focus,
+  .navds-combobox__list--with-hover .navds-combobox__list-item--selected:hover {
+    border-left-color: highlight;
+    color: highlight;
+  }
+
+  .navds-combobox__list--with-hover .navds-combobox__list-item--new-option:hover {
+    color: highlight;
+  }
+
+  .navds-combobox__list-item--new-option--focus {
+    outline: 2px solid highlight;
+    outline-offset: -3px;
+  }
+}

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

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

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

@@ -0,0 +1,55 @@
+.navds-error-summary {
+  background-color: var(--ac-error-summary-bg, var(--a-surface-default));
+  padding: var(--a-spacing-5);
+  border: 4px solid var(--ac-error-summary-border, var(--a-border-danger));
+  border-radius: var(--a-border-radius-large);
+}
+
+.navds-error-summary--small {
+  padding: var(--a-spacing-3);
+}
+
+.navds-error-summary__heading {
+  scroll-margin-top: var(--a-spacing-6);
+}
+
+.navds-error-summary--small .navds-error-summary__heading {
+  scroll-margin-top: var(--a-spacing-4);
+}
+
+.navds-error-summary__heading:focus {
+  outline: none;
+}
+
+.navds-error-summary:focus-visible,
+.navds-error-summary:has(.navds-error-summary__heading:focus-visible) {
+  box-shadow:
+    0 0 0 1px var(--a-border-on-inverted),
+    0 0 0 4px var(--a-border-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-error-summary:focus {
+    box-shadow: var(--a-shadow-focus);
+    outline: none;
+  }
+}
+
+.navds-error-summary__list {
+  margin: var(--a-spacing-3) 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--a-spacing-3);
+  padding-left: var(--a-spacing-6);
+  list-style: inherit;
+}
+
+.navds-error-summary__list > * {
+  color: var(--ac-error-summary-list-dot, var(--a-text-action));
+}
+
+.navds-error-summary--small > .navds-error-summary__list {
+  margin: var(--a-spacing-2) 0;
+  gap: var(--a-spacing-2);
+  padding-left: var(--a-spacing-5);
+}

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

@@ -0,0 +1,51 @@
+[data-theme="dark"] {
+  --__ac-form-description: var(--a-text-on-inverted);
+}
+
+[data-theme="light"] {
+  --__ac-form-description: initial;
+}
+
+.navds-fieldset {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-width: 0;
+}
+
+.navds-fieldset > :not(:first-child, :empty) {
+  margin-top: var(--a-spacing-2);
+}
+
+.navds-fieldset__description {
+  color: var(--ac-form-description, var(--__ac-form-description, var(--a-text-subtle)));
+}
+
+.navds-fieldset > .navds-fieldset__description:not(:empty) {
+  margin-top: 0.125rem;
+}
+
+/* Applied when hideLegend is applied to fieldset */
+.navds-fieldset > .navds-sr-only + :not(:first-child, :empty) {
+  margin-top: 0;
+}
+
+.navds-fieldset__legend {
+  padding: 0;
+}
+
+.navds-fieldset--readonly > :where(.navds-fieldset__legend) {
+  display: inline-flex;
+}
+
+.navds-fieldset:disabled > .navds-fieldset__legend,
+.navds-fieldset:disabled > .navds-fieldset__description {
+  opacity: 0.3;
+}
+
+@media (forced-colors: active) {
+  .navds-fieldset:disabled > .navds-fieldset__legend,
+  .navds-fieldset:disabled > .navds-fieldset__description {
+    opacity: 1;
+  }
+}

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

@@ -0,0 +1,230 @@
+/**
+* Makes it easier for user to use FileItem in semantic lists
+*/
+.navds-file-upload :is(ul, li) {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/**
+ * FileUpload.Dropzone
+ */
+
+.navds-dropzone__area {
+  --__ac-dropzone-background: var(--a-surface-subtle);
+  --__ac-dropzone-text-color: var(--a-text-default);
+  --__ac-dropzone-padding: var(--a-spacing-6);
+  --__ac-dropzone-icon-padding: var(--a-spacing-2);
+  --__ac-dropzone-animation-length-long: 0.6s;
+  --__ac-dropzone-animation-length-short: 250ms;
+  --__ac-dropzone-animation-ease-out: cubic-bezier(0.3, 1, 0.3, 1);
+  --__ac-dropzone-animation-over-under: cubic-bezier(0.3, 1.4, 0.3, 1);
+
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: var(--a-spacing-4);
+  text-align: center;
+  padding: var(--__ac-dropzone-padding);
+  outline: 1px dashed var(--a-border-subtle);
+  outline-offset: -1px;
+  border-radius: var(--a-border-radius-large);
+  background-color: var(--__ac-dropzone-background);
+  color: var(--__ac-dropzone-text-color);
+  transition: background-color var(--__ac-dropzone-animation-length-short) var(--__ac-dropzone-animation-ease-out);
+  cursor: pointer;
+}
+
+.navds-dropzone__area:hover {
+  box-shadow: inset 0 2px 4px 1px rgb(11 11 11/ 0.05);
+  outline-color: var(--a-border-default);
+}
+
+.navds-dropzone--disabled > .navds-dropzone__area:hover {
+  outline-color: var(--a-border-subtle);
+  box-shadow: initial;
+  cursor: default;
+}
+
+.navds-dropzone--dragging > .navds-dropzone__area {
+  --__ac-dropzone-background: var(--a-surface-action-subtle-hover);
+}
+
+.navds-dropzone--dragging > .navds-dropzone__area::after {
+  outline: 1px dashed var(--a-border-subtle);
+  outline-offset: -1px;
+  color: var(--a-text-action-selected);
+  background-color: var(--a-surface-hover);
+  content: "";
+  inset: 0;
+  position: absolute;
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+  box-shadow: inset 0 2px 7px 3px rgb(11 11 11/ 0.1);
+  border-radius: var(--a-border-radius-large);
+  animation: akselDropzoneDragoverAnimation var(--__ac-dropzone-animation-length-short) var(--__ac-dropzone-animation-ease-out);
+}
+
+@keyframes akselDropzoneDragoverAnimation {
+  0% {
+    -webkit-backdrop-filter: blur(0);
+    backdrop-filter: blur(0);
+    background-color: var(--a-surface-transparent);
+  }
+
+  70% {
+    -webkit-backdrop-filter: blur(8px);
+    backdrop-filter: blur(8px);
+  }
+
+  100% {
+    background-color: var(--a-surface-hover);
+  }
+}
+
+.navds-dropzone__area-icon {
+  display: grid;
+  padding: var(--__ac-dropzone-icon-padding);
+  visibility: hidden;
+}
+
+.navds-dropzone--error:where(:not(.navds-dropzone--dragging)) > .navds-dropzone__area {
+  outline-color: var(--a-surface-danger);
+  outline-width: 2px;
+}
+
+.navds-dropzone__area:hover > .navds-dropzone__area-button {
+  color: var(--ac-button-secondary-hover-text, var(--__ac-button-secondary-hover-text, var(--a-text-action-on-action-subtle)));
+  background-color: var(
+    --ac-button-secondary-hover-bg,
+    var(--__ac-button-secondary-hover-bg, var(--a-surface-action-subtle-hover))
+  );
+}
+
+.navds-dropzone__area:active .navds-dropzone__area-button {
+  color: var(--ac-button-secondary-active-text, var(--__ac-button-secondary-active-text, var(--a-text-on-action)));
+  background-color: var(--ac-button-secondary-active-bg, var(--__ac-button-secondary-active-bg, var(--a-surface-action-active)));
+  box-shadow: none;
+}
+
+.navds-dropzone__area-release {
+  top: var(--__ac-dropzone-padding);
+  display: grid;
+  position: absolute;
+  z-index: 1;
+  pointer-events: none;
+  transition:
+    top var(--__ac-dropzone-animation-length-long) var(--__ac-dropzone-animation-over-under),
+    transform var(--__ac-dropzone-animation-length-long) var(--__ac-dropzone-animation-over-under);
+}
+
+.navds-dropzone__area-release__icon {
+  display: grid;
+  padding: var(--__ac-dropzone-icon-padding);
+  border-radius: var(--a-border-radius-full);
+  background-color: var(--a-surface-neutral-subtle);
+  transition:
+    background-color 300ms var(--__ac-dropzone-animation-ease-out),
+    font-size 300ms var(--__ac-dropzone-animation-ease-out);
+  font-size: 1.5rem;
+}
+
+.navds-dropzone--dragging .navds-dropzone__area-release > .navds-dropzone__area-release__icon {
+  background-color: transparent;
+  font-size: 2rem;
+}
+
+.navds-dropzone__area-release__text {
+  visibility: hidden;
+}
+
+.navds-dropzone--dragging .navds-dropzone__area-release > .navds-dropzone__area-release__text {
+  transition: visibility var(--__ac-dropzone-animation-length-long) var(--__ac-dropzone-animation-over-under);
+  visibility: visible;
+}
+
+.navds-dropzone--dragging .navds-dropzone__area-release {
+  color: var(--a-text-action-selected);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.navds-dropzone__area-disabled {
+  color: var(--a-text-subtle);
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: var(--a-spacing-2);
+}
+
+/**
+ * FileUpload.Item
+ */
+
+.navds-file-item__inner {
+  outline: 1px solid var(--a-border-subtle);
+  outline-offset: -1px;
+  transition: outline-color 250ms cubic-bezier(0, 0.3, 0.15, 1);
+  border-radius: var(--a-border-radius-large);
+  padding: var(--a-spacing-3);
+  display: flex;
+  gap: var(--a-spacing-3);
+  align-items: flex-start;
+}
+
+.navds-file-item--error > .navds-file-item__inner {
+  outline: 2px solid var(--a-surface-danger);
+}
+
+.navds-file-item__icon {
+  background-color: var(--a-surface-neutral-subtle);
+  color: var(--a-icon-default);
+  border-radius: var(--a-border-radius-full);
+  min-height: 3rem;
+  min-width: 3rem;
+  display: grid;
+  place-content: center;
+  transition: background-color 250ms cubic-bezier(0, 0.3, 0.15, 1);
+}
+
+.navds-file-item__icon--loading {
+  background-color: transparent;
+}
+
+.navds-file-item__file-info {
+  word-break: break-word;
+}
+
+.navds-file-item__button {
+  margin-left: auto;
+}
+
+.navds-file-item__error {
+  color: var(--a-text-danger);
+  display: grid;
+  transition-property: grid-template-rows, padding-top;
+  transition-duration: 250ms;
+  transition-timing-function: cubic-bezier(0, 0.3, 0.15, 1);
+  overflow: hidden;
+  grid-template-rows: 0fr;
+}
+
+.navds-file-item--error .navds-file-item__error {
+  grid-template-rows: 1fr;
+  padding-top: var(--a-spacing-1);
+}
+
+.navds-file-item__error-content > svg {
+  flex-shrink: 0;
+  height: 1rem;
+  margin-top: 0.1rem;
+}
+
+.navds-file-item__error-content {
+  min-height: 0;
+  display: flex;
+  gap: var(--a-spacing-1);
+}

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

@@ -0,0 +1,52 @@
+.navds-form-progress__bar {
+  margin-bottom: var(--a-spacing-2);
+}
+
+.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 {
+  display: none;
+}
+
+.navds-form-progress__button:hover svg {
+  transform: translateY(1px);
+}
+
+.navds-form-progress__button[data-state="open"] svg {
+  transform: rotate(-180deg);
+}
+
+.navds-form-progress__button[data-state="open"]:hover svg {
+  transform: translateY(-1px) rotate(-180deg);
+}
+
+.navds-form-progress__collapsible {
+  display: grid;
+  grid-template-rows: 0fr;
+  overflow: hidden;
+  transition: grid-template-rows 0.3s cubic-bezier(0.3, 0, 0.15, 1);
+}
+
+.navds-form-progress__collapsible[hidden] {
+  display: grid;
+}
+
+.navds-form-progress__collapsible[data-state="open"] {
+  grid-template-rows: 1fr;
+}
+
+.navds-form-progress__collapsible-content {
+  min-height: 0;
+  transition: visibility 0.3s;
+  visibility: hidden;
+}
+
+.navds-form-progress__collapsible[data-state="open"] .navds-form-progress__collapsible-content {
+  visibility: visible;
+}
+
+.navds-form-progress__stepper {
+  border: 2px solid var(--a-border-subtle);
+  border-radius: var(--a-border-radius-large);
+  padding: var(--a-spacing-2) var(--a-spacing-4);
+  margin-top: var(--a-spacing-1);
+}

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

@@ -0,0 +1,78 @@
+.navds-form-summary {
+  overflow: hidden;
+  border: 1px solid var(--a-border-subtle);
+  border-radius: var(--a-border-radius-large);
+  background: var(--a-surface-default);
+}
+
+.navds-form-summary__header {
+  background-color: var(--a-surface-subtle);
+  padding: var(--a-spacing-4) var(--a-spacing-6);
+  display: flex;
+  justify-content: space-between;
+  gap: 0 var(--a-spacing-2);
+}
+
+@media (max-width: 479px) {
+  .navds-form-summary__header {
+    padding: var(--a-spacing-3) var(--a-spacing-4);
+    flex-direction: column;
+  }
+}
+
+.navds-form-summary__edit {
+  flex-shrink: 0;
+  margin-top: var(--a-spacing-1);
+  align-self: flex-start;
+}
+
+.navds-form-summary > .navds-form-summary__answers {
+  border-top: 1px solid var(--a-border-subtle);
+}
+
+.navds-form-summary__answers {
+  padding: var(--a-spacing-5) var(--a-spacing-6) var(--a-spacing-6);
+  margin: 0;
+}
+
+@media (max-width: 479px) {
+  .navds-form-summary__answers {
+    padding: var(--a-spacing-4);
+  }
+}
+
+.navds-form-summary__answer:not(:last-child) {
+  margin-bottom: var(--a-spacing-4);
+  padding-bottom: var(--a-spacing-4);
+  border-bottom: 1px solid var(--a-border-divider);
+}
+
+.navds-form-summary__answer:has(.navds-form-summary__answer) {
+  padding-bottom: var(--a-spacing-6);
+}
+
+.navds-form-summary__answer:has(.navds-form-summary__answer):last-child {
+  padding-bottom: 0;
+}
+
+@media (max-width: 479px) {
+  .navds-form-summary__answer:not(:last-child) {
+    margin-bottom: var(--a-spacing-3);
+    padding-bottom: var(--a-spacing-3);
+  }
+
+  .navds-form-summary__answer:has(.navds-form-summary__answer) {
+    padding-bottom: var(--a-spacing-5);
+  }
+}
+
+.navds-form-summary__value:first-of-type {
+  margin-top: var(--a-spacing-1);
+}
+
+.navds-form-summary__value :where(.navds-form-summary__answers) {
+  margin-top: var(--a-spacing-2);
+  padding: var(--a-spacing-4);
+  background: var(--a-surface-selected);
+  border-radius: var(--a-border-radius-large);
+}

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

@@ -0,0 +1,61 @@
+[data-theme="dark"] {
+  --__ac-form-description: var(--a-text-on-inverted);
+}
+
+[data-theme="light"] {
+  --__ac-form-description: initial;
+}
+
+.navds-form-field {
+  display: grid;
+  justify-items: start;
+  gap: var(--a-spacing-2);
+}
+
+.navds-form-field__description {
+  margin-top: -0.375rem;
+  color: var(--ac-form-description, var(--__ac-form-description, var(--a-text-subtle)));
+}
+
+.navds-form-field .navds-error-message,
+.navds-fieldset .navds-error-message,
+.navds-file-item .navds-error-message {
+  display: flex;
+  gap: var(--a-spacing-2);
+}
+
+.navds-form-field .navds-error-message::before,
+.navds-fieldset .navds-error-message::before,
+.navds-file-item .navds-error-message::before {
+  content: "•";
+}
+
+.navds-form-field--disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.navds-form-field__error:empty {
+  display: none;
+}
+
+.navds-form-field__subdescription {
+  color: var(--ac-form-subdescription, var(--a-text-subtle));
+}
+
+.navds-form-field--readonly > :where(.navds-form-field__label) {
+  display: inline-flex;
+}
+
+.navds-form-field__readonly-icon {
+  margin-top: var(--a-spacing-05);
+  margin-right: var(--a-spacing-2);
+  flex-shrink: 0;
+  align-self: flex-start;
+}
+
+@media (forced-colors: active) {
+  .navds-form-field--disabled {
+    opacity: 1;
+  }
+}

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

@@ -0,0 +1,16 @@
+@layer aksel.forms.base, aksel.forms.component;
+
+@import "./fieldset.darkside.css" layer(aksel.forms.base);
+@import "./file-upload.darkside.css" layer(aksel.forms.component);
+@import "./form.darkside.css" layer(aksel.forms.component);
+@import "./error-summary.darkside.css" layer(aksel.forms.component);
+@import "./confirmation-panel.darkside.css" layer(aksel.forms.component);
+@import "./radio-checkbox.darkside.css" layer(aksel.forms.component);
+@import "./select.darkside.css" layer(aksel.forms.component);
+@import "./switch.darkside.css" layer(aksel.forms.component);
+@import "./text-field.darkside.css" layer(aksel.forms.component);
+@import "./textarea.darkside.css" layer(aksel.forms.component);
+@import "./search.darkside.css" layer(aksel.forms.component);
+@import "./combobox.darkside.css" layer(aksel.forms.component);
+@import "./form-summary.darkside.css" layer(aksel.forms.component);
+@import "./form-progress.darkside.css" layer(aksel.forms.component);

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

@@ -0,0 +1,356 @@
+.navds-checkbox,
+.navds-radio {
+  position: relative;
+  width: fit-content;
+}
+
+.navds-checkbox__input,
+.navds-radio__input {
+  position: absolute;
+  width: 3rem;
+  height: 3rem;
+  top: 0;
+  left: -0.75rem;
+  z-index: 1;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.navds-checkbox__label,
+.navds-radio__label {
+  padding: var(--a-spacing-3) 0;
+  cursor: pointer;
+  display: flex;
+  gap: var(--a-spacing-2);
+
+  --__ac-radio-checkbox-readonly-bg: var(--a-surface-subtle);
+  --__ac-radio-checkbox-readonly-border: var(--a-border-subtle);
+}
+
+.navds-checkbox__label::before,
+.navds-radio__label::before {
+  content: "";
+  background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
+  border-radius: var(--a-border-radius-small);
+  flex-shrink: 0;
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default));
+  width: calc(1.5rem - 0.25rem);
+  height: calc(1.5rem - 0.25rem);
+  margin-block: 2px;
+  margin-inline: 2px;
+}
+
+.navds-radio__label::before {
+  border-radius: var(--a-border-radius-full);
+}
+
+.navds-checkbox__content,
+.navds-radio__content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.navds-checkbox--small > .navds-checkbox__input,
+.navds-radio--small > .navds-radio__input {
+  width: 2rem;
+  height: 2rem;
+  top: 0;
+  left: -0.375rem;
+}
+
+.navds-checkbox--small > .navds-checkbox__label,
+.navds-radio--small > .navds-radio__label {
+  padding: var(--a-spacing-1-alt) 0;
+}
+
+.navds-checkbox--small > .navds-checkbox__label::before,
+.navds-radio--small > .navds-radio__label::before {
+  width: calc(1.25rem - 0.25rem);
+  height: calc(1.25rem - 0.25rem);
+}
+
+.navds-checkbox__input:focus + .navds-checkbox__label::before,
+.navds-radio__input:focus + .navds-radio__label::before {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow:
+    0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)),
+    0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
+    0 0 0 4px var(--a-border-focus);
+}
+
+.navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
+.navds-radio__input:hover:focus + .navds-radio__label::before {
+  box-shadow:
+    0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover)),
+    0 0 0 4px var(--a-border-focus);
+}
+
+.navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  transform: translate(var(--a-spacing-1-alt), -50%);
+  background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
+  width: 0.75rem;
+  height: 0.25rem;
+  border-radius: 1px;
+  flex-shrink: 0;
+}
+
+.navds-checkbox--small .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+  transform: translate(0.25rem, -50%);
+}
+
+.navds-checkbox__input:where(:checked, :indeterminate) + .navds-checkbox__label::before {
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected));
+  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action-selected));
+}
+
+.navds-checkbox__input:where(:checked, :indeterminate):hover + .navds-checkbox__label::before {
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected-hover));
+  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action-selected-hover));
+}
+
+.navds-checkbox__input:where(:not(:checked)) + .navds-checkbox__label > .navds-checkbox__icon {
+  display: none;
+}
+
+.navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
+  color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
+  position: absolute;
+  height: 1.5rem;
+  transform: translate(var(--a-spacing-1-alt));
+  pointer-events: none;
+
+  /* Fixed edcase where when using in shadow-dom, svg will not center */
+  display: flex;
+  align-items: center;
+}
+
+.navds-checkbox--small .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
+  transform: translate(0.25rem, -10%);
+}
+
+/* Tailwind sets all svg to block */
+.navds-checkbox__icon > svg {
+  display: inline;
+  vertical-align: initial;
+}
+
+.navds-checkbox--small > .navds-checkbox__input:checked + .navds-checkbox__label::before {
+  background-position: 0.25rem center;
+}
+
+.navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
+.navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
+  box-shadow:
+    0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
+    0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
+    0 0 0 4px var(--a-border-focus);
+}
+
+.navds-radio__input:checked + .navds-radio__label::before {
+  box-shadow:
+    0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
+    inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default));
+  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action-selected));
+}
+
+.navds-radio__input:checked:focus + .navds-radio__label::before {
+  box-shadow:
+    0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
+    inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
+    0 0 0 4px var(--a-border-focus);
+}
+
+.navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
+.navds-radio__input:hover:not(:disabled) + .navds-radio__label {
+  color: var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
+}
+
+.navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate, :focus) + .navds-checkbox__label::before,
+.navds-radio__input:hover:not(:disabled, :checked, :focus) + .navds-radio__label::before {
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
+}
+
+.navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
+.navds-radio__input:hover:not(:disabled, :checked) + .navds-radio__label::before {
+  background-color: var(--ac-radio-checkbox-action-hover-bg, var(--a-surface-action-subtle));
+}
+
+.navds-checkbox--error > .navds-checkbox__input:not(:hover, :disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
+.navds-radio--error > .navds-radio__input:not(:hover, :disabled, :checked) + .navds-radio__label::before {
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
+}
+
+.navds-checkbox--error
+  > .navds-checkbox__input:focus:not(:hover, :disabled, :checked, :indeterminate)
+  + .navds-checkbox__label::before,
+.navds-radio--error > .navds-radio__input:focus:not(:hover, :disabled, :checked) + .navds-radio__label::before {
+  box-shadow:
+    0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
+    0 0 0 4px var(--a-border-focus);
+}
+
+.navds-checkbox--error
+  > .navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate, :focus)
+  + .navds-checkbox__label::before,
+.navds-radio--error > .navds-radio__input:hover:not(:disabled, :checked, :focus) + .navds-radio__label::before {
+  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
+}
+
+.navds-checkbox--error
+  > .navds-checkbox__input:focus:hover:not(:disabled, :checked, :indeterminate)
+  + .navds-checkbox__label::before,
+.navds-radio--error > .navds-radio__input:focus:hover:not(:disabled, :checked) + .navds-radio__label::before {
+  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
+  box-shadow:
+    0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
+    0 0 0 4px var(--a-border-focus);
+}
+
+.navds-checkbox--disabled,
+.navds-radio--disabled {
+  opacity: 0.3;
+}
+
+.navds-checkbox--disabled > .navds-checkbox__input,
+.navds-checkbox--disabled > .navds-checkbox__label,
+.navds-radio--disabled > .navds-radio__input,
+.navds-radio--disabled > .navds-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) {
+  cursor: default;
+}
+
+.navds-checkbox--readonly .navds-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 {
+  color: var(--a-text-default);
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
+.navds-checkbox--readonly > .navds-checkbox__input:hover:not(:checked, :indeterminate, :focus) + .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 {
+  background-color: var(--__ac-radio-checkbox-readonly-bg);
+  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:focus + .navds-checkbox__label::before,
+.navds-radio--readonly > .navds-radio__input:focus + .navds-radio__label::before {
+  --__ac-radio-checkbox-readonly-border: var(--a-border-subtle), var(--a-shadow-focus);
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label::before {
+  background-color: var(--__ac-radio-checkbox-readonly-bg);
+  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
+  color: var(--a-icon-subtle);
+}
+
+.navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
+  background-color: var(--a-icon-subtle);
+  box-shadow:
+    0 0 0 2px var(--__ac-radio-checkbox-readonly-border),
+    inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-bg);
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
+  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
+  background-color: var(--__ac-radio-checkbox-readonly-bg);
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+  background-color: var(--a-icon-subtle);
+}
+
+@media (forced-colors: active) {
+  .navds-checkbox__input:focus + .navds-checkbox__label::before,
+  .navds-radio__input:focus + .navds-radio__label::before {
+    outline-color: highlight;
+  }
+
+  .navds-checkbox,
+  .navds-radio {
+    --__ac-radio-checkbox-high-contrast-bg: field;
+    --__ac-radio-checkbox-high-contrast-text: fieldtext;
+    --__ac-radio-checkbox-high-contrast-highlight: highlight;
+  }
+
+  .navds-checkbox__label::before,
+  .navds-radio__label::before {
+    border: 1px solid var(--__ac-radio-checkbox-high-contrast-text);
+    background-color: var(--__ac-radio-checkbox-high-contrast-bg);
+  }
+
+  .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
+    color: var(--__ac-radio-checkbox-high-contrast-text);
+  }
+
+  .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+    background-color: var(--__ac-radio-checkbox-high-contrast-text);
+  }
+
+  .navds-radio__input:checked + .navds-radio__label::before {
+    border: 1px solid var(--__ac-radio-checkbox-high-contrast-text);
+    outline: 3px solid var(--__ac-radio-checkbox-high-contrast-bg);
+    outline-offset: -4px;
+    background-color: var(--__ac-radio-checkbox-high-contrast-text);
+  }
+
+  .navds-radio__input:checked:focus + .navds-radio__label::before {
+    border: 1px solid var(--__ac-radio-checkbox-high-contrast-bg);
+    outline: 2px solid highlight;
+    outline-offset: 2px;
+  }
+
+  :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 {
+    color: highlight;
+  }
+
+  .navds-checkbox__input:focus + .navds-checkbox__label::before {
+    outline: 2px solid var(--__ac-radio-checkbox-high-contrast-highlight);
+  }
+
+  .navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label::before {
+    border: 1px solid var(--__ac-radio-checkbox-high-contrast-text);
+    background-color: var(--__ac-radio-checkbox-high-contrast-bg);
+  }
+
+  .navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+    background-color: var(--__ac-radio-checkbox-high-contrast-text);
+  }
+
+  .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
+    border: 1px solid var(--__ac-radio-checkbox-high-contrast-text);
+    outline: 3px solid var(--__ac-radio-checkbox-high-contrast-bg);
+    outline-offset: -4px;
+    background-color: var(--__ac-radio-checkbox-high-contrast-text);
+  }
+
+  .navds-checkbox--disabled,
+  .navds-radio--disabled {
+    opacity: 1;
+
+    --__ac-radio-checkbox-high-contrast-bg: field;
+    --__ac-radio-checkbox-high-contrast-text: graytext;
+  }
+
+  :is(.navds-checkbox--disabled, .navds-radio--disabled) :is(.navds-checkbox__label, .navds-radio__label) {
+    color: graytext;
+  }
+}

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

@@ -0,0 +1,228 @@
+[data-theme="dark"] {
+  --__ac-search-button-border: var(--a-border-on-inverted);
+  --__ac-search-button-border-hover: var(--a-blue-200);
+  --__ac-search-clear-icon: var(--a-white);
+  --__ac-search-clear-icon-hover: var(--a-blue-200);
+  --__ac-search-error-border: var(--a-red-300);
+}
+
+[data-theme="light"] {
+  --__ac-search-button-border: initial;
+  --__ac-search-button-border-hover: initial;
+  --__ac-search-clear-icon: initial;
+  --__ac-search-clear-icon-hover: initial;
+  --__ac-search-error-border: initial;
+}
+
+.navds-search {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.navds-search__wrapper-inner {
+  position: relative;
+  width: 100%;
+}
+
+.navds-search--with-size :where(.navds-search__wrapper-inner) {
+  width: inherit;
+}
+
+.navds-search__wrapper {
+  display: inline-flex;
+  align-items: center;
+}
+
+.navds-search__input {
+  padding-right: var(--a-spacing-10);
+}
+
+.navds-form-field--small .navds-search__input {
+  padding-right: var(--a-spacing-8);
+}
+
+.navds-search__input--simple {
+  padding-left: var(--a-spacing-11);
+}
+
+.navds-form-field--small .navds-search__input--simple {
+  padding-left: var(--a-spacing-7);
+}
+
+.navds-search__input:not(.navds-search__input--simple) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.navds-search__search-icon {
+  position: absolute;
+  left: var(--a-spacing-3);
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  font-size: 1.5rem;
+}
+
+.navds-form-field--small .navds-search__search-icon {
+  left: var(--a-spacing-2);
+  font-size: 1rem;
+}
+
+.navds-search__button-clear {
+  position: absolute;
+  right: 0.75rem;
+  border-radius: var(--a-border-radius-medium);
+  color: var(--ac-search-clear-icon, var(--__ac-search-clear-icon, var(--a-text-default)));
+  height: 32px;
+  width: 32px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  background: none;
+  border: none;
+  font-size: 1.25rem;
+  padding: 0;
+}
+
+.navds-form-field--small .navds-search__button-clear {
+  right: 0.5rem;
+  height: 24px;
+  width: 24px;
+}
+
+.navds-search__button-clear:hover {
+  color: var(--ac-search-clear-icon-hover, var(--__ac-search-clear-icon-hover, var(--a-text-action-hover)));
+}
+
+.navds-search__button-clear:focus-visible {
+  outline: 2px solid transparent;
+  box-shadow: var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-search__button-clear:focus {
+    outline: 2px solid transparent;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
+.navds-search__button-search {
+  flex-shrink: 0;
+  min-width: 4rem;
+  min-height: 2rem;
+  border-radius: 0;
+  border-top-right-radius: var(--a-border-radius-medium);
+  border-bottom-right-radius: var(--a-border-radius-medium);
+}
+
+.navds-form-field--small .navds-search__button-search svg {
+  font-size: 1rem;
+}
+
+.navds-form-field--small .navds-search__button-search {
+  min-width: 2.5rem;
+}
+
+.navds-search__button-search.navds-button--secondary {
+  box-shadow:
+    -1px 0 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
+    0 1px 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
+    0 -1px 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset;
+}
+
+.navds-search__button-search.navds-button--secondary:where(:hover, :active) {
+  box-shadow:
+    -1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
+    0 1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
+    0 -1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
+    -1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover)));
+  z-index: 1;
+}
+
+.navds-search__wrapper-inner:focus-within + .navds-search__button-search.navds-button--secondary:hover {
+  z-index: auto;
+}
+
+.navds-search__button-search.navds-button--secondary:focus-visible {
+  box-shadow:
+    0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
+    var(--a-shadow-focus);
+}
+
+.navds-search__button-search.navds-button--secondary:focus-visible:hover {
+  box-shadow:
+    0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
+    var(--a-shadow-focus);
+}
+
+.navds-search__button-search.navds-button--secondary:focus-visible:active {
+  box-shadow:
+    0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset,
+    var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-search__button-search.navds-button--secondary:focus {
+    box-shadow:
+      0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
+      var(--a-shadow-focus);
+  }
+
+  .navds-search__button-search.navds-button--secondary:focus:hover {
+    box-shadow:
+      0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
+      var(--a-shadow-focus);
+  }
+
+  .navds-search__button-search.navds-button--secondary:focus:active {
+    box-shadow:
+      0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset,
+      var(--a-shadow-focus);
+  }
+}
+
+/* Error-handling */
+.navds-search--error .navds-search__input:not(:hover, :disabled) {
+  border-color: var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger)));
+  box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger)));
+}
+
+.navds-search--error .navds-search__input:focus-visible:not(:hover, :disabled) {
+  box-shadow:
+    inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
+    var(--a-shadow-focus);
+}
+
+/* Focus layering */
+.navds-search__input:focus-visible,
+.navds-search__button-clear,
+.navds-search__button-search:focus-visible {
+  z-index: 1;
+}
+
+@supports not selector(:focus-visible) {
+  .navds-search--error .navds-search__input:focus:not(:hover, :disabled) {
+    box-shadow:
+      inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
+      var(--a-shadow-focus);
+  }
+
+  .navds-search__input:focus,
+  .navds-search__button-search:focus {
+    z-index: 1;
+  }
+}
+
+@media (forced-colors: active) {
+  .navds-modal {
+    outline: 2px solid transparent;
+  }
+
+  .navds-search__button-clear:hover {
+    color: highlight;
+  }
+}

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

@@ -0,0 +1,115 @@
+.navds-select__input {
+  appearance: none;
+  background-color: var(--ac-select-bg, var(--a-surface-default));
+  border-radius: var(--a-border-radius-medium);
+  border: 1px solid var(--ac-select-border, var(--a-border-default));
+  color: var(--ac-select-text, var(--a-text-default));
+  width: 100%;
+  box-sizing: border-box;
+  min-height: 3rem;
+  display: inline-block;
+  position: relative;
+  padding: 0.5rem;
+  padding-right: 2rem;
+}
+
+@media (forced-colors: active) {
+  .navds-select__input.navds-select__input.navds-select__input {
+    background-color: ButtonFace;
+    border-color: ButtonText;
+    color: ButtonText;
+    forced-color-adjust: none;
+    box-shadow: none;
+  }
+
+  .navds-select__input.navds-select__input.navds-select__input:focus-visible {
+    outline: 2px solid highlight;
+    outline-offset: 2px;
+  }
+}
+
+.navds-select__input:hover {
+  border-color: var(--ac-select-hover-border, var(--a-border-action-hover));
+  cursor: pointer;
+}
+
+.navds-select__input:focus-visible {
+  outline: none;
+  border-color: var(--ac-select-active-border, var(--a-border-action-selected));
+  box-shadow: var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-select__input:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
+.navds-select__container {
+  position: relative;
+  display: flex;
+  width: 100%;
+  color: var(--a-text-default);
+}
+
+.navds-select__chevron {
+  position: absolute;
+  font-size: 1.5rem;
+  right: var(--a-spacing-2);
+  pointer-events: none;
+  align-self: center;
+  color: var(--ac-select-text, var(--a-text-default));
+}
+
+@media (forced-colors: active) {
+  .navds-select__chevron {
+    color: ButtonText;
+  }
+}
+
+.navds-form-field--small .navds-select__input {
+  min-height: 2rem;
+  padding: 0 var(--a-spacing-8) 0 var(--a-spacing-2);
+}
+
+.navds-form-field--small .navds-select__chevron {
+  right: var(--a-spacing-1-alt);
+}
+
+/**
+  Error handling
+*/
+.navds-select--error > * select:not(:hover, :focus, :disabled) {
+  box-shadow: 0 0 0 1px var(--ac-select-error-border, var(--a-surface-danger));
+  border-color: var(--ac-select-error-border, var(--a-surface-danger));
+}
+
+/**
+  Disabled
+*/
+.navds-select__input:disabled {
+  background-color: var(--ac-select-bg, var(--a-surface-default));
+  border: 1px solid var(--ac-select-border, var(--a-border-default));
+  box-shadow: none;
+  cursor: not-allowed;
+
+  /* Chrome-fix */
+  opacity: 1;
+  color: var(--a-text-default);
+}
+
+/* Chrome-fix */
+.navds-select__input:disabled > option {
+  color: var(--a-text-default);
+}
+
+.navds-select--readonly .navds-select__input {
+  background-color: var(--a-surface-subtle);
+  border-color: var(--a-border-subtle);
+  cursor: default;
+}
+
+.navds-select--readonly .navds-select__chevron {
+  color: var(--a-gray-500);
+}

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

@@ -0,0 +1,269 @@
+.navds-switch {
+  position: relative;
+  min-height: 3rem;
+  width: fit-content;
+}
+
+.navds-switch--right {
+  width: auto;
+}
+
+.navds-switch--small {
+  position: relative;
+  min-height: 2rem;
+}
+
+/* Input */
+.navds-switch__input {
+  cursor: pointer;
+  position: absolute;
+  z-index: 1;
+  width: 3rem;
+  height: 3rem;
+  opacity: 0;
+  top: 0;
+}
+
+.navds-switch--small > .navds-switch__input {
+  height: 2rem;
+  top: 0;
+}
+
+/* Label */
+.navds-switch__label-wrapper {
+  cursor: pointer;
+  color: var(--a-text-default);
+}
+
+.navds-switch__content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  padding: 0.75rem 0 0.75rem 3.25rem;
+}
+
+.navds-switch--right > .navds-switch__label-wrapper > .navds-switch__content {
+  padding: 0.75rem 3.25rem 0.75rem 0;
+}
+
+.navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
+  padding: calc(var(--a-spacing-2) - var(--a-spacing-05)) 0 calc(var(--a-spacing-2) - var(--a-spacing-05)) 3.25rem;
+}
+
+.navds-switch--right.navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
+  padding: calc(var(--a-spacing-2) - var(--a-spacing-05)) 3.25rem calc(var(--a-spacing-2) - var(--a-spacing-05)) 0;
+}
+
+.navds-switch--with-description,
+.navds-switch--small > .navds-switch__label-wrapper > .navds-switch--with-description {
+  padding-bottom: 0;
+}
+
+.navds-switch__input:hover ~ .navds-switch__label-wrapper,
+.navds-switch__label-wrapper:hover {
+  color: var(--ac-switch-action, var(--a-surface-action-selected));
+}
+
+.navds-switch__input:disabled:hover ~ .navds-switch__label-wrapper {
+  color: inherit;
+}
+
+/* Track */
+.navds-switch__track {
+  width: 2.75rem;
+  height: 1.5rem;
+  background-color: var(--ac-switch-bg, var(--a-surface-neutral));
+  position: absolute;
+  top: var(--a-spacing-3);
+  left: 0;
+  border-radius: var(--a-border-radius-full);
+  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.navds-switch--small > .navds-switch__track {
+  top: var(--a-spacing-1);
+}
+
+.navds-switch--right > .navds-switch__input,
+.navds-switch--right > .navds-switch__track {
+  right: 0;
+  left: auto;
+}
+
+.navds-switch__input:checked ~ .navds-switch__track {
+  background-color: var(--ac-switch-checked-bg, var(--a-surface-action-selected));
+}
+
+.navds-switch__input:hover ~ .navds-switch__track {
+  background-color: var(--ac-switch-hover-bg, var(--a-surface-neutral-hover));
+}
+
+.navds-switch__input:hover:checked ~ .navds-switch__track {
+  background-color: var(--ac-switch-checked-hover-bg, var(--a-surface-action-selected-hover));
+}
+
+.navds-switch__input:disabled ~ .navds-switch__track {
+  background-color: var(--ac-switch-bg, var(--a-surface-neutral));
+}
+
+.navds-switch__input:checked:disabled ~ .navds-switch__track {
+  background-color: var(--ac-switch-checked-bg, var(--a-border-action-selected));
+}
+
+.navds-switch__input:focus-visible ~ .navds-switch__track {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow:
+    0 0 0 1px var(--a-surface-default),
+    var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-switch__input:focus ~ .navds-switch__track {
+    outline: 2px solid transparent;
+    box-shadow:
+      0 0 0 1px var(--a-surface-default),
+      var(--a-shadow-focus);
+  }
+}
+
+/* Thumb */
+.navds-switch__thumb {
+  background-color: var(--ac-switch-thumb-bg, var(--a-surface-default));
+  color: var(--ac-switch-thumb-icon, var(--a-icon-subtle));
+  border-radius: var(--a-border-radius-full);
+  width: 1.25rem;
+  height: 1.25rem;
+  position: absolute;
+  transform: translateX(0);
+  left: var(--a-spacing-05);
+  top: var(--a-spacing-05);
+  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+  transform: translateX(1.25rem);
+  color: var(--ac-switch-thumb-icon-checked, var(--a-icon-action-selected));
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
+    transform: translateX(0.125rem);
+  }
+
+  .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
+    transform: translateX(1.125rem);
+  }
+}
+
+.navds-switch__input:disabled:hover ~ .navds-switch__track > .navds-switch__thumb {
+  transform: translateX(0);
+}
+
+.navds-switch__input:checked:disabled:hover ~ .navds-switch__track > .navds-switch__thumb {
+  transform: translateX(1.25rem);
+}
+
+/* Disabled */
+.navds-switch__input:disabled {
+  appearance: none;
+}
+
+.navds-switch--disabled:not(.navds-switch--loading) {
+  opacity: 0.3;
+}
+
+.navds-switch__input:disabled,
+.navds-switch__input:disabled ~ .navds-switch__label-wrapper {
+  cursor: not-allowed;
+}
+
+/* Readonly */
+.navds-switch--readonly > .navds-switch__track,
+.navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__track,
+.navds-switch--readonly > .navds-switch__input:checked ~ .navds-switch__track,
+.navds-switch--readonly > .navds-switch__input:checked:hover ~ .navds-switch__track {
+  background-color: var(--a-surface-neutral-moderate);
+}
+
+.navds-switch--readonly > .navds-switch__label-wrapper,
+.navds-switch--readonly > .navds-switch__input {
+  cursor: default;
+}
+
+.navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__label-wrapper,
+.navds-switch--readonly .navds-switch__label-wrapper:hover {
+  color: var(--a-text-default);
+}
+
+.navds-switch--readonly .navds-switch__label {
+  display: inline-flex;
+}
+
+.navds-switch--readonly .navds-switch__thumb {
+  background-color: var(--a-surface-subtle);
+  box-shadow: 0 0 0 2px var(--a-border-default);
+}
+
+.navds-switch--readonly > .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+  color: var(--a-icon-subtle);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
+    transform: translateX(0);
+  }
+
+  .navds-switch--readonly > .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
+    transform: translateX(1.25rem);
+  }
+}
+
+@media (forced-colors: active) {
+  .navds-switch__input:hover ~ .navds-switch__label-wrapper,
+  .navds-switch__label-wrapper:hover {
+    color: highlight;
+  }
+
+  .navds-switch__thumb,
+  .navds-switch--readonly .navds-switch__thumb {
+    background-color: fieldtext;
+  }
+
+  .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb,
+  .navds-switch--readonly .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+    color: field;
+  }
+
+  .navds-switch__track {
+    width: calc(2.75rem + 4px);
+    height: calc(1.5rem + 4px);
+    top: var(--a-spacing-3);
+    border: 2px solid fieldtext;
+  }
+
+  .navds-switch__input:focus-visible ~ .navds-switch__track {
+    outline: 2px solid highlight;
+    outline-offset: 2px;
+  }
+
+  .navds-switch--disabled:not(.navds-switch--loading) {
+    opacity: 1;
+  }
+
+  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__thumb {
+    background-color: graytext;
+  }
+
+  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__track {
+    border-color: graytext;
+  }
+
+  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__label-wrapper,
+  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__label-wrapper:hover {
+    color: graytext !important;
+  }
+}

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

@@ -0,0 +1,112 @@
+[data-theme="dark"] {
+  --__ac-textfield-text: var(--a-text-on-inverted);
+  --__ac-textfield-bg: var(--a-surface-inverted);
+  --__ac-textfield-border: var(--a-border-on-inverted);
+  --__ac-textfield-hover-border: var(--a-blue-200);
+  --__ac-textfield-placeholder: var(--a-gray-500);
+  --__ac-textfield-error-border: var(--a-red-300);
+}
+
+[data-theme="light"] {
+  --__ac-textfield-text: initial;
+  --__ac-textfield-bg: initial;
+  --__ac-textfield-border: initial;
+  --__ac-textfield-hover-border: initial;
+  --__ac-textfield-placeholder: initial;
+  --__ac-textfield-error-border: initial;
+}
+
+.navds-text-field__input {
+  appearance: none;
+  padding: var(--a-spacing-2);
+  background-color: var(--ac-textfield-bg, var(--__ac-textfield-bg, var(--a-surface-default)));
+  border-radius: var(--a-border-radius-medium);
+  border: 1px solid var(--ac-textfield-border, var(--__ac-textfield-border, var(--a-border-default)));
+  min-height: 3rem;
+  width: 100%;
+  color: var(--ac-textfield-text, var(--__ac-textfield-text, var(--a-text-default)));
+}
+
+.navds-text-field__input[size] {
+  width: auto;
+}
+
+.navds-text-field__input::placeholder {
+  color: var(--ac-textfield-placeholder, var(--__ac-textfield-placeholder, var(--a-text-subtle)));
+}
+
+.navds-form-field--small .navds-text-field__input {
+  padding: 0 var(--a-spacing-2);
+  min-height: 2rem;
+}
+
+.navds-text-field__input:hover {
+  border-color: var(--ac-textfield-hover-border, var(--__ac-textfield-hover-border, var(--a-border-action-hover)));
+}
+
+.navds-text-field__input:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: var(--a-shadow-focus);
+  border-color: var(--ac-textfield-active-border, var(--a-border-action-selected));
+}
+
+@supports not selector(:focus-visible) {
+  .navds-text-field__input:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
+/**
+  Error handling
+*/
+.navds-text-field--error > .navds-text-field__input:not(:hover, :disabled) {
+  border-color: var(--ac-textfield-error-border, var(--__ac-textfield-error-border, var(--a-border-danger)));
+  box-shadow: 0 0 0 1px var(--ac-textfield-error-border, var(--__ac-textfield-error-border, var(--a-border-danger)));
+}
+
+.navds-text-field--error > .navds-text-field__input:focus-visible:not(:hover, :disabled) {
+  box-shadow:
+    0 0 0 1px var(--a-border-danger),
+    var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-text-field--error > .navds-text-field__input:focus:not(:hover, :disabled) {
+    box-shadow:
+      0 0 0 1px var(--a-border-danger),
+      var(--a-shadow-focus);
+  }
+}
+
+/* Disabled handling */
+.navds-text-field__input:disabled {
+  background-color: var(--ac-textfield-bg, var(--__ac-textfield-bg, var(--a-surface-default)));
+  border-color: var(--ac-textfield-border, var(--__ac-textfield-border, var(--a-border-default)));
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
+.navds-text-field--readonly .navds-text-field__input {
+  background-color: var(--a-surface-subtle);
+  border-color: var(--a-border-subtle);
+  cursor: default;
+}
+
+/**
+  * Removes default search icon
+  */
+.navds-text-field__input[type="search"]::-webkit-search-decoration,
+.navds-text-field__input[type="search"]::-webkit-search-cancel-button,
+.navds-text-field__input[type="search"]::-webkit-search-results-button,
+.navds-text-field__input[type="search"]::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+}
+
+@media (forced-colors: active) {
+  .navds-text-field__input {
+    background-color: field;
+    color: fieldtext;
+  }
+}

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

@@ -0,0 +1,144 @@
+[data-theme="dark"] {
+  --__ac-textarea-text: var(--a-text-on-inverted);
+  --__ac-textarea-bg: var(--a-transparent);
+  --__ac-textarea-border: var(--a-border-on-inverted);
+  --__ac-textarea-hover-border: var(--a-blue-200);
+  --__ac-textarea-placeholder: var(--a-gray-500);
+  --__ac-textarea-error-border: var(--a-red-300);
+  --__ac-textarea-counter-text: var(--a-gray-300);
+  --__ac-textarea-counter-error-text: var(--a-red-300);
+}
+
+[data-theme="light"] {
+  --__ac-textarea-text: initial;
+  --__ac-textarea-bg: initial;
+  --__ac-textarea-border: initial;
+  --__ac-textarea-hover-border: initial;
+  --__ac-textarea-placeholder: initial;
+  --__ac-textarea-error-border: initial;
+  --__ac-textarea-counter-text: initial;
+  --__ac-textarea-counter-error-text: initial;
+}
+
+.navds-textarea__input {
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+  height: var(--__ac-textarea-height);
+  appearance: none;
+  padding: var(--a-spacing-2);
+  background-color: var(--ac-textarea-bg, var(--__ac-textarea-bg, var(--a-surface-default)));
+  border-radius: var(--a-border-radius-medium);
+  border: 1px solid var(--ac-textarea-border, var(--__ac-textarea-border, var(--a-border-default)));
+  resize: none;
+  width: 100%;
+  display: block;
+  color: var(--ac-textarea-text, var(--__ac-textarea-text, var(--a-text-default)));
+}
+
+.navds-textarea__input::placeholder {
+  color: var(--ac-textarea-placeholder, var(--__ac-textarea-placeholder, var(--a-text-subtle)));
+}
+
+.navds-textarea__input:hover {
+  border-color: var(--ac-textarea-hover-border, var(--__ac-textarea-hover-border, var(--a-border-action-hover)));
+}
+
+.navds-textarea__input:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: var(--a-shadow-focus);
+  border-color: var(--ac-textarea-active-border, var(--a-border-action-selected));
+}
+
+@supports not selector(:focus-visible) {
+  .navds-textarea__input:focus {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
+.navds-form-field--small .navds-textarea__input {
+  padding: var(--a-spacing-1-alt);
+}
+
+.navds-textarea__counter {
+  margin-top: -0.375rem;
+  color: var(--ac-textarea-counter-text, var(--__ac-textarea-counter-text, var(--a-text-subtle)));
+}
+
+.navds-textarea__counter--error {
+  color: var(--ac-textarea-counter-error-text, var(--__ac-textarea-counter-error-text, var(--a-text-danger)));
+}
+
+.navds-textarea__sr-counter {
+  display: none;
+}
+
+.navds-textarea__input:focus ~ .navds-textarea__sr-counter {
+  display: initial;
+}
+
+.navds-textarea--resize-both .navds-textarea__input {
+  resize: both;
+  border-end-end-radius: 0;
+}
+
+.navds-textarea--resize-horizontal .navds-textarea__input {
+  resize: horizontal;
+  border-end-end-radius: 0;
+}
+
+.navds-textarea--resize-vertical .navds-textarea__input {
+  resize: vertical;
+  border-end-end-radius: 0;
+}
+
+.navds-textarea--autoscrollbar,
+.navds-textarea--autoscrollbar .navds-textarea__wrapper {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  /* Makes the box-shadow visible even though overflow is hidden: */
+  padding: 3px;
+  margin: -3px;
+}
+
+.navds-textarea--autoscrollbar .navds-textarea__input {
+  scrollbar-gutter: stable; /* Needed to prevent scrollbar from appearing too early */
+}
+
+/**
+  Error handling
+*/
+.navds-textarea--error .navds-textarea__input:not(:hover, :focus-visible, :disabled) {
+  box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
+  border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
+}
+
+@supports not selector(:focus-visible) {
+  .navds-textarea--error .navds-textarea__input:not(:hover, :focus, :disabled) {
+    box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
+    border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
+  }
+}
+
+.navds-textarea__input:disabled {
+  background-color: var(--ac-textarea-bg, var(--__ac-textarea-bg, var(--a-surface-default)));
+  border-color: var(--ac-textarea-border, var(--__ac-textarea-border, var(--a-border-default)));
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
+.navds-textarea--readonly .navds-textarea__input {
+  background-color: var(--a-surface-subtle);
+  border-color: var(--a-border-subtle);
+  cursor: default;
+}
+
+@media (forced-colors: active) {
+  .navds-textarea__input {
+    background-color: field;
+    color: fieldtext;
+  }
+}

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

@@ -0,0 +1,96 @@
+.navds-guide-panel {
+  --__ac-guide-panel-guide-size: 4rem;
+
+  position: relative;
+  padding-top: calc(var(--__ac-guide-panel-guide-size) / 2);
+}
+
+.navds-guide {
+  background: var(--ac-guide-panel-illustration-bg, var(--a-surface-alt-3-subtle));
+  border: 2px solid var(--ac-guide-panel-border, var(--a-border-alt-3));
+  border-radius: var(--a-border-radius-full);
+  overflow: hidden;
+  position: absolute;
+  width: var(--__ac-guide-panel-guide-size);
+  height: var(--__ac-guide-panel-guide-size);
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.navds-guide svg,
+.navds-guide img {
+  height: 100%;
+  width: 100%;
+}
+
+.navds-guide-panel__content {
+  background-color: var(--ac-guide-panel-bg, var(--a-surface-default));
+  border: 2px solid var(--ac-guide-panel-border, var(--a-border-alt-3));
+  border-radius: var(--a-border-radius-large);
+  padding: var(--a-spacing-4);
+  padding-top: var(--a-spacing-12);
+}
+
+@media (min-width: 480px) {
+  .navds-guide-panel {
+    --__ac-guide-panel-guide-size: 6.25rem;
+  }
+
+  .navds-guide-panel__content {
+    padding: var(--a-spacing-8);
+    padding-top: 4.25rem;
+  }
+}
+
+/* not-poster */
+
+.navds-guide-panel--not-poster {
+  padding-top: 0;
+  padding-left: calc(var(--__ac-guide-panel-guide-size) / 2);
+}
+
+.navds-guide-panel--not-poster .navds-guide {
+  left: 0;
+  top: var(--a-spacing-5);
+  transform: none;
+}
+
+.navds-guide-panel--not-poster .navds-guide-panel__content {
+  padding: var(--a-spacing-4);
+  padding-left: var(--a-spacing-10);
+  min-height: calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5));
+}
+
+@media (min-width: 480px) {
+  .navds-guide-panel--not-poster {
+    --__ac-guide-panel-guide-size: 5rem;
+  }
+
+  .navds-guide-panel--not-poster .navds-guide-panel__content {
+    padding: var(--a-spacing-6);
+    padding-left: var(--a-spacing-14);
+  }
+}
+
+/* responsive-poster (on desktop) */
+
+@media (min-width: 480px) {
+  .navds-guide-panel--responsive-poster {
+    --__ac-guide-panel-guide-size: 5rem;
+
+    padding-top: 0;
+    padding-left: calc(var(--__ac-guide-panel-guide-size) / 2);
+  }
+
+  .navds-guide-panel--responsive-poster .navds-guide {
+    left: 0;
+    top: var(--a-spacing-5);
+    transform: none;
+  }
+
+  .navds-guide-panel--responsive-poster .navds-guide-panel__content {
+    padding: var(--a-spacing-6);
+    padding-left: var(--a-spacing-14);
+    min-height: calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5));
+  }
+}

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

@@ -0,0 +1,85 @@
+.navds-help-text__button {
+  margin: 0;
+  border: 0;
+  cursor: pointer;
+  background-color: transparent;
+  border-radius: var(--a-border-radius-full);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--ac-help-text-button-color, var(--a-surface-action));
+  font-size: 1.25rem;
+  padding: calc(var(--a-spacing-1) / 2);
+}
+
+.navds-help-text__button:focus-visible {
+  outline: 2px solid transparent;
+  box-shadow:
+    0 0 0 1px var(--a-border-focus),
+    inset 0 0 0 1px var(--a-border-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-help-text__button:focus {
+    outline: 2px solid transparent;
+    box-shadow:
+      0 0 0 1px var(--a-border-focus),
+      inset 0 0 0 1px var(--a-border-focus);
+  }
+}
+
+.navds-help-text__icon {
+  border-radius: var(--a-border-radius-full);
+}
+
+.navds-help-text__popover > .navds-popover__arrow {
+  background-color: var(--ac-help-text-popover-bg, var(--a-surface-info-subtle));
+}
+
+.navds-help-text__popover.navds-popover {
+  background-color: var(--ac-help-text-popover-bg, var(--a-surface-info-subtle));
+  max-width: min(65ch, calc(100vw - 1.5rem));
+
+  --ac-popover-border: var(--a-border-info);
+}
+
+.navds-help-text__icon--filled {
+  display: none;
+}
+
+.navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon {
+  display: none;
+}
+
+.navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon--filled {
+  display: inherit;
+  color: var(--ac-help-text-button-hover-color, var(--a-surface-action-hover));
+}
+
+.navds-help-text__button[aria-expanded="true"] > .navds-help-text__icon--filled {
+  color: var(--ac-help-text-button-active-color, var(--a-surface-action-active));
+}
+
+@supports not selector(:focus-visible) {
+  .navds-help-text__button:where(:focus) > .navds-help-text__icon {
+    display: none;
+  }
+
+  .navds-help-text__button:where(:focus) > .navds-help-text__icon--filled {
+    display: inherit;
+  }
+}
+
+@media (forced-colors: active) {
+  .navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon {
+    display: inherit;
+  }
+
+  .navds-help-text__button:hover > .navds-help-text__icon {
+    color: highlight;
+  }
+
+  .navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon--filled {
+    display: none;
+  }
+}

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

@@ -0,0 +1,37 @@
+@charset "UTF-8";
+
+@import "baseline/index.css";
+@import "typography.css";
+@import "accordion.css";
+@import "alert.css";
+@import "button.css";
+@import "chat.css";
+@import "chips.css";
+@import "copybutton.css";
+@import "dropdown.css";
+@import "action-menu.css";
+@import "expansioncard.css";
+@import "guide-panel.css";
+@import "form/index.css";
+@import "help-text.css";
+@import "internalheader.css";
+@import "link.css";
+@import "loader.css";
+@import "modal.css";
+@import "pagination.css";
+@import "popover.css";
+@import "date.css";
+@import "tag.css";
+@import "timeline.css";
+@import "tooltip.css";
+@import "toggle-group.css";
+@import "panel.css";
+@import "link-panel.css";
+@import "read-more.css";
+@import "progress-bar.css";
+@import "skeleton.css";
+@import "stepper.css";
+@import "table.css";
+@import "tabs.css";
+@import "list.css";
+@import "primitives/index.css";

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

@@ -0,0 +1,52 @@
+@charset "UTF-8";
+
+@layer aksel.reset, aksel.typography, aksel.theme, aksel.forms, aksel.components, aksel.layout, aksel.utilities;
+
+/* CSS foundations */
+@import "./baseline/reset.darkside.css" layer(aksel.reset);
+@import "./baseline/print.darkside.css" layer(aksel.reset);
+@import "./baseline/fonts.darkside.css" layer(aksel.typography);
+@import "./baseline/theme.darkside.css" layer(aksel.theme);
+@import "./typography.darkside.css" layer(aksel.typography);
+@import "./baseline/utilities.darkside.css" layer(aksel.utilities);
+
+/* Test: Handles layers itself */
+@import "./form/index.css";
+@import "./primitives/index.css";
+
+/* Theming */
+@import "@navikt/ds-tokens/dist/darkside/tokens.css" layer(aksel.theme);
+
+/* Components */
+@import "../primitives/stack.css" layer(aksel.components);
+@import "./accordion.darkside.css" layer(aksel.components);
+@import "./button.darkside.css" layer(aksel.components);
+@import "./alert.darkside.css" layer(aksel.components);
+@import "./chat.darkside.css" layer(aksel.components);
+@import "./chips.darkside.css" layer(aksel.components);
+@import "./copybutton.darkside.css" layer(aksel.components);
+@import "./dropdown.darkside.css" layer(aksel.components);
+@import "./action-menu.darkside.css" layer(aksel.components);
+@import "./expansioncard.darkside.css" layer(aksel.components);
+@import "./guide-panel.darkside.css" layer(aksel.components);
+@import "./help-text.darkside.css" layer(aksel.components);
+@import "./internalheader.darkside.css" layer(aksel.components);
+@import "./link.darkside.css" layer(aksel.components);
+@import "./loader.darkside.css" layer(aksel.components);
+@import "./modal.darkside.css" layer(aksel.components);
+@import "./pagination.darkside.css" layer(aksel.components);
+@import "./popover.darkside.css" layer(aksel.components);
+@import "./date.darkside.css" layer(aksel.components);
+@import "./tag.darkside.css" layer(aksel.components);
+@import "./timeline.darkside.css" layer(aksel.components);
+@import "./tooltip.darkside.css" layer(aksel.components);
+@import "./toggle-group.darkside.css" layer(aksel.components);
+@import "./panel.darkside.css" layer(aksel.components);
+@import "./link-panel.darkside.css" layer(aksel.components);
+@import "./read-more.darkside.css" layer(aksel.components);
+@import "./progress-bar.darkside.css" layer(aksel.components);
+@import "./skeleton.darkside.css" layer(aksel.components);
+@import "./stepper.darkside.css" layer(aksel.components);
+@import "./table.darkside.css" layer(aksel.components);
+@import "./tabs.darkside.css" layer(aksel.components);
+@import "./list.darkside.css" layer(aksel.components);

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

@@ -0,0 +1,105 @@
+.navds-internalheader {
+  display: flex;
+  align-self: stretch;
+  background: var(--ac-internalheader-bg, var(--a-surface-inverted));
+  min-height: 3rem;
+
+  --navds-internalheader-focus: inset 0 0 0 2px var(--a-border-focus-on-inverted);
+}
+
+@media (forced-colors: active) {
+  .navds-internalheader {
+    background-color: ButtonFace;
+    border: solid 1px ButtonText;
+    color: ButtonText;
+  }
+
+  .navds-internalheader a:focus-visible {
+    box-shadow: none;
+    outline: 2px solid highlight;
+    outline-offset: 2px;
+  }
+
+  .navds-internalheader .navds-internalheader__button:focus-visible {
+    box-shadow: none;
+    outline: 2px solid highlight;
+    outline-offset: 2px;
+  }
+}
+
+.navds-internalheader__title {
+  border: none;
+  overflow: visible;
+  background: transparent;
+  font: inherit;
+  font-weight: var(--a-font-weight-bold);
+  line-height: normal;
+  text-align: left;
+  padding: 0 var(--a-spacing-5) 0 var(--a-spacing-6);
+  border-right: 1px solid var(--ac-internalheader-divider, var(--a-gray-600));
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  margin: 0;
+  color: var(--ac-internalheader-text, var(--a-text-on-inverted));
+}
+
+button.navds-internalheader__title {
+  cursor: pointer;
+}
+
+.navds-internalheader__user {
+  padding: 0 var(--a-spacing-5);
+  border-left: 1px solid var(--ac-internalheader-divider, var(--a-gray-600));
+  display: flex;
+  align-items: center;
+}
+
+.navds-internalheader__button {
+  border: none;
+  margin: 0;
+  padding: 0 var(--a-spacing-3);
+  overflow: visible;
+  background: transparent;
+  font: inherit;
+  line-height: normal;
+  cursor: pointer;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  justify-self: center;
+  gap: var(--a-spacing-2);
+  border-left: 1px solid var(--ac-internalheader-divider, var(--a-gray-600));
+  color: var(--ac-internalheader-text, var(--a-text-on-inverted));
+}
+
+a.navds-internalheader__title:hover,
+button.navds-internalheader__title:hover,
+.navds-internalheader__button:hover {
+  background-color: var(--ac-internalheader-hover-bg, var(--a-surface-inverted-hover));
+}
+
+.navds-internalheader__title:focus-visible,
+.navds-internalheader__button:focus-visible {
+  box-shadow: var(--navds-internalheader-focus);
+  outline: none;
+}
+
+@supports not selector(:focus-visible) {
+  .navds-internalheader__title:focus,
+  .navds-internalheader__button:focus {
+    box-shadow: var(--navds-internalheader-focus);
+    outline: none;
+  }
+}
+
+a.navds-internalheader__title:active,
+button.navds-internalheader__title:active,
+.navds-internalheader__button:active {
+  background-color: var(--ac-internalheader-active-bg, var(--a-surface-inverted-active));
+}
+
+.navds-internalheader__user-button {
+  padding-left: var(--a-spacing-5);
+  gap: var(--a-spacing-4);
+}

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

@@ -0,0 +1,47 @@
+.navds-link-panel {
+  text-decoration: none;
+  color: var(--ac-link-panel-text, var(--a-text-default));
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--a-spacing-4);
+}
+
+.navds-link-panel:hover .navds-link-panel__title {
+  text-decoration: underline;
+  color: var(--ac-link-panel-hover-text, var(--a-text-action-hover));
+}
+
+.navds-link-panel:hover {
+  box-shadow: var(--a-shadow-small);
+  border-color: var(--ac-link-panel-hover-border, var(--a-border-action-hover));
+}
+
+.navds-link-panel:focus-visible {
+  outline: 3px solid transparent;
+  outline-offset: 2px;
+  box-shadow: var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-link-panel:focus {
+    outline: 3px solid transparent;
+    outline-offset: 2px;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
+.navds-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 {
+  transform: translateX(4px);
+}
+
+.navds-link-panel__description {
+  margin-top: var(--a-spacing-1);
+}

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

@@ -0,0 +1,79 @@
+.navds-link {
+  color: var(--ac-link-text, var(--a-text-action));
+  text-decoration: underline;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--a-spacing-1);
+}
+
+.navds-link.navds-link--inline-text {
+  display: inline;
+}
+
+.navds-link.navds-link--inline-text > svg {
+  /* stylelint-disable-next-line plugin/declaration-block-no-ignored-properties */
+  margin: 0.1em 0.1em -0.1em;
+  transform: translateY(0.05em);
+  display: inline;
+  vertical-align: baseline;
+}
+
+.navds-link:hover {
+  text-decoration: none;
+}
+
+.navds-link.navds-link--remove-underline {
+  text-decoration: none;
+}
+
+.navds-link.navds-link--remove-underline:hover {
+  text-decoration: underline;
+}
+
+.navds-alert .navds-link,
+.navds-confirmation-panel .navds-link {
+  color: var(--a-text-default);
+}
+
+.navds-link:focus-visible {
+  outline: 2px solid transparent;
+  color: var(--ac-link-focus-text, var(--a-text-on-action));
+  text-decoration: none;
+  background-color: var(--ac-link-focus-bg, var(--a-border-focus));
+  box-shadow: 0 0 0 2px var(--ac-link-focus-border, var(--a-border-focus));
+}
+
+@supports not selector(:focus-visible) {
+  .navds-link:focus {
+    outline: 2px solid transparent;
+    color: var(--ac-link-focus-text, var(--a-text-on-action));
+    text-decoration: none;
+    background-color: var(--ac-link-focus-bg, var(--a-border-focus));
+    box-shadow: 0 0 0 2px var(--ac-link-focus-border, var(--a-border-focus));
+  }
+}
+
+.navds-link:active {
+  outline: 2px solid transparent;
+  color: var(--ac-link-active-text, var(--a-text-on-action));
+  text-decoration: none;
+  background-color: var(--ac-link-active-bg, var(--a-border-focus));
+  box-shadow: 0 0 0 2px var(--ac-link-active-border, var(--a-border-focus));
+}
+
+.navds-link svg {
+  color: inherit;
+  flex-shrink: 0;
+}
+
+.navds-link--action {
+  color: var(--ac-link-action-text, var(--a-text-action));
+}
+
+.navds-link--neutral {
+  color: var(--ac-link-neutral-text, var(--a-text-default));
+}
+
+.navds-link--subtle {
+  color: var(--ac-link-subtle-text, var(--a-text-subtle));
+}

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

@@ -0,0 +1,85 @@
+.navds-list ul,
+.navds-list ol {
+  padding: 0;
+  margin-block: var(--a-spacing-4);
+}
+
+.navds-list--small ul,
+.navds-list--small ol {
+  margin-block: var(--a-spacing-3);
+}
+
+.navds-list .navds-list :where(ul, ol) {
+  margin-block: var(--a-spacing-2) 0;
+}
+
+.navds-list ol {
+  list-style: decimal; /* This is the default value, but some frameworks have `ol,ul { list-style:none }` */
+  padding-left: 1.7rem;
+}
+
+.navds-list ol > .navds-list__item {
+  padding-left: 0.3rem;
+}
+
+/* SAFARI HACK START */
+/* stylelint-disable selector-type-no-unknown */
+
+_::-webkit-full-page-media,
+_:future,
+:root .navds-list ol {
+  padding-left: 2.1rem;
+}
+
+_::-webkit-full-page-media,
+_:future,
+:root .navds-list ol .navds-list__item {
+  padding-left: 0;
+}
+
+/* SAFARI HACK END */
+/* stylelint-enable selector-type-no-unknown */
+
+.navds-list__item {
+  margin-block-end: var(--a-spacing-2);
+}
+
+.navds-list__item:last-child {
+  margin-block-end: 0;
+}
+
+.navds-list ul > .navds-list__item {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--a-spacing-2);
+}
+
+.navds-list ol li::marker {
+  font-weight: var(--a-font-weight-bold);
+  color: var(--ac-list-marker-ol-color, var(--ac-list-marker-color, var(--a-icon-default)));
+}
+
+.navds-list__item-marker {
+  width: 1.5rem;
+}
+
+.navds-list ul > li > .navds-list__item-marker {
+  display: flex;
+  align-items: center;
+  height: var(--a-font-line-height-xlarge);
+}
+
+.navds-list--small ul > li > .navds-list__item-marker {
+  height: var(--a-font-line-height-large);
+}
+
+.navds-list__item-marker--bullet {
+  padding-left: 0.8rem;
+  color: var(--ac-list-marker-ul-color, var(--ac-list-marker-color, var(--a-icon-default)));
+}
+
+.navds-list__item-marker--icon {
+  font-size: 1.5rem;
+  justify-content: center;
+  color: var(--ac-list-marker-icon-color, var(--ac-list-marker-color, var(--a-icon-default)));
+}

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

@@ -0,0 +1,119 @@
+.navds-loader {
+  width: 1.5rem;
+  display: inline-block;
+  position: relative;
+  animation: loader-rotate 1.8s linear infinite;
+  stroke-width: 6;
+
+  --ac-loader-background-stroke-width: 5.9;
+}
+
+.navds-loader__foreground {
+  animation: loader-dasharray 1.8s ease-in-out infinite;
+  stroke-dasharray: 80px, 200px;
+  stroke-dashoffset: 0;
+  stroke: var(--ac-loader-stroke, var(--a-border-default));
+}
+
+.navds-loader__background {
+  stroke: var(--ac-loader-stroke-bg, var(--a-surface-active));
+  stroke-width: var(--ac-loader-background-stroke-width);
+}
+
+.navds-loader--neutral .navds-loader__foreground {
+  stroke: var(--ac-loader-neutral-stroke, var(--a-border-default));
+}
+
+.navds-loader--interaction .navds-loader__foreground {
+  stroke: var(--ac-loader-interaction-stroke, var(--a-border-action));
+}
+
+.navds-loader--inverted .navds-loader__foreground {
+  stroke: var(--ac-loader-inverted-stroke, var(--a-border-on-inverted));
+}
+
+.navds-loader--inverted .navds-loader__background {
+  stroke: var(--ac-loader-inverted-stroke-bg, var(--a-border-on-inverted-subtle));
+}
+
+.navds-loader--transparent .navds-loader__background {
+  stroke: var(--a-surface-transparent);
+}
+
+.navds-loader--3xlarge {
+  width: 5.5rem;
+  stroke-width: 5;
+
+  --ac-loader-background-stroke-width: 4.8;
+}
+
+.navds-loader--2xlarge {
+  width: 4rem;
+  stroke-width: 6;
+
+  --ac-loader-background-stroke-width: 5.8;
+}
+
+.navds-loader--xlarge {
+  width: 2.5rem;
+  stroke-width: 6;
+
+  --ac-loader-background-stroke-width: 5.8;
+}
+
+.navds-loader--large {
+  width: 2rem;
+  stroke-width: 7;
+
+  --ac-loader-background-stroke-width: 6.8;
+}
+
+.navds-loader--medium {
+  width: 1.5rem;
+  stroke-width: 7;
+
+  --ac-loader-background-stroke-width: 6.8;
+}
+
+.navds-loader--small {
+  width: 1.25rem;
+  stroke-width: 8;
+
+  --ac-loader-background-stroke-width: 7.8;
+}
+
+.navds-loader--xsmall {
+  width: 1rem;
+  stroke-width: 8;
+
+  --ac-loader-background-stroke-width: 7.8;
+}
+
+@keyframes loader-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes loader-dasharray {
+  0% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -15px;
+  }
+
+  100% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -120px;
+  }
+}
+
+@media (forced-colors: active) {
+  .navds-loader__background {
+    stroke: canvastext;
+  }
+}

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

@@ -0,0 +1,209 @@
+.navds-modal__document-body {
+  overflow: hidden;
+}
+
+.navds-modal {
+  --__ac-modal-bg: var(--ac-modal-bg, var(--a-surface-default));
+
+  background-color: var(--__ac-modal-bg);
+  border: none;
+  border-radius: var(--a-border-radius-large);
+  box-shadow: var(--a-shadow-xlarge);
+  padding: 0;
+  position: fixed;
+  max-height: 100%;
+  max-width: 100%;
+  color: var(--a-text-default);
+}
+
+.navds-modal[open] {
+  display: flex;
+  flex-direction: column;
+  animation: akselModalFadeIn 0.35s cubic-bezier(0.15, 1, 0.3, 1);
+}
+
+.navds-modal--polyfilled {
+  top: 50%;
+  transform: translate(0, -50%);
+
+  /* From polyfill (dialog-polyfill/dist/dialog-polyfill.css): */
+  left: 0;
+  right: 0;
+  width: fit-content;
+  height: fit-content;
+  margin: auto;
+}
+
+.navds-modal--polyfilled .navds-modal--polyfilled {
+  overflow: auto;
+}
+
+.navds-modal--polyfilled:not([open]) {
+  display: none; /* from polyfill */
+}
+
+._dialog_overlay {
+  /* From polyfill */
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
+  left: 0;
+}
+
+.navds-modal--small {
+  width: var(--ac-modal-width-small, 450px);
+}
+
+.navds-modal--medium {
+  width: var(--ac-modal-width-medium, 700px);
+}
+
+@media (min-width: 480px) {
+  .navds-modal {
+    max-width: calc(100% - 2em);
+  }
+
+  .navds-modal--autowidth {
+    max-width: min(700px, calc(100% - 2em));
+  }
+}
+
+@media (min-height: 480px) {
+  .navds-modal {
+    max-height: calc(100% - 2em);
+  }
+
+  .navds-modal--top {
+    margin-top: 2em;
+    max-height: calc(100% - 4em);
+  }
+}
+
+.navds-modal::backdrop {
+  /*
+   * Cannot use --a-surface-backdrop because ::backdrop does not inherit from anything but itself.
+   * But consumers can do `::backdrop { --ac-modal-backdrop: white; }`
+   * We can add ::backdrop to tokens.css when we remove the polyfill.
+   */
+  background: var(--ac-modal-backdrop, rgb(2 20 49 / 0.49));
+  animation: akselModalBackdropFadeIn 0.35s cubic-bezier(0.15, 1, 0.3, 1);
+}
+
+.navds-modal--polyfilled + .backdrop /* Cannot be combined with ::backdrop selector */ {
+  background: var(--ac-modal-backdrop, rgb(2 20 49 / 0.49));
+
+  /* From polyfill: */
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
+  left: 0;
+}
+
+.navds-modal__button {
+  margin-left: var(--a-spacing-4);
+  float: right;
+}
+
+.navds-modal__header {
+  padding: var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-4) var(--a-spacing-6);
+}
+
+.navds-modal--small .navds-modal__header {
+  padding: var(--a-spacing-4) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-4);
+}
+
+.navds-modal__header-icon svg {
+  display: inline;
+  vertical-align: -0.25rem;
+  margin-right: var(--a-spacing-1);
+}
+
+.navds-modal__label {
+  font-weight: 600;
+  color: var(--a-text-subtle);
+}
+
+.navds-modal__body {
+  padding: var(--a-spacing-6);
+  overflow: auto;
+  overscroll-behavior: contain;
+  position: relative; /* Needed to make sr-only elements position correctly - see Storybook */
+  background:
+    linear-gradient(var(--__ac-modal-bg) 30%, transparent) top,
+    linear-gradient(transparent, var(--__ac-modal-bg) 60%) bottom,
+    radial-gradient(farthest-side at 50% 0, rgba(0 0 0 / 0.3), transparent) top,
+    radial-gradient(farthest-side at 50% 100%, rgba(0 0 0 / 0.3), transparent) bottom;
+  background-size:
+    100% 40px,
+    100% 50px,
+    100% 16px,
+    100% 16px;
+  background-attachment: local, local, scroll, scroll;
+  background-repeat: no-repeat;
+}
+
+.navds-modal--small .navds-modal__body {
+  padding: var(--a-spacing-2) var(--a-spacing-4) var(--a-spacing-4);
+}
+
+.navds-modal__header + .navds-modal__body {
+  padding-top: var(--a-spacing-0);
+}
+
+.navds-modal__footer {
+  display: flex;
+  flex-flow: row-reverse wrap;
+  gap: var(--a-spacing-4);
+  padding: var(--a-spacing-4) var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-6);
+}
+
+.navds-modal--small .navds-modal__footer {
+  padding: var(--a-spacing-4);
+}
+
+.navds-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 {
+  min-width: fit-content;
+  max-width: 100vw;
+  max-height: 100vh;
+  animation: none;
+}
+
+@keyframes akselModalFadeIn {
+  0% {
+    opacity: 0.0001; /* Safari will not set focus inside the modal when it opens if we set this to 0 */
+    transform: translate3d(0, calc(5% + 4px), 0);
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    transform: none;
+  }
+}
+
+@keyframes akselModalBackdropFadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@media (forced-colors: active) {
+  .navds-modal {
+    outline: 2px solid transparent;
+  }
+}

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

@@ -0,0 +1,73 @@
+.navds-pagination {
+  position: relative;
+}
+
+.navds-pagination__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  gap: var(--a-spacing-3);
+}
+
+.navds-pagination__ellipsis {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--a-spacing-12);
+  cursor: default;
+}
+
+.navds-pagination--small .navds-pagination__ellipsis {
+  width: var(--a-spacing-8);
+}
+
+.navds-pagination--xsmall .navds-pagination__ellipsis {
+  width: var(--a-spacing-6);
+}
+
+.navds-pagination__item {
+  color: var(--ac-pagination-text, var(--a-text-default));
+}
+
+.navds-pagination--medium .navds-pagination__item {
+  border-radius: var(--a-border-radius-medium);
+}
+
+.navds-pagination__item[aria-current="true"] {
+  background-color: var(--ac-pagination-selected-bg, var(--a-surface-action-selected));
+  color: var(--ac-pagination-selected-text, var(--a-text-on-action));
+}
+
+.navds-pagination__item[aria-current="true"]:focus-visible {
+  box-shadow:
+    inset 0 0 0 1px var(--a-surface-default),
+    var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-pagination__item[aria-current="true"]:focus {
+    box-shadow:
+      inset 0 0 0 1px var(--a-surface-default),
+      var(--a-shadow-focus);
+  }
+}
+
+.navds-pagination__prev-next {
+  display: flex;
+  align-items: center;
+  gap: var(--a-spacing-1);
+}
+
+.navds-pagination--small .navds-pagination__prev-next:where(.navds-pagination--prev-next--with-text) {
+  padding-inline: var(--a-spacing-1-alt);
+}
+
+.navds-pagination--xsmall .navds-pagination__prev-next:where(.navds-pagination--prev-next--with-text) {
+  padding-left: var(--a-spacing-05);
+  padding-right: var(--a-spacing-05);
+}
+
+.navds-pagination--invisible {
+  visibility: hidden;
+}

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

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

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

@@ -0,0 +1,84 @@
+.navds-popover {
+  z-index: var(--a-z-index-popover);
+  background-color: var(--ac-popover-bg, var(--a-surface-default));
+  box-shadow: var(--a-shadow-medium);
+  border: 1px solid;
+  border-color: var(--ac-popover-border, var(--a-border-default));
+  border-radius: var(--a-border-radius-large);
+  max-width: calc(100vw - var(--a-spacing-6));
+}
+
+.navds-popover__content {
+  padding: var(--a-spacing-4);
+}
+
+.navds-popover--hidden {
+  display: none;
+}
+
+.navds-popover:focus-visible {
+  outline: none;
+  box-shadow: var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-popover:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
+.navds-popover__arrow {
+  position: absolute;
+  z-index: -1;
+  transform: rotate(45deg);
+  background-color: var(--ac-popover-bg, var(--a-surface-default));
+  border: 1px solid;
+  border-color: var(--ac-popover-border, var(--a-border-default));
+  width: 1rem;
+  height: 1rem;
+}
+
+.navds-popover[data-placement^="top"] > .navds-popover__arrow {
+  border-left-color: transparent;
+  border-top-color: transparent;
+}
+
+/* prettier-ignore */
+.navds-popover[data-placement^="bottom"] > .navds-popover__arrow {
+  border-bottom-color: transparent;
+  border-right-color: transparent;
+}
+
+.navds-popover[data-placement^="left"] > .navds-popover__arrow {
+  border-left-color: transparent;
+  border-bottom-color: transparent;
+}
+
+.navds-popover[data-placement^="right"] > .navds-popover__arrow {
+  border-right-color: transparent;
+  border-top-color: transparent;
+}
+
+@media (forced-colors: active) {
+  .navds-popover[data-placement^="top"] > .navds-popover__arrow {
+    border-left-color: canvas;
+    border-top-color: canvas;
+  }
+
+  /* prettier-ignore */
+  .navds-popover[data-placement^="bottom"] > .navds-popover__arrow {
+    border-bottom-color: canvas;
+    border-right-color: canvas;
+  }
+
+  .navds-popover[data-placement^="left"] > .navds-popover__arrow {
+    border-left-color: canvas;
+    border-bottom-color: canvas;
+  }
+
+  .navds-popover[data-placement^="right"] > .navds-popover__arrow {
+    border-right-color: canvas;
+    border-top-color: canvas;
+  }
+}

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

@@ -0,0 +1,809 @@
+.navds-r-p {
+  --__ac-r-p-xs: initial;
+  --__ac-r-p-sm: var(--__ac-r-p-xs);
+  --__ac-r-p-md: var(--__ac-r-p-sm);
+  --__ac-r-p-lg: var(--__ac-r-p-md);
+  --__ac-r-p-xl: var(--__ac-r-p-lg);
+  --__ac-r-p-2xl: var(--__ac-r-p-xl);
+  --__ac-r-padding: var(--__ac-r-p-xs);
+
+  padding: var(--__ac-r-padding);
+}
+
+.navds-r-pi {
+  --__ac-r-pi-xs: initial;
+  --__ac-r-pi-sm: var(--__ac-r-pi-xs);
+  --__ac-r-pi-md: var(--__ac-r-pi-sm);
+  --__ac-r-pi-lg: var(--__ac-r-pi-md);
+  --__ac-r-pi-xl: var(--__ac-r-pi-lg);
+  --__ac-r-pi-2xl: var(--__ac-r-pi-xl);
+  --__ac-r-pi: var(--__ac-r-pi-xs);
+
+  padding-inline: var(--__ac-r-pi, var(--__ac-r-padding));
+}
+
+.navds-r-pb {
+  --__ac-r-pb-xs: initial;
+  --__ac-r-pb-sm: var(--__ac-r-pb-xs);
+  --__ac-r-pb-md: var(--__ac-r-pb-sm);
+  --__ac-r-pb-lg: var(--__ac-r-pb-md);
+  --__ac-r-pb-xl: var(--__ac-r-pb-lg);
+  --__ac-r-pb-2xl: var(--__ac-r-pb-xl);
+  --__ac-r-pb: var(--__ac-r-pb-xs);
+
+  padding-block: var(--__ac-r-pb, var(--__ac-r-padding));
+}
+
+.navds-r-m {
+  --__ac-r-m-xs: initial;
+  --__ac-r-m-sm: var(--__ac-r-m-xs);
+  --__ac-r-m-md: var(--__ac-r-m-sm);
+  --__ac-r-m-lg: var(--__ac-r-m-md);
+  --__ac-r-m-xl: var(--__ac-r-m-lg);
+  --__ac-r-m-2xl: var(--__ac-r-m-xl);
+  --__ac-r-margin: var(--__ac-r-m-xs);
+
+  margin: var(--__ac-r-margin);
+}
+
+.navds-r-mi {
+  --__ac-r-mi-xs: initial;
+  --__ac-r-mi-sm: var(--__ac-r-mi-xs);
+  --__ac-r-mi-md: var(--__ac-r-mi-sm);
+  --__ac-r-mi-lg: var(--__ac-r-mi-md);
+  --__ac-r-mi-xl: var(--__ac-r-mi-lg);
+  --__ac-r-mi-2xl: var(--__ac-r-mi-xl);
+  --__ac-r-mi: var(--__ac-r-mi-xs);
+
+  margin-inline: var(--__ac-r-mi, var(--__ac-r-margin));
+}
+
+.navds-r-mb {
+  --__ac-r-mb-xs: initial;
+  --__ac-r-mb-sm: var(--__ac-r-mb-xs);
+  --__ac-r-mb-md: var(--__ac-r-mb-sm);
+  --__ac-r-mb-lg: var(--__ac-r-mb-md);
+  --__ac-r-mb-xl: var(--__ac-r-mb-lg);
+  --__ac-r-mb-2xl: var(--__ac-r-mb-xl);
+  --__ac-r-mb: var(--__ac-r-mb-xs);
+
+  margin-block: var(--__ac-r-mb, var(--__ac-r-margin));
+}
+
+.navds-r-w {
+  --__ac-r-w-xs: initial;
+  --__ac-r-w-sm: var(--__ac-r-w-xs);
+  --__ac-r-w-md: var(--__ac-r-w-sm);
+  --__ac-r-w-lg: var(--__ac-r-w-md);
+  --__ac-r-w-xl: var(--__ac-r-w-lg);
+  --__ac-r-w-2xl: var(--__ac-r-w-xl);
+  --__ac-r-w: var(--__ac-r-w-xs);
+
+  width: var(--__ac-r-w);
+}
+
+.navds-r-minw {
+  --__ac-r-minw-xs: initial;
+  --__ac-r-minw-sm: var(--__ac-r-minw-xs);
+  --__ac-r-minw-md: var(--__ac-r-minw-sm);
+  --__ac-r-minw-lg: var(--__ac-r-minw-md);
+  --__ac-r-minw-xl: var(--__ac-r-minw-lg);
+  --__ac-r-minw-2xl: var(--__ac-r-minw-xl);
+  --__ac-r-minw: var(--__ac-r-minw-xs);
+
+  min-width: var(--__ac-r-minw);
+}
+
+.navds-r-maxw {
+  --__ac-r-maxw-xs: initial;
+  --__ac-r-maxw-sm: var(--__ac-r-maxw-xs);
+  --__ac-r-maxw-md: var(--__ac-r-maxw-sm);
+  --__ac-r-maxw-lg: var(--__ac-r-maxw-md);
+  --__ac-r-maxw-xl: var(--__ac-r-maxw-lg);
+  --__ac-r-maxw-2xl: var(--__ac-r-maxw-xl);
+  --__ac-r-maxw: var(--__ac-r-maxw-xs);
+
+  max-width: var(--__ac-r-maxw);
+}
+
+.navds-r-h {
+  --__ac-r-h-xs: initial;
+  --__ac-r-h-sm: var(--__ac-r-h-xs);
+  --__ac-r-h-md: var(--__ac-r-h-sm);
+  --__ac-r-h-lg: var(--__ac-r-h-md);
+  --__ac-r-h-xl: var(--__ac-r-h-lg);
+  --__ac-r-h-2xl: var(--__ac-r-h-xl);
+  --__ac-r-h: var(--__ac-r-h-xs);
+
+  height: var(--__ac-r-h);
+}
+
+.navds-r-minh {
+  --__ac-r-minh-xs: initial;
+  --__ac-r-minh-sm: var(--__ac-r-minh-xs);
+  --__ac-r-minh-md: var(--__ac-r-minh-sm);
+  --__ac-r-minh-lg: var(--__ac-r-minh-md);
+  --__ac-r-minh-xl: var(--__ac-r-minh-lg);
+  --__ac-r-minh-2xl: var(--__ac-r-minh-xl);
+  --__ac-r-minh: var(--__ac-r-minh-xs);
+
+  min-height: var(--__ac-r-minh);
+}
+
+.navds-r-maxh {
+  --__ac-r-maxh-xs: initial;
+  --__ac-r-maxh-sm: var(--__ac-r-maxh-xs);
+  --__ac-r-maxh-md: var(--__ac-r-maxh-sm);
+  --__ac-r-maxh-lg: var(--__ac-r-maxh-md);
+  --__ac-r-maxh-xl: var(--__ac-r-maxh-lg);
+  --__ac-r-maxh-2xl: var(--__ac-r-maxh-xl);
+  --__ac-r-maxh: var(--__ac-r-maxh-xs);
+
+  max-height: var(--__ac-r-maxh);
+}
+
+.navds-r-position {
+  --__ac-r-position-xs: initial;
+  --__ac-r-position-sm: var(--__ac-r-position-xs);
+  --__ac-r-position-md: var(--__ac-r-position-sm);
+  --__ac-r-position-lg: var(--__ac-r-position-md);
+  --__ac-r-position-xl: var(--__ac-r-position-lg);
+  --__ac-r-position-2xl: var(--__ac-r-position-xl);
+  --__ac-r-position: var(--__ac-r-position-xs);
+
+  position: var(--__ac-r-position);
+}
+
+.navds-r-inset {
+  --__ac-r-inset-xs: initial;
+  --__ac-r-inset-sm: var(--__ac-r-inset-xs);
+  --__ac-r-inset-md: var(--__ac-r-inset-sm);
+  --__ac-r-inset-lg: var(--__ac-r-inset-md);
+  --__ac-r-inset-xl: var(--__ac-r-inset-lg);
+  --__ac-r-inset-2xl: var(--__ac-r-inset-xl);
+  --__ac-r-inset: var(--__ac-r-inset-xs);
+
+  inset: var(--__ac-r-inset);
+}
+
+.navds-r-top {
+  --__ac-r-top-xs: initial;
+  --__ac-r-top-sm: var(--__ac-r-top-xs);
+  --__ac-r-top-md: var(--__ac-r-top-sm);
+  --__ac-r-top-lg: var(--__ac-r-top-md);
+  --__ac-r-top-xl: var(--__ac-r-top-lg);
+  --__ac-r-top-2xl: var(--__ac-r-top-xl);
+  --__ac-r-top: var(--__ac-r-top-xs);
+
+  top: var(--__ac-r-top);
+}
+
+.navds-r-right {
+  --__ac-r-right-xs: initial;
+  --__ac-r-right-sm: var(--__ac-r-right-xs);
+  --__ac-r-right-md: var(--__ac-r-right-sm);
+  --__ac-r-right-lg: var(--__ac-r-right-md);
+  --__ac-r-right-xl: var(--__ac-r-right-lg);
+  --__ac-r-right-2xl: var(--__ac-r-right-xl);
+  --__ac-r-right: var(--__ac-r-right-xs);
+
+  right: var(--__ac-r-right);
+}
+
+.navds-r-bottom {
+  --__ac-r-bottom-xs: initial;
+  --__ac-r-bottom-sm: var(--__ac-r-bottom-xs);
+  --__ac-r-bottom-md: var(--__ac-r-bottom-sm);
+  --__ac-r-bottom-lg: var(--__ac-r-bottom-md);
+  --__ac-r-bottom-xl: var(--__ac-r-bottom-lg);
+  --__ac-r-bottom-2xl: var(--__ac-r-bottom-xl);
+  --__ac-r-bottom: var(--__ac-r-bottom-xs);
+
+  bottom: var(--__ac-r-bottom);
+}
+
+.navds-r-left {
+  --__ac-r-left-xs: initial;
+  --__ac-r-left-sm: var(--__ac-r-left-xs);
+  --__ac-r-left-md: var(--__ac-r-left-sm);
+  --__ac-r-left-lg: var(--__ac-r-left-md);
+  --__ac-r-left-xl: var(--__ac-r-left-lg);
+  --__ac-r-left-2xl: var(--__ac-r-left-xl);
+  --__ac-r-left: var(--__ac-r-left-xs);
+
+  left: var(--__ac-r-left);
+}
+
+.navds-r-overflow {
+  --__ac-r-overflow-xs: initial;
+  --__ac-r-overflow-sm: var(--__ac-r-overflow-xs);
+  --__ac-r-overflow-md: var(--__ac-r-overflow-sm);
+  --__ac-r-overflow-lg: var(--__ac-r-overflow-md);
+  --__ac-r-overflow-xl: var(--__ac-r-overflow-lg);
+  --__ac-r-overflow-2xl: var(--__ac-r-overflow-xl);
+  --__ac-r-overflow: var(--__ac-r-overflow-xs);
+
+  overflow: var(--__ac-r-overflow);
+}
+
+.navds-r-overflowx {
+  --__ac-r-overflowx-xs: initial;
+  --__ac-r-overflowx-sm: var(--__ac-r-overflowx-xs);
+  --__ac-r-overflowx-md: var(--__ac-r-overflowx-sm);
+  --__ac-r-overflowx-lg: var(--__ac-r-overflowx-md);
+  --__ac-r-overflowx-xl: var(--__ac-r-overflowx-lg);
+  --__ac-r-overflowx-2xl: var(--__ac-r-overflowx-xl);
+  --__ac-r-overflowx: var(--__ac-r-overflowx-xs);
+
+  overflow-x: var(--__ac-r-overflowx);
+}
+
+.navds-r-overflowy {
+  --__ac-r-overflowy-xs: initial;
+  --__ac-r-overflowy-sm: var(--__ac-r-overflowy-xs);
+  --__ac-r-overflowy-md: var(--__ac-r-overflowy-sm);
+  --__ac-r-overflowy-lg: var(--__ac-r-overflowy-md);
+  --__ac-r-overflowy-xl: var(--__ac-r-overflowy-lg);
+  --__ac-r-overflowy-2xl: var(--__ac-r-overflowy-xl);
+  --__ac-r-overflowy: var(--__ac-r-overflowy-xs);
+
+  overflow-y: var(--__ac-r-overflowy);
+}
+
+.navds-r-flex-basis {
+  --__ac-r-flex-basis-xs: initial;
+  --__ac-r-flex-basis-sm: var(--__ac-r-flex-basis-xs);
+  --__ac-r-flex-basis-md: var(--__ac-r-flex-basis-sm);
+  --__ac-r-flex-basis-lg: var(--__ac-r-flex-basis-md);
+  --__ac-r-flex-basis-xl: var(--__ac-r-flex-basis-lg);
+  --__ac-r-flex-basis-2xl: var(--__ac-r-flex-basis-xl);
+  --__ac-r-flex-basis: var(--__ac-r-flex-basis-xs);
+
+  flex-basis: var(--__ac-r-flex-basis);
+}
+
+.navds-r-flex-grow {
+  --__ac-r-flex-grow-xs: initial;
+  --__ac-r-flex-grow-sm: var(--__ac-r-flex-grow-xs);
+  --__ac-r-flex-grow-md: var(--__ac-r-flex-grow-sm);
+  --__ac-r-flex-grow-lg: var(--__ac-r-flex-grow-md);
+  --__ac-r-flex-grow-xl: var(--__ac-r-flex-grow-lg);
+  --__ac-r-flex-grow-2xl: var(--__ac-r-flex-grow-xl);
+  --__ac-r-flex-grow: var(--__ac-r-flex-grow-xs);
+
+  flex-grow: var(--__ac-r-flex-grow);
+}
+
+.navds-r-flex-shrink {
+  --__ac-r-flex-shrink-xs: initial;
+  --__ac-r-flex-shrink-sm: var(--__ac-r-flex-shrink-xs);
+  --__ac-r-flex-shrink-md: var(--__ac-r-flex-shrink-sm);
+  --__ac-r-flex-shrink-lg: var(--__ac-r-flex-shrink-md);
+  --__ac-r-flex-shrink-xl: var(--__ac-r-flex-shrink-lg);
+  --__ac-r-flex-shrink-2xl: var(--__ac-r-flex-shrink-xl);
+  --__ac-r-flex-shrink: var(--__ac-r-flex-shrink-xs);
+
+  flex-shrink: var(--__ac-r-flex-shrink);
+}
+
+.navds-r-grid-column {
+  --__ac-r-grid-column-xs: initial;
+  --__ac-r-grid-column-sm: var(--__ac-r-grid-column-xs);
+  --__ac-r-grid-column-md: var(--__ac-r-grid-column-sm);
+  --__ac-r-grid-column-lg: var(--__ac-r-grid-column-md);
+  --__ac-r-grid-column-xl: var(--__ac-r-grid-column-lg);
+  --__ac-r-grid-column-2xl: var(--__ac-r-grid-column-xl);
+  --__ac-r-grid-column: var(--__ac-r-grid-column-xs);
+
+  grid-column: var(--__ac-r-grid-column);
+}
+
+@media (min-width: 480px) {
+  .navds-r-p {
+    --__ac-r-padding: var(--__ac-r-p-sm);
+  }
+
+  .navds-r-pi {
+    --__ac-r-pi: var(--__ac-r-pi-sm);
+  }
+
+  .navds-r-pb {
+    --__ac-r-pb: var(--__ac-r-pb-sm);
+  }
+
+  .navds-r-m {
+    --__ac-r-margin: var(--__ac-r-m-sm);
+  }
+
+  .navds-r-mi {
+    --__ac-r-mi: var(--__ac-r-mi-sm);
+  }
+
+  .navds-r-mb {
+    --__ac-r-mb: var(--__ac-r-mb-sm);
+  }
+
+  .navds-r-w {
+    --__ac-r-w: var(--__ac-r-w-sm);
+  }
+
+  .navds-r-minw {
+    --__ac-r-minw: var(--__ac-r-minw-sm);
+  }
+
+  .navds-r-maxw {
+    --__ac-r-maxw: var(--__ac-r-maxw-sm);
+  }
+
+  .navds-r-h {
+    --__ac-r-h: var(--__ac-r-h-sm);
+  }
+
+  .navds-r-minh {
+    --__ac-r-minh: var(--__ac-r-minh-sm);
+  }
+
+  .navds-r-maxh {
+    --__ac-r-maxh: var(--__ac-r-maxh-sm);
+  }
+
+  .navds-r-position {
+    --__ac-r-position: var(--__ac-r-position-sm);
+  }
+
+  .navds-r-inset {
+    --__ac-r-inset: var(--__ac-r-inset-sm);
+  }
+
+  .navds-r-top {
+    --__ac-r-top: var(--__ac-r-top-sm);
+  }
+
+  .navds-r-right {
+    --__ac-r-right: var(--__ac-r-right-sm);
+  }
+
+  .navds-r-bottom {
+    --__ac-r-bottom: var(--__ac-r-bottom-sm);
+  }
+
+  .navds-r-left {
+    --__ac-r-left: var(--__ac-r-left-sm);
+  }
+
+  .navds-r-overflow {
+    --__ac-r-overflow: var(--__ac-r-overflow-sm);
+  }
+
+  .navds-r-overflowx {
+    --__ac-r-overflowx: var(--__ac-r-overflowx-sm);
+  }
+
+  .navds-r-overflowy {
+    --__ac-r-overflowy: var(--__ac-r-overflowy-sm);
+  }
+
+  .navds-r-flex-basis {
+    --__ac-r-flex-basis: var(--__ac-r-flex-basis-sm);
+  }
+
+  .navds-r-flex-grow {
+    --__ac-r-flex-grow: var(--__ac-r-flex-grow-sm);
+  }
+
+  .navds-r-flex-shrink {
+    --__ac-r-flex-shrink: var(--__ac-r-flex-shrink-sm);
+  }
+
+  .navds-r-grid-column {
+    --__ac-r-grid-column: var(--__ac-r-grid-column-sm);
+  }
+}
+
+@media (min-width: 768px) {
+  .navds-r-p {
+    --__ac-r-padding: var(--__ac-r-p-md);
+  }
+
+  .navds-r-pi {
+    --__ac-r-pi: var(--__ac-r-pi-md);
+  }
+
+  .navds-r-pb {
+    --__ac-r-pb: var(--__ac-r-pb-md);
+  }
+
+  .navds-r-m {
+    --__ac-r-margin: var(--__ac-r-m-md);
+  }
+
+  .navds-r-mi {
+    --__ac-r-mi: var(--__ac-r-mi-md);
+  }
+
+  .navds-r-mb {
+    --__ac-r-mb: var(--__ac-r-mb-md);
+  }
+
+  .navds-r-w {
+    --__ac-r-w: var(--__ac-r-w-md);
+  }
+
+  .navds-r-minw {
+    --__ac-r-minw: var(--__ac-r-minw-md);
+  }
+
+  .navds-r-maxw {
+    --__ac-r-maxw: var(--__ac-r-maxw-md);
+  }
+
+  .navds-r-h {
+    --__ac-r-h: var(--__ac-r-h-md);
+  }
+
+  .navds-r-minh {
+    --__ac-r-minh: var(--__ac-r-minh-md);
+  }
+
+  .navds-r-maxh {
+    --__ac-r-maxh: var(--__ac-r-maxh-md);
+  }
+
+  .navds-r-position {
+    --__ac-r-position: var(--__ac-r-position-md);
+  }
+
+  .navds-r-inset {
+    --__ac-r-inset: var(--__ac-r-inset-md);
+  }
+
+  .navds-r-top {
+    --__ac-r-top: var(--__ac-r-top-md);
+  }
+
+  .navds-r-right {
+    --__ac-r-right: var(--__ac-r-right-md);
+  }
+
+  .navds-r-bottom {
+    --__ac-r-bottom: var(--__ac-r-bottom-md);
+  }
+
+  .navds-r-left {
+    --__ac-r-left: var(--__ac-r-left-md);
+  }
+
+  .navds-r-overflow {
+    --__ac-r-overflow: var(--__ac-r-overflow-md);
+  }
+
+  .navds-r-overflowx {
+    --__ac-r-overflowx: var(--__ac-r-overflowx-md);
+  }
+
+  .navds-r-overflowy {
+    --__ac-r-overflowy: var(--__ac-r-overflowy-md);
+  }
+
+  .navds-r-flex-basis {
+    --__ac-r-flex-basis: var(--__ac-r-flex-basis-md);
+  }
+
+  .navds-r-flex-grow {
+    --__ac-r-flex-grow: var(--__ac-r-flex-grow-md);
+  }
+
+  .navds-r-flex-shrink {
+    --__ac-r-flex-shrink: var(--__ac-r-flex-shrink-md);
+  }
+
+  .navds-r-grid-column {
+    --__ac-r-grid-column: var(--__ac-r-grid-column-md);
+  }
+}
+
+@media (min-width: 1024px) {
+  .navds-r-p {
+    --__ac-r-padding: var(--__ac-r-p-lg);
+  }
+
+  .navds-r-pi {
+    --__ac-r-pi: var(--__ac-r-pi-lg);
+  }
+
+  .navds-r-pb {
+    --__ac-r-pb: var(--__ac-r-pb-lg);
+  }
+
+  .navds-r-m {
+    --__ac-r-margin: var(--__ac-r-m-lg);
+  }
+
+  .navds-r-mi {
+    --__ac-r-mi: var(--__ac-r-mi-lg);
+  }
+
+  .navds-r-mb {
+    --__ac-r-mb: var(--__ac-r-mb-lg);
+  }
+
+  .navds-r-w {
+    --__ac-r-w: var(--__ac-r-w-lg);
+  }
+
+  .navds-r-minw {
+    --__ac-r-minw: var(--__ac-r-minw-lg);
+  }
+
+  .navds-r-maxw {
+    --__ac-r-maxw: var(--__ac-r-maxw-lg);
+  }
+
+  .navds-r-h {
+    --__ac-r-h: var(--__ac-r-h-lg);
+  }
+
+  .navds-r-minh {
+    --__ac-r-minh: var(--__ac-r-minh-lg);
+  }
+
+  .navds-r-maxh {
+    --__ac-r-maxh: var(--__ac-r-maxh-lg);
+  }
+
+  .navds-r-position {
+    --__ac-r-position: var(--__ac-r-position-lg);
+  }
+
+  .navds-r-inset {
+    --__ac-r-inset: var(--__ac-r-inset-lg);
+  }
+
+  .navds-r-top {
+    --__ac-r-top: var(--__ac-r-top-lg);
+  }
+
+  .navds-r-right {
+    --__ac-r-right: var(--__ac-r-right-lg);
+  }
+
+  .navds-r-bottom {
+    --__ac-r-bottom: var(--__ac-r-bottom-lg);
+  }
+
+  .navds-r-left {
+    --__ac-r-left: var(--__ac-r-left-lg);
+  }
+
+  .navds-r-overflow {
+    --__ac-r-overflow: var(--__ac-r-overflow-lg);
+  }
+
+  .navds-r-overflowx {
+    --__ac-r-overflowx: var(--__ac-r-overflowx-lg);
+  }
+
+  .navds-r-overflowy {
+    --__ac-r-overflowy: var(--__ac-r-overflowy-lg);
+  }
+
+  .navds-r-flex-basis {
+    --__ac-r-flex-basis: var(--__ac-r-flex-basis-lg);
+  }
+
+  .navds-r-flex-grow {
+    --__ac-r-flex-grow: var(--__ac-r-flex-grow-lg);
+  }
+
+  .navds-r-flex-shrink {
+    --__ac-r-flex-shrink: var(--__ac-r-flex-shrink-lg);
+  }
+
+  .navds-r-grid-column {
+    --__ac-r-grid-column: var(--__ac-r-grid-column-lg);
+  }
+}
+
+@media (min-width: 1280px) {
+  .navds-r-p {
+    --__ac-r-padding: var(--__ac-r-p-xl);
+  }
+
+  .navds-r-pi {
+    --__ac-r-pi: var(--__ac-r-pi-xl);
+  }
+
+  .navds-r-pb {
+    --__ac-r-pb: var(--__ac-r-pb-xl);
+  }
+
+  .navds-r-m {
+    --__ac-r-margin: var(--__ac-r-m-xl);
+  }
+
+  .navds-r-mi {
+    --__ac-r-mi: var(--__ac-r-mi-xl);
+  }
+
+  .navds-r-mb {
+    --__ac-r-mb: var(--__ac-r-mb-xl);
+  }
+
+  .navds-r-w {
+    --__ac-r-w: var(--__ac-r-w-xl);
+  }
+
+  .navds-r-minw {
+    --__ac-r-minw: var(--__ac-r-minw-xl);
+  }
+
+  .navds-r-maxw {
+    --__ac-r-maxw: var(--__ac-r-maxw-xl);
+  }
+
+  .navds-r-h {
+    --__ac-r-h: var(--__ac-r-h-xl);
+  }
+
+  .navds-r-minh {
+    --__ac-r-minh: var(--__ac-r-minh-xl);
+  }
+
+  .navds-r-maxh {
+    --__ac-r-maxh: var(--__ac-r-maxh-xl);
+  }
+
+  .navds-r-position {
+    --__ac-r-position: var(--__ac-r-position-xl);
+  }
+
+  .navds-r-inset {
+    --__ac-r-inset: var(--__ac-r-inset-xl);
+  }
+
+  .navds-r-top {
+    --__ac-r-top: var(--__ac-r-top-xl);
+  }
+
+  .navds-r-right {
+    --__ac-r-right: var(--__ac-r-right-xl);
+  }
+
+  .navds-r-bottom {
+    --__ac-r-bottom: var(--__ac-r-bottom-xl);
+  }
+
+  .navds-r-left {
+    --__ac-r-left: var(--__ac-r-left-xl);
+  }
+
+  .navds-r-overflow {
+    --__ac-r-overflow: var(--__ac-r-overflow-xl);
+  }
+
+  .navds-r-overflowx {
+    --__ac-r-overflowx: var(--__ac-r-overflowx-xl);
+  }
+
+  .navds-r-overflowy {
+    --__ac-r-overflowy: var(--__ac-r-overflowy-xl);
+  }
+
+  .navds-r-flex-basis {
+    --__ac-r-flex-basis: var(--__ac-r-flex-basis-xl);
+  }
+
+  .navds-r-flex-grow {
+    --__ac-r-flex-grow: var(--__ac-r-flex-grow-xl);
+  }
+
+  .navds-r-flex-shrink {
+    --__ac-r-flex-shrink: var(--__ac-r-flex-shrink-xl);
+  }
+
+  .navds-r-grid-column {
+    --__ac-r-grid-column: var(--__ac-r-grid-column-xl);
+  }
+}
+
+@media (min-width: 1440px) {
+  .navds-r-p {
+    --__ac-r-padding: var(--__ac-r-p-2xl);
+  }
+
+  .navds-r-pi {
+    --__ac-r-pi: var(--__ac-r-pi-2xl);
+  }
+
+  .navds-r-pb {
+    --__ac-r-pb: var(--__ac-r-pb-2xl);
+  }
+
+  .navds-r-m {
+    --__ac-r-margin: var(--__ac-r-m-2xl);
+  }
+
+  .navds-r-mi {
+    --__ac-r-mi: var(--__ac-r-mi-2xl);
+  }
+
+  .navds-r-mb {
+    --__ac-r-mb: var(--__ac-r-mb-2xl);
+  }
+
+  .navds-r-w {
+    --__ac-r-w: var(--__ac-r-w-2xl);
+  }
+
+  .navds-r-minw {
+    --__ac-r-minw: var(--__ac-r-minw-2xl);
+  }
+
+  .navds-r-maxw {
+    --__ac-r-maxw: var(--__ac-r-maxw-2xl);
+  }
+
+  .navds-r-h {
+    --__ac-r-h: var(--__ac-r-h-2xl);
+  }
+
+  .navds-r-minh {
+    --__ac-r-minh: var(--__ac-r-minh-2xl);
+  }
+
+  .navds-r-maxh {
+    --__ac-r-maxh: var(--__ac-r-maxh-2xl);
+  }
+
+  .navds-r-position {
+    --__ac-r-position: var(--__ac-r-position-2xl);
+  }
+
+  .navds-r-inset {
+    --__ac-r-inset: var(--__ac-r-inset-2xl);
+  }
+
+  .navds-r-top {
+    --__ac-r-top: var(--__ac-r-top-2xl);
+  }
+
+  .navds-r-right {
+    --__ac-r-right: var(--__ac-r-right-2xl);
+  }
+
+  .navds-r-bottom {
+    --__ac-r-bottom: var(--__ac-r-bottom-2xl);
+  }
+
+  .navds-r-left {
+    --__ac-r-left: var(--__ac-r-left-2xl);
+  }
+
+  .navds-r-overflow {
+    --__ac-r-overflow: var(--__ac-r-overflow-2xl);
+  }
+
+  .navds-r-overflowx {
+    --__ac-r-overflowx: var(--__ac-r-overflowx-2xl);
+  }
+
+  .navds-r-overflowy {
+    --__ac-r-overflowy: var(--__ac-r-overflowy-2xl);
+  }
+
+  .navds-r-flex-basis {
+    --__ac-r-flex-basis: var(--__ac-r-flex-basis-2xl);
+  }
+
+  .navds-r-flex-grow {
+    --__ac-r-flex-grow: var(--__ac-r-flex-grow-2xl);
+  }
+
+  .navds-r-flex-shrink {
+    --__ac-r-flex-shrink: var(--__ac-r-flex-shrink-2xl);
+  }
+
+  .navds-r-grid-column {
+    --__ac-r-grid-column: var(--__ac-r-grid-column-2xl);
+  }
+}

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

@@ -0,0 +1,103 @@
+.navds-bleed {
+  --__ac-bleed-margin-inline-xs: initial;
+  --__ac-bleed-margin-inline-sm: var(--__ac-bleed-margin-inline-xs);
+  --__ac-bleed-margin-inline-md: var(--__ac-bleed-margin-inline-sm);
+  --__ac-bleed-margin-inline-lg: var(--__ac-bleed-margin-inline-md);
+  --__ac-bleed-margin-inline-xl: var(--__ac-bleed-margin-inline-lg);
+  --__ac-bleed-margin-inline-2xl: var(--__ac-bleed-margin-inline-xl);
+  --__ac-bleed-margin-block-xs: initial;
+  --__ac-bleed-margin-block-sm: var(--__ac-bleed-margin-block-xs);
+  --__ac-bleed-margin-block-md: var(--__ac-bleed-margin-block-sm);
+  --__ac-bleed-margin-block-lg: var(--__ac-bleed-margin-block-md);
+  --__ac-bleed-margin-block-xl: var(--__ac-bleed-margin-block-lg);
+  --__ac-bleed-margin-block-2xl: var(--__ac-bleed-margin-block-xl);
+
+  /** defaults */
+  --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-xs);
+  --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-xs);
+
+  margin-inline: var(--__ac-bleed-margin-inline);
+  margin-block: var(--__ac-bleed-margin-block);
+}
+
+.navds-bleed--padding {
+  --__ac-bleed-padding-inline-xs: initial;
+  --__ac-bleed-padding-inline-sm: var(--__ac-bleed-padding-inline-xs);
+  --__ac-bleed-padding-inline-md: var(--__ac-bleed-padding-inline-sm);
+  --__ac-bleed-padding-inline-lg: var(--__ac-bleed-padding-inline-md);
+  --__ac-bleed-padding-inline-xl: var(--__ac-bleed-padding-inline-lg);
+  --__ac-bleed-padding-inline-2xl: var(--__ac-bleed-padding-inline-xl);
+  --__ac-bleed-padding-block-xs: initial;
+  --__ac-bleed-padding-block-sm: var(--__ac-bleed-padding-block-xs);
+  --__ac-bleed-padding-block-md: var(--__ac-bleed-padding-block-sm);
+  --__ac-bleed-padding-block-lg: var(--__ac-bleed-padding-block-md);
+  --__ac-bleed-padding-block-xl: var(--__ac-bleed-padding-block-lg);
+  --__ac-bleed-padding-block-2xl: var(--__ac-bleed-padding-block-xl);
+
+  /** defaults */
+  --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-xs);
+  --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-xs);
+
+  padding-inline: var(--__ac-bleed-padding-inline);
+  padding-block: var(--__ac-bleed-padding-block);
+}
+
+@media (min-width: 480px) {
+  .navds-bleed {
+    --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-sm);
+    --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-sm);
+  }
+
+  .navds-bleed--padding {
+    --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-sm);
+    --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-sm);
+  }
+}
+
+@media (min-width: 768px) {
+  .navds-bleed {
+    --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-md);
+    --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-md);
+  }
+
+  .navds-bleed--padding {
+    --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-md);
+    --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-md);
+  }
+}
+
+@media (min-width: 1024px) {
+  .navds-bleed {
+    --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-lg);
+    --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-lg);
+  }
+
+  .navds-bleed--padding {
+    --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-lg);
+    --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-lg);
+  }
+}
+
+@media (min-width: 1280px) {
+  .navds-bleed {
+    --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-xl);
+    --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-xl);
+  }
+
+  .navds-bleed--padding {
+    --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-xl);
+    --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-xl);
+  }
+}
+
+@media (min-width: 1440px) {
+  .navds-bleed {
+    --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-2xl);
+    --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-2xl);
+  }
+
+  .navds-bleed--padding {
+    --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-2xl);
+    --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-2xl);
+  }
+}

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

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

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

@@ -0,0 +1,80 @@
+.navds-hgrid {
+  --__ac-hgrid-columns-xs: initial;
+  --__ac-hgrid-columns-sm: var(--__ac-hgrid-columns-xs);
+  --__ac-hgrid-columns-md: var(--__ac-hgrid-columns-sm);
+  --__ac-hgrid-columns-lg: var(--__ac-hgrid-columns-md);
+  --__ac-hgrid-columns-xl: var(--__ac-hgrid-columns-lg);
+  --__ac-hgrid-columns-2xl: var(--__ac-hgrid-columns-xl);
+  --__ac-hgrid-columns: var(--__ac-hgrid-columns-xs);
+
+  display: grid;
+  grid-template-columns: var(--__ac-hgrid-columns);
+}
+
+.navds-hgrid-gap {
+  --__ac-hgrid-gap-xs: initial;
+  --__ac-hgrid-gap-sm: var(--__ac-hgrid-gap-xs);
+  --__ac-hgrid-gap-md: var(--__ac-hgrid-gap-sm);
+  --__ac-hgrid-gap-lg: var(--__ac-hgrid-gap-md);
+  --__ac-hgrid-gap-xl: var(--__ac-hgrid-gap-lg);
+  --__ac-hgrid-gap-2xl: var(--__ac-hgrid-gap-xl);
+  --__ac-hgrid-gap: var(--__ac-hgrid-gap-xs);
+
+  gap: var(--__ac-hgrid-gap);
+}
+
+.navds-hgrid-align {
+  --__ac-hgrid-align: initial;
+
+  align-items: var(--__ac-hgrid-align);
+}
+
+@media (min-width: 480px) {
+  .navds-hgrid {
+    --__ac-hgrid-columns: var(--__ac-hgrid-columns-sm);
+  }
+
+  .navds-hgrid-gap {
+    --__ac-hgrid-gap: var(--__ac-hgrid-gap-sm);
+  }
+}
+
+@media (min-width: 768px) {
+  .navds-hgrid {
+    --__ac-hgrid-columns: var(--__ac-hgrid-columns-md);
+  }
+
+  .navds-hgrid-gap {
+    --__ac-hgrid-gap: var(--__ac-hgrid-gap-md);
+  }
+}
+
+@media (min-width: 1024px) {
+  .navds-hgrid {
+    --__ac-hgrid-columns: var(--__ac-hgrid-columns-lg);
+  }
+
+  .navds-hgrid-gap {
+    --__ac-hgrid-gap: var(--__ac-hgrid-gap-lg);
+  }
+}
+
+@media (min-width: 1280px) {
+  .navds-hgrid {
+    --__ac-hgrid-columns: var(--__ac-hgrid-columns-xl);
+  }
+
+  .navds-hgrid-gap {
+    --__ac-hgrid-gap: var(--__ac-hgrid-gap-xl);
+  }
+}
+
+@media (min-width: 1440px) {
+  .navds-hgrid {
+    --__ac-hgrid-columns: var(--__ac-hgrid-columns-2xl);
+  }
+
+  .navds-hgrid-gap {
+    --__ac-hgrid-gap: var(--__ac-hgrid-gap-2xl);
+  }
+}

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

@@ -0,0 +1,36 @@
+@layer aksel.layout.component, aksel.layout.base;
+
+@import "./base.darkside.css" layer(aksel.layout.base);
+@import "./box.darkside.css" layer(aksel.layout.component);
+@import "./bleed.darkside.css" layer(aksel.layout.component);
+@import "./page.darkside.css" layer(aksel.layout.component);
+@import "./hgrid.darkside.css" layer(aksel.layout.component);
+@import "./stack.darkside.css" layer(aksel.layout.component);
+@import "./responsive.darkside.css" layer(aksel.layout.component);
+
+/* Custom override to avoid having to edit react-syntax in Primtives */
+@layer aksel.layout {
+  :root {
+    --a-spacing-1-alt: var(--ax-spacing-1-alt);
+    --a-spacing-05: var(--ax-spacing-05);
+    --a-spacing-32: var(--ax-spacing-32);
+    --a-spacing-24: var(--ax-spacing-24);
+    --a-spacing-20: var(--ax-spacing-20);
+    --a-spacing-18: var(--ax-spacing-18);
+    --a-spacing-16: var(--ax-spacing-16);
+    --a-spacing-14: var(--ax-spacing-14);
+    --a-spacing-12: var(--ax-spacing-12);
+    --a-spacing-11: var(--ax-spacing-11);
+    --a-spacing-10: var(--ax-spacing-10);
+    --a-spacing-9: var(--ax-spacing-9);
+    --a-spacing-8: var(--ax-spacing-8);
+    --a-spacing-7: var(--ax-spacing-7);
+    --a-spacing-6: var(--ax-spacing-6);
+    --a-spacing-5: var(--ax-spacing-5);
+    --a-spacing-4: var(--ax-spacing-4);
+    --a-spacing-3: var(--ax-spacing-3);
+    --a-spacing-2: var(--ax-spacing-2);
+    --a-spacing-1: var(--ax-spacing-1);
+    --a-spacing-0: var(--ax-spacing-0);
+  }
+}

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

@@ -0,0 +1,63 @@
+.navds-page {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  min-height: 100lvh;
+
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+  background-color: var(--__ac-page-background);
+}
+
+/* Page.Block */
+.navds-pageblock {
+  /* stylelint-disable-next-line length-zero-no-unit */
+  --__ac-page-padding-inline: 0px;
+
+  margin-inline: auto;
+  width: 100%;
+}
+
+.navds-page__content--grow {
+  flex-grow: 1;
+}
+
+.navds-page__content--fullheight {
+  min-height: 100vh;
+  min-height: 100lvh;
+}
+
+.navds-page__content--padding {
+  padding-block-end: var(--a-spacing-16);
+}
+
+.navds-pageblock--text {
+  max-width: calc(var(--a-text-width-max) + var(--__ac-page-padding-inline) + var(--__ac-page-padding-inline));
+}
+
+.navds-pageblock--md {
+  max-width: 768px;
+}
+
+.navds-pageblock--lg {
+  max-width: 1024px;
+}
+
+.navds-pageblock--xl {
+  max-width: 1280px;
+}
+
+.navds-pageblock--2xl {
+  max-width: 1440px;
+}
+
+.navds-pageblock--gutters {
+  --__ac-page-padding-inline: var(--a-spacing-4);
+
+  padding-inline: var(--__ac-page-padding-inline);
+}
+
+@media (min-width: 1024px) {
+  .navds-pageblock--gutters {
+    --__ac-page-padding-inline: var(--a-spacing-12);
+  }
+}

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

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

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

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

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

@@ -0,0 +1,108 @@
+.navds-progress-bar {
+  background: var(--a-surface-neutral-subtle);
+  position: relative;
+  border-radius: var(--a-border-radius-full);
+  overflow: hidden;
+  box-shadow:
+    inset 0 1px 3px 0 rgba(0 0 0 / 0.15),
+    inset 0 0 1px 0 rgba(0 0 0 / 0.2);
+}
+
+.navds-progress-bar--small {
+  height: 12px;
+  min-width: 12px;
+}
+
+.navds-progress-bar--medium {
+  height: 16px;
+  min-width: 16px;
+}
+
+.navds-progress-bar--large {
+  height: 24px;
+  min-width: 24px;
+}
+
+.navds-progress-bar__foreground {
+  --__ac-progress-bar-translate: initial;
+
+  transform: translateX(var(--__ac-progress-bar-translate));
+  background: var(--ac-progress-bar-fg, var(--a-surface-alt-3));
+  transform-origin: left;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  border-radius: inherit;
+  transition: transform 0.2s ease;
+}
+
+.navds-progress-bar__foreground--indeterminate {
+  --__ac-progress-bar-simulated: initial;
+
+  animation-name: navds-progress-bar-indeterminate-grow, navds-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;
+  animation-iteration-count: 1, infinite;
+  animation-delay: 0s, var(--__ac-progress-bar-simulated);
+}
+
+/* navds-progress-bar-indeterminate wave animation */
+@keyframes navds-progress-bar-indeterminate {
+  0% {
+    left: -50%;
+    width: 50%;
+    transform: translateX(0%);
+  }
+
+  50% {
+    animation-direction: reverse;
+    left: 100%;
+    transform: translateX(0%);
+    width: 50%;
+  }
+
+  100% {
+    left: -50%;
+    transform: translateX(0%);
+    width: 50%;
+  }
+}
+
+@keyframes navds-progress-bar-indeterminate-grow {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  20% {
+    transform: translateX(-80%);
+  }
+
+  30% {
+    transform: translateX(-40%);
+  }
+
+  50% {
+    transform: translateX(-20%);
+  }
+
+  75% {
+    transform: translateX(-10%);
+  }
+
+  100% {
+    transform: translateX(-10%);
+  }
+}
+
+@media (forced-colors: active) {
+  .navds-progress-bar__foreground {
+    background: Highlight;
+  }
+
+  .navds-progress-bar {
+    outline: 1px solid transparent;
+  }
+}

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

@@ -0,0 +1,91 @@
+.navds-read-more__button {
+  cursor: pointer;
+  margin: 0;
+  border: none;
+  background: none;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--a-spacing-05);
+  color: var(--ac-read-more-text, var(--a-text-action));
+  border-radius: var(--a-border-radius-small);
+  padding: var(--a-spacing-1) var(--a-spacing-2) var(--a-spacing-1) var(--a-spacing-05);
+  text-align: start;
+}
+
+.navds-read-more--small .navds-read-more__button {
+  padding: var(--a-spacing-05) var(--a-spacing-1-alt) var(--a-spacing-05) var(--a-spacing-05);
+}
+
+@media (forced-colors: active) {
+  .navds-read-more__button {
+    background-color: ButtonFace;
+    border: solid 1px ButtonText;
+    color: ButtonText;
+  }
+
+  .navds-read-more__button.navds-read-more__button:focus-visible {
+    box-shadow: none;
+    outline: 2px solid highlight;
+    outline-offset: 2px;
+  }
+}
+
+.navds-read-more__button:hover {
+  background-color: var(--ac-read-more-hover-bg, var(--a-surface-hover));
+  color: var(--ac-read-more-hover-text, var(--a-text-action-hover));
+}
+
+.navds-read-more__button:active {
+  background-color: var(--ac-read-more-active-bg, var(--a-surface-active));
+}
+
+.navds-read-more__button:focus-visible {
+  outline: none;
+  box-shadow: var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-read-more__button:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
+.navds-read-more__content {
+  margin-top: var(--a-spacing-1);
+  border-left: 2px solid var(--ac-read-more-line, var(--a-border-divider));
+  margin-left: 0.8125rem;
+  padding-left: 0.8125rem;
+  color: var(--a-text-default);
+}
+
+.navds-read-more--small .navds-read-more__content {
+  margin-left: 0.6875rem;
+  padding-left: 0.6875rem;
+}
+
+.navds-read-more__content--closed {
+  display: none;
+}
+
+.navds-read-more__expand-icon {
+  font-size: 1.5rem;
+  flex-shrink: 0;
+}
+
+.navds-read-more--small .navds-read-more__expand-icon {
+  font-size: 1.25rem;
+}
+
+.navds-read-more__button:hover > .navds-read-more__expand-icon {
+  position: relative;
+  top: 1px;
+}
+
+.navds-read-more--open > .navds-read-more__button > .navds-read-more__expand-icon {
+  transform: rotate(-180deg);
+}
+
+.navds-read-more--open > .navds-read-more__button:hover > .navds-read-more__expand-icon {
+  top: -1px;
+}

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

@@ -0,0 +1,67 @@
+.navds-skeleton {
+  background-color: var(--ac-skeleton-bg, var(--a-surface-neutral-moderate));
+  height: 1.3em;
+  animation: akselSkeletonAnimation 0.8s linear infinite alternate;
+  pointer-events: none;
+}
+
+.navds-skeleton--inline {
+  display: inline-block;
+}
+
+.navds-skeleton--has-children {
+  color: transparent;
+}
+
+.navds-skeleton--has-children > * {
+  visibility: hidden;
+}
+
+.navds-skeleton--has-children.navds-skeleton--no-height {
+  height: auto;
+}
+
+.navds-skeleton--has-children.navds-skeleton--no-width {
+  width: fit-content;
+}
+
+.navds-skeleton--text {
+  height: auto;
+  transform-origin: 0 55%;
+  transform: scale(1, 0.6);
+  border-radius: var(--a-border-radius-medium);
+}
+
+.navds-skeleton--text:empty::before {
+  content: "\00a0";
+}
+
+.navds-skeleton--circle {
+  border-radius: var(--a-border-radius-full);
+}
+
+.navds-skeleton--rectangle {
+  border-radius: 0;
+}
+
+.navds-skeleton--rounded {
+  border-radius: var(--a-border-radius-xlarge);
+}
+
+@keyframes akselSkeletonAnimation {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0.4;
+  }
+}
+
+@media (forced-colors: active) {
+  .navds-skeleton {
+    forced-color-adjust: none;
+    background-color: var(--a-surface-neutral);
+    animation-duration: 2s;
+  }
+}

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

@@ -0,0 +1,308 @@
+.navds-stepper {
+  --navds-stepper-circle-size: 1.75rem;
+  --navds-stepper-border-width: 2px;
+  --navds-stepper-line-length: 1rem;
+
+  color: var(--ac-stepper-text, var(--a-surface-action));
+  font-weight: 600;
+  line-height: 1;
+  list-style: none;
+  padding-left: 0;
+  margin: 0;
+}
+
+.navds-stepper--horizontal {
+  display: flex;
+  align-items: flex-start;
+  text-align: center;
+}
+
+.navds-stepper__item {
+  display: grid;
+  grid-template-rows:
+    [line-1] auto [step-start] var(--navds-stepper-circle-size)
+    [line-2 step-end] auto;
+  grid-template-columns: var(--navds-stepper-circle-size) auto;
+  justify-items: flex-start;
+  gap: 0.5rem;
+}
+
+.navds-stepper__line {
+  background-color: var(--ac-stepper-line, var(--a-border-default));
+  width: var(--navds-stepper-border-width);
+  height: 100%;
+  min-height: var(--navds-stepper-line-length);
+  justify-self: center;
+  grid-column: 1;
+}
+
+.navds-stepper__step--behind.navds-stepper__step--completed + .navds-stepper__line {
+  background-color: var(--ac-stepper-line-completed, var(--a-border-selected));
+}
+
+.navds-stepper__item--behind.navds-stepper__item--completed + .navds-stepper__item > .navds-stepper__line--1 {
+  background-color: var(--ac-stepper-line-completed, var(--a-border-selected));
+}
+
+.navds-stepper__line--1 {
+  grid-row: line-1;
+  display: none;
+}
+
+.navds-stepper__line--2 {
+  grid-row: line-2;
+}
+
+:where(.navds-stepper__item:last-of-type) .navds-stepper__line--2 {
+  display: none;
+}
+
+.navds-stepper__step {
+  grid-row: 2 / -1;
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: [circle] var(--navds-stepper-circle-size) [content] auto;
+  gap: var(--a-spacing-2);
+  justify-content: flex-start;
+  text-decoration: none;
+  cursor: pointer;
+  padding: var(--navds-stepper-border-width);
+  margin: calc(var(--navds-stepper-border-width) * -1) calc(var(--navds-stepper-border-width) * -1) 1.75rem;
+}
+
+.navds-stepper__item:last-child .navds-stepper__step {
+  margin-bottom: 0;
+}
+
+@media (forced-colors: active) {
+  .navds-stepper__step {
+    background-color: ButtonFace;
+    color: ButtonText;
+  }
+
+  .navds-stepper__circle.navds-stepper__circle {
+    border: 0;
+  }
+
+  .navds-stepper__step .navds-stepper__circle {
+    forced-color-adjust: none;
+    background-color: ButtonText;
+    border-color: ButtonText;
+    color: ButtonFace;
+  }
+
+  .navds-stepper__step.navds-stepper__step:focus-visible {
+    box-shadow: none;
+    outline: 2px solid highlight;
+    outline-offset: 2px;
+  }
+
+  .navds-stepper__step.navds-stepper__step--active .navds-stepper__circle {
+    forced-color-adjust: none;
+    background-color: highlight;
+    border-color: highlighttext;
+    color: highlighttext;
+  }
+
+  .navds-stepper__line {
+    background-color: ButtonText;
+  }
+}
+
+button.navds-stepper__step {
+  appearance: none;
+  border: none;
+  background-color: transparent;
+  font: inherit;
+  color: inherit;
+  text-align: inherit;
+}
+
+.navds-stepper__step--non-interactive {
+  color: var(--ac-stepper-non-interactive, var(--a-text-subtle));
+  cursor: default;
+}
+
+:where(.navds-stepper__step):focus-visible {
+  outline: none;
+  box-shadow: var(--a-shadow-focus);
+  isolation: isolate;
+}
+
+@supports not selector(:focus-visible) {
+  .navds-stepper__step:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+    isolation: isolate;
+  }
+}
+
+.navds-stepper__circle {
+  grid-column: circle;
+  display: inline-grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: var(--navds-stepper-circle-size);
+  height: var(--navds-stepper-circle-size);
+  border: var(--navds-stepper-border-width) solid currentColor;
+  border-radius: var(--a-border-radius-full);
+  line-height: 1;
+}
+
+.navds-stepper__circle--success {
+  border: none;
+  background: none;
+  font-size: 1.75rem;
+  color: var(--a-text-on-action);
+  background-color: var(--ac-stepper-text, var(--a-surface-action));
+}
+
+.navds-stepper__content {
+  min-width: fit-content;
+  line-height: 1.5;
+  grid-column: content;
+  padding-top: 0.035rem;
+}
+
+/* Horizontal */
+:where(.navds-stepper--horizontal) .navds-stepper__item {
+  flex: 1 1 100%;
+  grid-template-columns:
+    [line-1-start] 1fr [step-start] auto [line-1-end] var(--navds-stepper-circle-size)
+    [line-2-start] auto [step-end] 1fr [line-2-end];
+  grid-template-rows: var(--navds-stepper-circle-size) auto;
+}
+
+:where(.navds-stepper--horizontal) .navds-stepper__line {
+  height: var(--navds-stepper-border-width);
+  width: 100%;
+  min-height: auto;
+  grid-row: 1;
+  display: block;
+  align-self: center;
+}
+
+:where(.navds-stepper--horizontal) .navds-stepper__line--1 {
+  grid-column: line-1;
+}
+
+:where(.navds-stepper--horizontal) .navds-stepper__line--2 {
+  grid-column: line-2;
+}
+
+:where(.navds-stepper--horizontal .navds-stepper__item:first-of-type) .navds-stepper__line--1,
+:where(.navds-stepper--horizontal .navds-stepper__item:last-of-type) .navds-stepper__line--2 {
+  visibility: hidden;
+}
+
+:where(.navds-stepper--horizontal) .navds-stepper__step {
+  grid-row: 1 / -1;
+  grid-column: step;
+  display: grid;
+  grid-template-rows: [circle] var(--navds-stepper-circle-size) [content] auto;
+  grid-template-columns:
+    [content-start] auto [circle] var(--navds-stepper-circle-size)
+    [content-end] auto;
+  place-items: center center;
+  margin-bottom: 0;
+}
+
+:where(.navds-stepper--horizontal) .navds-stepper__circle {
+  grid-row: circle;
+  grid-column: 2;
+}
+
+:where(.navds-stepper--horizontal) .navds-stepper__content {
+  grid-row: content;
+  grid-column: 1 / -1;
+  max-width: 24ch;
+}
+
+/* Active step */
+:where(.navds-stepper__step--active) .navds-stepper__content {
+  color: var(--ac-stepper-active, var(--a-text-action-selected));
+}
+
+.navds-stepper__step:hover:where(:not(.navds-stepper__step--non-interactive)) {
+  color: var(--ac-stepper-hover-active, var(--a-text-action-hover));
+}
+
+:where(.navds-stepper__step:hover) .navds-stepper__content {
+  text-decoration: underline;
+}
+
+:where(.navds-stepper__step--non-interactive:hover, .navds-stepper__step--active:hover) .navds-stepper__content {
+  text-decoration: none;
+}
+
+:where(.navds-stepper__step--active) .navds-stepper__circle {
+  background-color: var(--ac-stepper-active-bg, var(--a-surface-action-selected));
+  border-color: var(--ac-stepper-active-border, var(--a-border-action-selected));
+  color: var(--ac-stepper-active-text, var(--a-text-on-action));
+}
+
+:where(.navds-stepper__step:not(.navds-stepper__step--active):hover) .navds-stepper__circle {
+  background-color: var(--ac-stepper-hover-bg, var(--a-surface-action-subtle-hover));
+}
+
+:where(.navds-stepper__step:not(.navds-stepper__step--active):hover) .navds-stepper__circle--success {
+  background-color: var(--ac-stepper-text, var(--a-surface-action-hover));
+}
+
+/* Non-interactive */
+:where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__content {
+  color: var(--ac-stepper-non-interactive-active, var(--a-text-default));
+}
+
+.navds-stepper__step--non-interactive.navds-stepper__step--behind.navds-stepper__step--completed + .navds-stepper__line {
+  background-color: var(--ac-stepper-non-interactive-line-completed, var(--a-border-strong));
+}
+
+.navds-stepper__item--non-interactive.navds-stepper__item--behind.navds-stepper__item--completed
+  + .navds-stepper__item
+  > .navds-stepper__line--1 {
+  background-color: var(--ac-stepper-non-interactive-line-completed, var(--a-border-strong));
+}
+
+:where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__circle {
+  background-color: var(--ac-stepper-non-interactive-active-bg, var(--a-surface-inverted));
+  border-color: var(--ac-stepper-non-interactive-active-border, var(--a-surface-inverted));
+  color: var(--ac-stepper-non-interactive-active-text, var(--a-text-on-inverted));
+}
+
+:where(.navds-stepper__step--non-interactive:hover) .navds-stepper__circle {
+  background-color: transparent;
+}
+
+:where(.navds-stepper__step--non-interactive.navds-stepper__step--active:hover) .navds-stepper__circle {
+  background-color: var(--ac-stepper-non-interactive-active-bg, var(--a-surface-inverted));
+}
+
+:where(.navds-stepper__step--completed.navds-stepper__step--active) .navds-stepper__circle {
+  background-color: inherit;
+  color: var(--ac-stepper-active-completed, var(--a-text-action-selected));
+}
+
+:where(.navds-stepper__step--completed.navds-stepper__step--active) .navds-stepper__circle--success {
+  color: var(--a-text-on-action);
+  background-color: var(--ac-stepper-active-completed, var(--a-surface-action-selected));
+}
+
+:where(.navds-stepper__step--non-interactive, .navds-stepper__step--non-interactive:hover) .navds-stepper__circle--success {
+  color: var(--a-text-on-inverted);
+  background-color: var(--ac-stepper-non-interactive-completed-bg, var(--a-surface-neutral));
+}
+
+:where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__circle--success {
+  color: var(--a-text-on-inverted);
+  background-color: var(--ac-stepper-non-interactive-active-completed, var(--a-surface-inverted));
+}
+
+:where(.navds-stepper__step--completed.navds-stepper__step--active.navds-stepper__step--non-interactive) .navds-stepper__circle {
+  color: var(--ac-stepper-non-interactive-active-completed, var(--a-text-default));
+}
+
+:where(.navds-stepper__step--completed.navds-stepper__step--active.navds-stepper__step--non-interactive)
+  .navds-stepper__circle--success {
+  color: var(--ac-stepper-non-interactive-active-completed, var(--a-text-on-inverted));
+}

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

@@ -0,0 +1,286 @@
+.navds-table {
+  width: 100%;
+  border-collapse: collapse;
+  display: table;
+}
+
+.navds-table__header {
+  display: table-header-group;
+}
+
+.navds-table__body {
+  display: table-row-group;
+}
+
+.navds-table__row {
+  display: table-row;
+}
+
+.navds-table__body .navds-table__row--shade-on-hover:not(.navds-table__expandable-row--expansion-disabled):hover {
+  background-color: var(--ac-table-row-hover, var(--a-bg-subtle));
+}
+
+.navds-table__row--selected {
+  background-color: var(--ac-table-row-selected, var(--a-surface-action-subtle));
+}
+
+.navds-table__body .navds-table__row--shade-on-hover.navds-table__row--selected:hover {
+  background-color: var(--ac-table-row-selected-hover, var(--a-surface-action-subtle-hover));
+}
+
+.navds-table--zebra-stripes .navds-table__body :where(.navds-table__row:nth-child(odd):not(.navds-table__row--selected)) {
+  background-color: var(--ac-table-row-zebra, var(--a-surface-subtle));
+}
+
+.navds-table--zebra-stripes
+  .navds-table__body
+  :where(.navds-table__expandable-row:nth-child(4n + 1):not(.navds-table__row--selected)) {
+  background-color: transparent;
+}
+
+.navds-table--zebra-stripes .navds-table__body .navds-table__expanded-row:nth-child(4n) {
+  background-color: var(--ac-table-row-zebra, var(--a-surface-subtle));
+}
+
+.navds-table__header-cell,
+.navds-table__data-cell {
+  display: table-cell;
+  padding: var(--a-spacing-3) var(--a-spacing-2);
+  border-bottom: 1px solid var(--ac-table-row-border, var(--a-border-default));
+  text-align: left;
+}
+
+.navds-table__header .navds-table__header-cell,
+.navds-table__header .navds-table__data-cell {
+  border-bottom-width: 2px;
+}
+
+.navds-table__header-cell--align-right,
+.navds-table__data-cell--align-right {
+  text-align: right;
+}
+
+.navds-table__header-cell--align-center,
+.navds-table__data-cell--align-center {
+  text-align: center;
+}
+
+:where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__header-cell,
+:where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__data-cell {
+  border-color: var(--ac-table-cell-hover-border, var(--a-border-strong));
+}
+
+:where(.navds-table__expandable-row--open:hover) .navds-table__data-cell {
+  border-bottom-color: transparent;
+}
+
+.navds-table--large .navds-table__header-cell,
+.navds-table--large .navds-table__data-cell {
+  padding: var(--a-spacing-4) var(--a-spacing-2);
+}
+
+.navds-table--small .navds-table__header-cell,
+.navds-table--small .navds-table__data-cell {
+  padding: var(--a-spacing-1) var(--a-spacing-2);
+}
+
+.navds-table :not(.navds-checkboxes) > .navds-checkbox .navds-checkbox__input {
+  top: -0.75rem;
+}
+
+.navds-table :not(.navds-checkboxes) > .navds-checkbox--small .navds-checkbox__input {
+  top: -0.375rem;
+}
+
+.navds-table :not(.navds-checkboxes) > .navds-checkbox .navds-checkbox__label {
+  padding: 0;
+}
+
+.navds-table__header-cell[aria-sort] {
+  padding: 0;
+}
+
+.navds-table__sort-button {
+  appearance: none;
+  background: none;
+  color: var(--ac-table-sort-button-text, var(--a-text-action));
+  border: none;
+  cursor: pointer;
+  margin: 0;
+  padding: var(--a-spacing-4) var(--a-spacing-3);
+  width: 100%;
+  display: flex;
+  gap: var(--a-spacing-2);
+  align-items: center;
+  line-height: inherit;
+  font-weight: inherit;
+}
+
+.navds-table--small .navds-table__sort-button {
+  padding: var(--a-spacing-2) var(--a-spacing-3);
+}
+
+.navds-table__sort-button:hover {
+  background-color: var(--ac-table-sort-button-hover-bg, var(--a-bg-subtle));
+}
+
+.navds-table__sort-button:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--a-border-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-table__sort-button:focus {
+    outline: none;
+    box-shadow: inset 0 0 0 2px var(--a-border-focus);
+  }
+}
+
+.navds-table__header-cell[aria-sort="ascending"] .navds-table__sort-button,
+.navds-table__header-cell[aria-sort="descending"] .navds-table__sort-button {
+  background-color: var(--ac-table-sort-button-sorted-bg, var(--a-surface-selected));
+  color: var(--ac-table-sort-button-sorted-text, var(--a-table-sort-button-sorted-text, var(--a-text-action-on-action-subtle)));
+}
+
+.navds-table__header-cell--align-right .navds-table__sort-button {
+  justify-content: flex-end;
+}
+
+.navds-table__header-cell--align-center .navds-table__sort-button {
+  justify-content: center;
+}
+
+.navds-table__sort-button svg {
+  font-size: 1rem;
+  flex-shrink: 0;
+}
+
+.navds-table__expandable-row:not(.navds-table__expandable-row--open) .navds-table__data-cell {
+  transition: border-bottom-color 190ms cubic-bezier(0.6, 0.04, 0.98, 0.335);
+}
+
+.navds-table__expandable-row.navds-table__expandable-row--clickable:not(.navds-table__expandable-row--expansion-disabled):hover {
+  cursor: pointer;
+}
+
+.navds-table__expandable-row--open .navds-table__data-cell {
+  border-bottom-color: transparent;
+}
+
+.navds-table__expandable-row--open .navds-table__header-cell {
+  border-color: var(--ac-table-row-border, var(--a-border-default));
+}
+
+.navds-table__expandable-row--open .navds-table__toggle-expand-cell--open {
+  border-color: transparent;
+}
+
+.navds-table__toggle-expand-cell {
+  padding: 0;
+  width: 3rem;
+}
+
+.navds-table--large .navds-table__toggle-expand-cell {
+  padding: 0 var(--a-spacing-2);
+}
+
+.navds-table--small .navds-table__toggle-expand-cell {
+  padding: var(--a-spacing-1) var(--a-spacing-2);
+}
+
+.navds-table__toggle-expand-button {
+  display: grid;
+  place-content: center;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  border-radius: var(--a-border-radius-medium);
+  height: 2rem;
+  width: 2rem;
+  font-size: 1.5rem;
+  margin: 0 auto;
+}
+
+.navds-table__expandable-icon {
+  transition: transform 150ms ease-in-out;
+}
+
+.navds-table__toggle-expand-cell:hover {
+  cursor: pointer;
+}
+
+.navds-table__toggle-expand-button:hover,
+.navds-table__toggle-expand-cell:hover > .navds-table__toggle-expand-button,
+.navds-table__expandable-row--clickable:hover .navds-table__toggle-expand-button {
+  background-color: var(--a-surface-hover);
+}
+
+.navds-table__toggle-expand-cell--open > :where(.navds-table__toggle-expand-button) :where(.navds-table__expandable-icon) {
+  transform: translateY(0) rotate(180deg);
+}
+
+.navds-table__toggle-expand-button:hover > :where(.navds-table__expandable-icon) {
+  transform: translateY(1px);
+}
+
+.navds-table__toggle-expand-cell--open > .navds-table__toggle-expand-button:hover > :where(.navds-table__expandable-icon) {
+  transform: translateY(-1px) rotate(180deg);
+}
+
+.navds-table__toggle-expand-button:focus-visible {
+  outline: none;
+  box-shadow: var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-table__toggle-expand-button:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
+.navds-table__expanded-row-cell {
+  padding: 0;
+}
+
+.navds-table__expanded-row-cell:empty {
+  display: none;
+}
+
+.navds-table__expanded-row-collapse:not([style*="height: 0px;"]) {
+  border-bottom: 1px solid var(--ac-table-row-border, var(--a-border-default));
+}
+
+.navds-table__expanded-row-content {
+  padding: var(--a-spacing-4) calc(var(--a-spacing-2) + 3rem);
+}
+
+.navds-table--small .navds-table__expanded-row-content {
+  padding: var(--a-spacing-2) calc(var(--a-spacing-2) + 3rem);
+}
+
+@media (forced-colors: active) {
+  .navds-date.navds-date button.rdp-day_selected {
+    forced-color-adjust: none;
+    background-color: highlight;
+    color: highlighttext;
+    box-shadow: none;
+  }
+
+  .navds-date.navds-date button {
+    color: buttontext;
+    forced-color-adjust: none;
+    outline: none;
+    box-shadow: none;
+  }
+
+  .navds-date button:focus-visible {
+    color: buttontext;
+    forced-color-adjust: none;
+    outline: 2px solid highlight;
+  }
+
+  .navds-date.navds-date button.rdp-day_disabled {
+    color: GrayText;
+  }
+}

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

@@ -0,0 +1,154 @@
+.navds-tabs__tablist-wrapper {
+  box-shadow: inset 0 -1px 0 0 var(--ac-tabs-border, var(--a-border-divider));
+  width: 100%;
+  display: flex;
+}
+
+.navds-tabs__tablist {
+  display: flex;
+  max-width: 100%;
+  width: 100%;
+  scroll-behavior: smooth;
+  -ms-overflow-style: none; /* for Internet Explorer, Edge */
+  scrollbar-width: none; /* for Firefox */
+  overflow-x: scroll;
+}
+
+.navds-tabs__tablist::-webkit-scrollbar {
+  display: none; /* for Chrome, Safari, and Opera */
+}
+
+.navds-tabs__scroll-button {
+  padding: var(--a-spacing-3) var(--a-spacing-4);
+  width: 2.75rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.navds-tabs__scroll-button--hidden {
+  visibility: hidden;
+}
+
+.navds-tabs__scroll-button svg {
+  font-size: 1.25rem;
+  flex-shrink: 0;
+}
+
+.navds-tabs--small .navds-tabs__scroll-button {
+  padding: var(--a-spacing-1-alt) var(--a-spacing-4);
+  width: 2rem;
+}
+
+.navds-tabs__tab {
+  min-height: 3rem;
+  padding: var(--a-spacing-3) var(--a-spacing-4);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  background: none;
+  border: none;
+  color: var(--ac-tabs-text, var(--a-text-default));
+  cursor: pointer;
+}
+
+.navds-tabs__tab:hover {
+  box-shadow: inset 0 -3px 0 0 var(--ac-tabs-hover-border, var(--a-border-subtle-hover));
+}
+
+.navds-tabs__tab[aria-selected="true"] {
+  box-shadow: inset 0 -3px 0 0 var(--ac-tabs-selected-border, var(--a-border-action-selected));
+  color: var(--ac-tabs-selected-text, var(--a-text-default));
+}
+
+.navds-tabs__tab:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+  box-shadow: inset var(--a-shadow-focus);
+  color: var(--ac-tabs-focus-text, var(--a-text-default));
+}
+
+@supports not selector(:focus-visible) {
+  .navds-tabs__tab:focus {
+    outline: 2px solid transparent;
+    box-shadow: inset var(--a-shadow-focus);
+    color: var(--ac-tabs-focus-text, var(--a-text-default));
+  }
+}
+
+.navds-tabs__tab-inner {
+  display: flex;
+  align-items: center;
+  gap: var(--a-spacing-1);
+}
+
+.navds-tabs__tab-inner > * {
+  display: inline-flex;
+}
+
+.navds-tabs__tab-inner svg {
+  flex-shrink: 0;
+}
+
+.navds-tabs__tab-icon--top > .navds-tabs__tab-inner {
+  flex-direction: column;
+  gap: 0;
+}
+
+.navds-tabs__tab--small {
+  min-height: 2rem;
+  padding: var(--a-spacing-1-alt) var(--a-spacing-4);
+}
+
+.navds-tabs__tab-icon--top,
+.navds-tabs__tab--small.navds-tabs__tab-icon--top {
+  padding: var(--a-spacing-1) var(--a-spacing-4);
+}
+
+.navds-tabs__tab svg,
+.navds-tabs__tab--small.navds-tabs__tab--icon-only svg,
+.navds-tabs__tab--small.navds-tabs__tab-icon--top svg {
+  font-size: 1.25rem;
+}
+
+.navds-tabs__tab--small svg {
+  font-size: 1rem;
+}
+
+.navds-tabs__tab--icon-only svg,
+.navds-tabs__tab-icon--top svg {
+  font-size: 1.5rem;
+}
+
+.navds-tabs__tab--fill {
+  flex: 1 1 100%;
+}
+
+.navds-tabs__tabpanel:focus-visible {
+  outline: 2px solid transparent;
+  box-shadow: inset 0 0 0 2px var(--a-border-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-tabs__tabpanel:focus {
+    outline: 2px solid transparent;
+    box-shadow: inset 0 0 0 2px var(--a-border-focus);
+  }
+}
+
+@media (forced-colors: active) {
+  .navds-tabs__tab[aria-selected="true"] {
+    border-bottom: 3px solid canvastext;
+    padding-block-end: calc(var(--a-spacing-3) - 3px);
+  }
+
+  .navds-tabs__tab--small[aria-selected="true"] {
+    padding-block-end: calc(var(--a-spacing-1-alt) - 3px);
+  }
+
+  .navds-tabs__tab-icon--top[aria-selected="true"],
+  .navds-tabs__tab--small.navds-tabs__tab-icon--top[aria-selected="true"] {
+    padding-block-end: calc(var(--a-spacing-1) - 3px);
+  }
+}

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

@@ -0,0 +1,194 @@
+.navds-tag {
+  --__ac-tag-icon-size: 1.5rem;
+  --__ac-tag-icon-margin: -2px;
+
+  border: 1px solid;
+  border-radius: var(--a-border-radius-small);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--a-spacing-05) var(--a-spacing-2);
+  min-height: 2rem;
+  line-height: 1;
+}
+
+.navds-tag--small {
+  min-height: 1.5rem;
+  padding: 0 var(--a-spacing-1-alt);
+
+  --__ac-tag-icon-size: 1.25rem;
+}
+
+.navds-tag--xsmall {
+  min-height: 1.25rem;
+  padding: 0 var(--a-spacing-1);
+
+  --__ac-tag-icon-size: 1rem;
+  --__ac-tag-icon-margin: -1px;
+}
+
+.navds-tag:has(.navds-tag__icon--left) {
+  gap: var(--a-spacing-05);
+}
+
+.navds-tag__icon--left {
+  font-size: var(--__ac-tag-icon-size);
+  margin-inline-start: var(--__ac-tag-icon-margin);
+  display: flex;
+}
+
+.navds-tag--error {
+  border-color: var(--ac-tag-error-border, var(--a-border-danger));
+  background-color: var(--ac-tag-error-bg, var(--a-surface-danger-subtle));
+  color: var(--ac-tag-error-text, var(--a-text-default));
+}
+
+.navds-tag--error-filled {
+  border-color: transparent;
+  background-color: var(--ac-tag-error-filled-bg, var(--a-surface-danger));
+  color: var(--ac-tag-error-filled-text, var(--a-text-on-danger));
+}
+
+.navds-tag--error-moderate {
+  border-color: transparent;
+  background-color: var(--ac-tag-error-moderate-bg, var(--a-surface-danger-moderate));
+  color: var(--ac-tag-error-moderate-text, var(--a-text-default));
+}
+
+.navds-tag--success {
+  border-color: var(--ac-tag-success-border, var(--a-border-success));
+  background-color: var(--ac-tag-success-bg, var(--a-surface-success-subtle));
+  color: var(--ac-tag-success-text, var(--a-text-default));
+}
+
+.navds-tag--success-filled {
+  border-color: transparent;
+  background-color: var(--ac-tag-success-filled-bg, var(--a-surface-success));
+  color: var(--ac-tag-success-filled-text, var(--a-text-on-success));
+}
+
+.navds-tag--success-moderate {
+  border-color: transparent;
+  background-color: var(--ac-tag-success-moderate-bg, var(--a-surface-success-moderate));
+  color: var(--ac-tag-success-moderate-text, var(--a-text-default));
+}
+
+.navds-tag--warning {
+  border-color: var(--ac-tag-warning-border, var(--a-border-warning));
+  background-color: var(--ac-tag-warning-bg, var(--a-surface-warning-subtle));
+  color: var(--ac-tag-warning-text, var(--a-text-default));
+}
+
+.navds-tag--warning-filled {
+  border-color: transparent;
+  background-color: var(--ac-tag-warning-filled-bg, var(--a-surface-warning));
+  color: var(--ac-tag-warning-filled-text, var(--a-text-on-warning));
+}
+
+.navds-tag--warning-moderate {
+  border-color: transparent;
+  background-color: var(--ac-tag-warning-moderate-bg, var(--a-surface-warning-moderate));
+  color: var(--ac-tag-warning-moderate-text, var(--a-text-default));
+}
+
+.navds-tag--info {
+  border-color: var(--ac-tag-info-border, var(--a-border-info));
+  background-color: var(--ac-tag-info-bg, var(--a-surface-info-subtle));
+  color: var(--ac-tag-info-text, var(--a-text-default));
+}
+
+.navds-tag--info-filled {
+  border-color: transparent;
+  background-color: var(--ac-tag-info-filled-bg, var(--a-surface-info));
+  color: var(--ac-tag-info-filled-text, var(--a-text-on-info));
+}
+
+.navds-tag--info-moderate {
+  border-color: transparent;
+  background-color: var(--ac-tag-info-moderate-bg, var(--a-surface-info-moderate));
+  color: var(--ac-tag-info-moderate-text, var(--a-text-default));
+}
+
+.navds-tag--neutral {
+  border-color: var(--ac-tag-neutral-border, var(--a-border-default));
+  background-color: var(--ac-tag-neutral-bg, var(--a-surface-neutral-subtle));
+  color: var(--ac-tag-neutral-text, var(--a-text-default));
+}
+
+.navds-tag--neutral-filled {
+  border-color: transparent;
+  background-color: var(--ac-tag-neutral-filled-bg, var(--a-surface-neutral));
+  color: var(--ac-tag-neutral-filled-text, var(--a-text-on-neutral));
+}
+
+.navds-tag--neutral-moderate {
+  border-color: transparent;
+  background-color: var(--ac-tag-neutral-moderate-bg, var(--a-surface-neutral-moderate));
+  color: var(--ac-tag-neutral-moderate-text, var(--a-text-default));
+}
+
+.navds-tag--alt1 {
+  border-color: var(--ac-tag-alt-1-border, var(--a-border-alt-1));
+  background-color: var(--ac-tag-alt-1-bg, var(--a-surface-alt-1-subtle));
+  color: var(--ac-tag-alt-1-text, var(--a-text-default));
+}
+
+.navds-tag--alt1-filled {
+  border-color: transparent;
+  background-color: var(--ac-tag-alt-1-filled-bg, var(--a-surface-alt-1));
+  color: var(--ac-tag-alt-1-filled-text, var(--a-text-on-alt-1));
+}
+
+.navds-tag--alt1-moderate {
+  border-color: transparent;
+  background-color: var(--ac-tag-alt-1-moderate-bg, var(--a-surface-alt-1-moderate));
+  color: var(--ac-tag-alt-1-moderate-text, var(--a-text-default));
+}
+
+.navds-tag--alt2 {
+  border-color: var(--ac-tag-alt-2-border, var(--a-border-alt-2));
+  background-color: var(--ac-tag-alt-2-bg, var(--a-surface-alt-2-subtle));
+  color: var(--ac-tag-alt-2-text, var(--a-text-default));
+}
+
+.navds-tag--alt2-filled {
+  border-color: transparent;
+  background-color: var(--ac-tag-alt-2-filled-bg, var(--a-surface-alt-2));
+  color: var(--ac-tag-alt-2-filled-text, var(--a-text-on-alt-2));
+}
+
+.navds-tag--alt2-moderate {
+  border-color: transparent;
+  background-color: var(--ac-tag-alt-2-moderate-bg, var(--a-surface-alt-2-moderate));
+  color: var(--ac-tag-alt-2-moderate-text, var(--a-text-default));
+}
+
+.navds-tag--alt3 {
+  border-color: var(--ac-tag-alt-3-border, var(--a-border-alt-3));
+  background-color: var(--ac-tag-alt-3-bg, var(--a-surface-alt-3-subtle));
+  color: var(--ac-tag-alt-3-text, var(--a-text-default));
+}
+
+.navds-tag--alt3-filled {
+  border-color: transparent;
+  background-color: var(--ac-tag-alt-3-filled-bg, var(--a-surface-alt-3));
+  color: var(--ac-tag-alt-3-filled-text, var(--a-text-on-alt-3));
+}
+
+.navds-tag--alt3-moderate {
+  border-color: transparent;
+  background-color: var(--ac-tag-alt-3-moderate-bg, var(--a-surface-alt-3-moderate));
+  color: var(--ac-tag-alt-3-moderate-text, var(--a-text-default));
+}
+
+@media (forced-colors: active) {
+  .navds-tag {
+    forced-color-adjust: none;
+  }
+
+  .navds-tag--neutral,
+  .navds-tag--neutral-moderate {
+    border-color: canvastext;
+    color: canvastext;
+  }
+}

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

@@ -0,0 +1,449 @@
+.navds-timeline {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  width: 100%;
+  min-width: fit-content;
+  align-items: center;
+}
+
+.navds-timeline__axislabels {
+  position: relative;
+  height: 1rem;
+  box-sizing: content-box;
+  grid-column: 2;
+  margin-bottom: var(--a-spacing-1);
+}
+
+.navds-timeline__row-label {
+  white-space: nowrap;
+  width: auto;
+  margin-right: var(--a-spacing-4);
+  grid-column: 1;
+  min-height: 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: var(--a-spacing-2);
+}
+
+.navds-timeline__row-label:where(:nth-last-child(2)) {
+  align-self: flex-end;
+}
+
+.navds-timeline__axislabels-label {
+  position: absolute;
+  color: var(--ac-timeline-axislabel-text, var(--a-text-subtle));
+  white-space: nowrap;
+}
+
+.navds-timeline__row {
+  display: flex;
+  background: var(--ac-timeline-row-bg, var(--a-surface-subtle));
+  margin: var(--a-spacing-4) 0;
+  grid-column: 2;
+}
+
+.navds-timeline__row--active {
+  background: var(--ac-timeline-row-active-bg, var(--a-surface-selected));
+}
+
+.navds-timeline__row:last-of-type {
+  margin-bottom: 0;
+}
+
+.navds-timeline__row-periods {
+  min-height: 1.5rem;
+  position: relative;
+  width: 100%;
+  margin: 0;
+}
+
+.navds-timeline__row-periods > li {
+  list-style-type: none;
+}
+
+.navds-timeline__row-periods:focus {
+  outline: none;
+}
+
+.navds-timeline__period {
+  height: 100%;
+  border-radius: var(--a-border-radius-full);
+  position: absolute;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  z-index: 2;
+  border: none;
+  font-size: 1rem;
+}
+
+.navds-timeline__period--inner {
+  margin: 0 var(--a-spacing-1);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: clip;
+  text-align: left;
+  display: flex;
+  align-items: center;
+}
+
+.navds-timeline__period--inner svg {
+  flex-shrink: 0;
+}
+
+.navds-timeline__period--clickable {
+  cursor: pointer;
+}
+
+.navds-timeline__period--success {
+  background: var(--ac-timeline-period-success-bg, var(--a-surface-success-subtle));
+  box-shadow: inset 0 0 0 1px var(--ac-timeline-period-success-border, var(--a-border-success));
+}
+
+.navds-timeline__period--success.navds-timeline__period--clickable:hover {
+  background: var(--a-surface-success-subtle-hover);
+  background: var(--ac-timeline-period-success-bg-hover, var(--a-surface-success-subtle-hover));
+}
+
+.navds-timeline__period--warning {
+  background: var(--ac-timeline-period-warning-bg, var(--a-surface-warning-subtle));
+  box-shadow: inset 0 0 0 1px var(--ac-timeline-period-warning-border, var(--a-border-warning));
+}
+
+.navds-timeline__period--warning.navds-timeline__period--clickable:hover {
+  background: var(--ac-timeline-period-warning-bg-hover, var(--a-surface-warning-subtle-hover));
+}
+
+.navds-timeline__period--danger {
+  background: var(--ac-timeline-period-danger-bg, var(--a-surface-danger-subtle));
+  box-shadow: inset 0 0 0 1px var(--ac-timeline-period-danger-border, var(--a-border-danger));
+}
+
+.navds-timeline__period--danger.navds-timeline__period--clickable:hover {
+  background: var(--ac-timeline-period-danger-bg-hover, var(--a-surface-danger-subtle-hover));
+}
+
+.navds-timeline__period--info {
+  background: var(--ac-timeline-period-info-bg, var(--a-surface-info-subtle));
+  box-shadow: inset 0 0 0 1px var(--ac-timeline-period-info-border, var(--a-border-info));
+}
+
+.navds-timeline__period--info.navds-timeline__period--clickable:hover {
+  background: var(--ac-timeline-period-info-bg-hover, var(--a-surface-info-subtle-hover));
+}
+
+.navds-timeline__period--neutral {
+  background: var(--ac-timeline-period-neutral-bg, var(--a-bg-subtle));
+  box-shadow: inset 0 0 0 1px var(--ac-timeline-period-neutral-border, var(--a-border-default));
+}
+
+.navds-timeline__period--neutral.navds-timeline__period--clickable:hover {
+  background: var(--ac-timeline-period-neutral-bg-hover, var(--a-gray-200));
+}
+
+.navds-timeline__period--connected-both {
+  border-radius: 0;
+}
+
+.navds-timeline__period--connected-right {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.navds-timeline__period--connected-left {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
+
+.navds-timeline__period--selected {
+  box-shadow: inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected));
+  z-index: 3;
+}
+
+.navds-timeline__pin-wrapper {
+  position: absolute;
+  grid-column: 2;
+  top: 0;
+  z-index: 1;
+  height: 100%;
+  display: flex;
+  flex-direction: column-reverse;
+  isolation: isolate;
+
+  --navdsc-timeline-pin-size: 0.9rem;
+}
+
+.navds-timeline__pin-button {
+  border: none;
+  cursor: pointer;
+  background: var(--a-surface-default);
+  box-shadow:
+    inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+    0 0 0 4px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+    0 0 0 5px var(--a-surface-default);
+  z-index: 2;
+  border-radius: var(--a-border-radius-full);
+  padding: var(--a-spacing-1);
+  position: relative;
+}
+
+.navds-timeline__pin-button::before {
+  content: "";
+  inset: 0;
+  position: absolute;
+  width: 25px;
+  height: 25px;
+  border-radius: var(--a-border-radius-full);
+  left: calc(-12.5px + 3.5px);
+  top: calc(-12.5px + 3.5px);
+}
+
+.navds-timeline__pin-button:focus-visible {
+  box-shadow:
+    inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+    0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+    0 0 0 4px var(--a-surface-default),
+    0 0 0 6px var(--a-border-focus);
+  outline: none;
+}
+
+.navds-timeline__pin-button:hover {
+  box-shadow:
+    inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+    0 0 0 4px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+    0 0 0 5px var(--a-surface-default);
+}
+
+.navds-timeline__pin-button:hover:focus-visible {
+  box-shadow:
+    inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+    0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+    0 0 0 4px var(--a-surface-default),
+    0 0 0 6px var(--a-border-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-timeline__pin-button:focus {
+    box-shadow:
+      inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+      0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+      0 0 0 4px var(--a-surface-default),
+      0 0 0 6px var(--a-border-focus);
+    outline: none;
+  }
+
+  .navds-timeline__pin-button:hover:focus {
+    box-shadow:
+      inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+      0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+      0 0 0 4px var(--a-surface-default),
+      0 0 0 6px var(--a-border-focus);
+  }
+}
+
+.navds-timeline__pin-wrapper::before {
+  content: "";
+  top: var(--navdsc-timeline-pin-size);
+  height: calc(100% - var(--navdsc-timeline-pin-size) * 2);
+  width: 1px;
+  margin: 0 auto;
+  background: var(--a-surface-inverted);
+}
+
+.navds-timeline__zoom {
+  margin-top: var(--a-spacing-6);
+  float: right;
+  display: flex;
+  list-style-type: none;
+}
+
+.navds-timeline__zoom-button {
+  all: unset;
+  cursor: pointer;
+  padding: 6px 9px 6px 8px;
+  border: 1px solid var(--ac-timeline-zoom-border, var(--a-border-default));
+  border-width: 1px 0 1px 1px;
+  background: var(--ac-timeline-zoom-bg, var(--a-surface-default));
+}
+
+.navds-timeline__zoom li:first-child .navds-timeline__zoom-button {
+  border-radius: var(--a-border-radius-medium) 0 0 var(--a-border-radius-medium);
+}
+
+.navds-timeline__zoom li:last-child .navds-timeline__zoom-button {
+  border-width: 1px;
+  border-radius: 0 var(--a-border-radius-medium) var(--a-border-radius-medium) 0;
+}
+
+.navds-timeline__zoom li:only-child .navds-timeline__zoom-button {
+  border-radius: var(--a-border-radius-medium);
+}
+
+.navds-timeline__zoom-button:not([aria-pressed="true"]):hover {
+  background: var(--ac-timeline-zoom-bg-hover, var(--a-surface-action-subtle-hover));
+}
+
+.navds-timeline__zoom-button[aria-pressed="true"] {
+  background: var(--ac-timeline-zoom-selected-bg, var(--a-surface-inverted));
+  color: var(--ac-timeline-zoom-selected-text, var(--a-text-on-inverted));
+}
+
+.navds-timeline__period:focus-visible {
+  outline: none;
+  z-index: 4;
+  box-shadow: 0 0 0 2px var(--a-border-focus);
+}
+
+.navds-timeline__period--selected:focus-visible {
+  box-shadow:
+    inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
+    0 0 0 2px var(--a-border-focus);
+  z-index: 3;
+}
+
+.navds-timeline__zoom li:focus-within {
+  z-index: var(--a-z-index-focus);
+}
+
+.navds-timeline__zoom-button:focus-visible {
+  box-shadow:
+    0 0 0 1px var(--a-surface-default),
+    0 0 0 3px var(--a-border-focus);
+  border-width: 1px;
+}
+
+.navds-timeline__zoom li:not(:last-child) .navds-timeline__zoom-button:focus-visible {
+  margin-right: 2px;
+  padding-right: 6px;
+}
+
+@supports not selector(:focus-visible) {
+  .navds-timeline__period:focus {
+    outline: none;
+    z-index: 4;
+    box-shadow: 0 0 0 2px var(--a-border-focus);
+  }
+
+  .navds-timeline__period--selected:focus {
+    box-shadow:
+      inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
+      0 0 0 2px var(--a-border-focus);
+    z-index: 3;
+  }
+
+  .navds-timeline__zoom-button:focus {
+    box-shadow:
+      0 0 0 1px var(--a-surface-default),
+      0 0 0 3px var(--a-border-focus);
+    border-width: 1px;
+  }
+
+  .navds-timeline__zoom li:not(:last-child) .navds-timeline__zoom-button:focus {
+    margin-right: 2px;
+    padding-right: 6px;
+  }
+}
+
+/**
+* Timeline Popover
+*/
+
+.navds-timeline__popover {
+  z-index: var(--a-z-index-popover);
+  background-color: var(--ac-popover-bg, var(--a-surface-default));
+  box-shadow: var(--a-shadow-medium);
+  border: 1px solid;
+  border-color: var(--ac-popover-border, var(--a-border-default));
+  border-radius: var(--a-border-radius-large);
+  padding: var(--a-spacing-3);
+}
+
+.navds-timeline__popover:focus {
+  outline: none;
+}
+
+.navds-timeline__popover-arrow {
+  position: absolute;
+  z-index: -1;
+  transform: rotate(45deg);
+  background-color: var(--ac-popover-bg, var(--a-surface-default));
+  border: 1px solid;
+  border-color: var(--ac-popover-border, var(--a-border-default));
+  width: 1rem;
+  height: 1rem;
+}
+
+.navds-timeline__popover[data-placement^="top"] > .navds-timeline__popover-arrow {
+  border-left-color: transparent;
+  border-top-color: transparent;
+}
+
+.navds-timeline__popover[data-placement^="bottom"] > .navds-timeline__popover-arrow {
+  border-bottom-color: transparent;
+  border-right-color: transparent;
+}
+
+.navds-timeline__popover[data-placement^="left"] > .navds-timeline__popover-arrow {
+  border-left-color: transparent;
+  border-bottom-color: transparent;
+}
+
+.navds-timeline__popover[data-placement^="right"] > .navds-timeline__popover-arrow {
+  border-right-color: transparent;
+  border-top-color: transparent;
+}
+
+@media (forced-colors: active) {
+  .navds-timeline__period:focus {
+    outline: 2px solid highlight;
+    outline-offset: 2px;
+  }
+
+  .navds-timeline__period--success,
+  .navds-timeline__period--warning,
+  .navds-timeline__period--info,
+  .navds-timeline__period--neutral,
+  .navds-timeline__period--danger {
+    forced-color-adjust: none;
+  }
+
+  .navds-timeline__row {
+    border: 1px solid transparent;
+  }
+
+  .navds-timeline__pin-wrapper::before {
+    border: 1px solid transparent;
+  }
+
+  .navds-timeline__pin-button {
+    outline: 4px solid transparent;
+  }
+
+  .navds-timeline__pin-button:focus,
+  .navds-timeline__pin-button:focus-visible {
+    outline: 4px solid highlight;
+    outline-offset: 2px;
+    box-shadow: none;
+  }
+
+  .navds-timeline__popover[data-placement^="top"] > .navds-timeline__popover-arrow {
+    border-left-color: canvas;
+    border-top-color: canvas;
+  }
+
+  .navds-timeline__popover[data-placement^="bottom"] > .navds-timeline__popover-arrow {
+    border-bottom-color: canvas;
+    border-right-color: canvas;
+  }
+
+  .navds-timeline__popover[data-placement^="left"] > .navds-timeline__popover-arrow {
+    border-left-color: canvas;
+    border-bottom-color: canvas;
+  }
+
+  .navds-timeline__popover[data-placement^="right"] > .navds-timeline__popover-arrow {
+    border-right-color: canvas;
+    border-top-color: canvas;
+  }
+}

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

@@ -0,0 +1,181 @@
+.navds-toggle-group__wrapper {
+  display: grid;
+  justify-items: start;
+  gap: var(--a-spacing-2);
+}
+
+.navds-toggle-group__wrapper--fill {
+  justify-items: initial;
+}
+
+.navds-toggle-group {
+  border-radius: var(--a-border-radius-medium);
+  background-color: var(--ac-toggle-group-bg, var(--a-surface-transparent));
+  box-shadow: inset 0 0 0 1px var(--ac-toggle-group-border, var(--a-border-default));
+  padding: calc(var(--a-spacing-1) + 0.0625rem);
+  gap: var(--a-spacing-1);
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+}
+
+.navds-toggle-group--small {
+  padding: calc(var(--a-spacing-05) + 0.0625rem);
+}
+
+.navds-toggle-group--neutral {
+  background-color: var(--ac-toggle-group-neutral-bg, var(--a-surface-transparent));
+  box-shadow: inset 0 0 0 1px var(--ac-toggle-group-neutral-border, var(--a-border-default));
+}
+
+.navds-toggle-group__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--a-spacing-1) var(--a-spacing-3);
+  min-height: 2.375rem;
+  border: none;
+  cursor: pointer;
+  background-color: var(--ac-toggle-group-button-bg, var(--a-surface-transparent));
+  color: var(--ac-toggle-group-button-text, var(--a-text-default));
+  border-radius: var(--a-border-radius-small);
+  min-width: fit-content;
+  font-weight: var(--a-font-weight-regular);
+}
+
+.navds-toggle-group--medium > :where(.navds-toggle-group__button:first-of-type:focus-visible) {
+  border-start-start-radius: 1px;
+  border-end-start-radius: 1px;
+}
+
+.navds-toggle-group--medium > :where(.navds-toggle-group__button:last-of-type:focus-visible) {
+  border-start-end-radius: 1px;
+  border-end-end-radius: 1px;
+}
+
+.navds-toggle-group--neutral > .navds-toggle-group__button {
+  background-color: var(--ac-toggle-group-button-neutral-bg, var(--a-surface-transparent));
+  color: var(--ac-toggle-group-button-neutral-text, var(--a-text-default));
+}
+
+.navds-toggle-group__button:hover {
+  background-color: var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle));
+  color: var(--ac-toggle-group-button-hover-text, var(--a-text-default));
+}
+
+.navds-toggle-group--neutral > .navds-toggle-group__button:hover {
+  background-color: var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
+  color: var(--ac-toggle-group-button-neutral-hover-text, var(--a-text-default));
+}
+
+.navds-toggle-group__button:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 1px;
+  box-shadow:
+    0 0 0 1px var(--a-surface-default),
+    0 0 0 4px var(--a-border-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-toggle-group__button:focus {
+    outline: 2px solid transparent;
+    outline-offset: 1px;
+    box-shadow:
+      0 0 0 1px var(--a-surface-default),
+      0 0 0 4px var(--a-border-focus);
+  }
+}
+
+.navds-toggle-group__button:focus-visible:hover[aria-pressed="false"] {
+  box-shadow:
+    0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)),
+    0 0 0 4px var(--a-border-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
+    box-shadow:
+      0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)),
+      0 0 0 4px var(--a-border-focus);
+  }
+}
+
+.navds-toggle-group--neutral > .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
+  box-shadow:
+    0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
+    0 0 0 4px var(--a-border-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-toggle-group--neutral > .navds-toggle-group__button:focus-visible:hover[aria-pressed="false"] {
+    box-shadow:
+      0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
+      0 0 0 4px var(--a-border-focus);
+  }
+}
+
+.navds-toggle-group__button-inner {
+  display: flex;
+  align-items: center;
+  gap: var(--a-spacing-2);
+  font-weight: inherit;
+}
+
+.navds-toggle-group__button-inner > * {
+  flex-shrink: 0;
+}
+
+.navds-toggle-group__button[aria-pressed="true"],
+.navds-toggle-group__button[aria-checked="true"] {
+  background-color: var(--ac-toggle-group-selected-bg, var(--a-surface-action-selected));
+  color: var(--ac-toggle-group-selected-text, var(--a-text-on-action));
+}
+
+.navds-toggle-group--neutral > .navds-toggle-group__button[aria-pressed="true"],
+.navds-toggle-group--neutral > .navds-toggle-group__button[aria-checked="true"] {
+  background-color: var(--ac-toggle-group-neutral-selected-bg, var(--a-surface-neutral-selected));
+  color: var(--ac-toggle-group-neutral-selected-text, var(--a-text-on-neutral));
+}
+
+.navds-toggle-group--small > .navds-toggle-group__button {
+  padding: var(--a-spacing-05) var(--a-spacing-3);
+  min-height: 1.625rem;
+  min-width: fit-content;
+}
+
+.navds-toggle-group__button > .navds-toggle-group__button-inner > svg {
+  font-size: 1.5rem;
+}
+
+.navds-toggle-group--small > .navds-toggle-group__button > .navds-toggle-group__button-inner > svg {
+  font-size: 1.125rem;
+}
+
+@media (forced-colors: active) {
+  .navds-toggle-group {
+    border: 2px solid transparent;
+  }
+
+  .navds-toggle-group__button:hover {
+    color: highlight;
+  }
+
+  .navds-toggle-group__button[aria-checked="true"],
+  .navds-toggle-group__button[aria-pressed="true"] {
+    background-color: selecteditem;
+    color: selecteditemtext;
+  }
+
+  .navds-toggle-group__button[aria-checked="true"] > *,
+  .navds-toggle-group__button[aria-pressed="true"] > * {
+    forced-color-adjust: none;
+  }
+
+  .navds-toggle-group__button:active {
+    background-color: unset !important;
+  }
+
+  .navds-toggle-group__button:focus-visible {
+    outline-color: highlight;
+  }
+}

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

@@ -0,0 +1,81 @@
+@keyframes tooltipFadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.navds-tooltip {
+  z-index: var(--a-z-index-tooltip);
+  background-color: var(--ac-tooltip-bg, var(--a-surface-inverted));
+  color: var(--ac-tooltip-text, var(--a-text-on-inverted));
+  border-radius: var(--a-border-radius-small);
+  padding: 0 var(--a-spacing-2);
+  align-items: center;
+  filter: drop-shadow(0 2px 4px rgba(0 0 0 / 0.1)) drop-shadow(0 4px 6px rgba(0 0 0 / 0.1));
+  display: flex;
+  flex-direction: column;
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  animation-duration: 0.2s;
+  animation-name: tooltipFadeIn;
+  text-align: center;
+}
+
+.navds-tooltip__arrow {
+  height: 0.4375rem;
+  width: 0.4375rem;
+  transform: rotate(45deg);
+  z-index: -1;
+  background-color: var(--ac-tooltip-bg, var(--a-surface-inverted));
+  position: absolute;
+}
+
+.navds-tooltip__keys {
+  padding-bottom: var(--a-spacing-1);
+  display: flex;
+  gap: var(--a-spacing-1);
+}
+
+.navds-tooltip__key {
+  font-family: var(--a-font-family);
+  background-color: var(--ac-tooltip-key-bg, var(--a-surface-neutral));
+  color: var(--ac-tooltip-key-text, var(--a-text-on-inverted));
+  border-radius: var(--a-border-radius-small);
+  padding: 0 var(--a-spacing-1);
+  min-width: 1.125rem;
+  height: 1.125rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@media (forced-colors: active) {
+  .navds-tooltip {
+    --__a-tooltip-high-contrast-border: 1px solid transparent;
+
+    border: var(--__a-tooltip-high-contrast-border);
+  }
+
+  .navds-tooltip[data-side="top"] .navds-tooltip__arrow {
+    border-bottom: var(--__a-tooltip-high-contrast-border);
+    border-right: var(--__a-tooltip-high-contrast-border);
+  }
+
+  .navds-tooltip[data-side="right"] .navds-tooltip__arrow {
+    border-bottom: var(--__a-tooltip-high-contrast-border);
+    border-left: var(--__a-tooltip-high-contrast-border);
+  }
+
+  .navds-tooltip[data-side="bottom"] .navds-tooltip__arrow {
+    border-left: var(--__a-tooltip-high-contrast-border);
+    border-top: var(--__a-tooltip-high-contrast-border);
+  }
+
+  .navds-tooltip[data-side="left"] .navds-tooltip__arrow {
+    border-top: var(--__a-tooltip-high-contrast-border);
+    border-right: var(--__a-tooltip-high-contrast-border);
+  }
+}

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

@@ -0,0 +1,259 @@
+/* stylelint-disable csstools/value-no-unknown-custom-properties */
+
+/* ------------------------- Global typo-definitions ------------------------ */
+body,
+:host {
+  font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
+  line-height: 1.333;
+  font-size: 1.125rem;
+}
+
+/* ----------------------------- Typo-components ---------------------------- */
+
+/* Heading */
+.navds-heading {
+  font-weight: var(--ax-font-weight-bold);
+  margin: 0;
+}
+
+.navds-heading--xlarge {
+  font-size: var(--ax-font-size-heading-2xlarge);
+  letter-spacing: -0.01em;
+  line-height: var(--ax-font-line-height-heading-2xlarge);
+}
+
+.navds-heading--xlarge.navds-typo--spacing {
+  margin-bottom: var(--ax-spacing-5);
+}
+
+.navds-heading--large {
+  font-size: var(--ax-font-size-heading-xlarge);
+  letter-spacing: -0.008em;
+  line-height: var(--ax-font-line-height-heading-xlarge);
+}
+
+.navds-heading--large.navds-typo--spacing {
+  margin-bottom: var(--ax-spacing-4);
+}
+
+/* Mobile scale */
+@media (max-width: 480px) {
+  .navds-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 {
+    margin-bottom: var(--ax-spacing-4);
+  }
+
+  .navds-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 {
+    margin-bottom: var(--ax-spacing-3);
+  }
+}
+
+.navds-heading--medium {
+  font-size: var(--ax-font-size-heading-medium);
+  letter-spacing: -0.002em;
+  line-height: var(--ax-font-line-height-heading-medium);
+}
+
+.navds-heading--medium.navds-typo--spacing {
+  margin-bottom: var(--ax-spacing-3);
+}
+
+.navds-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 {
+  margin-bottom: var(--ax-spacing-3);
+}
+
+.navds-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 {
+  margin-bottom: var(--ax-spacing-3);
+}
+
+/* Ingress */
+.navds-ingress {
+  font-size: var(--ax-font-size-xlarge);
+  font-weight: var(--ax-font-weight-regular);
+  letter-spacing: -0.001em;
+  line-height: var(--ax-font-line-height-xlarge);
+  margin: 0;
+}
+
+.navds-ingress.navds-typo--spacing {
+  margin-bottom: var(--ax-spacing-10);
+}
+
+/* Body */
+.navds-body-long {
+  font-size: var(--ax-font-size-large);
+  font-weight: var(--ax-font-weight-regular);
+  letter-spacing: 0;
+  line-height: var(--ax-font-line-height-xlarge);
+  margin: 0;
+}
+
+.navds-body-long.navds-typo--spacing {
+  margin-bottom: var(--ax-spacing-7);
+}
+
+.navds-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 {
+  margin-bottom: var(--ax-spacing-10);
+}
+
+.navds-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 {
+  margin-bottom: var(--ax-spacing-6);
+}
+
+.navds-body-short {
+  font-size: var(--ax-font-size-large);
+  font-weight: var(--ax-font-weight-regular);
+  letter-spacing: 0;
+  line-height: var(--ax-font-line-height-large);
+  margin: 0;
+}
+
+.navds-body-short.navds-typo--spacing {
+  margin-bottom: var(--ax-spacing-3);
+}
+
+.navds-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 {
+  margin-bottom: var(--ax-spacing-4);
+}
+
+.navds-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 {
+  margin-bottom: var(--ax-spacing-2);
+}
+
+/* Label */
+.navds-label {
+  font-size: var(--ax-font-size-large);
+  font-weight: var(--ax-font-weight-bold);
+  letter-spacing: 0;
+  line-height: var(--ax-font-line-height-large);
+  margin: 0;
+}
+
+.navds-label.navds-typo--spacing {
+  margin-bottom: var(--ax-spacing-3);
+}
+
+.navds-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 {
+  margin-bottom: var(--ax-spacing-2);
+}
+
+/* Small text */
+.navds-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 {
+  margin-bottom: var(--ax-spacing-2);
+}
+
+.navds-detail.navds-typo--uppercase {
+  text-transform: uppercase;
+}
+
+.navds-detail--small {
+  font-weight: var(--ax-font-weight-regular);
+}
+
+.navds-detail--small.navds-typo--spacing {
+  margin-bottom: var(--ax-spacing-2);
+}
+
+.navds-error-message {
+  color: var(--ax-text-danger);
+}
+
+/* -------------------------------- Utilities ------------------------------- */
+.navds-typo--truncate {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.navds-typo--semibold {
+  font-weight: var(--ax-font-weight-bold);
+}
+
+.navds-typo--align-start {
+  text-align: start;
+}
+
+.navds-typo--align-center {
+  text-align: center;
+}
+
+.navds-typo--align-end {
+  text-align: end;
+}
+
+.navds-typo--visually-hidden {
+  border: 0 !important;
+  clip: rect(0, 0, 0, 0) !important;
+  height: 1px !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  top: 0 !important;
+  position: absolute !important;
+  white-space: nowrap !important;
+  width: 1px !important;
+}
+
+.navds-typo--color-subtle {
+  color: var(--ax-text-subtle);
+}

@navikt/core/css/date.css

@@ -75,14 +75,14 @@
   border-radius: var(--a-border-radius-xlarge);
 }
 
-.navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus-visible,
-.navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus-visible {
+.navds-date .rdp-button:not(.rdp-day_selected, [disabled]):focus-visible,
+.navds-date .navds-date__month-button:not(.rdp-day_selected, [disabled]):focus-visible {
   box-shadow: var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
-  .navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus,
-  .navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus {
+  .navds-date .rdp-button:not(.rdp-day_selected, [disabled]):focus,
+  .navds-date .navds-date__month-button:not(.rdp-day_selected, [disabled]):focus {
     box-shadow: var(--a-shadow-focus);
   }
 }
@@ -167,8 +167,8 @@
   color: var(--ac-date-disabled-text, var(--a-text-subtle));
 }
 
-.navds-date .rdp-button:where(:not(.rdp-day_selected):not([disabled])):hover,
-.navds-date__month-button:where(:not(.rdp-day_selected):not([disabled])):hover {
+.navds-date .rdp-button:where(:not(.rdp-day_selected, [disabled])):hover,
+.navds-date__month-button:where(:not(.rdp-day_selected, [disabled])):hover {
   background: var(--ac-date-hover-bg, var(--a-surface-action-subtle-hover));
   cursor: pointer;
 }
@@ -201,19 +201,19 @@
 }
 
 /* Error-handling */
-.navds-date__field--error .navds-date__field-input:not(:hover):not(:disabled) {
+.navds-date__field--error .navds-date__field-input:not(:hover, :disabled) {
   border-color: var(--ac-date-input-error-border, var(--a-border-danger));
   box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger));
 }
 
-.navds-date__field--error .navds-date__field-input:focus-visible:not(:hover):not(:disabled) {
+.navds-date__field--error .navds-date__field-input:focus-visible:not(:hover, :disabled) {
   box-shadow:
     inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)),
     var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
-  .navds-date__field--error .navds-date__field-input:focus:not(:hover):not(:disabled) {
+  .navds-date__field--error .navds-date__field-input:focus:not(:hover, :disabled) {
     box-shadow:
       inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)),
       var(--a-shadow-focus);

@navikt/core/css/dropdown.css

@@ -13,7 +13,7 @@
   border-bottom: 1px solid var(--a-border-divider);
 }
 
-.navds-dropdown__menu > :not(.navds-dropdown__divider):not(.navds-dropdown__list) {
+.navds-dropdown__menu > :not(.navds-dropdown__divider, .navds-dropdown__list) {
   margin: 0 var(--a-spacing-4) var(--a-spacing-3);
 }
 

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

@@ -81,13 +81,13 @@
   cursor: text;
 }
 
-.navds-combobox--error .navds-text-field__input:not(:hover):not(:disabled) {
+.navds-combobox--error .navds-text-field__input:not(:hover, :disabled) {
   border-color: var(--ac-combobox-error-border, var(--a-border-danger));
   box-shadow: 0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger));
 }
 
 .navds-combobox--error
-  .navds-text-field__input:not(:hover):not(:disabled):not(.navds-combobox__wrapper-inner--virtually-unfocused):focus-within {
+  .navds-text-field__input:not(:hover, :disabled, .navds-combobox__wrapper-inner--virtually-unfocused):focus-within {
   outline: 2px solid transparent;
   outline-offset: 2px;
   box-shadow:
@@ -291,7 +291,6 @@
   padding-inline: var(--__ac-combobox-list-item-padding-inline);
   width: 100%;
   background-color: var(--ac-combobox-list-item-bg, var(--a-surface-default));
-  scroll-margin-top: 50px;
 }
 
 .navds-combobox__list-item--loading {
@@ -372,6 +371,11 @@
   border-radius: calc(var(--a-border-radius-medium) - 1px);
 }
 
+.navds-combobox__list-item mark {
+  background-color: transparent;
+  font-weight: bold;
+}
+
 /* Mobile */
 
 @media (max-width: 479px) {

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

@@ -13,7 +13,7 @@
   min-width: 0;
 }
 
-.navds-fieldset > :not(:first-child):not(:empty) {
+.navds-fieldset > :not(:first-child, :empty) {
   margin-top: var(--a-spacing-2);
 }
 
@@ -26,7 +26,7 @@
 }
 
 /* Applied when hideLegend is applied to fieldset */
-.navds-fieldset > .navds-sr-only + :not(:first-child):not(:empty) {
+.navds-fieldset > .navds-sr-only + :not(:first-child, :empty) {
   margin-top: 0;
 }
 

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

@@ -170,44 +170,42 @@
   color: var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
 }
 
-.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus) + .navds-checkbox__label::before,
-.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
+.navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate, :focus) + .navds-checkbox__label::before,
+.navds-radio__input:hover:not(:disabled, :checked, :focus) + .navds-radio__label::before {
   box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
 }
 
-.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate) + .navds-checkbox__label::before,
-.navds-radio__input:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
+.navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
+.navds-radio__input:hover:not(:disabled, :checked) + .navds-radio__label::before {
   background-color: var(--ac-radio-checkbox-action-hover-bg, var(--a-surface-action-subtle));
 }
 
-.navds-checkbox--error
-  > .navds-checkbox__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
-  + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
+.navds-checkbox--error > .navds-checkbox__input:not(:hover, :disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
+.navds-radio--error > .navds-radio__input:not(:hover, :disabled, :checked) + .navds-radio__label::before {
   box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
 }
 
 .navds-checkbox--error
-  > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
+  > .navds-checkbox__input:focus:not(:hover, :disabled, :checked, :indeterminate)
   + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
+.navds-radio--error > .navds-radio__input:focus:not(:hover, :disabled, :checked) + .navds-radio__label::before {
   box-shadow:
     0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
     0 0 0 4px var(--a-border-focus);
 }
 
 .navds-checkbox--error
-  > .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
+  > .navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate, :focus)
   + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
+.navds-radio--error > .navds-radio__input:hover:not(:disabled, :checked, :focus) + .navds-radio__label::before {
   background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
   box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
 }
 
 .navds-checkbox--error
-  > .navds-checkbox__input:focus:hover:not(:disabled):not(:checked):not(:indeterminate)
+  > .navds-checkbox__input:focus:hover:not(:disabled, :checked, :indeterminate)
   + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
+.navds-radio--error > .navds-radio__input:focus:hover:not(:disabled, :checked) + .navds-radio__label::before {
   background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
   box-shadow:
     0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
@@ -241,14 +239,10 @@
   color: var(--a-text-default);
 }
 
-.navds-checkbox--readonly
-  > .navds-checkbox__input:not(:disabled):not(:checked):not(:indeterminate)
-  + .navds-checkbox__label::before,
-.navds-checkbox--readonly
-  > .navds-checkbox__input:hover:not(:checked):not(:indeterminate):not(:focus)
-  + .navds-checkbox__label::before,
-.navds-radio--readonly > .navds-radio__input:not(:disabled):not(:checked) + .navds-radio__label::before,
-.navds-radio--readonly > .navds-radio__input:hover:not(:checked):not(:focus) + .navds-radio__label::before {
+.navds-checkbox--readonly > .navds-checkbox__input:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
+.navds-checkbox--readonly > .navds-checkbox__input:hover:not(:checked, :indeterminate, :focus) + .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 {
   background-color: var(--__ac-radio-checkbox-readonly-bg);
   box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
 }

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

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

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

@@ -80,7 +80,7 @@
 /**
   Error handling
 */
-.navds-select--error > * select:not(:hover):not(:focus):not(:disabled) {
+.navds-select--error > * select:not(:hover, :focus, :disabled) {
   box-shadow: 0 0 0 1px var(--ac-select-error-border, var(--a-surface-danger));
   border-color: var(--ac-select-error-border, var(--a-surface-danger));
 }

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

@@ -61,19 +61,19 @@
 /**
   Error handling
 */
-.navds-text-field--error > .navds-text-field__input:not(:hover):not(:disabled) {
+.navds-text-field--error > .navds-text-field__input:not(:hover, :disabled) {
   border-color: var(--ac-textfield-error-border, var(--__ac-textfield-error-border, var(--a-border-danger)));
   box-shadow: 0 0 0 1px var(--ac-textfield-error-border, var(--__ac-textfield-error-border, var(--a-border-danger)));
 }
 
-.navds-text-field--error > .navds-text-field__input:focus-visible:not(:hover):not(:disabled) {
+.navds-text-field--error > .navds-text-field__input:focus-visible:not(:hover, :disabled) {
   box-shadow:
     0 0 0 1px var(--a-border-danger),
     var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
-  .navds-text-field--error > .navds-text-field__input:focus:not(:hover):not(:disabled) {
+  .navds-text-field--error > .navds-text-field__input:focus:not(:hover, :disabled) {
     box-shadow:
       0 0 0 1px var(--a-border-danger),
       var(--a-shadow-focus);

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

@@ -111,13 +111,13 @@
 /**
   Error handling
 */
-.navds-textarea--error .navds-textarea__input:not(:hover):not(:focus-visible):not(:disabled) {
+.navds-textarea--error .navds-textarea__input:not(:hover, :focus-visible, :disabled) {
   box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
   border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
 }
 
 @supports not selector(:focus-visible) {
-  .navds-textarea--error .navds-textarea__input:not(:hover):not(:focus):not(:disabled) {
+  .navds-textarea--error .navds-textarea__input:not(:hover, :focus, :disabled) {
     box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
     border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
   }