🐛 Fikset tekst i internal-header

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

.storybook/main.cjs

@@ -23,7 +23,7 @@ module.exports = {
   addons: [
     "@storybook/addon-a11y",
     "@whitespace/storybook-addon-html",
-
+    "@storybook/addon-interactions",
     {
       name: "@storybook/addon-storysource",
       options: {

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @navikt/aksel-icons
 
+## 3.2.1
+
+## 3.2.0
+
+## 3.1.3
+
+## 3.1.2
+
+## 3.1.1
+
+## 3.1.0
+
+## 3.0.1
+
+## 3.0.0
+
+## 2.9.8
+
+### Patch Changes
+
+- [#1959](https://github.com/navikt/aksel/pull/1959) [`8790c5997`](https://github.com/navikt/aksel/commit/8790c5997e0d647419bdb5080c86781d08c196b8) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :lipstick: Statusikoner er nå tydeligere og mer konsistente.
+
 ## 2.9.7
 
 ### Patch Changes

@navikt/aksel-icons/icons/Checkmark.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M19.0303 6.96967C19.3232 7.26256 19.3232 7.73744 19.0303 8.03033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L4.96967 12.0303C4.67678 11.7374 4.67678 11.2626 4.96967 10.9697C5.26256 10.6768 5.73744 10.6768 6.03033 10.9697L10 14.9393L17.9697 6.96967C18.2626 6.67678 18.7374 6.67678 19.0303 6.96967Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.9983 6.93942C19.3079 7.21461 19.3357 7.68866 19.0606 7.99825L11.0606 16.9983C10.9233 17.1526 10.7285 17.2436 10.522 17.2497C10.3156 17.2557 10.1157 17.1764 9.96967 17.0303L4.96967 12.0303C4.67678 11.7374 4.67678 11.2625 4.96967 10.9696C5.26256 10.6768 5.73744 10.6768 6.03033 10.9696L10.4679 15.4072L17.9394 7.0017C18.2146 6.69212 18.6887 6.66423 18.9983 6.93942Z" fill="#262626"/>
 </svg>

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

@@ -15,5 +15,5 @@ keywords:
   - fullføring
   - validering
 variant: Stroke
-updated_at: 14.04.2023
+updated_at: 04.05.2023
 created_at: 07.03.2023

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

@@ -10,5 +10,5 @@ keywords:
   - nettverk
   - network
 variant: Stroke
-updated_at: 18.04.2023
+updated_at: 04.05.2023
 created_at: 07.03.2023

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

@@ -13,5 +13,5 @@ keywords:
   - oppmerksomhet
   - viktig
 variant: Stroke
-updated_at: 25.04.2023
+updated_at: 04.05.2023
 created_at: 07.03.2023

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

@@ -15,5 +15,5 @@ keywords:
   - beskrivelse
   - forklaring
 variant: Stroke
-updated_at: 31.03.2023
+updated_at: 04.05.2023
 created_at: 07.03.2023

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

@@ -6,5 +6,5 @@ keywords:
   - chain
   - kobling
 variant: Stroke
-updated_at: 11.04.2023
+updated_at: 04.05.2023
 created_at: 07.03.2023

@navikt/aksel-icons/icons/Questionmark.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10.25 9.5C10.25 8.92044 10.4399 8.49575 10.7178 8.21783C10.9957 7.93991 11.4204 7.75 12 7.75C12.5796 7.75 13.0043 7.93991 13.2822 8.21783C13.5601 8.49575 13.75 8.92044 13.75 9.5C13.75 9.65777 13.6859 9.84934 13.4991 10.1109C13.3076 10.379 13.0426 10.6467 12.7197 10.9697L12.6985 10.9909C12.4009 11.2884 12.0511 11.6381 11.7803 12.0172C11.4984 12.4118 11.25 12.9078 11.25 13.5V14C11.25 14.4142 11.5858 14.75 12 14.75C12.4142 14.75 12.75 14.4142 12.75 14V13.5C12.75 13.3422 12.8141 13.1507 13.0009 12.8891C13.1924 12.621 13.4574 12.3533 13.7803 12.0303L13.8015 12.0091C14.0991 11.7116 14.4489 11.3619 14.7197 10.9828C15.0016 10.5882 15.25 10.0922 15.25 9.5C15.25 8.57956 14.9399 7.75425 14.3428 7.15717C13.7457 6.56009 12.9204 6.25 12 6.25C11.0796 6.25 10.2543 6.56009 9.65717 7.15717C9.06009 7.75425 8.75 8.57956 8.75 9.5C8.75 9.91421 9.08579 10.25 9.5 10.25C9.91421 10.25 10.25 9.91421 10.25 9.5ZM12 15.5C11.4477 15.5 11 15.9477 11 16.5C11 17.0523 11.4477 17.5 12 17.5C12.5523 17.5 13 17.0523 13 16.5C13 15.9477 12.5523 15.5 12 15.5Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.75 9C9.75 7.75736 10.7574 6.75 12 6.75H12.1716C13.3195 6.75 14.25 7.68054 14.25 8.82843C14.25 9.37966 14.031 9.90832 13.6412 10.2981L12.6412 11.2981C11.7504 12.1889 11.25 13.3971 11.25 14.6569C11.25 15.0711 11.5858 15.4069 12 15.4069C12.4142 15.4069 12.75 15.0711 12.75 14.6569C12.75 13.7949 13.0924 12.9682 13.7019 12.3588L14.7019 11.3588C15.373 10.6877 15.75 9.77748 15.75 8.82843C15.75 6.85212 14.1479 5.25 12.1716 5.25H12C9.92893 5.25 8.25 6.92893 8.25 9V9.5C8.25 9.91421 8.58579 10.25 9 10.25C9.41421 10.25 9.75 9.91421 9.75 9.5V9ZM12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5Z" fill="#262626"/>
 </svg>

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

@@ -13,5 +13,5 @@ keywords:
   - veiledning
   - spørsmålstegn
 variant: Stroke
-updated_at: 31.03.2023
+updated_at: 04.05.2023
 created_at: 07.03.2023

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

@@ -6,5 +6,5 @@ keywords:
   - crystal
   - snø
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 04.05.2023
 created_at: 07.03.2023

@navikt/aksel-icons/icons/XMark.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7.03033 5.96967C6.73744 5.67678 6.26256 5.67678 5.96967 5.96967C5.67678 6.26256 5.67678 6.73744 5.96967 7.03033L10.9393 12L5.96967 16.9697C5.67678 17.2626 5.67678 17.7374 5.96967 18.0303C6.26256 18.3232 6.73744 18.3232 7.03033 18.0303L12 13.0607L16.9697 18.0303C17.2626 18.3232 17.7374 18.3232 18.0303 18.0303C18.3232 17.7374 18.3232 17.2626 18.0303 16.9697L13.0607 12L18.0303 7.03033C18.3232 6.73744 18.3232 6.26256 18.0303 5.96967C17.7374 5.67678 17.2626 5.67678 16.9697 5.96967L12 10.9393L7.03033 5.96967Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.53033 5.46967C6.23744 5.17678 5.76256 5.17678 5.46967 5.46967C5.17678 5.76256 5.17678 6.23744 5.46967 6.53033L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0607L17.4697 18.5303C17.7626 18.8232 18.2374 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53033C18.8232 6.23744 18.8232 5.76256 18.5303 5.46967C18.2374 5.17678 17.7626 5.17678 17.4697 5.46967L12 10.9393L6.53033 5.46967Z" fill="#262626"/>
 </svg>

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

@@ -15,5 +15,5 @@ keywords:
   - avvis
   - avslå
 variant: Stroke
-updated_at: 13.04.2023
+updated_at: 04.05.2023
 created_at: 07.03.2023

@navikt/aksel-icons/package.json

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

@navikt/aksel/CHANGELOG.md

@@ -1,5 +1,68 @@
 # @navikt/aksel
 
+## 3.2.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@3.2.1
+
+## 3.2.0
+
+### Patch Changes
+
+- Updated dependencies [[`affcab14c`](https://github.com/navikt/aksel/commit/affcab14c3d536929dfa64a36f5b43f9d0e8c3b7)]:
+  - @navikt/ds-css@3.2.0
+
+## 3.1.3
+
+### Patch Changes
+
+- Updated dependencies [[`e8ecf309a`](https://github.com/navikt/aksel/commit/e8ecf309a910e47fd3cea6c54cd993ab1196910f)]:
+  - @navikt/ds-css@3.1.3
+
+## 3.1.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@3.1.2
+
+## 3.1.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@3.1.1
+
+## 3.1.0
+
+### Patch Changes
+
+- Updated dependencies [[`9d2cd9e7f`](https://github.com/navikt/aksel/commit/9d2cd9e7fffb3cf6310c88229ee39ea85db19bca), [`f1c4c46eb`](https://github.com/navikt/aksel/commit/f1c4c46ebb0522561483f18e3b86b190cf9cc372)]:
+  - @navikt/ds-css@3.1.0
+
+## 3.0.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@3.0.1
+
+## 3.0.0
+
+### Patch Changes
+
+- Updated dependencies [[`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f), [`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f)]:
+  - @navikt/ds-css@3.0.0
+
+## 2.9.8
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@2.9.8
+
 ## 2.9.7
 
 ### Patch Changes

@navikt/aksel/README.md

@@ -22,6 +22,39 @@ To get started:
 npx @navikt/aksel codemod --help
 ```
 
+### v3
+
+There is no general codemods for migrating from v2 -> v3.
+
+#### CopyButton
+
+`npx @navikt/aksel codemod v3-copybutton ...`
+
+`<CopyToClipboard />` has been renamed to `<CopyButton />` and refactored.
+
+- Namechange
+- removed props `popoverText`, `iconPosition`, `popoverPlacement`
+- changed variants
+- refactored CSS and React-code. ⚠️ Overwritten CSS will not be migrated!
+
+```diff
+-import { CopyToClipboard } from "@navikt/ds-react-internal";
++import { CopyButton } from "@navikt/ds-react";
+
+-<CopyToClipboard
++<CopyButton
+- popoverText="popoverText"
+- iconPosition="left"
+- popoverPlacement="bottom-end"
+  copyText="Text to copy"
+  size="medium"
+>
+- text
++</CopyButton>
+-</CopyToClipboard>
+
+```
+
 ### v1 -> v2
 
 [Documentation](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112)

@navikt/aksel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel",
-  "version": "2.9.7",
+  "version": "3.2.1",
   "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": "2.9.7",
+    "@navikt/ds-css": "3.2.1",
     "axios": "1.3.6",
     "chalk": "4.1.0",
     "clipboardy": "^2.3.0",

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

@@ -1,7 +1,12 @@
 import chalk from "chalk";
 
 export const migrations: {
-  [key: string]: { description: string; value: string; path: string }[];
+  [key: string]: {
+    description: string;
+    value: string;
+    path: string;
+    warning?: string;
+  }[];
 } = {
   "1.0.0": [
     {
@@ -48,6 +53,16 @@ export const migrations: {
       path: "v2.0.0/update-less-tokens/update-less-tokens",
     },
   ],
+  "v3.0.0": [
+    {
+      description:
+        "Replaces deprecated <CopyToClipboard /> with <CopyButton />",
+      value: "v3-copybutton",
+      path: "v3.0.0/copybutton/copybutton",
+      warning:
+        "Remember to clean css-import from '@navikt/ds-css-internal' if no longer needed\nIf non-text was used as children, or different locales were handled, you need to manually fix this",
+    },
+  ],
 };
 
 export function getMigrationPath(str: string) {
@@ -56,6 +71,12 @@ export function getMigrationPath(str: string) {
     .find((x) => x.value === str)?.path;
 }
 
+export function getWarning(str: string) {
+  return Object.values(migrations)
+    .reduce((acc, val) => [...val, ...acc], [])
+    .find((x) => x.value === str)?.warning;
+}
+
 export function getMigrationNames() {
   return Object.values(migrations).reduce(
     (acc, val) => [...val.map((x) => x.value), ...acc],

@navikt/aksel/src/codemod/run-codeshift.ts

@@ -2,7 +2,7 @@ import { Command } from "commander";
 import fg from "fast-glob";
 import * as jscodeshift from "jscodeshift/src/Runner";
 import path from "path";
-import { getMigrationPath } from "./migrations";
+import { getMigrationPath, getWarning } from "./migrations";
 import chalk from "chalk";
 
 const ignoreNodeModules = [
@@ -32,6 +32,8 @@ export async function runCodeshift(
 
   options?.glob && console.log(`Using glob: ${chalk.green(options.glob)}\n`);
 
+  const warning = getWarning(input);
+
   try {
     await jscodeshift.run(codemodPath, filepaths, {
       babel: true,
@@ -46,6 +48,8 @@ export async function runCodeshift(
       force: options?.force,
       print: options?.print,
     });
+
+    warning && console.log(`\n${chalk.yellow(warning)}\n`);
   } catch (error) {
     program.error(chalk.red("Error:", error.message));
   }

@navikt/aksel/src/codemod/transforms/v3.0.0/copybutton/copybutton.ts

@@ -0,0 +1,89 @@
+import chalk from "chalk";
+import moveAndRenameImport from "../../../utils/moveAndRenameImport";
+import removePropsFromComponent from "../../../utils/removeProps";
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options, ...rest) {
+  const j = api.jscodeshift;
+
+  let root: any;
+  try {
+    root = j(file.source);
+  } catch {
+    return file.source;
+  }
+
+  const toName = "CopyButton";
+  const localName = moveAndRenameImport(j, root, {
+    fromImport: "@navikt/ds-react-internal",
+    toImport: "@navikt/ds-react",
+    fromName: "CopyToClipboard",
+    toName,
+  });
+
+  if (localName === null) {
+    return root.toSource(options.printOptions);
+  }
+
+  /* Finds and replaces import from CopyToClipboard -> CopyButton */
+
+  if (root.findJSXElements(localName)) {
+    removePropsFromComponent(j, root, localName, [
+      "popoverText",
+      "popoverPlacement",
+      "iconPosition",
+      "variant",
+    ]);
+
+    const component = root.findJSXElements(localName);
+
+    component.forEach((node) => {
+      const children = node.node.children;
+      let flagged = false;
+      if (
+        children.length > 0 &&
+        !node.node.openingElement.attributes.some(
+          (attr) => attr.name.name === "text"
+        )
+      ) {
+        if (children.length === 1 && children[0].type === "JSXText") {
+          node.node.openingElement.attributes.push(
+            j.jsxAttribute(
+              j.jsxIdentifier("text"),
+              j.literal(children[0].value.trim())
+            )
+          );
+        } else {
+          flagged = true;
+          console.log(
+            chalk.yellow(
+              `\n\nWarning: Detected advanced children-type!\nCodemod can't convert into "text" prop so you will need to update this manually.`
+            )
+          );
+        }
+      }
+
+      if (!flagged) {
+        node.node.children = [];
+        node.node.openingElement.selfClosing = true;
+        node.node.closingElement = null;
+      }
+    });
+
+    const compRoot = root.find(j.JSXElement, {
+      openingElement: { name: { name: localName } },
+    });
+
+    compRoot.forEach((x) => {
+      x.node.openingElement.name.name = "CopyButton";
+      if (x.node.children.length > 0) {
+        x.node.closingElement.name.name = "CopyButton";
+      }
+    });
+  }
+
+  return root.toSource(options.printOptions);
+}

@navikt/aksel/src/codemod/transforms/v3.0.0/copybutton/tests/alias.input.js

@@ -0,0 +1,6 @@
+import { CopyToClipboard as DsCpyButton } from "@navikt/ds-react-internal";
+
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return <DsCpyButton></DsCpyButton>;
+};

@navikt/aksel/src/codemod/transforms/v3.0.0/copybutton/tests/alias.output.js

@@ -0,0 +1,6 @@
+import { CopyButton } from "@navikt/ds-react";
+
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return <CopyButton />;
+};

@navikt/aksel/src/codemod/transforms/v3.0.0/copybutton/tests/children.input.js

@@ -0,0 +1,16 @@
+import { CopyToClipboard } from "@navikt/ds-react-internal";
+
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return (
+    <CopyToClipboard
+      popoverText="popoverText"
+      copyText="Text to copy"
+      iconPosition="left"
+      size="medium"
+      popoverPlacement="bottom-end"
+    >
+      {text}
+    </CopyToClipboard>
+  );
+};

@navikt/aksel/src/codemod/transforms/v3.0.0/copybutton/tests/children.output.js

@@ -0,0 +1,10 @@
+import { CopyButton } from "@navikt/ds-react";
+
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return (
+    <CopyButton copyText="Text to copy" size="medium" text="text">
+      {text}
+    </CopyButton>
+  );
+};

@navikt/aksel/src/codemod/transforms/v3.0.0/copybutton/tests/cleanup.input.js

@@ -0,0 +1,6 @@
+import { CopyToClipboard } from "@navikt/ds-react-internal";
+
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return <CopyToClipboard></CopyToClipboard>;
+};

@navikt/aksel/src/codemod/transforms/v3.0.0/copybutton/tests/cleanup.output.js

@@ -0,0 +1,6 @@
+import { CopyButton } from "@navikt/ds-react";
+
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return <CopyButton />;
+};

@navikt/aksel/src/codemod/transforms/v3.0.0/copybutton/tests/complete.input.js

@@ -0,0 +1,16 @@
+import { CopyToClipboard } from "@navikt/ds-react-internal";
+
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return (
+    <CopyToClipboard
+      popoverText="popoverText"
+      copyText="Text to copy"
+      iconPosition="left"
+      size="medium"
+      popoverPlacement="bottom-end"
+    >
+      text
+    </CopyToClipboard>
+  );
+};

@navikt/aksel/src/codemod/transforms/v3.0.0/copybutton/tests/complete.output.js

@@ -0,0 +1,6 @@
+import { CopyButton } from "@navikt/ds-react";
+
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return <CopyButton copyText="Text to copy" size="medium" text="text" />;
+};

@navikt/aksel/src/codemod/transforms/v3.0.0/copybutton/tests/copybutton.test.ts

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

@navikt/aksel/src/codemod/transforms/v3.0.0/copybutton/tests/idempotent.input.js

@@ -0,0 +1,6 @@
+import { CopyButton } from "@navikt/ds-react";
+
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return <CopyButton copyText="Text to copy" size="medium" text={props.text} />;
+};

@navikt/aksel/src/codemod/transforms/v3.0.0/copybutton/tests/idempotent.output.js

@@ -0,0 +1,6 @@
+import { CopyButton } from "@navikt/ds-react";
+
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return <CopyButton copyText="Text to copy" size="medium" text={props.text} />;
+};

@navikt/aksel/src/codemod/transforms/v3.0.0/copybutton/tests/import.input.js

@@ -0,0 +1,7 @@
+import { CopyToClipboard, Dropdown } from "@navikt/ds-react-internal";
+import { Button } from "@navikt/ds-react";
+
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return <CopyToClipboard></CopyToClipboard>;
+};

@navikt/aksel/src/codemod/transforms/v3.0.0/copybutton/tests/import.output.js

@@ -0,0 +1,7 @@
+import { Dropdown } from "@navikt/ds-react-internal";
+import { Button, CopyButton } from "@navikt/ds-react";
+
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return <CopyButton />;
+};

@navikt/aksel/src/codemod/utils/moveAndRenameImport.ts

@@ -0,0 +1,83 @@
+import core, { Collection } from "jscodeshift";
+
+export default function moveAndRenameImport(
+  j: core.JSCodeshift,
+  root: Collection<any>,
+  {
+    fromImport,
+    toImport,
+    fromName,
+    toName,
+  }: { fromImport: string; toImport: string; fromName: string; toName: string }
+) {
+  const existingFromImport = root.find(j.ImportDeclaration, {
+    source: {
+      value: fromImport,
+    },
+  });
+
+  if (!existingFromImport.length) {
+    return null;
+  }
+
+  let localname = fromName;
+  const existingFromImportSpecifier = existingFromImport?.find(
+    j.ImportSpecifier,
+    (node) => {
+      if (node.imported.name === fromName) {
+        localname = node.local.name;
+      }
+      return node.imported.name === fromName;
+    }
+  );
+
+  if (!existingFromImport.length || !existingFromImportSpecifier?.length) {
+    return null;
+  }
+
+  if (existingFromImportSpecifier?.length > 0) {
+    existingFromImportSpecifier.remove();
+  }
+
+  if (
+    !existingFromImport.get("specifiers").value?.length ||
+    existingFromImport.get("specifiers").value?.length === 0
+  ) {
+    existingFromImport.remove();
+  }
+
+  const existingImport = root.find(j.ImportDeclaration, {
+    source: {
+      value: toImport,
+    },
+  });
+
+  const existingImportSpecifier = existingImport.find(j.ImportSpecifier, {
+    imported: {
+      name: toName,
+    },
+  });
+
+  if (existingImportSpecifier.length <= 0) {
+    const newImportSpecifier = j.importSpecifier(j.identifier(toName));
+
+    if (existingImport.length > 0) {
+      existingImport.get("specifiers").push(newImportSpecifier);
+    } else {
+      const newImport = j.importDeclaration(
+        [newImportSpecifier],
+        j.stringLiteral(toImport)
+      );
+
+      const lastImport = root.find(j.ImportDeclaration).at(-1);
+
+      if (lastImport.length > 0) {
+        lastImport.insertAfter(newImport);
+      } else {
+        root.get().node.program.body.unshift(newImport);
+      }
+    }
+  }
+
+  return localname;
+}

@navikt/aksel/src/codemod/utils/removeProps.ts

@@ -0,0 +1,25 @@
+import core, { Collection } from "jscodeshift";
+
+export default function removePropsFromComponent(
+  j: core.JSCodeshift,
+  root: Collection<any>,
+  componentName: string,
+  propsToRemove: string[]
+) {
+  const component = root.findJSXElements(componentName);
+
+  component.forEach((node) => {
+    const attributes = node.node.openingElement.attributes;
+
+    for (let i = attributes.length - 1; i >= 0; i--) {
+      const attribute = attributes[i];
+
+      if (
+        attribute.type === "JSXAttribute" &&
+        propsToRemove.includes(attribute.name.name.toString())
+      ) {
+        attributes.splice(i, 1);
+      }
+    }
+  });
+}

@navikt/codemod/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @navikt/ds-codemod
 
+## 3.2.1
+
+## 3.2.0
+
+## 3.1.3
+
+## 3.1.2
+
+## 3.1.1
+
+## 3.1.0
+
+## 3.0.1
+
+## 3.0.0
+
+## 2.9.8
+
 ## 2.9.7
 
 ## 2.9.6

@navikt/codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-codemod",
-  "version": "2.9.7",
+  "version": "3.2.1",
   "description": "Aksel codemods for NAVs designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",

@navikt/community/navno/package.json

@@ -40,8 +40,8 @@
     "build-pict": "svgr --silent --index-template index-template.js --out-dir src/pictograms pictograms"
   },
   "dependencies": {
-    "@navikt/ds-icons": "^2.9.7",
-    "@navikt/ds-react": "^2.9.7",
+    "@navikt/ds-icons": "^3.2.1",
+    "@navikt/ds-react": "^3.2.1",
     "clsx": "^1.1.1"
   },
   "devDependencies": {

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,70 @@
 # @navikt/ds-css
 
+## 3.2.1
+
+## 3.2.0
+
+### Minor Changes
+
+- [#1982](https://github.com/navikt/aksel/pull/1982) [`affcab14c`](https://github.com/navikt/aksel/commit/affcab14c3d536929dfa64a36f5b43f9d0e8c3b7) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Ny komponent `<CopyButton />`!
+
+  - Erstatter `<CopyToClipboard />` fra `@navikt/ds-react-internal`
+  - CopyToClipboard er markert som deprecated. Den vil fortsatt fungere, men noen lintere vil kunne ende opp med å klage på den.
+
+## 3.1.3
+
+### Patch Changes
+
+- [#1976](https://github.com/navikt/aksel/pull/1976) [`e8ecf309a`](https://github.com/navikt/aksel/commit/e8ecf309a910e47fd3cea6c54cd993ab1196910f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :lipstick: Oppdatert utseende for ToggleGroup
+
+  - Medium og Small er begge 10px lavere
+  - Mindre border-radius
+
+## 3.1.2
+
+## 3.1.1
+
+## 3.1.0
+
+### Minor Changes
+
+- [#1966](https://github.com/navikt/aksel/pull/1966) [`f1c4c46eb`](https://github.com/navikt/aksel/commit/f1c4c46ebb0522561483f18e3b86b190cf9cc372) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :lipstick: Alle komponenter bruker nå default `:focus-visible` for fokusmarkering.
+  (Alle komponenter som bruker `:focus-visible` har også en fallback for `:focus`)
+
+### Patch Changes
+
+- [#1967](https://github.com/navikt/aksel/pull/1967) [`9d2cd9e7f`](https://github.com/navikt/aksel/commit/9d2cd9e7fffb3cf6310c88229ee39ea85db19bca) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :lipstick: Oppdatert Label og Description spacing for skjemakomponenter
+
+## 3.0.1
+
+## 3.0.0
+
+### Major Changes
+
+- [#1964](https://github.com/navikt/aksel/pull/1964) [`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - **Accordion**
+
+  - Accordion oppdatet til å ha chevron left-aligned.
+  - Neutral-variant lagt til
+  - Diverse nye size-options for heading og paddinger.
+  - Deler av Accordion-CSS er refaktorert. Dette vil kunne brekke overskrevne stiler.
+
+- [#1964](https://github.com/navikt/aksel/pull/1964) [`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Aksels løsninger bruker nå `@navikt/aksel-icons`
+
+  **Sideeffects av ikonendringer**
+
+  - Komponenter som tidligere brukte Expand-ikon har fått oppdatert animasjon (table, readmore og accordion)
+  - Alert bruker samme ikonstørrelse for alle størrelser
+  - Chips har justert padding/ikonstørrelser
+  - Datepicker hover-bug på knapper er fikset
+  - Helptekst bruker nå et custom-ikon.
+  - Select har fått justert padding rundt ikon
+  - Switch bruker samme checkmark som checkbox, er nå avrundet
+  - ReadMore har justert margin for alignment med ikon, fjernet content-animasjon
+  - Tabs bruker default text-default nå
+  - Stepper har endret hvordan den styler checkmark-ikon.
+
+## 2.9.8
+
 ## 2.9.7
 
 ## 2.9.6

@navikt/core/css/accordion.css

@@ -2,30 +2,78 @@
   position: relative;
 }
 
+/*************************
+ * Header *
+ *************************/
 .navds-accordion__header {
+  --__ac-accordion-header-shadow-color: var(--ac-accordion-header-border, var(--a-border-divider));
+  --__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: space-between;
+  justify-content: flex-start;
   align-items: flex-start;
   gap: var(--a-spacing-2);
-  padding: 14px var(--a-spacing-3) var(--a-spacing-3);
+  padding: var(--a-spacing-3);
   margin: 0;
   text-align: left;
   background: var(--ac-accordion-header-bg, var(--a-surface-transparent));
   cursor: pointer;
   border: none;
-  border-bottom: 2px solid var(--ac-accordion-header-border, var(--a-border-divider));
-}
-
-.navds-accordion__header:focus {
-  outline: none;
-  box-shadow: var(--a-shadow-focus);
+  position: relative;
+  box-shadow: var(--__ac-accordion-header-shadow);
+  z-index: 1;
 }
 
 .navds-accordion__header:hover {
-  color: var(--ac-accordion-header-text-hover, var(--a-text-action-on-action-subtle));
-  border-color: var(--ac-accordion-header-border-hover, var(--a-border-default));
-  background: var(--ac-accordion-header-bg-hover, var(--a-surface-transparent));
+  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: none;
+  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 {
@@ -33,42 +81,91 @@
   text-overflow: ellipsis;
 }
 
-.navds-accordion__item--open > .navds-accordion__header {
-  background-color: var(--ac-accordion-header-bg-open, var(--ac-accordion-item-bg-open, var(--a-surface-action-subtle)));
-  border-color: var(--ac-accordion-item-border-open, var(--a-surface-action-subtle));
+/*************************
+ * 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__item--open > :where(.navds-accordion__header:hover) {
-  background-color: var(--ac-accordion-header-bg-open-hover, var(--a-surface-action-subtle));
+.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__content {
-  padding: var(--a-spacing-3) var(--a-spacing-3) 18px;
-  border-bottom: 2px solid var(--ac-accordion-content-border, var(--a-border-divider));
-}
-
-.navds-accordion__item--open > .navds-accordion__header:hover + * .navds-accordion__content {
-  border-color: var(--ac-accordion-content-border-open, var(--a-border-default));
-}
-
-.navds-accordion__expand-icon {
+.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;
 }
 
-.navds-accordion__item--open > .navds-accordion__header > .navds-accordion__expand-icon {
-  transform: rotateZ(180deg);
+:where(.navds-accordion__header):hover > :where(.navds-accordion__icon-wrapper) > :where(.navds-accordion__header-chevron) {
+  transform: translateY(1px);
 }
 
-.navds-accordion__expand-icon--filled {
+.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: 0 var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-11);
+  animation: fadeAccordionContent 250ms ease;
+}
+
+.navds-accordion__content--closed {
   display: none;
 }
 
-.navds-accordion__header:hover > .navds-accordion__expand-icon.navds-accordion__expand-icon--filled {
-  display: inherit;
+.navds-accordion__item--no-animation :where(.navds-accordion__content) {
+  animation: none;
 }
 
-.navds-accordion__header:hover > .navds-accordion__expand-icon {
-  display: none;
+@keyframes fadeAccordionContent {
+  0% {
+    opacity: 0.25;
+    transform: translateY(-8px);
+  }
+
+  40% {
+    opacity: 0.7;
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }

@navikt/core/css/alert.css

@@ -28,7 +28,6 @@
 }
 
 .navds-alert--small > .navds-alert__icon {
-  font-size: 1.25rem;
   height: var(--a-font-line-height-large);
 }
 

@navikt/core/css/button.css

@@ -32,9 +32,10 @@
 }
 
 .navds-button--small {
-  --__ac-button-padding: 0.375rem var(--a-spacing-3);
+  --__ac-button-padding: var(--a-spacing-1) var(--a-spacing-3);
 
   padding: var(--ac-button-padding-small, var(--__ac-button-padding));
+  min-height: 2rem;
 }
 
 .navds-button--xsmall {
@@ -51,22 +52,29 @@
 }
 
 .navds-button--small.navds-button--icon-only {
-  --__ac-button-padding: 0.375rem;
+  --__ac-button-padding: var(--a-spacing-1);
 
   padding: var(--ac-button-padding-icon-only-small, var(--__ac-button-padding));
 }
 
 .navds-button--xsmall.navds-button--icon-only {
-  --__ac-button-padding: var(--a-spacing-1);
+  --__ac-button-padding: var(--a-spacing-05);
 
   padding: var(--ac-button-padding-icon-only-xsmall, var(--__ac-button-padding));
 }
 
-.navds-button:focus {
+.navds-button:focus-visible {
   outline: none;
   box-shadow: var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-button:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
 .navds-button__icon {
   --ac-button-icon-margin: -4px;
 
@@ -88,14 +96,12 @@
 
 .navds-button--small .navds-button__icon {
   --ac-button-icon-margin: -2px;
-
-  font-size: 1.25rem;
 }
 
 .navds-button--xsmall .navds-button__icon {
   --ac-button-icon-margin: -2px;
 
-  font-size: 1rem;
+  font-size: 1.25rem;
 }
 
 /*************************
@@ -115,10 +121,16 @@
   background-color: var(--ac-button-primary-active-bg, var(--a-surface-action-active));
 }
 
-.navds-button--primary:focus {
+.navds-button--primary:focus-visible {
   box-shadow: inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-button--primary:focus {
+    box-shadow: inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
+  }
+}
+
 .navds-button--primary:hover:where(:disabled, .navds-button--disabled),
 .navds-button--primary:active:where(:disabled, .navds-button--disabled) {
   background-color: var(--ac-button-primary-bg, var(--a-surface-action));
@@ -141,10 +153,16 @@
   background-color: var(--ac-button-primary-neutral-active-bg, var(--a-surface-neutral-active));
 }
 
-.navds-button--primary-neutral:focus {
+.navds-button--primary-neutral:focus-visible {
   box-shadow: inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-button--primary-neutral:focus {
+    box-shadow: inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
+  }
+}
+
 .navds-button--primary-neutral:hover:where(:disabled, .navds-button--disabled),
 .navds-button--primary-neutral:active:where(:disabled, .navds-button--disabled) {
   background-color: var(--ac-button-primary-neutral-bg, var(--a-surface-neutral));
@@ -165,20 +183,32 @@
   background-color: var(--ac-button-secondary-hover-bg, var(--a-surface-action-subtle-hover));
 }
 
-.navds-button--secondary:focus {
+.navds-button--secondary:focus-visible {
   box-shadow: inset 0 0 0 2px var(--ac-button-secondary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-button--secondary:focus {
+    box-shadow: inset 0 0 0 2px var(--ac-button-secondary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
+  }
+}
+
 .navds-button--secondary:active {
   color: var(--ac-button-secondary-active-text, var(--a-text-on-action));
   background-color: var(--ac-button-secondary-active-bg, var(--a-surface-action-active));
   box-shadow: none;
 }
 
-.navds-button--secondary:focus:active {
+.navds-button--secondary:focus-visible:active {
   box-shadow: inset 0 0 0 1px var(--ac-button-secondary-active-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-button--secondary:focus:active {
+    box-shadow: inset 0 0 0 1px var(--ac-button-secondary-active-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
+  }
+}
+
 .navds-button--secondary:where(:disabled, .navds-button--disabled),
 .navds-button--secondary:hover:where(:disabled, .navds-button--disabled) {
   color: var(--ac-button-secondary-text, var(--a-text-action));
@@ -200,22 +230,36 @@
   background-color: var(--ac-button-secondary-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
 }
 
-.navds-button--secondary-neutral:focus {
+.navds-button--secondary-neutral:focus-visible {
   color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
   box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-button--secondary-neutral:focus {
+    color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
+    box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
+  }
+}
+
 .navds-button--secondary-neutral:active {
   color: var(--ac-button-secondary-neutral-active-text, var(--a-text-on-neutral));
   background-color: var(--ac-button-secondary-neutral-active-bg, var(--a-surface-neutral-active));
   box-shadow: none;
 }
 
-.navds-button--secondary-neutral:focus:active {
+.navds-button--secondary-neutral:focus-visible:active {
   box-shadow: inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)),
     var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-button--secondary-neutral:focus:active {
+    box-shadow: inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)),
+      var(--a-shadow-focus);
+  }
+}
+
 .navds-button--secondary-neutral:where(:disabled, .navds-button--disabled),
 .navds-button--secondary-neutral:hover:where(:disabled, .navds-button--disabled) {
   color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
@@ -237,10 +281,16 @@
   background-color: var(--ac-button-tertiary-hover-bg, var(--a-surface-action-subtle-hover));
 }
 
-.navds-button--tertiary:focus {
+.navds-button--tertiary:focus-visible {
   box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-button--tertiary:focus {
+    box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
+  }
+}
+
 .navds-button--tertiary:active {
   color: var(--ac-button-tertiary-active-text, var(--a-text-on-action));
   background-color: var(--ac-button-tertiary-active-bg, var(--a-surface-action-active));
@@ -251,10 +301,16 @@
   background-color: var(--ac-button-tertiary-active-hover-bg, var(--a-surface-action-active));
 }
 
-.navds-button--tertiary:active:focus {
+.navds-button--tertiary:focus-visible:active {
   box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-button--tertiary:focus:active {
+    box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+  }
+}
+
 .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),
@@ -277,10 +333,16 @@
   background-color: var(--ac-button-tertiary-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
 }
 
-.navds-button--tertiary-neutral:focus {
+.navds-button--tertiary-neutral:focus-visible {
   box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-button--tertiary-neutral:focus {
+    box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
+  }
+}
+
 .navds-button--tertiary-neutral:active {
   color: var(--ac-button-tertiary-neutral-active-text, var(--a-text-on-neutral));
   background-color: var(--ac-button-tertiary-neutral-active-bg, var(--a-surface-neutral-active));
@@ -291,10 +353,16 @@
   background-color: var(--ac-button-tertiary-neutral-active-hover-bg, var(--a-surface-neutral-active));
 }
 
-.navds-button--tertiary-neutral:active:focus {
+.navds-button--tertiary-neutral:focus-visible:active {
   box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-button--tertiary-neutral:focus:active {
+    box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+  }
+}
+
 .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),
@@ -321,10 +389,16 @@
   background-color: var(--ac-button-danger-active-bg, var(--a-surface-danger-active));
 }
 
-.navds-button--danger:focus {
+.navds-button--danger:focus-visible {
   box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-button--danger:focus {
+    box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+  }
+}
+
 .navds-button--danger:active:where(:disabled, .navds-button--disabled),
 .navds-button--danger:hover:where(:disabled, .navds-button--disabled) {
   background-color: var(--ac-button-danger-bg, var(--a-surface-danger));

@navikt/core/css/chat.css

@@ -56,11 +56,6 @@
   gap: var(--a-spacing-2);
 }
 
-.navds-chat__bubble:focus {
-  box-shadow: var(--a-shadow-focus);
-  outline: none;
-}
-
 .navds-chat--right .navds-chat__bubble {
   border-radius: var(--a-border-radius-xlarge);
   border-bottom-right-radius: 2px;

@navikt/core/css/chips.css

@@ -63,6 +63,22 @@
   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__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));
@@ -77,22 +93,23 @@
 .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__toggle-icon {
-  width: 1.25rem;
-  height: 1.25rem;
+  width: 1.5rem;
+  height: 1.5rem;
   display: grid;
   place-items: center;
   border-radius: var(--a-border-radius-full);
 }
 
 .navds-chips--small .navds-chips__toggle-icon {
-  width: 1rem;
-  height: 1rem;
+  width: 1.25rem;
+  height: 1.25rem;
 }
 
 .navds-chips--small .navds-chips__removable-icon {
@@ -101,7 +118,7 @@
 }
 
 .navds-chips--small .navds-chips__removable-icon > svg {
-  width: 0.75rem;
+  width: 1rem;
 }
 
 .navds-chips__removable--action:focus-visible {
@@ -112,6 +129,18 @@
   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));
 }
@@ -126,7 +155,7 @@
 }
 
 .navds-chips--icon-right {
-  padding-right: var(--a-spacing-1);
+  padding-right: 0.375rem;
 }
 
 .navds-chips--small .navds-chips--icon-right {

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

@@ -63,6 +63,11 @@ const StyleMappings = {
       component: "ContentContainer",
       main: "content-container.css",
     },
+    {
+      component: "CopyButton",
+      main: "copybutton.css",
+      dependencies: [typoCss],
+    },
     { component: "Detail", main: typoCss },
     { component: "ErrorMessage", main: typoCss },
     { component: "ErrorSummary", main: formCss, dependencies: [typoCss] },

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

@@ -146,7 +146,10 @@ async function bundleMinified() {
 }
 
 function copyToVersionFolder() {
-  const files = fastglob.sync("**/*.css", { cwd: `./${rootDir}` });
+  const files = fastglob.sync("**/*.css", {
+    cwd: `./${rootDir}`,
+    ignore: "**/version/**",
+  });
 
   for (let file of files) {
     const css = fs.readFileSync(`${rootDir}/${file}`, { encoding: "utf-8" });

@navikt/core/css/copybutton.css

@@ -0,0 +1,129 @@
+[data-theme="dark"] .navds-copybutton,
+[data-theme="dark"].navds-copybutton {
+  --a-text-action: var(--a-blue-300);
+  --a-surface-hover: rgb(214 231 255 /0.13);
+  --a-icon-success: rgb(51 170 95 /1);
+  --a-text-subtle: rgb(231 240 254 /0.69);
+  --a-text-default: rgb(251 252 254 /0.96);
+}
+
+.navds-copybutton {
+  --__ac-copybutton-padding: var(--a-spacing-3) var(--a-spacing-5);
+
+  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;
+}
+
+.navds-copybutton--small {
+  --__ac-copybutton-padding: var(--a-spacing-1) var(--a-spacing-3);
+
+  min-height: 2rem;
+}
+
+.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__icon {
+  font-size: 1.5rem;
+  display: flex;
+  margin-left: -4px;
+}
+
+.navds-copybutton__icon:only-child {
+  margin: 0;
+}
+
+.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(--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(--a-text-action));
+  background-color: var(--ac-copybutton-action-hover-bg, var(--a-surface-hover));
+}
+
+.navds-copybutton--action:where(:disabled),
+.navds-copybutton--action:hover:where(:disabled) {
+  color: 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(--a-icon-success));
+}
+
+/* Variant/neutral */
+.navds-copybutton--neutral {
+  color: 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(--a-text-default));
+  background-color: var(--ac-copybutton-neutral-hover-bg, 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(--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(--a-text-default));
+}
+
+.navds-copybutton__content {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--a-spacing-2);
+}
+
+.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;
+}

@navikt/core/css/date.css

@@ -73,16 +73,30 @@
   border-radius: var(--a-border-radius-xlarge);
 }
 
-.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):not([disabled]):focus-visible,
+.navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus-visible {
   box-shadow: var(--a-shadow-focus);
 }
 
-.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus,
-.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):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 {
+    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;
@@ -94,12 +108,20 @@
   cursor: pointer;
 }
 
-.navds-date__month-button:focus,
-.navds-monthpicker__caption-button:focus {
+.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;
@@ -126,11 +148,17 @@
 }
 
 /* Focus layering */
-.navds-date__field-input:focus,
+.navds-date__field-input:focus-visible,
 .navds-date__field-button {
   z-index: 1;
 }
 
+@supports not selector(:focus-visible) {
+  .navds-date__field-input:focus {
+    z-index: 1;
+  }
+}
+
 .navds-date .rdp-day_selected,
 .navds-monthpicker__month--selected {
   color: var(--ac-date-selected-text, var(--a-text-on-action));
@@ -164,7 +192,8 @@
 }
 
 .navds-date__caption-button,
-.navds-date__caption-button:disabled {
+.navds-date__caption-button:disabled,
+.navds-date__caption-button:disabled:hover {
   color: var(--ac-date-caption-text, var(--a-text-default));
 }
 
@@ -182,10 +211,16 @@
   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:not(:hover):not(:disabled) {
+.navds-date__field--error .navds-date__field-input:focus-visible:not(:hover):not(: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) {
+    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: var(--a-spacing-2);

@navikt/core/css/expansioncard.css

@@ -123,12 +123,16 @@
   transform: translateY(1px);
 }
 
-.navds-expansioncard__header-button:focus {
+.navds-expansioncard__header-button:focus-visible {
   outline: none;
+  box-shadow: var(--a-shadow-focus);
 }
 
-.navds-expansioncard__header-button:focus-visible {
-  box-shadow: var(--a-shadow-focus);
+@supports not selector(:focus-visible) {
+  .navds-expansioncard__header-button:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
 }
 
 .navds-expansioncard--open :where(.navds-expansioncard__header-button):hover :where(.navds-expansioncard__header-chevron) {
@@ -173,13 +177,13 @@
   animation: fadeExpansionCard 250ms ease;
 }
 
-.navds-expansioncard--no-fade :where(.navds-expansioncard__content-inner) {
+.navds-expansioncard--no-animation :where(.navds-expansioncard__content-inner) {
   animation: none;
 }
 
 @keyframes fadeExpansionCard {
   0% {
-    opacity: 0;
+    opacity: 0.25;
     transform: translateY(-8px);
   }
 

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

@@ -8,11 +8,18 @@
   padding: var(--a-spacing-3);
 }
 
-.navds-error-summary:focus {
+.navds-error-summary:focus-visible {
   box-shadow: var(--a-shadow-focus);
   outline: none;
 }
 
+@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;

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

@@ -10,7 +10,7 @@
 }
 
 .navds-fieldset > .navds-fieldset__description:not(:empty) {
-  margin-top: var(--a-spacing-1);
+  margin-top: 0.125rem;
 }
 
 /* Applied when hideLegend is applied to fieldset */

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

@@ -5,7 +5,7 @@
 }
 
 .navds-form-field__description {
-  margin-top: -4px;
+  margin-top: -6px;
 }
 
 .navds-form-field .navds-error-message,
@@ -27,3 +27,7 @@
 .navds-form-field__error:empty {
   display: none;
 }
+
+.navds-form-field__subdescription {
+  color: var(--ac-form-subdescription, var(--a-text-subtle));
+}

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

@@ -43,7 +43,7 @@
 .navds-radio__content {
   display: flex;
   flex-direction: column;
-  gap: var(--a-spacing-1);
+  gap: 0.125rem;
 }
 
 .navds-checkbox--small > .navds-checkbox__input,
@@ -65,16 +65,30 @@
   height: 1.25rem;
 }
 
-.navds-checkbox__input:focus + .navds-checkbox__label::before,
-.navds-radio__input:focus + .navds-radio__label::before {
+.navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
+.navds-radio__input:focus-visible + .navds-radio__label::before {
   box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
 }
 
-.navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
-.navds-radio__input:hover:focus + .navds-radio__label::before {
+@supports not selector(:focus-visible) {
+  .navds-checkbox__input:focus + .navds-checkbox__label::before,
+  .navds-radio__input:focus + .navds-radio__label::before {
+    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
+  }
+}
+
+.navds-checkbox__input:hover:focus-visible + .navds-checkbox__label::before,
+.navds-radio__input:hover:focus-visible + .navds-radio__label::before {
   box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
+  .navds-radio__input:hover:focus + .navds-radio__label::before {
+    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), var(--a-shadow-focus);
+  }
+}
+
 .navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
   box-shadow: none;
   background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
@@ -109,32 +123,54 @@
   background-position: 4px center;
 }
 
-.navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
-.navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
+.navds-checkbox__input:indeterminate:focus-visible + .navds-checkbox__label::before,
+.navds-checkbox__input:checked:focus-visible + .navds-checkbox__label::before {
   box-shadow: inset 0 0 0 1px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
+  .navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
+    box-shadow: inset 0 0 0 1px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
+  }
+}
+
 .navds-radio__input:checked + .navds-radio__label::before {
   box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
     inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default));
   background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
 }
 
-.navds-radio__input:checked:focus + .navds-radio__label::before {
+.navds-radio__input:checked:focus-visible + .navds-radio__label::before {
   box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
     inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-radio__input:checked:focus + .navds-radio__label::before {
+    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+      inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-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));
 }
 
-.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):not(:checked):not(:indeterminate):not(:focus-visible)
+  + .navds-checkbox__label::before,
+.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
   box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
 }
 
+@supports not selector(:focus-visible) {
+  .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 {
+    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
+  }
+}
+
 .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 {
   background-color: var(--ac-radio-checkbox-action-hover-bg, var(--a-surface-action-subtle));
@@ -148,28 +184,55 @@
 }
 
 .navds-checkbox--error
-  > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
+  > .navds-checkbox__input:focus-visible:not(:hover):not(:disabled):not(:checked):not(: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-visible:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
   box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-checkbox--error
+    > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
+    + .navds-checkbox__label::before,
+  .navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
+    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+  }
+}
+
 .navds-checkbox--error
-  > .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
+  > .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus-visible)
   + .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):not(:checked):not(:focus-visible) + .navds-radio__label::before {
   background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
   box-shadow: inset 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-visible:hover:not(:disabled):not(:checked):not(: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-visible:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
   background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
   box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-checkbox--error
+    > .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
+    + .navds-checkbox__label::before,
+  .navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
+    background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
+    box-shadow: inset 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__label::before,
+  .navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
+    background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
+    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+  }
+}
+
 .navds-checkbox--disabled,
 .navds-radio--disabled {
   opacity: 0.3;

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

@@ -72,7 +72,7 @@
   cursor: pointer;
   background: none;
   border: none;
-  font-size: 1rem;
+  font-size: 1.25rem;
   padding: 0;
 }
 
@@ -86,11 +86,18 @@
   color: var(--ac-search-clear-icon-hover, var(--a-text-action));
 }
 
-.navds-search__button-clear:focus {
+.navds-search__button-clear:focus-visible {
   box-shadow: var(--a-shadow-focus);
   outline: none;
 }
 
+@supports not selector(:focus-visible) {
+  .navds-search__button-clear:focus {
+    box-shadow: var(--a-shadow-focus);
+    outline: none;
+  }
+}
+
 .navds-search__button-search {
   flex-shrink: 0;
   min-width: 64px;
@@ -126,31 +133,56 @@
   z-index: auto;
 }
 
-.navds-search__button-search.navds-button--secondary:focus {
+.navds-search__button-search.navds-button--secondary:focus-visible {
   box-shadow: 0 0 0 1px var(--ac-search-button-border, var(--a-border-default)) inset, var(--a-shadow-focus);
 }
 
-.navds-search__button-search.navds-button--secondary:focus:hover {
+.navds-search__button-search.navds-button--secondary:focus-visible:hover {
   box-shadow: 0 0 0 1px var(--ac-search-button-border-hover, var(--a-border-action)) inset, var(--a-shadow-focus);
 }
 
-.navds-search__button-search.navds-button--secondary:focus:active {
+.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(--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(--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):not(:disabled) {
   border-color: var(--ac-search-error-border, var(--a-border-danger));
   box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--a-border-danger));
 }
 
-.navds-search--error .navds-search__input:focus:not(:hover):not(:disabled) {
+.navds-search--error .navds-search__input:focus-visible:not(:hover):not(:disabled) {
   box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--a-border-danger)), var(--a-shadow-focus);
 }
 
 /* Focus layering */
-.navds-search__input:focus,
+.navds-search__input:focus-visible,
 .navds-search__button-clear,
-.navds-search__button-search:focus {
+.navds-search__button-search:focus-visible {
   z-index: 1;
 }
+
+@supports not selector(:focus-visible) {
+  .navds-search--error .navds-search__input:focus:not(:hover):not(:disabled) {
+    box-shadow: inset 0 0 0 1px 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;
+  }
+}

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

@@ -17,11 +17,18 @@
   border-color: var(--ac-select-hover-bg, var(--a-border-action));
 }
 
-.navds-select__input:focus {
+.navds-select__input:focus-visible {
   outline: none;
   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;
@@ -31,8 +38,8 @@
 
 .navds-select__chevron {
   position: absolute;
-  font-size: 1rem;
-  right: 0.5rem;
+  font-size: 1.5rem;
+  right: var(--a-spacing-2);
   pointer-events: none;
   align-self: center;
 }
@@ -42,6 +49,10 @@
   padding: 0 2rem 0 0.25rem;
 }
 
+.navds-form-field--small .navds-select__chevron {
+  right: 0.375rem;
+}
+
 /**
   Error handling
 */

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

@@ -38,7 +38,7 @@
 .navds-switch__content {
   display: flex;
   flex-direction: column;
-  gap: var(--a-spacing-1);
+  gap: 0.125rem;
   padding: 0.75rem 0 0.75rem 3.25rem;
 }
 
@@ -76,7 +76,7 @@
   position: absolute;
   top: var(--a-spacing-3);
   left: 0;
-  border-radius: var(--a-border-radius-medium);
+  border-radius: var(--a-border-radius-full);
   transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
@@ -110,15 +110,21 @@
   background-color: var(--ac-switch-checked-bg, var(--a-border-success));
 }
 
-.navds-switch__input:focus ~ .navds-switch__track {
+.navds-switch__input:focus-visible ~ .navds-switch__track {
   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 {
+    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-small);
+  border-radius: var(--a-border-radius-full);
   width: 20px;
   height: 20px;
   position: absolute;

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

@@ -35,11 +35,18 @@
   border-color: var(--ac-textfield-hover-border, var(--a-border-action));
 }
 
-.navds-text-field__input:focus {
+.navds-text-field__input:focus-visible {
   outline: none;
   box-shadow: var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-text-field__input:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
 /**
   Error handling
 */
@@ -48,10 +55,16 @@
   box-shadow: 0 0 0 1px var(--ac-textfield-error-border, var(--a-border-danger));
 }
 
-.navds-text-field--error > .navds-text-field__input:focus:not(:hover):not(:disabled) {
+.navds-text-field--error > .navds-text-field__input:focus-visible:not(:hover):not(: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) {
+    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(--a-surface-default));

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

@@ -38,11 +38,18 @@
   border-color: var(--ac-textarea-hover-border, var(--a-border-action));
 }
 
-.navds-textarea__input:focus {
+.navds-textarea__input:focus-visible {
   outline: none;
   box-shadow: var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-textarea__input:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
 .navds-form-field--small .navds-textarea__input {
   padding: 6px;
 }
@@ -73,11 +80,18 @@
 /**
   Error handling
 */
-.navds-textarea--error .navds-textarea__input:not(:hover):not(:focus):not(:disabled) {
+.navds-textarea--error .navds-textarea__input:not(:hover):not(:focus-visible):not(:disabled) {
   box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--a-border-danger));
   border-color: 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) {
+    box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--a-border-danger));
+    border-color: var(--ac-textarea-error-border, var(--a-border-danger));
+  }
+}
+
 .navds-textarea__input:disabled {
   background-color: var(--ac-textarea-bg, var(--a-surface-default));
   border-color: var(--ac-textarea-border, var(--a-border-default));

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

@@ -12,11 +12,17 @@
   font-size: 1.5rem;
 }
 
-.navds-help-text__button:focus {
-  outline: none;
+.navds-help-text__button:focus-visible {
   box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-help-text__button:focus {
+    outline: none;
+    box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
+  }
+}
+
 .navds-help-text__icon {
   border-radius: var(--a-border-radius-full);
 }
@@ -36,10 +42,20 @@
   display: none;
 }
 
-.navds-help-text__button:where(:hover, :focus, [aria-expanded="true"]) > .navds-help-text__icon {
+.navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon {
   display: none;
 }
 
-.navds-help-text__button:where(:hover, :focus, [aria-expanded="true"]) > .navds-help-text__icon--filled {
+.navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon--filled {
   display: inherit;
 }
+
+@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;
+  }
+}

@navikt/core/css/index.css

@@ -8,6 +8,7 @@
 @import "content-container.css";
 @import "chat.css";
 @import "chips.css";
+@import "copybutton.css";
 @import "expansioncard.css";
 @import "guide-panel.css";
 @import "form/index.css";

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

@@ -17,11 +17,18 @@
   border-color: var(--ac-link-panel-hover-border, var(--a-border-action));
 }
 
-.navds-link-panel:focus {
+.navds-link-panel:focus-visible {
   box-shadow: var(--a-shadow-focus);
   outline: none;
 }
 
+@supports not selector(:focus-visible) {
+  .navds-link-panel:focus {
+    box-shadow: var(--a-shadow-focus);
+    outline: none;
+  }
+}
+
 .navds-link-panel__chevron {
   flex-shrink: 0;
   font-size: 1.5rem;

@navikt/core/css/link.css

@@ -15,7 +15,7 @@
   text-decoration: none;
 }
 
-.navds-link:focus {
+.navds-link:focus-visible {
   outline: none;
   color: var(--ac-link-focus-text, var(--a-text-on-action));
   text-decoration: none;
@@ -23,6 +23,16 @@
   box-shadow: 0 0 0 2px var(--ac-link-focus-border, var(--a-border-focus));
 }
 
+@supports not selector(:focus-visible) {
+  .navds-link:focus {
+    outline: none;
+    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: none;
   color: var(--ac-link-active-text, var(--a-text-on-action));

@navikt/core/css/modal.css

@@ -15,12 +15,20 @@
   padding: var(--a-spacing-4);
 }
 
-.navds-modal:focus,
+.navds-modal:focus-visible,
 .navds-modal--focus {
   box-shadow: var(--a-shadow-focus);
   outline: none;
 }
 
+@supports not selector(:focus-visible) {
+  .navds-modal:focus,
+  .navds-modal--focus {
+    box-shadow: var(--a-shadow-focus);
+    outline: none;
+  }
+}
+
 .navds-modal__overlay {
   position: fixed;
   z-index: var(--a-z-index-modal);

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "2.9.7",
+  "version": "3.2.1",
   "description": "CSS for NAV Designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -27,7 +27,7 @@
     "css:get-version": "node config/get-version.js"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^2.9.7",
+    "@navikt/ds-tokens": "^3.2.1",
     "cssnano": "6.0.0",
     "fast-glob": "3.2.11",
     "lodash": "4.17.21",

@navikt/core/css/pagination.css

@@ -35,10 +35,16 @@
   color: var(--ac-pagination-selected-text, var(--a-text-on-action));
 }
 
-.navds-pagination__item[aria-current="true"]:focus {
+.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;

@navikt/core/css/popover.css

@@ -15,11 +15,18 @@
   display: none;
 }
 
-.navds-popover:focus {
+.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;

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

@@ -24,40 +24,51 @@
   background-color: var(--ac-read-more-active-bg, var(--a-surface-active));
 }
 
-.navds-read-more__button:focus {
+.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: 13px;
+  padding-left: 13px;
+}
+
+.navds-read-more--small .navds-read-more__content {
   margin-left: 11px;
   padding-left: 11px;
 }
 
+.navds-read-more__content--closed {
+  display: none;
+}
+
 .navds-read-more__expand-icon {
-  font-size: 1.25rem;
-  height: 1.5rem;
+  font-size: 1.5rem;
   flex-shrink: 0;
 }
 
 .navds-read-more--small .navds-read-more__expand-icon {
-  height: 1.25rem;
+  font-size: 1.25rem;
+}
+
+.navds-read-more__button:hover > .navds-read-more__expand-icon {
+  transform: translateY(1px);
 }
 
 .navds-read-more--open > .navds-read-more__button > .navds-read-more__expand-icon {
   transform: rotate(-180deg);
 }
 
-.navds-read-more__expand-icon--filled {
-  display: none;
-}
-
-.navds-read-more__button:hover > .navds-read-more__expand-icon.navds-read-more__expand-icon--filled {
-  display: inherit;
-}
-
-.navds-read-more__button:hover > .navds-read-more__expand-icon {
-  display: none;
+.navds-read-more--open > .navds-read-more__button:hover > .navds-read-more__expand-icon {
+  transform: translateY(-1px) rotate(-180deg);
 }

@navikt/core/css/stepper.css

@@ -80,12 +80,20 @@ button.navds-stepper__step {
   cursor: default;
 }
 
-:where(.navds-stepper__step):focus {
+: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;
@@ -102,6 +110,8 @@ button.navds-stepper__step {
   border: none;
   background: none;
   font-size: 28px;
+  color: var(--a-text-on-action);
+  background-color: var(--ac-stepper-text, var(--a-surface-action));
 }
 
 .navds-stepper__content {
@@ -189,6 +199,11 @@ button.navds-stepper__step {
   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 {
+  color: var(--ac-stepper-hover-bg, var(--a-surface-action-subtle-hover));
+  background-color: var(--ac-stepper-text, var(--a-surface-action));
+}
+
 /* 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));
@@ -217,6 +232,26 @@ button.navds-stepper__step {
   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/table.css

@@ -119,11 +119,18 @@
   background-color: var(--ac-table-sort-button-hover-bg, var(--a-bg-subtle));
 }
 
-.navds-table__sort-button:focus {
+.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));
@@ -181,10 +188,16 @@
   padding: var(--a-spacing-2);
 }
 
-.navds-table__toggle-expand-button:focus {
+.navds-table__toggle-expand-button:focus-visible {
   box-shadow: inset var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-table__toggle-expand-button:focus {
+    box-shadow: inset var(--a-shadow-focus);
+  }
+}
+
 .navds-table__expandable-icon {
   font-size: 1.5rem;
 }
@@ -193,19 +206,18 @@
   font-size: 1.25rem;
 }
 
-.navds-table__toggle-expand-button:hover .navds-table__expandable-icon,
-.navds-table__expandable-icon--filled {
-  display: none;
-}
-
-.navds-table__toggle-expand-button:hover .navds-table__expandable-icon--filled {
-  display: block;
+.navds-table__toggle-expand-button:hover .navds-table__expandable-icon {
+  transform: translateY(1px);
 }
 
 .navds-table__toggle-expand-cell--open .navds-table__expandable-icon {
   transform: rotate(180deg);
 }
 
+.navds-table__toggle-expand-cell--open .navds-table__toggle-expand-button:hover .navds-table__expandable-icon {
+  transform: translateY(-1px) rotate(180deg);
+}
+
 .navds-table__expanded-row-cell {
   padding: 0;
 }

@navikt/core/css/tabs.css

@@ -49,7 +49,7 @@
   align-items: center;
   background: none;
   border: none;
-  color: var(--ac-tabs-text, var(--a-text-subtle));
+  color: var(--ac-tabs-text, var(--a-text-default));
   cursor: pointer;
 }
 
@@ -62,12 +62,20 @@
   color: var(--ac-tabs-selected-text, var(--a-text-default));
 }
 
-.navds-tabs__tab:focus {
+.navds-tabs__tab:focus-visible {
   outline: none;
   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: none;
+    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;
@@ -112,3 +120,10 @@
   outline: none;
   box-shadow: inset 0 0 0 2px var(--a-border-focus);
 }
+
+@supports not selector(:focus-visible) {
+  .navds-tabs__tabpanel:focus {
+    outline: none;
+    box-shadow: inset 0 0 0 2px var(--a-border-focus);
+  }
+}

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

@@ -5,7 +5,7 @@
 }
 
 .navds-toggle-group {
-  border-radius: 9px;
+  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) + 1px);
@@ -15,6 +15,10 @@
   grid-auto-columns: 1fr;
 }
 
+.navds-toggle-group--small {
+  padding: calc(var(--a-spacing-05) + 1px);
+}
+
 .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));
@@ -24,14 +28,25 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: var(--a-spacing-3);
-  min-height: 48px;
+  padding: var(--a-spacing-1) var(--a-spacing-3);
+  min-height: 38px;
   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-medium);
+  border-radius: 2px;
   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 {
@@ -41,7 +56,7 @@
 
 .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-action-on-action-subtle));
+  color: var(--ac-toggle-group-button-hover-text, var(--a-text-default));
 }
 
 .navds-toggle-group--neutral > .navds-toggle-group__button:hover {
@@ -49,24 +64,45 @@
   color: var(--ac-toggle-group-button-neutral-hover-text, var(--a-text-default));
 }
 
-.navds-toggle-group__button:focus {
+.navds-toggle-group__button:focus-visible {
   outline: none;
   box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
 }
 
-.navds-toggle-group__button:focus:hover[aria-pressed="false"] {
+@supports not selector(:focus-visible) {
+  .navds-toggle-group__button:focus {
+    outline: none;
+    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 > * {
@@ -77,17 +113,18 @@
 .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));
+  font-weight: var(--a-font-weight-bold);
 }
 
 .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));
+  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: 0.375rem;
-  min-height: 32px;
+  padding: var(--a-spacing-05) var(--a-spacing-3);
+  min-height: 26px;
   min-width: fit-content;
 }
 

@navikt/core/css/tokens.json

@@ -14,26 +14,22 @@
     "--ac-alert-icon-success-color": "--a-icon-success"
   },
   "accordion": {
-    "--ac-accordion-header-bg": "--ac-surface-transparent",
-    "--ac-accordion-header-bg-hover": "--ac-surface-transparent",
+    "--ac-accordion-header-bg": "--a-surface-transparent",
+    "--ac-accordion-header-bg-hover": "--a-surface-hover",
+    "--ac-accordion-header-text-hover": "inherit",
     "--ac-accordion-header-border": "--a-border-divider",
-    "--ac-accordion-header-text-hover": "--a-text-action-on-action-subtle",
-    "--ac-accordion-header-border-hover": "--a-border-default",
     "--ac-accordion-item-bg-open": "--a-surface-action-subtle",
-    "--ac-accordion-header-bg-open": "--ac-accordion-item-bg-open",
-    "--ac-accordion-header-bg-open-hover": "--a-surface-action-subtle",
-    "--ac-accordion-item-border-open": "--a-surface-action-subtle",
-    "--ac-accordion-content-border": "--a-border-divider",
-    "--ac-accordion-content-border-open": "--a-border-default"
+    "--ac-accordion-neutral-item-bg-open": "--a-surface-neutral-subtle",
+    "--ac-accordion-header-icon-bg-hover": "--a-surface-neutral-subtle-hover"
   },
   "button": {
     "--ac-button-border-radius": "--a-border-radius-medium",
-    "--ac-button-padding": "var(--a-spacing-3) var(--a-spacing-5)",
-    "--ac-button-padding-small": "0.375rem var(--a-spacing-3)",
-    "--ac-button-padding-xsmall": "var(--a-spacing-05) var(--a-spacing-2)",
-    "--ac-button-padding-icon-only": "var(--a-spacing-3)",
-    "--ac-button-padding-icon-only-small": "0.375rem",
-    "--ac-button-padding-icon-only-xsmall": "var(--a-spacing-1)",
+    "--ac-button-padding": "--a-spacing-3 --a-spacing-5",
+    "--ac-button-padding-small": "--a-spacing-1 --a-spacing-3",
+    "--ac-button-padding-xsmall": "--a-spacing-05 --a-spacing-2",
+    "--ac-button-padding-icon-only": "--a-spacing-3",
+    "--ac-button-padding-icon-only-small": "--a-spacing-1",
+    "--ac-button-padding-icon-only-xsmall": "--a-spacing-05",
     "--ac-button-primary-bg": "--a-surface-action",
     "--ac-button-primary-text": "--a-text-on-action",
     "--ac-button-primary-hover-bg": "--a-surface-action-hover",
@@ -108,6 +104,20 @@
     "--ac-chip-removable-neutral-hover-bg": "--a-surface-neutral-subtle-hover",
     "--ac-chip-removable-neutral-hover-border": "--a-border-strong"
   },
+  "copybutton": {
+    "--ac-copybutton-border-radius": "--a-border-radius-medium",
+    "--ac-copybutton-action-text": "--a-text-action",
+    "--ac-copybutton-action-bg": "--a-surface-transparent",
+    "--ac-copybutton-action-hover-text": "--a-text-action",
+    "--ac-copybutton-action-hover-bg": "--a-surface-hover",
+    "--ac-copybutton-action-active-text": "--a-icon-success",
+    "--ac-copybutton-neutral-text": "--a-text-subtle",
+    "--ac-copybutton-neutral-bg": "--a-surface-transparent",
+    "--ac-copybutton-neutral-hover-text": "--a-text-default",
+    "--ac-copybutton-neutral-hover-bg": "--a-surface-hover",
+    "--ac-copybutton-neutral-active-text": "--a-text-default",
+    "--ac-copybutton-animation": "akselCopyButtonAnimation 0.4s linear"
+  },
   "date": {
     "--ac-date-middle-text": "--a-text-on-action",
     "--ac-date-middle-bg": "--a-surface-action-selected",
@@ -204,8 +214,9 @@
     "--ac-stepper-active-border": "--a-border-action-selected",
     "--ac-stepper-active-text": "--a-text-on-action",
     "--ac-stepper-hover-bg": "--a-surface-action-subtle-hover",
-    "--ac-stepper-non-interactive-active": "--a-text-default",
+    "--ac-stepper-non-interactive-completed-bg": "--a-surface-subtle",
     "--ac-stepper-non-interactive-line-completed": "--a-border-strong",
+    "--ac-stepper-non-interactive-active": "--a-text-default",
     "--ac-stepper-non-interactive-active-bg": "--a-surface-inverted",
     "--ac-stepper-non-interactive-active-border": "--a-surface-inverted",
     "--ac-stepper-non-interactive-active-text": "--a-text-on-inverted",
@@ -226,7 +237,7 @@
   },
   "tabs": {
     "--ac-tabs-border": "--a-border-divider",
-    "--ac-tabs-text": "--a-text-subtle",
+    "--ac-tabs-text": "--a-text-default",
     "--ac-tabs-hover-border": "--a-border-subtle-hover",
     "--ac-tabs-selected-border": "--a-border-action",
     "--ac-tabs-selected-text": "--a-text-default",
@@ -280,14 +291,14 @@
     "--ac-toggle-group-button-bg": "--a-surface-transparent",
     "--ac-toggle-group-button-text": "--a-text-default",
     "--ac-toggle-group-button-hover-bg": "--a-surface-action-subtle",
-    "--ac-toggle-group-button-hover-text": "--a-text-action-on-action-subtle",
+    "--ac-toggle-group-button-hover-text": "--a-text-default",
     "--ac-toggle-group-selected-bg": "--a-surface-action-selected",
     "--ac-toggle-group-selected-text": "--a-text-on-action",
     "--ac-toggle-group-button-neutral-bg": "--a-surface-transparent",
     "--ac-toggle-group-button-neutral-text": "--a-text-default",
     "--ac-toggle-group-button-neutral-hover-bg": "--a-surface-neutral-subtle-hover",
     "--ac-toggle-group-button-neutral-hover-text": "--a-text-default",
-    "--ac-toggle-group-neutral-selected-bg": "--a-surface-neutral",
+    "--ac-toggle-group-neutral-selected-bg": "--a-surface-neutral-selected",
     "--ac-toggle-group-neutral-selected-text": "--a-text-on-neutral"
   },
   "tooltip": {

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,112 @@
 # @navikt/ds-react
 
+## 3.2.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@3.2.1
+
+## 3.2.0
+
+### Minor Changes
+
+- [#1982](https://github.com/navikt/aksel/pull/1982) [`affcab14c`](https://github.com/navikt/aksel/commit/affcab14c3d536929dfa64a36f5b43f9d0e8c3b7) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Ny komponent `<CopyButton />`!
+
+  - Erstatter `<CopyToClipboard />` fra `@navikt/ds-react-internal`
+  - CopyToClipboard er markert som deprecated. Den vil fortsatt fungere, men noen lintere vil kunne ende opp med å klage på den.
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@3.2.0
+
+## 3.1.3
+
+### Patch Changes
+
+- [#1976](https://github.com/navikt/aksel/pull/1976) [`e8ecf309a`](https://github.com/navikt/aksel/commit/e8ecf309a910e47fd3cea6c54cd993ab1196910f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :lipstick: Oppdatert utseende for ToggleGroup
+
+  - Medium og Small er begge 10px lavere
+  - Mindre border-radius
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@3.1.3
+
+## 3.1.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@3.1.2
+
+## 3.1.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@3.1.1
+
+## 3.1.0
+
+### Patch Changes
+
+- [#1967](https://github.com/navikt/aksel/pull/1967) [`9d2cd9e7f`](https://github.com/navikt/aksel/commit/9d2cd9e7fffb3cf6310c88229ee39ea85db19bca) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :lipstick: Oppdatert Label og Description spacing for skjemakomponenter
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@3.1.0
+
+## 3.0.1
+
+### Patch Changes
+
+- [`fa2ead912`](https://github.com/navikt/aksel/commit/fa2ead912a4db15d1fa7e2c3efccbe69a64dc9a7) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :fire: Fjernet ds-icons fra dependencies
+
+- [`db3846f5c`](https://github.com/navikt/aksel/commit/db3846f5cd483ad0ca24bc5938cfcdb64260f89d) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Fikset default headingSize for Accordion
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@3.0.1
+
+## 3.0.0
+
+### Major Changes
+
+- [#1964](https://github.com/navikt/aksel/pull/1964) [`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - **Accordion**
+
+  - Accordion oppdatet til å ha chevron left-aligned.
+  - Neutral-variant lagt til
+  - Diverse nye size-options for heading og paddinger.
+  - Deler av Accordion-CSS er refaktorert. Dette vil kunne brekke overskrevne stiler.
+
+- [#1964](https://github.com/navikt/aksel/pull/1964) [`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Aksels løsninger bruker nå `@navikt/aksel-icons`
+
+  **Sideeffects av ikonendringer**
+
+  - Komponenter som tidligere brukte Expand-ikon har fått oppdatert animasjon (table, readmore og accordion)
+  - Alert bruker samme ikonstørrelse for alle størrelser
+  - Chips har justert padding/ikonstørrelser
+  - Datepicker hover-bug på knapper er fikset
+  - Helptekst bruker nå et custom-ikon.
+  - Select har fått justert padding rundt ikon
+  - Switch bruker samme checkmark som checkbox, er nå avrundet
+  - ReadMore har justert margin for alignment med ikon, fjernet content-animasjon
+  - Tabs bruker default text-default nå
+  - Stepper har endret hvordan den styler checkmark-ikon.
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@3.0.0
+  - @navikt/ds-icons@3.0.0
+
+## 2.9.8
+
+### Patch Changes
+
+- Updated dependencies [[`8790c5997`](https://github.com/navikt/aksel/commit/8790c5997e0d647419bdb5080c86781d08c196b8)]:
+  - @navikt/aksel-icons@2.9.8
+  - @navikt/ds-icons@2.9.8
+
 ## 2.9.7
 
 ### Patch Changes

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "2.9.7",
+  "version": "3.2.1",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -38,8 +38,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.17.0",
-    "@navikt/aksel-icons": "^2.9.7",
-    "@navikt/ds-icons": "^2.9.7",
+    "@navikt/aksel-icons": "^3.2.1",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

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

@@ -3,6 +3,7 @@ import React, { forwardRef } from "react";
 import AccordionItem, { AccordionItemType } from "./AccordionItem";
 import AccordionContent, { AccordionContentType } from "./AccordionContent";
 import AccordionHeader, { AccordionHeaderType } from "./AccordionHeader";
+import { AccordionContext } from "./AccordionContext";
 
 interface AccordionComponent
   extends React.ForwardRefExoticComponent<
@@ -14,6 +15,18 @@ interface AccordionComponent
 }
 
 export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * @default 'default'
+   */
+  variant?: "default" | "neutral";
+  /**
+   * @default 'small'
+   */
+  headingSize?: "large" | "medium" | "small" | "xsmall";
+  /**
+   * @default "medium"
+   */
+  size?: "large" | "medium" | "small";
   /**
    * Instances of Accordion.Item
    */
@@ -21,9 +34,36 @@ export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
-  ({ className, ...rest }, ref) => (
-    <div {...rest} className={cl("navds-accordion", className)} ref={ref} />
-  )
+  (
+    {
+      className,
+      variant = "default",
+      headingSize = "small",
+      size = "medium",
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <AccordionContext.Provider
+        value={{
+          variant,
+          headingSize,
+          size,
+        }}
+      >
+        <div
+          {...rest}
+          className={cl(
+            "navds-accordion",
+            className,
+            `navds-accordion--${size}`
+          )}
+          ref={ref}
+        />
+      </AccordionContext.Provider>
+    );
+  }
 ) as AccordionComponent;
 
 Accordion.Header = AccordionHeader;

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

@@ -1,6 +1,5 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
-import AnimateHeight from "../util/AnimateHeight";
 import { BodyLong } from "../typography/BodyLong";
 import { AccordionItemContext } from "./AccordionItem";
 
@@ -28,16 +27,20 @@ const AccordionContent: AccordionContentType = forwardRef(
     }
 
     return (
-      <AnimateHeight height={context.open ? "auto" : 0} duration={250}>
-        <BodyLong
-          {...rest}
-          as="div"
-          ref={ref}
-          className={cl("navds-accordion__content", className)}
-        >
-          {children}
-        </BodyLong>
-      </AnimateHeight>
+      <BodyLong
+        {...rest}
+        as="div"
+        ref={ref}
+        className={cl(
+          "navds-accordion__content",
+          {
+            "navds-accordion__content--closed": !context.open,
+          },
+          className
+        )}
+      >
+        {children}
+      </BodyLong>
     );
   }
 );

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

@@ -0,0 +1,15 @@
+import { createContext } from "react";
+
+export type AccordionContextProps = {
+  variant?: "default" | "neutral";
+  headingSize?: "large" | "medium" | "small" | "xsmall";
+  size?: "large" | "medium" | "small";
+  openItems?: number[];
+};
+
+export const AccordionContext = createContext<AccordionContextProps | null>({
+  variant: "default",
+  headingSize: "small",
+  size: "medium",
+  openItems: [],
+});

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

@@ -1,8 +1,9 @@
-import { Expand, ExpandFilled } from "@navikt/ds-icons";
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import { Heading } from "../typography/Heading";
+import { AccordionContext } from "./AccordionContext";
 import { AccordionItemContext } from "./AccordionItem";
+import { ChevronDownIcon } from "@navikt/aksel-icons";
 
 export interface AccordionHeaderProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -18,43 +19,42 @@ export type AccordionHeaderType = React.ForwardRefExoticComponent<
 
 const AccordionHeader: AccordionHeaderType = forwardRef(
   ({ children, className, onClick, ...rest }, ref) => {
-    const context = useContext(AccordionItemContext);
+    const itemContext = useContext(AccordionItemContext);
+    const accordionContext = useContext(AccordionContext);
 
-    if (context === null) {
+    if (accordionContext === null || itemContext === null) {
       console.error(
-        "<Accordion.Header> has to be used within an <Accordion.Item>"
+        "<Accordion.Header> has to be used within an <Accordion.Item>, which in turn must be within an <Accordion>"
       );
       return null;
     }
 
-    const handleClick = (
-      e: React.MouseEvent<HTMLButtonElement, MouseEvent>
-    ) => {
-      context.toggleOpen();
-      onClick && onClick(e);
-    };
-
     return (
       <button
-        {...rest}
         ref={ref}
+        {...rest}
         className={cl("navds-accordion__header", className)}
+        onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+          itemContext.toggleOpen();
+          onClick && onClick(e);
+        }}
+        aria-expanded={itemContext.open}
         type="button"
-        onClick={handleClick}
-        aria-expanded={context.open}
       >
+        <div className="navds-accordion__icon-wrapper">
+          <ChevronDownIcon
+            className="navds-accordion__header-chevron"
+            title="Vis mer"
+            aria-hidden
+          />
+        </div>
         <Heading
-          size="small"
+          size={accordionContext.headingSize ?? "small"}
           as="span"
           className="navds-accordion__header-content"
         >
           {children}
         </Heading>
-        <Expand aria-hidden className="navds-accordion__expand-icon" />
-        <ExpandFilled
-          aria-hidden
-          className="navds-accordion__expand-icon navds-accordion__expand-icon--filled"
-        />
       </button>
     );
   }

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

@@ -1,5 +1,12 @@
 import cl from "clsx";
-import React, { createContext, forwardRef, useState } from "react";
+import React, {
+  createContext,
+  forwardRef,
+  useContext,
+  useRef,
+  useState,
+} from "react";
+import { AccordionContext } from "./AccordionContext";
 
 export interface AccordionItemProps
   extends React.HTMLAttributes<HTMLDivElement> {
@@ -38,11 +45,27 @@ const AccordionItem: AccordionItemType = forwardRef(
     ref
   ) => {
     const [internalOpen, setInternalOpen] = useState<boolean>(defaultOpen);
+    const context = useContext(AccordionContext);
+
+    const [_open, _setOpen] = useState(defaultOpen);
+    const shouldAnimate = useRef<boolean>(!(Boolean(open) || defaultOpen));
+    const handleOpen = () => {
+      if (open === undefined) {
+        const newOpen = !_open;
+        _setOpen(newOpen);
+        setInternalOpen(newOpen);
+      } else {
+        setInternalOpen(!open);
+      }
+      shouldAnimate.current = true;
+    };
 
     return (
       <div
         className={cl("navds-accordion__item", className, {
           "navds-accordion__item--open": open ?? internalOpen,
+          "navds-accordion__item--neutral": context?.variant === "neutral",
+          "navds-accordion__item--no-animation": !shouldAnimate.current,
         })}
         ref={ref}
         {...rest}
@@ -50,11 +73,7 @@ const AccordionItem: AccordionItemType = forwardRef(
         <AccordionItemContext.Provider
           value={{
             open: open ?? internalOpen,
-            toggleOpen: () => {
-              if (open === undefined) {
-                setInternalOpen((iOpen) => !iOpen);
-              }
-            },
+            toggleOpen: handleOpen,
           }}
         >
           {children}

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

@@ -2,7 +2,8 @@ import React, { useState } from "react";
 import AccordionContent from "./AccordionContent";
 import AccordionHeader from "./AccordionHeader";
 import AccordionItem from "./AccordionItem";
-import { Accordion } from ".";
+import { Accordion, AccordionProps } from ".";
+import { Table } from "..";
 
 export default {
   title: "ds-react/Accordion",
@@ -12,6 +13,39 @@ export default {
     AccordionContent,
     AccordionHeader,
   },
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          width: "600px",
+          minHeight: "100vh",
+          padding: "10rem 0",
+          display: "flex",
+          flexDirection: "column",
+          gap: "1rem",
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    variant: {
+      options: ["default", "neutral"],
+      control: { type: "select" },
+    },
+    headingSize: {
+      options: ["large", "medium", "small", "xsmall"],
+      control: { type: "select" },
+    },
+    size: {
+      options: ["large", "medium", "small"],
+      control: { type: "select" },
+    },
+    nItems: {
+      control: { type: "number" },
+    },
+  },
 };
 
 const Content = () => (
@@ -32,9 +66,25 @@ const Content = () => (
   </Accordion.Content>
 );
 
+const SmallContent = () => (
+  <Accordion.Content>
+    Magna aliquip aliquip fugiat nostrud <a href="#Lorem">Lorem est</a> pariatur
+    veniam officia laboris voluptate officia pariatur.ex anim
+  </Accordion.Content>
+);
+
 const Item = (props) => {
   const [open, setOpen] = useState(false);
 
+  if (props.defaultOpen) {
+    return (
+      <Accordion.Item defaultOpen={props.defaultOpen}>
+        <Accordion.Header>Accordion header text</Accordion.Header>
+        <SmallContent />
+      </Accordion.Item>
+    );
+  }
+
   return props.controlled ? (
     <Accordion.Item open={open}>
       <Accordion.Header onClick={() => setOpen(!open)}>
@@ -51,11 +101,11 @@ const Item = (props) => {
 };
 
 export const Default = {
-  render: (props) => {
+  render: ({ nItems, ...props }) => {
     return (
       <div style={{ width: 500 }}>
-        <Accordion>
-          {[...Array(props.nItems ? props.nItems : 2)].map((_, y) => (
+        <Accordion {...props}>
+          {[...Array(nItems ? nItems : 2)].map((_, y) => (
             <Item key={y} {...props} />
           ))}
         </Accordion>
@@ -64,18 +114,62 @@ export const Default = {
   },
 
   args: {
-    controlled: false,
+    controlled: "false",
     nItems: 2,
+    variant: "default",
+    headingSize: "medium",
+    size: "medium",
   },
 };
 
-export const Controlled = () => {
+export const DefaultOpen = {
+  render: ({ nItems, openItems, ...props }) => {
+    return (
+      <div style={{ width: 500 }}>
+        <Accordion {...props}>
+          {[...Array(nItems ? nItems : 2)].map((_, y) => (
+            <Item key={y} defaultOpen={openItems.includes(y)} {...props} />
+          ))}
+        </Accordion>
+      </div>
+    );
+  },
+
+  args: {
+    openItems: [1, 2],
+    controlled: "false",
+    nItems: 5,
+    variant: "neutral",
+    headingSize: "large",
+  },
+};
+
+export const Variants = {
+  render: () => {
+    return (
+      <div style={{ width: 500 }} className="colgap">
+        <Accordion>
+          {[...Array(2)].map((_, y) => (
+            <Item key={y} defaultOpen />
+          ))}
+        </Accordion>
+        <Accordion variant="neutral">
+          {[...Array(2)].map((_, y) => (
+            <Item key={y} defaultOpen />
+          ))}
+        </Accordion>
+      </div>
+    );
+  },
+};
+
+export const Controlled = (props) => {
   const [open, setOpen] = useState(false);
   const [open2, setOpen2] = useState(false);
 
   return (
     <div style={{ width: 500 }}>
-      <Accordion>
+      <Accordion {...props}>
         <Accordion.Item open={open}>
           <Accordion.Header onClick={() => setOpen(!open)}>
             Accordion header text
@@ -93,17 +187,124 @@ export const Controlled = () => {
   );
 };
 
-export const Uncontrolled = () => (
-  <div style={{ width: 500 }}>
-    <Accordion>
+export const WithTable = {
+  render: (props) => {
+    const ExampleTable = () => {
+      return (
+        <Table>
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell>ID</Table.HeaderCell>
+              <Table.HeaderCell>Fornavn</Table.HeaderCell>
+              <Table.HeaderCell>Etternavn</Table.HeaderCell>
+              <Table.HeaderCell>Rolle</Table.HeaderCell>
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            <Table.Row>
+              <Table.HeaderCell>1</Table.HeaderCell>
+              <Table.DataCell>Jean-Luc</Table.DataCell>
+              <Table.DataCell>Picard</Table.DataCell>
+              <Table.DataCell>Kaptein</Table.DataCell>
+            </Table.Row>
+            <Table.Row>
+              <Table.HeaderCell>2</Table.HeaderCell>
+              <Table.DataCell>William</Table.DataCell>
+              <Table.DataCell>Riker</Table.DataCell>
+              <Table.DataCell>Kommandør</Table.DataCell>
+            </Table.Row>
+            <Table.Row>
+              <Table.HeaderCell>3</Table.HeaderCell>
+              <Table.DataCell>Geordi</Table.DataCell>
+              <Table.DataCell>La Forge</Table.DataCell>
+              <Table.DataCell>Sjefsingeniør</Table.DataCell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+      );
+    };
+
+    const ContentWithTable = () => {
+      return (
+        <Accordion.Content>
+          <ExampleTable />
+        </Accordion.Content>
+      );
+    };
+
+    return (
+      <div style={{ width: 500 }}>
+        <Accordion {...props}>
+          <Accordion.Item>
+            <Accordion.Header>Table of people</Accordion.Header>
+            <ContentWithTable />
+          </Accordion.Item>
+          <Accordion.Item>
+            <Accordion.Header>Table of people</Accordion.Header>
+            <ContentWithTable />
+          </Accordion.Item>
+        </Accordion>
+      </div>
+    );
+  },
+
+  args: {
+    variant: "default",
+    headingSize: "large",
+  },
+};
+
+const SingleHeaderAccordion = ({
+  size = "medium",
+  headingSize = "medium",
+}: Partial<AccordionProps>) => {
+  return (
+    <Accordion size={size} headingSize={headingSize}>
       <Accordion.Item>
-        <Accordion.Header>Accordion header text</Accordion.Header>
-        <Content />
+        <Accordion.Header>{`${size} size + ${headingSize} heading`}</Accordion.Header>
+        <Accordion.Content>a</Accordion.Content>
       </Accordion.Item>
       <Accordion.Item>
-        <Accordion.Header>Accordion header text</Accordion.Header>
-        <Content />
+        <Accordion.Header>{`${size} size + ${headingSize} heading`}</Accordion.Header>
+        <Accordion.Content>a</Accordion.Content>
       </Accordion.Item>
     </Accordion>
-  </div>
-);
+  );
+};
+
+type sizesType = "large" | "medium" | "small";
+type headingSizesType = "large" | "medium" | "small" | "xsmall";
+const sizes: sizesType[] = ["large", "medium", "small"];
+const headingSizes: headingSizesType[] = ["large", "medium", "small", "xsmall"]; // enum this?!
+
+export const Size = {
+  render: ({ ...props }) => {
+    return (
+      <div style={{ width: 500 }} className="colgap">
+        {sizes.map((element) => (
+          <SingleHeaderAccordion size={element} {...props} />
+        ))}
+      </div>
+    );
+  },
+
+  args: {
+    variant: "neutral",
+  },
+};
+
+export const HeadingSize = {
+  render: ({ ...props }) => {
+    return (
+      <div style={{ width: 500 }} className="colgap">
+        {headingSizes.map((element) => (
+          <SingleHeaderAccordion headingSize={element} {...props} />
+        ))}
+      </div>
+    );
+  },
+
+  args: {
+    variant: "neutral",
+  },
+};

@navikt/core/react/src/alert/Alert.tsx

@@ -1,9 +1,9 @@
 import {
-  ErrorFilled,
-  InformationFilled,
-  SuccessFilled,
-  WarningFilled,
-} from "@navikt/ds-icons";
+  InformationSquareFillIcon,
+  CheckmarkCircleFillIcon,
+  ExclamationmarkTriangleFillIcon,
+  XMarkOctagonFillIcon,
+} from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { BodyLong } from "../typography/BodyLong";
@@ -37,13 +37,13 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
 const Icon = ({ variant, ...props }) => {
   switch (variant) {
     case "error":
-      return <ErrorFilled title="Feil" {...props} />;
+      return <XMarkOctagonFillIcon title="Feil" {...props} />;
     case "warning":
-      return <WarningFilled title="Advarsel" {...props} />;
+      return <ExclamationmarkTriangleFillIcon title="Advarsel" {...props} />;
     case "info":
-      return <InformationFilled title="Informasjon" {...props} />;
+      return <InformationSquareFillIcon title="Informasjon" {...props} />;
     case "success":
-      return <SuccessFilled title="Suksess" {...props} />;
+      return <CheckmarkCircleFillIcon title="Suksess" {...props} />;
     default:
       return null;
   }

@navikt/core/react/src/button/button.stories.tsx

@@ -1,4 +1,4 @@
-import { Star } from "@navikt/ds-icons";
+import { StarIcon } from "@navikt/aksel-icons";
 import React from "react";
 import { Button } from "./index";
 
@@ -45,7 +45,7 @@ export const Default = {
         variant={props.variant}
         size={props.size}
         loading={props.loading}
-        icon={props.icon ? <Star /> : undefined}
+        icon={props.icon ? <StarIcon /> : undefined}
         iconPosition={props.iconPosition}
       >
         {props.children}
@@ -159,7 +159,7 @@ export const Icon = () => (
         <Button
           key={variant}
           variant={variant}
-          icon={<Star title="Stjerne" />}
+          icon={<StarIcon title="Stjerne" />}
         />
       ))}
     </div>
@@ -169,7 +169,7 @@ export const Icon = () => (
           key={variant}
           variant={variant}
           size="small"
-          icon={<Star title="Stjerne" />}
+          icon={<StarIcon title="Stjerne" />}
         />
       ))}
     </div>
@@ -179,7 +179,7 @@ export const Icon = () => (
           key={variant}
           variant={variant}
           size="xsmall"
-          icon={<Star title="Stjerne" />}
+          icon={<StarIcon title="Stjerne" />}
         />
       ))}
     </div>
@@ -193,7 +193,7 @@ export const IconWText = () => (
         <Button
           key={variant}
           variant={variant}
-          icon={<Star title="Stjerne" />}
+          icon={<StarIcon title="Stjerne" />}
           iconPosition={i % 2 ? "left" : "right"}
         >
           {varSwitch[variant]}
@@ -206,7 +206,7 @@ export const IconWText = () => (
           key={variant}
           variant={variant}
           size="small"
-          icon={<Star title="Stjerne" />}
+          icon={<StarIcon title="Stjerne" />}
           iconPosition={i % 2 ? "left" : "right"}
         >
           {varSwitch[variant]}
@@ -219,7 +219,7 @@ export const IconWText = () => (
           key={variant}
           variant={variant}
           size="xsmall"
-          icon={<Star title="Stjerne" />}
+          icon={<StarIcon title="Stjerne" />}
           iconPosition={i % 2 ? "left" : "right"}
         >
           {varSwitch[variant]}

@navikt/core/react/src/chips/Removable.tsx

@@ -1,4 +1,4 @@
-import { Close } from "@navikt/ds-icons";
+import { XMarkIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { OverridableComponent } from "../util/OverridableComponent";
@@ -58,7 +58,7 @@ export const RemovableChips: OverridableComponent<
       >
         <span className="navds-chips__chip-text">{children}</span>
         <span className="navds-chips__removable-icon">
-          <Close aria-hidden />
+          <XMarkIcon aria-hidden />
         </span>
       </Component>
     );

@navikt/core/react/src/chips/Toggle.tsx

@@ -1,4 +1,4 @@
-import { SuccessStroke } from "@navikt/ds-icons";
+import { CheckmarkIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { OverridableComponent } from "../util/OverridableComponent";
@@ -30,7 +30,7 @@ export const ToggleChips: ToggleChipsType = forwardRef(
         aria-pressed={selected}
       >
         {selected && (
-          <SuccessStroke aria-hidden className="navds-chips__toggle-icon" />
+          <CheckmarkIcon aria-hidden className="navds-chips__toggle-icon" />
         )}
         <span className="navds-chips__chip-text">{children}</span>
       </Component>

@navikt/core/react/src/copybutton/CopyButton.tsx

@@ -0,0 +1,174 @@
+"use client";
+import { CheckmarkIcon, FilesIcon } from "@navikt/aksel-icons";
+import cl from "clsx";
+import React, {
+  ButtonHTMLAttributes,
+  forwardRef,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import copy from "../util/copy";
+import Label from "../typography/Label";
+
+export interface CopyButtonProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+  /**
+   * @default "medium"
+   */
+  size?: "medium" | "small";
+  /**
+   * @default "neutral"
+   */
+  variant?: "action" | "neutral";
+  /**
+   * Text to copy to clipboard
+   */
+  copyText: string;
+  /**
+   *  Optional text in button
+   */
+  text?: string;
+  /**
+   * Text shown when button is clicked
+   * Only set if used with 'text'-prop
+   */
+  activeText?: string;
+  /**
+   *  Callback when 'copied'-state is active
+   */
+  onActiveChange?: (state: boolean) => void;
+  /**
+   *  Icon shown when button is not clicked
+   * @default <FilesIcon />
+   */
+  icon?: React.ReactNode;
+  /**
+   * Icon shown when active
+   * @default <CheckmarkIcon />
+   */
+  activeIcon?: React.ReactNode;
+  /**
+   * Timeout duration in milliseconds
+   * @default 2000
+   */
+  activeDuration?: number;
+  /**
+   * * accessible label for icon (ignored if text is set)
+   * @default 'Kopier'
+   */
+  title?: string;
+  /**
+   * accessible label for icon in active-state (ignored if text is set)
+   * @default 'Kopiert'
+   */
+  activeTitle?: string;
+}
+
+export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
+  (
+    {
+      className,
+      copyText,
+      text,
+      activeText = "Kopiert!",
+      variant = "neutral",
+      size = "medium",
+      onActiveChange,
+      icon,
+      activeIcon,
+      activeDuration = 2000,
+      title = "Kopier",
+      activeTitle = "Kopiert",
+      ...rest
+    },
+    ref
+  ) => {
+    const [active, setActive] = useState(false);
+    const timeoutRef = useRef<number>();
+
+    useEffect(() => {
+      return () => {
+        timeoutRef.current && clearTimeout(timeoutRef.current);
+      };
+    }, []);
+
+    const handleClick = (
+      event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+    ) => {
+      timeoutRef.current && clearTimeout(timeoutRef.current);
+      copy(copyText);
+      setActive(true);
+      onActiveChange?.(true);
+      rest.onClick?.(event);
+
+      timeoutRef.current = window.setTimeout(() => {
+        setActive(false);
+        onActiveChange?.(false);
+      }, activeDuration);
+    };
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        {...rest}
+        aria-live="polite"
+        className={cl(
+          "navds-copybutton",
+          className,
+          `navds-copybutton--${size}`,
+          `navds-copybutton--${variant}`,
+          {
+            "navds-copybutton--icon-only": !text,
+            "navds-copybutton--active": active,
+          }
+        )}
+        onClick={handleClick}
+      >
+        <span className="navds-copybutton__content">
+          {active ? (
+            <span className="navds-copybutton__icon">
+              {activeIcon ?? (
+                <CheckmarkIcon
+                  aria-hidden={!!text}
+                  title={text ? undefined : activeTitle}
+                />
+              )}
+            </span>
+          ) : (
+            <span className="navds-copybutton__icon">
+              {icon ?? (
+                <FilesIcon
+                  aria-hidden={!!text}
+                  title={text ? undefined : title}
+                />
+              )}
+            </span>
+          )}
+
+          {text &&
+            (active ? (
+              <Label
+                as="span"
+                size={size === "medium" ? "medium" : "small"}
+                aria-live="polite"
+              >
+                {activeText}
+              </Label>
+            ) : (
+              <Label
+                as="span"
+                size={size === "medium" ? "medium" : "small"}
+                aria-live="polite"
+              >
+                {text}
+              </Label>
+            ))}
+        </span>
+      </button>
+    );
+  }
+);
+
+export default CopyButton;

@navikt/core/react/src/copybutton/copy-button.stories.tsx

@@ -0,0 +1,168 @@
+import { LinkIcon, ThumbUpIcon } from "@navikt/aksel-icons";
+import { userEvent, within } from "@storybook/testing-library";
+import React from "react";
+import { CopyButton } from ".";
+import { Tooltip } from "../tooltip";
+
+export default {
+  title: "ds-react/CopyButton",
+  component: CopyButton,
+  argTypes: {
+    size: {
+      defaultValue: "medium",
+      control: { type: "radio" },
+      options: ["small", "medium"],
+    },
+    variant: {
+      defaultValue: undefined,
+      control: { type: "radio" },
+      options: ["neutral", "action"],
+    },
+  },
+};
+
+export const Default = {
+  render: (args) => <CopyButton {...args} />,
+  args: {
+    size: "medium",
+    duration: 2000,
+    copyText: "3.14",
+    text: "",
+    activeText: "",
+  },
+};
+
+export const Interaction = {
+  render: () => (
+    <CopyButton
+      copyText="3.14"
+      variant="action"
+      text="Kopier"
+      data-testid="copy-button"
+    />
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const button = canvas.getByTestId("copy-button");
+
+    userEvent.click(button);
+  },
+};
+
+export const Variants = {
+  render: () => (
+    <div className="colgap">
+      <CopyButton copyText="3.14" variant="action" text="Kopier" />
+
+      <CopyButton copyText="3.14" variant="neutral" text="Kopier" />
+    </div>
+  ),
+};
+
+export const Sizes = {
+  render: () => (
+    <div className="colgap">
+      <div className="rowgap">
+        <CopyButton copyText="3.14" variant="action" />
+        <CopyButton copyText="3.14" variant="neutral" />
+        <CopyButton copyText="3.14" variant="action" text="Kopier" />
+        <CopyButton copyText="3.14" variant="neutral" text="Kopier" />
+      </div>
+      <div className="rowgap">
+        <CopyButton size="small" copyText="3.14" variant="action" />
+        <CopyButton size="small" copyText="3.14" variant="neutral" />
+        <CopyButton
+          size="small"
+          copyText="3.14"
+          variant="action"
+          text="Kopier"
+        />
+        <CopyButton
+          size="small"
+          copyText="3.14"
+          variant="neutral"
+          text="Kopier"
+        />
+      </div>
+    </div>
+  ),
+};
+
+export const Texts = {
+  render: () => (
+    <div className="colgap">
+      <div>
+        <CopyButton
+          copyText="3.14"
+          text="Kopier XYZ"
+          activeText="Kopierte XYZ"
+        />
+      </div>
+      <div>
+        <CopyButton
+          copyText="3.14"
+          size="small"
+          text="Kopier XYZ"
+          activeText="Kopierte XYZ"
+        />
+      </div>
+    </div>
+  ),
+};
+
+export const Icons = {
+  render: () => (
+    <div className="rowgap">
+      <div>
+        <CopyButton
+          copyText="3.14"
+          icon={<LinkIcon title="Kopier" />}
+          activeIcon={<ThumbUpIcon title="Kopiert" />}
+        />
+      </div>
+      <div>
+        <CopyButton
+          copyText="3.14"
+          size="small"
+          icon={<LinkIcon title="Kopier" />}
+          activeIcon={<ThumbUpIcon title="Kopiert" />}
+        />
+      </div>
+    </div>
+  ),
+};
+
+export const InlineDemo = {
+  render: () => (
+    <div style={{ display: "flex", gap: "0.5rem", alignItems: "center" }}>
+      <CopyButton size="small" copyText="3.14" /> Kopier dette feltet
+    </div>
+  ),
+};
+
+export const WithTooltip = {
+  render: () => {
+    return (
+      <div>
+        <Tooltip content="Kopier fødselsnummer">
+          <CopyButton copyText="3.14" />
+        </Tooltip>
+      </div>
+    );
+  },
+};
+
+export const Duration = {
+  render: () => <CopyButton copyText="3.14" activeDuration={300} />,
+};
+
+export const Disabled = {
+  render: () => (
+    <div className="colgap">
+      <CopyButton copyText="3.14" disabled />
+      <CopyButton copyText="3.14" size="small" disabled />
+      <CopyButton copyText="3.14" disabled variant="action" />
+    </div>
+  ),
+};

@navikt/core/react/src/copybutton/index.ts

@@ -0,0 +1 @@
+export { default as CopyButton, type CopyButtonProps } from "./CopyButton";

@navikt/core/react/src/date/DateInput.tsx

@@ -1,4 +1,4 @@
-import { Calender } from "@navikt/ds-icons";
+import { CalendarIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef, InputHTMLAttributes } from "react";
 import { BodyShort, Button, ErrorMessage, Label, omit } from "..";
@@ -124,7 +124,7 @@ const DateInput: DateInputType = forwardRef<HTMLInputElement, DateInputProps>(
             tabIndex={open ? -1 : 0}
             disabled={inputProps.disabled}
             icon={
-              <Calender
+              <CalendarIcon
                 title={
                   open
                     ? conditionalVariables.iconTitle.close

@navikt/core/react/src/date/datepicker/caption/Caption.tsx

@@ -1,4 +1,4 @@
-import { Left, Right } from "@navikt/ds-icons";
+import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
 import React from "react";
 import { CaptionProps, useDayPicker, useNavigation } from "react-day-picker";
 import { Button, Label } from "../../..";
@@ -32,13 +32,13 @@ export const DatePickerCaption = ({ displayMonth, id }: CaptionProps) => {
           variant="tertiary"
           disabled={!previousMonth}
           onClick={() => previousMonth && goToMonth(previousMonth)}
-          icon={<Left title="velg forrige måned" />}
+          icon={<ArrowLeftIcon title="velg forrige måned" />}
           className="navds-date__caption-button"
           type="button"
         />
         <Button
           aria-label={nextLabel}
-          icon={<Right title="velg neste måned" />}
+          icon={<ArrowRightIcon title="velg neste måned" />}
           onClick={() => nextMonth && goToMonth(nextMonth)}
           disabled={!nextMonth}
           variant="tertiary"

@navikt/core/react/src/date/datepicker/caption/DropdownCaption.tsx

@@ -1,4 +1,4 @@
-import { Left, Right } from "@navikt/ds-icons";
+import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
 import setMonth from "date-fns/setMonth";
 import setYear from "date-fns/setYear";
 import startOfMonth from "date-fns/startOfMonth";
@@ -58,7 +58,7 @@ export const DropdownCaption = ({ displayMonth, id }: CaptionProps) => {
         variant="tertiary"
         disabled={!previousMonth}
         onClick={() => previousMonth && goToMonth(previousMonth)}
-        icon={<Left title="velg forrige måned" />}
+        icon={<ArrowLeftIcon title="velg forrige måned" />}
         className="navds-date__caption-button"
         type="button"
       />
@@ -94,7 +94,7 @@ export const DropdownCaption = ({ displayMonth, id }: CaptionProps) => {
 
       <Button
         aria-label={nextLabel}
-        icon={<Right title="velg neste måned" />}
+        icon={<ArrowRightIcon title="velg neste måned" />}
         onClick={() => nextMonth && goToMonth(nextMonth)}
         disabled={!nextMonth}
         variant="tertiary"

@navikt/core/react/src/date/monthpicker/MonthCaption.tsx

@@ -1,4 +1,4 @@
-import { Left, Right } from "@navikt/ds-icons";
+import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
 import setYear from "date-fns/setYear";
 import startOfMonth from "date-fns/startOfMonth";
 import startOfYear from "date-fns/startOfYear";
@@ -61,7 +61,7 @@ export const MonthCaption = () => {
         disabled={hasPrevYear()}
         onClick={() => handleButtonClick(-1)}
         aria-label={labelPrevYear(locale?.code)}
-        icon={<Left aria-hidden />}
+        icon={<ArrowLeftIcon aria-hidden />}
         variant="tertiary"
         type="button"
       />
@@ -90,7 +90,7 @@ export const MonthCaption = () => {
         disabled={hasNextYear()}
         onClick={() => handleButtonClick(1)}
         aria-label={labelNextYear(locale?.code)}
-        icon={<Right aria-hidden />}
+        icon={<ArrowRightIcon aria-hidden />}
         variant="tertiary"
         type="button"
       />

@navikt/core/react/src/expansion-card/ExpansionCard.tsx

@@ -46,17 +46,20 @@ interface ExpansionCardCommonProps
    * @default "medium"
    */
   size?: "medium" | "small";
-  /**
-   * Since ExpansionCard is a section-element, accessible name is required.
-   */
 }
 
 type ExpansionCardConditionalProps =
   | {
-      ["aria-label"]: string;
+      /**
+       * Should be set if not using 'aria-labelledby'
+       */
+      "aria-label": string;
     }
   | {
-      ["aria-labelledby"]: string;
+      /**
+       * Should be set if not using 'aria-label'
+       */
+      "aria-labelledby": string;
     };
 
 export type ExpansionCardContextProps = {
@@ -113,7 +116,7 @@ export const ExpansionCard = forwardRef<HTMLDivElement, ExpansionCardProps>(
             `navds-expansioncard--${size}`,
             {
               "navds-expansioncard--open": open ?? _open,
-              "navds-expansioncard--no-fade": !shouldFade.current,
+              "navds-expansioncard--no-animation": !shouldFade.current,
             }
           )}
           ref={ref}

@navikt/core/react/src/expansion-card/ExpansionCardDescription.tsx

@@ -18,7 +18,7 @@ export const ExpansionCardDescription: ExpansionCardDescriptionType =
 
     if (panelContext === null) {
       console.error(
-        "<ExpansionCard.Header> has to be used within an <ExpansionCard>"
+        "<ExpansionCard.Description> has to be used within an <ExpansionCard>"
       );
       return null;
     }

@navikt/core/react/src/form/Fieldset/Fieldset.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { FieldsetHTMLAttributes, forwardRef, useContext } from "react";
-import { BodyLong, Detail, Label, ErrorMessage, omit } from "../..";
+import { BodyShort, ErrorMessage, Label, omit } from "../..";
 import { FormFieldProps } from "../useFormField";
 import { useFieldset } from "./useFieldset";
 
@@ -104,30 +104,18 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
           >
             {legend}
           </Label>
-          {!!description &&
-            (size === "medium" ? (
-              <BodyLong
-                className={cl("navds-fieldset__description", {
-                  "navds-sr-only": !!hideLegend,
-                })}
-                id={inputDescriptionId}
-                size="small"
-                as="div"
-              >
-                {props.description}
-              </BodyLong>
-            ) : (
-              <Detail
-                className={cl("navds-fieldset__description", {
-                  "navds-sr-only": !!hideLegend,
-                })}
-                id={inputDescriptionId}
-                size="small"
-                as="div"
-              >
-                {props.description}
-              </Detail>
-            ))}
+          {!!description && (
+            <BodyShort
+              className={cl("navds-fieldset__description", {
+                "navds-sr-only": !!hideLegend,
+              })}
+              id={inputDescriptionId}
+              size={size ?? "medium"}
+              as="div"
+            >
+              {props.description}
+            </BodyShort>
+          )}
           {children}
           <div
             id={errorId}

@navikt/core/react/src/form/Select.tsx

@@ -1,7 +1,8 @@
-import React, { forwardRef, SelectHTMLAttributes } from "react";
 import cl from "clsx";
-import { Expand } from "@navikt/ds-icons";
-import { BodyLong, Label, ErrorMessage, omit, Detail } from "..";
+import React, { forwardRef, SelectHTMLAttributes } from "react";
+
+import { ChevronDownIcon } from "@navikt/aksel-icons";
+import { BodyShort, ErrorMessage, Label, omit } from "..";
 import { FormFieldProps, useFormField } from "./useFormField";
 
 export interface SelectProps
@@ -73,31 +74,16 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
           {label}
         </Label>
         {!!description && (
-          <>
-            {size === "medium" ? (
-              <BodyLong
-                className={cl("navds-form-field__description", {
-                  "navds-sr-only": hideLabel,
-                })}
-                id={inputDescriptionId}
-                size="small"
-                as="div"
-              >
-                {description}
-              </BodyLong>
-            ) : (
-              <Detail
-                className={cl("navds-form-field__description", {
-                  "navds-sr-only": hideLabel,
-                })}
-                id={inputDescriptionId}
-                size="small"
-                as="div"
-              >
-                {description}
-              </Detail>
-            )}
-          </>
+          <BodyShort
+            className={cl("navds-form-field__description", {
+              "navds-sr-only": hideLabel,
+            })}
+            id={inputDescriptionId}
+            size={size}
+            as="div"
+          >
+            {description}
+          </BodyShort>
         )}
         <div className="navds-select__container" style={style}>
           <select
@@ -113,7 +99,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
           >
             {children}
           </select>
-          <Expand className="navds-select__chevron" aria-hidden />
+          <ChevronDownIcon className="navds-select__chevron" aria-hidden />
         </div>
         <div
           className="navds-form-field__error"

@navikt/core/react/src/form/Switch.tsx

@@ -5,14 +5,14 @@ import React, {
   useEffect,
   useState,
 } from "react";
-import { BodyShort, Detail, Loader, omit } from "..";
+import { BodyShort, Loader, omit } from "..";
 import { FormFieldProps, useFormField } from "./useFormField";
 
 const SelectedIcon = () => (
   <svg
-    width="12px"
-    height="12px"
-    viewBox="0 0 12 12"
+    width="12"
+    height="10"
+    viewBox="0 0 12 10"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     focusable={false}
@@ -23,9 +23,8 @@ const SelectedIcon = () => (
     <path
       fillRule="evenodd"
       clipRule="evenodd"
-      d="M4.01386 8L10.25 2L11 2.75L4.01386 9.5L1 6.5L1.75 5.75L4.01386 8Z"
+      d="M11.2674 0.647802C11.8762 1.20971 11.9141 2.1587 11.3522 2.76743L5.35221 9.26743C5.07531 9.56739 4.68813 9.74155 4.27998 9.74971C3.87184 9.75787 3.478 9.59933 3.18934 9.31067L0.68934 6.81067C0.103553 6.22488 0.103553 5.27513 0.68934 4.68935C1.27513 4.10356 2.22487 4.10356 2.81066 4.68935L4.20673 6.08541L9.14779 0.732587C9.7097 0.123856 10.6587 0.0858967 11.2674 0.647802Z"
       fill="currentColor"
-      stroke="currentColor"
     />
   </svg>
 );
@@ -72,8 +71,6 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
       ...rest
     } = props;
 
-    const Description = size === "medium" ? BodyShort : Detail;
-
     const [checked, setChecked] = useState(
       defaultChecked ?? checkedProp ?? false
     );
@@ -131,13 +128,13 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
               {children}
             </BodyShort>
             {description && (
-              <Description
+              <BodyShort
+                size={size}
                 as="div"
-                size="small"
-                className="navds-switch__description"
+                className="navds-form-field__subdescription navds-switch__description"
               >
                 {description}
-              </Description>
+              </BodyShort>
             )}
           </div>
         </label>

@navikt/core/react/src/form/TextField.tsx

@@ -1,6 +1,6 @@
-import React, { forwardRef, InputHTMLAttributes } from "react";
 import cl from "clsx";
-import { BodyLong, Detail, Label, ErrorMessage, omit } from "..";
+import React, { forwardRef, InputHTMLAttributes } from "react";
+import { BodyShort, ErrorMessage, Label, omit } from "..";
 import { FormFieldProps, useFormField } from "./useFormField";
 
 export interface TextFieldProps
@@ -78,31 +78,16 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
         </Label>
 
         {!!description && (
-          <>
-            {size === "medium" ? (
-              <BodyLong
-                className={cl("navds-form-field__description", {
-                  "navds-sr-only": hideLabel,
-                })}
-                id={inputDescriptionId}
-                size="small"
-                as="div"
-              >
-                {description}
-              </BodyLong>
-            ) : (
-              <Detail
-                className={cl("navds-form-field__description", {
-                  "navds-sr-only": hideLabel,
-                })}
-                id={inputDescriptionId}
-                size="small"
-                as="div"
-              >
-                {description}
-              </Detail>
-            )}
-          </>
+          <BodyShort
+            className={cl("navds-form-field__description", {
+              "navds-sr-only": hideLabel,
+            })}
+            id={inputDescriptionId}
+            size={size}
+            as="div"
+          >
+            {description}
+          </BodyShort>
         )}
         <input
           {...omit(rest, ["error", "errorId", "size"])}

@navikt/core/react/src/form/Textarea.tsx

@@ -1,9 +1,8 @@
-import React, { forwardRef, useState } from "react";
 import cl from "clsx";
-import { BodyShort, BodyLong, Label, ErrorMessage, omit, Detail } from "..";
-import { FormFieldProps, useFormField } from "./useFormField";
-import { useId } from "..";
+import React, { forwardRef, useState } from "react";
+import { BodyShort, ErrorMessage, Label, omit, useId } from "..";
 import TextareaAutosize from "../util/TextareaAutoSize";
+import { FormFieldProps, useFormField } from "./useFormField";
 
 /**
  * TODO: Mulighet for lokalisering av sr-only/counter text
@@ -120,31 +119,16 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           {label}
         </Label>
         {!!description && (
-          <>
-            {size === "medium" ? (
-              <BodyLong
-                className={cl("navds-form-field__description", {
-                  "navds-sr-only": hideLabel,
-                })}
-                id={inputDescriptionId}
-                size="small"
-                as="div"
-              >
-                {description}
-              </BodyLong>
-            ) : (
-              <Detail
-                className={cl("navds-form-field__description", {
-                  "navds-sr-only": hideLabel,
-                })}
-                id={inputDescriptionId}
-                size="small"
-                as="div"
-              >
-                {description}
-              </Detail>
-            )}
-          </>
+          <BodyShort
+            className={cl("navds-form-field__description", {
+              "navds-sr-only": hideLabel,
+            })}
+            id={inputDescriptionId}
+            size={size}
+            as="div"
+          >
+            {description}
+          </BodyShort>
         )}
         <div className="navds-textarea__wrapper">
           <TextareaAutosize

@navikt/core/react/src/form/checkbox/Checkbox.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef, InputHTMLAttributes } from "react";
-import { BodyLong, BodyShort, Detail } from "../../typography";
+import { BodyShort } from "../../typography";
 import { omit } from "../../util";
 import { FormFieldProps } from "../useFormField";
 import useCheckbox from "./useCheckbox";
@@ -44,8 +44,6 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
   (props, ref) => {
     const { inputProps, hasError, size } = useCheckbox(props);
 
-    const Description = size === "medium" ? BodyLong : Detail;
-
     return (
       <div
         className={cl(
@@ -94,9 +92,13 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
               {props.children}
             </BodyShort>
             {props.description && (
-              <Description as="span" className="navds-checkbox__description">
+              <BodyShort
+                as="span"
+                size={size}
+                className="navds-form-field__subdescription navds-checkbox__description"
+              >
                 {props.description}
-              </Description>
+              </BodyShort>
             )}
           </span>
         </label>

@navikt/core/react/src/form/radio/Radio.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef, InputHTMLAttributes } from "react";
-import { BodyLong, BodyShort, Detail } from "../../typography";
+import { BodyShort } from "../../typography";
 import { omit } from "../../util";
 import { FormFieldProps } from "../useFormField";
 import { useRadio } from "./useRadio";
@@ -25,8 +25,6 @@ export interface RadioProps
 export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
   const { inputProps, size, hasError } = useRadio(props);
 
-  const Description = size === "medium" ? BodyLong : Detail;
-
   return (
     <div
       className={cl(props.className, "navds-radio", `navds-radio--${size}`, {
@@ -46,9 +44,13 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
             {props.children}
           </BodyShort>
           {props.description && (
-            <Description as="span" className="navds-radio__description">
+            <BodyShort
+              as="span"
+              size={size}
+              className="navds-form-field__subdescription navds-radio__description"
+            >
               {props.description}
-            </Description>
+            </BodyShort>
           )}
         </span>
       </label>