From 70c5affbd3bfb245e905043e7d3ae1c97eeef5e3 Mon Sep 17 00:00:00 2001
From: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
Date: Wed, 11 Oct 2023 15:36:29 +0200
Subject: [PATCH] :lipstick: CopyButton: Justert padding, gap og animasjon
 (#2355)

---
 .changeset/wild-coats-join.md                 |  6 ++
 @navikt/core/css/copybutton.css               | 44 ++++++++++++++-
 .../core/react/src/copybutton/CopyButton.tsx  | 55 +++++++++----------
 .../src/copybutton/copy-button.stories.tsx    | 46 ++++++++--------
 .../eksempler/copybutton/active-icon.tsx      | 11 ++--
 .../pages/eksempler/copybutton/icon.tsx       |  8 ++-
 .../pages/eksempler/copybutton/inline.tsx     | 10 ++--
 .../pages/eksempler/copybutton/small.tsx      |  6 +-
 .../pages/eksempler/copybutton/tooltip.tsx    |  3 +-
 .../copybutton/used-in-breadcrumbs.tsx        | 10 ++--
 .../eksempler/copybutton/used-in-info.tsx     | 38 ++++++-------
 yarn.lock                                     | 38 ++++++-------
 12 files changed, 162 insertions(+), 113 deletions(-)
 create mode 100644 .changeset/wild-coats-join.md

diff --git a/.changeset/wild-coats-join.md b/.changeset/wild-coats-join.md
new file mode 100644
index 0000000000..dc7ea7f615
--- /dev/null
+++ b/.changeset/wild-coats-join.md
@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": patch
+"@navikt/ds-css": patch
+---
+
+:lipstick: CopyButton: Justert padding, gap og animasjon
diff --git a/@navikt/core/css/copybutton.css b/@navikt/core/css/copybutton.css
index b0f65f0a48..9a88188fda 100644
--- a/@navikt/core/css/copybutton.css
+++ b/@navikt/core/css/copybutton.css
@@ -15,7 +15,7 @@
 }
 
 .navds-copybutton {
-  --__ac-copybutton-padding: var(--a-spacing-3) var(--a-spacing-5);
+  --__ac-copybutton-padding: var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-3) var(--a-spacing-4);
 
   cursor: pointer;
   margin: 0;
@@ -28,18 +28,30 @@
   place-content: center;
 }
 
+.navds-copybutton--icon-right {
+  --__ac-copybutton-padding: var(--a-spacing-3) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-5);
+}
+
 .navds-copybutton--small {
-  --__ac-copybutton-padding: var(--a-spacing-1) var(--a-spacing-3);
+  --__ac-copybutton-padding: var(--a-spacing-1) var(--a-spacing-3) var(--a-spacing-1) var(--a-spacing-2);
 
   min-height: 2rem;
 }
 
+.navds-copybutton--small.navds-copybutton--icon-right {
+  --__ac-copybutton-padding: var(--a-spacing-1) var(--a-spacing-2) var(--a-spacing-1) var(--a-spacing-3);
+}
+
 .navds-copybutton--xsmall {
-  --__ac-copybutton-padding: var(--a-spacing-05) var(--a-spacing-2);
+  --__ac-copybutton-padding: var(--a-spacing-05) var(--a-spacing-2) var(--a-spacing-05) var(--a-spacing-1);
 
   min-height: 1.5rem;
 }
 
+.navds-copybutton--xsmall.navds-copybutton--icon-right {
+  --__ac-copybutton-padding: var(--a-spacing-05) var(--a-spacing-1) var(--a-spacing-05) var(--a-spacing-2);
+}
+
 .navds-copybutton--icon-only {
   --__ac-copybutton-padding: var(--a-spacing-3);
 }
@@ -73,6 +85,28 @@
   margin: 0;
 }
 
+.navds-copybutton--active .navds-copybutton__icon {
+  animation: akselCopyButtonIconAnimation 2s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+@keyframes akselCopyButtonIconAnimation {
+  8% {
+    transform: translateY(0);
+  }
+
+  17% {
+    transform: translateY(-10%);
+  }
+
+  25% {
+    transform: translateY(2%);
+  }
+
+  30% {
+    transform: translateY(0);
+  }
+}
+
 :where(.navds-copybutton--small, .navds-copybutton--xsmall):where(:not(:only-child)) {
   margin: -0.125rem;
 }
@@ -140,6 +174,10 @@
   gap: var(--a-spacing-2);
 }
 
+.navds-copybutton--small > .navds-copybutton__content {
+  gap: 0.375rem;
+}
+
 .navds-copybutton--xsmall > .navds-copybutton__content {
   gap: var(--a-spacing-1);
 }
diff --git a/@navikt/core/react/src/copybutton/CopyButton.tsx b/@navikt/core/react/src/copybutton/CopyButton.tsx
index 5d887c6e97..ba994141b9 100644
--- a/@navikt/core/react/src/copybutton/CopyButton.tsx
+++ b/@navikt/core/react/src/copybutton/CopyButton.tsx
@@ -13,8 +13,8 @@ import Label from "../typography/Label";
 export interface CopyButtonProps
   extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
   /**
+   * 'xsmall' should only be used in tables
    * @default "medium"
-   * xsmall should only be used in tables/
    */
   size?: "medium" | "small" | "xsmall";
   /**
@@ -30,12 +30,12 @@ export interface CopyButtonProps
    */
   text?: string;
   /**
-   * Text shown when button is clicked
-   * Only set if used with 'text'-prop
+   * Text shown when button is clicked.
+   * Only set if used with `text`-prop.
    */
   activeText?: string;
   /**
-   *  Callback when 'copied'-state is active
+   * Callback when 'copied'-state is active
    */
   onActiveChange?: (state: boolean) => void;
   /**
@@ -54,17 +54,17 @@ export interface CopyButtonProps
    */
   activeDuration?: number;
   /**
-   * * accessible label for icon (ignored if text is set)
+   * 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)
+   * Accessible label for icon in active-state (ignored if text is set)
    * @default 'Kopiert'
    */
   activeTitle?: string;
   /**
-   * Icon position in Button
+   * Icon position in button
    * @default "left"
    */
   iconPosition?: "left" | "right";
@@ -125,24 +125,23 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
       }, activeDuration);
     };
 
-    const CopyIcon = () => {
-      return 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>
-      );
-    };
+    const copyIcon = (
+      <span className="navds-copybutton__icon">
+        {active
+          ? activeIcon ?? (
+              <CheckmarkIcon
+                aria-hidden={!!text}
+                title={text ? undefined : activeTitle}
+              />
+            )
+          : icon ?? (
+              <FilesIcon
+                aria-hidden={!!text}
+                title={text ? undefined : title}
+              />
+            )}
+      </span>
+    );
 
     return (
       <button
@@ -157,14 +156,14 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
           `navds-copybutton--${variant}`,
           {
             "navds-copybutton--icon-only": !text,
+            "navds-copybutton--icon-right": iconPosition === "right",
             "navds-copybutton--active": active,
           }
         )}
         onClick={handleClick}
       >
         <span className="navds-copybutton__content">
-          {iconPosition === "left" && <CopyIcon />}
-
+          {iconPosition === "left" && copyIcon}
           {text &&
             (active ? (
               <Label
@@ -183,7 +182,7 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
                 {text}
               </Label>
             ))}
-          {iconPosition === "right" && <CopyIcon />}
+          {iconPosition === "right" && copyIcon}
         </span>
       </button>
     );
diff --git a/@navikt/core/react/src/copybutton/copy-button.stories.tsx b/@navikt/core/react/src/copybutton/copy-button.stories.tsx
index 0326e9830e..6a85d486ff 100644
--- a/@navikt/core/react/src/copybutton/copy-button.stories.tsx
+++ b/@navikt/core/react/src/copybutton/copy-button.stories.tsx
@@ -1,38 +1,40 @@
-import { LinkIcon, ThumbUpIcon } from "@navikt/aksel-icons";
-import { userEvent, within } from "@storybook/testing-library";
 import React from "react";
-import { CopyButton } from ".";
+import { userEvent, within } from "@storybook/testing-library";
+import { Meta, StoryObj } from "@storybook/react";
+import { LinkIcon, ThumbUpIcon } from "@navikt/aksel-icons";
 import { Tooltip } from "../tooltip";
+import { CopyButton } from ".";
 
-export default {
+const meta: Meta<typeof CopyButton> = {
   title: "ds-react/CopyButton",
   component: CopyButton,
+};
+export default meta;
+
+type Story = StoryObj<typeof CopyButton>;
+
+export const Default: Story = {
+  render: (props) => <CopyButton {...props} />,
   argTypes: {
     size: {
-      defaultValue: "medium",
       control: { type: "radio" },
-      options: ["small", "medium", "xsmall"],
+      options: ["medium", "small", "xsmall"],
     },
     variant: {
-      defaultValue: undefined,
       control: { type: "radio" },
       options: ["neutral", "action"],
     },
   },
-};
-
-export const Default = {
-  render: (args) => <CopyButton {...args} />,
   args: {
     size: "medium",
-    duration: 2000,
+    activeDuration: 2000,
     copyText: "3.14",
     text: "",
     activeText: "",
   },
 };
 
-export const Interaction = {
+export const Interaction: Story = {
   render: () => (
     <CopyButton
       copyText="3.14"
@@ -50,7 +52,7 @@ export const Interaction = {
   },
 };
 
-export const Variants = {
+export const Variants: Story = {
   render: () => (
     <div className="colgap">
       <CopyButton copyText="3.14" variant="action" text="Kopier" />
@@ -60,7 +62,7 @@ export const Variants = {
   ),
 };
 
-export const IconPosition = {
+export const IconPosition: Story = {
   render: () => (
     <div className="colgap">
       <CopyButton copyText="3.14" iconPosition="left" text="Kopier" />
@@ -70,7 +72,7 @@ export const IconPosition = {
   ),
 };
 
-export const Sizes = {
+export const Sizes: Story = {
   render: () => (
     <div className="colgap">
       <div className="rowgap">
@@ -115,7 +117,7 @@ export const Sizes = {
   ),
 };
 
-export const Texts = {
+export const Texts: Story = {
   render: () => (
     <div className="colgap">
       <div>
@@ -145,7 +147,7 @@ export const Texts = {
   ),
 };
 
-export const Icons = {
+export const Icons: Story = {
   render: () => (
     <div className="rowgap">
       <div>
@@ -175,7 +177,7 @@ export const Icons = {
   ),
 };
 
-export const InlineDemo = {
+export const InlineDemo: Story = {
   render: () => (
     <div style={{ display: "flex", gap: "0.5rem", alignItems: "center" }}>
       <CopyButton size="small" copyText="3.14" /> Kopier dette feltet
@@ -183,7 +185,7 @@ export const InlineDemo = {
   ),
 };
 
-export const WithTooltip = {
+export const WithTooltip: Story = {
   render: () => {
     return (
       <div>
@@ -195,11 +197,11 @@ export const WithTooltip = {
   },
 };
 
-export const Duration = {
+export const Duration: Story = {
   render: () => <CopyButton copyText="3.14" activeDuration={300} />,
 };
 
-export const Disabled = {
+export const Disabled: Story = {
   render: () => (
     <div className="colgap">
       <CopyButton copyText="3.14" disabled />
diff --git a/aksel.nav.no/website/pages/eksempler/copybutton/active-icon.tsx b/aksel.nav.no/website/pages/eksempler/copybutton/active-icon.tsx
index 6420ab819b..0ffcc42306 100644
--- a/aksel.nav.no/website/pages/eksempler/copybutton/active-icon.tsx
+++ b/aksel.nav.no/website/pages/eksempler/copybutton/active-icon.tsx
@@ -1,13 +1,15 @@
-import { LinkBrokenIcon, LinkIcon } from "@navikt/aksel-icons";
+import { LinkIcon, ThumbUpIcon } from "@navikt/aksel-icons";
 import { CopyButton } from "@navikt/ds-react";
 import { withDsExample } from "components/website-modules/examples/withDsExample";
 
 const Example = () => {
   return (
     <CopyButton
-      copyText="3.14"
-      icon={<LinkIcon title="Kopier lenke" />}
-      activeIcon={<LinkBrokenIcon title="Kopierte lenke" />}
+      copyText="https://aksel.nav.no/"
+      text="Kopier lenke"
+      activeText="Lenken er kopiert"
+      icon={<LinkIcon aria-hidden />}
+      activeIcon={<ThumbUpIcon aria-hidden />}
     />
   );
 };
@@ -21,4 +23,5 @@ export const Demo = {
 
 export const args = {
   index: 6,
+  desc: "ActiveIcon-propen lar deg endre ikon i active state",
 };
diff --git a/aksel.nav.no/website/pages/eksempler/copybutton/icon.tsx b/aksel.nav.no/website/pages/eksempler/copybutton/icon.tsx
index ef710fa576..36731be912 100644
--- a/aksel.nav.no/website/pages/eksempler/copybutton/icon.tsx
+++ b/aksel.nav.no/website/pages/eksempler/copybutton/icon.tsx
@@ -4,7 +4,12 @@ import { withDsExample } from "components/website-modules/examples/withDsExample
 
 const Example = () => {
   return (
-    <CopyButton copyText="3.14" icon={<LinkIcon title="Kopier lenke" />} />
+    <CopyButton
+      copyText="https://aksel.nav.no/"
+      text="Kopier lenke"
+      activeText="Lenken er kopiert"
+      icon={<LinkIcon aria-hidden />}
+    />
   );
 };
 
@@ -17,4 +22,5 @@ export const Demo = {
 
 export const args = {
   index: 5,
+  desc: "Icon-propen lar deg bytte ikon i default state",
 };
diff --git a/aksel.nav.no/website/pages/eksempler/copybutton/inline.tsx b/aksel.nav.no/website/pages/eksempler/copybutton/inline.tsx
index 3dc2884bae..7bb2fe2762 100644
--- a/aksel.nav.no/website/pages/eksempler/copybutton/inline.tsx
+++ b/aksel.nav.no/website/pages/eksempler/copybutton/inline.tsx
@@ -1,12 +1,12 @@
-import { CopyButton } from "@navikt/ds-react";
+import { CopyButton, HStack } from "@navikt/ds-react";
 import { withDsExample } from "components/website-modules/examples/withDsExample";
 
 const Example = () => {
   return (
-    <div className="flex items-center gap-2">
-      <CopyButton size="small" copyText="Maguer Gorge 14b, 56430 Tatooine" />{" "}
+    <HStack gap="2" align="center">
+      <CopyButton size="small" copyText="Maguer Gorge 14b, 56430 Tatooine" />
       Adresse: Maguer Gorge 14b, 56430 Tatooine
-    </div>
+    </HStack>
   );
 };
 
@@ -19,5 +19,5 @@ export const Demo = {
 
 export const args = {
   index: 7,
-  desc: "CopyButton kan settes inline med tekst for å forenkle repetive oppgaver.",
+  desc: "CopyButton kan settes inline med tekst for å forenkle repetitive oppgaver.",
 };
diff --git a/aksel.nav.no/website/pages/eksempler/copybutton/small.tsx b/aksel.nav.no/website/pages/eksempler/copybutton/small.tsx
index 5cf56f4dc9..8353f579b2 100644
--- a/aksel.nav.no/website/pages/eksempler/copybutton/small.tsx
+++ b/aksel.nav.no/website/pages/eksempler/copybutton/small.tsx
@@ -1,12 +1,12 @@
-import { CopyButton } from "@navikt/ds-react";
+import { CopyButton, HStack } from "@navikt/ds-react";
 import { withDsExample } from "components/website-modules/examples/withDsExample";
 
 const Example = () => {
   return (
-    <div className="flex items-center gap-2">
+    <HStack gap="3">
       <CopyButton size="small" copyText="3.14" />
       <CopyButton size="small" copyText="3.14" text="Kopier" />
-    </div>
+    </HStack>
   );
 };
 
diff --git a/aksel.nav.no/website/pages/eksempler/copybutton/tooltip.tsx b/aksel.nav.no/website/pages/eksempler/copybutton/tooltip.tsx
index 0b3ff7e8e3..4ac5bca2d0 100644
--- a/aksel.nav.no/website/pages/eksempler/copybutton/tooltip.tsx
+++ b/aksel.nav.no/website/pages/eksempler/copybutton/tooltip.tsx
@@ -1,10 +1,11 @@
+import { FilesIcon } from "@navikt/aksel-icons";
 import { CopyButton, Tooltip } from "@navikt/ds-react";
 import { withDsExample } from "components/website-modules/examples/withDsExample";
 
 const Example = () => {
   return (
     <Tooltip content="Kopier fødselsnummer">
-      <CopyButton copyText="12003045000" />
+      <CopyButton copyText="12003045000" icon={<FilesIcon aria-hidden />} />
     </Tooltip>
   );
 };
diff --git a/aksel.nav.no/website/pages/eksempler/copybutton/used-in-breadcrumbs.tsx b/aksel.nav.no/website/pages/eksempler/copybutton/used-in-breadcrumbs.tsx
index 32631f3743..d1ff701f5a 100644
--- a/aksel.nav.no/website/pages/eksempler/copybutton/used-in-breadcrumbs.tsx
+++ b/aksel.nav.no/website/pages/eksempler/copybutton/used-in-breadcrumbs.tsx
@@ -1,17 +1,17 @@
-import { CopyButton } from "@navikt/ds-react";
+import { CopyButton, HStack } from "@navikt/ds-react";
 import { withDsExample } from "components/website-modules/examples/withDsExample";
 
 const Example = () => {
   return (
-    <div className="flex items-center gap-1">
+    <HStack gap="1" align="center">
       <span>Flere statsborgerskap: Norge, Danmark, Finland</span>
       <span>/</span>
-      <span className="flex items-center gap-1">
+      <HStack gap="1" align="center">
         1709230141 <CopyButton size="small" copyText="1709230141" />
-      </span>
+      </HStack>
       <span>/</span>
       <span>Gift</span>
-    </div>
+    </HStack>
   );
 };
 
diff --git a/aksel.nav.no/website/pages/eksempler/copybutton/used-in-info.tsx b/aksel.nav.no/website/pages/eksempler/copybutton/used-in-info.tsx
index f80cb54cff..d7fc37874a 100644
--- a/aksel.nav.no/website/pages/eksempler/copybutton/used-in-info.tsx
+++ b/aksel.nav.no/website/pages/eksempler/copybutton/used-in-info.tsx
@@ -1,18 +1,27 @@
-import { CopyButton } from "@navikt/ds-react";
+import { Box, CopyButton, HGrid } from "@navikt/ds-react";
 import { withDsExample } from "components/website-modules/examples/withDsExample";
 
 const Example = () => {
   return (
-    <div>
-      <Hr />
-      <Row text="Addresse 1:"> Osloveien 99, 0111 Oslo</Row>
-      <Row text="Addresse 2:"> Bergenveien 99, 2233 Bergen</Row>
+    <Box borderColor="border-subtle" borderWidth="1 0 0">
+      <Row text="Addresse 1:">Osloveien 99, 0111 Oslo</Row>
+      <Row text="Addresse 2:">Bergenveien 99, 2233 Bergen</Row>
       <Row text="Telefon:">4040404040</Row>
-      <Row text="E-mail:">nav@naversen.no</Row>
-    </div>
+      <Row text="E-post:">nav@naversen.no</Row>
+    </Box>
   );
 };
 
+const Row = ({ children, text }: any) => (
+  <Box borderColor="border-subtle" borderWidth="0 0 1" paddingBlock="1">
+    <HGrid columns="1fr 4fr auto" gap="2" align="center">
+      <span>{text}</span>
+      <span>{children}</span>
+      <CopyButton size="small" copyText={children} />
+    </HGrid>
+  </Box>
+);
+
 export default withDsExample(Example);
 
 /* Storybook story */
@@ -24,18 +33,3 @@ export const args = {
   index: 10,
   desc: "Ved utlisting av mye relevant innhold, kan CopyButton brukes for å enklere kopiere informasjonen.",
 };
-
-const Hr = () => (
-  <div className="border-t-border-divider my-1 h-[1px] w-full border-t" />
-);
-
-const Row = ({ children, text }: any) => (
-  <>
-    <div className="grid grid-cols-[1fr_4fr_auto] items-center gap-2">
-      <span>{text}</span>
-      <span>{children}</span>
-      <CopyButton size="small" copyText={children} />
-    </div>
-    <Hr />
-  </>
-);
diff --git a/yarn.lock b/yarn.lock
index 8951517e58..32cb12a753 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3453,7 +3453,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/aksel-icons@^5.6.4, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
+"@navikt/aksel-icons@^5.6.5, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
   version: 0.0.0-use.local
   resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons"
   dependencies:
@@ -3480,8 +3480,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@navikt/aksel-stylelint@workspace:@navikt/aksel-stylelint"
   dependencies:
-    "@navikt/ds-css": ^5.6.4
-    "@navikt/ds-tokens": ^5.6.4
+    "@navikt/ds-css": ^5.6.5
+    "@navikt/ds-tokens": ^5.6.5
     "@types/jest": ^29.0.0
     concurrently: 7.2.1
     copyfiles: 2.4.1
@@ -3499,7 +3499,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@navikt/aksel@workspace:@navikt/aksel"
   dependencies:
-    "@navikt/ds-css": 5.6.4
+    "@navikt/ds-css": 5.6.5
     "@types/inquirer": ^9.0.3
     "@types/jest": ^29.0.0
     axios: 1.3.6
@@ -3523,11 +3523,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-css@*, @navikt/ds-css@5.6.4, @navikt/ds-css@^5.6.4, @navikt/ds-css@workspace:@navikt/core/css":
+"@navikt/ds-css@*, @navikt/ds-css@5.6.5, @navikt/ds-css@^5.6.5, @navikt/ds-css@workspace:@navikt/core/css":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-css@workspace:@navikt/core/css"
   dependencies:
-    "@navikt/ds-tokens": ^5.6.4
+    "@navikt/ds-tokens": ^5.6.5
     cssnano: 6.0.0
     fast-glob: 3.2.11
     lodash: 4.17.21
@@ -3540,13 +3540,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-react@*, @navikt/ds-react@5.6.4, @navikt/ds-react@^5.6.4, @navikt/ds-react@workspace:@navikt/core/react":
+"@navikt/ds-react@*, @navikt/ds-react@5.6.5, @navikt/ds-react@^5.6.5, @navikt/ds-react@workspace:@navikt/core/react":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-react@workspace:@navikt/core/react"
   dependencies:
     "@floating-ui/react": 0.25.4
-    "@navikt/aksel-icons": ^5.6.4
-    "@navikt/ds-tokens": ^5.6.4
+    "@navikt/aksel-icons": ^5.6.5
+    "@navikt/ds-tokens": ^5.6.5
     "@radix-ui/react-tabs": 1.0.0
     "@radix-ui/react-toggle-group": 1.0.0
     "@testing-library/dom": 8.13.0
@@ -3580,11 +3580,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tailwind@^5.6.4, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
+"@navikt/ds-tailwind@^5.6.5, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind"
   dependencies:
-    "@navikt/ds-tokens": ^5.6.4
+    "@navikt/ds-tokens": ^5.6.5
     "@types/jest": ^29.0.0
     color: 4.2.3
     jest: ^29.0.0
@@ -3595,7 +3595,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tokens@^5.6.4, @navikt/ds-tokens@workspace:@navikt/core/tokens":
+"@navikt/ds-tokens@^5.6.5, @navikt/ds-tokens@workspace:@navikt/core/tokens":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
   dependencies:
@@ -8490,11 +8490,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "aksel.nav.no@workspace:aksel.nav.no"
   dependencies:
-    "@navikt/aksel-icons": ^5.6.4
-    "@navikt/ds-css": ^5.6.4
-    "@navikt/ds-react": ^5.6.4
-    "@navikt/ds-tailwind": ^5.6.4
-    "@navikt/ds-tokens": ^5.6.4
+    "@navikt/aksel-icons": ^5.6.5
+    "@navikt/ds-css": ^5.6.5
+    "@navikt/ds-react": ^5.6.5
+    "@navikt/ds-tailwind": ^5.6.5
+    "@navikt/ds-tokens": ^5.6.5
     prettier-plugin-tailwindcss: ^0.2.3
   languageName: unknown
   linkType: soft
@@ -23431,8 +23431,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "shadow-dom@workspace:examples/shadow-dom"
   dependencies:
-    "@navikt/ds-css": 5.6.4
-    "@navikt/ds-react": 5.6.4
+    "@navikt/ds-css": 5.6.5
+    "@navikt/ds-react": 5.6.5
     "@types/react": ^18.0.0
     "@types/react-dom": ^18.0.0
     "@vitejs/plugin-react": ^3.1.0