Version Packages (#2001 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
🐛 Fikset htmlSize-prop for <Search /> (#2000 )
2026-10-13 01:02:02 +00:00 · 2023-05-24 15:32:35 +02:00 · 2023-05-24 14:36:34 +02:00 · 2023-05-23 12:39:10 +02:00 · 2023-05-22 16:43:10 +02:00 · 2023-05-22 16:36:33 +02:00
182 changed files with 4285 additions and 973 deletions
@@ -23,7 +23,7 @@ module.exports = {
  addons: [
    "@storybook/addon-a11y",
    "@whitespace/storybook-addon-html",
-
+    "@storybook/addon-interactions",
    {
      name: "@storybook/addon-storysource",
      options: {
@@ -1,5 +1,34 @@
 # @navikt/aksel-icons

+## 3.2.4
+
+## 3.2.3
+
+### Patch Changes
+
+- [#1998](https://github.com/navikt/aksel/pull/1998) [`53c98181c`](https://github.com/navikt/aksel/commit/53c98181c327ead3406bec3487c10232af7d463a) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: Nye ikoner!
+
+  - :sparkles: FileParagraph
+  - :sparkles: FilePlus
+
+## 3.2.2
+
+## 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
@@ -15,5 +15,5 @@ keywords:
  - skråning
  - helning
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 22.05.2023
 created_at: 07.03.2023
@@ -11,5 +11,5 @@ keywords:
  - handel
  - økonomi
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 16.05.2023
 created_at: 07.03.2023
@@ -7,5 +7,5 @@ keywords:
  - lukket
  - hidden
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 05.05.2023
 created_at: 07.03.2023
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.75 4.75V19.25H17.25V8.75H14.5C13.8096 8.75 13.25 8.19036 13.25 7.5V4.75H6.75ZM14.75 5.81066L16.1893 7.25H14.75V5.81066ZM5.25 4.5C5.25 3.80964 5.80964 3.25 6.5 3.25H14C14.1989 3.25 14.3897 3.32902 14.5303 3.46967L18.5303 7.46967C18.671 7.61032 18.75 7.80109 18.75 8V19.5C18.75 20.1904 18.1904 20.75 17.5 20.75H6.5C5.80964 20.75 5.25 20.1904 5.25 19.5V4.5ZM9.96599 11.0256C9.96599 9.906 10.8749 9 11.9927 9C12.5664 9 13.0857 9.23917 13.4539 9.62112C13.7414 9.91932 13.7327 10.3941 13.4345 10.6816C13.1363 10.9691 12.6615 10.9604 12.3741 10.6622C12.2767 10.5613 12.1424 10.5 11.9927 10.5C11.7016 10.5 11.466 10.7362 11.466 11.0256C11.466 11.2386 11.5945 11.4305 11.7915 11.5116L13.7023 12.2984C14.5828 12.661 15.039 13.6373 14.7523 14.5454C14.6107 14.9939 14.3133 15.3485 13.9395 15.57C13.9933 15.7527 14.0218 15.9449 14.0218 16.1418C14.0218 17.2614 13.1128 18.1674 11.995 18.1674C11.0546 18.1674 10.264 17.5278 10.0337 16.6602C9.92739 16.2599 10.1658 15.8492 10.5661 15.7429C10.9665 15.6366 11.3772 15.875 11.4835 16.2753C11.5434 16.5012 11.7509 16.6674 11.995 16.6674C12.2862 16.6674 12.5218 16.4312 12.5218 16.1418C12.5218 15.9288 12.3932 15.7369 12.1963 15.6558L10.2855 14.869C9.40497 14.5065 8.9487 13.5301 9.23544 12.6221C9.37709 12.1735 9.67447 11.8189 10.0483 11.5974C9.99448 11.4147 9.96599 11.2225 9.96599 11.0256ZM10.8566 13.482L12.6473 14.2194C12.6562 14.2222 12.6651 14.2252 12.6739 14.2284L12.8915 14.3067C13.0695 14.3708 13.265 14.274 13.3219 14.0937C13.374 13.9287 13.2911 13.7513 13.1311 13.6854L11.3404 12.9481C11.3315 12.9452 11.3227 12.9422 11.3138 12.939L11.0962 12.8607C10.9183 12.7966 10.7228 12.8934 10.6658 13.0738C10.6137 13.2387 10.6966 13.4161 10.8566 13.482Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,17 @@
+name: FileParagraph
+category: Files and application
+sub_category: Files
+keywords:
+  - document
+  - dokument
+  - fil
+  - file
+  - error
+  - feil
+  - feilmelding
+  - corrupt
+  - bad file
+  - korrupt fil
+variant: Stroke
+updated_at: 22.05.2023
+created_at: 22.05.2023
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.25 7.5V3.5C13.25 3.36193 13.1381 3.25 13 3.25H6.5C5.80964 3.25 5.25 3.80964 5.25 4.5V19.5C5.25 20.1904 5.80964 20.75 6.5 20.75H17.5C18.1904 20.75 18.75 20.1904 18.75 19.5V9C18.75 8.86193 18.6381 8.75 18.5 8.75H14.5C13.8096 8.75 13.25 8.19036 13.25 7.5ZM15 7.25C14.8619 7.25 14.75 7.13807 14.75 7V4.29289C14.75 4.07017 15.0193 3.95863 15.1768 4.11612L17.8839 6.82322C18.0414 6.98071 17.9298 7.25 17.7071 7.25H15ZM9.96599 11.0256C9.96599 9.906 10.8749 9 11.9927 9C12.5664 9 13.0857 9.23917 13.4539 9.62112C13.7414 9.91932 13.7327 10.3941 13.4345 10.6816C13.1363 10.9691 12.6615 10.9604 12.3741 10.6622C12.2767 10.5613 12.1424 10.5 11.9927 10.5C11.7016 10.5 11.466 10.7362 11.466 11.0256C11.466 11.2386 11.5945 11.4305 11.7915 11.5116L13.7023 12.2984C14.5828 12.661 15.039 13.6373 14.7523 14.5454C14.6318 14.927 14.3985 15.2407 14.1012 15.4622C14.0095 15.5306 13.9637 15.6466 13.9853 15.7589C14.0093 15.8836 14.0218 16.0117 14.0218 16.1418C14.0218 17.2614 13.1128 18.1674 11.995 18.1674C11.0546 18.1674 10.264 17.5278 10.0337 16.6602C9.92739 16.2599 10.1658 15.8492 10.5661 15.7429C10.9665 15.6366 11.3772 15.875 11.4835 16.2753C11.5434 16.5012 11.7509 16.6674 11.995 16.6674C12.2862 16.6674 12.5218 16.4312 12.5218 16.1418C12.5218 15.9288 12.3932 15.7369 12.1963 15.6558L10.2855 14.869C9.40497 14.5065 8.9487 13.5301 9.23544 12.6221C9.35598 12.2404 9.58928 11.9267 9.8865 11.7052C9.97822 11.6368 10.024 11.5208 10.0024 11.4085C9.97844 11.2838 9.96599 11.1557 9.96599 11.0256ZM10.8566 13.482L12.6473 14.2194C12.6562 14.2222 12.6651 14.2252 12.6739 14.2284L12.8915 14.3067C13.0695 14.3708 13.265 14.274 13.3219 14.0937C13.374 13.9287 13.2911 13.7513 13.1311 13.6854L11.3404 12.9481C11.3315 12.9452 11.3227 12.9422 11.3138 12.939L11.0962 12.8607C10.9183 12.7966 10.7228 12.8934 10.6658 13.0738C10.6137 13.2387 10.6966 13.4161 10.8566 13.482Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,17 @@
+name: FileParagraphFill
+category: Files and application
+sub_category: Files
+keywords:
+  - document
+  - dokument
+  - fil
+  - file
+  - error
+  - feil
+  - feilmelding
+  - corrupt
+  - bad file
+  - korrupt fil
+variant: Fill
+updated_at: 22.05.2023
+created_at: 22.05.2023
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.75 19.25V4.75H13.25V7.5C13.25 8.19036 13.8096 8.75 14.5 8.75H17.25V19.25H6.75ZM16.1893 7.25L14.75 5.81066V7.25H16.1893ZM6.5 3.25C5.80964 3.25 5.25 3.80964 5.25 4.5V19.5C5.25 20.1904 5.80964 20.75 6.5 20.75H17.5C18.1904 20.75 18.75 20.1904 18.75 19.5V8C18.75 7.80109 18.671 7.61032 18.5303 7.46967L14.5303 3.46967C14.3897 3.32902 14.1989 3.25 14 3.25H6.5ZM9.12868 14C9.12868 13.5858 9.46447 13.25 9.87868 13.25H11.25V11.8787C11.25 11.4645 11.5858 11.1287 12 11.1287C12.4142 11.1287 12.75 11.4645 12.75 11.8787V13.25H14.1213C14.5355 13.25 14.8713 13.5858 14.8713 14C14.8713 14.4142 14.5355 14.75 14.1213 14.75H12.75V16.1213C12.75 16.5355 12.4142 16.8713 12 16.8713C11.5858 16.8713 11.25 16.5355 11.25 16.1213V14.75H9.87868C9.46447 14.75 9.12868 14.4142 9.12868 14Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,17 @@
+name: FilePlus
+category: Files and application
+sub_category: Files
+keywords:
+  - document
+  - dokument
+  - fil
+  - file
+  - error
+  - feil
+  - feilmelding
+  - corrupt
+  - bad file
+  - korrupt fil
+variant: Stroke
+updated_at: 22.05.2023
+created_at: 22.05.2023
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.25 7.5V3.5C13.25 3.36193 13.1381 3.25 13 3.25H6.5C5.80964 3.25 5.25 3.80964 5.25 4.5V19.5C5.25 20.1904 5.80964 20.75 6.5 20.75H17.5C18.1904 20.75 18.75 20.1904 18.75 19.5V9C18.75 8.86193 18.6381 8.75 18.5 8.75H14.5C13.8096 8.75 13.25 8.19036 13.25 7.5ZM15 7.25C14.8619 7.25 14.75 7.13807 14.75 7V4.29289C14.75 4.07017 15.0193 3.95863 15.1768 4.11612L17.8839 6.82322C18.0414 6.98071 17.9298 7.25 17.7071 7.25H15ZM12.0001 11.1287C12.4143 11.1287 12.7501 11.4645 12.7501 11.8787V13C12.7501 13.1381 12.862 13.25 13.0001 13.25H14.1214C14.5356 13.25 14.8714 13.5858 14.8714 14C14.8714 14.4142 14.5356 14.75 14.1214 14.75H13.0001C12.862 14.75 12.7501 14.8619 12.7501 15V16.1213C12.7501 16.5355 12.4143 16.8713 12.0001 16.8713C11.5858 16.8713 11.2501 16.5355 11.2501 16.1213V15C11.2501 14.8619 11.1381 14.75 11.0001 14.75H9.87874C9.46453 14.75 9.12874 14.4142 9.12874 14C9.12874 13.5858 9.46453 13.25 9.87874 13.25H11.0001C11.1381 13.25 11.2501 13.1381 11.2501 13V11.8787C11.2501 11.4645 11.5858 11.1287 12.0001 11.1287Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,17 @@
+name: FilePlusFill
+category: Files and application
+sub_category: Files
+keywords:
+  - document
+  - dokument
+  - fil
+  - file
+  - error
+  - feil
+  - feilmelding
+  - corrupt
+  - bad file
+  - korrupt fil
+variant: Fill
+updated_at: 22.05.2023
+created_at: 22.05.2023
@@ -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="M4 3.25C3.58579 3.25 3.25 3.58579 3.25 4V20C3.25 20.4142 3.58579 20.75 4 20.75H20C20.4142 20.75 20.75 20.4142 20.75 20V4C20.75 3.58579 20.4142 3.25 20 3.25H4ZM4.75 19.25V4.75H19.25V19.25H4.75ZM12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9C12.5523 9 13 8.55228 13 8C13 7.44772 12.5523 7 12 7ZM10.5 10.25C10.0858 10.25 9.75 10.5858 9.75 11C9.75 11.4142 10.0858 11.75 10.5 11.75H11.25V15.75H10.5C10.0858 15.75 9.75 16.0858 9.75 16.5C9.75 16.9142 10.0858 17.25 10.5 17.25H12H13.5C13.9142 17.25 14.25 16.9142 14.25 16.5C14.25 16.0858 13.9142 15.75 13.5 15.75H12.75V11C12.75 10.5858 12.4142 10.25 12 10.25H10.5Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 3.25C3.58579 3.25 3.25 3.58579 3.25 4V20C3.25 20.4142 3.58579 20.75 4 20.75H20C20.4142 20.75 20.75 20.4142 20.75 20V4C20.75 3.58579 20.4142 3.25 20 3.25H4ZM4.75 19.25V4.75H19.25V19.25H4.75ZM12 6.75C11.4477 6.75 11 7.19772 11 7.75C11 8.30228 11.4477 8.75 12 8.75C12.5523 8.75 13 8.30228 13 7.75C13 7.19772 12.5523 6.75 12 6.75ZM10.5 10C10.0858 10 9.75 10.3358 9.75 10.75C9.75 11.1642 10.0858 11.5 10.5 11.5H11.25V15.5H10.5C10.0858 15.5 9.75 15.8358 9.75 16.25C9.75 16.6642 10.0858 17 10.5 17H12H13.5C13.9142 17 14.25 16.6642 14.25 16.25C14.25 15.8358 13.9142 15.5 13.5 15.5H12.75V10.75C12.75 10.3358 12.4142 10 12 10H10.5Z" fill="#262626"/>
 </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="M3.25 4C3.25 3.58579 3.58579 3.25 4 3.25H20C20.4142 3.25 20.75 3.58579 20.75 4V20C20.75 20.4142 20.4142 20.75 20 20.75H4C3.58579 20.75 3.25 20.4142 3.25 20V4ZM11 8C11 7.44772 11.4477 7 12 7C12.5523 7 13 7.44772 13 8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8ZM9.75 11C9.75 10.5858 10.0858 10.25 10.5 10.25H12C12.4142 10.25 12.75 10.5858 12.75 11V15.75H13.5C13.9142 15.75 14.25 16.0858 14.25 16.5C14.25 16.9142 13.9142 17.25 13.5 17.25H12H10.5C10.0858 17.25 9.75 16.9142 9.75 16.5C9.75 16.0858 10.0858 15.75 10.5 15.75H11.25V11.75H10.5C10.0858 11.75 9.75 11.4142 9.75 11Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.25 4C3.25 3.58579 3.58579 3.25 4 3.25H20C20.4142 3.25 20.75 3.58579 20.75 4V20C20.75 20.4142 20.4142 20.75 20 20.75H4C3.58579 20.75 3.25 20.4142 3.25 20V4ZM11 7.75C11 7.19772 11.4477 6.75 12 6.75C12.5523 6.75 13 7.19772 13 7.75C13 8.30228 12.5523 8.75 12 8.75C11.4477 8.75 11 8.30228 11 7.75ZM9.75 10.75C9.75 10.3358 10.0858 10 10.5 10H12C12.4142 10 12.75 10.3358 12.75 10.75V15.5H13.5C13.9142 15.5 14.25 15.8358 14.25 16.25C14.25 16.6642 13.9142 17 13.5 17H12H10.5C10.0858 17 9.75 16.6642 9.75 16.25C9.75 15.8358 10.0858 15.5 10.5 15.5H11.25V11.5H10.5C10.0858 11.5 9.75 11.1642 9.75 10.75Z" fill="#262626"/>
 </svg>
@@ -5,5 +5,5 @@ keywords:
  - "%"
  - prosent
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 05.05.2023
 created_at: 07.03.2023
@@ -15,5 +15,5 @@ keywords:
  - strand
  - natur
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 08.05.2023
 created_at: 07.03.2023
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-icons",
-  "version": "2.9.8",
+  "version": "3.2.4",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -1,5 +1,82 @@
 # @navikt/aksel

+## 3.2.4
+
+### Patch Changes
+
+- Updated dependencies [[`30eee0dac`](https://github.com/navikt/aksel/commit/30eee0dac4e3e5a1379033283a6885e646e80458)]:
+  - @navikt/ds-css@3.2.4
+
+## 3.2.3
+
+### Patch Changes
+
+- Updated dependencies [[`475e994f4`](https://github.com/navikt/aksel/commit/475e994f494b2080ffc05eb1684b6a244e3e2969), [`444e905e0`](https://github.com/navikt/aksel/commit/444e905e01965fd5cac40ff20c5225b072e67221)]:
+  - @navikt/ds-css@3.2.3
+
+## 3.2.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@3.2.2
+
+## 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
@@ -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)
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel",
-  "version": "2.9.8",
+  "version": "3.2.4",
  "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.8",
+    "@navikt/ds-css": "3.2.4",
    "axios": "1.3.6",
    "chalk": "4.1.0",
    "clipboardy": "^2.3.0",
@@ -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],
@@ -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));
  }
@@ -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);
+}
@@ -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>;
+};
@@ -0,0 +1,6 @@
+import { CopyButton } from "@navikt/ds-react";
+
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return <CopyButton />;
+};
@@ -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>
+  );
+};
@@ -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>
+  );
+};
@@ -0,0 +1,6 @@
+import { CopyToClipboard } from "@navikt/ds-react-internal";
+
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return <CopyToClipboard></CopyToClipboard>;
+};
@@ -0,0 +1,6 @@
+import { CopyButton } from "@navikt/ds-react";
+
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return <CopyButton />;
+};
@@ -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>
+  );
+};
@@ -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" />;
+};
@@ -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",
+  });
+}
@@ -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} />;
+};
@@ -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} />;
+};
@@ -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>;
+};
@@ -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 />;
+};
@@ -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;
+}
@@ -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);
+      }
+    }
+  });
+}
@@ -1,5 +1,27 @@
 # @navikt/ds-codemod

+## 3.2.4
+
+## 3.2.3
+
+## 3.2.2
+
+## 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
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-codemod",
-  "version": "2.9.8",
+  "version": "3.2.4",
  "description": "Aksel codemods for NAVs designsystem",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -40,8 +40,8 @@
    "build-pict": "svgr --silent --index-template index-template.js --out-dir src/pictograms pictograms"
  },
  "dependencies": {
-    "@navikt/ds-icons": "^2.9.8",
-    "@navikt/ds-react": "^2.9.8",
+    "@navikt/ds-icons": "^3.2.4",
+    "@navikt/ds-react": "^3.2.4",
    "clsx": "^1.1.1"
  },
  "devDependencies": {
@@ -1,5 +1,88 @@
 # @navikt/ds-css

+## 3.2.4
+
+### Patch Changes
+
+- [#2000](https://github.com/navikt/aksel/pull/2000) [`30eee0dac`](https://github.com/navikt/aksel/commit/30eee0dac4e3e5a1379033283a6885e646e80458) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Search støtter nå htmlSize-prop
+
+## 3.2.3
+
+### Patch Changes
+
+- [#1993](https://github.com/navikt/aksel/pull/1993) [`475e994f4`](https://github.com/navikt/aksel/commit/475e994f494b2080ffc05eb1684b6a244e3e2969) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Fikset small-variant av datepicker-input
+
+  - :recycle: Refactored Datepicker.Input-button for bugfix
+
+- [#1994](https://github.com/navikt/aksel/pull/1994) [`444e905e0`](https://github.com/navikt/aksel/commit/444e905e01965fd5cac40ff20c5225b072e67221) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: CopyButton har nå en `xsmall`-variant
+
+  - Kan nå lettere brukes i tabeller
+
+## 3.2.2
+
+## 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,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);
+  }
 }
@@ -28,7 +28,6 @@
 }

 .navds-alert--small > .navds-alert__icon {
-  font-size: 1.25rem;
  height: var(--a-font-line-height-large);
 }

@@ -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));
@@ -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;
@@ -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 {
@@ -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] },
@@ -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" });
@@ -0,0 +1,151 @@
+[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--xsmall {
+  --__ac-copybutton-padding: var(--a-spacing-05) var(--a-spacing-2);
+
+  min-height: 1.5rem;
+}
+
+.navds-copybutton--icon-only {
+  --__ac-copybutton-padding: var(--a-spacing-3);
+}
+
+.navds-copybutton--small.navds-copybutton--icon-only {
+  --__ac-copybutton-padding: var(--a-spacing-1);
+}
+
+.navds-copybutton--xsmall.navds-copybutton--icon-only {
+  --__ac-copybutton-padding: var(--a-spacing-05);
+}
+
+.navds-copybutton--xsmall .navds-copybutton__icon {
+  font-size: 1.25rem;
+}
+
+.navds-copybutton__icon {
+  font-size: 1.5rem;
+  display: flex;
+  margin-left: -4px;
+}
+
+.navds-copybutton__icon:only-child {
+  margin: 0;
+}
+
+:where(.navds-copybutton--small, .navds-copybutton--xsmall):where(:not(:only-child)) {
+  margin: -2px;
+}
+
+.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--xsmall > .navds-copybutton__content {
+  gap: var(--a-spacing-1);
+}
+
+.navds-copybutton--active > .navds-copybutton__content {
+  animation: var(--ac-copybutton-animation, akselCopyButtonAnimation 0.4s linear);
+}
+
+@keyframes akselCopyButtonAnimation {
+  0% {
+    opacity: 0.4;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+/* Disabled */
+.navds-copybutton:where(:disabled) {
+  cursor: not-allowed;
+  opacity: 0.3;
+}
@@ -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,16 +192,17 @@
 }

 .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));
 }

 .navds-date__field-input {
-  padding-right: var(--a-spacing-12);
+  padding-right: var(--a-spacing-14);
 }

 .navds-form-field--small .navds-date__field-input {
-  padding-right: var(--a-spacing-8);
+  padding-right: var(--a-spacing-10);
 }

 /* Error-handling */
@@ -182,30 +211,63 @@
  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);
+  right: 1px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ac-date-input-button-text, var(--a-text-default));
+  display: inline-flex;
+  cursor: pointer;
+  margin: 0;
+  text-decoration: none;
+  border: none;
+  background: none;
+  border-radius: 3px;
+  padding: var(--a-spacing-3);
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+  height: calc(100% - 2px);
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
 }

 .navds-form-field--small .navds-date__field-button {
-  right: var(--a-spacing-2);
-  height: 1.5rem;
-  width: 1.5rem;
+  padding: var(--a-spacing-1);
 }

-.navds-form-field--small .navds-date__field-button svg {
-  font-size: var(--a-font-size-medium);
+.navds-date__field-button:hover:where(:not([disabled])) {
+  color: var(--ac-date-input-button-hover-text, var(--a-text-action-on-action-subtle));
+  background-color: var(--ac-date-input-button-hover-bg, var(--a-surface-action-subtle-hover));
 }

 .navds-form-field--disabled .navds-date__field-button {
  opacity: 1;
+  cursor: not-allowed;
+}
+
+.navds-date__field-button:focus-visible {
+  outline: none;
+  box-shadow: var(--a-shadow-focus);
+  border-radius: var(--a-border-radius-medium);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-date__field-button:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
 }

 .navds-date__caption__year {
@@ -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);
  }

@@ -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;
@@ -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 */
@@ -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));
+}
@@ -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;
@@ -17,6 +17,10 @@
  width: 100%;
 }

+.navds-search--with-size :where(.navds-search__wrapper-inner) {
+  width: inherit;
+}
+
 .navds-search__wrapper {
  display: inline-flex;
  align-items: center;
@@ -72,7 +76,7 @@
  cursor: pointer;
  background: none;
  border: none;
-  font-size: 1rem;
+  font-size: 1.25rem;
  padding: 0;
 }

@@ -86,11 +90,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 +137,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;
+  }
+}
@@ -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
 */
@@ -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;
@@ -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));
@@ -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));
@@ -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;
+  }
+}
@@ -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";
@@ -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;
@@ -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));
@@ -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);
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "2.9.8",
+  "version": "3.2.4",
  "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.8",
+    "@navikt/ds-tokens": "^3.2.4",
    "cssnano": "6.0.0",
    "fast-glob": "3.2.11",
    "lodash": "4.17.21",
@@ -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;
@@ -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;
@@ -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);
 }
@@ -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));
+}
@@ -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;
 }
@@ -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);
+  }
+}
@@ -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;
 }

@@ -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",
@@ -121,7 +131,9 @@
    "--ac-date-today-border": "--a-border-action-selected",
    "--ac-date-caption-text": "--a-text-default",
    "--ac-date-input-error-border": "--a-border-danger",
-    "--ac-date-input-button-text": "--a-text-default"
+    "--ac-date-input-button-text": "--a-text-default",
+    "--ac-date-input-button-hover-text": "--a-text-action-on-action-subtle",
+    "--ac-date-input-button-hover-bg": "--a-surface-action-subtle-hover"
  },
  "expansioncard": {
    "--ac-expansioncard-bg": "--a-surface-default",
@@ -204,8 +216,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 +239,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 +293,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": {
@@ -1,5 +1,137 @@
 # @navikt/ds-react

+## 3.2.4
+
+### Patch Changes
+
+- [#2000](https://github.com/navikt/aksel/pull/2000) [`30eee0dac`](https://github.com/navikt/aksel/commit/30eee0dac4e3e5a1379033283a6885e646e80458) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Search støtter nå htmlSize-prop
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@3.2.4
+
+## 3.2.3
+
+### Patch Changes
+
+- [#1993](https://github.com/navikt/aksel/pull/1993) [`475e994f4`](https://github.com/navikt/aksel/commit/475e994f494b2080ffc05eb1684b6a244e3e2969) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Fikset small-variant av datepicker-input
+
+  - :recycle: Refactored Datepicker.Input-button for bugfix
+
+- [#1994](https://github.com/navikt/aksel/pull/1994) [`444e905e0`](https://github.com/navikt/aksel/commit/444e905e01965fd5cac40ff20c5225b072e67221) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: CopyButton har nå en `xsmall`-variant
+
+  - Kan nå lettere brukes i tabeller
+
+- Updated dependencies [[`53c98181c`](https://github.com/navikt/aksel/commit/53c98181c327ead3406bec3487c10232af7d463a)]:
+  - @navikt/aksel-icons@3.2.3
+
+## 3.2.2
+
+### Patch Changes
+
+- [`6d6267fe0`](https://github.com/navikt/aksel/commit/6d6267fe01f438f3bd67e1b4266ca3e82709561c) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :fire: Fjernet use-client directive fra copybutton
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@3.2.2
+
+## 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
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "2.9.8",
+  "version": "3.2.4",
  "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.8",
-    "@navikt/ds-icons": "^2.9.8",
+    "@navikt/aksel-icons": "^3.2.4",
    "@radix-ui/react-tabs": "1.0.0",
    "@radix-ui/react-toggle-group": "1.0.0",
    "clsx": "^1.2.1",
@@ -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;
@@ -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>
    );
  }
 );
@@ -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: [],
+});
@@ -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>
    );
  }
@@ -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}
@@ -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",
+  },
+};
@@ -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;
  }
@@ -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]}
@@ -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>
    );
@@ -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>
@@ -0,0 +1,174 @@
+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"
+   * xsmall should only be used in tables/
+   */
+  size?: "medium" | "small" | "xsmall";
+  /**
+   * @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;
@@ -0,0 +1,200 @@
+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", "xsmall"],
+    },
+    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 className="rowgap">
+        <CopyButton size="xsmall" copyText="3.14" variant="action" />
+        <CopyButton size="xsmall" copyText="3.14" variant="neutral" />
+        <CopyButton
+          size="xsmall"
+          copyText="3.14"
+          variant="action"
+          text="Kopier"
+        />
+        <CopyButton
+          size="xsmall"
+          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>
+        <CopyButton
+          copyText="3.14"
+          size="xsmall"
+          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>
+        <CopyButton
+          copyText="3.14"
+          size="xsmall"
+          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>
+  ),
+};
@@ -0,0 +1 @@
+export { default as CopyButton, type CopyButtonProps } from "./CopyButton";
@@ -1,7 +1,7 @@
-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 "..";
+import { BodyShort, ErrorMessage, Label, omit } from "..";
 import { FormFieldProps, useFormField } from "../form/useFormField";
 import { useDateInputContext } from "./context";

@@ -115,24 +115,22 @@ const DateInput: DateInputType = forwardRef<HTMLInputElement, DateInputProps>(
            )}
            size={14}
          />
-          <Button
-            variant="tertiary"
-            type="button"
-            size="small"
-            onClick={() => onOpen()}
-            className="navds-date__field-button"
-            tabIndex={open ? -1 : 0}
+          <button
            disabled={inputProps.disabled}
-            icon={
-              <Calender
-                title={
-                  open
-                    ? conditionalVariables.iconTitle.close
-                    : conditionalVariables.iconTitle.open
-                }
-              />
-            }
-          />
+            tabIndex={open ? -1 : 0}
+            onClick={() => onOpen()}
+            type="button"
+            className="navds-date__field-button"
+          >
+            <CalendarIcon
+              pointerEvents="none"
+              title={
+                open
+                  ? conditionalVariables.iconTitle.close
+                  : conditionalVariables.iconTitle.open
+              }
+            />
+          </button>
        </div>
        <div
          className="navds-form-field__error"
@@ -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"
@@ -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"
@@ -324,3 +324,22 @@ export const defaultShownMonth = () => {
    </div>
  );
 };
+
+export const Size = () => {
+  const { datepickerProps, inputProps } = UNSAFE_useDatepicker({
+    fromDate: new Date("Aug 23 2019"),
+    toDate: new Date("Feb 23 2024"),
+    onDateChange: console.log,
+  });
+
+  return (
+    <div style={{ display: "flex", gap: "1rem" }}>
+      <DatePicker {...datepickerProps} dropdownCaption>
+        <DatePicker.Input size="medium" {...inputProps} label="Velg dato" />
+      </DatePicker>
+      <DatePicker {...datepickerProps} dropdownCaption>
+        <DatePicker.Input size="small" {...inputProps} label="Velg dato" />
+      </DatePicker>
+    </div>
+  );
+};
@@ -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"
      />
@@ -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}
@@ -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;
    }
@@ -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}
@@ -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"
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot]	46af5defd9	Version Packages (#2001 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-05-24 15:32:35 +02:00
Ken	30eee0dac4	🐛 Fikset htmlSize-prop for `<Search />` (#2000 )	2023-05-24 14:36:34 +02:00
Ken	76b3a65572	Update README.md	2023-05-23 12:39:10 +02:00
github-actions[bot]andgithub-actions[bot]	cb7a78e20c	Version Packages (#1999 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-05-22 16:43:10 +02:00
Ken	475e994f49	🐛 DatepickerInput button refactor (#1993 )	2023-05-22 16:36:33 +02:00
Ken	53c98181c3	🎨 Oppdatert ikoner (#1998 )	2023-05-22 16:34:49 +02:00
Ken	444e905e01	🎨 xsmall variant for `CopyButton` (#1994 )	2023-05-22 16:29:25 +02:00
Ken	b7a97339f8	🚚 Flyttet Hva er aksel under 'Om nettstedet' i footer	2023-05-22 10:51:35 +02:00
Ken	1ac0f25420	⬆️ Oppdatert sanity (#1992 )	2023-05-22 09:09:11 +02:00
github-actions[bot]andgithub-actions[bot]	29ddcd59e7	Version Packages (#1990 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-05-19 09:47:18 +02:00
Ken	6d6267fe01	🔥 Fjernet use-client directive fra copybutton	2023-05-19 09:43:37 +02:00
Ken	ee38a55837	🐛 Fikset tekst i internal-header	2023-05-16 14:22:30 +02:00
Ken	b86ccc4f7f	🐛 Fikset aksel-eksempler	2023-05-16 13:24:02 +02:00
github-actions[bot]andgithub-actions[bot]	9a98f0eae4	Version Packages (#1988 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-05-16 13:13:56 +02:00
Ken	affcab14c3	✨ Copybutton-komponent (#1982 )	2023-05-16 12:56:16 +02:00
Ken	d51b0238d5	💄 Oppdatert ToggleGroup-bruk på ikonsider	2023-05-12 12:58:22 +02:00
github-actions[bot]andgithub-actions[bot]	c818a92355	Version Packages (#1977 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-05-11 15:57:52 +02:00
Ken	e8ecf309a9	💄 Oppdatert ToggleGroup (#1976 )	2023-05-11 15:55:30 +02:00
Ken	060d4f3c7c	📝 Bedre props-dokumentasjon for ExpansionCard	2023-05-11 12:35:10 +02:00
github-actions[bot]andgithub-actions[bot]	1871038837	Version Packages (#1974 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-05-10 22:19:00 +02:00
Ken	5e79234eff	🐛 Timeline pin var ikke riktig alignet	2023-05-10 16:03:09 +02:00
github-actions[bot]andgithub-actions[bot]	b8bebace11	Version Packages (#1971 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-05-10 14:10:55 +02:00
Ken	14379a02c3	🐛 Timeline håndterte ikke SVG-ikoner riktig	2023-05-10 13:56:20 +02:00
github-actions[bot]andgithub-actions[bot]	d716ebbc40	Version Packages (#1970 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-05-10 13:33:21 +02:00
Ken	f1c4c46ebb	💄 Focus-visible (#1966 )	2023-05-10 13:04:29 +02:00
Ken	9d2cd9e7ff	💄 Oppdatert label/description for skjemakomponenter (#1967 )	2023-05-10 12:54:29 +02:00
github-actions[bot]andgithub-actions[bot]	2fe5a0a0e2	Version Packages (#1968 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-05-10 10:22:48 +02:00
Ken	db3846f5cd	🐛 Fikset default headingSize for button	2023-05-10 10:16:19 +02:00
Ken	fa2ead912a	🔥 Fjernet ds-icons fra ds-react dependencies	2023-05-09 13:28:35 +02:00
Ken	11e9b9bef2	🐛 Fikset visning av kode under examples	2023-05-09 13:14:09 +02:00
github-actions[bot]andgithub-actions[bot]	6f53b33e69	Version Packages (#1965 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-05-09 13:05:15 +02:00
KenandJulian Nymark	166ee5feb3	✨ V3, Accordion og ikonoppdatering (#1964 ) Co-authored-by: Julian Nymark <j@juliannymark.com>	2023-05-09 12:06:35 +02:00
AndreasDybdahl	c29d2aba1b	Update ExpansionCardDescription.tsx (#1962 )	2023-05-06 18:47:18 +02:00
				`@@ -0,0 +1 @@`
				`export { default as CopyButton, type CopyButtonProps } from "./CopyButton";`