From c916df00add50659139ba926927ad162110958be Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Mon, 30 Sep 2024 16:50:25 +0200
Subject: [PATCH 01/29] feat: relative sizing

---
 packages/css/button.css                       |  9 ---
 .../src/components/Button/Button.stories.tsx  | 79 ++++++++++++-------
 2 files changed, 49 insertions(+), 39 deletions(-)

diff --git a/packages/css/button.css b/packages/css/button.css
index 2acc5171de..0d60c0e27f 100644
--- a/packages/css/button.css
+++ b/packages/css/button.css
@@ -38,19 +38,10 @@
   }
 
   &[data-size='sm'] {
-    --dsc-button-gap: var(--ds-sizing-1);
-    --dsc-button-padding-block: var(--ds-spacing-2);
-    --dsc-button-padding-inline: var(--ds-spacing-3);
-    --dsc-button-size: var(--ds-sizing-10);
-
     @composes ds-body-text--short-sm from './utilities.css';
   }
 
   &[data-size='lg'] {
-    --dsc-button-padding-block: var(--ds-spacing-3);
-    --dsc-button-padding-inline: var(--ds-spacing-5);
-    --dsc-button-size: var(--ds-sizing-14);
-
     @composes ds-body-text--short-lg from './utilities.css';
   }
 
diff --git a/packages/react/src/components/Button/Button.stories.tsx b/packages/react/src/components/Button/Button.stories.tsx
index 3ee84be702..970ef69e03 100644
--- a/packages/react/src/components/Button/Button.stories.tsx
+++ b/packages/react/src/components/Button/Button.stories.tsx
@@ -8,14 +8,13 @@ import {
   ExternalLinkIcon,
   PencilWritingIcon,
   PlusCircleIcon,
-  PlusIcon,
   PrinterSmallIcon,
   TrashIcon,
 } from '@navikt/aksel-icons';
 import type { Meta, ReactRenderer, StoryFn, StoryObj } from '@storybook/react';
 import type { PartialStoryFn } from '@storybook/types';
 
-import { Spinner, Tooltip } from '../';
+import { Tooltip } from '../';
 
 import { Button } from './';
 
@@ -24,15 +23,55 @@ type Story = StoryObj<typeof Button>;
 const meta: Meta<typeof Button> = {
   title: 'Komponenter/Button',
   component: Button,
+  decorators: [
+    (Story: PartialStoryFn<ReactRenderer>) => (
+      <Stack>
+        <style>
+          {`:root {
+          --ds-sizing-min: 2px;
+          --ds-sizing-scale: .25rem; /* 4px */
+          --ds-sizing-calc: calc((var(--ds-font-size-5) - 1em) * .5);
+          --ds-sizing-adjust: calc((var(--ds-font-size-5) - 1em) * .5);
+          --ds-sizing-adjust: round(calc((var(--ds-font-size-5) - 1em) * .5));
+
+          /*
+          18  1   4     18 * 1 - 14 * 1 = 4       18 * 1 - 14 * 1 -  = 4
+          18  2   8     18 * 2 - 14 * 2 = 8
+          18  3   12    18 * 3 - 14 * 2 = 12
+          18  4   16    18 * 4 - 14 * 2 = 16
+          18  30  120   18 * 30 - 14 * 2 = 120
+
+          20  1   6     20 * 1 - 14 * 1 = 6       20 * 1 - 14 * 1 - 20 = 6
+          20  2   12    20 * 2 - 14 * 1 = 12      20 * 2 - 14 * 2 = 6
+          20  3   18    20 * 3 - 14 * 1 = 18
+          20  4   24    20 * 4 - 14 * 1 = 24
+          20  30  180   20 * 30 - 14 * 1 = 180
+          */
+
+          ${Array.from({ length: 31 }, (_, i) =>
+            /*calc(${i}em - var(--ds-sizing-scale)),*/
+            /*calc(4px * ${i} - 18px + 1em),*/
+            /*max(var(--ds-sizing-min) * ${i});*/
+            /*--ds-sizing-${i}: calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * ${i} - var(--ds-font-md) + 1em + var(--ds-sizing-adjust));*/
+            /*--ds-sizing-${i}: calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * ${i} - var(--ds-font-size-5) + 1em + var(--ds-sizing-adjust));*/
+            /*--ds-sizing-${i}: calc(${i}em - (1em - var(--ds-sizing-scale) + var(--ds-sizing-adjust)) * ${i} + var(--ds-sizing-adjust));*/
+            `
+            --ds-sizing-${i}: calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * ${i} + var(--ds-sizing-adjust));
+            --ds-spacing-${i}:var(--ds-sizing-${i});
+          `.trim(),
+          )
+            .slice(1)
+            .join('\n')}
+        }`}
+        </style>
+        <Story />
+      </Stack>
+    ),
+  ],
 };
 
 export default meta;
 
-const stack = (Story: PartialStoryFn<ReactRenderer>) => (
-  <Stack>
-    <Story />
-  </Stack>
-);
 export const Preview: Story = {
   render: ({ ...args }) => {
     return <Button {...args} />;
@@ -55,8 +94,6 @@ export const Primary: StoryFn<typeof Button> = () => (
   </>
 );
 
-Primary.decorators = [stack];
-
 export const Secondary: StoryFn<typeof Button> = () => (
   <>
     <Button variant='secondary' color='accent'>
@@ -65,8 +102,6 @@ export const Secondary: StoryFn<typeof Button> = () => (
   </>
 );
 
-Secondary.decorators = [stack];
-
 export const Tertiary: StoryFn<typeof Button> = () => (
   <>
     <Button variant='tertiary' color='accent'>
@@ -76,8 +111,6 @@ export const Tertiary: StoryFn<typeof Button> = () => (
   </>
 );
 
-Tertiary.decorators = [stack];
-
 export const First: StoryFn<typeof Button> = () => (
   <>
     <Button variant='primary' color='accent'>
@@ -92,8 +125,6 @@ export const First: StoryFn<typeof Button> = () => (
   </>
 );
 
-First.decorators = [stack];
-
 export const Second: StoryFn<typeof Button> = () => (
   <>
     <Button variant='secondary' color='neutral'>
@@ -111,8 +142,6 @@ export const Second: StoryFn<typeof Button> = () => (
   </>
 );
 
-Second.decorators = [stack];
-
 export const Danger: StoryFn<typeof Button> = () => (
   <>
     <Button variant='primary' color='danger'>
@@ -149,8 +178,6 @@ export const CombinedColors: StoryFn<typeof Button> = () => (
   </>
 );
 
-CombinedColors.decorators = [stack];
-
 export const AsLink: StoryFn<typeof Button> = () => (
   <Button asChild>
     <a target='_blank' rel='noreferrer' href='https://www.designsystemet.no'>
@@ -173,8 +200,6 @@ export const TextAndIcon: StoryFn<typeof Button> = () => (
   </>
 );
 
-TextAndIcon.decorators = [stack];
-
 export const Loading: StoryFn<typeof Button> = () => (
   <>
     <Button variant='primary' loading>
@@ -189,25 +214,23 @@ export const Loading: StoryFn<typeof Button> = () => (
   </>
 );
 
-Loading.decorators = [stack];
-
 export const Icons: StoryFn<typeof Button> = () => (
   <>
-    <Button variant='primary' size='sm'>
+    <Button variant='primary' size='sm' icon>
       <CogIcon fontSize='1rem' title='Innstillinger' />
     </Button>
     <Button variant='primary' size='sm'>
       <CogIcon fontSize='1rem' aria-hidden />
       Small
     </Button>
-    <Button variant='primary' size='md'>
+    <Button variant='primary' size='md' icon>
       <CogIcon fontSize='1.5rem' title='Innstillinger' />
     </Button>
     <Button variant='primary' size='md'>
       <CogIcon fontSize='1.5rem' aria-hidden />
       Medium
     </Button>
-    <Button variant='primary' size='lg'>
+    <Button variant='primary' size='lg' icon>
       <CogIcon fontSize='2rem' title='Innstillinger' />
     </Button>
     <Button variant='primary' size='lg'>
@@ -217,8 +240,6 @@ export const Icons: StoryFn<typeof Button> = () => (
   </>
 );
 
-Icons.decorators = [stack];
-
 export const IconOnly: StoryFn<typeof Button> = () => (
   <>
     <Tooltip content='Legg til ny'>
@@ -270,5 +291,3 @@ export const IconsOnlyPrimary: StoryFn<typeof Button> = () => (
     </Button>
   </>
 );
-
-IconsOnlyPrimary.decorators = [stack];

From 76d98f4fa8e0913089c6af564324c3f0a17fef1e Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Tue, 1 Oct 2024 08:44:28 +0200
Subject: [PATCH 02/29] fix: round values

---
 .../src/components/Button/Button.stories.tsx  | 39 +++++--------------
 1 file changed, 9 insertions(+), 30 deletions(-)

diff --git a/packages/react/src/components/Button/Button.stories.tsx b/packages/react/src/components/Button/Button.stories.tsx
index 970ef69e03..08f6622460 100644
--- a/packages/react/src/components/Button/Button.stories.tsx
+++ b/packages/react/src/components/Button/Button.stories.tsx
@@ -28,37 +28,16 @@ const meta: Meta<typeof Button> = {
       <Stack>
         <style>
           {`:root {
-          --ds-sizing-min: 2px;
-          --ds-sizing-scale: .25rem; /* 4px */
-          --ds-sizing-calc: calc((var(--ds-font-size-5) - 1em) * .5);
-          --ds-sizing-adjust: calc((var(--ds-font-size-5) - 1em) * .5);
-          --ds-sizing-adjust: round(calc((var(--ds-font-size-5) - 1em) * .5));
+          --ds-sizing-scale-min: 0.125rem; /* Minimum 2px steps */
+          --ds-sizing-scale: .25rem; /* Default 4px steps */
+          --ds-sizing-adjust: calc((var(--ds-font-size-5) - 1em) * .5); /* Fallback if not supporting round() */
+          --ds-sizing-adjust: round(up, calc((var(--ds-font-size-5) - 1em) * .5), 0.0625rem); /* Round to nearest 1px */
 
-          /*
-          18  1   4     18 * 1 - 14 * 1 = 4       18 * 1 - 14 * 1 -  = 4
-          18  2   8     18 * 2 - 14 * 2 = 8
-          18  3   12    18 * 3 - 14 * 2 = 12
-          18  4   16    18 * 4 - 14 * 2 = 16
-          18  30  120   18 * 30 - 14 * 2 = 120
-
-          20  1   6     20 * 1 - 14 * 1 = 6       20 * 1 - 14 * 1 - 20 = 6
-          20  2   12    20 * 2 - 14 * 1 = 12      20 * 2 - 14 * 2 = 6
-          20  3   18    20 * 3 - 14 * 1 = 18
-          20  4   24    20 * 4 - 14 * 1 = 24
-          20  30  180   20 * 30 - 14 * 1 = 180
-          */
-
-          ${Array.from({ length: 31 }, (_, i) =>
-            /*calc(${i}em - var(--ds-sizing-scale)),*/
-            /*calc(4px * ${i} - 18px + 1em),*/
-            /*max(var(--ds-sizing-min) * ${i});*/
-            /*--ds-sizing-${i}: calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * ${i} - var(--ds-font-md) + 1em + var(--ds-sizing-adjust));*/
-            /*--ds-sizing-${i}: calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * ${i} - var(--ds-font-size-5) + 1em + var(--ds-sizing-adjust));*/
-            /*--ds-sizing-${i}: calc(${i}em - (1em - var(--ds-sizing-scale) + var(--ds-sizing-adjust)) * ${i} + var(--ds-sizing-adjust));*/
-            `
-            --ds-sizing-${i}: calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * ${i} + var(--ds-sizing-adjust));
-            --ds-spacing-${i}:var(--ds-sizing-${i});
-          `.trim(),
+          ${Array.from(
+            { length: 31 },
+            (_, i) =>
+              `--ds-sizing-${i}: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * ${i} + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * ${i}));
+            --ds-spacing-${i}:var(--ds-sizing-${i});`,
           )
             .slice(1)
             .join('\n')}

From 0bb5b09eb3018c4b75be44d7ff8d4a2dcc669470 Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Tue, 1 Oct 2024 14:22:23 +0200
Subject: [PATCH 03/29] fix: use ds-sizing-scale-base

---
 packages/react/src/components/Button/Button.stories.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/Button/Button.stories.tsx b/packages/react/src/components/Button/Button.stories.tsx
index 08f6622460..06b73fe17d 100644
--- a/packages/react/src/components/Button/Button.stories.tsx
+++ b/packages/react/src/components/Button/Button.stories.tsx
@@ -28,10 +28,12 @@ const meta: Meta<typeof Button> = {
       <Stack>
         <style>
           {`:root {
+          --ds-sizing-scale-base: var(--ds-font-size-5);
           --ds-sizing-scale-min: 0.125rem; /* Minimum 2px steps */
           --ds-sizing-scale: .25rem; /* Default 4px steps */
-          --ds-sizing-adjust: calc((var(--ds-font-size-5) - 1em) * .5); /* Fallback if not supporting round() */
-          --ds-sizing-adjust: round(up, calc((var(--ds-font-size-5) - 1em) * .5), 0.0625rem); /* Round to nearest 1px */
+
+          --ds-sizing-adjust: calc((var(--ds-sizing-scale-base) - 1em) * .5); /* Fallback if not supporting round() */
+          --ds-sizing-adjust: round(up, calc((var(--ds-sizing-scale-base) - 1em) * .5), 0.0625rem); /* Round to nearest 1px */
 
           ${Array.from(
             { length: 31 },

From ae256f4b778bbe9889d2a38efb5013901242380d Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Thu, 3 Oct 2024 09:42:24 +0200
Subject: [PATCH 04/29] docs: globally set scale for testing

---
 packages/css/index.css                        | 85 +++++++++++++++++++
 .../src/components/Button/Button.stories.tsx  | 19 -----
 2 files changed, 85 insertions(+), 19 deletions(-)

diff --git a/packages/css/index.css b/packages/css/index.css
index d75a1544ef..2cf9291f57 100644
--- a/packages/css/index.css
+++ b/packages/css/index.css
@@ -41,3 +41,88 @@
 @import url('./breadcrumbs.css') layer(ds.components);
 @import url('./badge.css') layer(ds.components);
 @import url('./avatar.css') layer(ds.components);
+
+/*
+Array.from(
+    { length: 31 },
+    (_, i) =>
+      `--ds-sizing-${i}: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * ${i} + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * ${i}));
+    --ds-spacing-${i}:var(--ds-sizing-${i});`,
+  )
+    .slice(1)
+    .join('\n')
+*/
+
+:root {
+  --ds-sizing-scale-base: var(--ds-font-size-5);
+  --ds-sizing-scale-min: 0.125rem; /* Minimum 2px steps */
+  --ds-sizing-scale: 0.25rem; /* Default 4px steps */
+  --ds-sizing-adjust: calc((var(--ds-sizing-scale-base) - 1em) * 0.5); /* Fallback if not supporting round() */
+
+  /* stylelint-disable-next-line declaration-block-no-duplicate-custom-properties */
+  --ds-sizing-adjust: round(up, calc((var(--ds-sizing-scale-base) - 1em) * 0.5), 0.0625rem);
+
+  /* Sizing */
+  --ds-sizing-10: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 10 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 10));
+  --ds-sizing-11: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 11 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 11));
+  --ds-sizing-12: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 12 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 12));
+  --ds-sizing-13: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 13 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 13));
+  --ds-sizing-14: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 14 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 14));
+  --ds-sizing-15: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 15 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 15));
+  --ds-sizing-16: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 16 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 16));
+  --ds-sizing-17: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 17 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 17));
+  --ds-sizing-18: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 18 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 18));
+  --ds-sizing-19: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 19 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 19));
+  --ds-sizing-1: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 1 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 1));
+  --ds-sizing-20: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 20 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 20));
+  --ds-sizing-21: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 21 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 21));
+  --ds-sizing-22: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 22 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 22));
+  --ds-sizing-23: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 23 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 23));
+  --ds-sizing-24: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 24 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 24));
+  --ds-sizing-25: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 25 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 25));
+  --ds-sizing-26: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 26 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 26));
+  --ds-sizing-27: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 27 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 27));
+  --ds-sizing-28: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 28 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 28));
+  --ds-sizing-29: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 29 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 29));
+  --ds-sizing-2: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 2 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 2));
+  --ds-sizing-30: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 30 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 30));
+  --ds-sizing-3: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 3 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 3));
+  --ds-sizing-4: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 4 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 4));
+  --ds-sizing-5: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 5 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 5));
+  --ds-sizing-6: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 6 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 6));
+  --ds-sizing-7: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 7 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 7));
+  --ds-sizing-8: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 8 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 8));
+  --ds-sizing-9: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 9 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 9));
+
+  /* Spacing */
+  --ds-spacing-10: var(--ds-sizing-10);
+  --ds-spacing-11: var(--ds-sizing-11);
+  --ds-spacing-12: var(--ds-sizing-12);
+  --ds-spacing-13: var(--ds-sizing-13);
+  --ds-spacing-14: var(--ds-sizing-14);
+  --ds-spacing-15: var(--ds-sizing-15);
+  --ds-spacing-16: var(--ds-sizing-16);
+  --ds-spacing-17: var(--ds-sizing-17);
+  --ds-spacing-18: var(--ds-sizing-18);
+  --ds-spacing-19: var(--ds-sizing-19);
+  --ds-spacing-1: var(--ds-sizing-1);
+  --ds-spacing-20: var(--ds-sizing-20);
+  --ds-spacing-21: var(--ds-sizing-21);
+  --ds-spacing-22: var(--ds-sizing-22);
+  --ds-spacing-23: var(--ds-sizing-23);
+  --ds-spacing-24: var(--ds-sizing-24);
+  --ds-spacing-25: var(--ds-sizing-25);
+  --ds-spacing-26: var(--ds-sizing-26);
+  --ds-spacing-27: var(--ds-sizing-27);
+  --ds-spacing-28: var(--ds-sizing-28);
+  --ds-spacing-29: var(--ds-sizing-29);
+  --ds-spacing-2: var(--ds-sizing-2);
+  --ds-spacing-30: var(--ds-sizing-30);
+  --ds-spacing-3: var(--ds-sizing-3);
+  --ds-spacing-4: var(--ds-sizing-4);
+  --ds-spacing-5: var(--ds-sizing-5);
+  --ds-spacing-6: var(--ds-sizing-6);
+  --ds-spacing-7: var(--ds-sizing-7);
+  --ds-spacing-8: var(--ds-sizing-8);
+  --ds-spacing-9: var(--ds-sizing-9);
+}
diff --git a/packages/react/src/components/Button/Button.stories.tsx b/packages/react/src/components/Button/Button.stories.tsx
index 06b73fe17d..e34c11aa4d 100644
--- a/packages/react/src/components/Button/Button.stories.tsx
+++ b/packages/react/src/components/Button/Button.stories.tsx
@@ -26,25 +26,6 @@ const meta: Meta<typeof Button> = {
   decorators: [
     (Story: PartialStoryFn<ReactRenderer>) => (
       <Stack>
-        <style>
-          {`:root {
-          --ds-sizing-scale-base: var(--ds-font-size-5);
-          --ds-sizing-scale-min: 0.125rem; /* Minimum 2px steps */
-          --ds-sizing-scale: .25rem; /* Default 4px steps */
-
-          --ds-sizing-adjust: calc((var(--ds-sizing-scale-base) - 1em) * .5); /* Fallback if not supporting round() */
-          --ds-sizing-adjust: round(up, calc((var(--ds-sizing-scale-base) - 1em) * .5), 0.0625rem); /* Round to nearest 1px */
-
-          ${Array.from(
-            { length: 31 },
-            (_, i) =>
-              `--ds-sizing-${i}: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * ${i} + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * ${i}));
-            --ds-spacing-${i}:var(--ds-sizing-${i});`,
-          )
-            .slice(1)
-            .join('\n')}
-        }`}
-        </style>
         <Story />
       </Stack>
     ),

From f048a0993f9ae98bb956e9907767732c79ccdf73 Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Mon, 21 Oct 2024 12:03:43 +0200
Subject: [PATCH 05/29] fix: adjust sizing to use relative

---
 packages/css/alert.css              | 19 ----------------
 packages/css/avatar.css             | 30 -------------------------
 packages/css/badge.css              | 24 --------------------
 packages/css/breadcrumbs.css        | 16 --------------
 packages/css/button.css             | 22 +------------------
 packages/css/card.css               |  2 --
 packages/css/chip.css               | 17 ---------------
 packages/css/dropdown.css           |  2 --
 packages/css/helptext.css           | 10 ---------
 packages/css/index.css              | 16 ++++++++++++++
 packages/css/input.css              | 34 -----------------------------
 packages/css/label.css              | 17 +--------------
 packages/css/list.css               | 14 ------------
 packages/css/pagination.css         | 10 ---------
 packages/css/popover.css            | 14 ------------
 packages/css/spinner.css            |  4 ++--
 packages/css/table.css              | 17 ---------------
 packages/css/tabs.css               | 16 --------------
 packages/css/tag.css                | 16 --------------
 packages/css/tooltip.css            |  2 --
 packages/css/validation-message.css | 21 ------------------
 21 files changed, 20 insertions(+), 303 deletions(-)

diff --git a/packages/css/alert.css b/packages/css/alert.css
index 09cb3c410c..411d271171 100644
--- a/packages/css/alert.css
+++ b/packages/css/alert.css
@@ -17,8 +17,6 @@
   padding-block: var(--dsc-alert-padding);
   padding-inline: calc(var(--dsc-alert-padding) + var(--dsc-alert-icon-size) + var(--dsc-alert-gap)) var(--dsc-alert-padding);
 
-  @composes ds-body-text--md from './base/base.css';
-
   & > :is(h1, h2, h3, h4, h5, h6):first-child::before /* If Alert starts with Heading, align icon to this */,
   &:not(:has(> :is(h1, h2, h3, h4, h5, h6):first-child))::before /* If there is no Heading, align icon to Alert itself */ {
     background: var(--dsc-alert-icon-color);
@@ -54,21 +52,4 @@
     --dsc-alert-icon-color: var(--ds-color-danger-text-subtle);
     --dsc-alert-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7.74 2.47a.75.75 0 0 1 .53-.22h7.46a.75.75 0 0 1 .53.22l5.27 5.27c.14.14.22.33.22.53v7.46a.75.75 0 0 1-.22.53l-5.27 5.27a.75.75 0 0 1-.53.22H8.27a.75.75 0 0 1-.53-.22l-5.27-5.27a.75.75 0 0 1-.22-.53V8.27a.75.75 0 0 1 .22-.53zm1.29 5.5a.75.75 0 0 0-1.06 1.06L10.94 12l-2.97 2.97a.75.75 0 1 0 1.06 1.06L12 13.06l2.97 2.97a.75.75 0 1 0 1.06-1.06L13.06 12l2.97-2.97a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E");
   }
-
-  /**
-   * Sizes
-   */
-  &[data-size='sm'] {
-    --dsc-alert-icon-size: var(--ds-sizing-6);
-    --dsc-alert-padding: var(--ds-spacing-5);
-
-    @composes ds-body-text--sm from './base/base.css';
-  }
-
-  &[data-size='lg'] {
-    --dsc-alert-icon-size: var(--ds-sizing-8);
-    --dsc-alert-padding: var(--ds-spacing-7);
-
-    @composes ds-body-text--lg from './base/base.css';
-  }
 }
diff --git a/packages/css/avatar.css b/packages/css/avatar.css
index 960f218904..8a0f36cddc 100644
--- a/packages/css/avatar.css
+++ b/packages/css/avatar.css
@@ -19,8 +19,6 @@
   text-transform: uppercase;
   user-select: none;
 
-  @composes ds-body-text--xs from './base/base.css';
-
   &:not(:has(> img)) {
     padding: var(--dsc-avatar-padding);
   }
@@ -78,32 +76,4 @@
     --dsc-avatar-background: var(--ds-color-brand3-base-default);
     --dsc-avatar-color: var(--ds-color-brand3-contrast-default);
   }
-
-  &[data-size='xs'] {
-    --dsc-avatar-size: var(--ds-sizing-7);
-    --dsc-avatar-padding: var(--ds-spacing-1);
-
-    @composes ds-body-text--xs from './base/base.css';
-  }
-
-  &[data-size='sm'] {
-    --dsc-avatar-size: var(--ds-sizing-9);
-    --dsc-avatar-padding: var(--ds-spacing-1);
-
-    @composes ds-heading-text--2xs from './base/base.css';
-  }
-
-  &[data-size='md'] {
-    --dsc-avatar-size: var(--ds-sizing-12);
-    --dsc-avatar-padding: var(--ds-spacing-2);
-
-    @composes ds-heading-text--sm from './base/base.css';
-  }
-
-  &[data-size='lg'] {
-    --dsc-avatar-size: var(--ds-sizing-15);
-    --dsc-avatar-padding: var(--ds-spacing-2);
-
-    @composes ds-heading-text--md from './base/base.css';
-  }
 }
diff --git a/packages/css/badge.css b/packages/css/badge.css
index 6d171b3bf8..0458429aa5 100644
--- a/packages/css/badge.css
+++ b/packages/css/badge.css
@@ -8,8 +8,6 @@
   display: inline-flex;
   position: relative;
 
-  @composes ds-body-text--short-sm from './base/base.css';
-
   &::before {
     content: attr(data-count);
     background: var(--dsc-badge-background);
@@ -23,28 +21,6 @@
     place-items: center;
   }
 
-  &[data-size='sm'] {
-    --dsc-badge-size: var(--ds-sizing-3);
-    --dsc-badge-padding: 0 var(--ds-spacing-1);
-
-    @composes ds-body-text--short-xs from './base/base.css';
-
-    &[data-count] {
-      --dsc-badge-size: var(--ds-sizing-5);
-    }
-  }
-
-  &[data-size='lg'] {
-    --dsc-badge-size: var(--ds-sizing-4);
-    --dsc-badge-padding: 0 var(--ds-spacing-2);
-
-    @composes ds-body-text--short-md from './base/base.css';
-
-    &[data-count] {
-      --dsc-badge-size: var(--ds-sizing-7);
-    }
-  }
-
   &[data-color='info'] {
     --dsc-badge-background: var(--ds-color-info-base-default);
     --dsc-badge-color: var(--ds-color-info-contrast-default);
diff --git a/packages/css/breadcrumbs.css b/packages/css/breadcrumbs.css
index 851f4d2dda..fb778a47d0 100644
--- a/packages/css/breadcrumbs.css
+++ b/packages/css/breadcrumbs.css
@@ -3,22 +3,6 @@
   --dsc-breadcrumbs-chevron-size: var(--ds-sizing-6);
   --dsc-breadcrumbs-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M9.47 5.97a.75.75 0 0 1 1.06 0l5.5 5.5a.75.75 0 0 1 0 1.06l-5.5 5.5a.75.75 0 1 1-1.06-1.06L14.44 12 9.47 7.03a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");
 
-  @composes ds-body-text--md from './base/base.css';
-
-  &[data-size='sm'] {
-    --dsc-breadcrumbs-spacing: var(--ds-spacing-1);
-    --dsc-breadcrumbs-chevron-size: var(--ds-sizing-5);
-
-    @composes ds-body-text--sm from './base/base.css';
-  }
-
-  &[data-size='lg'] {
-    --dsc-breadcrumbs-spacing: var(--ds-spacing-3);
-    --dsc-breadcrumbs-chevron-size: var(--ds-sizing-7);
-
-    @composes ds-body-text--lg from './base/base.css';
-  }
-
   & > :is(ol, ul) {
     display: flex;
     flex-wrap: wrap;
diff --git a/packages/css/button.css b/packages/css/button.css
index 8f4633e92f..ad74be8ab6 100644
--- a/packages/css/button.css
+++ b/packages/css/button.css
@@ -9,7 +9,6 @@
   --dsc-button-padding-inline: var(--ds-spacing-4);
   --dsc-button-size: var(--ds-sizing-12);
 
-  @composes ds-body-text--short-md from './base/base.css';
   @composes ds-focus from './base/base.css';
 
   align-items: center;
@@ -28,7 +27,7 @@
   padding: var(--dsc-button-padding-block) var(--dsc-button-padding-inline);
   text-align: inherit;
   text-decoration: none;
-  font-weight: var(--ds-font-weight-medium);
+  font-weight: var(--ds-font-weight-medium) !important; /* TODO: Fix */
 
   & svg,
   & img {
@@ -43,25 +42,6 @@
     display: flex;
   }
 
-  &[data-size='sm'] {
-    --dsc-button-gap: var(--ds-sizing-1);
-    --dsc-button-padding-block: var(--ds-spacing-2);
-    --dsc-button-padding-inline: var(--ds-spacing-3);
-    --dsc-button-size: var(--ds-sizing-10);
-
-    @composes ds-body-text--short-sm from './base/base.css';
-    font-weight: var(--ds-font-weight-medium);
-  }
-
-  &[data-size='lg'] {
-    --dsc-button-padding-block: var(--ds-spacing-3);
-    --dsc-button-padding-inline: var(--ds-spacing-5);
-    --dsc-button-size: var(--ds-sizing-14);
-
-    @composes ds-body-text--short-lg from './base/base.css';
-    font-weight: var(--ds-font-weight-medium);
-  }
-
   &[data-icon] {
     padding-inline: var(--dsc-button-padding-block);
   }
diff --git a/packages/css/card.css b/packages/css/card.css
index d6a3f56c93..40419ac7f5 100644
--- a/packages/css/card.css
+++ b/packages/css/card.css
@@ -18,8 +18,6 @@
   overflow: clip; /* Needed to clip media elements and and Card.Block */
   padding: var(--dsc-card-padding);
 
-  @composes ds-paragraph from './paragraph.css'; /* Must be after all: unset */
-
   /* Style link in heading, or heading when Card is anchor */
   :is(h1, h2, h3, h4, h5, h6) a:any-link /* Using :any-link to target both a and a:visited */,
   &:is(a:any-link, button, [role='button']) :is(h1, h2, h3, h4, h5, h6) {
diff --git a/packages/css/chip.css b/packages/css/chip.css
index 691d73c1d2..c641b73fab 100644
--- a/packages/css/chip.css
+++ b/packages/css/chip.css
@@ -10,7 +10,6 @@
   --dsc-chip-padding: 0 var(--ds-spacing-3);
 
   @composes ds-focus from './base/base.css';
-  @composes ds-body-text--short-sm from './base/base.css';
 
   align-items: center;
   background: var(--dsc-chip-background);
@@ -54,22 +53,6 @@
     width: var(--dsc-chip-icon-size);
   }
 
-  &[data-size='sm'] {
-    --dsc-chip-height: var(--ds-sizing-7);
-    --dsc-chip-icon-size: var(--ds-sizing-5);
-    --dsc-chip-input-size: var(--ds-spacing-4);
-
-    @composes ds-body-text--short-xs from './base/base.css';
-  }
-
-  &[data-size='lg'] {
-    --dsc-chip-height: var(--ds-sizing-9);
-    --dsc-chip-icon-size: var(--ds-sizing-7);
-    --dsc-chip-input-size: var(--ds-spacing-6);
-
-    @composes ds-body-text--short-md from './base/base.css';
-  }
-
   & > input {
     --gap: calc((var(--dsc-chip-height) - var(--dsc-chip-input-size)) / 2); /* Gap is based on remaining space between input and edge */
 
diff --git a/packages/css/dropdown.css b/packages/css/dropdown.css
index 07d28a6234..8ba159ef03 100644
--- a/packages/css/dropdown.css
+++ b/packages/css/dropdown.css
@@ -25,7 +25,6 @@
   }
 
   &[data-size='sm'] {
-    --dsc-dropdown-padding: var(--ds-spacing-2);
     --dsc-dropdown-min-width: 15rem;
 
     & .ds-dropdown__heading {
@@ -34,7 +33,6 @@
   }
 
   &[data-size='lg'] {
-    --dsc-dropdown-padding: var(--ds-spacing-4) var(--ds-spacing-2);
     --dsc-dropdown-min-width: 18rem;
 
     & .ds-dropdown__heading {
diff --git a/packages/css/helptext.css b/packages/css/helptext.css
index 9901e869dd..0b52a54e63 100644
--- a/packages/css/helptext.css
+++ b/packages/css/helptext.css
@@ -3,8 +3,6 @@
   --dsc-helptext-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 8 14'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M4 11a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM4 0c2.2 0 4 1.66 4 3.7 0 .98-.42 1.9-1.17 2.6l-.6.54-.29.29c-.48.46-.87.93-.94 1.41V9.5H3v-.81c0-1.26.84-2.22 1.68-3L5.42 5C5.8 4.65 6 4.2 6 3.7 6 2.66 5.1 1.83 4 1.83c-1.06 0-1.92.75-2 1.7v.15H0C0 1.66 1.8 0 4 0Z' clip-rule='evenodd'/%3E%3C/svg%3E");
   --dsc-helptext-size: var(--ds-sizing-7);
 
-  @composes ds-focus from './base/base.css';
-
   border-radius: var(--ds-border-radius-full);
   border: 2px solid;
   box-sizing: border-box;
@@ -33,14 +31,6 @@
     mask-image: var(--dsc-helptext-icon-url), linear-gradient(currentcolor, currentcolor); /* Cut icon out of currentcolor surface */
   }
 
-  &[data-size='sm'] {
-    --dsc-helptext-size: var(--ds-sizing-6);
-  }
-
-  &[data-size='lg'] {
-    --dsc-helptext-size: var(--ds-sizing-8);
-  }
-
   @media print {
     display: none;
   }
diff --git a/packages/css/index.css b/packages/css/index.css
index 24ae0a4cde..70ecc00318 100644
--- a/packages/css/index.css
+++ b/packages/css/index.css
@@ -55,6 +55,22 @@ Array.from(
     .join('\n')
 */
 
+[data-size='xs'] {
+  @composes ds-body-text--xs from './base/base.css';
+}
+
+[data-size='sm'] {
+  @composes ds-body-text--sm from './base/base.css';
+}
+
+[data-size='md'] {
+  @composes ds-body-text--md from './base/base.css';
+}
+
+[data-size='lg'] {
+  @composes ds-body-text--lg from './base/base.css';
+}
+
 :root {
   --ds-sizing-scale-base: var(--ds-font-size-5);
   --ds-sizing-scale-min: 0.125rem; /* Minimum 2px steps */
diff --git a/packages/css/input.css b/packages/css/input.css
index 958b2c7593..e6d24ca450 100644
--- a/packages/css/input.css
+++ b/packages/css/input.css
@@ -44,7 +44,6 @@
   padding: var(--dsc-input-padding);
   position: relative; /* Ensure foucs outline renders on top */
 
-  @composes ds-body-text--md from './base/base.css';
   @composes ds-focus from './base/base.css';
 
   /* Change switch background with low specificity to allow states to overwrite */
@@ -102,27 +101,6 @@
     --dsc-input-color: var(--dsc-input-color--readonly);
   }
 
-  /**
-   * Sizes
-   */
-  &[data-size='sm'] {
-    @composes ds-body-text--sm from './base/base.css';
-
-    --dsc-input-padding: var(--ds-spacing-1) var(--ds-spacing-2);
-    --dsc-input-size--switch: var(--ds-sizing-6);
-    --dsc-input-size--toggle: var(--ds-sizing-5);
-    --dsc-input-size: var(--ds-sizing-10);
-  }
-
-  &[data-size='lg'] {
-    @composes ds-body-text--lg from './base/base.css';
-
-    --dsc-input-padding: var(--ds-spacing-3) var(--ds-spacing-4);
-    --dsc-input-size--switch: var(--ds-sizing-8);
-    --dsc-input-size--toggle: var(--ds-sizing-7);
-    --dsc-input-size: var(--ds-sizing-14);
-  }
-
   /**
    * Toggle inputs
    */
@@ -233,16 +211,4 @@ label:has(input:is([type='checkbox'], [type='radio']):not(:disabled, [aria-disab
     flex: 1 1 auto;
     height: auto;
   }
-
-  &:has([data-size='sm']) {
-    @composes ds-body-text--sm from './base/base.css';
-
-    --dsc-input-affix-padding-inline: var(--ds-spacing-3);
-  }
-
-  &:has([data-size='lg']) {
-    @composes ds-body-text--lg from './base/base.css';
-
-    --dsc-input-affix-padding-inline: var(--ds-spacing-5);
-  }
 }
diff --git a/packages/css/label.css b/packages/css/label.css
index 952da6952c..6a0d9b1ef5 100644
--- a/packages/css/label.css
+++ b/packages/css/label.css
@@ -3,22 +3,7 @@
   display: inline-block;
   margin: 0;
   padding: 0;
-
-  @composes ds-label--md from './base/base.css';
-
-  font-weight: var(--ds-font-weight-medium);
-
-  &[data-size='xs'] {
-    @composes ds-label--xs from './base/base.css';
-  }
-
-  &[data-size='sm'] {
-    @composes ds-label--sm from './base/base.css';
-  }
-
-  &[data-size='lg'] {
-    @composes ds-label--lg from './base/base.css';
-  }
+  font-weight: var(--ds-font-weight-medium) !important; /* TODO: Fix */
 
   &[data-weight='semibold'] {
     font-weight: var(--ds-font-weight-semibold);
diff --git a/packages/css/list.css b/packages/css/list.css
index cb7a19b13c..fe8bee54c1 100644
--- a/packages/css/list.css
+++ b/packages/css/list.css
@@ -6,8 +6,6 @@
   margin: 0;
   padding-left: var(--dsc-list-padding-left);
 
-  @composes ds-body-text--md from './base/base.css';
-
   & > li + li {
     margin-top: var(--dsc-list-spacing);
   }
@@ -23,16 +21,4 @@
     content: '\200B';
     position: absolute;
   }
-
-  &[data-size='sm'] {
-    --dsc-list-padding-left: var(--ds-spacing-4);
-
-    @composes ds-body-text--sm from './base/base.css';
-  }
-
-  &[data-size='lg'] {
-    --dsc-list-spacing: var(--ds-spacing-4);
-
-    @composes ds-body-text--lg from './base/base.css';
-  }
 }
diff --git a/packages/css/pagination.css b/packages/css/pagination.css
index 262114e19e..0a813398b9 100644
--- a/packages/css/pagination.css
+++ b/packages/css/pagination.css
@@ -41,16 +41,6 @@
     }
   }
 
-  &[data-size='sm'] {
-    --dsc-pagination-gap: var(--ds-spacing-2);
-    --dsc-pagination-ellipsis-width: var(--ds-sizing-10);
-  }
-
-  &[data-size='lg'] {
-    --dsc-pagination-gap: var(--ds-spacing-6);
-    --dsc-pagination-ellipsis-width: var(--ds-sizing-14);
-  }
-
   &[data-compact] {
     --dsc-pagination-gap: var(--ds-spacing-0);
   }
diff --git a/packages/css/popover.css b/packages/css/popover.css
index f342e1114b..2640cf64bf 100644
--- a/packages/css/popover.css
+++ b/packages/css/popover.css
@@ -18,8 +18,6 @@
   padding: var(--dsc-popover-padding);
   position: fixed;
 
-  @composes ds-body-text--md from './base/base.css';
-
   &::before {
     background: var(--dsc-popover-background);
     border: inherit;
@@ -35,18 +33,6 @@
     width: var(--dsc-popover-arrow-size);
   }
 
-  &[data-size='sm'] {
-    --dsc-popover-padding: var(--ds-spacing-2) var(--ds-spacing-3);
-
-    @composes ds-body-text--sm from './base/base.css';
-  }
-
-  &[data-size='lg'] {
-    --dsc-popover-padding: var(--ds-spacing-3) var(--ds-spacing-5);
-
-    @composes ds-body-text--lg from './base/base.css';
-  }
-
   &[data-placement='top']::before {
     top: 100%;
     rotate: 45deg;
diff --git a/packages/css/spinner.css b/packages/css/spinner.css
index e7caad77af..06d82a6af3 100644
--- a/packages/css/spinner.css
+++ b/packages/css/spinner.css
@@ -13,7 +13,7 @@
     --dsc-spinner-stroke: var(--ds-color-accent-base-default);
   }
 
-  &[data-size='2xs'] {
+  /* &[data-size='2xs'] {
     --dsc-spinner-size: var(--ds-sizing-3);
   }
 
@@ -31,7 +31,7 @@
 
   &[data-size='xl'] {
     --dsc-spinner-size: var(--ds-sizing-22);
-  }
+  } */
 }
 
 .ds-spinner__background {
diff --git a/packages/css/table.css b/packages/css/table.css
index 2d433b180e..13ccab5003 100644
--- a/packages/css/table.css
+++ b/packages/css/table.css
@@ -19,8 +19,6 @@
   color: var(--dsc-table-color);
   width: 100%;
 
-  @composes ds-body-text--md from './base/base.css';
-
   & > :is(tbody, thead) > tr > :is(th, td) {
     background: var(--dsc-table-background);
     border-bottom: var(--dsc-table-border);
@@ -110,21 +108,6 @@
     }
   }
 
-  /**
-   * Sizes
-   */
-  &[data-size='sm'] {
-    --dsc-table-padding: var(--ds-spacing-1) var(--ds-spacing-3);
-
-    @composes ds-body-text--sm from './base/base.css';
-  }
-
-  &[data-size='lg'] {
-    --dsc-table-padding: var(--ds-spacing-3) var(--ds-spacing-3);
-
-    @composes ds-body-text--lg from './base/base.css';
-  }
-
   /**
    * Configurations
    */
diff --git a/packages/css/tabs.css b/packages/css/tabs.css
index af4b665671..12f1372025 100644
--- a/packages/css/tabs.css
+++ b/packages/css/tabs.css
@@ -5,22 +5,6 @@
   --dsc-tabs-content-padding: var(--ds-spacing-5);
   --dsc-tabs-content-color: var(--ds-color-neutral-text-default);
   --dsc-tabs-list-border-color: var(--ds-color-neutral-border-subtle);
-
-  @composes ds-body-text--short-md from './base/base.css';
-
-  &[data-size='sm'] {
-    --dsc-tabs-tab-padding: var(--ds-spacing-2) var(--ds-spacing-4);
-    --dsc-tabs-content-padding: var(--ds-spacing-4);
-
-    @composes ds-body-text--short-sm from './base/base.css';
-  }
-
-  &[data-size='lg'] {
-    --dsc-tabs-tab-padding: var(--ds-spacing-4) var(--ds-spacing-6);
-    --dsc-tabs-content-padding: var(--ds-spacing-6);
-
-    @composes ds-body-text--short-lg from './base/base.css';
-  }
 }
 
 .ds-tabs__panel {
diff --git a/packages/css/tag.css b/packages/css/tag.css
index 51abf4219c..780958f54d 100644
--- a/packages/css/tag.css
+++ b/packages/css/tag.css
@@ -15,22 +15,6 @@
   width: max-content;
   word-break: break-word;
 
-  @composes ds-body-text--short-md from './base/base.css';
-
-  &[data-size='sm'] {
-    --dsc-tag-padding: 0 var(--ds-spacing-2);
-    --dsc-tag-min-height: var(--ds-sizing-7);
-
-    @composes ds-body-text--short-sm from './base/base.css';
-  }
-
-  &[data-size='lg'] {
-    --dsc-tag-padding: 0 var(--ds-spacing-3);
-    --dsc-tag-min-height: var(--ds-sizing-9);
-
-    @composes ds-body-text--short-lg from './base/base.css';
-  }
-
   &[data-color='info'] {
     --dsc-tag-background: var(--ds-color-info-surface-default);
     --dsc-tag-color: var(--ds-color-info-text-default);
diff --git a/packages/css/tooltip.css b/packages/css/tooltip.css
index cc56d42579..2c907b6ed5 100644
--- a/packages/css/tooltip.css
+++ b/packages/css/tooltip.css
@@ -9,8 +9,6 @@
   box-sizing: border-box;
   color: var(--dsc-tooltip-color);
   padding: var(--dsc-tooltip-padding);
-
-  @composes ds-body-text--short-xs from './base/base.css';
 }
 
 .ds-tooltip__arrow {
diff --git a/packages/css/validation-message.css b/packages/css/validation-message.css
index 29ac46c55d..52df534b52 100644
--- a/packages/css/validation-message.css
+++ b/packages/css/validation-message.css
@@ -5,27 +5,6 @@
 
   margin: 0; /* Reset if rendered with <p> */
 
-  @composes ds-validation-message--md from './base/base.css';
-
-  &[data-size='xs'] {
-    --dsc-validation-message-icon-size: var(--ds-sizing-5);
-    --dsc-validation-message-gap: var(--ds-spacing-1);
-
-    @composes ds-validation-message--xs from './base/base.css';
-  }
-
-  &[data-size='sm'] {
-    --dsc-validation-message-icon-size: var(--ds-sizing-6);
-
-    @composes ds-validation-message--sm from './base/base.css';
-  }
-
-  &[data-size='lg'] {
-    --dsc-validation-message-icon-size: var(--ds-sizing-8);
-
-    @composes ds-validation-message--lg from './base/base.css';
-  }
-
   /* Only render error icon if the ValidationMessage actually contains an error message */
   &[data-error]:not(:empty) {
     color: var(--ds-color-danger-text-subtle);

From a0b4cb8d0d7fd27aea17e9488cb3a6b2ccc2cbaa Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Mon, 21 Oct 2024 12:32:37 +0200
Subject: [PATCH 06/29] fix(Button): adjust min-height

---
 packages/css/button.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/css/button.css b/packages/css/button.css
index ad74be8ab6..6df3e7e063 100644
--- a/packages/css/button.css
+++ b/packages/css/button.css
@@ -7,7 +7,7 @@
   --dsc-button-gap: var(--ds-spacing-2);
   --dsc-button-padding-block: var(--ds-spacing-2);
   --dsc-button-padding-inline: var(--ds-spacing-4);
-  --dsc-button-size: var(--ds-sizing-12);
+  --dsc-button-size: var(--ds-sizing-9);
 
   @composes ds-focus from './base/base.css';
 

From 06439c9648b45251230887c26ecb73828178f3be Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Tue, 22 Oct 2024 08:41:24 +0200
Subject: [PATCH 07/29] fix: start making sizing overview

---
 packages/css/accordion.css                    |  16 +--
 packages/css/badge.css                        |   1 +
 packages/css/button.css                       |  25 ++--
 packages/css/index.css                        |  80 ++++++++----
 packages/css/input.css                        |   9 +-
 packages/css/label.css                        |   2 +-
 packages/css/pagination.css                   |   8 +-
 .../src/components/Alert/Alert.stories.tsx    |   2 +-
 packages/react/src/components/Alert/Alert.tsx |   6 +-
 .../react/src/components/Avatar/Avatar.tsx    |   2 +-
 packages/react/src/components/Badge/Badge.tsx |   2 +-
 .../react/src/components/Button/Button.mdx    |   2 +-
 .../react/src/components/Button/Button.tsx    |   3 +-
 .../form/Textarea/Textarea.stories.tsx        |   1 -
 packages/react/stories/sizes.stories.tsx      | 114 ++++++++++++++++++
 15 files changed, 212 insertions(+), 61 deletions(-)
 create mode 100644 packages/react/stories/sizes.stories.tsx

diff --git a/packages/css/accordion.css b/packages/css/accordion.css
index 6c42790b51..060a2626c4 100644
--- a/packages/css/accordion.css
+++ b/packages/css/accordion.css
@@ -8,7 +8,8 @@
   --dsc-accordion-heading-background--hover: var(--ds-color-neutral-surface-default);
   --dsc-accordion-heading-background--open: var(--ds-color-neutral-background-subtle);
   --dsc-accordion-heading-background: var(--ds-color-neutral-background-default);
-  --dsc-accordion-padding: var(--ds-spacing-4);
+  --dsc-accordion-padding: var(--ds-spacing-2) var(--ds-spacing-4);
+  --dsc-accordion-size: var(--ds-sizing-14);
 
   &[data-border] > * {
     border: var(--dsc-accordion-border);
@@ -65,16 +66,19 @@
   box-sizing: border-box;
 
   & > :is(summary, u-summary) {
+    align-items: center;
     background: var(--dsc-accordion-heading-background);
     box-sizing: border-box;
     cursor: pointer;
+    display: flex;
     list-style: none;
+    min-height: var(--dsc-accordion-size);
+    gap: var(--dsc-accordion-chevron-gap);
     outline: none;
-    padding-block: var(--dsc-accordion-padding);
-    padding-inline: calc(var(--dsc-accordion-padding) + var(--dsc-accordion-chevron-size) + var(--dsc-accordion-chevron-gap)) var(--dsc-accordion-padding);
+    padding: var(--dsc-accordion-padding);
 
     @composes ds-focus from './base/base.css';
-    @composes ds-body-text--sm from './base/base.css';
+    /* @composes ds-body-text--sm from './base/base.css'; /* TODO fix using font sm */
 
     &:focus-visible {
       position: relative; /* Ensure foucs outline renders on top */
@@ -84,11 +88,9 @@
       background: currentcolor;
       border-radius: var(--ds-border-radius-md);
       content: '';
+      flex-shrink: 0;
       height: var(--dsc-accordion-chevron-size);
       mask: 50% / contain no-repeat var(--dsc-accordion-chevron-url);
-      position: absolute;
-      margin-inline: calc((var(--dsc-accordion-chevron-size) + var(--dsc-accordion-chevron-gap)) * -1); /* Using margin instead of top/left to avoid position: relative and to support dir="rtl" */
-
       width: var(--dsc-accordion-chevron-size);
     }
   }
diff --git a/packages/css/badge.css b/packages/css/badge.css
index 0458429aa5..7cefd8b711 100644
--- a/packages/css/badge.css
+++ b/packages/css/badge.css
@@ -7,6 +7,7 @@
   box-sizing: border-box;
   display: inline-flex;
   position: relative;
+  /* TODO fix using font sm */
 
   &::before {
     content: attr(data-count);
diff --git a/packages/css/button.css b/packages/css/button.css
index 6df3e7e063..59b99787ca 100644
--- a/packages/css/button.css
+++ b/packages/css/button.css
@@ -5,11 +5,8 @@
   --dsc-button-color: var(--ds-color-accent-contrast-default);
   --dsc-button-font-size: var(--ds-font-size-5);
   --dsc-button-gap: var(--ds-spacing-2);
-  --dsc-button-padding-block: var(--ds-spacing-2);
-  --dsc-button-padding-inline: var(--ds-spacing-4);
-  --dsc-button-size: var(--ds-sizing-9);
-
-  @composes ds-focus from './base/base.css';
+  --dsc-button-padding: var(--ds-spacing-2) var(--ds-spacing-4);
+  --dsc-button-size: var(--ds-sizing-11);
 
   align-items: center;
   background: var(--dsc-button-background);
@@ -19,19 +16,27 @@
   color: var(--dsc-button-color);
   cursor: pointer;
   font-family: inherit;
+  font-weight: var(--ds-font-weight-medium);
   gap: var(--dsc-button-gap);
   justify-content: center;
+  line-height: var(--ds-line-height-sm);
   min-height: var(--dsc-button-size);
   min-width: var(--dsc-button-size);
   outline: none;
-  padding: var(--dsc-button-padding-block) var(--dsc-button-padding-inline);
+  padding: var(--dsc-button-padding);
   text-align: inherit;
   text-decoration: none;
-  font-weight: var(--ds-font-weight-medium) !important; /* TODO: Fix */
 
-  & svg,
-  & img {
+  @composes ds-focus from './base/base.css';
+
+  &:not([data-size]) {
+    font-size: inherit; /* Ensure inheriting font-size */
+  }
+
+  & :where(img, svg) {
     flex-shrink: 0;
+    font-size: 1.25em;
+    margin-block: -99em; /* Prevent large icon from crashing with padding */
   }
 
   &:focus-visible {
@@ -43,7 +48,7 @@
   }
 
   &[data-icon] {
-    padding-inline: var(--dsc-button-padding-block);
+    padding: 0;
   }
 
   &[data-fullwidth] {
diff --git a/packages/css/index.css b/packages/css/index.css
index 70ecc00318..31de4df651 100644
--- a/packages/css/index.css
+++ b/packages/css/index.css
@@ -55,32 +55,75 @@ Array.from(
     .join('\n')
 */
 
-[data-size='xs'] {
-  @composes ds-body-text--xs from './base/base.css';
-}
+/* TODO: Move */
+@layer ds.base {
+  [data-size='xs'] {
+    @composes ds-body-text--sm from './base/base.css';
+  }
 
-[data-size='sm'] {
-  @composes ds-body-text--sm from './base/base.css';
-}
+  [data-size='sm'] {
+    @composes ds-body-text--sm from './base/base.css';
+  }
 
-[data-size='md'] {
-  @composes ds-body-text--md from './base/base.css';
-}
+  body,
+  [data-size='md'] {
+    @composes ds-body-text--md from './base/base.css';
+  }
 
-[data-size='lg'] {
-  @composes ds-body-text--lg from './base/base.css';
+  [data-size='lg'] {
+    @composes ds-body-text--lg from './base/base.css';
+  }
 }
 
+/* TODO: Move */
 :root {
   --ds-sizing-scale-base: var(--ds-font-size-5);
   --ds-sizing-scale-min: 0.125rem; /* Minimum 2px steps */
   --ds-sizing-scale: 0.25rem; /* Default 4px steps */
   --ds-sizing-adjust: calc((var(--ds-sizing-scale-base) - 1em) * 0.5); /* Fallback if not supporting round() */
-
-  /* stylelint-disable-next-line declaration-block-no-duplicate-custom-properties */
   --ds-sizing-adjust: round(up, calc((var(--ds-sizing-scale-base) - 1em) * 0.5), 0.0625rem);
 
   /* Sizing */
+  --ds-sizing-1: round(down, 0.25em, 0.0625rem);
+  --ds-sizing-2: round(down, 0.5em, 0.0625rem);
+  --ds-sizing-3: round(down, 0.75em, 0.0625rem);
+  --ds-sizing-4: round(down, 1em, 0.0625rem);
+  --ds-sizing-5: round(down, 1.25em, 0.0625rem);
+  --ds-sizing-6: round(down, 1.5em, 0.0625rem);
+  --ds-sizing-7: round(down, 1.75em, 0.0625rem);
+  --ds-sizing-8: round(down, 2em, 0.0625rem);
+  --ds-sizing-9: round(down, 2.25em, 0.0625rem);
+  --ds-sizing-10: round(down, 2.5em, 0.0625rem);
+  --ds-sizing-11: round(down, 2.75em, 0.0625rem);
+  --ds-sizing-12: round(down, 3em, 0.0625rem);
+  --ds-sizing-13: round(down, 3.25em, 0.0625rem);
+  --ds-sizing-14: round(down, 3.5em, 0.0625rem);
+  --ds-sizing-15: round(down, 3.75em, 0.0625rem);
+  --ds-sizing-16: round(down, 4em, 0.0625rem);
+  --ds-sizing-17: round(down, 4.25em, 0.0625rem);
+  --ds-sizing-18: round(down, 4.5em, 0.0625rem);
+  --ds-sizing-19: round(down, 4.75em, 0.0625rem);
+  --ds-sizing-20: round(down, 5em, 0.0625rem);
+  --ds-sizing-21: round(down, 5.25em, 0.0625rem);
+  --ds-sizing-22: round(down, 5.5em, 0.0625rem);
+  --ds-sizing-23: round(down, 5.75em, 0.0625rem);
+  --ds-sizing-24: round(down, 6em, 0.0625rem);
+  --ds-sizing-25: round(down, 6.25em, 0.0625rem);
+  --ds-sizing-26: round(down, 6.5em, 0.0625rem);
+  --ds-sizing-27: round(down, 6.75em, 0.0625rem);
+  --ds-sizing-28: round(down, 7em, 0.0625rem);
+  --ds-sizing-29: round(down, 7.25em, 0.0625rem);
+  --ds-sizing-30: round(down, 7.5em, 0.0625rem);
+
+  /*--ds-sizing-1: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 1 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 1));
+  --ds-sizing-2: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 2 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 2));
+  --ds-sizing-3: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 3 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 3));
+  --ds-sizing-4: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 4 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 4));
+  --ds-sizing-5: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 5 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 5));
+  --ds-sizing-6: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 6 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 6));
+  --ds-sizing-7: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 7 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 7));
+  --ds-sizing-8: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 8 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 8));
+  --ds-sizing-9: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 9 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 9));
   --ds-sizing-10: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 10 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 10));
   --ds-sizing-11: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 11 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 11));
   --ds-sizing-12: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 12 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 12));
@@ -91,7 +134,6 @@ Array.from(
   --ds-sizing-17: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 17 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 17));
   --ds-sizing-18: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 18 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 18));
   --ds-sizing-19: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 19 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 19));
-  --ds-sizing-1: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 1 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 1));
   --ds-sizing-20: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 20 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 20));
   --ds-sizing-21: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 21 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 21));
   --ds-sizing-22: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 22 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 22));
@@ -102,15 +144,7 @@ Array.from(
   --ds-sizing-27: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 27 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 27));
   --ds-sizing-28: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 28 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 28));
   --ds-sizing-29: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 29 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 29));
-  --ds-sizing-2: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 2 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 2));
-  --ds-sizing-30: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 30 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 30));
-  --ds-sizing-3: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 3 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 3));
-  --ds-sizing-4: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 4 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 4));
-  --ds-sizing-5: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 5 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 5));
-  --ds-sizing-6: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 6 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 6));
-  --ds-sizing-7: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 7 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 7));
-  --ds-sizing-8: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 8 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 8));
-  --ds-sizing-9: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 9 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 9));
+  --ds-sizing-30: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 30 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 30));*/
 
   /* Spacing */
   --ds-spacing-10: var(--ds-sizing-10);
diff --git a/packages/css/input.css b/packages/css/input.css
index e6d24ca450..82c193c6e8 100644
--- a/packages/css/input.css
+++ b/packages/css/input.css
@@ -38,14 +38,19 @@
   box-sizing: border-box;
   color: var(--dsc-input-color);
   font-family: inherit;
-  height: var(--dsc-input-size);
+  line-height: var(--ds-line-height-sm);
   margin: 0; /* Reset native margin on checkbox and radio */
   max-width: 100%; /* Ensure input does not grow outside bounds even with a high value in size="" or cols="" */
+  min-height: var(--dsc-input-size);
   padding: var(--dsc-input-padding);
   position: relative; /* Ensure foucs outline renders on top */
 
   @composes ds-focus from './base/base.css';
 
+  &:not([data-size]) {
+    font-size: inherit; /* Ensure inheriting font-size */
+  }
+
   /* Change switch background with low specificity to allow states to overwrite */
   &:where([role='switch']) {
     --dsc-input-background: var(--dsc-input-background--switch);
@@ -202,8 +207,6 @@ label:has(input:is([type='checkbox'], [type='radio']):not(:disabled, [aria-disab
     position: absolute;
   }
 
-  @composes ds-body-text--md from './base/base.css';
-
   /* Using double selector to ensure we win specificity */
   .ds-input.ds-input {
     align-self: stretch;
diff --git a/packages/css/label.css b/packages/css/label.css
index 6a0d9b1ef5..f268be3d05 100644
--- a/packages/css/label.css
+++ b/packages/css/label.css
@@ -3,7 +3,7 @@
   display: inline-block;
   margin: 0;
   padding: 0;
-  font-weight: var(--ds-font-weight-medium) !important; /* TODO: Fix */
+  font-weight: var(--ds-font-weight-medium);
 
   &[data-weight='semibold'] {
     font-weight: var(--ds-font-weight-semibold);
diff --git a/packages/css/pagination.css b/packages/css/pagination.css
index 0a813398b9..6569328c5b 100644
--- a/packages/css/pagination.css
+++ b/packages/css/pagination.css
@@ -25,14 +25,10 @@
       rotate: 180deg;
     }
 
-    /* Makes page buttons square */
-    & > li:not(:first-child, :last-child) > :is(a, button) {
-      --dsc-button-padding-inline: var(--dsc-button-padding-block);
-    }
-
     /* Style as non-interactive ellipsis when empty */
-    & > li > [aria-hidden='true'] {
+    & > li > :empty {
       color: inherit;
+      padding: 0; /* Make ellipsis element square */
       pointer-events: none;
 
       &::before {
diff --git a/packages/react/src/components/Alert/Alert.stories.tsx b/packages/react/src/components/Alert/Alert.stories.tsx
index 115e105244..5564cda053 100644
--- a/packages/react/src/components/Alert/Alert.stories.tsx
+++ b/packages/react/src/components/Alert/Alert.stories.tsx
@@ -20,7 +20,7 @@ export const Preview: Story = (args) => <Alert {...args}></Alert>;
 
 Preview.args = {
   color: 'info',
-  size: 'md',
+  size: undefined,
   children: 'En beskjed det er viktig at brukeren ser',
 };
 
diff --git a/packages/react/src/components/Alert/Alert.tsx b/packages/react/src/components/Alert/Alert.tsx
index bbfe42ca25..116ebec6d3 100644
--- a/packages/react/src/components/Alert/Alert.tsx
+++ b/packages/react/src/components/Alert/Alert.tsx
@@ -11,10 +11,8 @@ export type AlertProps = {
   /**
    * Sets the size of the alert.
    * Does not affect font size.
-   *
-   * @default md
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: undefined | 'sm' | 'md' | 'lg';
 } & HTMLAttributes<HTMLDivElement>;
 
 /**
@@ -23,7 +21,7 @@ export type AlertProps = {
  * <Alert color='info'>Dette er en informasjonsmelding</Alert>
  */
 export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
-  { color = 'info', size = 'md', className, ...rest },
+  { color = 'info', size, className, ...rest },
   ref,
 ) {
   return (
diff --git a/packages/react/src/components/Avatar/Avatar.tsx b/packages/react/src/components/Avatar/Avatar.tsx
index 6a4b0fe18d..4ab0181f73 100644
--- a/packages/react/src/components/Avatar/Avatar.tsx
+++ b/packages/react/src/components/Avatar/Avatar.tsx
@@ -54,7 +54,7 @@ export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(function Avatar(
   {
     'aria-label': ariaLabel,
     color = 'accent',
-    size = 'md',
+    size,
     variant = 'circle',
     className,
     children,
diff --git a/packages/react/src/components/Badge/Badge.tsx b/packages/react/src/components/Badge/Badge.tsx
index 8bed93944a..99215a8787 100644
--- a/packages/react/src/components/Badge/Badge.tsx
+++ b/packages/react/src/components/Badge/Badge.tsx
@@ -63,7 +63,7 @@ export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(
     maxCount,
     overlap = 'rectangle',
     placement = 'top-right',
-    size = 'md',
+    size,
     ...rest
   },
   ref,
diff --git a/packages/react/src/components/Button/Button.mdx b/packages/react/src/components/Button/Button.mdx
index affe2cdf48..7dd8229c9c 100644
--- a/packages/react/src/components/Button/Button.mdx
+++ b/packages/react/src/components/Button/Button.mdx
@@ -107,7 +107,7 @@ Som regel er det **venstre** som er den beste plasseringen, men det finnes unnta
 
 <br />
 
-### Størrelse på ikon
+### Størrelse på ikon TODO: Remove
 
 Når du bruker ikon må du sette størrelsen på ikonet selv. Vi anbefaler å bruke disse størrelsene for [Aksel](https://aksel.nav.no/ikoner) sine ikoner:
 
diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx
index c39c955474..59adebbf7c 100644
--- a/packages/react/src/components/Button/Button.tsx
+++ b/packages/react/src/components/Button/Button.tsx
@@ -16,7 +16,6 @@ export type ButtonProps = {
   color?: 'accent' | 'neutral' | 'danger';
   /**
    * Size
-   * @default md
    */
   size?: 'sm' | 'md' | 'lg';
   /** Toggle icon only styling, pass icon as children
@@ -53,7 +52,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       color = 'accent',
       icon = false,
       loading = false,
-      size = 'md',
+      size,
       variant = 'primary',
       ...rest
     },
diff --git a/packages/react/src/components/form/Textarea/Textarea.stories.tsx b/packages/react/src/components/form/Textarea/Textarea.stories.tsx
index 9472b2dfbf..c56d59d4d3 100644
--- a/packages/react/src/components/form/Textarea/Textarea.stories.tsx
+++ b/packages/react/src/components/form/Textarea/Textarea.stories.tsx
@@ -62,7 +62,6 @@ export const Preview: Story = {
 
 export const FullWidth: Story = {
   args: {
-    rows: 10,
     cols: 40,
     id: 'my-textarea',
   },
diff --git a/packages/react/stories/sizes.stories.tsx b/packages/react/stories/sizes.stories.tsx
new file mode 100644
index 0000000000..150d147178
--- /dev/null
+++ b/packages/react/stories/sizes.stories.tsx
@@ -0,0 +1,114 @@
+import { PrinterSmallIcon } from '@navikt/aksel-icons';
+import type { Meta, StoryFn } from '@storybook/react';
+
+import {
+  Accordion,
+  Alert,
+  Avatar,
+  Button,
+  Card,
+  Checkbox,
+  Combobox,
+  Divider,
+  Heading,
+  Link,
+  Pagination,
+  Paragraph,
+  Radio,
+  Search,
+  Select,
+  Switch,
+  Table,
+  Tabs,
+  Tag,
+  Textfield,
+  ToggleGroup,
+  Tooltip,
+} from '../src';
+
+export default {
+  title: 'Sizes',
+  parameters: {
+    layout: 'padded',
+  },
+} as Meta;
+
+export const Sizes: StoryFn = () => (
+  <div
+    style={{
+      display: 'grid',
+      alignItems: 'start',
+      gridTemplateColumns: 'repeat(3, 1fr)',
+      gap: '1rem',
+      maxWidth: '90vw',
+    }}
+  >
+    <Accordion data-size='sm'>
+      <Accordion.Item>
+        <Accordion.Heading>
+          Hvem kan registrere seg i Frivillighetsregisteret?
+        </Accordion.Heading>
+        <Accordion.Content>
+          For å kunne bli registrert i Frivillighetsregisteret, må
+          organisasjonen drive frivillig virksomhet. Det er bare foreninger,
+          stiftelser og aksjeselskap som kan registreres. Virksomheten kan ikke
+          dele ut midler til fysiske personer. Virksomheten må ha et styre.
+        </Accordion.Content>
+      </Accordion.Item>
+    </Accordion>
+    <Accordion data-size='md'>
+      <Accordion.Item>
+        <Accordion.Heading>
+          Hvem kan registrere seg i Frivillighetsregisteret?
+        </Accordion.Heading>
+        <Accordion.Content>
+          For å kunne bli registrert i Frivillighetsregisteret, må
+          organisasjonen drive frivillig virksomhet. Det er bare foreninger,
+          stiftelser og aksjeselskap som kan registreres. Virksomheten kan ikke
+          dele ut midler til fysiske personer. Virksomheten må ha et styre.
+        </Accordion.Content>
+      </Accordion.Item>
+    </Accordion>
+    <Accordion data-size='lg'>
+      <Accordion.Item>
+        <Accordion.Heading>
+          Hvem kan registrere seg i Frivillighetsregisteret?
+        </Accordion.Heading>
+        <Accordion.Content>
+          For å kunne bli registrert i Frivillighetsregisteret, må
+          organisasjonen drive frivillig virksomhet. Det er bare foreninger,
+          stiftelser og aksjeselskap som kan registreres. Virksomheten kan ikke
+          dele ut midler til fysiske personer. Virksomheten må ha et styre.
+        </Accordion.Content>
+      </Accordion.Item>
+    </Accordion>
+    <Alert size='sm'>Dette er en alert</Alert>
+    <Alert size='md'>Dette er en alert</Alert>
+    <Alert size='lg'>Dette er en alert</Alert>
+    <Avatar size='xs' aria-label='Jan Daniel'>
+      JD
+    </Avatar>
+    <Avatar size='sm' aria-label='Jan Daniel'>
+      JD
+    </Avatar>
+    <Avatar size='md' aria-label='Jan Daniel'>
+      JD
+    </Avatar>
+    <div>
+      <Button size='sm'>
+        <PrinterSmallIcon />
+        Klikk her
+      </Button>
+    </div>
+    <div>
+      <Button size='md'>
+        <PrinterSmallIcon /> Klikk her
+      </Button>
+    </div>
+    <div>
+      <Button size='lg'>
+        <PrinterSmallIcon /> Klikk her
+      </Button>
+    </div>
+  </div>
+);

From 1ec808dcdd05efec3b8f800d1ae9b1532810ba36 Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Tue, 22 Oct 2024 11:00:02 +0200
Subject: [PATCH 08/29] docs: implement sizes page

---
 packages/css/avatar.css                       |   2 +-
 packages/css/card.css                         |  11 +-
 packages/css/index.css                        |   2 +-
 packages/css/paragraph.css                    |   2 -
 packages/css/tag.css                          |   2 +-
 .../react/src/components/Button/Button.tsx    |   3 +-
 .../components/ErrorSummary/ErrorSummary.tsx  |   2 +-
 .../src/components/HelpText/HelpText.tsx      |   4 +-
 packages/react/src/components/Label/Label.tsx |   7 +-
 packages/react/src/components/List/Lists.tsx  |   6 +-
 .../src/components/Pagination/Pagination.tsx  |  25 +-
 .../Pagination/PaginationButton.tsx           |   6 +-
 .../src/components/Paragraph/Paragraph.tsx    |   8 +-
 .../react/src/components/Popover/Popover.tsx  |   6 +-
 .../src/components/Table/Table.stories.tsx    | 213 +++---
 packages/react/src/components/Table/Table.tsx |   6 +-
 packages/react/src/components/Tabs/Tabs.tsx   |   6 +-
 packages/react/src/components/Tag/Tag.tsx     |   6 +-
 .../components/ToggleGroup/ToggleGroup.tsx    |  21 +-
 .../ToggleGroup/ToggleGroupItem.tsx           |   3 +-
 .../components/Tooltip/Tooltip.stories.tsx    |  15 +-
 .../ValidationMessage/ValidationMessage.tsx   |   7 +-
 .../react/src/components/form/Input/Input.tsx |   6 +-
 .../components/loaders/Spinner/Spinner.tsx    |   7 +-
 packages/react/stories/sizes.stories.tsx      | 719 ++++++++++++++++--
 25 files changed, 816 insertions(+), 279 deletions(-)

diff --git a/packages/css/avatar.css b/packages/css/avatar.css
index 8a0f36cddc..5694a2b043 100644
--- a/packages/css/avatar.css
+++ b/packages/css/avatar.css
@@ -1,7 +1,7 @@
 .ds-avatar {
   --dsc-avatar-background: var(--ds-color-accent-base-default);
   --dsc-avatar-color: var(--ds-color-accent-contrast-default);
-  --dsc-avatar-size: var(--ds-sizing-12);
+  --dsc-avatar-size: var(--ds-sizing-8);
   --dsc-avatar-padding: var(--ds-spacing-2);
   --dsc-avatar-border-radius: 50%;
 
diff --git a/packages/css/card.css b/packages/css/card.css
index 40419ac7f5..e5527764ef 100644
--- a/packages/css/card.css
+++ b/packages/css/card.css
@@ -8,15 +8,22 @@
   --dsc-card-gap: 1rem;
   --dsc-card-padding: var(--ds-spacing-6);
 
-  all: unset; /* Reset if <button> */
-  display: block;
   background: var(--dsc-card-background);
   border-radius: min(1rem, var(--ds-border-radius-md));
   border: var(--dsc-card-border);
   box-sizing: border-box;
   color: var(--dsc-card-color);
+  display: block;
+  font-family: inherit;
+  line-height: inherit;
+  margin: 0;
   overflow: clip; /* Needed to clip media elements and and Card.Block */
   padding: var(--dsc-card-padding);
+  text-align: inherit;
+
+  &:not([data-size]) {
+    font-size: inherit; /* Ensure inherits size when <button> */
+  }
 
   /* Style link in heading, or heading when Card is anchor */
   :is(h1, h2, h3, h4, h5, h6) a:any-link /* Using :any-link to target both a and a:visited */,
diff --git a/packages/css/index.css b/packages/css/index.css
index 31de4df651..4920b2c785 100644
--- a/packages/css/index.css
+++ b/packages/css/index.css
@@ -58,7 +58,7 @@ Array.from(
 /* TODO: Move */
 @layer ds.base {
   [data-size='xs'] {
-    @composes ds-body-text--sm from './base/base.css';
+    @composes ds-body-text--xs from './base/base.css';
   }
 
   [data-size='sm'] {
diff --git a/packages/css/paragraph.css b/packages/css/paragraph.css
index 52ac9b10a3..d164a8a540 100644
--- a/packages/css/paragraph.css
+++ b/packages/css/paragraph.css
@@ -1,8 +1,6 @@
 .ds-paragraph {
   margin: 0;
 
-  @composes ds-body-text--md from './base/base.css';
-
   &[data-size='xs'] {
     @composes ds-body-text--xs from './base/base.css';
   }
diff --git a/packages/css/tag.css b/packages/css/tag.css
index 780958f54d..c42924d8de 100644
--- a/packages/css/tag.css
+++ b/packages/css/tag.css
@@ -9,7 +9,7 @@
   border-radius: min(1rem, var(--ds-border-radius-sm));
   box-sizing: border-box;
   color: var(--dsc-tag-color);
-  display: flex;
+  display: inline-flex;
   min-height: var(--dsc-tag-min-height);
   padding: var(--dsc-tag-padding);
   width: max-content;
diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx
index 59adebbf7c..b525257c05 100644
--- a/packages/react/src/components/Button/Button.tsx
+++ b/packages/react/src/components/Button/Button.tsx
@@ -16,8 +16,9 @@ export type ButtonProps = {
   color?: 'accent' | 'neutral' | 'danger';
   /**
    * Size
+   * @default undefined
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: undefined | 'sm' | 'md' | 'lg';
   /** Toggle icon only styling, pass icon as children
    * @default false
    */
diff --git a/packages/react/src/components/ErrorSummary/ErrorSummary.tsx b/packages/react/src/components/ErrorSummary/ErrorSummary.tsx
index 2df4ca7e4e..e27048dbe2 100644
--- a/packages/react/src/components/ErrorSummary/ErrorSummary.tsx
+++ b/packages/react/src/components/ErrorSummary/ErrorSummary.tsx
@@ -24,7 +24,7 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
   function ErrorSummary(
     {
       className,
-      size = 'md',
+      size,
       role = 'alert',
       'aria-live': ariaLive = 'polite',
       'aria-relevant': ariaRelevant = 'all',
diff --git a/packages/react/src/components/HelpText/HelpText.tsx b/packages/react/src/components/HelpText/HelpText.tsx
index fcd96cde35..81b30608d8 100644
--- a/packages/react/src/components/HelpText/HelpText.tsx
+++ b/packages/react/src/components/HelpText/HelpText.tsx
@@ -12,7 +12,7 @@ export type HelpTextProps = {
   'aria-label': string;
   /**
    * Size of the helptext
-   * @default md
+   * @default undefined
    */
   size?: PopoverProps['size'];
   /**
@@ -24,7 +24,7 @@ export type HelpTextProps = {
 
 export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
   function HelpText(
-    { placement = 'right', size = 'md', className, children, ...rest },
+    { placement = 'right', size, className, children, ...rest },
     ref,
   ) {
     return (
diff --git a/packages/react/src/components/Label/Label.tsx b/packages/react/src/components/Label/Label.tsx
index 0c41dd2f66..36fd039b6e 100644
--- a/packages/react/src/components/Label/Label.tsx
+++ b/packages/react/src/components/Label/Label.tsx
@@ -3,12 +3,13 @@ import cl from 'clsx/lite';
 import type { LabelHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
 
+/* TODO: Remove size? */
 export type LabelProps = {
   /**
    * Changes text sizing
-   * @default md
+   * @default undefined
    */
-  size?: 'xs' | 'sm' | 'md' | 'lg';
+  size?: undefined | 'xs' | 'sm' | 'md' | 'lg';
   /**
    * Adjusts font weight. Use this when you have a label hierarchy, such as checkboxes/radios in a fieldset
    * @default 'medium'
@@ -28,7 +29,7 @@ export type LabelProps = {
  * <Label size='lg'>Label</Label>
  */
 export const Label = forwardRef<HTMLLabelElement, LabelProps>(function Label(
-  { className, size = 'md', weight = 'medium', asChild, ...rest },
+  { className, size, weight = 'medium', asChild, ...rest },
   ref,
 ) {
   const Component = asChild ? Slot : 'label';
diff --git a/packages/react/src/components/List/Lists.tsx b/packages/react/src/components/List/Lists.tsx
index 83b76dc662..6b23ab3ecb 100644
--- a/packages/react/src/components/List/Lists.tsx
+++ b/packages/react/src/components/List/Lists.tsx
@@ -11,10 +11,10 @@ type ListBaseProps = {
   asChild?: boolean;
   /**
    * Changes text sizing
-   * @default md
+   * @default undefined
    *
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: undefined | 'sm' | 'md' | 'lg';
 };
 
 export type ListUnorderedProps = ListBaseProps &
@@ -25,7 +25,7 @@ export type ListOrderedProps = ListBaseProps &
 
 const render = <T extends HTMLElement>(
   tagName: string,
-  { asChild, className, size = 'md', ...rest }: ListOrderedProps,
+  { asChild, className, size, ...rest }: ListOrderedProps,
   ref: ForwardedRef<T>,
 ) => {
   const Component = asChild ? Slot : tagName;
diff --git a/packages/react/src/components/Pagination/Pagination.tsx b/packages/react/src/components/Pagination/Pagination.tsx
index 42ed4ecd78..1900d08643 100644
--- a/packages/react/src/components/Pagination/Pagination.tsx
+++ b/packages/react/src/components/Pagination/Pagination.tsx
@@ -1,12 +1,8 @@
 import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
-import { createContext, forwardRef } from 'react';
+import { forwardRef } from 'react';
 import type { HTMLAttributes } from 'react';
 
-export const PaginationContext = createContext({
-  size: 'md' as NonNullable<PaginationProps['size']>,
-});
-
 export type PaginationProps = {
   /**
    * Sets the screen reader label for the Pagination area
@@ -16,7 +12,7 @@ export type PaginationProps = {
   /** Sets the size of the component
    * @default md
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: undefined | 'sm' | 'md' | 'lg';
   /**
    * Change the default rendered element for the one passed as a child, merging their props and behavior.
    * @default false
@@ -30,7 +26,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
       'aria-label': ariaLabel = 'Sidenavigering',
       asChild,
       className,
-      size = 'md',
+      size,
       ...rest
     },
     ref,
@@ -38,14 +34,13 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
     const Component = asChild ? Slot : 'nav';
 
     return (
-      <PaginationContext.Provider value={{ size }}>
-        <Component
-          aria-label={ariaLabel}
-          className={cl('ds-pagination', className)}
-          ref={ref}
-          {...rest}
-        />
-      </PaginationContext.Provider>
+      <Component
+        aria-label={ariaLabel}
+        className={cl('ds-pagination', className)}
+        data-size={size}
+        ref={ref}
+        {...rest}
+      />
     );
   },
 );
diff --git a/packages/react/src/components/Pagination/PaginationButton.tsx b/packages/react/src/components/Pagination/PaginationButton.tsx
index aa579cb133..d62a6151ac 100644
--- a/packages/react/src/components/Pagination/PaginationButton.tsx
+++ b/packages/react/src/components/Pagination/PaginationButton.tsx
@@ -2,8 +2,6 @@ import { type AriaAttributes, forwardRef, useContext } from 'react';
 
 import { Button, type ButtonProps } from '../Button/Button';
 
-import { PaginationContext } from './Pagination';
-
 export type PaginationButtonProps = {
   /**
    * Toggle button as active
@@ -16,7 +14,5 @@ export const PaginationButton = forwardRef<
   HTMLButtonElement,
   PaginationButtonProps
 >(function PaginationButton(rest, ref) {
-  const { size } = useContext(PaginationContext);
-
-  return <Button ref={ref} size={size} {...rest} />;
+  return <Button ref={ref} {...rest} />;
 });
diff --git a/packages/react/src/components/Paragraph/Paragraph.tsx b/packages/react/src/components/Paragraph/Paragraph.tsx
index 87f6114d1f..d649e3e716 100644
--- a/packages/react/src/components/Paragraph/Paragraph.tsx
+++ b/packages/react/src/components/Paragraph/Paragraph.tsx
@@ -6,11 +6,9 @@ import { forwardRef } from 'react';
 export type ParagraphProps = {
   /**
    * Changes text sizing
-   *
-   * @default 'md'
-   *
+   * @default undefined
    */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  size?: undefined | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
   /**
    *  Adjusts styling for paragraph length
    *  @default 'default'
@@ -30,7 +28,7 @@ export type ParagraphProps = {
  */
 export const Paragraph = forwardRef<HTMLParagraphElement, ParagraphProps>(
   function Paragraph(
-    { className, size = 'md', asChild, variant = 'default', ...rest },
+    { className, size, asChild, variant = 'default', ...rest },
     ref,
   ) {
     const Component = asChild ? Slot : 'p';
diff --git a/packages/react/src/components/Popover/Popover.tsx b/packages/react/src/components/Popover/Popover.tsx
index 13368a3d98..5a08d89be2 100644
--- a/packages/react/src/components/Popover/Popover.tsx
+++ b/packages/react/src/components/Popover/Popover.tsx
@@ -54,9 +54,9 @@ export type PopoverProps = {
   open?: boolean;
   /**
    * Size of the popover
-   * @default md
+   * @default undefined
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: undefined | 'sm' | 'md' | 'lg';
   /**
    * Callback when the popover wants to open.
    */
@@ -78,7 +78,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       onOpen,
       open,
       placement = 'top',
-      size = 'md',
+      size,
       variant = 'default',
       asChild = false,
       ...rest
diff --git a/packages/react/src/components/Table/Table.stories.tsx b/packages/react/src/components/Table/Table.stories.tsx
index 036ff0f955..f0489317a7 100644
--- a/packages/react/src/components/Table/Table.stories.tsx
+++ b/packages/react/src/components/Table/Table.stories.tsx
@@ -2,20 +2,9 @@ import type { Meta, StoryFn } from '@storybook/react';
 import type { ChangeEvent } from 'react';
 import { useEffect, useState } from 'react';
 
-import { Checkbox } from '../form/Checkbox';
-import { Textfield } from '../form/Textfield';
-
 import type { TableHeaderCellProps } from './TableHeaderCell';
 
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeaderCell,
-  TableRow,
-} from '.';
-import { Label } from '../Label';
+import { Checkbox, Label, Table, Textfield } from '../..';
 
 type Story = StoryFn<typeof Table>;
 
@@ -27,25 +16,25 @@ export default {
 export const Preview: Story = (args) => {
   return (
     <Table {...args}>
-      <TableHead>
-        <TableRow>
-          <TableHeaderCell>Header 1</TableHeaderCell>
-          <TableHeaderCell>Header 2</TableHeaderCell>
-          <TableHeaderCell>Header 3</TableHeaderCell>
-        </TableRow>
-      </TableHead>
-      <TableBody>
-        <TableRow>
-          <TableCell>Cell 1</TableCell>
-          <TableCell>Cell 2</TableCell>
-          <TableCell>Cell 3</TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>Cell 4</TableCell>
-          <TableCell>Cell 5</TableCell>
-          <TableCell>Cell 6</TableCell>
-        </TableRow>
-      </TableBody>
+      <Table.Head>
+        <Table.Row>
+          <Table.HeaderCell>Header 1</Table.HeaderCell>
+          <Table.HeaderCell>Header 2</Table.HeaderCell>
+          <Table.HeaderCell>Header 3</Table.HeaderCell>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        <Table.Row>
+          <Table.Cell>Cell 1</Table.Cell>
+          <Table.Cell>Cell 2</Table.Cell>
+          <Table.Cell>Cell 3</Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell>Cell 4</Table.Cell>
+          <Table.Cell>Cell 5</Table.Cell>
+          <Table.Cell>Cell 6</Table.Cell>
+        </Table.Row>
+      </Table.Body>
     </Table>
   );
 };
@@ -117,32 +106,32 @@ export const Sortable: Story = (args) => {
 
   return (
     <Table {...args}>
-      <TableHead>
-        <TableRow>
-          <TableHeaderCell
+      <Table.Head>
+        <Table.Row>
+          <Table.HeaderCell
             sort={sortField === 'navn' ? sortDirection : 'none'}
             onClick={() => handleSort('navn')}
           >
             Navn
-          </TableHeaderCell>
-          <TableHeaderCell>Epost</TableHeaderCell>
-          <TableHeaderCell
+          </Table.HeaderCell>
+          <Table.HeaderCell>Epost</Table.HeaderCell>
+          <Table.HeaderCell
             sort={sortField === 'telefon' ? sortDirection : 'none'}
             onClick={() => handleSort('telefon')}
           >
             Telefon
-          </TableHeaderCell>
-        </TableRow>
-      </TableHead>
-      <TableBody>
+          </Table.HeaderCell>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
         {sortedData.map((row) => (
-          <TableRow key={row.id}>
-            <TableCell>{row.navn}</TableCell>
-            <TableCell>{row.epost}</TableCell>
-            <TableCell>{row.telefon}</TableCell>
-          </TableRow>
+          <Table.Row key={row.id}>
+            <Table.Cell>{row.navn}</Table.Cell>
+            <Table.Cell>{row.epost}</Table.Cell>
+            <Table.Cell>{row.telefon}</Table.Cell>
+          </Table.Row>
         ))}
-      </TableBody>
+      </Table.Body>
     </Table>
   );
 };
@@ -151,22 +140,22 @@ export const StickyHeader: Story = (args) => {
   const rows = Array.from({ length: 50 }, (_, i) => i + 1);
   return (
     <Table {...args}>
-      <TableHead>
-        <TableRow>
-          <TableHeaderCell>Header 1</TableHeaderCell>
-          <TableHeaderCell>Header 2</TableHeaderCell>
-          <TableHeaderCell>Header 3</TableHeaderCell>
-        </TableRow>
-      </TableHead>
-      <TableBody>
+      <Table.Head>
+        <Table.Row>
+          <Table.HeaderCell>Header 1</Table.HeaderCell>
+          <Table.HeaderCell>Header 2</Table.HeaderCell>
+          <Table.HeaderCell>Header 3</Table.HeaderCell>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
         {rows.map((row) => (
-          <TableRow key={row}>
-            <TableCell>{`Cell ${row}1`}</TableCell>
-            <TableCell>{`Cell ${row}2`}</TableCell>
-            <TableCell>{`Cell ${row}3`}</TableCell>
-          </TableRow>
+          <Table.Row key={row}>
+            <Table.Cell>{`Cell ${row}1`}</Table.Cell>
+            <Table.Cell>{`Cell ${row}2`}</Table.Cell>
+            <Table.Cell>{`Cell ${row}3`}</Table.Cell>
+          </Table.Row>
         ))}
-      </TableBody>
+      </Table.Body>
     </Table>
   );
 };
@@ -221,9 +210,9 @@ export const WithFormElements: Story = (args) => {
 
   return (
     <Table {...args}>
-      <TableHead>
-        <TableRow>
-          <TableHeaderCell>
+      <Table.Head>
+        <Table.Row>
+          <Table.HeaderCell>
             <Label style={{ display: 'flex', gap: '8px' }}>
               <Checkbox
                 checked={headerChecked}
@@ -234,16 +223,16 @@ export const WithFormElements: Story = (args) => {
               />
               Selection
             </Label>
-          </TableHeaderCell>
-          <TableHeaderCell>Header 1</TableHeaderCell>
-          <TableHeaderCell>Header 2</TableHeaderCell>
-          <TableHeaderCell>Header 3</TableHeaderCell>
-        </TableRow>
-      </TableHead>
-      <TableBody>
+          </Table.HeaderCell>
+          <Table.HeaderCell>Header 1</Table.HeaderCell>
+          <Table.HeaderCell>Header 2</Table.HeaderCell>
+          <Table.HeaderCell>Header 3</Table.HeaderCell>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
         {rows.map((row) => (
-          <TableRow key={row}>
-            <TableCell>
+          <Table.Row key={row}>
+            <Table.Cell>
               <Checkbox
                 aria-label={`Checkbox ${row}`}
                 checked={!!checkedItems[row]}
@@ -251,15 +240,15 @@ export const WithFormElements: Story = (args) => {
                 onChange={(event) => handleCheckboxChange(event, row)}
                 size='sm'
               />
-            </TableCell>
-            <TableCell>1</TableCell>
-            <TableCell>2</TableCell>
-            <TableCell>
+            </Table.Cell>
+            <Table.Cell>1</Table.Cell>
+            <Table.Cell>2</Table.Cell>
+            <Table.Cell>
               <Textfield size='sm' aria-label={`Textfield ${row}`} />
-            </TableCell>
-          </TableRow>
+            </Table.Cell>
+          </Table.Row>
         ))}
-      </TableBody>
+      </Table.Body>
     </Table>
   );
 };
@@ -273,22 +262,22 @@ export const FixedTable: Story = (args) => {
         tableLayout: 'fixed',
       }}
     >
-      <TableHead>
-        <TableRow>
-          <TableHeaderCell>Header 1</TableHeaderCell>
-          <TableHeaderCell>Header 2</TableHeaderCell>
-          <TableHeaderCell>Header 3</TableHeaderCell>
-        </TableRow>
-      </TableHead>
-      <TableBody>
+      <Table.Head>
+        <Table.Row>
+          <Table.HeaderCell>Header 1</Table.HeaderCell>
+          <Table.HeaderCell>Header 2</Table.HeaderCell>
+          <Table.HeaderCell>Header 3</Table.HeaderCell>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
         {rows.map((row) => (
-          <TableRow key={row}>
-            <TableCell>{`Cell ${row}1`}</TableCell>
-            <TableCell>{`Cell ${row}2`}</TableCell>
-            <TableCell>{`Cell ${row}3`}</TableCell>
-          </TableRow>
+          <Table.Row key={row}>
+            <Table.Cell>{`Cell ${row}1`}</Table.Cell>
+            <Table.Cell>{`Cell ${row}2`}</Table.Cell>
+            <Table.Cell>{`Cell ${row}3`}</Table.Cell>
+          </Table.Row>
         ))}
-      </TableBody>
+      </Table.Body>
     </Table>
   );
 };
@@ -297,26 +286,26 @@ export const MultipleHeaderRows: Story = (args) => {
   const rows = Array.from({ length: 50 }, (_, i) => i + 1);
   return (
     <Table {...args}>
-      <TableHead>
-        <TableRow>
-          <TableHeaderCell>Header 1</TableHeaderCell>
-          <TableHeaderCell colSpan={2}>Header 2</TableHeaderCell>
-        </TableRow>
-        <TableRow>
-          <TableHeaderCell>Header 3</TableHeaderCell>
-          <TableHeaderCell>Header 4</TableHeaderCell>
-          <TableHeaderCell>Header 5</TableHeaderCell>
-        </TableRow>
-      </TableHead>
-      <TableBody>
+      <Table.Head>
+        <Table.Row>
+          <Table.HeaderCell>Header 1</Table.HeaderCell>
+          <Table.HeaderCell colSpan={2}>Header 2</Table.HeaderCell>
+        </Table.Row>
+        <Table.Row>
+          <Table.HeaderCell>Header 3</Table.HeaderCell>
+          <Table.HeaderCell>Header 4</Table.HeaderCell>
+          <Table.HeaderCell>Header 5</Table.HeaderCell>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
         {rows.map((row) => (
-          <TableRow key={row}>
-            <TableCell>{`Cell ${row}1`}</TableCell>
-            <TableCell>{`Cell ${row}2`}</TableCell>
-            <TableCell>{`Cell ${row}3`}</TableCell>
-          </TableRow>
+          <Table.Row key={row}>
+            <Table.Cell>{`Cell ${row}1`}</Table.Cell>
+            <Table.Cell>{`Cell ${row}2`}</Table.Cell>
+            <Table.Cell>{`Cell ${row}3`}</Table.Cell>
+          </Table.Row>
         ))}
-      </TableBody>
+      </Table.Body>
     </Table>
   );
 };
diff --git a/packages/react/src/components/Table/Table.tsx b/packages/react/src/components/Table/Table.tsx
index 7e590a39a5..211779413f 100644
--- a/packages/react/src/components/Table/Table.tsx
+++ b/packages/react/src/components/Table/Table.tsx
@@ -5,9 +5,9 @@ import type { TableHTMLAttributes } from 'react';
 export type TableProps = {
   /**
    * The size of the table
-   * @default md
+   * @default undefined
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: undefined | 'sm' | 'md' | 'lg';
   /**
    * If true, the table will have zebra striping
    * @default false
@@ -36,7 +36,7 @@ export const Table = forwardRef<HTMLTableElement, TableProps>(function Table(
     stickyHeader = false,
     border = false,
     hover = false,
-    size = 'md',
+    size,
     className,
     children,
     ...rest
diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/Tabs/Tabs.tsx
index 129dfbf441..7b52bbe540 100644
--- a/packages/react/src/components/Tabs/Tabs.tsx
+++ b/packages/react/src/components/Tabs/Tabs.tsx
@@ -11,9 +11,9 @@ export type TabsProps = {
   onChange?: (value: string) => void;
   /**
    * Changes items size and paddings
-   * @default md
+   * @default undefined
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: undefined | 'sm' | 'md' | 'lg';
 } & Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'>;
 
 export type ContextProps = {
@@ -42,7 +42,7 @@ export const Context = createContext<ContextProps>({});
  * ```
  */
 export const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(
-  { size = 'md', value, defaultValue, className, onChange, ...rest },
+  { size, value, defaultValue, className, onChange, ...rest },
   ref,
 ) {
   const isControlled = value !== undefined;
diff --git a/packages/react/src/components/Tag/Tag.tsx b/packages/react/src/components/Tag/Tag.tsx
index 8dc290aa72..a1a399935b 100644
--- a/packages/react/src/components/Tag/Tag.tsx
+++ b/packages/react/src/components/Tag/Tag.tsx
@@ -18,9 +18,9 @@ export type TagProps = {
     | 'brand3';
   /**
    * Size of the tag
-   * @default md
+   * @default undefined
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: undefined | 'sm' | 'md' | 'lg';
 } & HTMLAttributes<HTMLSpanElement>;
 
 /**
@@ -29,7 +29,7 @@ export type TagProps = {
  * <Tag color='success'>Success</Tag>
  */
 export const Tag = forwardRef<HTMLSpanElement, TagProps>(function Tag(
-  { size = 'md', color = 'neutral', className, ...rest },
+  { size, color = 'neutral', className, ...rest },
   ref,
 ) {
   return (
diff --git a/packages/react/src/components/ToggleGroup/ToggleGroup.tsx b/packages/react/src/components/ToggleGroup/ToggleGroup.tsx
index 7258c98e9c..9ce1cd368b 100644
--- a/packages/react/src/components/ToggleGroup/ToggleGroup.tsx
+++ b/packages/react/src/components/ToggleGroup/ToggleGroup.tsx
@@ -3,14 +3,12 @@ import type { HTMLAttributes } from 'react';
 import { createContext, forwardRef, useId, useState } from 'react';
 
 import { RovingFocusRoot } from '../../utilities/RovingFocus';
-import type { ButtonProps } from '../Button';
 
 export type ToggleGroupContextProps = {
   value?: string;
   defaultValue?: string;
   onChange?: (value: string) => void;
   name?: string;
-  size?: ButtonProps['size'];
 };
 
 export const ToggleGroupContext = createContext<ToggleGroupContextProps>({});
@@ -25,10 +23,10 @@ export type ToggleGroupProps = {
   /** Form element name */
   name?: string;
   /**
-   * Changes items size and paddings
-   * @default md
+   * Size
+   * @default undefined
    */
-  size?: ToggleGroupContextProps['size'];
+  size?: undefined | 'sm' | 'md' | 'lg';
 } & Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'onChange'>;
 
 /**
@@ -42,16 +40,7 @@ export type ToggleGroupProps = {
  */
 export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
   function ToggleGroup(
-    {
-      size = 'md',
-      children,
-      value,
-      defaultValue,
-      onChange,
-      name,
-      className,
-      ...rest
-    },
+    { size, children, value, defaultValue, onChange, name, className, ...rest },
     ref,
   ) {
     const nameId = useId();
@@ -76,12 +65,12 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
           defaultValue,
           name: name ?? `togglegroup-name-${nameId}`,
           onChange: onValueChange,
-          size,
         }}
       >
         <RovingFocusRoot asChild activeValue={value} orientation='ambiguous'>
           <div
             className={cl('ds-togglegroup', className)}
+            data-size={size}
             role='radiogroup'
             ref={ref}
             {...rest}
diff --git a/packages/react/src/components/ToggleGroup/ToggleGroupItem.tsx b/packages/react/src/components/ToggleGroup/ToggleGroupItem.tsx
index 2ad9681a3d..1e20d1d96c 100644
--- a/packages/react/src/components/ToggleGroup/ToggleGroupItem.tsx
+++ b/packages/react/src/components/ToggleGroup/ToggleGroupItem.tsx
@@ -22,13 +22,12 @@ export const ToggleGroupItem = forwardRef<
   HTMLButtonElement,
   ToggleGroupItemProps
 >(function ToggleGroupItem(rest, ref) {
-  const { active, size = 'md', buttonProps, value } = useToggleGroupItem(rest);
+  const { active, buttonProps, value } = useToggleGroupItem(rest);
 
   return (
     <RovingFocusItem asChild value={value}>
       <Button
         variant={active ? 'primary' : 'tertiary'}
-        size={size}
         ref={ref}
         {...rest}
         {...buttonProps}
diff --git a/packages/react/src/components/Tooltip/Tooltip.stories.tsx b/packages/react/src/components/Tooltip/Tooltip.stories.tsx
index 35d098ac95..88c9a44846 100644
--- a/packages/react/src/components/Tooltip/Tooltip.stories.tsx
+++ b/packages/react/src/components/Tooltip/Tooltip.stories.tsx
@@ -16,12 +16,15 @@ export default {
   },
 } satisfies Meta;
 
-export const Preview: Story = {
-  args: {
-    content: 'Tooltip text',
-    children: defaultChildren,
-    placement: 'top',
-  },
+export const Preview: StoryFn<typeof Tooltip> = (args) => (
+  <Tooltip {...args}>
+    <Button>My trigger</Button>
+  </Tooltip>
+);
+
+Preview.args = {
+  content: 'Tooltip text',
+  placement: 'top',
 };
 
 export const Placement: Story = {
diff --git a/packages/react/src/components/ValidationMessage/ValidationMessage.tsx b/packages/react/src/components/ValidationMessage/ValidationMessage.tsx
index f6c1871c9f..6c74e38adb 100644
--- a/packages/react/src/components/ValidationMessage/ValidationMessage.tsx
+++ b/packages/react/src/components/ValidationMessage/ValidationMessage.tsx
@@ -3,12 +3,13 @@ import cl from 'clsx/lite';
 import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
 
+/* TODO: Remove size? */
 export type ValidationMessageProps = {
   /**
    * Changes text sizing
-   * @default md
+   * @default undefined
    */
-  size?: 'xs' | 'sm' | 'md' | 'lg';
+  size?: undefined | 'xs' | 'sm' | 'md' | 'lg';
   /** Toggle error color */
   error?: boolean;
   /**
@@ -23,7 +24,7 @@ export const ValidationMessage = forwardRef<
   HTMLParagraphElement,
   ValidationMessageProps
 >(function ValidationMessage(
-  { size = 'md', className, asChild, error = true, ...rest },
+  { size, className, asChild, error = true, ...rest },
   ref,
 ) {
   const Component = asChild ? Slot : 'div';
diff --git a/packages/react/src/components/form/Input/Input.tsx b/packages/react/src/components/form/Input/Input.tsx
index f1aea063a0..5efaeccd66 100644
--- a/packages/react/src/components/form/Input/Input.tsx
+++ b/packages/react/src/components/form/Input/Input.tsx
@@ -6,9 +6,9 @@ type InputAttr = InputHTMLAttributes<HTMLInputElement>;
 export type InputProps = {
   /**
    * Changes field size and paddings
-   * @default md
+   * @default undefined
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: undefined | 'sm' | 'md' | 'lg';
   /** Supported `input` types */
   type?: InputAttr['type'];
   /** Exposes the HTML `size` attribute.
@@ -33,7 +33,7 @@ export type InputProps = {
  * ```
  */
 export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
-  { type = 'text', size = 'md', htmlSize, className, onClick, ...rest },
+  { type = 'text', size, htmlSize, className, onClick, ...rest },
   ref,
 ) {
   return (
diff --git a/packages/react/src/components/loaders/Spinner/Spinner.tsx b/packages/react/src/components/loaders/Spinner/Spinner.tsx
index 93ea490ae6..c0d03b4c84 100644
--- a/packages/react/src/components/loaders/Spinner/Spinner.tsx
+++ b/packages/react/src/components/loaders/Spinner/Spinner.tsx
@@ -8,10 +8,9 @@ export type SpinnerProps = {
   title: string;
   /**
    * Spinner size
-   *
-   * @default md
+   * @default undefined
    */
-  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  size?: undefined | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
   /**
    * Spinner appearance
    * @default neutral
@@ -23,7 +22,7 @@ export type SpinnerProps = {
 export const Spinner = ({
   title,
   color = 'neutral',
-  size = 'md',
+  size,
   className,
   ...rest
 }: SpinnerProps): JSX.Element => {
diff --git a/packages/react/stories/sizes.stories.tsx b/packages/react/stories/sizes.stories.tsx
index 150d147178..84f63e4950 100644
--- a/packages/react/stories/sizes.stories.tsx
+++ b/packages/react/stories/sizes.stories.tsx
@@ -1,22 +1,36 @@
-import { PrinterSmallIcon } from '@navikt/aksel-icons';
+import { DivideIcon, PrinterSmallIcon } from '@navikt/aksel-icons';
 import type { Meta, StoryFn } from '@storybook/react';
 
+import { useState } from 'react';
 import {
   Accordion,
   Alert,
   Avatar,
+  Badge,
+  Breadcrumbs,
   Button,
   Card,
   Checkbox,
+  Chip,
   Combobox,
   Divider,
+  Dropdown,
+  ErrorSummary,
+  Field,
   Heading,
+  HelpText,
+  Input,
+  Label,
   Link,
+  List,
+  Modal,
   Pagination,
   Paragraph,
+  Popover,
   Radio,
   Search,
   Select,
+  Spinner,
   Switch,
   Table,
   Tabs,
@@ -24,6 +38,8 @@ import {
   Textfield,
   ToggleGroup,
   Tooltip,
+  ValidationMessage,
+  usePagination,
 } from '../src';
 
 export default {
@@ -33,82 +49,627 @@ export default {
   },
 } as Meta;
 
-export const Sizes: StoryFn = () => (
-  <div
-    style={{
-      display: 'grid',
-      alignItems: 'start',
-      gridTemplateColumns: 'repeat(3, 1fr)',
-      gap: '1rem',
-      maxWidth: '90vw',
-    }}
-  >
-    <Accordion data-size='sm'>
-      <Accordion.Item>
-        <Accordion.Heading>
-          Hvem kan registrere seg i Frivillighetsregisteret?
-        </Accordion.Heading>
-        <Accordion.Content>
-          For å kunne bli registrert i Frivillighetsregisteret, må
-          organisasjonen drive frivillig virksomhet. Det er bare foreninger,
-          stiftelser og aksjeselskap som kan registreres. Virksomheten kan ikke
-          dele ut midler til fysiske personer. Virksomheten må ha et styre.
-        </Accordion.Content>
-      </Accordion.Item>
-    </Accordion>
-    <Accordion data-size='md'>
-      <Accordion.Item>
-        <Accordion.Heading>
-          Hvem kan registrere seg i Frivillighetsregisteret?
-        </Accordion.Heading>
-        <Accordion.Content>
-          For å kunne bli registrert i Frivillighetsregisteret, må
-          organisasjonen drive frivillig virksomhet. Det er bare foreninger,
-          stiftelser og aksjeselskap som kan registreres. Virksomheten kan ikke
-          dele ut midler til fysiske personer. Virksomheten må ha et styre.
-        </Accordion.Content>
-      </Accordion.Item>
-    </Accordion>
-    <Accordion data-size='lg'>
-      <Accordion.Item>
-        <Accordion.Heading>
-          Hvem kan registrere seg i Frivillighetsregisteret?
-        </Accordion.Heading>
-        <Accordion.Content>
-          For å kunne bli registrert i Frivillighetsregisteret, må
-          organisasjonen drive frivillig virksomhet. Det er bare foreninger,
-          stiftelser og aksjeselskap som kan registreres. Virksomheten kan ikke
-          dele ut midler til fysiske personer. Virksomheten må ha et styre.
-        </Accordion.Content>
-      </Accordion.Item>
-    </Accordion>
-    <Alert size='sm'>Dette er en alert</Alert>
-    <Alert size='md'>Dette er en alert</Alert>
-    <Alert size='lg'>Dette er en alert</Alert>
-    <Avatar size='xs' aria-label='Jan Daniel'>
-      JD
-    </Avatar>
-    <Avatar size='sm' aria-label='Jan Daniel'>
-      JD
-    </Avatar>
-    <Avatar size='md' aria-label='Jan Daniel'>
-      JD
-    </Avatar>
-    <div>
-      <Button size='sm'>
-        <PrinterSmallIcon />
-        Klikk her
-      </Button>
-    </div>
-    <div>
-      <Button size='md'>
-        <PrinterSmallIcon /> Klikk her
-      </Button>
-    </div>
-    <div>
-      <Button size='lg'>
-        <PrinterSmallIcon /> Klikk her
-      </Button>
+export const Sizes: StoryFn = () => {
+  const [currentPage, setCurrentPage] = useState(4);
+  const { pages, nextButtonProps, prevButtonProps } = usePagination({
+    currentPage,
+    onChange: console.log, // Open console to see this event
+    totalPages: 10,
+    showPages: 7,
+    setCurrentPage,
+  });
+
+  return (
+    <div
+      style={{
+        display: 'grid',
+        alignItems: 'start',
+        gridTemplateColumns: 'repeat(3, 1fr)',
+        gap: '2rem',
+        maxWidth: '90vw',
+      }}
+    >
+      <Accordion data-size='sm'>
+        <Accordion.Item>
+          <Accordion.Heading>
+            Hvem kan registrere seg i Frivillighetsregisteret?
+          </Accordion.Heading>
+          <Accordion.Content>
+            For å kunne bli registrert i Frivillighetsregisteret, må
+            organisasjonen drive frivillig virksomhet. Det er bare foreninger,
+            stiftelser og aksjeselskap som kan registreres. Virksomheten kan
+            ikke dele ut midler til fysiske personer. Virksomheten må ha et
+            styre.
+          </Accordion.Content>
+        </Accordion.Item>
+      </Accordion>
+      <Accordion data-size='md'>
+        <Accordion.Item>
+          <Accordion.Heading>
+            Hvem kan registrere seg i Frivillighetsregisteret?
+          </Accordion.Heading>
+          <Accordion.Content>
+            For å kunne bli registrert i Frivillighetsregisteret, må
+            organisasjonen drive frivillig virksomhet. Det er bare foreninger,
+            stiftelser og aksjeselskap som kan registreres. Virksomheten kan
+            ikke dele ut midler til fysiske personer. Virksomheten må ha et
+            styre.
+          </Accordion.Content>
+        </Accordion.Item>
+      </Accordion>
+      <Accordion data-size='lg'>
+        <Accordion.Item>
+          <Accordion.Heading>
+            Hvem kan registrere seg i Frivillighetsregisteret?
+          </Accordion.Heading>
+          <Accordion.Content>
+            For å kunne bli registrert i Frivillighetsregisteret, må
+            organisasjonen drive frivillig virksomhet. Det er bare foreninger,
+            stiftelser og aksjeselskap som kan registreres. Virksomheten kan
+            ikke dele ut midler til fysiske personer. Virksomheten må ha et
+            styre.
+          </Accordion.Content>
+        </Accordion.Item>
+      </Accordion>
+      <Alert size='sm'>Dette er en alert</Alert>
+      <Alert size='md'>Dette er en alert</Alert>
+      <Alert size='lg'>Dette er en alert</Alert>
+      <div>
+        <Avatar size='xs' aria-label='Jan Daniel'>
+          JD
+        </Avatar>
+      </div>
+      <div>
+        <Avatar size='sm' aria-label='Jan Daniel'>
+          JD
+        </Avatar>
+      </div>
+      <div>
+        <Avatar size='md' aria-label='Jan Daniel'>
+          JD
+        </Avatar>
+      </div>
+      <Badge size='sm' count={99} maxCount={10} />
+      <Badge size='md' count={99} maxCount={10} />
+      <Badge size='lg' count={99} maxCount={10} />
+      <Breadcrumbs size='sm'>
+        <Breadcrumbs.List>
+          <Breadcrumbs.Item>
+            <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
+          </Breadcrumbs.Item>
+          <Breadcrumbs.Item>
+            <Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
+          </Breadcrumbs.Item>
+          <Breadcrumbs.Item>
+            <Breadcrumbs.Link href='#'>Nivå 3</Breadcrumbs.Link>
+          </Breadcrumbs.Item>
+        </Breadcrumbs.List>
+      </Breadcrumbs>
+      <Breadcrumbs size='md'>
+        <Breadcrumbs.List>
+          <Breadcrumbs.Item>
+            <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
+          </Breadcrumbs.Item>
+          <Breadcrumbs.Item>
+            <Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
+          </Breadcrumbs.Item>
+          <Breadcrumbs.Item>
+            <Breadcrumbs.Link href='#'>Nivå 3</Breadcrumbs.Link>
+          </Breadcrumbs.Item>
+        </Breadcrumbs.List>
+      </Breadcrumbs>
+      <Breadcrumbs size='lg'>
+        <Breadcrumbs.List>
+          <Breadcrumbs.Item>
+            <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
+          </Breadcrumbs.Item>
+          <Breadcrumbs.Item>
+            <Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
+          </Breadcrumbs.Item>
+          <Breadcrumbs.Item>
+            <Breadcrumbs.Link href='#'>Nivå 3</Breadcrumbs.Link>
+          </Breadcrumbs.Item>
+        </Breadcrumbs.List>
+      </Breadcrumbs>
+      <div>
+        <Button size='sm'>
+          <PrinterSmallIcon />
+          Klikk her
+        </Button>
+      </div>
+      <div>
+        <Button size='md'>
+          <PrinterSmallIcon /> Klikk her
+        </Button>
+      </div>
+      <div>
+        <Button size='lg'>
+          <PrinterSmallIcon /> Klikk her
+        </Button>
+      </div>
+      <Card data-size='sm'>
+        <Heading size='xs' level={2}>
+          Card Neutral
+        </Heading>
+        <Paragraph>
+          Most provide as with carried business are much better more the
+          perfected designer. Writing slightly explain desk unable at supposedly
+          about this
+        </Paragraph>
+      </Card>
+      <Card data-size='md'>
+        <Heading size='sm' level={2}>
+          Card Neutral
+        </Heading>
+        <Paragraph>
+          Most provide as with carried business are much better more the
+          perfected designer. Writing slightly explain desk unable at supposedly
+          about this
+        </Paragraph>
+      </Card>
+      <Card data-size='lg'>
+        <Heading size='md' level={2}>
+          Card Neutral
+        </Heading>
+        <Paragraph>
+          Most provide as with carried business are much better more the
+          perfected designer. Writing slightly explain desk unable at supposedly
+          about this
+        </Paragraph>
+      </Card>
+      <div style={{ display: 'flex', gap: 16 }} data-size='sm'>
+        <Chip.Radio>Radio</Chip.Radio>
+        <Chip.Checkbox>Check</Chip.Checkbox>
+        <Chip.Button>Knapp</Chip.Button>
+      </div>
+      <div style={{ display: 'flex', gap: 16 }} data-size='md'>
+        <Chip.Radio>Radio</Chip.Radio>
+        <Chip.Checkbox>Check</Chip.Checkbox>
+        <Chip.Button>Knapp</Chip.Button>
+      </div>
+      <div style={{ display: 'flex', gap: 16 }} data-size='lg'>
+        <Chip.Radio>Radio</Chip.Radio>
+        <Chip.Checkbox>Check</Chip.Checkbox>
+        <Chip.Button>Knapp</Chip.Button>
+      </div>
+      <div data-size='sm'>
+        <Dropdown.Context>
+          <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
+          <Dropdown>
+            <Dropdown.Heading>Heading 1</Dropdown.Heading>
+            <Dropdown.List>
+              <Dropdown.Item>Button 1.1</Dropdown.Item>
+              <Dropdown.Item>Button 1.2</Dropdown.Item>
+            </Dropdown.List>
+          </Dropdown>
+        </Dropdown.Context>
+      </div>
+      <div data-size='md'>
+        <Dropdown.Context>
+          <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
+          <Dropdown>
+            <Dropdown.Heading>Heading 1</Dropdown.Heading>
+            <Dropdown.List>
+              <Dropdown.Item>Button 1.1</Dropdown.Item>
+              <Dropdown.Item>Button 1.2</Dropdown.Item>
+            </Dropdown.List>
+          </Dropdown>
+        </Dropdown.Context>
+      </div>
+      <div data-size='lg'>
+        <Dropdown.Context>
+          <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
+          <Dropdown>
+            <Dropdown.Heading>Heading 1</Dropdown.Heading>
+            <Dropdown.List>
+              <Dropdown.Item>Button 1.1</Dropdown.Item>
+              <Dropdown.Item>Button 1.2</Dropdown.Item>
+            </Dropdown.List>
+          </Dropdown>
+        </Dropdown.Context>
+      </div>
+      <ErrorSummary size='sm'>
+        <ErrorSummary.Heading>
+          For å gå videre må du rette opp følgende feil:
+        </ErrorSummary.Heading>
+        <ErrorSummary.List>
+          <ErrorSummary.Item href='#'>
+            Fødselsdato kan ikke være etter år 2005
+          </ErrorSummary.Item>
+          <ErrorSummary.Item href='#'>E-post må være gyldig</ErrorSummary.Item>
+        </ErrorSummary.List>
+      </ErrorSummary>
+      <ErrorSummary size='md'>
+        <ErrorSummary.Heading>
+          For å gå videre må du rette opp følgende feil:
+        </ErrorSummary.Heading>
+        <ErrorSummary.List>
+          <ErrorSummary.Item href='#'>
+            Fødselsdato kan ikke være etter år 2005
+          </ErrorSummary.Item>
+          <ErrorSummary.Item href='#'>E-post må være gyldig</ErrorSummary.Item>
+        </ErrorSummary.List>
+      </ErrorSummary>
+      <ErrorSummary size='lg'>
+        <ErrorSummary.Heading>
+          For å gå videre må du rette opp følgende feil:
+        </ErrorSummary.Heading>
+        <ErrorSummary.List>
+          <ErrorSummary.Item href='#'>
+            Fødselsdato kan ikke være etter år 2005
+          </ErrorSummary.Item>
+          <ErrorSummary.Item href='#'>E-post må være gyldig</ErrorSummary.Item>
+        </ErrorSummary.List>
+      </ErrorSummary>
+      <style>
+        {
+          '.ds-field{display:block}.ds-field input+label {margin: 0;font-weight:normal}'
+        }
+      </style>{' '}
+      {/* TMP fix */}
+      <Field data-size='sm'>
+        <Label>Text</Label>
+        <Input aria-invalid='true' defaultValue='Noe tekst' />
+        <ValidationMessage>En feil</ValidationMessage>
+      </Field>
+      <Field data-size='md'>
+        <Label>Text</Label>
+        <Input aria-invalid='true' defaultValue='Noe tekst' />
+        <ValidationMessage>En feil</ValidationMessage>
+      </Field>
+      <Field data-size='lg'>
+        <Label>Text</Label>
+        <Input aria-invalid='true' defaultValue='Noe tekst' />
+        <ValidationMessage>En feil</ValidationMessage>
+      </Field>
+      <Field
+        data-size='sm'
+        style={{ display: 'flex', alignItems: 'center', gap: 5 }}
+      >
+        <Input type='radio' name='my-radio' defaultChecked />
+        <Label>Text</Label>
+      </Field>
+      <Field
+        data-size='md'
+        style={{ display: 'flex', alignItems: 'center', gap: 5 }}
+      >
+        <Input type='radio' name='my-radio' />
+        <Label>Text</Label>
+      </Field>
+      <Field
+        data-size='lg'
+        style={{ display: 'flex', alignItems: 'center', gap: 5 }}
+      >
+        <Input type='radio' name='my-radio' />
+        <Label>Text</Label>
+      </Field>
+      <Field
+        data-size='sm'
+        style={{ display: 'flex', alignItems: 'center', gap: 5 }}
+      >
+        <Input type='checkbox' name='my-check' defaultChecked />
+        <Label>Text</Label>
+      </Field>
+      <Field
+        data-size='md'
+        style={{ display: 'flex', alignItems: 'center', gap: 5 }}
+      >
+        <Input type='checkbox' name='my-check' />
+        <Label>Text</Label>
+      </Field>
+      <Field
+        data-size='lg'
+        style={{ display: 'flex', alignItems: 'center', gap: 5 }}
+      >
+        <Input type='checkbox' name='my-check' />
+        <Label>Text</Label>
+      </Field>
+      <Field
+        data-size='sm'
+        style={{ display: 'flex', alignItems: 'center', gap: 5 }}
+      >
+        <Input type='checkbox' name='my-switch' role='switch' defaultChecked />
+        <Label>Text</Label>
+      </Field>
+      <Field
+        data-size='md'
+        style={{ display: 'flex', alignItems: 'center', gap: 5 }}
+      >
+        <Input type='checkbox' name='my-switch' role='switch' />
+        <Label>Text</Label>
+      </Field>
+      <Field
+        data-size='lg'
+        style={{ display: 'flex', alignItems: 'center', gap: 5 }}
+      >
+        <Input type='checkbox' name='my-switch' role='switch' />
+        <Label>Text</Label>
+      </Field>
+      <HelpText size='sm' aria-label='Mer info'>
+        Mer tekst
+      </HelpText>
+      <HelpText size='md' aria-label='Mer info'>
+        Mer tekst
+      </HelpText>
+      <HelpText size='lg' aria-label='Mer info'>
+        Mer tekst
+      </HelpText>
+      <div data-size='sm'>
+        <Link href='#'>Lenke</Link>
+      </div>
+      <div data-size='md'>
+        <Link href='#'>Lenke</Link>
+      </div>
+      <div data-size='lg'>
+        <Link href='#'>Lenke</Link>
+      </div>
+      <List.Unordered size='sm'>
+        <List.Item>List Item 1</List.Item>
+        <List.Item>List Item 2</List.Item>
+        <List.Item>List Item 3</List.Item>
+      </List.Unordered>
+      <List.Unordered size='md'>
+        <List.Item>List Item 1</List.Item>
+        <List.Item>List Item 2</List.Item>
+        <List.Item>List Item 3</List.Item>
+      </List.Unordered>
+      <List.Unordered size='lg'>
+        <List.Item>List Item 1</List.Item>
+        <List.Item>List Item 2</List.Item>
+        <List.Item>List Item 3</List.Item>
+      </List.Unordered>
+      <Spinner size='sm' title='Loading' />
+      <Spinner size='md' title='Loading' />
+      <Spinner size='lg' title='Loading' />
+      <div data-size='sm'>
+        <Modal.Context>
+          <Modal.Trigger>Open Modal</Modal.Trigger>
+          <Modal>
+            <Heading size='xs' style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+              Modal header
+            </Heading>
+            <Paragraph style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+              Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+              Blanditiis doloremque obcaecati assumenda odio ducimus sunt et.
+            </Paragraph>
+          </Modal>
+        </Modal.Context>
+      </div>
+      <div data-size='md'>
+        <Modal.Context>
+          <Modal.Trigger>Open Modal</Modal.Trigger>
+          <Modal>
+            <Heading size='xs' style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+              Modal header
+            </Heading>
+            <Paragraph style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+              Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+              Blanditiis doloremque obcaecati assumenda odio ducimus sunt et.
+            </Paragraph>
+          </Modal>
+        </Modal.Context>
+      </div>
+      <div data-size='lg'>
+        <Modal.Context>
+          <Modal.Trigger>Open Modal</Modal.Trigger>
+          <Modal>
+            <Heading size='sm' style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+              Modal header
+            </Heading>
+            <Paragraph style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+              Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+              Blanditiis doloremque obcaecati assumenda odio ducimus sunt et.
+            </Paragraph>
+          </Modal>
+        </Modal.Context>
+      </div>
+      <Pagination aria-label='Sidenavigering' size='sm'>
+        <Pagination.List>
+          <Pagination.Item>
+            <Pagination.Button aria-label='Forrige side' {...prevButtonProps}>
+              Forrige
+            </Pagination.Button>
+          </Pagination.Item>
+          {pages.map(({ page, itemKey, buttonProps }) => (
+            <Pagination.Item key={itemKey}>
+              <Pagination.Button {...buttonProps} aria-label={`Side ${page}`}>
+                {page}
+              </Pagination.Button>
+            </Pagination.Item>
+          ))}
+          <Pagination.Item>
+            <Pagination.Button aria-label='Neste side' {...nextButtonProps}>
+              Neste
+            </Pagination.Button>
+          </Pagination.Item>
+        </Pagination.List>
+      </Pagination>
+      <Pagination aria-label='Sidenavigering' size='md'>
+        <Pagination.List>
+          <Pagination.Item>
+            <Pagination.Button aria-label='Forrige side' {...prevButtonProps}>
+              Forrige
+            </Pagination.Button>
+          </Pagination.Item>
+          {pages.map(({ page, itemKey, buttonProps }) => (
+            <Pagination.Item key={itemKey}>
+              <Pagination.Button {...buttonProps} aria-label={`Side ${page}`}>
+                {page}
+              </Pagination.Button>
+            </Pagination.Item>
+          ))}
+          <Pagination.Item>
+            <Pagination.Button aria-label='Neste side' {...nextButtonProps}>
+              Neste
+            </Pagination.Button>
+          </Pagination.Item>
+        </Pagination.List>
+      </Pagination>
+      <Pagination aria-label='Sidenavigering' size='lg'>
+        <Pagination.List>
+          <Pagination.Item>
+            <Pagination.Button aria-label='Forrige side' {...prevButtonProps}>
+              Forrige
+            </Pagination.Button>
+          </Pagination.Item>
+          {pages.map(({ page, itemKey, buttonProps }) => (
+            <Pagination.Item key={itemKey}>
+              <Pagination.Button {...buttonProps} aria-label={`Side ${page}`}>
+                {page}
+              </Pagination.Button>
+            </Pagination.Item>
+          ))}
+          <Pagination.Item>
+            <Pagination.Button aria-label='Neste side' {...nextButtonProps}>
+              Neste
+            </Pagination.Button>
+          </Pagination.Item>
+        </Pagination.List>
+      </Pagination>
+      <div data-size='sm'>
+        <Popover.Context>
+          <Popover.Trigger>My trigger!</Popover.Trigger>
+          <Popover>popover content</Popover>
+        </Popover.Context>
+      </div>
+      <div data-size='md'>
+        <Popover.Context>
+          <Popover.Trigger>My trigger!</Popover.Trigger>
+          <Popover>popover content</Popover>
+        </Popover.Context>
+      </div>
+      <div data-size='lg'>
+        <Popover.Context>
+          <Popover.Trigger>My trigger!</Popover.Trigger>
+          <Popover>popover content</Popover>
+        </Popover.Context>
+      </div>
+      <Table size='sm'>
+        <Table.Head>
+          <Table.Row>
+            <Table.HeaderCell>Header 1</Table.HeaderCell>
+            <Table.HeaderCell>Header 2</Table.HeaderCell>
+            <Table.HeaderCell>Header 3</Table.HeaderCell>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>Cell 1</Table.Cell>
+            <Table.Cell>Cell 2</Table.Cell>
+            <Table.Cell>Cell 3</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>Cell 4</Table.Cell>
+            <Table.Cell>Cell 5</Table.Cell>
+            <Table.Cell>Cell 6</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+      <Table size='md'>
+        <Table.Head>
+          <Table.Row>
+            <Table.HeaderCell>Header 1</Table.HeaderCell>
+            <Table.HeaderCell>Header 2</Table.HeaderCell>
+            <Table.HeaderCell>Header 3</Table.HeaderCell>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>Cell 1</Table.Cell>
+            <Table.Cell>Cell 2</Table.Cell>
+            <Table.Cell>Cell 3</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>Cell 4</Table.Cell>
+            <Table.Cell>Cell 5</Table.Cell>
+            <Table.Cell>Cell 6</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+      <Table size='lg'>
+        <Table.Head>
+          <Table.Row>
+            <Table.HeaderCell>Header 1</Table.HeaderCell>
+            <Table.HeaderCell>Header 2</Table.HeaderCell>
+            <Table.HeaderCell>Header 3</Table.HeaderCell>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>Cell 1</Table.Cell>
+            <Table.Cell>Cell 2</Table.Cell>
+            <Table.Cell>Cell 3</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>Cell 4</Table.Cell>
+            <Table.Cell>Cell 5</Table.Cell>
+            <Table.Cell>Cell 6</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+      <Tabs size='sm' defaultValue='value1'>
+        <Tabs.List>
+          <Tabs.Tab value='value1'>Tab 1</Tabs.Tab>
+          <Tabs.Tab value='value2'>Tab 2</Tabs.Tab>
+          <Tabs.Tab value='value3'>Tab 3</Tabs.Tab>
+        </Tabs.List>
+        <Tabs.Panel value='value1'>content 1</Tabs.Panel>
+        <Tabs.Panel value='value2'>content 2</Tabs.Panel>
+        <Tabs.Panel value='value3'>content 3</Tabs.Panel>
+      </Tabs>
+      <Tabs size='md' defaultValue='value1'>
+        <Tabs.List>
+          <Tabs.Tab value='value1'>Tab 1</Tabs.Tab>
+          <Tabs.Tab value='value2'>Tab 2</Tabs.Tab>
+          <Tabs.Tab value='value3'>Tab 3</Tabs.Tab>
+        </Tabs.List>
+        <Tabs.Panel value='value1'>content 1</Tabs.Panel>
+        <Tabs.Panel value='value2'>content 2</Tabs.Panel>
+        <Tabs.Panel value='value3'>content 3</Tabs.Panel>
+      </Tabs>
+      <Tabs size='lg' defaultValue='value1'>
+        <Tabs.List>
+          <Tabs.Tab value='value1'>Tab 1</Tabs.Tab>
+          <Tabs.Tab value='value2'>Tab 2</Tabs.Tab>
+          <Tabs.Tab value='value3'>Tab 3</Tabs.Tab>
+        </Tabs.List>
+        <Tabs.Panel value='value1'>content 1</Tabs.Panel>
+        <Tabs.Panel value='value2'>content 2</Tabs.Panel>
+        <Tabs.Panel value='value3'>content 3</Tabs.Panel>
+      </Tabs>
+      <Tag size='sm'>Tag</Tag>
+      <Tag size='md'>Tag</Tag>
+      <Tag size='lg'>Tag</Tag>
+      <ToggleGroup size='sm' defaultValue='innboks'>
+        <ToggleGroup.Item value='innboks'>Innboks</ToggleGroup.Item>
+        <ToggleGroup.Item value='utkast'>Utkast</ToggleGroup.Item>
+        <ToggleGroup.Item value='arkiv'>Arkiv</ToggleGroup.Item>
+      </ToggleGroup>
+      <ToggleGroup size='md' defaultValue='innboks'>
+        <ToggleGroup.Item value='innboks'>Innboks</ToggleGroup.Item>
+        <ToggleGroup.Item value='utkast'>Utkast</ToggleGroup.Item>
+        <ToggleGroup.Item value='arkiv'>Arkiv</ToggleGroup.Item>
+      </ToggleGroup>
+      <ToggleGroup size='lg' defaultValue='innboks'>
+        <ToggleGroup.Item value='innboks'>Innboks</ToggleGroup.Item>
+        <ToggleGroup.Item value='utkast'>Utkast</ToggleGroup.Item>
+        <ToggleGroup.Item value='arkiv'>Arkiv</ToggleGroup.Item>
+      </ToggleGroup>
+      <div data-size='sm'>
+        <Tooltip content='Tooltip text'>
+          <Button>My tooltip</Button>
+        </Tooltip>
+      </div>
+      <div data-size='md'>
+        <Tooltip content='Tooltip text'>
+          <Button>My tooltip</Button>
+        </Tooltip>
+      </div>
+      <div data-size='lg'>
+        <Tooltip content='Tooltip text'>
+          <Button>My tooltip</Button>
+        </Tooltip>
+      </div>
     </div>
-  </div>
-);
+  );
+};

From 48f63aa887df503ad1a8d716be72a34601d1ab92 Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Tue, 22 Oct 2024 11:02:54 +0200
Subject: [PATCH 09/29] fix: remove size form toggle group context

---
 .../react/src/components/ToggleGroup/useToggleGroupitem.ts     | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/react/src/components/ToggleGroup/useToggleGroupitem.ts b/packages/react/src/components/ToggleGroup/useToggleGroupitem.ts
index d3fbc0daf5..c8b863dbab 100644
--- a/packages/react/src/components/ToggleGroup/useToggleGroupitem.ts
+++ b/packages/react/src/components/ToggleGroup/useToggleGroupitem.ts
@@ -1,14 +1,12 @@
 import { useContext, useId } from 'react';
 
 import type { ButtonProps } from '../Button';
-import type { ToggleGroupContextProps } from './ToggleGroup';
 import { ToggleGroupContext } from './ToggleGroup';
 
 import type { ToggleGroupItemProps } from './ToggleGroupItem';
 
 type UseToggleGroupItem = (props: ToggleGroupItemProps) => {
   active: boolean;
-  size?: ToggleGroupContextProps['size'];
   value: string;
   buttonProps?: Pick<
     ButtonProps,
@@ -30,7 +28,6 @@ export const useToggleGroupItem: UseToggleGroupItem = (
   return {
     ...rest,
     active: active,
-    size: toggleGroup?.size,
     value,
     buttonProps: {
       id: buttonId,

From da7c3a28141c1db913c85cab13e6612be9ea6ddd Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Tue, 22 Oct 2024 12:40:06 +0200
Subject: [PATCH 10/29] fix: change scaling

---
 packages/css/badge.css                        |   6 +-
 packages/css/base/base.css                    |  72 +---
 packages/css/button.css                       |   4 +-
 packages/css/card.css                         |   4 +-
 packages/css/chip.css                         |   4 +
 packages/css/index.css                        |  78 ++--
 packages/css/input.css                        |   2 +-
 packages/css/tabs.css                         |  11 +-
 packages/css/tag.css                          |   1 +
 packages/css/tooltip.css                      |   1 +
 .../src/components/Dropdown/Dropdown.tsx      |  39 +-
 .../src/components/Dropdown/DropdownItem.tsx  |   9 +-
 packages/react/stories/sizes.stories.tsx      | 367 +++++++++++++++---
 13 files changed, 392 insertions(+), 206 deletions(-)

diff --git a/packages/css/badge.css b/packages/css/badge.css
index 7cefd8b711..d1d6e5984b 100644
--- a/packages/css/badge.css
+++ b/packages/css/badge.css
@@ -6,8 +6,8 @@
 
   box-sizing: border-box;
   display: inline-flex;
+  line-height: var(--ds-line-height-sm);
   position: relative;
-  /* TODO fix using font sm */
 
   &::before {
     content: attr(data-count);
@@ -22,6 +22,10 @@
     place-items: center;
   }
 
+  &:not([data-size]) {
+    font-size: var(--ds-font-size-sm); /* Default to small when size is not defined */
+  }
+
   &[data-color='info'] {
     --dsc-badge-background: var(--ds-color-info-base-default);
     --dsc-badge-color: var(--ds-color-info-contrast-default);
diff --git a/packages/css/base/base.css b/packages/css/base/base.css
index 5961d7efa3..37a1e31633 100644
--- a/packages/css/base/base.css
+++ b/packages/css/base/base.css
@@ -17,6 +17,8 @@
   --dsc-focus-border-width: 3px; /* Default focus border width */
   --dsc-focus-boxShadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner);
   --dsc-focus-outline: var(--ds-color-focus-outer) solid var(--dsc-focus-border-width);
+  --ds-font-size-sm: max(.9em, .875rem); /* Fallback if not supporting round() */
+  --ds-font-size-sm: round(down, max(.9em, .875rem), 1px); /* Default to 90% of font-size, but minimum 14px */
 
   color: var(--ds-color-neutral-text-default);
   background-color: var(--ds-color-neutral-background-default);
@@ -78,76 +80,6 @@
   letter-spacing: var(--ds-body-xl-letter-spacing);
 }
 
-.ds-body-text--long-xs {
-  font-weight: var(--ds-body-long-xs-font-weight);
-  line-height: var(--ds-body-long-xs-line-height);
-  font-size: var(--ds-body-long-xs-font-size);
-  letter-spacing: var(--ds-body-long-xs-letter-spacing);
-}
-
-.ds-body-text--long-sm {
-  font-weight: var(--ds-body-long-sm-font-weight);
-  line-height: var(--ds-body-long-sm-line-height);
-  font-size: var(--ds-body-long-sm-font-size);
-  letter-spacing: var(--ds-body-long-sm-letter-spacing);
-}
-
-.ds-body-text--long-md {
-  font-weight: var(--ds-body-long-md-font-weight);
-  line-height: var(--ds-body-long-md-line-height);
-  font-size: var(--ds-body-long-md-font-size);
-  letter-spacing: var(--ds-body-long-md-letter-spacing);
-}
-
-.ds-body-text--long-lg {
-  font-weight: var(--ds-body-long-lg-font-weight);
-  line-height: var(--ds-body-long-lg-line-height);
-  font-size: var(--ds-body-long-lg-font-size);
-  letter-spacing: var(--ds-body-long-lg-letter-spacing);
-}
-
-.ds-body-text--long-xl {
-  font-weight: var(--ds-body-long-xl-font-weight);
-  line-height: var(--ds-body-long-xl-line-height);
-  font-size: var(--ds-body-long-xl-font-size);
-  letter-spacing: var(--ds-body-long-xl-letter-spacing);
-}
-
-.ds-body-text--short-xs {
-  font-weight: var(--ds-body-short-xs-font-weight);
-  line-height: var(--ds-body-short-xs-line-height);
-  font-size: var(--ds-body-short-xs-font-size);
-  letter-spacing: var(--ds-body-short-xs-letter-spacing);
-}
-
-.ds-body-text--short-sm {
-  font-weight: var(--ds-body-short-sm-font-weight);
-  line-height: var(--ds-body-short-sm-line-height);
-  font-size: var(--ds-body-short-sm-font-size);
-  letter-spacing: var(--ds-body-short-sm-letter-spacing);
-}
-
-.ds-body-text--short-md {
-  font-weight: var(--ds-body-short-md-font-weight);
-  line-height: var(--ds-body-short-md-line-height);
-  font-size: var(--ds-body-short-md-font-size);
-  letter-spacing: var(--ds-body-short-md-letter-spacing);
-}
-
-.ds-body-text--short-lg {
-  font-weight: var(--ds-body-short-lg-font-weight);
-  line-height: var(--ds-body-short-lg-line-height);
-  font-size: var(--ds-body-short-lg-font-size);
-  letter-spacing: var(--ds-body-short-lg-letter-spacing);
-}
-
-.ds-body-text--short-xl {
-  font-weight: var(--ds-body-short-xl-font-weight);
-  line-height: var(--ds-body-short-xl-line-height);
-  font-size: var(--ds-body-short-xl-font-size);
-  letter-spacing: var(--ds-body-short-xl-letter-spacing);
-}
-
 /** Heading */
 
 .ds-heading-text--2xs {
diff --git a/packages/css/button.css b/packages/css/button.css
index 59b99787ca..48a3228e7c 100644
--- a/packages/css/button.css
+++ b/packages/css/button.css
@@ -6,7 +6,7 @@
   --dsc-button-font-size: var(--ds-font-size-5);
   --dsc-button-gap: var(--ds-spacing-2);
   --dsc-button-padding: var(--ds-spacing-2) var(--ds-spacing-4);
-  --dsc-button-size: var(--ds-sizing-11);
+  --dsc-button-size: var(--ds-sizing-12);
 
   align-items: center;
   background: var(--dsc-button-background);
@@ -30,7 +30,7 @@
   @composes ds-focus from './base/base.css';
 
   &:not([data-size]) {
-    font-size: inherit; /* Ensure inheriting font-size */
+    font-size: inherit; /* Ensure inheriting font-size when <button> */
   }
 
   & :where(img, svg) {
diff --git a/packages/css/card.css b/packages/css/card.css
index e5527764ef..587bf9276f 100644
--- a/packages/css/card.css
+++ b/packages/css/card.css
@@ -15,14 +15,14 @@
   color: var(--dsc-card-color);
   display: block;
   font-family: inherit;
-  line-height: inherit;
+  line-height: var(--ds-line-height-sm);
   margin: 0;
   overflow: clip; /* Needed to clip media elements and and Card.Block */
   padding: var(--dsc-card-padding);
   text-align: inherit;
 
   &:not([data-size]) {
-    font-size: inherit; /* Ensure inherits size when <button> */
+    font-size: inherit; /* Ensure inheriting font-size when <button> */
   }
 
   /* Style link in heading, or heading when Card is anchor */
diff --git a/packages/css/chip.css b/packages/css/chip.css
index c641b73fab..93e3dbd633 100644
--- a/packages/css/chip.css
+++ b/packages/css/chip.css
@@ -24,6 +24,10 @@
   padding: var(--dsc-chip-padding);
   text-decoration: none;
 
+  &:not([data-size]) {
+    font-size: inherit; /* Ensure inheriting font-size when <button> */
+  }
+
   /* Make focus ring also when input inside is focused */
   &:has(:focus-visible) {
     @composes ds-focus--visible from './base/base.css';
diff --git a/packages/css/index.css b/packages/css/index.css
index 4920b2c785..6f9f793378 100644
--- a/packages/css/index.css
+++ b/packages/css/index.css
@@ -73,47 +73,55 @@ Array.from(
   [data-size='lg'] {
     @composes ds-body-text--lg from './base/base.css';
   }
+
+  [data-size='xl'] {
+    @composes ds-body-text--xl from './base/base.css';
+    font-size: 1.875rem;
+  }
 }
 
 /* TODO: Move */
 :root {
-  --ds-sizing-scale-base: var(--ds-font-size-5);
-  --ds-sizing-scale-min: 0.125rem; /* Minimum 2px steps */
-  --ds-sizing-scale: 0.25rem; /* Default 4px steps */
-  --ds-sizing-adjust: calc((var(--ds-sizing-scale-base) - 1em) * 0.5); /* Fallback if not supporting round() */
-  --ds-sizing-adjust: round(up, calc((var(--ds-sizing-scale-base) - 1em) * 0.5), 0.0625rem);
+  --ds-sizing-base: 18; /* Unitless base font-size 18px */
+  --ds-sizing-step: 4; /* Unitless step size 4px */
+  --ds-sizing-scale: var(--ds-sizing-step) / var(--ds-sizing-base);
+
+  /* --ds-sizing-scale-min: 0.125rem; /* Minimum 2px steps */
+  /* --ds-sizing-scale: 0.25rem; /* Default 4px steps */
+  /* --ds-sizing-adjust: calc((var(--ds-sizing-scale-base) - 1em) * 0.5); /* Fallback if not supporting round() */
+  /* --ds-sizing-adjust: round(up, calc((var(--ds-sizing-scale-base) - 1em) * 0.5), 0.0625rem);
 
   /* Sizing */
-  --ds-sizing-1: round(down, 0.25em, 0.0625rem);
-  --ds-sizing-2: round(down, 0.5em, 0.0625rem);
-  --ds-sizing-3: round(down, 0.75em, 0.0625rem);
-  --ds-sizing-4: round(down, 1em, 0.0625rem);
-  --ds-sizing-5: round(down, 1.25em, 0.0625rem);
-  --ds-sizing-6: round(down, 1.5em, 0.0625rem);
-  --ds-sizing-7: round(down, 1.75em, 0.0625rem);
-  --ds-sizing-8: round(down, 2em, 0.0625rem);
-  --ds-sizing-9: round(down, 2.25em, 0.0625rem);
-  --ds-sizing-10: round(down, 2.5em, 0.0625rem);
-  --ds-sizing-11: round(down, 2.75em, 0.0625rem);
-  --ds-sizing-12: round(down, 3em, 0.0625rem);
-  --ds-sizing-13: round(down, 3.25em, 0.0625rem);
-  --ds-sizing-14: round(down, 3.5em, 0.0625rem);
-  --ds-sizing-15: round(down, 3.75em, 0.0625rem);
-  --ds-sizing-16: round(down, 4em, 0.0625rem);
-  --ds-sizing-17: round(down, 4.25em, 0.0625rem);
-  --ds-sizing-18: round(down, 4.5em, 0.0625rem);
-  --ds-sizing-19: round(down, 4.75em, 0.0625rem);
-  --ds-sizing-20: round(down, 5em, 0.0625rem);
-  --ds-sizing-21: round(down, 5.25em, 0.0625rem);
-  --ds-sizing-22: round(down, 5.5em, 0.0625rem);
-  --ds-sizing-23: round(down, 5.75em, 0.0625rem);
-  --ds-sizing-24: round(down, 6em, 0.0625rem);
-  --ds-sizing-25: round(down, 6.25em, 0.0625rem);
-  --ds-sizing-26: round(down, 6.5em, 0.0625rem);
-  --ds-sizing-27: round(down, 6.75em, 0.0625rem);
-  --ds-sizing-28: round(down, 7em, 0.0625rem);
-  --ds-sizing-29: round(down, 7.25em, 0.0625rem);
-  --ds-sizing-30: round(down, 7.5em, 0.0625rem);
+  --ds-sizing-1: round(down, calc(var(--ds-sizing-scale) * 1em), 0.0625rem);
+  --ds-sizing-2: round(down, calc(var(--ds-sizing-scale) * 2em), 0.0625rem);
+  --ds-sizing-3: round(down, calc(var(--ds-sizing-scale) * 3em), 0.0625rem);
+  --ds-sizing-4: round(down, calc(var(--ds-sizing-scale) * 4em), 0.0625rem);
+  --ds-sizing-5: round(down, calc(var(--ds-sizing-scale) * 5em), 0.0625rem);
+  --ds-sizing-6: round(down, calc(var(--ds-sizing-scale) * 6em), 0.0625rem);
+  --ds-sizing-7: round(down, calc(var(--ds-sizing-scale) * 7em), 0.0625rem);
+  --ds-sizing-8: round(down, calc(var(--ds-sizing-scale) * 8em), 0.0625rem);
+  --ds-sizing-9: round(down, calc(var(--ds-sizing-scale) * 9em), 0.0625rem);
+  --ds-sizing-10: round(down, calc(var(--ds-sizing-scale) * 10em), 0.0625rem);
+  --ds-sizing-11: round(down, calc(var(--ds-sizing-scale) * 11em), 0.0625rem);
+  --ds-sizing-12: round(down, calc(var(--ds-sizing-scale) * 12em), 0.0625rem);
+  --ds-sizing-13: round(down, calc(var(--ds-sizing-scale) * 13em), 0.0625rem);
+  --ds-sizing-14: round(down, calc(var(--ds-sizing-scale) * 14em), 0.0625rem);
+  --ds-sizing-15: round(down, calc(var(--ds-sizing-scale) * 15em), 0.0625rem);
+  --ds-sizing-16: round(down, calc(var(--ds-sizing-scale) * 16em), 0.0625rem);
+  --ds-sizing-17: round(down, calc(var(--ds-sizing-scale) * 17em), 0.0625rem);
+  --ds-sizing-18: round(down, calc(var(--ds-sizing-scale) * 18em), 0.0625rem);
+  --ds-sizing-19: round(down, calc(var(--ds-sizing-scale) * 19em), 0.0625rem);
+  --ds-sizing-20: round(down, calc(var(--ds-sizing-scale) * 20em), 0.0625rem);
+  --ds-sizing-21: round(down, calc(var(--ds-sizing-scale) * 21em), 0.0625rem);
+  --ds-sizing-22: round(down, calc(var(--ds-sizing-scale) * 22em), 0.0625rem);
+  --ds-sizing-23: round(down, calc(var(--ds-sizing-scale) * 23em), 0.0625rem);
+  --ds-sizing-24: round(down, calc(var(--ds-sizing-scale) * 24em), 0.0625rem);
+  --ds-sizing-25: round(down, calc(var(--ds-sizing-scale) * 25em), 0.0625rem);
+  --ds-sizing-26: round(down, calc(var(--ds-sizing-scale) * 26em), 0.0625rem);
+  --ds-sizing-27: round(down, calc(var(--ds-sizing-scale) * 27em), 0.0625rem);
+  --ds-sizing-28: round(down, calc(var(--ds-sizing-scale) * 28em), 0.0625rem);
+  --ds-sizing-29: round(down, calc(var(--ds-sizing-scale) * 29em), 0.0625rem);
+  --ds-sizing-30: round(down, calc(var(--ds-sizing-scale) * 30em), 0.0625rem);
 
   /*--ds-sizing-1: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 1 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 1));
   --ds-sizing-2: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 2 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 2));
diff --git a/packages/css/input.css b/packages/css/input.css
index 82c193c6e8..fe0f25421b 100644
--- a/packages/css/input.css
+++ b/packages/css/input.css
@@ -38,10 +38,10 @@
   box-sizing: border-box;
   color: var(--dsc-input-color);
   font-family: inherit;
+  height: var(--dsc-input-size);
   line-height: var(--ds-line-height-sm);
   margin: 0; /* Reset native margin on checkbox and radio */
   max-width: 100%; /* Ensure input does not grow outside bounds even with a high value in size="" or cols="" */
-  min-height: var(--dsc-input-size);
   padding: var(--dsc-input-padding);
   position: relative; /* Ensure foucs outline renders on top */
 
diff --git a/packages/css/tabs.css b/packages/css/tabs.css
index 12f1372025..5c043fd2af 100644
--- a/packages/css/tabs.css
+++ b/packages/css/tabs.css
@@ -20,19 +20,28 @@
 }
 
 .ds-tabs__tab {
-  all: unset; /* Reset <button> */
   align-items: center;
+  background: none;
+  border: 0;
   box-sizing: border-box;
   color: var(--dsc-tabs-tab-color);
   cursor: pointer;
   display: flex;
   flex-direction: row;
+  font-family: inherit;
+  font-size: inherit;
   gap: var(--ds-spacing-1);
   justify-content: center;
+  line-height: var(--ds-line-height-sm);
+  margin: 0;
   padding: var(--dsc-tabs-tab-padding);
   position: relative;
   text-align: center;
 
+  &:not([data-size]) {
+    font-size: inherit; /* Ensure inheriting font-size when <button> */
+  }
+
   &[aria-selected='true'] {
     --dsc-tabs__tab-bottom-border-color: var(--ds-color-accent-base-default);
     --dsc-tabs-tab-color: var(--ds-color-accent-text-subtle);
diff --git a/packages/css/tag.css b/packages/css/tag.css
index c42924d8de..fb33b19e61 100644
--- a/packages/css/tag.css
+++ b/packages/css/tag.css
@@ -10,6 +10,7 @@
   box-sizing: border-box;
   color: var(--dsc-tag-color);
   display: inline-flex;
+  line-height: var(--ds-line-height-sm);
   min-height: var(--dsc-tag-min-height);
   padding: var(--dsc-tag-padding);
   width: max-content;
diff --git a/packages/css/tooltip.css b/packages/css/tooltip.css
index 2c907b6ed5..e2f6b68140 100644
--- a/packages/css/tooltip.css
+++ b/packages/css/tooltip.css
@@ -8,6 +8,7 @@
   border-radius: var(--dsc-tooltip-border-radius);
   box-sizing: border-box;
   color: var(--dsc-tooltip-color);
+  line-height: var(--ds-line-height-sm);
   padding: var(--dsc-tooltip-padding);
 }
 
diff --git a/packages/react/src/components/Dropdown/Dropdown.tsx b/packages/react/src/components/Dropdown/Dropdown.tsx
index 1a07ca95f9..738a089a9c 100644
--- a/packages/react/src/components/Dropdown/Dropdown.tsx
+++ b/packages/react/src/components/Dropdown/Dropdown.tsx
@@ -1,6 +1,5 @@
 import cl from 'clsx/lite';
-import { createContext, forwardRef, useEffect, useState } from 'react';
-import type { ReactNode } from 'react';
+import { forwardRef } from 'react';
 
 import type { Placement } from '@floating-ui/react';
 import { Popover } from '../Popover';
@@ -11,7 +10,6 @@ export type DropdownProps = {
    * @default bottom-end
    */
   placement?: Placement;
-  children: ReactNode;
 } & Omit<PopoverProps, 'variant' | 'placement'>;
 
 export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
@@ -19,36 +17,13 @@ export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
     { placement = 'bottom-end', className, ...rest },
     ref,
   ) {
-    const [size, setSize] = useState<NonNullable<DropdownProps['size']>>(
-      rest.size || 'md',
-    );
-
-    useEffect(() => {
-      setSize(rest.size || 'md');
-    }, [rest.size]);
-
     return (
-      <DropdownCtx.Provider
-        value={{
-          size,
-        }}
-      >
-        <Popover
-          ref={ref}
-          placement={placement}
-          size={size}
-          className={cl('ds-dropdown', className)}
-          {...rest}
-        />
-      </DropdownCtx.Provider>
+      <Popover
+        className={cl('ds-dropdown', className)}
+        placement={placement}
+        ref={ref}
+        {...rest}
+      />
     );
   },
 );
-
-type DropdownCtxType = {
-  size: NonNullable<DropdownProps['size']>;
-};
-
-export const DropdownCtx = createContext<DropdownCtxType>({
-  size: 'md',
-});
diff --git a/packages/react/src/components/Dropdown/DropdownItem.tsx b/packages/react/src/components/Dropdown/DropdownItem.tsx
index 22ca6d059d..1f594be09d 100644
--- a/packages/react/src/components/Dropdown/DropdownItem.tsx
+++ b/packages/react/src/components/Dropdown/DropdownItem.tsx
@@ -1,23 +1,18 @@
-import { forwardRef, useContext } from 'react';
+import { forwardRef } from 'react';
 
 import type { ButtonProps } from '../Button';
 import { Button } from '../Button/Button';
 
-import { DropdownCtx } from './Dropdown';
-
 export type DropdownItemProps = Omit<ButtonProps, 'variant' | 'size' | 'color'>;
 
 export const DropdownItem = forwardRef<HTMLButtonElement, DropdownItemProps>(
   function DropdownItem({ className, style, ...rest }, ref) {
-    const { size } = useContext(DropdownCtx);
-
     return (
       <li className={className} style={style}>
         <Button
+          className='ds-dropdown__item'
           ref={ref}
           variant='tertiary'
-          size={size}
-          className='ds-dropdown__item'
           {...rest}
         />
       </li>
diff --git a/packages/react/stories/sizes.stories.tsx b/packages/react/stories/sizes.stories.tsx
index 84f63e4950..d452f2b6ff 100644
--- a/packages/react/stories/sizes.stories.tsx
+++ b/packages/react/stories/sizes.stories.tsx
@@ -1,6 +1,7 @@
-import { DivideIcon, PrinterSmallIcon } from '@navikt/aksel-icons';
+import { PrinterSmallIcon } from '@navikt/aksel-icons';
 import type { Meta, StoryFn } from '@storybook/react';
 
+// 14, 16, 18, 30
 import { useState } from 'react';
 import {
   Accordion,
@@ -10,10 +11,7 @@ import {
   Breadcrumbs,
   Button,
   Card,
-  Checkbox,
   Chip,
-  Combobox,
-  Divider,
   Dropdown,
   ErrorSummary,
   Field,
@@ -27,15 +25,10 @@ import {
   Pagination,
   Paragraph,
   Popover,
-  Radio,
-  Search,
-  Select,
   Spinner,
-  Switch,
   Table,
   Tabs,
   Tag,
-  Textfield,
   ToggleGroup,
   Tooltip,
   ValidationMessage,
@@ -64,11 +57,29 @@ export const Sizes: StoryFn = () => {
       style={{
         display: 'grid',
         alignItems: 'start',
-        gridTemplateColumns: 'repeat(3, 1fr)',
+        gridTemplateColumns: 'repeat(4, 1fr)',
         gap: '2rem',
         maxWidth: '90vw',
       }}
     >
+      <div>14px</div>
+      <div>16px</div>
+      <div>18px</div>
+      <div>30px</div>
+      <Accordion data-size='xs'>
+        <Accordion.Item>
+          <Accordion.Heading>
+            Hvem kan registrere seg i Frivillighetsregisteret?
+          </Accordion.Heading>
+          <Accordion.Content>
+            For å kunne bli registrert i Frivillighetsregisteret, må
+            organisasjonen drive frivillig virksomhet. Det er bare foreninger,
+            stiftelser og aksjeselskap som kan registreres. Virksomheten kan
+            ikke dele ut midler til fysiske personer. Virksomheten må ha et
+            styre.
+          </Accordion.Content>
+        </Accordion.Item>
+      </Accordion>
       <Accordion data-size='sm'>
         <Accordion.Item>
           <Accordion.Heading>
@@ -97,7 +108,7 @@ export const Sizes: StoryFn = () => {
           </Accordion.Content>
         </Accordion.Item>
       </Accordion>
-      <Accordion data-size='lg'>
+      <Accordion data-size='xl'>
         <Accordion.Item>
           <Accordion.Heading>
             Hvem kan registrere seg i Frivillighetsregisteret?
@@ -111,9 +122,10 @@ export const Sizes: StoryFn = () => {
           </Accordion.Content>
         </Accordion.Item>
       </Accordion>
+      <Alert data-size='xs'>Dette er en alert</Alert>
       <Alert size='sm'>Dette er en alert</Alert>
       <Alert size='md'>Dette er en alert</Alert>
-      <Alert size='lg'>Dette er en alert</Alert>
+      <Alert data-size='xl'>Dette er en alert</Alert>
       <div>
         <Avatar size='xs' aria-label='Jan Daniel'>
           JD
@@ -129,9 +141,28 @@ export const Sizes: StoryFn = () => {
           JD
         </Avatar>
       </div>
+      <div>
+        <Avatar data-size='xl' aria-label='Jan Daniel'>
+          JD
+        </Avatar>
+      </div>
+      <Badge data-size='xs' count={99} maxCount={10} />
       <Badge size='sm' count={99} maxCount={10} />
       <Badge size='md' count={99} maxCount={10} />
-      <Badge size='lg' count={99} maxCount={10} />
+      <Badge data-size='xl' count={99} maxCount={10} />
+      <Breadcrumbs data-size='xs'>
+        <Breadcrumbs.List>
+          <Breadcrumbs.Item>
+            <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
+          </Breadcrumbs.Item>
+          <Breadcrumbs.Item>
+            <Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
+          </Breadcrumbs.Item>
+          <Breadcrumbs.Item>
+            <Breadcrumbs.Link href='#'>Nivå 3</Breadcrumbs.Link>
+          </Breadcrumbs.Item>
+        </Breadcrumbs.List>
+      </Breadcrumbs>
       <Breadcrumbs size='sm'>
         <Breadcrumbs.List>
           <Breadcrumbs.Item>
@@ -158,7 +189,7 @@ export const Sizes: StoryFn = () => {
           </Breadcrumbs.Item>
         </Breadcrumbs.List>
       </Breadcrumbs>
-      <Breadcrumbs size='lg'>
+      <Breadcrumbs data-size='xl'>
         <Breadcrumbs.List>
           <Breadcrumbs.Item>
             <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
@@ -171,6 +202,12 @@ export const Sizes: StoryFn = () => {
           </Breadcrumbs.Item>
         </Breadcrumbs.List>
       </Breadcrumbs>
+      <div>
+        <Button data-size='xs'>
+          <PrinterSmallIcon />
+          Klikk her
+        </Button>
+      </div>
       <div>
         <Button size='sm'>
           <PrinterSmallIcon />
@@ -183,10 +220,20 @@ export const Sizes: StoryFn = () => {
         </Button>
       </div>
       <div>
-        <Button size='lg'>
+        <Button data-size='xl'>
           <PrinterSmallIcon /> Klikk her
         </Button>
       </div>
+      <Card data-size='xs'>
+        <Heading size='2xs' level={2}>
+          Card Neutral
+        </Heading>
+        <Paragraph>
+          Most provide as with carried business are much better more the
+          perfected designer. Writing slightly explain desk unable at supposedly
+          about this
+        </Paragraph>
+      </Card>
       <Card data-size='sm'>
         <Heading size='xs' level={2}>
           Card Neutral
@@ -207,8 +254,8 @@ export const Sizes: StoryFn = () => {
           about this
         </Paragraph>
       </Card>
-      <Card data-size='lg'>
-        <Heading size='md' level={2}>
+      <Card data-size='xl'>
+        <Heading size='lg' level={2}>
           Card Neutral
         </Heading>
         <Paragraph>
@@ -217,21 +264,50 @@ export const Sizes: StoryFn = () => {
           about this
         </Paragraph>
       </Card>
-      <div style={{ display: 'flex', gap: 16 }} data-size='sm'>
+      <div
+        style={{ display: 'flex', gap: 'var(--ds-sizing-2)' }}
+        data-size='xs'
+      >
         <Chip.Radio>Radio</Chip.Radio>
         <Chip.Checkbox>Check</Chip.Checkbox>
         <Chip.Button>Knapp</Chip.Button>
       </div>
-      <div style={{ display: 'flex', gap: 16 }} data-size='md'>
+      <div
+        style={{ display: 'flex', gap: 'var(--ds-sizing-2)' }}
+        data-size='sm'
+      >
         <Chip.Radio>Radio</Chip.Radio>
         <Chip.Checkbox>Check</Chip.Checkbox>
         <Chip.Button>Knapp</Chip.Button>
       </div>
-      <div style={{ display: 'flex', gap: 16 }} data-size='lg'>
+      <div
+        style={{ display: 'flex', gap: 'var(--ds-sizing-2)' }}
+        data-size='md'
+      >
         <Chip.Radio>Radio</Chip.Radio>
         <Chip.Checkbox>Check</Chip.Checkbox>
         <Chip.Button>Knapp</Chip.Button>
       </div>
+      <div
+        style={{ display: 'flex', gap: 'var(--ds-sizing-2)' }}
+        data-size='xl'
+      >
+        <Chip.Radio>Radio</Chip.Radio>
+        <Chip.Checkbox>Check</Chip.Checkbox>
+        <Chip.Button>Knapp</Chip.Button>
+      </div>
+      <div data-size='xs'>
+        <Dropdown.Context>
+          <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
+          <Dropdown>
+            <Dropdown.Heading>Heading 1</Dropdown.Heading>
+            <Dropdown.List>
+              <Dropdown.Item>Button 1.1</Dropdown.Item>
+              <Dropdown.Item>Button 1.2</Dropdown.Item>
+            </Dropdown.List>
+          </Dropdown>
+        </Dropdown.Context>
+      </div>
       <div data-size='sm'>
         <Dropdown.Context>
           <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
@@ -256,7 +332,7 @@ export const Sizes: StoryFn = () => {
           </Dropdown>
         </Dropdown.Context>
       </div>
-      <div data-size='lg'>
+      <div data-size='xl'>
         <Dropdown.Context>
           <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
           <Dropdown>
@@ -268,6 +344,17 @@ export const Sizes: StoryFn = () => {
           </Dropdown>
         </Dropdown.Context>
       </div>
+      <ErrorSummary data-size='xs'>
+        <ErrorSummary.Heading>
+          For å gå videre må du rette opp følgende feil:
+        </ErrorSummary.Heading>
+        <ErrorSummary.List>
+          <ErrorSummary.Item href='#'>
+            Fødselsdato kan ikke være etter år 2005
+          </ErrorSummary.Item>
+          <ErrorSummary.Item href='#'>E-post må være gyldig</ErrorSummary.Item>
+        </ErrorSummary.List>
+      </ErrorSummary>
       <ErrorSummary size='sm'>
         <ErrorSummary.Heading>
           For å gå videre må du rette opp følgende feil:
@@ -290,7 +377,7 @@ export const Sizes: StoryFn = () => {
           <ErrorSummary.Item href='#'>E-post må være gyldig</ErrorSummary.Item>
         </ErrorSummary.List>
       </ErrorSummary>
-      <ErrorSummary size='lg'>
+      <ErrorSummary data-size='xl'>
         <ErrorSummary.Heading>
           For å gå videre må du rette opp følgende feil:
         </ErrorSummary.Heading>
@@ -302,11 +389,17 @@ export const Sizes: StoryFn = () => {
         </ErrorSummary.List>
       </ErrorSummary>
       <style>
-        {
-          '.ds-field{display:block}.ds-field input+label {margin: 0;font-weight:normal}'
-        }
-      </style>{' '}
-      {/* TMP fix */}
+        {/* TMP fix */}
+        {`
+          .ds-field { display: block }
+          .ds-field input+label { margin: 0; font-weight: normal }
+        `}
+      </style>
+      <Field data-size='xs'>
+        <Label>Text</Label>
+        <Input aria-invalid='true' defaultValue='Noe tekst' />
+        <ValidationMessage>En feil</ValidationMessage>
+      </Field>
       <Field data-size='sm'>
         <Label>Text</Label>
         <Input aria-invalid='true' defaultValue='Noe tekst' />
@@ -317,92 +410,172 @@ export const Sizes: StoryFn = () => {
         <Input aria-invalid='true' defaultValue='Noe tekst' />
         <ValidationMessage>En feil</ValidationMessage>
       </Field>
-      <Field data-size='lg'>
+      <Field data-size='xl'>
         <Label>Text</Label>
         <Input aria-invalid='true' defaultValue='Noe tekst' />
         <ValidationMessage>En feil</ValidationMessage>
       </Field>
+      <Field
+        data-size='xs'
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--ds-sizing-2)',
+        }}
+      >
+        <Input type='radio' name='my-radio' defaultChecked />
+        <Label>Text</Label>
+      </Field>
       <Field
         data-size='sm'
-        style={{ display: 'flex', alignItems: 'center', gap: 5 }}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--ds-sizing-2)',
+        }}
       >
         <Input type='radio' name='my-radio' defaultChecked />
         <Label>Text</Label>
       </Field>
       <Field
         data-size='md'
-        style={{ display: 'flex', alignItems: 'center', gap: 5 }}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--ds-sizing-2)',
+        }}
       >
         <Input type='radio' name='my-radio' />
         <Label>Text</Label>
       </Field>
       <Field
-        data-size='lg'
-        style={{ display: 'flex', alignItems: 'center', gap: 5 }}
+        data-size='xl'
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--ds-sizing-2)',
+        }}
       >
         <Input type='radio' name='my-radio' />
         <Label>Text</Label>
       </Field>
+      <Field
+        data-size='xs'
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--ds-sizing-2)',
+        }}
+      >
+        <Input type='checkbox' name='my-check' defaultChecked />
+        <Label>Text</Label>
+      </Field>
       <Field
         data-size='sm'
-        style={{ display: 'flex', alignItems: 'center', gap: 5 }}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--ds-sizing-2)',
+        }}
       >
         <Input type='checkbox' name='my-check' defaultChecked />
         <Label>Text</Label>
       </Field>
       <Field
         data-size='md'
-        style={{ display: 'flex', alignItems: 'center', gap: 5 }}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--ds-sizing-2)',
+        }}
       >
         <Input type='checkbox' name='my-check' />
         <Label>Text</Label>
       </Field>
       <Field
-        data-size='lg'
-        style={{ display: 'flex', alignItems: 'center', gap: 5 }}
+        data-size='xl'
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--ds-sizing-2)',
+        }}
       >
         <Input type='checkbox' name='my-check' />
         <Label>Text</Label>
       </Field>
+      <Field
+        data-size='xs'
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--ds-sizing-2)',
+        }}
+      >
+        <Input type='checkbox' name='my-switch' role='switch' defaultChecked />
+        <Label>Text</Label>
+      </Field>
       <Field
         data-size='sm'
-        style={{ display: 'flex', alignItems: 'center', gap: 5 }}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--ds-sizing-2)',
+        }}
       >
         <Input type='checkbox' name='my-switch' role='switch' defaultChecked />
         <Label>Text</Label>
       </Field>
       <Field
         data-size='md'
-        style={{ display: 'flex', alignItems: 'center', gap: 5 }}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--ds-sizing-2)',
+        }}
       >
         <Input type='checkbox' name='my-switch' role='switch' />
         <Label>Text</Label>
       </Field>
       <Field
-        data-size='lg'
-        style={{ display: 'flex', alignItems: 'center', gap: 5 }}
+        data-size='xl'
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--ds-sizing-2)',
+        }}
       >
         <Input type='checkbox' name='my-switch' role='switch' />
         <Label>Text</Label>
       </Field>
+      <HelpText data-size='xs' aria-label='Mer info'>
+        Mer tekst
+      </HelpText>
       <HelpText size='sm' aria-label='Mer info'>
         Mer tekst
       </HelpText>
       <HelpText size='md' aria-label='Mer info'>
         Mer tekst
       </HelpText>
-      <HelpText size='lg' aria-label='Mer info'>
+      <HelpText data-size='zl' aria-label='Mer info'>
         Mer tekst
       </HelpText>
+      <div data-size='xs'>
+        <Link href='#'>Lenke</Link>
+      </div>
       <div data-size='sm'>
         <Link href='#'>Lenke</Link>
       </div>
       <div data-size='md'>
         <Link href='#'>Lenke</Link>
       </div>
-      <div data-size='lg'>
+      <div data-size='xl'>
         <Link href='#'>Lenke</Link>
       </div>
+      <List.Unordered data-size='xs'>
+        <List.Item>List Item 1</List.Item>
+        <List.Item>List Item 2</List.Item>
+        <List.Item>List Item 3</List.Item>
+      </List.Unordered>
       <List.Unordered size='sm'>
         <List.Item>List Item 1</List.Item>
         <List.Item>List Item 2</List.Item>
@@ -413,14 +586,29 @@ export const Sizes: StoryFn = () => {
         <List.Item>List Item 2</List.Item>
         <List.Item>List Item 3</List.Item>
       </List.Unordered>
-      <List.Unordered size='lg'>
+      <List.Unordered data-size='xl'>
         <List.Item>List Item 1</List.Item>
         <List.Item>List Item 2</List.Item>
         <List.Item>List Item 3</List.Item>
       </List.Unordered>
+      <Spinner size='xs' title='Loading' />
       <Spinner size='sm' title='Loading' />
       <Spinner size='md' title='Loading' />
-      <Spinner size='lg' title='Loading' />
+      <Spinner size='xl' title='Loading' />
+      <div data-size='xs'>
+        <Modal.Context>
+          <Modal.Trigger>Open Modal</Modal.Trigger>
+          <Modal>
+            <Heading size='xs' style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+              Modal header
+            </Heading>
+            <Paragraph style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+              Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+              Blanditiis doloremque obcaecati assumenda odio ducimus sunt et.
+            </Paragraph>
+          </Modal>
+        </Modal.Context>
+      </div>
       <div data-size='sm'>
         <Modal.Context>
           <Modal.Trigger>Open Modal</Modal.Trigger>
@@ -449,7 +637,7 @@ export const Sizes: StoryFn = () => {
           </Modal>
         </Modal.Context>
       </div>
-      <div data-size='lg'>
+      <div data-size='xl'>
         <Modal.Context>
           <Modal.Trigger>Open Modal</Modal.Trigger>
           <Modal>
@@ -463,6 +651,27 @@ export const Sizes: StoryFn = () => {
           </Modal>
         </Modal.Context>
       </div>
+      <Pagination aria-label='Sidenavigering' data-size='xs'>
+        <Pagination.List>
+          <Pagination.Item>
+            <Pagination.Button aria-label='Forrige side' {...prevButtonProps}>
+              Forrige
+            </Pagination.Button>
+          </Pagination.Item>
+          {pages.map(({ page, itemKey, buttonProps }) => (
+            <Pagination.Item key={itemKey}>
+              <Pagination.Button {...buttonProps} aria-label={`Side ${page}`}>
+                {page}
+              </Pagination.Button>
+            </Pagination.Item>
+          ))}
+          <Pagination.Item>
+            <Pagination.Button aria-label='Neste side' {...nextButtonProps}>
+              Neste
+            </Pagination.Button>
+          </Pagination.Item>
+        </Pagination.List>
+      </Pagination>
       <Pagination aria-label='Sidenavigering' size='sm'>
         <Pagination.List>
           <Pagination.Item>
@@ -505,7 +714,7 @@ export const Sizes: StoryFn = () => {
           </Pagination.Item>
         </Pagination.List>
       </Pagination>
-      <Pagination aria-label='Sidenavigering' size='lg'>
+      <Pagination aria-label='Sidenavigering' data-size='xl'>
         <Pagination.List>
           <Pagination.Item>
             <Pagination.Button aria-label='Forrige side' {...prevButtonProps}>
@@ -526,24 +735,51 @@ export const Sizes: StoryFn = () => {
           </Pagination.Item>
         </Pagination.List>
       </Pagination>
+      <div data-size='xs'>
+        <Popover.Context>
+          <Popover.Trigger>My popup</Popover.Trigger>
+          <Popover>popover content</Popover>
+        </Popover.Context>
+      </div>
       <div data-size='sm'>
         <Popover.Context>
-          <Popover.Trigger>My trigger!</Popover.Trigger>
+          <Popover.Trigger>My popup</Popover.Trigger>
           <Popover>popover content</Popover>
         </Popover.Context>
       </div>
       <div data-size='md'>
         <Popover.Context>
-          <Popover.Trigger>My trigger!</Popover.Trigger>
+          <Popover.Trigger>My popup</Popover.Trigger>
           <Popover>popover content</Popover>
         </Popover.Context>
       </div>
-      <div data-size='lg'>
+      <div data-size='xl'>
         <Popover.Context>
-          <Popover.Trigger>My trigger!</Popover.Trigger>
+          <Popover.Trigger>My popup</Popover.Trigger>
           <Popover>popover content</Popover>
         </Popover.Context>
       </div>
+      <Table data-size='xs'>
+        <Table.Head>
+          <Table.Row>
+            <Table.HeaderCell>Header 1</Table.HeaderCell>
+            <Table.HeaderCell>Header 2</Table.HeaderCell>
+            <Table.HeaderCell>Header 3</Table.HeaderCell>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>Cell 1</Table.Cell>
+            <Table.Cell>Cell 2</Table.Cell>
+            <Table.Cell>Cell 3</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>Cell 4</Table.Cell>
+            <Table.Cell>Cell 5</Table.Cell>
+            <Table.Cell>Cell 6</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
       <Table size='sm'>
         <Table.Head>
           <Table.Row>
@@ -586,7 +822,7 @@ export const Sizes: StoryFn = () => {
           </Table.Row>
         </Table.Body>
       </Table>
-      <Table size='lg'>
+      <Table data-size='xl'>
         <Table.Head>
           <Table.Row>
             <Table.HeaderCell>Header 1</Table.HeaderCell>
@@ -607,6 +843,16 @@ export const Sizes: StoryFn = () => {
           </Table.Row>
         </Table.Body>
       </Table>
+      <Tabs data-size='xs' defaultValue='value1'>
+        <Tabs.List>
+          <Tabs.Tab value='value1'>Tab 1</Tabs.Tab>
+          <Tabs.Tab value='value2'>Tab 2</Tabs.Tab>
+          <Tabs.Tab value='value3'>Tab 3</Tabs.Tab>
+        </Tabs.List>
+        <Tabs.Panel value='value1'>content 1</Tabs.Panel>
+        <Tabs.Panel value='value2'>content 2</Tabs.Panel>
+        <Tabs.Panel value='value3'>content 3</Tabs.Panel>
+      </Tabs>
       <Tabs size='sm' defaultValue='value1'>
         <Tabs.List>
           <Tabs.Tab value='value1'>Tab 1</Tabs.Tab>
@@ -627,7 +873,7 @@ export const Sizes: StoryFn = () => {
         <Tabs.Panel value='value2'>content 2</Tabs.Panel>
         <Tabs.Panel value='value3'>content 3</Tabs.Panel>
       </Tabs>
-      <Tabs size='lg' defaultValue='value1'>
+      <Tabs data-size='xl' defaultValue='value1'>
         <Tabs.List>
           <Tabs.Tab value='value1'>Tab 1</Tabs.Tab>
           <Tabs.Tab value='value2'>Tab 2</Tabs.Tab>
@@ -637,9 +883,15 @@ export const Sizes: StoryFn = () => {
         <Tabs.Panel value='value2'>content 2</Tabs.Panel>
         <Tabs.Panel value='value3'>content 3</Tabs.Panel>
       </Tabs>
+      <Tag data-size='xs'>Tag</Tag>
       <Tag size='sm'>Tag</Tag>
       <Tag size='md'>Tag</Tag>
-      <Tag size='lg'>Tag</Tag>
+      <Tag data-size='xl'>Tag</Tag>
+      <ToggleGroup data-size='xs' defaultValue='innboks'>
+        <ToggleGroup.Item value='innboks'>Innboks</ToggleGroup.Item>
+        <ToggleGroup.Item value='utkast'>Utkast</ToggleGroup.Item>
+        <ToggleGroup.Item value='arkiv'>Arkiv</ToggleGroup.Item>
+      </ToggleGroup>
       <ToggleGroup size='sm' defaultValue='innboks'>
         <ToggleGroup.Item value='innboks'>Innboks</ToggleGroup.Item>
         <ToggleGroup.Item value='utkast'>Utkast</ToggleGroup.Item>
@@ -650,11 +902,16 @@ export const Sizes: StoryFn = () => {
         <ToggleGroup.Item value='utkast'>Utkast</ToggleGroup.Item>
         <ToggleGroup.Item value='arkiv'>Arkiv</ToggleGroup.Item>
       </ToggleGroup>
-      <ToggleGroup size='lg' defaultValue='innboks'>
+      <ToggleGroup data-size='xl' defaultValue='innboks'>
         <ToggleGroup.Item value='innboks'>Innboks</ToggleGroup.Item>
         <ToggleGroup.Item value='utkast'>Utkast</ToggleGroup.Item>
         <ToggleGroup.Item value='arkiv'>Arkiv</ToggleGroup.Item>
       </ToggleGroup>
+      <div data-size='xs'>
+        <Tooltip content='Tooltip text'>
+          <Button>My tooltip</Button>
+        </Tooltip>
+      </div>
       <div data-size='sm'>
         <Tooltip content='Tooltip text'>
           <Button>My tooltip</Button>
@@ -665,7 +922,7 @@ export const Sizes: StoryFn = () => {
           <Button>My tooltip</Button>
         </Tooltip>
       </div>
-      <div data-size='lg'>
+      <div data-size='xl'>
         <Tooltip content='Tooltip text'>
           <Button>My tooltip</Button>
         </Tooltip>

From 47d3a26c1984c45012385ed9b30c101df0ef0698 Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Tue, 22 Oct 2024 14:47:12 +0200
Subject: [PATCH 11/29] fix(Card): adjust gap and line-height width design

---
 packages/css/accordion.css               |  1 -
 packages/css/base/base.css               | 16 +++--
 packages/css/card.css                    |  3 +-
 packages/css/chip.css                    |  2 +-
 packages/css/dropdown.css                | 23 +-----
 packages/css/error-summary.css           |  1 +
 packages/css/index.css                   | 90 +++---------------------
 packages/css/pagination.css              |  2 +-
 packages/css/paragraph.css               | 54 +-------------
 packages/react/stories/sizes.stories.tsx |  2 +-
 10 files changed, 29 insertions(+), 165 deletions(-)

diff --git a/packages/css/accordion.css b/packages/css/accordion.css
index 060a2626c4..f274749d24 100644
--- a/packages/css/accordion.css
+++ b/packages/css/accordion.css
@@ -78,7 +78,6 @@
     padding: var(--dsc-accordion-padding);
 
     @composes ds-focus from './base/base.css';
-    /* @composes ds-body-text--sm from './base/base.css'; /* TODO fix using font sm */
 
     &:focus-visible {
       position: relative; /* Ensure foucs outline renders on top */
diff --git a/packages/css/base/base.css b/packages/css/base/base.css
index 37a1e31633..ac8dc008ca 100644
--- a/packages/css/base/base.css
+++ b/packages/css/base/base.css
@@ -44,36 +44,36 @@
   outline-offset: var(--dsc-focus-border-width);
 }
 
-/** Body typography */
-.ds-body-text--xs {
+[data-size='xs'] {
   font-weight: var(--ds-body-xs-font-weight);
   line-height: var(--ds-body-xs-line-height);
   font-size: var(--ds-body-xs-font-size);
   letter-spacing: var(--ds-body-xs-letter-spacing);
 }
 
-.ds-body-text--sm {
+[data-size='sm'] {
   font-weight: var(--ds-body-sm-font-weight);
   line-height: var(--ds-body-sm-line-height);
   font-size: var(--ds-body-sm-font-size);
   letter-spacing: var(--ds-body-sm-letter-spacing);
 }
 
-.ds-body-text--md {
+body,
+[data-size='md'] {
   font-weight: var(--ds-body-md-font-weight);
   line-height: var(--ds-body-md-line-height);
   font-size: var(--ds-body-md-font-size);
   letter-spacing: var(--ds-body-md-letter-spacing);
 }
 
-.ds-body-text--lg {
+[data-size='lg'] {
   font-weight: var(--ds-body-lg-font-weight);
   line-height: var(--ds-body-lg-line-height);
   font-size: var(--ds-body-lg-font-size);
   letter-spacing: var(--ds-body-lg-letter-spacing);
 }
 
-.ds-body-text--xl {
+[data-size='xl'] {
   font-weight: var(--ds-body-xl-font-weight);
   line-height: var(--ds-body-xl-line-height);
   font-size: var(--ds-body-xl-font-size);
@@ -81,7 +81,7 @@
 }
 
 /** Heading */
-
+/* TODO: Heading sizes */
 .ds-heading-text--2xs {
   font-weight: var(--ds-heading-2xs-font-weight);
   line-height: var(--ds-heading-2xs-line-height);
@@ -131,6 +131,7 @@
   letter-spacing: var(--ds-heading-2xl-letter-spacing);
 }
 
+/* TODO: Label sizes */
 .ds-label--md {
   font-size: var(--ds-label-md-font-size);
   font-weight: var(--ds-label-md-font-weight);
@@ -159,6 +160,7 @@
   letter-spacing: var(--ds-label-lg-letter-spacing);
 }
 
+/* TODO: Validation sizes */
 .ds-validation-message--xs {
   font-weight: var(--ds-error_message-xs-font-weight);
   line-height: var(--ds-error_message-xs-line-height);
diff --git a/packages/css/card.css b/packages/css/card.css
index 587bf9276f..05fa06b47e 100644
--- a/packages/css/card.css
+++ b/packages/css/card.css
@@ -5,7 +5,7 @@
   --dsc-card-border-color: var(--ds-color-neutral-border-subtle);
   --dsc-card-border: 1px solid var(--dsc-card-border-color);
   --dsc-card-color: var(--ds-color-neutral-text-default);
-  --dsc-card-gap: 1rem;
+  --dsc-card-gap: var(--ds-spacing-3);
   --dsc-card-padding: var(--ds-spacing-6);
 
   background: var(--dsc-card-background);
@@ -15,7 +15,6 @@
   color: var(--dsc-card-color);
   display: block;
   font-family: inherit;
-  line-height: var(--ds-line-height-sm);
   margin: 0;
   overflow: clip; /* Needed to clip media elements and and Card.Block */
   padding: var(--dsc-card-padding);
diff --git a/packages/css/chip.css b/packages/css/chip.css
index 93e3dbd633..2b61dcb013 100644
--- a/packages/css/chip.css
+++ b/packages/css/chip.css
@@ -25,7 +25,7 @@
   text-decoration: none;
 
   &:not([data-size]) {
-    font-size: inherit; /* Ensure inheriting font-size when <button> */
+    font-size: var(--ds-font-size-sm); /* TODO: Fix sizing when changing */
   }
 
   /* Make focus ring also when input inside is focused */
diff --git a/packages/css/dropdown.css b/packages/css/dropdown.css
index 8ba159ef03..ed527ae305 100644
--- a/packages/css/dropdown.css
+++ b/packages/css/dropdown.css
@@ -1,6 +1,5 @@
 .ds-dropdown {
   --dsc-dropdown-padding: var(--ds-spacing-3) var(--ds-spacing-2);
-  --dsc-dropdown-min-width: 16rem;
   --dsc-dropdown-item-padding: 0 var(--ds-spacing-4);
   --dsc-dropdown-header-padding: var(--ds-spacing-2) var(--ds-spacing-4);
 
@@ -10,7 +9,7 @@
   box-shadow: var(--ds-shadow-md);
   box-sizing: border-box;
   list-style: none;
-  min-width: var(--dsc-dropdown-min-width);
+  min-width: 15em;
   padding: var(--dsc-dropdown-padding);
 
   /* Remove popover arrow */
@@ -20,24 +19,8 @@
 
   .ds-dropdown__heading {
     padding: var(--dsc-dropdown-header-padding);
-
-    @composes ds-body-text--md from './base/base.css';
-  }
-
-  &[data-size='sm'] {
-    --dsc-dropdown-min-width: 15rem;
-
-    & .ds-dropdown__heading {
-      @composes ds-body-text--sm from './base/base.css';
-    }
-  }
-
-  &[data-size='lg'] {
-    --dsc-dropdown-min-width: 18rem;
-
-    & .ds-dropdown__heading {
-      @composes ds-body-text--lg from './base/base.css';
-    }
+    margin-block: 0;
+    font-size: inherit;
   }
 
   & :is(a, button, [role='button']) {
diff --git a/packages/css/error-summary.css b/packages/css/error-summary.css
index 9c27a5d830..435d338d1b 100644
--- a/packages/css/error-summary.css
+++ b/packages/css/error-summary.css
@@ -12,6 +12,7 @@
 
   & :is(h1, h2, h3, h4, h5, h6) {
     color: var(--dsc-errorsummary-heading-color);
+    font-size: var(--ds-font-size-lg); /* TODO: Implement */
     margin-bottom: var(--ds-spacing-2);
   }
 
diff --git a/packages/css/index.css b/packages/css/index.css
index 6f9f793378..474c89c93b 100644
--- a/packages/css/index.css
+++ b/packages/css/index.css
@@ -44,53 +44,12 @@
 @import url('./badge.css') layer(ds.components);
 @import url('./avatar.css') layer(ds.components);
 
-/*
-Array.from(
-    { length: 31 },
-    (_, i) =>
-      `--ds-sizing-${i}: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * ${i} + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * ${i}));
-    --ds-spacing-${i}:var(--ds-sizing-${i});`,
-  )
-    .slice(1)
-    .join('\n')
-*/
-
-/* TODO: Move */
-@layer ds.base {
-  [data-size='xs'] {
-    @composes ds-body-text--xs from './base/base.css';
-  }
-
-  [data-size='sm'] {
-    @composes ds-body-text--sm from './base/base.css';
-  }
-
-  body,
-  [data-size='md'] {
-    @composes ds-body-text--md from './base/base.css';
-  }
-
-  [data-size='lg'] {
-    @composes ds-body-text--lg from './base/base.css';
-  }
-
-  [data-size='xl'] {
-    @composes ds-body-text--xl from './base/base.css';
-    font-size: 1.875rem;
-  }
-}
-
 /* TODO: Move */
 :root {
   --ds-sizing-base: 18; /* Unitless base font-size 18px */
   --ds-sizing-step: 4; /* Unitless step size 4px */
   --ds-sizing-scale: var(--ds-sizing-step) / var(--ds-sizing-base);
 
-  /* --ds-sizing-scale-min: 0.125rem; /* Minimum 2px steps */
-  /* --ds-sizing-scale: 0.25rem; /* Default 4px steps */
-  /* --ds-sizing-adjust: calc((var(--ds-sizing-scale-base) - 1em) * 0.5); /* Fallback if not supporting round() */
-  /* --ds-sizing-adjust: round(up, calc((var(--ds-sizing-scale-base) - 1em) * 0.5), 0.0625rem);
-
   /* Sizing */
   --ds-sizing-1: round(down, calc(var(--ds-sizing-scale) * 1em), 0.0625rem);
   --ds-sizing-2: round(down, calc(var(--ds-sizing-scale) * 2em), 0.0625rem);
@@ -123,38 +82,16 @@ Array.from(
   --ds-sizing-29: round(down, calc(var(--ds-sizing-scale) * 29em), 0.0625rem);
   --ds-sizing-30: round(down, calc(var(--ds-sizing-scale) * 30em), 0.0625rem);
 
-  /*--ds-sizing-1: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 1 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 1));
-  --ds-sizing-2: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 2 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 2));
-  --ds-sizing-3: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 3 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 3));
-  --ds-sizing-4: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 4 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 4));
-  --ds-sizing-5: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 5 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 5));
-  --ds-sizing-6: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 6 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 6));
-  --ds-sizing-7: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 7 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 7));
-  --ds-sizing-8: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 8 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 8));
-  --ds-sizing-9: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 9 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 9));
-  --ds-sizing-10: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 10 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 10));
-  --ds-sizing-11: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 11 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 11));
-  --ds-sizing-12: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 12 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 12));
-  --ds-sizing-13: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 13 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 13));
-  --ds-sizing-14: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 14 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 14));
-  --ds-sizing-15: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 15 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 15));
-  --ds-sizing-16: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 16 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 16));
-  --ds-sizing-17: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 17 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 17));
-  --ds-sizing-18: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 18 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 18));
-  --ds-sizing-19: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 19 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 19));
-  --ds-sizing-20: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 20 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 20));
-  --ds-sizing-21: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 21 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 21));
-  --ds-sizing-22: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 22 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 22));
-  --ds-sizing-23: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 23 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 23));
-  --ds-sizing-24: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 24 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 24));
-  --ds-sizing-25: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 25 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 25));
-  --ds-sizing-26: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 26 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 26));
-  --ds-sizing-27: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 27 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 27));
-  --ds-sizing-28: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 28 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 28));
-  --ds-sizing-29: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 29 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 29));
-  --ds-sizing-30: max(calc((var(--ds-sizing-scale) - var(--ds-sizing-adjust)) * 30 + var(--ds-sizing-adjust)), calc(var(--ds-sizing-scale-min) * 30));*/
-
   /* Spacing */
+  --ds-spacing-1: var(--ds-sizing-1);
+  --ds-spacing-2: var(--ds-sizing-2);
+  --ds-spacing-3: var(--ds-sizing-3);
+  --ds-spacing-4: var(--ds-sizing-4);
+  --ds-spacing-5: var(--ds-sizing-5);
+  --ds-spacing-6: var(--ds-sizing-6);
+  --ds-spacing-7: var(--ds-sizing-7);
+  --ds-spacing-8: var(--ds-sizing-8);
+  --ds-spacing-9: var(--ds-sizing-9);
   --ds-spacing-10: var(--ds-sizing-10);
   --ds-spacing-11: var(--ds-sizing-11);
   --ds-spacing-12: var(--ds-sizing-12);
@@ -165,7 +102,6 @@ Array.from(
   --ds-spacing-17: var(--ds-sizing-17);
   --ds-spacing-18: var(--ds-sizing-18);
   --ds-spacing-19: var(--ds-sizing-19);
-  --ds-spacing-1: var(--ds-sizing-1);
   --ds-spacing-20: var(--ds-sizing-20);
   --ds-spacing-21: var(--ds-sizing-21);
   --ds-spacing-22: var(--ds-sizing-22);
@@ -176,13 +112,5 @@ Array.from(
   --ds-spacing-27: var(--ds-sizing-27);
   --ds-spacing-28: var(--ds-sizing-28);
   --ds-spacing-29: var(--ds-sizing-29);
-  --ds-spacing-2: var(--ds-sizing-2);
   --ds-spacing-30: var(--ds-sizing-30);
-  --ds-spacing-3: var(--ds-sizing-3);
-  --ds-spacing-4: var(--ds-sizing-4);
-  --ds-spacing-5: var(--ds-sizing-5);
-  --ds-spacing-6: var(--ds-sizing-6);
-  --ds-spacing-7: var(--ds-sizing-7);
-  --ds-spacing-8: var(--ds-sizing-8);
-  --ds-spacing-9: var(--ds-sizing-9);
 }
diff --git a/packages/css/pagination.css b/packages/css/pagination.css
index 6569328c5b..4c3f9effef 100644
--- a/packages/css/pagination.css
+++ b/packages/css/pagination.css
@@ -1,5 +1,5 @@
 .ds-pagination {
-  --dsc-pagination-gap: var(--ds-spacing-4);
+  --dsc-pagination-gap: var(--ds-spacing-2);
   --dsc-pagination-ellipsis-width: var(--ds-sizing-12);
   --dsc-pagination-chevron-size: var(--ds-sizing-6);
   --dsc-pagination-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M9.47 5.97a.75.75 0 0 1 1.06 0l5.5 5.5a.75.75 0 0 1 0 1.06l-5.5 5.5a.75.75 0 1 1-1.06-1.06L14.44 12 9.47 7.03a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");
diff --git a/packages/css/paragraph.css b/packages/css/paragraph.css
index d164a8a540..0aaf069d77 100644
--- a/packages/css/paragraph.css
+++ b/packages/css/paragraph.css
@@ -1,59 +1,11 @@
 .ds-paragraph {
-  margin: 0;
-
-  &[data-size='xs'] {
-    @composes ds-body-text--xs from './base/base.css';
-  }
-
-  &[data-size='sm'] {
-    @composes ds-body-text--sm from './base/base.css';
-  }
-
-  &[data-size='lg'] {
-    @composes ds-body-text--lg from './base/base.css';
-  }
-
-  &[data-size='xl'] {
-    @composes ds-body-text--xl from './base/base.css';
-  }
+  margin-block: 0;
 
   &[data-variant='long'] {
-    @composes ds-body-text--long-md from './base/base.css';
-
-    &[data-size='xs'] {
-      @composes ds-body-text--long-xs from './base/base.css';
-    }
-
-    &[data-size='sm'] {
-      @composes ds-body-text--long-sm from './base/base.css';
-    }
-
-    &[data-size='lg'] {
-      @composes ds-body-text--long-lg from './base/base.css';
-    }
-
-    &[data-size='xl'] {
-      @composes ds-body-text--long-xl from './base/base.css';
-    }
+    line-height: var(--ds-line-height-lg);
   }
 
   &[data-variant='short'] {
-    @composes ds-body-text--short-md from './base/base.css';
-
-    &[data-size='xs'] {
-      @composes ds-body-text--short-xs from './base/base.css';
-    }
-
-    &[data-size='sm'] {
-      @composes ds-body-text--short-sm from './base/base.css';
-    }
-
-    &[data-size='lg'] {
-      @composes ds-body-text--short-lg from './base/base.css';
-    }
-
-    &[data-size='xl'] {
-      @composes ds-body-text--short-xl from './base/base.css';
-    }
+    line-height: var(--ds-line-height-sm);
   }
 }
diff --git a/packages/react/stories/sizes.stories.tsx b/packages/react/stories/sizes.stories.tsx
index d452f2b6ff..8f8803cc08 100644
--- a/packages/react/stories/sizes.stories.tsx
+++ b/packages/react/stories/sizes.stories.tsx
@@ -65,7 +65,7 @@ export const Sizes: StoryFn = () => {
       <div>14px</div>
       <div>16px</div>
       <div>18px</div>
-      <div>30px</div>
+      <div>24px</div>
       <Accordion data-size='xs'>
         <Accordion.Item>
           <Accordion.Heading>

From fae310093d80a00d4262d62470881d8056115175 Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Tue, 22 Oct 2024 14:57:00 +0200
Subject: [PATCH 12/29] chore: remove undefined size

---
 packages/react/src/components/Alert/Alert.tsx                 | 2 +-
 packages/react/src/components/Avatar/Avatar.tsx               | 2 --
 packages/react/src/components/Badge/Badge.tsx                 | 2 --
 packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx     | 1 -
 packages/react/src/components/Button/Button.tsx               | 3 +--
 packages/react/src/components/Chip/Chips.tsx                  | 1 -
 packages/react/src/components/HelpText/HelpText.tsx           | 1 -
 packages/react/src/components/Label/Label.tsx                 | 3 +--
 packages/react/src/components/List/Lists.tsx                  | 4 +---
 packages/react/src/components/Modal/Modal.tsx                 | 1 -
 packages/react/src/components/Pagination/Pagination.tsx       | 2 +-
 packages/react/src/components/Paragraph/Paragraph.tsx         | 3 +--
 packages/react/src/components/Popover/Popover.tsx             | 3 +--
 packages/react/src/components/Table/Table.tsx                 | 3 +--
 packages/react/src/components/Tabs/Tabs.tsx                   | 3 +--
 packages/react/src/components/Tag/Tag.tsx                     | 3 +--
 packages/react/src/components/ToggleGroup/ToggleGroup.tsx     | 3 +--
 .../src/components/ValidationMessage/ValidationMessage.tsx    | 3 +--
 packages/react/src/components/form/Input/Input.tsx            | 3 +--
 packages/react/src/components/loaders/Spinner/Spinner.tsx     | 3 +--
 20 files changed, 14 insertions(+), 35 deletions(-)

diff --git a/packages/react/src/components/Alert/Alert.tsx b/packages/react/src/components/Alert/Alert.tsx
index 116ebec6d3..c4b5bf27e4 100644
--- a/packages/react/src/components/Alert/Alert.tsx
+++ b/packages/react/src/components/Alert/Alert.tsx
@@ -12,7 +12,7 @@ export type AlertProps = {
    * Sets the size of the alert.
    * Does not affect font size.
    */
-  size?: undefined | 'sm' | 'md' | 'lg';
+  size?: 'sm' | 'md' | 'lg';
 } & HTMLAttributes<HTMLDivElement>;
 
 /**
diff --git a/packages/react/src/components/Avatar/Avatar.tsx b/packages/react/src/components/Avatar/Avatar.tsx
index 4ab0181f73..fd8be8d054 100644
--- a/packages/react/src/components/Avatar/Avatar.tsx
+++ b/packages/react/src/components/Avatar/Avatar.tsx
@@ -16,8 +16,6 @@ export type AvatarProps = {
   color?: 'accent' | 'neutral' | 'brand1' | 'brand2' | 'brand3';
   /**
    * The size of the avatar.
-   *
-   * @default 'md'
    */
   size?: 'xs' | 'sm' | 'md' | 'lg';
   /**
diff --git a/packages/react/src/components/Badge/Badge.tsx b/packages/react/src/components/Badge/Badge.tsx
index 99215a8787..d9d2efb41e 100644
--- a/packages/react/src/components/Badge/Badge.tsx
+++ b/packages/react/src/components/Badge/Badge.tsx
@@ -10,8 +10,6 @@ export type BadgeProps = {
   color?: 'accent' | 'info' | 'success' | 'warning' | 'danger' | 'neutral';
   /**
    * The size of the badge
-   *
-   * @default md
    */
   size?: 'sm' | 'md' | 'lg';
   /**
diff --git a/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx
index 304bce93d5..c59057454a 100644
--- a/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -9,7 +9,6 @@ export type BreadcrumbsProps = {
   'aria-label'?: string;
   /**
    * Sets the size of the component
-   * @default md
    */
   size?: 'sm' | 'md' | 'lg';
 } & HTMLAttributes<HTMLElement>;
diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx
index b525257c05..59adebbf7c 100644
--- a/packages/react/src/components/Button/Button.tsx
+++ b/packages/react/src/components/Button/Button.tsx
@@ -16,9 +16,8 @@ export type ButtonProps = {
   color?: 'accent' | 'neutral' | 'danger';
   /**
    * Size
-   * @default undefined
    */
-  size?: undefined | 'sm' | 'md' | 'lg';
+  size?: 'sm' | 'md' | 'lg';
   /** Toggle icon only styling, pass icon as children
    * @default false
    */
diff --git a/packages/react/src/components/Chip/Chips.tsx b/packages/react/src/components/Chip/Chips.tsx
index 8f633f852d..9d5360b2ab 100644
--- a/packages/react/src/components/Chip/Chips.tsx
+++ b/packages/react/src/components/Chip/Chips.tsx
@@ -6,7 +6,6 @@ import type { ButtonHTMLAttributes, InputHTMLAttributes } from 'react';
 type ChipBaseProps = {
   /**
    * Size
-   * @default md
    */
   size?: 'sm' | 'md' | 'lg';
   /**
diff --git a/packages/react/src/components/HelpText/HelpText.tsx b/packages/react/src/components/HelpText/HelpText.tsx
index 81b30608d8..f440d029dc 100644
--- a/packages/react/src/components/HelpText/HelpText.tsx
+++ b/packages/react/src/components/HelpText/HelpText.tsx
@@ -12,7 +12,6 @@ export type HelpTextProps = {
   'aria-label': string;
   /**
    * Size of the helptext
-   * @default undefined
    */
   size?: PopoverProps['size'];
   /**
diff --git a/packages/react/src/components/Label/Label.tsx b/packages/react/src/components/Label/Label.tsx
index 36fd039b6e..6e8627257c 100644
--- a/packages/react/src/components/Label/Label.tsx
+++ b/packages/react/src/components/Label/Label.tsx
@@ -7,9 +7,8 @@ import { forwardRef } from 'react';
 export type LabelProps = {
   /**
    * Changes text sizing
-   * @default undefined
    */
-  size?: undefined | 'xs' | 'sm' | 'md' | 'lg';
+  size?: 'xs' | 'sm' | 'md' | 'lg';
   /**
    * Adjusts font weight. Use this when you have a label hierarchy, such as checkboxes/radios in a fieldset
    * @default 'medium'
diff --git a/packages/react/src/components/List/Lists.tsx b/packages/react/src/components/List/Lists.tsx
index 6b23ab3ecb..a8265a39c5 100644
--- a/packages/react/src/components/List/Lists.tsx
+++ b/packages/react/src/components/List/Lists.tsx
@@ -11,10 +11,8 @@ type ListBaseProps = {
   asChild?: boolean;
   /**
    * Changes text sizing
-   * @default undefined
-   *
    */
-  size?: undefined | 'sm' | 'md' | 'lg';
+  size?: 'sm' | 'md' | 'lg';
 };
 
 export type ListUnorderedProps = ListBaseProps &
diff --git a/packages/react/src/components/Modal/Modal.tsx b/packages/react/src/components/Modal/Modal.tsx
index cf7dfbeb97..686ff41a29 100644
--- a/packages/react/src/components/Modal/Modal.tsx
+++ b/packages/react/src/components/Modal/Modal.tsx
@@ -20,7 +20,6 @@ export type ModalProps = {
   backdropClose?: boolean;
   /**
    * Callback that is called when the modal is closed.
-   * @default undefined
    */
   onClose?: () => void;
   asChild?: boolean;
diff --git a/packages/react/src/components/Pagination/Pagination.tsx b/packages/react/src/components/Pagination/Pagination.tsx
index 1900d08643..644c52cc00 100644
--- a/packages/react/src/components/Pagination/Pagination.tsx
+++ b/packages/react/src/components/Pagination/Pagination.tsx
@@ -12,7 +12,7 @@ export type PaginationProps = {
   /** Sets the size of the component
    * @default md
    */
-  size?: undefined | 'sm' | 'md' | 'lg';
+  size?: 'sm' | 'md' | 'lg';
   /**
    * Change the default rendered element for the one passed as a child, merging their props and behavior.
    * @default false
diff --git a/packages/react/src/components/Paragraph/Paragraph.tsx b/packages/react/src/components/Paragraph/Paragraph.tsx
index d649e3e716..3d6803a492 100644
--- a/packages/react/src/components/Paragraph/Paragraph.tsx
+++ b/packages/react/src/components/Paragraph/Paragraph.tsx
@@ -6,9 +6,8 @@ import { forwardRef } from 'react';
 export type ParagraphProps = {
   /**
    * Changes text sizing
-   * @default undefined
    */
-  size?: undefined | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
   /**
    *  Adjusts styling for paragraph length
    *  @default 'default'
diff --git a/packages/react/src/components/Popover/Popover.tsx b/packages/react/src/components/Popover/Popover.tsx
index 5a08d89be2..657d181e82 100644
--- a/packages/react/src/components/Popover/Popover.tsx
+++ b/packages/react/src/components/Popover/Popover.tsx
@@ -54,9 +54,8 @@ export type PopoverProps = {
   open?: boolean;
   /**
    * Size of the popover
-   * @default undefined
    */
-  size?: undefined | 'sm' | 'md' | 'lg';
+  size?: 'sm' | 'md' | 'lg';
   /**
    * Callback when the popover wants to open.
    */
diff --git a/packages/react/src/components/Table/Table.tsx b/packages/react/src/components/Table/Table.tsx
index 211779413f..5b4121ad04 100644
--- a/packages/react/src/components/Table/Table.tsx
+++ b/packages/react/src/components/Table/Table.tsx
@@ -5,9 +5,8 @@ import type { TableHTMLAttributes } from 'react';
 export type TableProps = {
   /**
    * The size of the table
-   * @default undefined
    */
-  size?: undefined | 'sm' | 'md' | 'lg';
+  size?: 'sm' | 'md' | 'lg';
   /**
    * If true, the table will have zebra striping
    * @default false
diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/Tabs/Tabs.tsx
index 7b52bbe540..39eec9f719 100644
--- a/packages/react/src/components/Tabs/Tabs.tsx
+++ b/packages/react/src/components/Tabs/Tabs.tsx
@@ -11,9 +11,8 @@ export type TabsProps = {
   onChange?: (value: string) => void;
   /**
    * Changes items size and paddings
-   * @default undefined
    */
-  size?: undefined | 'sm' | 'md' | 'lg';
+  size?: 'sm' | 'md' | 'lg';
 } & Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'>;
 
 export type ContextProps = {
diff --git a/packages/react/src/components/Tag/Tag.tsx b/packages/react/src/components/Tag/Tag.tsx
index a1a399935b..c0478688ae 100644
--- a/packages/react/src/components/Tag/Tag.tsx
+++ b/packages/react/src/components/Tag/Tag.tsx
@@ -18,9 +18,8 @@ export type TagProps = {
     | 'brand3';
   /**
    * Size of the tag
-   * @default undefined
    */
-  size?: undefined | 'sm' | 'md' | 'lg';
+  size?: 'sm' | 'md' | 'lg';
 } & HTMLAttributes<HTMLSpanElement>;
 
 /**
diff --git a/packages/react/src/components/ToggleGroup/ToggleGroup.tsx b/packages/react/src/components/ToggleGroup/ToggleGroup.tsx
index 9ce1cd368b..f3dc4b8489 100644
--- a/packages/react/src/components/ToggleGroup/ToggleGroup.tsx
+++ b/packages/react/src/components/ToggleGroup/ToggleGroup.tsx
@@ -24,9 +24,8 @@ export type ToggleGroupProps = {
   name?: string;
   /**
    * Size
-   * @default undefined
    */
-  size?: undefined | 'sm' | 'md' | 'lg';
+  size?: 'sm' | 'md' | 'lg';
 } & Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'onChange'>;
 
 /**
diff --git a/packages/react/src/components/ValidationMessage/ValidationMessage.tsx b/packages/react/src/components/ValidationMessage/ValidationMessage.tsx
index 6c74e38adb..09966d4825 100644
--- a/packages/react/src/components/ValidationMessage/ValidationMessage.tsx
+++ b/packages/react/src/components/ValidationMessage/ValidationMessage.tsx
@@ -7,9 +7,8 @@ import { forwardRef } from 'react';
 export type ValidationMessageProps = {
   /**
    * Changes text sizing
-   * @default undefined
    */
-  size?: undefined | 'xs' | 'sm' | 'md' | 'lg';
+  size?: 'xs' | 'sm' | 'md' | 'lg';
   /** Toggle error color */
   error?: boolean;
   /**
diff --git a/packages/react/src/components/form/Input/Input.tsx b/packages/react/src/components/form/Input/Input.tsx
index 5efaeccd66..de5f659cd0 100644
--- a/packages/react/src/components/form/Input/Input.tsx
+++ b/packages/react/src/components/form/Input/Input.tsx
@@ -6,9 +6,8 @@ type InputAttr = InputHTMLAttributes<HTMLInputElement>;
 export type InputProps = {
   /**
    * Changes field size and paddings
-   * @default undefined
    */
-  size?: undefined | 'sm' | 'md' | 'lg';
+  size?: 'sm' | 'md' | 'lg';
   /** Supported `input` types */
   type?: InputAttr['type'];
   /** Exposes the HTML `size` attribute.
diff --git a/packages/react/src/components/loaders/Spinner/Spinner.tsx b/packages/react/src/components/loaders/Spinner/Spinner.tsx
index c0d03b4c84..f2d8a7fe41 100644
--- a/packages/react/src/components/loaders/Spinner/Spinner.tsx
+++ b/packages/react/src/components/loaders/Spinner/Spinner.tsx
@@ -8,9 +8,8 @@ export type SpinnerProps = {
   title: string;
   /**
    * Spinner size
-   * @default undefined
    */
-  size?: undefined | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
   /**
    * Spinner appearance
    * @default neutral

From bf1deff712af6bf96c7cc6cb147a76534fc01262 Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Tue, 22 Oct 2024 15:03:12 +0200
Subject: [PATCH 13/29] chore: cleanup

---
 packages/css/chip.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/css/chip.css b/packages/css/chip.css
index b9a6d9e581..7221ad70e5 100644
--- a/packages/css/chip.css
+++ b/packages/css/chip.css
@@ -25,7 +25,7 @@
   text-decoration: none;
 
   &:not([data-size]) {
-    font-size: var(--ds-font-size-sm); /* TODO: Fix sizing when changing */
+    font-size: var(--ds-font-size-sm);
   }
 
   /* Make focus ring also when input inside is focused */

From 11e60e9459300a36f2adb32b9748bba9fe5310ad Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Tue, 22 Oct 2024 15:07:53 +0200
Subject: [PATCH 14/29] fix: relative font-sizes

---
 packages/css/badge.css         | 2 +-
 packages/css/base/base.css     | 6 ++++--
 packages/css/chip.css          | 2 +-
 packages/css/error-summary.css | 2 +-
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/css/badge.css b/packages/css/badge.css
index d1d6e5984b..b082f4f7d3 100644
--- a/packages/css/badge.css
+++ b/packages/css/badge.css
@@ -23,7 +23,7 @@
   }
 
   &:not([data-size]) {
-    font-size: var(--ds-font-size-sm); /* Default to small when size is not defined */
+    font-size: var(--ds-font-size-smaller); /* Default to small when size is not defined */
   }
 
   &[data-color='info'] {
diff --git a/packages/css/base/base.css b/packages/css/base/base.css
index ac8dc008ca..4e9d1d22d8 100644
--- a/packages/css/base/base.css
+++ b/packages/css/base/base.css
@@ -17,8 +17,10 @@
   --dsc-focus-border-width: 3px; /* Default focus border width */
   --dsc-focus-boxShadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner);
   --dsc-focus-outline: var(--ds-color-focus-outer) solid var(--dsc-focus-border-width);
-  --ds-font-size-sm: max(.9em, .875rem); /* Fallback if not supporting round() */
-  --ds-font-size-sm: round(down, max(.9em, .875rem), 1px); /* Default to 90% of font-size, but minimum 14px */
+  --ds-font-size-smaller: max(.9em, .875rem); /* Fallback if not supporting round() */
+  --ds-font-size-smaller: round(down, max(.9em, .875rem), 1px); /* Default to 90% of font-size, but minimum 14px */
+  --ds-font-size-larger: 1.1em; /* Fallback if not supporting round() */
+  --ds-font-size-larger: round(down, 1.1em, 1px); /* Default to 90% */
 
   color: var(--ds-color-neutral-text-default);
   background-color: var(--ds-color-neutral-background-default);
diff --git a/packages/css/chip.css b/packages/css/chip.css
index 7221ad70e5..98183ac5de 100644
--- a/packages/css/chip.css
+++ b/packages/css/chip.css
@@ -25,7 +25,7 @@
   text-decoration: none;
 
   &:not([data-size]) {
-    font-size: var(--ds-font-size-sm);
+    font-size: var(--ds-font-size-smaller);
   }
 
   /* Make focus ring also when input inside is focused */
diff --git a/packages/css/error-summary.css b/packages/css/error-summary.css
index eb72d9f9a7..84fbf75e2e 100644
--- a/packages/css/error-summary.css
+++ b/packages/css/error-summary.css
@@ -12,7 +12,7 @@
 
   & :is(h1, h2, h3, h4, h5, h6) {
     color: var(--dsc-errorsummary-heading-color);
-    font-size: var(--ds-font-size-lg); /* TODO: Implement */
+    font-size: var(--ds-font-size-larger);
     margin-bottom: var(--ds-spacing-2);
   }
 

From 734e7197e7a500e9311d97810c879f749feb134e Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Tue, 22 Oct 2024 15:20:49 +0200
Subject: [PATCH 15/29] chore: make shared type

---
 packages/css/spinner.css                      |  5 ++--
 packages/react/src/components/Alert/Alert.tsx |  3 ++-
 .../react/src/components/Avatar/Avatar.tsx    |  3 ++-
 packages/react/src/components/Badge/Badge.tsx |  3 ++-
 .../components/Breadcrumbs/Breadcrumbs.tsx    |  3 ++-
 .../react/src/components/Button/Button.tsx    |  3 ++-
 packages/react/src/components/Chip/Chips.tsx  |  3 ++-
 .../components/ErrorSummary/ErrorSummary.tsx  |  9 +++----
 .../ErrorSummary/ErrorSummaryHeading.tsx      | 26 +++++++------------
 .../ErrorSummary/ErrorSummaryList.tsx         |  3 +--
 .../src/components/HelpText/HelpText.tsx      |  5 ++--
 .../src/components/Pagination/Pagination.tsx  |  3 ++-
 .../react/src/components/Popover/Popover.tsx  |  3 ++-
 packages/react/src/components/Table/Table.tsx |  3 ++-
 packages/react/src/components/Tabs/Tabs.tsx   |  5 ++--
 packages/react/src/components/Tag/Tag.tsx     |  3 ++-
 .../components/ToggleGroup/ToggleGroup.tsx    |  3 ++-
 .../react/src/components/Tooltip/Tooltip.tsx  |  2 +-
 .../ValidationMessage/ValidationMessage.tsx   |  3 ++-
 .../src/components/form/Combobox/Combobox.tsx |  2 +-
 .../react/src/components/form/Input/Input.tsx |  3 ++-
 .../src/components/form/Search/Search.tsx     |  3 ++-
 .../src/components/form/Select/Select.tsx     |  3 ++-
 .../src/components/form/Textarea/Textarea.tsx |  3 ++-
 .../components/form/Textfield/Textfield.tsx   |  3 ++-
 .../react/src/components/form/useFormField.ts |  3 ++-
 .../react/src/{types/Portal.ts => types.ts}   |  3 +++
 27 files changed, 63 insertions(+), 51 deletions(-)
 rename packages/react/src/{types/Portal.ts => types.ts} (81%)

diff --git a/packages/css/spinner.css b/packages/css/spinner.css
index 06d82a6af3..9e5912899a 100644
--- a/packages/css/spinner.css
+++ b/packages/css/spinner.css
@@ -13,7 +13,8 @@
     --dsc-spinner-stroke: var(--ds-color-accent-base-default);
   }
 
-  /* &[data-size='2xs'] {
+  /* TODO: Fix */
+  &[data-size='2xs'] {
     --dsc-spinner-size: var(--ds-sizing-3);
   }
 
@@ -31,7 +32,7 @@
 
   &[data-size='xl'] {
     --dsc-spinner-size: var(--ds-sizing-22);
-  } */
+  }
 }
 
 .ds-spinner__background {
diff --git a/packages/react/src/components/Alert/Alert.tsx b/packages/react/src/components/Alert/Alert.tsx
index c4b5bf27e4..7eea2dd392 100644
--- a/packages/react/src/components/Alert/Alert.tsx
+++ b/packages/react/src/components/Alert/Alert.tsx
@@ -1,6 +1,7 @@
 import cl from 'clsx/lite';
 import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
+import type { Size } from '../../types';
 
 export type AlertProps = {
   /**
@@ -12,7 +13,7 @@ export type AlertProps = {
    * Sets the size of the alert.
    * Does not affect font size.
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Size;
 } & HTMLAttributes<HTMLDivElement>;
 
 /**
diff --git a/packages/react/src/components/Avatar/Avatar.tsx b/packages/react/src/components/Avatar/Avatar.tsx
index fd8be8d054..de1d7ae648 100644
--- a/packages/react/src/components/Avatar/Avatar.tsx
+++ b/packages/react/src/components/Avatar/Avatar.tsx
@@ -2,6 +2,7 @@ import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { Fragment, forwardRef } from 'react';
 import type { HTMLAttributes, ReactNode } from 'react';
+import type { Size } from '../../types';
 
 export type AvatarProps = {
   /**
@@ -17,7 +18,7 @@ export type AvatarProps = {
   /**
    * The size of the avatar.
    */
-  size?: 'xs' | 'sm' | 'md' | 'lg';
+  size?: Size;
   /**
    * The shape of the avatar.
    *
diff --git a/packages/react/src/components/Badge/Badge.tsx b/packages/react/src/components/Badge/Badge.tsx
index d9d2efb41e..2819b5dc9b 100644
--- a/packages/react/src/components/Badge/Badge.tsx
+++ b/packages/react/src/components/Badge/Badge.tsx
@@ -1,5 +1,6 @@
 import cl from 'clsx/lite';
 import { type HTMLAttributes, type ReactNode, forwardRef } from 'react';
+import type { Size } from '../../types';
 
 export type BadgeProps = {
   /**
@@ -11,7 +12,7 @@ export type BadgeProps = {
   /**
    * The size of the badge
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Size;
   /**
    * The number to display in the badge
    */
diff --git a/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx
index c59057454a..ff67724b16 100644
--- a/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -1,5 +1,6 @@
 import cl from 'clsx/lite';
 import { type HTMLAttributes, forwardRef } from 'react';
+import type { Size } from '../../types';
 
 export type BreadcrumbsProps = {
   /**
@@ -10,7 +11,7 @@ export type BreadcrumbsProps = {
   /**
    * Sets the size of the component
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Size;
 } & HTMLAttributes<HTMLElement>;
 
 export const Breadcrumbs = forwardRef<HTMLElement, BreadcrumbsProps>(
diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx
index 59adebbf7c..a3cff1f39d 100644
--- a/packages/react/src/components/Button/Button.tsx
+++ b/packages/react/src/components/Button/Button.tsx
@@ -2,6 +2,7 @@ import { Slot, Slottable } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 import type { ButtonHTMLAttributes } from 'react';
+import type { Size } from '../../types';
 import { Spinner } from '../loaders/Spinner';
 
 export type ButtonProps = {
@@ -17,7 +18,7 @@ export type ButtonProps = {
   /**
    * Size
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Size;
   /** Toggle icon only styling, pass icon as children
    * @default false
    */
diff --git a/packages/react/src/components/Chip/Chips.tsx b/packages/react/src/components/Chip/Chips.tsx
index 9d5360b2ab..dcf14c562d 100644
--- a/packages/react/src/components/Chip/Chips.tsx
+++ b/packages/react/src/components/Chip/Chips.tsx
@@ -2,12 +2,13 @@ import { Slot, Slottable } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 import type { ButtonHTMLAttributes, InputHTMLAttributes } from 'react';
+import type { Size } from '../../types';
 
 type ChipBaseProps = {
   /**
    * Size
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Size;
   /**
    * Change the default rendered element for the one passed as a child, merging their props and behavior.
    * @default false
diff --git a/packages/react/src/components/ErrorSummary/ErrorSummary.tsx b/packages/react/src/components/ErrorSummary/ErrorSummary.tsx
index e27048dbe2..fbdc001310 100644
--- a/packages/react/src/components/ErrorSummary/ErrorSummary.tsx
+++ b/packages/react/src/components/ErrorSummary/ErrorSummary.tsx
@@ -1,23 +1,20 @@
 import cl from 'clsx/lite';
 import { createContext, forwardRef, useId, useState } from 'react';
 import type { HTMLAttributes } from 'react';
-
-import type { ListUnorderedProps } from '../List';
+import type { Size } from '../../types';
 
 type ErrorSummaryContextType = {
-  size: ListUnorderedProps['size'];
   headingId?: string;
   setHeadingId: (id: string) => void;
 };
 
 export const ErrorSummaryContext = createContext<ErrorSummaryContextType>({
-  size: 'md',
   headingId: 'heading',
   setHeadingId: () => {},
 });
 
 export type ErrorSummaryProps = {
-  size?: ListUnorderedProps['size'];
+  size?: Size;
 } & HTMLAttributes<HTMLDivElement>;
 
 export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
@@ -36,7 +33,7 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
     const [headingId, setHeadingId] = useState<string>(randomId);
 
     return (
-      <ErrorSummaryContext.Provider value={{ size, headingId, setHeadingId }}>
+      <ErrorSummaryContext.Provider value={{ headingId, setHeadingId }}>
         <div
           aria-labelledby={headingId}
           aria-live={ariaLive}
diff --git a/packages/react/src/components/ErrorSummary/ErrorSummaryHeading.tsx b/packages/react/src/components/ErrorSummary/ErrorSummaryHeading.tsx
index ecdc576e15..8e5b145c9c 100644
--- a/packages/react/src/components/ErrorSummary/ErrorSummaryHeading.tsx
+++ b/packages/react/src/components/ErrorSummary/ErrorSummaryHeading.tsx
@@ -4,13 +4,14 @@ import { ErrorSummaryContext, type ErrorSummaryProps } from './ErrorSummary';
 
 export type ErrorSummaryHeadingProps = HeadingProps;
 
-const HEADING_SIZE_MAP: {
-  [key in NonNullable<ErrorSummaryProps['size']>]: HeadingProps['size'];
-} = {
-  sm: '2xs',
-  md: 'xs',
-  lg: 'sm',
-} as const;
+// TODO
+// const HEADING_SIZE_MAP: {
+//   [key in NonNullable<ErrorSummaryProps['size']>]: HeadingProps['size'];
+// } = {
+//   sm: '2xs',
+//   md: 'xs',
+//   lg: 'sm',
+// } as const;
 
 export const ErrorSummaryHeading = forwardRef<
   HTMLHeadingElement,
@@ -19,18 +20,11 @@ export const ErrorSummaryHeading = forwardRef<
   { className, id, ...rest }: ErrorSummaryHeadingProps,
   ref,
 ) {
-  const { size, headingId, setHeadingId } = useContext(ErrorSummaryContext);
+  const { headingId, setHeadingId } = useContext(ErrorSummaryContext);
 
   useEffect(() => {
     if (id && headingId !== id) setHeadingId(id);
   }, [headingId, id, setHeadingId]);
 
-  return (
-    <Heading
-      id={headingId}
-      size={HEADING_SIZE_MAP[size ?? 'md']}
-      ref={ref}
-      {...rest}
-    />
-  );
+  return <Heading id={headingId} ref={ref} {...rest} />;
 });
diff --git a/packages/react/src/components/ErrorSummary/ErrorSummaryList.tsx b/packages/react/src/components/ErrorSummary/ErrorSummaryList.tsx
index 42ba5bd1e7..98740c5628 100644
--- a/packages/react/src/components/ErrorSummary/ErrorSummaryList.tsx
+++ b/packages/react/src/components/ErrorSummary/ErrorSummaryList.tsx
@@ -9,6 +9,5 @@ export const ErrorSummaryList = forwardRef<
   HTMLOListElement,
   ErrorSummaryListProps
 >(function ErrorSummaryList({ ...rest }: ErrorSummaryListProps, ref) {
-  const { size } = useContext(ErrorSummaryContext);
-  return <List.Unordered size={size} {...rest} ref={ref} />;
+  return <List.Unordered {...rest} ref={ref} />;
 });
diff --git a/packages/react/src/components/HelpText/HelpText.tsx b/packages/react/src/components/HelpText/HelpText.tsx
index f440d029dc..9cd53180e5 100644
--- a/packages/react/src/components/HelpText/HelpText.tsx
+++ b/packages/react/src/components/HelpText/HelpText.tsx
@@ -3,7 +3,8 @@ import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 import type { ButtonHTMLAttributes } from 'react';
 
-import { Popover, type PopoverProps } from '../Popover';
+import type { Size } from '../../types';
+import { Popover } from '../Popover';
 
 export type HelpTextProps = {
   /**
@@ -13,7 +14,7 @@ export type HelpTextProps = {
   /**
    * Size of the helptext
    */
-  size?: PopoverProps['size'];
+  size?: Size;
   /**
    * Placement of the Popover.
    * @default 'right'
diff --git a/packages/react/src/components/Pagination/Pagination.tsx b/packages/react/src/components/Pagination/Pagination.tsx
index 644c52cc00..b607abeb03 100644
--- a/packages/react/src/components/Pagination/Pagination.tsx
+++ b/packages/react/src/components/Pagination/Pagination.tsx
@@ -2,6 +2,7 @@ import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 import type { HTMLAttributes } from 'react';
+import type { Size } from '../../types';
 
 export type PaginationProps = {
   /**
@@ -12,7 +13,7 @@ export type PaginationProps = {
   /** Sets the size of the component
    * @default md
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Size;
   /**
    * Change the default rendered element for the one passed as a child, merging their props and behavior.
    * @default false
diff --git a/packages/react/src/components/Popover/Popover.tsx b/packages/react/src/components/Popover/Popover.tsx
index 657d181e82..30309e0a2c 100644
--- a/packages/react/src/components/Popover/Popover.tsx
+++ b/packages/react/src/components/Popover/Popover.tsx
@@ -12,6 +12,7 @@ import cl from 'clsx/lite';
 import { forwardRef, useContext, useRef, useState } from 'react';
 import type { HTMLAttributes } from 'react';
 import { useEffect } from 'react';
+import type { Size } from '../../types';
 import { Context } from './PopoverContext';
 
 const ARROW_HEIGHT = 7;
@@ -55,7 +56,7 @@ export type PopoverProps = {
   /**
    * Size of the popover
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Size;
   /**
    * Callback when the popover wants to open.
    */
diff --git a/packages/react/src/components/Table/Table.tsx b/packages/react/src/components/Table/Table.tsx
index 5b4121ad04..36cbcd346a 100644
--- a/packages/react/src/components/Table/Table.tsx
+++ b/packages/react/src/components/Table/Table.tsx
@@ -1,12 +1,13 @@
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 import type { TableHTMLAttributes } from 'react';
+import type { Size } from '../../types';
 
 export type TableProps = {
   /**
    * The size of the table
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Size;
   /**
    * If true, the table will have zebra striping
    * @default false
diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/Tabs/Tabs.tsx
index 39eec9f719..4615c3bcac 100644
--- a/packages/react/src/components/Tabs/Tabs.tsx
+++ b/packages/react/src/components/Tabs/Tabs.tsx
@@ -1,6 +1,7 @@
 import cl from 'clsx/lite';
 import type { HTMLAttributes } from 'react';
 import { createContext, forwardRef, useState } from 'react';
+import type { Size } from '../../types';
 
 export type TabsProps = {
   /** Controlled state for `Tabs` component. */
@@ -12,14 +13,13 @@ export type TabsProps = {
   /**
    * Changes items size and paddings
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Size;
 } & Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'>;
 
 export type ContextProps = {
   value?: string;
   defaultValue?: string;
   onChange?: (value: string) => void;
-  size?: TabsProps['size'];
 };
 
 export const Context = createContext<ContextProps>({});
@@ -63,7 +63,6 @@ export const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(
         value,
         defaultValue,
         onChange: onValueChange,
-        size,
       }}
     >
       <div
diff --git a/packages/react/src/components/Tag/Tag.tsx b/packages/react/src/components/Tag/Tag.tsx
index c0478688ae..9d301ac9e8 100644
--- a/packages/react/src/components/Tag/Tag.tsx
+++ b/packages/react/src/components/Tag/Tag.tsx
@@ -1,6 +1,7 @@
 import cl from 'clsx/lite';
 import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
+import type { Size } from '../../types';
 
 export type TagProps = {
   /**
@@ -19,7 +20,7 @@ export type TagProps = {
   /**
    * Size of the tag
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Size;
 } & HTMLAttributes<HTMLSpanElement>;
 
 /**
diff --git a/packages/react/src/components/ToggleGroup/ToggleGroup.tsx b/packages/react/src/components/ToggleGroup/ToggleGroup.tsx
index f3dc4b8489..033baac9e4 100644
--- a/packages/react/src/components/ToggleGroup/ToggleGroup.tsx
+++ b/packages/react/src/components/ToggleGroup/ToggleGroup.tsx
@@ -2,6 +2,7 @@ import cl from 'clsx/lite';
 import type { HTMLAttributes } from 'react';
 import { createContext, forwardRef, useId, useState } from 'react';
 
+import type { Size } from '../../types';
 import { RovingFocusRoot } from '../../utilities/RovingFocus';
 
 export type ToggleGroupContextProps = {
@@ -25,7 +26,7 @@ export type ToggleGroupProps = {
   /**
    * Size
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Size;
 } & Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'onChange'>;
 
 /**
diff --git a/packages/react/src/components/Tooltip/Tooltip.tsx b/packages/react/src/components/Tooltip/Tooltip.tsx
index d9b8833dbc..8da94da124 100644
--- a/packages/react/src/components/Tooltip/Tooltip.tsx
+++ b/packages/react/src/components/Tooltip/Tooltip.tsx
@@ -24,7 +24,7 @@ import type {
 } from 'react';
 import { Fragment, cloneElement, forwardRef, useRef, useState } from 'react';
 
-import type { PortalProps } from '../../types/Portal';
+import type { PortalProps } from '../../types';
 
 const ARROW_HEIGHT = 7;
 const ARROW_GAP = 4;
diff --git a/packages/react/src/components/ValidationMessage/ValidationMessage.tsx b/packages/react/src/components/ValidationMessage/ValidationMessage.tsx
index 09966d4825..99ac42117c 100644
--- a/packages/react/src/components/ValidationMessage/ValidationMessage.tsx
+++ b/packages/react/src/components/ValidationMessage/ValidationMessage.tsx
@@ -2,13 +2,14 @@ import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
+import type { Size } from '../../types';
 
 /* TODO: Remove size? */
 export type ValidationMessageProps = {
   /**
    * Changes text sizing
    */
-  size?: 'xs' | 'sm' | 'md' | 'lg';
+  size?: Size;
   /** Toggle error color */
   error?: boolean;
   /**
diff --git a/packages/react/src/components/form/Combobox/Combobox.tsx b/packages/react/src/components/form/Combobox/Combobox.tsx
index c790cec1d6..f43a41c8ff 100644
--- a/packages/react/src/components/form/Combobox/Combobox.tsx
+++ b/packages/react/src/components/form/Combobox/Combobox.tsx
@@ -4,7 +4,7 @@ import cl from 'clsx/lite';
 import { forwardRef, useEffect, useRef, useState } from 'react';
 import type { InputHTMLAttributes, ReactNode } from 'react';
 
-import type { PortalProps } from '../../../types/Portal';
+import type { PortalProps } from '../../../types';
 import { omit, useDebounceCallback } from '../../../utilities';
 import { Spinner } from '../../loaders/Spinner';
 import type { FormFieldProps } from '../useFormField';
diff --git a/packages/react/src/components/form/Input/Input.tsx b/packages/react/src/components/form/Input/Input.tsx
index de5f659cd0..579a3f9456 100644
--- a/packages/react/src/components/form/Input/Input.tsx
+++ b/packages/react/src/components/form/Input/Input.tsx
@@ -1,13 +1,14 @@
 import cl from 'clsx/lite';
 import type { InputHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
+import type { Size } from '../../../types';
 
 type InputAttr = InputHTMLAttributes<HTMLInputElement>;
 export type InputProps = {
   /**
    * Changes field size and paddings
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Size;
   /** Supported `input` types */
   type?: InputAttr['type'];
   /** Exposes the HTML `size` attribute.
diff --git a/packages/react/src/components/form/Search/Search.tsx b/packages/react/src/components/form/Search/Search.tsx
index 9a8eb92b1f..e5e77d2c12 100644
--- a/packages/react/src/components/form/Search/Search.tsx
+++ b/packages/react/src/components/form/Search/Search.tsx
@@ -4,6 +4,7 @@ import cl from 'clsx/lite';
 import type { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';
 import { forwardRef, useCallback, useRef, useState } from 'react';
 
+import type { Size } from '../../../types';
 import { omit } from '../../../utilities';
 import { Button } from '../../Button/Button';
 import { Label } from '../../Label';
@@ -23,7 +24,7 @@ export type SearchProps = {
    * Changes field size and paddings
    * @default md
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Size;
   /** Variant
    * @default 'simple'
    */
diff --git a/packages/react/src/components/form/Select/Select.tsx b/packages/react/src/components/form/Select/Select.tsx
index 39f44dc070..fdcc88a69a 100644
--- a/packages/react/src/components/form/Select/Select.tsx
+++ b/packages/react/src/components/form/Select/Select.tsx
@@ -1,13 +1,14 @@
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 import type { SelectHTMLAttributes } from 'react';
+import type { Size } from '../../../types';
 
 export type SelectProps = {
   /**
    * Defines the size of the select.
    * @default md
    **/
-  size?: 'sm' | 'md' | 'lg';
+  size?: Size;
   /** Defines if the select is readOnly
    * @default false
    */
diff --git a/packages/react/src/components/form/Textarea/Textarea.tsx b/packages/react/src/components/form/Textarea/Textarea.tsx
index 979ae5c6fe..5887fc26e1 100644
--- a/packages/react/src/components/form/Textarea/Textarea.tsx
+++ b/packages/react/src/components/form/Textarea/Textarea.tsx
@@ -1,13 +1,14 @@
 import cl from 'clsx/lite';
 import type { TextareaHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
+import type { Size } from '../../../types';
 
 export type TextareaProps = {
   /**
    * Defines the size of the select.
    * @default md
    **/
-  size?: 'sm' | 'md' | 'lg';
+  size?: Size;
 } & TextareaHTMLAttributes<HTMLTextAreaElement>;
 
 /** Textarea field
diff --git a/packages/react/src/components/form/Textfield/Textfield.tsx b/packages/react/src/components/form/Textfield/Textfield.tsx
index 11336bad66..69702b6538 100644
--- a/packages/react/src/components/form/Textfield/Textfield.tsx
+++ b/packages/react/src/components/form/Textfield/Textfield.tsx
@@ -3,6 +3,7 @@ import cl from 'clsx/lite';
 import type { InputHTMLAttributes, ReactNode } from 'react';
 import { forwardRef, useId, useState } from 'react';
 
+import type { Size } from '../../../types';
 import { omit } from '../../../utilities';
 import { Label } from '../../Label';
 import { Paragraph } from '../../Paragraph';
@@ -22,7 +23,7 @@ export type TextfieldProps = {
    * Changes field size and paddings
    * @default md
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Size;
   /** Prefix for field. */
   prefix?: string;
   /** Suffix for field. */
diff --git a/packages/react/src/components/form/useFormField.ts b/packages/react/src/components/form/useFormField.ts
index e866b08233..7c4ab727c1 100644
--- a/packages/react/src/components/form/useFormField.ts
+++ b/packages/react/src/components/form/useFormField.ts
@@ -2,6 +2,7 @@ import cl from 'clsx/lite';
 import { useContext, useId } from 'react';
 import type { HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
 
+import type { Size } from '../../types';
 import { FieldsetContext } from './Fieldset/FieldsetContext';
 
 export type FormFieldProps = {
@@ -23,7 +24,7 @@ export type FormFieldProps = {
    * Changes field size and paddings
    * @default md
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Size;
 } & Pick<HTMLAttributes<HTMLElement>, 'aria-describedby'>;
 
 export type FormField = {
diff --git a/packages/react/src/types/Portal.ts b/packages/react/src/types.ts
similarity index 81%
rename from packages/react/src/types/Portal.ts
rename to packages/react/src/types.ts
index 09ba9044b0..1f6799bbb6 100644
--- a/packages/react/src/types/Portal.ts
+++ b/packages/react/src/types.ts
@@ -1,3 +1,5 @@
+export type Size = 'xs' | 'sm' | 'md' | 'lg';
+
 export type PortalProps = {
   /**
    * Portals the floating element outside of the app root and into the body.
@@ -6,3 +8,4 @@ export type PortalProps = {
    */
   portal?: boolean;
 };
+

From 2f777d096fcdcdaf9d24bb4cb77befcfd79976bf Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Tue, 22 Oct 2024 15:25:34 +0200
Subject: [PATCH 16/29] docs: button stories

---
 .../react/src/components/Button/Button.mdx    | 20 +--------
 .../src/components/Button/Button.stories.tsx  | 44 +++++++++----------
 packages/react/src/components/Label/Label.tsx |  4 +-
 3 files changed, 26 insertions(+), 42 deletions(-)

diff --git a/packages/react/src/components/Button/Button.mdx b/packages/react/src/components/Button/Button.mdx
index 7dd8229c9c..2f05a1d675 100644
--- a/packages/react/src/components/Button/Button.mdx
+++ b/packages/react/src/components/Button/Button.mdx
@@ -107,25 +107,9 @@ Som regel er det **venstre** som er den beste plasseringen, men det finnes unnta
 
 <br />
 
-### Størrelse på ikon TODO: Remove
+### Størrelse på ikon
 
-Når du bruker ikon må du sette størrelsen på ikonet selv. Vi anbefaler å bruke disse størrelsene for [Aksel](https://aksel.nav.no/ikoner) sine ikoner:
-
-| Størrelse på knapp | Aksels ikon `fontSize` |
-| :----------------- | :--------------------- |
-| sm                 | 1rem                   |
-| md                 | 1.5rem                 |
-| lg                 | 2rem                   |
-
-<Canvas of={ButtonStories.IconOnly} />
-
-For knapper med kun ikon anbefaler vi å bruke større ikon:
-
-| Størrelse på knapp | Aksels ikon `fontSize` |
-| :----------------- | :--------------------- |
-| sm                 | 1.5rem                 |
-| md                 | 2rem                   |
-| lg                 | 2.5rem                 |
+Ikon skalerer automatisk basert på knappestørrelse, men du endre denne ved å sette font størrelsen.
 
 <Canvas of={ButtonStories.IconOnly} />
 
diff --git a/packages/react/src/components/Button/Button.stories.tsx b/packages/react/src/components/Button/Button.stories.tsx
index 5f394ec5e4..d56c7ac0dc 100644
--- a/packages/react/src/components/Button/Button.stories.tsx
+++ b/packages/react/src/components/Button/Button.stories.tsx
@@ -67,7 +67,7 @@ export const Secondary: StoryFn<typeof Button> = () => (
 export const Tertiary: StoryFn<typeof Button> = () => (
   <>
     <Button variant='tertiary' color='accent'>
-      <PencilWritingIcon aria-hidden fontSize='1.5rem' />
+      <PencilWritingIcon aria-hidden />
       Rediger
     </Button>
   </>
@@ -102,15 +102,15 @@ AccentPressed.parameters = {
 export const Neutral: StoryFn<typeof Button> = () => (
   <>
     <Button variant='primary' color='neutral'>
-      <PrinterSmallIcon aria-hidden fontSize='1.5rem' />
+      <PrinterSmallIcon aria-hidden />
       Skriv ut
     </Button>
     <Button variant='secondary' color='neutral'>
-      <PencilWritingIcon aria-hidden fontSize='1.5rem' />
+      <PencilWritingIcon aria-hidden />
       Rediger
     </Button>
     <Button variant='tertiary' color='neutral'>
-      <ArrowForwardIcon aria-hidden fontSize='1.5rem' />
+      <ArrowForwardIcon aria-hidden />
       Videresend
     </Button>
   </>
@@ -131,15 +131,15 @@ NeutralPressed.parameters = {
 export const Danger: StoryFn<typeof Button> = () => (
   <>
     <Button variant='primary' color='danger'>
-      <TrashIcon aria-hidden fontSize='1.5rem' />
+      <TrashIcon aria-hidden />
       Slett
     </Button>
     <Button variant='secondary' color='danger'>
-      <TrashIcon aria-hidden fontSize='1.5rem' />
+      <TrashIcon aria-hidden />
       Slett
     </Button>
     <Button variant='tertiary' color='danger'>
-      <TrashIcon aria-hidden fontSize='1.5rem' />
+      <TrashIcon aria-hidden />
       Slett
     </Button>
   </>
@@ -175,7 +175,7 @@ export const AsLink: StoryFn<typeof Button> = () => (
   <Button asChild>
     <a target='_blank' rel='noreferrer' href='https://www.designsystemet.no'>
       Gå til Designsystemet
-      <ExternalLinkIcon fontSize='1.5rem' title='Ekstern lenke' />
+      <ExternalLinkIcon title='Ekstern lenke' />
     </a>
   </Button>
 );
@@ -184,10 +184,10 @@ export const TextAndIcon: StoryFn<typeof Button> = () => (
   <>
     <Button variant='primary' color='neutral'>
       Start utfylling
-      <ArrowRightIcon aria-hidden fontSize='1.5rem' />
+      <ArrowRightIcon aria-hidden />
     </Button>
     <Button variant='secondary' color='neutral'>
-      <ArrowUndoIcon aria-hidden fontSize='1.5rem' />
+      <ArrowUndoIcon aria-hidden />
       Angre
     </Button>
   </>
@@ -210,24 +210,24 @@ export const Loading: StoryFn<typeof Button> = () => (
 export const Icons: StoryFn<typeof Button> = () => (
   <>
     <Button variant='primary' size='sm' icon>
-      <CogIcon fontSize='1rem' title='Innstillinger' />
+      <CogIcon title='Innstillinger' />
     </Button>
     <Button variant='primary' size='sm'>
-      <CogIcon fontSize='1rem' aria-hidden />
+      <CogIcon aria-hidden />
       Small
     </Button>
     <Button variant='primary' size='md' icon>
-      <CogIcon fontSize='1.5rem' title='Innstillinger' />
+      <CogIcon title='Innstillinger' />
     </Button>
     <Button variant='primary' size='md'>
-      <CogIcon fontSize='1.5rem' aria-hidden />
+      <CogIcon aria-hidden />
       Medium
     </Button>
     <Button variant='primary' size='lg' icon>
-      <CogIcon fontSize='2rem' title='Innstillinger' />
+      <CogIcon title='Innstillinger' />
     </Button>
     <Button variant='primary' size='lg'>
-      <CogIcon fontSize='2rem' aria-hidden />
+      <CogIcon aria-hidden />
       Large
     </Button>
   </>
@@ -237,12 +237,12 @@ export const IconOnly: StoryFn<typeof Button> = () => (
   <>
     <Tooltip content='Legg til ny'>
       <Button icon color='neutral' variant='tertiary' aria-label='Legg til ny'>
-        <PlusCircleIcon fontSize='1.5rem' aria-hidden />
+        <PlusCircleIcon aria-hidden />
       </Button>
     </Tooltip>
     <Tooltip content='Varslinger'>
       <Button icon color='neutral' variant='tertiary' aria-label='Varslinger'>
-        <BellIcon fontSize='1.5rem' aria-hidden />
+        <BellIcon aria-hidden />
       </Button>
     </Tooltip>
     <Tooltip content='Instillinger'>
@@ -252,7 +252,7 @@ export const IconOnly: StoryFn<typeof Button> = () => (
         variant='tertiary'
         aria-label='Innstillinger'
       >
-        <CogIcon fontSize='1.5rem' aria-hidden />
+        <CogIcon aria-hidden />
       </Button>
     </Tooltip>
   </>
@@ -267,13 +267,13 @@ IconOnly.parameters = {
 export const IconsOnlyPrimary: StoryFn<typeof Button> = () => (
   <>
     <Button icon variant='primary' size='sm'>
-      <CogIcon fontSize='1.5rem' title='Innstillinger' />
+      <CogIcon title='Innstillinger' />
     </Button>
     <Button icon variant='primary' size='md'>
-      <CogIcon fontSize='2rem' title='Innstillinger' />
+      <CogIcon title='Innstillinger' />
     </Button>
     <Button icon variant='primary' size='lg'>
-      <CogIcon fontSize='2.5rem' title='Innstillinger' />
+      <CogIcon title='Innstillinger' />
     </Button>
   </>
 );
diff --git a/packages/react/src/components/Label/Label.tsx b/packages/react/src/components/Label/Label.tsx
index 6e8627257c..a95dd0361a 100644
--- a/packages/react/src/components/Label/Label.tsx
+++ b/packages/react/src/components/Label/Label.tsx
@@ -2,13 +2,13 @@ import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import type { LabelHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
+import type { Size } from '../../types';
 
-/* TODO: Remove size? */
 export type LabelProps = {
   /**
    * Changes text sizing
    */
-  size?: 'xs' | 'sm' | 'md' | 'lg';
+  size?: Size;
   /**
    * Adjusts font weight. Use this when you have a label hierarchy, such as checkboxes/radios in a fieldset
    * @default 'medium'

From 2a35762ea3db692e4d8ca974069a82f3b476e930 Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Tue, 22 Oct 2024 15:54:04 +0200
Subject: [PATCH 17/29] fix(Dropdown): heading styling

---
 packages/css/base/base.css                    |   1 -
 packages/css/dropdown.css                     |  16 +-
 packages/css/index.css                        |   2 +-
 .../ErrorSummary/ErrorSummaryHeading.tsx      |   2 +-
 .../react/src/components/Tabs/TabsPanel.tsx   |   2 +-
 .../ValidationMessage/ValidationMessage.tsx   |   1 -
 packages/react/stories/sizes.stories.tsx      | 932 ------------------
 packages/react/stories/testing.stories.tsx    | 919 ++++++++++++++++-
 8 files changed, 932 insertions(+), 943 deletions(-)
 delete mode 100644 packages/react/stories/sizes.stories.tsx

diff --git a/packages/css/base/base.css b/packages/css/base/base.css
index 4e9d1d22d8..a51ae2fda0 100644
--- a/packages/css/base/base.css
+++ b/packages/css/base/base.css
@@ -83,7 +83,6 @@ body,
 }
 
 /** Heading */
-/* TODO: Heading sizes */
 .ds-heading-text--2xs {
   font-weight: var(--ds-heading-2xs-font-weight);
   line-height: var(--ds-heading-2xs-line-height);
diff --git a/packages/css/dropdown.css b/packages/css/dropdown.css
index ccd7adb003..2d874a0258 100644
--- a/packages/css/dropdown.css
+++ b/packages/css/dropdown.css
@@ -1,7 +1,7 @@
 .ds-dropdown {
   --dsc-dropdown-padding: var(--ds-spacing-3) var(--ds-spacing-2);
-  --dsc-dropdown-item-padding: 0 var(--ds-spacing-4);
-  --dsc-dropdown-header-padding: var(--ds-spacing-2) var(--ds-spacing-4);
+  --dsc-dropdown-item-padding: var(--ds-spacing-2) var(--ds-spacing-4);
+  --dsc-dropdown-item-size: var(--ds-spacing-12);
 
   background-color: var(--ds-color-neutral-background-default);
   border-radius: var(--ds-border-radius-md);
@@ -18,15 +18,21 @@
   }
 
   .ds-dropdown__heading {
-    padding: var(--dsc-dropdown-header-padding);
-    margin-block: 0;
+    align-items: center;
+    box-sizing: border-box;
+    color: var(--ds-color-neutral-text-subtle);
+    display: flex;
     font-size: inherit;
+    font-weight: inherit;
+    margin: 0;
+    min-height: var(--dsc-dropdown-item-size);
+    padding: var(--dsc-dropdown-item-padding);
   }
 
   & :is(a, button, [role='button']) {
-    box-sizing: border-box;
     justify-content: start;
     padding: var(--dsc-dropdown-item-padding);
+    min-height: var(--dsc-dropdown-item-size);
     width: 100%;
     font-weight: var(--ds-font-weight-regular);
   }
diff --git a/packages/css/index.css b/packages/css/index.css
index 474c89c93b..c2b4ecf75e 100644
--- a/packages/css/index.css
+++ b/packages/css/index.css
@@ -44,7 +44,7 @@
 @import url('./badge.css') layer(ds.components);
 @import url('./avatar.css') layer(ds.components);
 
-/* TODO: Move */
+/* TODO: Will move to tokens as part of #2508 */
 :root {
   --ds-sizing-base: 18; /* Unitless base font-size 18px */
   --ds-sizing-step: 4; /* Unitless step size 4px */
diff --git a/packages/react/src/components/ErrorSummary/ErrorSummaryHeading.tsx b/packages/react/src/components/ErrorSummary/ErrorSummaryHeading.tsx
index 8e5b145c9c..82639cba78 100644
--- a/packages/react/src/components/ErrorSummary/ErrorSummaryHeading.tsx
+++ b/packages/react/src/components/ErrorSummary/ErrorSummaryHeading.tsx
@@ -4,7 +4,7 @@ import { ErrorSummaryContext, type ErrorSummaryProps } from './ErrorSummary';
 
 export type ErrorSummaryHeadingProps = HeadingProps;
 
-// TODO
+// TODO: Move to CSS
 // const HEADING_SIZE_MAP: {
 //   [key in NonNullable<ErrorSummaryProps['size']>]: HeadingProps['size'];
 // } = {
diff --git a/packages/react/src/components/Tabs/TabsPanel.tsx b/packages/react/src/components/Tabs/TabsPanel.tsx
index 3ff2493ee9..692b340d5c 100644
--- a/packages/react/src/components/Tabs/TabsPanel.tsx
+++ b/packages/react/src/components/Tabs/TabsPanel.tsx
@@ -18,7 +18,7 @@ export type TabsPanelProps = {
  */
 export const TabsPanel = forwardRef<HTMLDivElement, TabsPanelProps>(
   function TabsPanel({ children, value, className, ...rest }, ref) {
-    const { value: tabsValue, size } = useContext(Context);
+    const { value: tabsValue } = useContext(Context);
     const active = value === tabsValue;
 
     return (
diff --git a/packages/react/src/components/ValidationMessage/ValidationMessage.tsx b/packages/react/src/components/ValidationMessage/ValidationMessage.tsx
index 99ac42117c..43b4f6eab3 100644
--- a/packages/react/src/components/ValidationMessage/ValidationMessage.tsx
+++ b/packages/react/src/components/ValidationMessage/ValidationMessage.tsx
@@ -4,7 +4,6 @@ import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
 import type { Size } from '../../types';
 
-/* TODO: Remove size? */
 export type ValidationMessageProps = {
   /**
    * Changes text sizing
diff --git a/packages/react/stories/sizes.stories.tsx b/packages/react/stories/sizes.stories.tsx
deleted file mode 100644
index 8f8803cc08..0000000000
--- a/packages/react/stories/sizes.stories.tsx
+++ /dev/null
@@ -1,932 +0,0 @@
-import { PrinterSmallIcon } from '@navikt/aksel-icons';
-import type { Meta, StoryFn } from '@storybook/react';
-
-// 14, 16, 18, 30
-import { useState } from 'react';
-import {
-  Accordion,
-  Alert,
-  Avatar,
-  Badge,
-  Breadcrumbs,
-  Button,
-  Card,
-  Chip,
-  Dropdown,
-  ErrorSummary,
-  Field,
-  Heading,
-  HelpText,
-  Input,
-  Label,
-  Link,
-  List,
-  Modal,
-  Pagination,
-  Paragraph,
-  Popover,
-  Spinner,
-  Table,
-  Tabs,
-  Tag,
-  ToggleGroup,
-  Tooltip,
-  ValidationMessage,
-  usePagination,
-} from '../src';
-
-export default {
-  title: 'Sizes',
-  parameters: {
-    layout: 'padded',
-  },
-} as Meta;
-
-export const Sizes: StoryFn = () => {
-  const [currentPage, setCurrentPage] = useState(4);
-  const { pages, nextButtonProps, prevButtonProps } = usePagination({
-    currentPage,
-    onChange: console.log, // Open console to see this event
-    totalPages: 10,
-    showPages: 7,
-    setCurrentPage,
-  });
-
-  return (
-    <div
-      style={{
-        display: 'grid',
-        alignItems: 'start',
-        gridTemplateColumns: 'repeat(4, 1fr)',
-        gap: '2rem',
-        maxWidth: '90vw',
-      }}
-    >
-      <div>14px</div>
-      <div>16px</div>
-      <div>18px</div>
-      <div>24px</div>
-      <Accordion data-size='xs'>
-        <Accordion.Item>
-          <Accordion.Heading>
-            Hvem kan registrere seg i Frivillighetsregisteret?
-          </Accordion.Heading>
-          <Accordion.Content>
-            For å kunne bli registrert i Frivillighetsregisteret, må
-            organisasjonen drive frivillig virksomhet. Det er bare foreninger,
-            stiftelser og aksjeselskap som kan registreres. Virksomheten kan
-            ikke dele ut midler til fysiske personer. Virksomheten må ha et
-            styre.
-          </Accordion.Content>
-        </Accordion.Item>
-      </Accordion>
-      <Accordion data-size='sm'>
-        <Accordion.Item>
-          <Accordion.Heading>
-            Hvem kan registrere seg i Frivillighetsregisteret?
-          </Accordion.Heading>
-          <Accordion.Content>
-            For å kunne bli registrert i Frivillighetsregisteret, må
-            organisasjonen drive frivillig virksomhet. Det er bare foreninger,
-            stiftelser og aksjeselskap som kan registreres. Virksomheten kan
-            ikke dele ut midler til fysiske personer. Virksomheten må ha et
-            styre.
-          </Accordion.Content>
-        </Accordion.Item>
-      </Accordion>
-      <Accordion data-size='md'>
-        <Accordion.Item>
-          <Accordion.Heading>
-            Hvem kan registrere seg i Frivillighetsregisteret?
-          </Accordion.Heading>
-          <Accordion.Content>
-            For å kunne bli registrert i Frivillighetsregisteret, må
-            organisasjonen drive frivillig virksomhet. Det er bare foreninger,
-            stiftelser og aksjeselskap som kan registreres. Virksomheten kan
-            ikke dele ut midler til fysiske personer. Virksomheten må ha et
-            styre.
-          </Accordion.Content>
-        </Accordion.Item>
-      </Accordion>
-      <Accordion data-size='xl'>
-        <Accordion.Item>
-          <Accordion.Heading>
-            Hvem kan registrere seg i Frivillighetsregisteret?
-          </Accordion.Heading>
-          <Accordion.Content>
-            For å kunne bli registrert i Frivillighetsregisteret, må
-            organisasjonen drive frivillig virksomhet. Det er bare foreninger,
-            stiftelser og aksjeselskap som kan registreres. Virksomheten kan
-            ikke dele ut midler til fysiske personer. Virksomheten må ha et
-            styre.
-          </Accordion.Content>
-        </Accordion.Item>
-      </Accordion>
-      <Alert data-size='xs'>Dette er en alert</Alert>
-      <Alert size='sm'>Dette er en alert</Alert>
-      <Alert size='md'>Dette er en alert</Alert>
-      <Alert data-size='xl'>Dette er en alert</Alert>
-      <div>
-        <Avatar size='xs' aria-label='Jan Daniel'>
-          JD
-        </Avatar>
-      </div>
-      <div>
-        <Avatar size='sm' aria-label='Jan Daniel'>
-          JD
-        </Avatar>
-      </div>
-      <div>
-        <Avatar size='md' aria-label='Jan Daniel'>
-          JD
-        </Avatar>
-      </div>
-      <div>
-        <Avatar data-size='xl' aria-label='Jan Daniel'>
-          JD
-        </Avatar>
-      </div>
-      <Badge data-size='xs' count={99} maxCount={10} />
-      <Badge size='sm' count={99} maxCount={10} />
-      <Badge size='md' count={99} maxCount={10} />
-      <Badge data-size='xl' count={99} maxCount={10} />
-      <Breadcrumbs data-size='xs'>
-        <Breadcrumbs.List>
-          <Breadcrumbs.Item>
-            <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
-          </Breadcrumbs.Item>
-          <Breadcrumbs.Item>
-            <Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
-          </Breadcrumbs.Item>
-          <Breadcrumbs.Item>
-            <Breadcrumbs.Link href='#'>Nivå 3</Breadcrumbs.Link>
-          </Breadcrumbs.Item>
-        </Breadcrumbs.List>
-      </Breadcrumbs>
-      <Breadcrumbs size='sm'>
-        <Breadcrumbs.List>
-          <Breadcrumbs.Item>
-            <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
-          </Breadcrumbs.Item>
-          <Breadcrumbs.Item>
-            <Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
-          </Breadcrumbs.Item>
-          <Breadcrumbs.Item>
-            <Breadcrumbs.Link href='#'>Nivå 3</Breadcrumbs.Link>
-          </Breadcrumbs.Item>
-        </Breadcrumbs.List>
-      </Breadcrumbs>
-      <Breadcrumbs size='md'>
-        <Breadcrumbs.List>
-          <Breadcrumbs.Item>
-            <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
-          </Breadcrumbs.Item>
-          <Breadcrumbs.Item>
-            <Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
-          </Breadcrumbs.Item>
-          <Breadcrumbs.Item>
-            <Breadcrumbs.Link href='#'>Nivå 3</Breadcrumbs.Link>
-          </Breadcrumbs.Item>
-        </Breadcrumbs.List>
-      </Breadcrumbs>
-      <Breadcrumbs data-size='xl'>
-        <Breadcrumbs.List>
-          <Breadcrumbs.Item>
-            <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
-          </Breadcrumbs.Item>
-          <Breadcrumbs.Item>
-            <Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
-          </Breadcrumbs.Item>
-          <Breadcrumbs.Item>
-            <Breadcrumbs.Link href='#'>Nivå 3</Breadcrumbs.Link>
-          </Breadcrumbs.Item>
-        </Breadcrumbs.List>
-      </Breadcrumbs>
-      <div>
-        <Button data-size='xs'>
-          <PrinterSmallIcon />
-          Klikk her
-        </Button>
-      </div>
-      <div>
-        <Button size='sm'>
-          <PrinterSmallIcon />
-          Klikk her
-        </Button>
-      </div>
-      <div>
-        <Button size='md'>
-          <PrinterSmallIcon /> Klikk her
-        </Button>
-      </div>
-      <div>
-        <Button data-size='xl'>
-          <PrinterSmallIcon /> Klikk her
-        </Button>
-      </div>
-      <Card data-size='xs'>
-        <Heading size='2xs' level={2}>
-          Card Neutral
-        </Heading>
-        <Paragraph>
-          Most provide as with carried business are much better more the
-          perfected designer. Writing slightly explain desk unable at supposedly
-          about this
-        </Paragraph>
-      </Card>
-      <Card data-size='sm'>
-        <Heading size='xs' level={2}>
-          Card Neutral
-        </Heading>
-        <Paragraph>
-          Most provide as with carried business are much better more the
-          perfected designer. Writing slightly explain desk unable at supposedly
-          about this
-        </Paragraph>
-      </Card>
-      <Card data-size='md'>
-        <Heading size='sm' level={2}>
-          Card Neutral
-        </Heading>
-        <Paragraph>
-          Most provide as with carried business are much better more the
-          perfected designer. Writing slightly explain desk unable at supposedly
-          about this
-        </Paragraph>
-      </Card>
-      <Card data-size='xl'>
-        <Heading size='lg' level={2}>
-          Card Neutral
-        </Heading>
-        <Paragraph>
-          Most provide as with carried business are much better more the
-          perfected designer. Writing slightly explain desk unable at supposedly
-          about this
-        </Paragraph>
-      </Card>
-      <div
-        style={{ display: 'flex', gap: 'var(--ds-sizing-2)' }}
-        data-size='xs'
-      >
-        <Chip.Radio>Radio</Chip.Radio>
-        <Chip.Checkbox>Check</Chip.Checkbox>
-        <Chip.Button>Knapp</Chip.Button>
-      </div>
-      <div
-        style={{ display: 'flex', gap: 'var(--ds-sizing-2)' }}
-        data-size='sm'
-      >
-        <Chip.Radio>Radio</Chip.Radio>
-        <Chip.Checkbox>Check</Chip.Checkbox>
-        <Chip.Button>Knapp</Chip.Button>
-      </div>
-      <div
-        style={{ display: 'flex', gap: 'var(--ds-sizing-2)' }}
-        data-size='md'
-      >
-        <Chip.Radio>Radio</Chip.Radio>
-        <Chip.Checkbox>Check</Chip.Checkbox>
-        <Chip.Button>Knapp</Chip.Button>
-      </div>
-      <div
-        style={{ display: 'flex', gap: 'var(--ds-sizing-2)' }}
-        data-size='xl'
-      >
-        <Chip.Radio>Radio</Chip.Radio>
-        <Chip.Checkbox>Check</Chip.Checkbox>
-        <Chip.Button>Knapp</Chip.Button>
-      </div>
-      <div data-size='xs'>
-        <Dropdown.Context>
-          <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
-          <Dropdown>
-            <Dropdown.Heading>Heading 1</Dropdown.Heading>
-            <Dropdown.List>
-              <Dropdown.Item>Button 1.1</Dropdown.Item>
-              <Dropdown.Item>Button 1.2</Dropdown.Item>
-            </Dropdown.List>
-          </Dropdown>
-        </Dropdown.Context>
-      </div>
-      <div data-size='sm'>
-        <Dropdown.Context>
-          <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
-          <Dropdown>
-            <Dropdown.Heading>Heading 1</Dropdown.Heading>
-            <Dropdown.List>
-              <Dropdown.Item>Button 1.1</Dropdown.Item>
-              <Dropdown.Item>Button 1.2</Dropdown.Item>
-            </Dropdown.List>
-          </Dropdown>
-        </Dropdown.Context>
-      </div>
-      <div data-size='md'>
-        <Dropdown.Context>
-          <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
-          <Dropdown>
-            <Dropdown.Heading>Heading 1</Dropdown.Heading>
-            <Dropdown.List>
-              <Dropdown.Item>Button 1.1</Dropdown.Item>
-              <Dropdown.Item>Button 1.2</Dropdown.Item>
-            </Dropdown.List>
-          </Dropdown>
-        </Dropdown.Context>
-      </div>
-      <div data-size='xl'>
-        <Dropdown.Context>
-          <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
-          <Dropdown>
-            <Dropdown.Heading>Heading 1</Dropdown.Heading>
-            <Dropdown.List>
-              <Dropdown.Item>Button 1.1</Dropdown.Item>
-              <Dropdown.Item>Button 1.2</Dropdown.Item>
-            </Dropdown.List>
-          </Dropdown>
-        </Dropdown.Context>
-      </div>
-      <ErrorSummary data-size='xs'>
-        <ErrorSummary.Heading>
-          For å gå videre må du rette opp følgende feil:
-        </ErrorSummary.Heading>
-        <ErrorSummary.List>
-          <ErrorSummary.Item href='#'>
-            Fødselsdato kan ikke være etter år 2005
-          </ErrorSummary.Item>
-          <ErrorSummary.Item href='#'>E-post må være gyldig</ErrorSummary.Item>
-        </ErrorSummary.List>
-      </ErrorSummary>
-      <ErrorSummary size='sm'>
-        <ErrorSummary.Heading>
-          For å gå videre må du rette opp følgende feil:
-        </ErrorSummary.Heading>
-        <ErrorSummary.List>
-          <ErrorSummary.Item href='#'>
-            Fødselsdato kan ikke være etter år 2005
-          </ErrorSummary.Item>
-          <ErrorSummary.Item href='#'>E-post må være gyldig</ErrorSummary.Item>
-        </ErrorSummary.List>
-      </ErrorSummary>
-      <ErrorSummary size='md'>
-        <ErrorSummary.Heading>
-          For å gå videre må du rette opp følgende feil:
-        </ErrorSummary.Heading>
-        <ErrorSummary.List>
-          <ErrorSummary.Item href='#'>
-            Fødselsdato kan ikke være etter år 2005
-          </ErrorSummary.Item>
-          <ErrorSummary.Item href='#'>E-post må være gyldig</ErrorSummary.Item>
-        </ErrorSummary.List>
-      </ErrorSummary>
-      <ErrorSummary data-size='xl'>
-        <ErrorSummary.Heading>
-          For å gå videre må du rette opp følgende feil:
-        </ErrorSummary.Heading>
-        <ErrorSummary.List>
-          <ErrorSummary.Item href='#'>
-            Fødselsdato kan ikke være etter år 2005
-          </ErrorSummary.Item>
-          <ErrorSummary.Item href='#'>E-post må være gyldig</ErrorSummary.Item>
-        </ErrorSummary.List>
-      </ErrorSummary>
-      <style>
-        {/* TMP fix */}
-        {`
-          .ds-field { display: block }
-          .ds-field input+label { margin: 0; font-weight: normal }
-        `}
-      </style>
-      <Field data-size='xs'>
-        <Label>Text</Label>
-        <Input aria-invalid='true' defaultValue='Noe tekst' />
-        <ValidationMessage>En feil</ValidationMessage>
-      </Field>
-      <Field data-size='sm'>
-        <Label>Text</Label>
-        <Input aria-invalid='true' defaultValue='Noe tekst' />
-        <ValidationMessage>En feil</ValidationMessage>
-      </Field>
-      <Field data-size='md'>
-        <Label>Text</Label>
-        <Input aria-invalid='true' defaultValue='Noe tekst' />
-        <ValidationMessage>En feil</ValidationMessage>
-      </Field>
-      <Field data-size='xl'>
-        <Label>Text</Label>
-        <Input aria-invalid='true' defaultValue='Noe tekst' />
-        <ValidationMessage>En feil</ValidationMessage>
-      </Field>
-      <Field
-        data-size='xs'
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 'var(--ds-sizing-2)',
-        }}
-      >
-        <Input type='radio' name='my-radio' defaultChecked />
-        <Label>Text</Label>
-      </Field>
-      <Field
-        data-size='sm'
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 'var(--ds-sizing-2)',
-        }}
-      >
-        <Input type='radio' name='my-radio' defaultChecked />
-        <Label>Text</Label>
-      </Field>
-      <Field
-        data-size='md'
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 'var(--ds-sizing-2)',
-        }}
-      >
-        <Input type='radio' name='my-radio' />
-        <Label>Text</Label>
-      </Field>
-      <Field
-        data-size='xl'
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 'var(--ds-sizing-2)',
-        }}
-      >
-        <Input type='radio' name='my-radio' />
-        <Label>Text</Label>
-      </Field>
-      <Field
-        data-size='xs'
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 'var(--ds-sizing-2)',
-        }}
-      >
-        <Input type='checkbox' name='my-check' defaultChecked />
-        <Label>Text</Label>
-      </Field>
-      <Field
-        data-size='sm'
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 'var(--ds-sizing-2)',
-        }}
-      >
-        <Input type='checkbox' name='my-check' defaultChecked />
-        <Label>Text</Label>
-      </Field>
-      <Field
-        data-size='md'
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 'var(--ds-sizing-2)',
-        }}
-      >
-        <Input type='checkbox' name='my-check' />
-        <Label>Text</Label>
-      </Field>
-      <Field
-        data-size='xl'
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 'var(--ds-sizing-2)',
-        }}
-      >
-        <Input type='checkbox' name='my-check' />
-        <Label>Text</Label>
-      </Field>
-      <Field
-        data-size='xs'
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 'var(--ds-sizing-2)',
-        }}
-      >
-        <Input type='checkbox' name='my-switch' role='switch' defaultChecked />
-        <Label>Text</Label>
-      </Field>
-      <Field
-        data-size='sm'
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 'var(--ds-sizing-2)',
-        }}
-      >
-        <Input type='checkbox' name='my-switch' role='switch' defaultChecked />
-        <Label>Text</Label>
-      </Field>
-      <Field
-        data-size='md'
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 'var(--ds-sizing-2)',
-        }}
-      >
-        <Input type='checkbox' name='my-switch' role='switch' />
-        <Label>Text</Label>
-      </Field>
-      <Field
-        data-size='xl'
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 'var(--ds-sizing-2)',
-        }}
-      >
-        <Input type='checkbox' name='my-switch' role='switch' />
-        <Label>Text</Label>
-      </Field>
-      <HelpText data-size='xs' aria-label='Mer info'>
-        Mer tekst
-      </HelpText>
-      <HelpText size='sm' aria-label='Mer info'>
-        Mer tekst
-      </HelpText>
-      <HelpText size='md' aria-label='Mer info'>
-        Mer tekst
-      </HelpText>
-      <HelpText data-size='zl' aria-label='Mer info'>
-        Mer tekst
-      </HelpText>
-      <div data-size='xs'>
-        <Link href='#'>Lenke</Link>
-      </div>
-      <div data-size='sm'>
-        <Link href='#'>Lenke</Link>
-      </div>
-      <div data-size='md'>
-        <Link href='#'>Lenke</Link>
-      </div>
-      <div data-size='xl'>
-        <Link href='#'>Lenke</Link>
-      </div>
-      <List.Unordered data-size='xs'>
-        <List.Item>List Item 1</List.Item>
-        <List.Item>List Item 2</List.Item>
-        <List.Item>List Item 3</List.Item>
-      </List.Unordered>
-      <List.Unordered size='sm'>
-        <List.Item>List Item 1</List.Item>
-        <List.Item>List Item 2</List.Item>
-        <List.Item>List Item 3</List.Item>
-      </List.Unordered>
-      <List.Unordered size='md'>
-        <List.Item>List Item 1</List.Item>
-        <List.Item>List Item 2</List.Item>
-        <List.Item>List Item 3</List.Item>
-      </List.Unordered>
-      <List.Unordered data-size='xl'>
-        <List.Item>List Item 1</List.Item>
-        <List.Item>List Item 2</List.Item>
-        <List.Item>List Item 3</List.Item>
-      </List.Unordered>
-      <Spinner size='xs' title='Loading' />
-      <Spinner size='sm' title='Loading' />
-      <Spinner size='md' title='Loading' />
-      <Spinner size='xl' title='Loading' />
-      <div data-size='xs'>
-        <Modal.Context>
-          <Modal.Trigger>Open Modal</Modal.Trigger>
-          <Modal>
-            <Heading size='xs' style={{ marginBottom: 'var(--ds-spacing-2)' }}>
-              Modal header
-            </Heading>
-            <Paragraph style={{ marginBottom: 'var(--ds-spacing-2)' }}>
-              Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-              Blanditiis doloremque obcaecati assumenda odio ducimus sunt et.
-            </Paragraph>
-          </Modal>
-        </Modal.Context>
-      </div>
-      <div data-size='sm'>
-        <Modal.Context>
-          <Modal.Trigger>Open Modal</Modal.Trigger>
-          <Modal>
-            <Heading size='xs' style={{ marginBottom: 'var(--ds-spacing-2)' }}>
-              Modal header
-            </Heading>
-            <Paragraph style={{ marginBottom: 'var(--ds-spacing-2)' }}>
-              Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-              Blanditiis doloremque obcaecati assumenda odio ducimus sunt et.
-            </Paragraph>
-          </Modal>
-        </Modal.Context>
-      </div>
-      <div data-size='md'>
-        <Modal.Context>
-          <Modal.Trigger>Open Modal</Modal.Trigger>
-          <Modal>
-            <Heading size='xs' style={{ marginBottom: 'var(--ds-spacing-2)' }}>
-              Modal header
-            </Heading>
-            <Paragraph style={{ marginBottom: 'var(--ds-spacing-2)' }}>
-              Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-              Blanditiis doloremque obcaecati assumenda odio ducimus sunt et.
-            </Paragraph>
-          </Modal>
-        </Modal.Context>
-      </div>
-      <div data-size='xl'>
-        <Modal.Context>
-          <Modal.Trigger>Open Modal</Modal.Trigger>
-          <Modal>
-            <Heading size='sm' style={{ marginBottom: 'var(--ds-spacing-2)' }}>
-              Modal header
-            </Heading>
-            <Paragraph style={{ marginBottom: 'var(--ds-spacing-2)' }}>
-              Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-              Blanditiis doloremque obcaecati assumenda odio ducimus sunt et.
-            </Paragraph>
-          </Modal>
-        </Modal.Context>
-      </div>
-      <Pagination aria-label='Sidenavigering' data-size='xs'>
-        <Pagination.List>
-          <Pagination.Item>
-            <Pagination.Button aria-label='Forrige side' {...prevButtonProps}>
-              Forrige
-            </Pagination.Button>
-          </Pagination.Item>
-          {pages.map(({ page, itemKey, buttonProps }) => (
-            <Pagination.Item key={itemKey}>
-              <Pagination.Button {...buttonProps} aria-label={`Side ${page}`}>
-                {page}
-              </Pagination.Button>
-            </Pagination.Item>
-          ))}
-          <Pagination.Item>
-            <Pagination.Button aria-label='Neste side' {...nextButtonProps}>
-              Neste
-            </Pagination.Button>
-          </Pagination.Item>
-        </Pagination.List>
-      </Pagination>
-      <Pagination aria-label='Sidenavigering' size='sm'>
-        <Pagination.List>
-          <Pagination.Item>
-            <Pagination.Button aria-label='Forrige side' {...prevButtonProps}>
-              Forrige
-            </Pagination.Button>
-          </Pagination.Item>
-          {pages.map(({ page, itemKey, buttonProps }) => (
-            <Pagination.Item key={itemKey}>
-              <Pagination.Button {...buttonProps} aria-label={`Side ${page}`}>
-                {page}
-              </Pagination.Button>
-            </Pagination.Item>
-          ))}
-          <Pagination.Item>
-            <Pagination.Button aria-label='Neste side' {...nextButtonProps}>
-              Neste
-            </Pagination.Button>
-          </Pagination.Item>
-        </Pagination.List>
-      </Pagination>
-      <Pagination aria-label='Sidenavigering' size='md'>
-        <Pagination.List>
-          <Pagination.Item>
-            <Pagination.Button aria-label='Forrige side' {...prevButtonProps}>
-              Forrige
-            </Pagination.Button>
-          </Pagination.Item>
-          {pages.map(({ page, itemKey, buttonProps }) => (
-            <Pagination.Item key={itemKey}>
-              <Pagination.Button {...buttonProps} aria-label={`Side ${page}`}>
-                {page}
-              </Pagination.Button>
-            </Pagination.Item>
-          ))}
-          <Pagination.Item>
-            <Pagination.Button aria-label='Neste side' {...nextButtonProps}>
-              Neste
-            </Pagination.Button>
-          </Pagination.Item>
-        </Pagination.List>
-      </Pagination>
-      <Pagination aria-label='Sidenavigering' data-size='xl'>
-        <Pagination.List>
-          <Pagination.Item>
-            <Pagination.Button aria-label='Forrige side' {...prevButtonProps}>
-              Forrige
-            </Pagination.Button>
-          </Pagination.Item>
-          {pages.map(({ page, itemKey, buttonProps }) => (
-            <Pagination.Item key={itemKey}>
-              <Pagination.Button {...buttonProps} aria-label={`Side ${page}`}>
-                {page}
-              </Pagination.Button>
-            </Pagination.Item>
-          ))}
-          <Pagination.Item>
-            <Pagination.Button aria-label='Neste side' {...nextButtonProps}>
-              Neste
-            </Pagination.Button>
-          </Pagination.Item>
-        </Pagination.List>
-      </Pagination>
-      <div data-size='xs'>
-        <Popover.Context>
-          <Popover.Trigger>My popup</Popover.Trigger>
-          <Popover>popover content</Popover>
-        </Popover.Context>
-      </div>
-      <div data-size='sm'>
-        <Popover.Context>
-          <Popover.Trigger>My popup</Popover.Trigger>
-          <Popover>popover content</Popover>
-        </Popover.Context>
-      </div>
-      <div data-size='md'>
-        <Popover.Context>
-          <Popover.Trigger>My popup</Popover.Trigger>
-          <Popover>popover content</Popover>
-        </Popover.Context>
-      </div>
-      <div data-size='xl'>
-        <Popover.Context>
-          <Popover.Trigger>My popup</Popover.Trigger>
-          <Popover>popover content</Popover>
-        </Popover.Context>
-      </div>
-      <Table data-size='xs'>
-        <Table.Head>
-          <Table.Row>
-            <Table.HeaderCell>Header 1</Table.HeaderCell>
-            <Table.HeaderCell>Header 2</Table.HeaderCell>
-            <Table.HeaderCell>Header 3</Table.HeaderCell>
-          </Table.Row>
-        </Table.Head>
-        <Table.Body>
-          <Table.Row>
-            <Table.Cell>Cell 1</Table.Cell>
-            <Table.Cell>Cell 2</Table.Cell>
-            <Table.Cell>Cell 3</Table.Cell>
-          </Table.Row>
-          <Table.Row>
-            <Table.Cell>Cell 4</Table.Cell>
-            <Table.Cell>Cell 5</Table.Cell>
-            <Table.Cell>Cell 6</Table.Cell>
-          </Table.Row>
-        </Table.Body>
-      </Table>
-      <Table size='sm'>
-        <Table.Head>
-          <Table.Row>
-            <Table.HeaderCell>Header 1</Table.HeaderCell>
-            <Table.HeaderCell>Header 2</Table.HeaderCell>
-            <Table.HeaderCell>Header 3</Table.HeaderCell>
-          </Table.Row>
-        </Table.Head>
-        <Table.Body>
-          <Table.Row>
-            <Table.Cell>Cell 1</Table.Cell>
-            <Table.Cell>Cell 2</Table.Cell>
-            <Table.Cell>Cell 3</Table.Cell>
-          </Table.Row>
-          <Table.Row>
-            <Table.Cell>Cell 4</Table.Cell>
-            <Table.Cell>Cell 5</Table.Cell>
-            <Table.Cell>Cell 6</Table.Cell>
-          </Table.Row>
-        </Table.Body>
-      </Table>
-      <Table size='md'>
-        <Table.Head>
-          <Table.Row>
-            <Table.HeaderCell>Header 1</Table.HeaderCell>
-            <Table.HeaderCell>Header 2</Table.HeaderCell>
-            <Table.HeaderCell>Header 3</Table.HeaderCell>
-          </Table.Row>
-        </Table.Head>
-        <Table.Body>
-          <Table.Row>
-            <Table.Cell>Cell 1</Table.Cell>
-            <Table.Cell>Cell 2</Table.Cell>
-            <Table.Cell>Cell 3</Table.Cell>
-          </Table.Row>
-          <Table.Row>
-            <Table.Cell>Cell 4</Table.Cell>
-            <Table.Cell>Cell 5</Table.Cell>
-            <Table.Cell>Cell 6</Table.Cell>
-          </Table.Row>
-        </Table.Body>
-      </Table>
-      <Table data-size='xl'>
-        <Table.Head>
-          <Table.Row>
-            <Table.HeaderCell>Header 1</Table.HeaderCell>
-            <Table.HeaderCell>Header 2</Table.HeaderCell>
-            <Table.HeaderCell>Header 3</Table.HeaderCell>
-          </Table.Row>
-        </Table.Head>
-        <Table.Body>
-          <Table.Row>
-            <Table.Cell>Cell 1</Table.Cell>
-            <Table.Cell>Cell 2</Table.Cell>
-            <Table.Cell>Cell 3</Table.Cell>
-          </Table.Row>
-          <Table.Row>
-            <Table.Cell>Cell 4</Table.Cell>
-            <Table.Cell>Cell 5</Table.Cell>
-            <Table.Cell>Cell 6</Table.Cell>
-          </Table.Row>
-        </Table.Body>
-      </Table>
-      <Tabs data-size='xs' defaultValue='value1'>
-        <Tabs.List>
-          <Tabs.Tab value='value1'>Tab 1</Tabs.Tab>
-          <Tabs.Tab value='value2'>Tab 2</Tabs.Tab>
-          <Tabs.Tab value='value3'>Tab 3</Tabs.Tab>
-        </Tabs.List>
-        <Tabs.Panel value='value1'>content 1</Tabs.Panel>
-        <Tabs.Panel value='value2'>content 2</Tabs.Panel>
-        <Tabs.Panel value='value3'>content 3</Tabs.Panel>
-      </Tabs>
-      <Tabs size='sm' defaultValue='value1'>
-        <Tabs.List>
-          <Tabs.Tab value='value1'>Tab 1</Tabs.Tab>
-          <Tabs.Tab value='value2'>Tab 2</Tabs.Tab>
-          <Tabs.Tab value='value3'>Tab 3</Tabs.Tab>
-        </Tabs.List>
-        <Tabs.Panel value='value1'>content 1</Tabs.Panel>
-        <Tabs.Panel value='value2'>content 2</Tabs.Panel>
-        <Tabs.Panel value='value3'>content 3</Tabs.Panel>
-      </Tabs>
-      <Tabs size='md' defaultValue='value1'>
-        <Tabs.List>
-          <Tabs.Tab value='value1'>Tab 1</Tabs.Tab>
-          <Tabs.Tab value='value2'>Tab 2</Tabs.Tab>
-          <Tabs.Tab value='value3'>Tab 3</Tabs.Tab>
-        </Tabs.List>
-        <Tabs.Panel value='value1'>content 1</Tabs.Panel>
-        <Tabs.Panel value='value2'>content 2</Tabs.Panel>
-        <Tabs.Panel value='value3'>content 3</Tabs.Panel>
-      </Tabs>
-      <Tabs data-size='xl' defaultValue='value1'>
-        <Tabs.List>
-          <Tabs.Tab value='value1'>Tab 1</Tabs.Tab>
-          <Tabs.Tab value='value2'>Tab 2</Tabs.Tab>
-          <Tabs.Tab value='value3'>Tab 3</Tabs.Tab>
-        </Tabs.List>
-        <Tabs.Panel value='value1'>content 1</Tabs.Panel>
-        <Tabs.Panel value='value2'>content 2</Tabs.Panel>
-        <Tabs.Panel value='value3'>content 3</Tabs.Panel>
-      </Tabs>
-      <Tag data-size='xs'>Tag</Tag>
-      <Tag size='sm'>Tag</Tag>
-      <Tag size='md'>Tag</Tag>
-      <Tag data-size='xl'>Tag</Tag>
-      <ToggleGroup data-size='xs' defaultValue='innboks'>
-        <ToggleGroup.Item value='innboks'>Innboks</ToggleGroup.Item>
-        <ToggleGroup.Item value='utkast'>Utkast</ToggleGroup.Item>
-        <ToggleGroup.Item value='arkiv'>Arkiv</ToggleGroup.Item>
-      </ToggleGroup>
-      <ToggleGroup size='sm' defaultValue='innboks'>
-        <ToggleGroup.Item value='innboks'>Innboks</ToggleGroup.Item>
-        <ToggleGroup.Item value='utkast'>Utkast</ToggleGroup.Item>
-        <ToggleGroup.Item value='arkiv'>Arkiv</ToggleGroup.Item>
-      </ToggleGroup>
-      <ToggleGroup size='md' defaultValue='innboks'>
-        <ToggleGroup.Item value='innboks'>Innboks</ToggleGroup.Item>
-        <ToggleGroup.Item value='utkast'>Utkast</ToggleGroup.Item>
-        <ToggleGroup.Item value='arkiv'>Arkiv</ToggleGroup.Item>
-      </ToggleGroup>
-      <ToggleGroup data-size='xl' defaultValue='innboks'>
-        <ToggleGroup.Item value='innboks'>Innboks</ToggleGroup.Item>
-        <ToggleGroup.Item value='utkast'>Utkast</ToggleGroup.Item>
-        <ToggleGroup.Item value='arkiv'>Arkiv</ToggleGroup.Item>
-      </ToggleGroup>
-      <div data-size='xs'>
-        <Tooltip content='Tooltip text'>
-          <Button>My tooltip</Button>
-        </Tooltip>
-      </div>
-      <div data-size='sm'>
-        <Tooltip content='Tooltip text'>
-          <Button>My tooltip</Button>
-        </Tooltip>
-      </div>
-      <div data-size='md'>
-        <Tooltip content='Tooltip text'>
-          <Button>My tooltip</Button>
-        </Tooltip>
-      </div>
-      <div data-size='xl'>
-        <Tooltip content='Tooltip text'>
-          <Button>My tooltip</Button>
-        </Tooltip>
-      </div>
-    </div>
-  );
-};
diff --git a/packages/react/stories/testing.stories.tsx b/packages/react/stories/testing.stories.tsx
index 4c96b74d79..562594fe49 100644
--- a/packages/react/stories/testing.stories.tsx
+++ b/packages/react/stories/testing.stories.tsx
@@ -1,16 +1,44 @@
+import { PrinterSmallIcon } from '@navikt/aksel-icons';
 import type { Meta, StoryFn } from '@storybook/react';
+import { useState } from 'react';
 
 import {
+  Accordion,
+  Alert,
+  Avatar,
+  Badge,
+  Breadcrumbs,
   Button,
+  Card,
   Checkbox,
   Chip,
   Combobox,
+  Dropdown,
+  ErrorSummary,
+  Field,
+  Heading,
+  HelpText,
+  Input,
+  Label,
+  Link,
+  List,
+  Modal,
+  Pagination,
+  Paragraph,
+  Popover,
   Radio,
   Select,
+  Spinner,
   Switch,
+  Table,
+  Tabs,
   Tag,
   Textfield,
-} from '../src/components';
+  ToggleGroup,
+  Tooltip,
+  ValidationMessage,
+  usePagination,
+} from '../src';
 
 export default {
   title: 'Testing',
@@ -127,3 +155,892 @@ LargeCol.args = {
   size: 'lg',
   direction: 'column',
 };
+
+export const Sizes: StoryFn = () => {
+  const [currentPage, setCurrentPage] = useState(4);
+  const { pages, nextButtonProps, prevButtonProps } = usePagination({
+    currentPage,
+    onChange: console.log, // Open console to see this event
+    totalPages: 10,
+    showPages: 7,
+    setCurrentPage,
+  });
+
+  return (
+    <div
+      style={{
+        display: 'grid',
+        alignItems: 'start',
+        gridTemplateColumns: 'repeat(4, 1fr)',
+        gap: '2rem',
+        maxWidth: '90vw',
+      }}
+    >
+      <div>14px</div>
+      <div>16px</div>
+      <div>18px</div>
+      <div>24px</div>
+      <Accordion data-size='xs'>
+        <Accordion.Item>
+          <Accordion.Heading>
+            Hvem kan registrere seg i Frivillighetsregisteret?
+          </Accordion.Heading>
+          <Accordion.Content>
+            For å kunne bli registrert i Frivillighetsregisteret, må
+            organisasjonen drive frivillig virksomhet. Det er bare foreninger,
+            stiftelser og aksjeselskap som kan registreres. Virksomheten kan
+            ikke dele ut midler til fysiske personer. Virksomheten må ha et
+            styre.
+          </Accordion.Content>
+        </Accordion.Item>
+      </Accordion>
+      <Accordion data-size='sm'>
+        <Accordion.Item>
+          <Accordion.Heading>
+            Hvem kan registrere seg i Frivillighetsregisteret?
+          </Accordion.Heading>
+          <Accordion.Content>
+            For å kunne bli registrert i Frivillighetsregisteret, må
+            organisasjonen drive frivillig virksomhet. Det er bare foreninger,
+            stiftelser og aksjeselskap som kan registreres. Virksomheten kan
+            ikke dele ut midler til fysiske personer. Virksomheten må ha et
+            styre.
+          </Accordion.Content>
+        </Accordion.Item>
+      </Accordion>
+      <Accordion data-size='md'>
+        <Accordion.Item>
+          <Accordion.Heading>
+            Hvem kan registrere seg i Frivillighetsregisteret?
+          </Accordion.Heading>
+          <Accordion.Content>
+            For å kunne bli registrert i Frivillighetsregisteret, må
+            organisasjonen drive frivillig virksomhet. Det er bare foreninger,
+            stiftelser og aksjeselskap som kan registreres. Virksomheten kan
+            ikke dele ut midler til fysiske personer. Virksomheten må ha et
+            styre.
+          </Accordion.Content>
+        </Accordion.Item>
+      </Accordion>
+      <Accordion data-size='xl'>
+        <Accordion.Item>
+          <Accordion.Heading>
+            Hvem kan registrere seg i Frivillighetsregisteret?
+          </Accordion.Heading>
+          <Accordion.Content>
+            For å kunne bli registrert i Frivillighetsregisteret, må
+            organisasjonen drive frivillig virksomhet. Det er bare foreninger,
+            stiftelser og aksjeselskap som kan registreres. Virksomheten kan
+            ikke dele ut midler til fysiske personer. Virksomheten må ha et
+            styre.
+          </Accordion.Content>
+        </Accordion.Item>
+      </Accordion>
+      <Alert data-size='xs'>Dette er en alert</Alert>
+      <Alert size='sm'>Dette er en alert</Alert>
+      <Alert size='md'>Dette er en alert</Alert>
+      <Alert data-size='xl'>Dette er en alert</Alert>
+      <div>
+        <Avatar size='xs' aria-label='Jan Daniel'>
+          JD
+        </Avatar>
+      </div>
+      <div>
+        <Avatar size='sm' aria-label='Jan Daniel'>
+          JD
+        </Avatar>
+      </div>
+      <div>
+        <Avatar size='md' aria-label='Jan Daniel'>
+          JD
+        </Avatar>
+      </div>
+      <div>
+        <Avatar data-size='xl' aria-label='Jan Daniel'>
+          JD
+        </Avatar>
+      </div>
+      <Badge data-size='xs' count={99} maxCount={10} />
+      <Badge size='sm' count={99} maxCount={10} />
+      <Badge size='md' count={99} maxCount={10} />
+      <Badge data-size='xl' count={99} maxCount={10} />
+      <Breadcrumbs data-size='xs'>
+        <Breadcrumbs.List>
+          <Breadcrumbs.Item>
+            <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
+          </Breadcrumbs.Item>
+          <Breadcrumbs.Item>
+            <Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
+          </Breadcrumbs.Item>
+          <Breadcrumbs.Item>
+            <Breadcrumbs.Link href='#'>Nivå 3</Breadcrumbs.Link>
+          </Breadcrumbs.Item>
+        </Breadcrumbs.List>
+      </Breadcrumbs>
+      <Breadcrumbs size='sm'>
+        <Breadcrumbs.List>
+          <Breadcrumbs.Item>
+            <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
+          </Breadcrumbs.Item>
+          <Breadcrumbs.Item>
+            <Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
+          </Breadcrumbs.Item>
+          <Breadcrumbs.Item>
+            <Breadcrumbs.Link href='#'>Nivå 3</Breadcrumbs.Link>
+          </Breadcrumbs.Item>
+        </Breadcrumbs.List>
+      </Breadcrumbs>
+      <Breadcrumbs size='md'>
+        <Breadcrumbs.List>
+          <Breadcrumbs.Item>
+            <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
+          </Breadcrumbs.Item>
+          <Breadcrumbs.Item>
+            <Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
+          </Breadcrumbs.Item>
+          <Breadcrumbs.Item>
+            <Breadcrumbs.Link href='#'>Nivå 3</Breadcrumbs.Link>
+          </Breadcrumbs.Item>
+        </Breadcrumbs.List>
+      </Breadcrumbs>
+      <Breadcrumbs data-size='xl'>
+        <Breadcrumbs.List>
+          <Breadcrumbs.Item>
+            <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
+          </Breadcrumbs.Item>
+          <Breadcrumbs.Item>
+            <Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
+          </Breadcrumbs.Item>
+          <Breadcrumbs.Item>
+            <Breadcrumbs.Link href='#'>Nivå 3</Breadcrumbs.Link>
+          </Breadcrumbs.Item>
+        </Breadcrumbs.List>
+      </Breadcrumbs>
+      <div>
+        <Button data-size='xs'>
+          <PrinterSmallIcon />
+          Klikk her
+        </Button>
+      </div>
+      <div>
+        <Button size='sm'>
+          <PrinterSmallIcon />
+          Klikk her
+        </Button>
+      </div>
+      <div>
+        <Button size='md'>
+          <PrinterSmallIcon /> Klikk her
+        </Button>
+      </div>
+      <div>
+        <Button data-size='xl'>
+          <PrinterSmallIcon /> Klikk her
+        </Button>
+      </div>
+      <Card data-size='xs'>
+        <Heading size='2xs' level={2}>
+          Card Neutral
+        </Heading>
+        <Paragraph>
+          Most provide as with carried business are much better more the
+          perfected designer. Writing slightly explain desk unable at supposedly
+          about this
+        </Paragraph>
+      </Card>
+      <Card data-size='sm'>
+        <Heading size='xs' level={2}>
+          Card Neutral
+        </Heading>
+        <Paragraph>
+          Most provide as with carried business are much better more the
+          perfected designer. Writing slightly explain desk unable at supposedly
+          about this
+        </Paragraph>
+      </Card>
+      <Card data-size='md'>
+        <Heading size='sm' level={2}>
+          Card Neutral
+        </Heading>
+        <Paragraph>
+          Most provide as with carried business are much better more the
+          perfected designer. Writing slightly explain desk unable at supposedly
+          about this
+        </Paragraph>
+      </Card>
+      <Card data-size='xl'>
+        <Heading size='lg' level={2}>
+          Card Neutral
+        </Heading>
+        <Paragraph>
+          Most provide as with carried business are much better more the
+          perfected designer. Writing slightly explain desk unable at supposedly
+          about this
+        </Paragraph>
+      </Card>
+      <div
+        style={{ display: 'flex', gap: 'var(--ds-sizing-2)' }}
+        data-size='xs'
+      >
+        <Chip.Radio>Radio</Chip.Radio>
+        <Chip.Checkbox>Check</Chip.Checkbox>
+        <Chip.Button>Knapp</Chip.Button>
+      </div>
+      <div
+        style={{ display: 'flex', gap: 'var(--ds-sizing-2)' }}
+        data-size='sm'
+      >
+        <Chip.Radio>Radio</Chip.Radio>
+        <Chip.Checkbox>Check</Chip.Checkbox>
+        <Chip.Button>Knapp</Chip.Button>
+      </div>
+      <div
+        style={{ display: 'flex', gap: 'var(--ds-sizing-2)' }}
+        data-size='md'
+      >
+        <Chip.Radio>Radio</Chip.Radio>
+        <Chip.Checkbox>Check</Chip.Checkbox>
+        <Chip.Button>Knapp</Chip.Button>
+      </div>
+      <div
+        style={{ display: 'flex', gap: 'var(--ds-sizing-2)' }}
+        data-size='xl'
+      >
+        <Chip.Radio>Radio</Chip.Radio>
+        <Chip.Checkbox>Check</Chip.Checkbox>
+        <Chip.Button>Knapp</Chip.Button>
+      </div>
+      <div data-size='xs'>
+        <Dropdown.Context>
+          <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
+          <Dropdown>
+            <Dropdown.Heading>Heading 1</Dropdown.Heading>
+            <Dropdown.List>
+              <Dropdown.Item>Button 1.1</Dropdown.Item>
+              <Dropdown.Item>Button 1.2</Dropdown.Item>
+            </Dropdown.List>
+          </Dropdown>
+        </Dropdown.Context>
+      </div>
+      <div data-size='sm'>
+        <Dropdown.Context>
+          <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
+          <Dropdown>
+            <Dropdown.Heading>Heading 1</Dropdown.Heading>
+            <Dropdown.List>
+              <Dropdown.Item>Button 1.1</Dropdown.Item>
+              <Dropdown.Item>Button 1.2</Dropdown.Item>
+            </Dropdown.List>
+          </Dropdown>
+        </Dropdown.Context>
+      </div>
+      <div data-size='md'>
+        <Dropdown.Context>
+          <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
+          <Dropdown>
+            <Dropdown.Heading>Heading 1</Dropdown.Heading>
+            <Dropdown.List>
+              <Dropdown.Item>Button 1.1</Dropdown.Item>
+              <Dropdown.Item>Button 1.2</Dropdown.Item>
+            </Dropdown.List>
+          </Dropdown>
+        </Dropdown.Context>
+      </div>
+      <div data-size='xl'>
+        <Dropdown.Context>
+          <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
+          <Dropdown>
+            <Dropdown.Heading>Heading 1</Dropdown.Heading>
+            <Dropdown.List>
+              <Dropdown.Item>Button 1.1</Dropdown.Item>
+              <Dropdown.Item>Button 1.2</Dropdown.Item>
+            </Dropdown.List>
+          </Dropdown>
+        </Dropdown.Context>
+      </div>
+      <ErrorSummary data-size='xs'>
+        <ErrorSummary.Heading>
+          For å gå videre må du rette opp følgende feil:
+        </ErrorSummary.Heading>
+        <ErrorSummary.List>
+          <ErrorSummary.Item href='#'>
+            Fødselsdato kan ikke være etter år 2005
+          </ErrorSummary.Item>
+          <ErrorSummary.Item href='#'>E-post må være gyldig</ErrorSummary.Item>
+        </ErrorSummary.List>
+      </ErrorSummary>
+      <ErrorSummary size='sm'>
+        <ErrorSummary.Heading>
+          For å gå videre må du rette opp følgende feil:
+        </ErrorSummary.Heading>
+        <ErrorSummary.List>
+          <ErrorSummary.Item href='#'>
+            Fødselsdato kan ikke være etter år 2005
+          </ErrorSummary.Item>
+          <ErrorSummary.Item href='#'>E-post må være gyldig</ErrorSummary.Item>
+        </ErrorSummary.List>
+      </ErrorSummary>
+      <ErrorSummary size='md'>
+        <ErrorSummary.Heading>
+          For å gå videre må du rette opp følgende feil:
+        </ErrorSummary.Heading>
+        <ErrorSummary.List>
+          <ErrorSummary.Item href='#'>
+            Fødselsdato kan ikke være etter år 2005
+          </ErrorSummary.Item>
+          <ErrorSummary.Item href='#'>E-post må være gyldig</ErrorSummary.Item>
+        </ErrorSummary.List>
+      </ErrorSummary>
+      <ErrorSummary data-size='xl'>
+        <ErrorSummary.Heading>
+          For å gå videre må du rette opp følgende feil:
+        </ErrorSummary.Heading>
+        <ErrorSummary.List>
+          <ErrorSummary.Item href='#'>
+            Fødselsdato kan ikke være etter år 2005
+          </ErrorSummary.Item>
+          <ErrorSummary.Item href='#'>E-post må være gyldig</ErrorSummary.Item>
+        </ErrorSummary.List>
+      </ErrorSummary>
+      <style>
+        {/* TMP fix */}
+        {`
+          .ds-field { display: block }
+          .ds-field input+label { margin: 0; font-weight: normal }
+        `}
+      </style>
+      <Field data-size='xs'>
+        <Label>Text</Label>
+        <Input aria-invalid='true' defaultValue='Noe tekst' />
+        <ValidationMessage>En feil</ValidationMessage>
+      </Field>
+      <Field data-size='sm'>
+        <Label>Text</Label>
+        <Input aria-invalid='true' defaultValue='Noe tekst' />
+        <ValidationMessage>En feil</ValidationMessage>
+      </Field>
+      <Field data-size='md'>
+        <Label>Text</Label>
+        <Input aria-invalid='true' defaultValue='Noe tekst' />
+        <ValidationMessage>En feil</ValidationMessage>
+      </Field>
+      <Field data-size='xl'>
+        <Label>Text</Label>
+        <Input aria-invalid='true' defaultValue='Noe tekst' />
+        <ValidationMessage>En feil</ValidationMessage>
+      </Field>
+      <Field
+        data-size='xs'
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--ds-sizing-2)',
+        }}
+      >
+        <Input type='radio' name='my-radio' defaultChecked />
+        <Label>Text</Label>
+      </Field>
+      <Field
+        data-size='sm'
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--ds-sizing-2)',
+        }}
+      >
+        <Input type='radio' name='my-radio' defaultChecked />
+        <Label>Text</Label>
+      </Field>
+      <Field
+        data-size='md'
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--ds-sizing-2)',
+        }}
+      >
+        <Input type='radio' name='my-radio' />
+        <Label>Text</Label>
+      </Field>
+      <Field
+        data-size='xl'
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--ds-sizing-2)',
+        }}
+      >
+        <Input type='radio' name='my-radio' />
+        <Label>Text</Label>
+      </Field>
+      <Field
+        data-size='xs'
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--ds-sizing-2)',
+        }}
+      >
+        <Input type='checkbox' name='my-check' defaultChecked />
+        <Label>Text</Label>
+      </Field>
+      <Field
+        data-size='sm'
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--ds-sizing-2)',
+        }}
+      >
+        <Input type='checkbox' name='my-check' defaultChecked />
+        <Label>Text</Label>
+      </Field>
+      <Field
+        data-size='md'
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--ds-sizing-2)',
+        }}
+      >
+        <Input type='checkbox' name='my-check' />
+        <Label>Text</Label>
+      </Field>
+      <Field
+        data-size='xl'
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--ds-sizing-2)',
+        }}
+      >
+        <Input type='checkbox' name='my-check' />
+        <Label>Text</Label>
+      </Field>
+      <Field
+        data-size='xs'
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--ds-sizing-2)',
+        }}
+      >
+        <Input type='checkbox' name='my-switch' role='switch' defaultChecked />
+        <Label>Text</Label>
+      </Field>
+      <Field
+        data-size='sm'
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--ds-sizing-2)',
+        }}
+      >
+        <Input type='checkbox' name='my-switch' role='switch' defaultChecked />
+        <Label>Text</Label>
+      </Field>
+      <Field
+        data-size='md'
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--ds-sizing-2)',
+        }}
+      >
+        <Input type='checkbox' name='my-switch' role='switch' />
+        <Label>Text</Label>
+      </Field>
+      <Field
+        data-size='xl'
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--ds-sizing-2)',
+        }}
+      >
+        <Input type='checkbox' name='my-switch' role='switch' />
+        <Label>Text</Label>
+      </Field>
+      <HelpText data-size='xs' aria-label='Mer info'>
+        Mer tekst
+      </HelpText>
+      <HelpText size='sm' aria-label='Mer info'>
+        Mer tekst
+      </HelpText>
+      <HelpText size='md' aria-label='Mer info'>
+        Mer tekst
+      </HelpText>
+      <HelpText data-size='xl' aria-label='Mer info'>
+        Mer tekst
+      </HelpText>
+      <div data-size='xs'>
+        <Link href='#'>Lenke</Link>
+      </div>
+      <div data-size='sm'>
+        <Link href='#'>Lenke</Link>
+      </div>
+      <div data-size='md'>
+        <Link href='#'>Lenke</Link>
+      </div>
+      <div data-size='xl'>
+        <Link href='#'>Lenke</Link>
+      </div>
+      <List.Unordered data-size='xs'>
+        <List.Item>List Item 1</List.Item>
+        <List.Item>List Item 2</List.Item>
+        <List.Item>List Item 3</List.Item>
+      </List.Unordered>
+      <List.Unordered size='sm'>
+        <List.Item>List Item 1</List.Item>
+        <List.Item>List Item 2</List.Item>
+        <List.Item>List Item 3</List.Item>
+      </List.Unordered>
+      <List.Unordered size='md'>
+        <List.Item>List Item 1</List.Item>
+        <List.Item>List Item 2</List.Item>
+        <List.Item>List Item 3</List.Item>
+      </List.Unordered>
+      <List.Unordered data-size='xl'>
+        <List.Item>List Item 1</List.Item>
+        <List.Item>List Item 2</List.Item>
+        <List.Item>List Item 3</List.Item>
+      </List.Unordered>
+      <Spinner size='xs' title='Loading' />
+      <Spinner size='sm' title='Loading' />
+      <Spinner size='md' title='Loading' />
+      <Spinner size='xl' title='Loading' />
+      <div data-size='xs'>
+        <Modal.Context>
+          <Modal.Trigger>Open Modal</Modal.Trigger>
+          <Modal>
+            <Heading size='xs' style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+              Modal header
+            </Heading>
+            <Paragraph style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+              Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+              Blanditiis doloremque obcaecati assumenda odio ducimus sunt et.
+            </Paragraph>
+          </Modal>
+        </Modal.Context>
+      </div>
+      <div data-size='sm'>
+        <Modal.Context>
+          <Modal.Trigger>Open Modal</Modal.Trigger>
+          <Modal>
+            <Heading size='xs' style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+              Modal header
+            </Heading>
+            <Paragraph style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+              Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+              Blanditiis doloremque obcaecati assumenda odio ducimus sunt et.
+            </Paragraph>
+          </Modal>
+        </Modal.Context>
+      </div>
+      <div data-size='md'>
+        <Modal.Context>
+          <Modal.Trigger>Open Modal</Modal.Trigger>
+          <Modal>
+            <Heading size='xs' style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+              Modal header
+            </Heading>
+            <Paragraph style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+              Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+              Blanditiis doloremque obcaecati assumenda odio ducimus sunt et.
+            </Paragraph>
+          </Modal>
+        </Modal.Context>
+      </div>
+      <div data-size='xl'>
+        <Modal.Context>
+          <Modal.Trigger>Open Modal</Modal.Trigger>
+          <Modal>
+            <Heading size='sm' style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+              Modal header
+            </Heading>
+            <Paragraph style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+              Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+              Blanditiis doloremque obcaecati assumenda odio ducimus sunt et.
+            </Paragraph>
+          </Modal>
+        </Modal.Context>
+      </div>
+      <Pagination aria-label='Sidenavigering' data-size='xs'>
+        <Pagination.List>
+          <Pagination.Item>
+            <Pagination.Button aria-label='Forrige side' {...prevButtonProps}>
+              Forrige
+            </Pagination.Button>
+          </Pagination.Item>
+          {pages.map(({ page, itemKey, buttonProps }) => (
+            <Pagination.Item key={itemKey}>
+              <Pagination.Button {...buttonProps} aria-label={`Side ${page}`}>
+                {page}
+              </Pagination.Button>
+            </Pagination.Item>
+          ))}
+          <Pagination.Item>
+            <Pagination.Button aria-label='Neste side' {...nextButtonProps}>
+              Neste
+            </Pagination.Button>
+          </Pagination.Item>
+        </Pagination.List>
+      </Pagination>
+      <Pagination aria-label='Sidenavigering' size='sm'>
+        <Pagination.List>
+          <Pagination.Item>
+            <Pagination.Button aria-label='Forrige side' {...prevButtonProps}>
+              Forrige
+            </Pagination.Button>
+          </Pagination.Item>
+          {pages.map(({ page, itemKey, buttonProps }) => (
+            <Pagination.Item key={itemKey}>
+              <Pagination.Button {...buttonProps} aria-label={`Side ${page}`}>
+                {page}
+              </Pagination.Button>
+            </Pagination.Item>
+          ))}
+          <Pagination.Item>
+            <Pagination.Button aria-label='Neste side' {...nextButtonProps}>
+              Neste
+            </Pagination.Button>
+          </Pagination.Item>
+        </Pagination.List>
+      </Pagination>
+      <Pagination aria-label='Sidenavigering' size='md'>
+        <Pagination.List>
+          <Pagination.Item>
+            <Pagination.Button aria-label='Forrige side' {...prevButtonProps}>
+              Forrige
+            </Pagination.Button>
+          </Pagination.Item>
+          {pages.map(({ page, itemKey, buttonProps }) => (
+            <Pagination.Item key={itemKey}>
+              <Pagination.Button {...buttonProps} aria-label={`Side ${page}`}>
+                {page}
+              </Pagination.Button>
+            </Pagination.Item>
+          ))}
+          <Pagination.Item>
+            <Pagination.Button aria-label='Neste side' {...nextButtonProps}>
+              Neste
+            </Pagination.Button>
+          </Pagination.Item>
+        </Pagination.List>
+      </Pagination>
+      <Pagination aria-label='Sidenavigering' data-size='xl'>
+        <Pagination.List>
+          <Pagination.Item>
+            <Pagination.Button aria-label='Forrige side' {...prevButtonProps}>
+              Forrige
+            </Pagination.Button>
+          </Pagination.Item>
+          {pages.map(({ page, itemKey, buttonProps }) => (
+            <Pagination.Item key={itemKey}>
+              <Pagination.Button {...buttonProps} aria-label={`Side ${page}`}>
+                {page}
+              </Pagination.Button>
+            </Pagination.Item>
+          ))}
+          <Pagination.Item>
+            <Pagination.Button aria-label='Neste side' {...nextButtonProps}>
+              Neste
+            </Pagination.Button>
+          </Pagination.Item>
+        </Pagination.List>
+      </Pagination>
+      <div data-size='xs'>
+        <Popover.Context>
+          <Popover.Trigger>My popup</Popover.Trigger>
+          <Popover>popover content</Popover>
+        </Popover.Context>
+      </div>
+      <div data-size='sm'>
+        <Popover.Context>
+          <Popover.Trigger>My popup</Popover.Trigger>
+          <Popover>popover content</Popover>
+        </Popover.Context>
+      </div>
+      <div data-size='md'>
+        <Popover.Context>
+          <Popover.Trigger>My popup</Popover.Trigger>
+          <Popover>popover content</Popover>
+        </Popover.Context>
+      </div>
+      <div data-size='xl'>
+        <Popover.Context>
+          <Popover.Trigger>My popup</Popover.Trigger>
+          <Popover>popover content</Popover>
+        </Popover.Context>
+      </div>
+      <Table data-size='xs'>
+        <Table.Head>
+          <Table.Row>
+            <Table.HeaderCell>Header 1</Table.HeaderCell>
+            <Table.HeaderCell>Header 2</Table.HeaderCell>
+            <Table.HeaderCell>Header 3</Table.HeaderCell>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>Cell 1</Table.Cell>
+            <Table.Cell>Cell 2</Table.Cell>
+            <Table.Cell>Cell 3</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>Cell 4</Table.Cell>
+            <Table.Cell>Cell 5</Table.Cell>
+            <Table.Cell>Cell 6</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+      <Table size='sm'>
+        <Table.Head>
+          <Table.Row>
+            <Table.HeaderCell>Header 1</Table.HeaderCell>
+            <Table.HeaderCell>Header 2</Table.HeaderCell>
+            <Table.HeaderCell>Header 3</Table.HeaderCell>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>Cell 1</Table.Cell>
+            <Table.Cell>Cell 2</Table.Cell>
+            <Table.Cell>Cell 3</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>Cell 4</Table.Cell>
+            <Table.Cell>Cell 5</Table.Cell>
+            <Table.Cell>Cell 6</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+      <Table size='md'>
+        <Table.Head>
+          <Table.Row>
+            <Table.HeaderCell>Header 1</Table.HeaderCell>
+            <Table.HeaderCell>Header 2</Table.HeaderCell>
+            <Table.HeaderCell>Header 3</Table.HeaderCell>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>Cell 1</Table.Cell>
+            <Table.Cell>Cell 2</Table.Cell>
+            <Table.Cell>Cell 3</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>Cell 4</Table.Cell>
+            <Table.Cell>Cell 5</Table.Cell>
+            <Table.Cell>Cell 6</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+      <Table data-size='xl'>
+        <Table.Head>
+          <Table.Row>
+            <Table.HeaderCell>Header 1</Table.HeaderCell>
+            <Table.HeaderCell>Header 2</Table.HeaderCell>
+            <Table.HeaderCell>Header 3</Table.HeaderCell>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>Cell 1</Table.Cell>
+            <Table.Cell>Cell 2</Table.Cell>
+            <Table.Cell>Cell 3</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>Cell 4</Table.Cell>
+            <Table.Cell>Cell 5</Table.Cell>
+            <Table.Cell>Cell 6</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+      <Tabs data-size='xs' defaultValue='value1'>
+        <Tabs.List>
+          <Tabs.Tab value='value1'>Tab 1</Tabs.Tab>
+          <Tabs.Tab value='value2'>Tab 2</Tabs.Tab>
+          <Tabs.Tab value='value3'>Tab 3</Tabs.Tab>
+        </Tabs.List>
+        <Tabs.Panel value='value1'>content 1</Tabs.Panel>
+        <Tabs.Panel value='value2'>content 2</Tabs.Panel>
+        <Tabs.Panel value='value3'>content 3</Tabs.Panel>
+      </Tabs>
+      <Tabs size='sm' defaultValue='value1'>
+        <Tabs.List>
+          <Tabs.Tab value='value1'>Tab 1</Tabs.Tab>
+          <Tabs.Tab value='value2'>Tab 2</Tabs.Tab>
+          <Tabs.Tab value='value3'>Tab 3</Tabs.Tab>
+        </Tabs.List>
+        <Tabs.Panel value='value1'>content 1</Tabs.Panel>
+        <Tabs.Panel value='value2'>content 2</Tabs.Panel>
+        <Tabs.Panel value='value3'>content 3</Tabs.Panel>
+      </Tabs>
+      <Tabs size='md' defaultValue='value1'>
+        <Tabs.List>
+          <Tabs.Tab value='value1'>Tab 1</Tabs.Tab>
+          <Tabs.Tab value='value2'>Tab 2</Tabs.Tab>
+          <Tabs.Tab value='value3'>Tab 3</Tabs.Tab>
+        </Tabs.List>
+        <Tabs.Panel value='value1'>content 1</Tabs.Panel>
+        <Tabs.Panel value='value2'>content 2</Tabs.Panel>
+        <Tabs.Panel value='value3'>content 3</Tabs.Panel>
+      </Tabs>
+      <Tabs data-size='xl' defaultValue='value1'>
+        <Tabs.List>
+          <Tabs.Tab value='value1'>Tab 1</Tabs.Tab>
+          <Tabs.Tab value='value2'>Tab 2</Tabs.Tab>
+          <Tabs.Tab value='value3'>Tab 3</Tabs.Tab>
+        </Tabs.List>
+        <Tabs.Panel value='value1'>content 1</Tabs.Panel>
+        <Tabs.Panel value='value2'>content 2</Tabs.Panel>
+        <Tabs.Panel value='value3'>content 3</Tabs.Panel>
+      </Tabs>
+      <Tag data-size='xs'>Tag</Tag>
+      <Tag size='sm'>Tag</Tag>
+      <Tag size='md'>Tag</Tag>
+      <Tag data-size='xl'>Tag</Tag>
+      <ToggleGroup data-size='xs' defaultValue='innboks'>
+        <ToggleGroup.Item value='innboks'>Innboks</ToggleGroup.Item>
+        <ToggleGroup.Item value='utkast'>Utkast</ToggleGroup.Item>
+        <ToggleGroup.Item value='arkiv'>Arkiv</ToggleGroup.Item>
+      </ToggleGroup>
+      <ToggleGroup size='sm' defaultValue='innboks'>
+        <ToggleGroup.Item value='innboks'>Innboks</ToggleGroup.Item>
+        <ToggleGroup.Item value='utkast'>Utkast</ToggleGroup.Item>
+        <ToggleGroup.Item value='arkiv'>Arkiv</ToggleGroup.Item>
+      </ToggleGroup>
+      <ToggleGroup size='md' defaultValue='innboks'>
+        <ToggleGroup.Item value='innboks'>Innboks</ToggleGroup.Item>
+        <ToggleGroup.Item value='utkast'>Utkast</ToggleGroup.Item>
+        <ToggleGroup.Item value='arkiv'>Arkiv</ToggleGroup.Item>
+      </ToggleGroup>
+      <ToggleGroup data-size='xl' defaultValue='innboks'>
+        <ToggleGroup.Item value='innboks'>Innboks</ToggleGroup.Item>
+        <ToggleGroup.Item value='utkast'>Utkast</ToggleGroup.Item>
+        <ToggleGroup.Item value='arkiv'>Arkiv</ToggleGroup.Item>
+      </ToggleGroup>
+      <div data-size='xs'>
+        <Tooltip content='Tooltip text'>
+          <Button>My tooltip</Button>
+        </Tooltip>
+      </div>
+      <div data-size='sm'>
+        <Tooltip content='Tooltip text'>
+          <Button>My tooltip</Button>
+        </Tooltip>
+      </div>
+      <div data-size='md'>
+        <Tooltip content='Tooltip text'>
+          <Button>My tooltip</Button>
+        </Tooltip>
+      </div>
+      <div data-size='xl'>
+        <Tooltip content='Tooltip text'>
+          <Button>My tooltip</Button>
+        </Tooltip>
+      </div>
+    </div>
+  );
+};

From 69d32c9e8f7715ac7e07a06e8dcad5ff6a25d4b3 Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Wed, 23 Oct 2024 10:30:23 +0200
Subject: [PATCH 18/29] fix: heading and spinner sizing

---
 packages/css/badge.css                        |   2 +-
 packages/css/base/base.css                    |  12 +--
 packages/css/chip.css                         |   2 +-
 packages/css/error-summary.css                |   2 +-
 packages/css/heading.css                      |  11 +-
 packages/css/spinner.css                      |  22 ++--
 .../src/components/Avatar/Avatar.test.tsx     |   1 -
 .../src/components/Card/Card.stories.tsx      | 101 +++++++-----------
 .../ErrorSummary/ErrorSummaryHeading.tsx      |  11 +-
 .../react/src/components/Heading/Heading.tsx  |   7 +-
 .../src/components/Modal/Modal.stories.tsx    |  16 ++-
 .../loaders/Spinner/Spinner.test.tsx          |   8 --
 packages/react/stories/testing.stories.tsx    |  24 ++---
 13 files changed, 86 insertions(+), 133 deletions(-)

diff --git a/packages/css/badge.css b/packages/css/badge.css
index b082f4f7d3..704c304062 100644
--- a/packages/css/badge.css
+++ b/packages/css/badge.css
@@ -23,7 +23,7 @@
   }
 
   &:not([data-size]) {
-    font-size: var(--ds-font-size-smaller); /* Default to small when size is not defined */
+    font-size: var(--ds-font-size-minus-1); /* Default to small when size is not defined */
   }
 
   &[data-color='info'] {
diff --git a/packages/css/base/base.css b/packages/css/base/base.css
index a51ae2fda0..f1487f93f9 100644
--- a/packages/css/base/base.css
+++ b/packages/css/base/base.css
@@ -17,10 +17,10 @@
   --dsc-focus-border-width: 3px; /* Default focus border width */
   --dsc-focus-boxShadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner);
   --dsc-focus-outline: var(--ds-color-focus-outer) solid var(--dsc-focus-border-width);
-  --ds-font-size-smaller: max(.9em, .875rem); /* Fallback if not supporting round() */
-  --ds-font-size-smaller: round(down, max(.9em, .875rem), 1px); /* Default to 90% of font-size, but minimum 14px */
-  --ds-font-size-larger: 1.1em; /* Fallback if not supporting round() */
-  --ds-font-size-larger: round(down, 1.1em, 1px); /* Default to 90% */
+  --ds-font-size-minus-1: max(.9em, .875rem); /* Fallback if not supporting round() */
+  --ds-font-size-minus-1: round(down, max(.9em, .875rem), 0.0625rem); /* Default to 90% of font-size, but minimum 14px */
+  --ds-font-size-plus-1: 1.1em; /* Fallback if not supporting round() */
+  --ds-font-size-plus-1: round(down, 1.1em, 0.0625rem); /* Default to 110% */
 
   color: var(--ds-color-neutral-text-default);
   background-color: var(--ds-color-neutral-background-default);
@@ -132,7 +132,7 @@ body,
   letter-spacing: var(--ds-heading-2xl-letter-spacing);
 }
 
-/* TODO: Label sizes */
+/* TODO: Maybe remove label sizes after sync with design */
 .ds-label--md {
   font-size: var(--ds-label-md-font-size);
   font-weight: var(--ds-label-md-font-weight);
@@ -161,7 +161,7 @@ body,
   letter-spacing: var(--ds-label-lg-letter-spacing);
 }
 
-/* TODO: Validation sizes */
+/* TODO: Maybe remove validation sizes after sync with design */
 .ds-validation-message--xs {
   font-weight: var(--ds-error_message-xs-font-weight);
   line-height: var(--ds-error_message-xs-line-height);
diff --git a/packages/css/chip.css b/packages/css/chip.css
index 98183ac5de..5d9506eea9 100644
--- a/packages/css/chip.css
+++ b/packages/css/chip.css
@@ -25,7 +25,7 @@
   text-decoration: none;
 
   &:not([data-size]) {
-    font-size: var(--ds-font-size-smaller);
+    font-size: var(--ds-font-size-minus-1);
   }
 
   /* Make focus ring also when input inside is focused */
diff --git a/packages/css/error-summary.css b/packages/css/error-summary.css
index 84fbf75e2e..9aa4ebde8c 100644
--- a/packages/css/error-summary.css
+++ b/packages/css/error-summary.css
@@ -12,7 +12,7 @@
 
   & :is(h1, h2, h3, h4, h5, h6) {
     color: var(--dsc-errorsummary-heading-color);
-    font-size: var(--ds-font-size-larger);
+    font-size: var(--ds-font-size-plus-1);
     margin-bottom: var(--ds-spacing-2);
   }
 
diff --git a/packages/css/heading.css b/packages/css/heading.css
index 264ee46297..d86475f08f 100644
--- a/packages/css/heading.css
+++ b/packages/css/heading.css
@@ -1,8 +1,11 @@
 .ds-heading {
-  margin: 0;
-
   @composes ds-heading-text--md from './base/base.css';
 
+  margin: 0;
+  font-size: 1.3em; /* Fallback if not supporting round() */
+  font-size: round(down, 1.3em, 0.0625rem); /* Default to 130% */
+
+  /* Using font-size to ensure consistent size when explicitly setting data-size */
   &[data-size='2xs'] {
     @composes ds-heading-text--2xs from './base/base.css';
   }
@@ -15,6 +18,10 @@
     @composes ds-heading-text--sm from './base/base.css';
   }
 
+  &[data-size='md'] {
+    @composes ds-heading-text--md from './base/base.css';
+  }
+
   &[data-size='lg'] {
     @composes ds-heading-text--lg from './base/base.css';
   }
diff --git a/packages/css/spinner.css b/packages/css/spinner.css
index 9e5912899a..279cbe34ac 100644
--- a/packages/css/spinner.css
+++ b/packages/css/spinner.css
@@ -1,37 +1,41 @@
 .ds-spinner {
   --dsc-spinner-background: var(--ds-color-neutral-surface-default);
   --dsc-spinner-stroke: var(--ds-color-neutral-border-default);
-  --dsc-spinner-size: var(--ds-sizing-11);
   --dsc-spinner-animation-duration: 2s;
 
   animation: ds-spinner-rotate-animation linear infinite var(--dsc-spinner-animation-duration);
   box-sizing: border-box;
-  height: var(--dsc-spinner-size);
-  width: var(--dsc-spinner-size);
+  font-size: var(--ds-sizing-11);
+  height: 1em;
+  width: 1em;
 
   &[data-color='accent'] {
     --dsc-spinner-stroke: var(--ds-color-accent-base-default);
   }
 
-  /* TODO: Fix */
+  /* Using font-size to ensure consistent size when explicitly setting data-size */
   &[data-size='2xs'] {
-    --dsc-spinner-size: var(--ds-sizing-3);
+    font-size: 0.75rem;
   }
 
   &[data-size='xs'] {
-    --dsc-spinner-size: var(--ds-sizing-5);
+    font-size: 1.25rem;
   }
 
   &[data-size='sm'] {
-    --dsc-spinner-size: var(--ds-sizing-8);
+    font-size: 2rem;
+  }
+
+  &[data-size='md'] {
+    font-size: 2.75rem;
   }
 
   &[data-size='lg'] {
-    --dsc-spinner-size: var(--ds-sizing-15);
+    font-size: 3.75rem;
   }
 
   &[data-size='xl'] {
-    --dsc-spinner-size: var(--ds-sizing-22);
+    font-size: 5.5rem;
   }
 }
 
diff --git a/packages/react/src/components/Avatar/Avatar.test.tsx b/packages/react/src/components/Avatar/Avatar.test.tsx
index ba265017f4..a3817ac01d 100644
--- a/packages/react/src/components/Avatar/Avatar.test.tsx
+++ b/packages/react/src/components/Avatar/Avatar.test.tsx
@@ -5,7 +5,6 @@ describe('Avatar', () => {
   it('should render correctly with default props', () => {
     render(<Avatar aria-label='ola' />);
     expect(screen.getByRole('img')).toBeInTheDocument();
-    expect(screen.getByRole('img')).toHaveAttribute('data-size', 'md');
     expect(screen.getByRole('img')).toHaveAttribute('data-variant', 'circle');
     expect(screen.getByRole('img')).toHaveAttribute('data-color', 'accent');
   });
diff --git a/packages/react/src/components/Card/Card.stories.tsx b/packages/react/src/components/Card/Card.stories.tsx
index 0eed2ccaff..7fad0635ef 100644
--- a/packages/react/src/components/Card/Card.stories.tsx
+++ b/packages/react/src/components/Card/Card.stories.tsx
@@ -6,13 +6,16 @@ import cat5 from '@assets/img/cats/Cat 5.jpg';
 import { PlusIcon, TrashFillIcon } from '@navikt/aksel-icons';
 import type { Meta, StoryFn } from '@storybook/react';
 
-import { Card } from '.';
-import { Button } from '../Button';
-import { Heading } from '../Heading';
-import { Label } from '../Label';
-import { Paragraph } from '../Paragraph';
-import { Select } from '../form/Select';
-import { Textfield } from '../form/Textfield';
+import {
+  Button,
+  Card,
+  Field,
+  Heading,
+  Label,
+  Paragraph,
+  Select,
+  Textfield,
+} from '../../';
 
 type Story = StoryFn<typeof Card>;
 
@@ -34,9 +37,7 @@ export default {
 
 export const Preview: Story = (args) => (
   <Card {...args} style={{ maxWidth: '320px' }}>
-    <Heading size='sm' level={2}>
-      Card Neutral
-    </Heading>
+    <Heading>Card Neutral</Heading>
     <Paragraph>
       Most provide as with carried business are much better more the perfected
       designer. Writing slightly explain desk unable at supposedly about this
@@ -56,9 +57,7 @@ export const Variants: StoryFn<typeof Card> = () => (
         <img src={cat1} alt='katt' />
       </Card.Block>
       <Card.Block>
-        <Heading level={2} size='sm'>
-          Card Neutral
-        </Heading>
+        <Heading>Card Neutral</Heading>
         <Paragraph>
           Most provide as with carried business are much better more the
           perfected designer. Writing slightly explain desk unable at supposedly
@@ -71,9 +70,7 @@ export const Variants: StoryFn<typeof Card> = () => (
         <img src={cat2} alt='katt' />
       </Card.Block>
       <Card.Block>
-        <Heading level={2} size='sm'>
-          Card Subtle
-        </Heading>
+        <Heading>Card Subtle</Heading>
         <Paragraph>
           Most provide as with carried business are much better more the
           perfected designer. Writing slightly explain desk unable at supposedly
@@ -86,9 +83,7 @@ export const Variants: StoryFn<typeof Card> = () => (
         <img src={cat3} alt='katter' />
       </Card.Block>
       <Card.Block>
-        <Heading level={2} size='sm'>
-          Card First
-        </Heading>
+        <Heading>Card First</Heading>
         <Paragraph>
           Most provide as with carried business are much better more the
           perfected designer. Writing slightly explain desk unable at supposedly
@@ -101,9 +96,7 @@ export const Variants: StoryFn<typeof Card> = () => (
         <img src={cat4} alt='katt' />
       </Card.Block>
       <Card.Block>
-        <Heading level={2} size='sm'>
-          Card Second
-        </Heading>
+        <Heading>Card Second</Heading>
         <Paragraph>
           Most provide as with carried business are much better more the
           perfected designer. Writing slightly explain desk unable at supposedly
@@ -116,9 +109,7 @@ export const Variants: StoryFn<typeof Card> = () => (
         <img src={cat5} alt='katt' />
       </Card.Block>
       <Card.Block>
-        <Heading level={2} size='sm'>
-          Card Third
-        </Heading>
+        <Heading>Card Third</Heading>
         <Paragraph>
           Most provide as with carried business are much better more the
           perfected designer. Writing slightly explain desk unable at supposedly
@@ -136,9 +127,7 @@ export const Media: Story = () => (
         <img src={cat1} alt='katt' />
       </Card.Block>
       <Card.Block>
-        <Heading level={2} size='sm'>
-          Card Neutral
-        </Heading>
+        <Heading>Card Neutral</Heading>
         <Paragraph>
           Most provide as with carried business are much better more the
           perfected designer. Writing slightly explain desk unable at supposedly
@@ -148,9 +137,7 @@ export const Media: Story = () => (
     </Card>
     <Card>
       <Card.Block>
-        <Heading level={2} size='sm'>
-          Card Neutral
-        </Heading>
+        <Heading>Card Neutral</Heading>
         <Paragraph>
           Most provide as with carried business are much better more the
           perfected designer. Writing slightly explain desk unable at supposedly
@@ -177,7 +164,7 @@ export const Video: Story = () => (
       ></iframe>
     </Card.Block>
     <Card.Block>
-      <Heading level={2} size='sm'>
+      <Heading>
         <a
           href='https://www.digdir.no/felleslosninger/30-ar-med-digitalt-innsyn/5015'
           target='_blank'
@@ -219,9 +206,7 @@ export const Composed: Story = () => (
             alignItems: 'center',
           }}
         >
-          <Heading level={2} size='xs'>
-            Rolle 1
-          </Heading>
+          <Heading>Rolle 1</Heading>
           <Button variant='secondary' color='danger' size='sm'>
             <TrashFillIcon aria-hidden fontSize='1.5rem' />
             Fjern
@@ -229,14 +214,16 @@ export const Composed: Story = () => (
         </div>
       </Card.Block>
       <Card.Block>
-        <Label htmlFor='my-select'>Velg rolle</Label>
-        <Select id='my-select'>
-          {options.map(({ value, label }, index) => (
-            <Select.Option key={index} value={value}>
-              {label}
-            </Select.Option>
-          ))}
-        </Select>
+        <Field>
+          <Label>Velg rolle</Label>
+          <Select>
+            {options.map(({ value, label }, index) => (
+              <Select.Option key={index} value={value}>
+                {label}
+              </Select.Option>
+            ))}
+          </Select>
+        </Field>
         <Textfield label='Fødsels- eller d-nummer' />
         <Textfield label='Etternavn' />
       </Card.Block>
@@ -252,9 +239,7 @@ export const Composed: Story = () => (
         <img src={cat1} alt='katt' />
       </Card.Block>
       <Card.Block>
-        <Heading level={2} size='sm'>
-          Card Neutral
-        </Heading>
+        <Heading>Card Neutral</Heading>
         <Paragraph>
           Most provide as with carried business are much better more the
           perfected designer. Writing slightly explain desk unable at supposedly
@@ -272,7 +257,7 @@ export const WithLink: Story = (args) => (
         <img src={cat5} alt='' />
       </Card.Block>
       <Card.Block>
-        <Heading size='sm' level={2}>
+        <Heading>
           <a
             href='https://designsystemet.no'
             target='_blank'
@@ -291,7 +276,7 @@ export const WithLink: Story = (args) => (
     </Card>
     <Card {...args} color='neutral'>
       <Card.Block>
-        <Heading size='sm' level={2}>
+        <Heading>
           <a
             href='https://designsystemet.no'
             target='_blank'
@@ -323,9 +308,7 @@ export const AsLink: Story = (args) => (
         rel='noopener noreferrer'
       >
         <Card.Block>
-          <Heading size='sm' level={2}>
-            Link Card with blocks
-          </Heading>
+          <Heading>Link Card with blocks</Heading>
         </Card.Block>
         <Card.Block>
           <Paragraph>
@@ -341,9 +324,7 @@ export const AsLink: Story = (args) => (
         target='_blank'
         rel='noopener noreferrer'
       >
-        <Heading size='sm' level={2}>
-          Link Card
-        </Heading>
+        <Heading>Link Card</Heading>
         <Paragraph>
           Most provide as with carried business are much better more the
           perfected designer.
@@ -358,9 +339,7 @@ export const AsButton: Story = (args) => (
     <Card {...args} color='brand1' asChild>
       <button type='button'>
         <Card.Block>
-          <Heading size='sm' level={2}>
-            Button Card with blocks
-          </Heading>
+          <Heading>Button Card with blocks</Heading>
         </Card.Block>
         <Card.Block>
           <Paragraph>
@@ -372,9 +351,7 @@ export const AsButton: Story = (args) => (
     </Card>
     <Card {...args} color='neutral' asChild>
       <button type='button'>
-        <Heading size='sm' level={2}>
-          Link Card
-        </Heading>
+        <Heading>Link Card</Heading>
         <Paragraph>
           Most provide as with carried business are much better more the
           perfected designer.
@@ -387,9 +364,7 @@ export const AsButton: Story = (args) => (
 export const AsGrid: Story = (args) => (
   <Card {...args} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
     <Card.Block>
-      <Heading size='sm' level={2}>
-        Button Card with blocks
-      </Heading>
+      <Heading>Button Card with blocks</Heading>
     </Card.Block>
     <Card.Block>
       <Paragraph>
diff --git a/packages/react/src/components/ErrorSummary/ErrorSummaryHeading.tsx b/packages/react/src/components/ErrorSummary/ErrorSummaryHeading.tsx
index 82639cba78..4e34175e0d 100644
--- a/packages/react/src/components/ErrorSummary/ErrorSummaryHeading.tsx
+++ b/packages/react/src/components/ErrorSummary/ErrorSummaryHeading.tsx
@@ -1,18 +1,9 @@
 import { forwardRef, useContext, useEffect } from 'react';
 import { Heading, type HeadingProps } from '../Heading';
-import { ErrorSummaryContext, type ErrorSummaryProps } from './ErrorSummary';
+import { ErrorSummaryContext } from './ErrorSummary';
 
 export type ErrorSummaryHeadingProps = HeadingProps;
 
-// TODO: Move to CSS
-// const HEADING_SIZE_MAP: {
-//   [key in NonNullable<ErrorSummaryProps['size']>]: HeadingProps['size'];
-// } = {
-//   sm: '2xs',
-//   md: 'xs',
-//   lg: 'sm',
-// } as const;
-
 export const ErrorSummaryHeading = forwardRef<
   HTMLHeadingElement,
   ErrorSummaryHeadingProps
diff --git a/packages/react/src/components/Heading/Heading.tsx b/packages/react/src/components/Heading/Heading.tsx
index ec42003cc3..dec96487ac 100644
--- a/packages/react/src/components/Heading/Heading.tsx
+++ b/packages/react/src/components/Heading/Heading.tsx
@@ -10,8 +10,6 @@ export type HeadingProps = {
    */
   level?: 1 | 2 | 3 | 4 | 5 | 6;
   /** Changes text sizing
-   * @default 'xl'
-   *
    */
   size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
   /**
@@ -28,10 +26,7 @@ export type HeadingProps = {
  * <Heading size='lg' level={2}>Heading</Heading>
  */
 export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(
-  function Heading(
-    { size = 'xl', level = 2, className, asChild, ...rest },
-    ref,
-  ) {
+  function Heading({ size, level = 2, className, asChild, ...rest }, ref) {
     const Component = asChild ? Slot : (`h${level}` as ElementType);
 
     return (
diff --git a/packages/react/src/components/Modal/Modal.stories.tsx b/packages/react/src/components/Modal/Modal.stories.tsx
index c13e49ae93..429bd9eff1 100644
--- a/packages/react/src/components/Modal/Modal.stories.tsx
+++ b/packages/react/src/components/Modal/Modal.stories.tsx
@@ -54,7 +54,7 @@ export const Preview: StoryFn<typeof Modal> = (args) => (
   <Modal.Context>
     <Modal.Trigger>Open Modal</Modal.Trigger>
     <Modal {...args}>
-      <Heading size='xs' style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+      <Heading style={{ marginBottom: 'var(--ds-spacing-2)' }}>
         Modal header
       </Heading>
       <Paragraph style={{ marginBottom: 'var(--ds-spacing-2)' }}>
@@ -74,7 +74,7 @@ export const WithoutModalContext: StoryFn<typeof Modal> = (args) => {
       <Button onClick={() => modalRef.current?.showModal()}>Open Modal</Button>
       <Modal {...args} ref={modalRef}>
         <Paragraph size='sm'>Modal subtittel</Paragraph>
-        <Heading size='xs' style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+        <Heading style={{ marginBottom: 'var(--ds-spacing-2)' }}>
           Modal header
         </Heading>
         <Paragraph style={{ marginBottom: 'var(--ds-spacing-2)' }}>
@@ -94,9 +94,7 @@ export const BackdropClose: StoryFn<typeof Modal> = () => {
     <Modal.Context>
       <Modal.Trigger>Open Modal</Modal.Trigger>
       <Modal ref={modalRef} backdropClose>
-        <Heading size='xs'>
-          Modal med backdropClose og en veldig lang tittel
-        </Heading>
+        <Heading>Modal med backdropClose og en veldig lang tittel</Heading>
         <Paragraph>
           Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis
           doloremque obcaecati assumenda odio ducimus sunt et.
@@ -113,7 +111,7 @@ export const WithHeaderAndFooter: StoryFn<typeof Modal> = () => (
     <Modal>
       <Modal.Block>
         <Paragraph size='sm'>Her er det også divider</Paragraph>
-        <Heading size='xs'>Vi kan legge divider under header</Heading>
+        <Heading>Vi kan legge divider under header</Heading>
       </Modal.Block>
       <Modal.Block>
         <Paragraph style={{ marginBottom: 'var(--ds-spacing-2)' }}>
@@ -152,7 +150,7 @@ export const ModalWithForm: StoryFn<typeof Modal> = () => {
     <Modal.Context>
       <Modal.Trigger>Open Modal</Modal.Trigger>
       <Modal ref={modalRef} onClose={() => setInput('')} backdropClose>
-        <Heading size='xs' style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+        <Heading style={{ marginBottom: 'var(--ds-spacing-2)' }}>
           Modal med skjema
         </Heading>
         <Textfield
@@ -190,7 +188,7 @@ export const ModalWithMaxWidth: StoryFn<typeof Modal> = () => (
   <Modal.Context>
     <Modal.Trigger>Open Modal</Modal.Trigger>
     <Modal style={{ maxWidth: 1200 }}>
-      <Heading size='xs' style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+      <Heading style={{ marginBottom: 'var(--ds-spacing-2)' }}>
         Modal med en veldig lang bredde
       </Heading>
       <Paragraph>
@@ -210,7 +208,7 @@ export const ModalWithCombobox: StoryFn<typeof Modal> = () => {
         <Modal.Trigger>Open Modal</Modal.Trigger>
         <Modal style={{ overflow: 'visible' }} ref={modalRef}>
           <Modal.Block>
-            <Heading size='xs'>Modal med combobox</Heading>
+            <Heading>Modal med combobox</Heading>
           </Modal.Block>
           <Modal.Block>
             <Combobox portal={false} label='Velg sted' autoFocus>
diff --git a/packages/react/src/components/loaders/Spinner/Spinner.test.tsx b/packages/react/src/components/loaders/Spinner/Spinner.test.tsx
index ac7c6cc49e..2c21afe4d3 100644
--- a/packages/react/src/components/loaders/Spinner/Spinner.test.tsx
+++ b/packages/react/src/components/loaders/Spinner/Spinner.test.tsx
@@ -7,14 +7,6 @@ beforeAll(() => {
 });
 
 describe('spinner', (): void => {
-  it('should render with default medium size', (): void => {
-    render(<Spinner title='Loading' />);
-    expect(screen.getByTitle('Loading').parentElement).toHaveAttribute(
-      'data-size',
-      'md',
-    );
-  });
-
   it('should render with title "loading', (): void => {
     render(<Spinner title='Loading' />);
     expect(screen.getByTitle('Loading')).toBeInTheDocument();
diff --git a/packages/react/stories/testing.stories.tsx b/packages/react/stories/testing.stories.tsx
index 562594fe49..373546a5da 100644
--- a/packages/react/stories/testing.stories.tsx
+++ b/packages/react/stories/testing.stories.tsx
@@ -339,9 +339,7 @@ export const Sizes: StoryFn = () => {
         </Button>
       </div>
       <Card data-size='xs'>
-        <Heading size='2xs' level={2}>
-          Card Neutral
-        </Heading>
+        <Heading>Card Neutral</Heading>
         <Paragraph>
           Most provide as with carried business are much better more the
           perfected designer. Writing slightly explain desk unable at supposedly
@@ -349,9 +347,7 @@ export const Sizes: StoryFn = () => {
         </Paragraph>
       </Card>
       <Card data-size='sm'>
-        <Heading size='xs' level={2}>
-          Card Neutral
-        </Heading>
+        <Heading>Card Neutral</Heading>
         <Paragraph>
           Most provide as with carried business are much better more the
           perfected designer. Writing slightly explain desk unable at supposedly
@@ -359,9 +355,7 @@ export const Sizes: StoryFn = () => {
         </Paragraph>
       </Card>
       <Card data-size='md'>
-        <Heading size='sm' level={2}>
-          Card Neutral
-        </Heading>
+        <Heading>Card Neutral</Heading>
         <Paragraph>
           Most provide as with carried business are much better more the
           perfected designer. Writing slightly explain desk unable at supposedly
@@ -369,9 +363,7 @@ export const Sizes: StoryFn = () => {
         </Paragraph>
       </Card>
       <Card data-size='xl'>
-        <Heading size='lg' level={2}>
-          Card Neutral
-        </Heading>
+        <Heading>Card Neutral</Heading>
         <Paragraph>
           Most provide as with carried business are much better more the
           perfected designer. Writing slightly explain desk unable at supposedly
@@ -713,7 +705,7 @@ export const Sizes: StoryFn = () => {
         <Modal.Context>
           <Modal.Trigger>Open Modal</Modal.Trigger>
           <Modal>
-            <Heading size='xs' style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+            <Heading style={{ marginBottom: 'var(--ds-spacing-2)' }}>
               Modal header
             </Heading>
             <Paragraph style={{ marginBottom: 'var(--ds-spacing-2)' }}>
@@ -727,7 +719,7 @@ export const Sizes: StoryFn = () => {
         <Modal.Context>
           <Modal.Trigger>Open Modal</Modal.Trigger>
           <Modal>
-            <Heading size='xs' style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+            <Heading style={{ marginBottom: 'var(--ds-spacing-2)' }}>
               Modal header
             </Heading>
             <Paragraph style={{ marginBottom: 'var(--ds-spacing-2)' }}>
@@ -741,7 +733,7 @@ export const Sizes: StoryFn = () => {
         <Modal.Context>
           <Modal.Trigger>Open Modal</Modal.Trigger>
           <Modal>
-            <Heading size='xs' style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+            <Heading style={{ marginBottom: 'var(--ds-spacing-2)' }}>
               Modal header
             </Heading>
             <Paragraph style={{ marginBottom: 'var(--ds-spacing-2)' }}>
@@ -755,7 +747,7 @@ export const Sizes: StoryFn = () => {
         <Modal.Context>
           <Modal.Trigger>Open Modal</Modal.Trigger>
           <Modal>
-            <Heading size='sm' style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+            <Heading style={{ marginBottom: 'var(--ds-spacing-2)' }}>
               Modal header
             </Heading>
             <Paragraph style={{ marginBottom: 'var(--ds-spacing-2)' }}>

From bde35ca45901d748311df70dfb63b3446e777dca Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Wed, 23 Oct 2024 10:37:29 +0200
Subject: [PATCH 19/29] chore: lint

---
 packages/react/src/types.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts
index 1f6799bbb6..5de25c74b6 100644
--- a/packages/react/src/types.ts
+++ b/packages/react/src/types.ts
@@ -8,4 +8,3 @@ export type PortalProps = {
    */
   portal?: boolean;
 };
-

From 94def5ff4b8aa8fe69d5d94dcfbf22251d0d7412 Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Wed, 23 Oct 2024 11:03:51 +0200
Subject: [PATCH 20/29] fix: avatar

---
 packages/css/avatar.css | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/packages/css/avatar.css b/packages/css/avatar.css
index 9b5cb75a25..d9f7439bac 100644
--- a/packages/css/avatar.css
+++ b/packages/css/avatar.css
@@ -1,7 +1,7 @@
 .ds-avatar {
   --dsc-avatar-background: var(--ds-color-accent-base-default);
   --dsc-avatar-color: var(--ds-color-accent-contrast-default);
-  --dsc-avatar-size: var(--ds-sizing-8);
+  --dsc-avatar-size: var(--ds-sizing-12);
   --dsc-avatar-padding: var(--ds-spacing-2);
   --dsc-avatar-border-radius: var(--ds-border-radius-full);
 
@@ -12,6 +12,7 @@
   box-sizing: border-box;
   color: var(--dsc-avatar-color);
   display: inline-flex;
+  font-weight: var(--ds-font-weight-medium);
   height: var(--dsc-avatar-size);
   justify-content: center;
   overflow: hidden;
@@ -76,4 +77,21 @@
     --dsc-avatar-background: var(--ds-color-brand3-base-default);
     --dsc-avatar-color: var(--ds-color-brand3-contrast-default);
   }
+
+  /* TODO: Sizes */
+  &[data-size='xs'] {
+    @composes ds-body-text--xs from './base/base.css';
+  }
+
+  &[data-size='sm'] {
+    @composes ds-heading-text--2xs from './base/base.css';
+  }
+
+  &[data-size='md'] {
+    @composes ds-heading-text--sm from './base/base.css';
+  }
+
+  &[data-size='lg'] {
+    @composes ds-heading-text--md from './base/base.css';
+  }
 }

From c1e790ea7693318f5c851872b3de7b360f07407e Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Wed, 23 Oct 2024 11:12:33 +0200
Subject: [PATCH 21/29] fix: avatar

---
 packages/css/avatar.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/css/avatar.css b/packages/css/avatar.css
index d9f7439bac..3e37c02b1a 100644
--- a/packages/css/avatar.css
+++ b/packages/css/avatar.css
@@ -80,7 +80,7 @@
 
   /* TODO: Sizes */
   &[data-size='xs'] {
-    @composes ds-body-text--xs from './base/base.css';
+    font-size: var(--ds-body-xs-font-size);
   }
 
   &[data-size='sm'] {

From 0985a582cf7247e00a0fb493aa6c61ae77afdfb7 Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Wed, 23 Oct 2024 12:29:58 +0200
Subject: [PATCH 22/29] fix: round fallback support

---
 packages/css/index.css | 34 +++++++++++++++++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/packages/css/index.css b/packages/css/index.css
index c2b4ecf75e..1f7d0acb56 100644
--- a/packages/css/index.css
+++ b/packages/css/index.css
@@ -50,7 +50,39 @@
   --ds-sizing-step: 4; /* Unitless step size 4px */
   --ds-sizing-scale: var(--ds-sizing-step) / var(--ds-sizing-base);
 
-  /* Sizing */
+  /* Sizing when not supporting round() */
+  --ds-sizing-1: calc(var(--ds-sizing-scale) * 1em);
+  --ds-sizing-2: calc(var(--ds-sizing-scale) * 2em);
+  --ds-sizing-3: calc(var(--ds-sizing-scale) * 3em);
+  --ds-sizing-4: calc(var(--ds-sizing-scale) * 4em);
+  --ds-sizing-5: calc(var(--ds-sizing-scale) * 5em);
+  --ds-sizing-6: calc(var(--ds-sizing-scale) * 6em);
+  --ds-sizing-7: calc(var(--ds-sizing-scale) * 7em);
+  --ds-sizing-8: calc(var(--ds-sizing-scale) * 8em);
+  --ds-sizing-9: calc(var(--ds-sizing-scale) * 9em);
+  --ds-sizing-10: calc(var(--ds-sizing-scale) * 10em);
+  --ds-sizing-11: calc(var(--ds-sizing-scale) * 11em);
+  --ds-sizing-12: calc(var(--ds-sizing-scale) * 12em);
+  --ds-sizing-13: calc(var(--ds-sizing-scale) * 13em);
+  --ds-sizing-14: calc(var(--ds-sizing-scale) * 14em);
+  --ds-sizing-15: calc(var(--ds-sizing-scale) * 15em);
+  --ds-sizing-16: calc(var(--ds-sizing-scale) * 16em);
+  --ds-sizing-17: calc(var(--ds-sizing-scale) * 17em);
+  --ds-sizing-18: calc(var(--ds-sizing-scale) * 18em);
+  --ds-sizing-19: calc(var(--ds-sizing-scale) * 19em);
+  --ds-sizing-20: calc(var(--ds-sizing-scale) * 20em);
+  --ds-sizing-21: calc(var(--ds-sizing-scale) * 21em);
+  --ds-sizing-22: calc(var(--ds-sizing-scale) * 22em);
+  --ds-sizing-23: calc(var(--ds-sizing-scale) * 23em);
+  --ds-sizing-24: calc(var(--ds-sizing-scale) * 24em);
+  --ds-sizing-25: calc(var(--ds-sizing-scale) * 25em);
+  --ds-sizing-26: calc(var(--ds-sizing-scale) * 26em);
+  --ds-sizing-27: calc(var(--ds-sizing-scale) * 27em);
+  --ds-sizing-28: calc(var(--ds-sizing-scale) * 28em);
+  --ds-sizing-29: calc(var(--ds-sizing-scale) * 29em);
+  --ds-sizing-30: calc(var(--ds-sizing-scale) * 30em);
+
+  /* Sizing when supporting round() */
   --ds-sizing-1: round(down, calc(var(--ds-sizing-scale) * 1em), 0.0625rem);
   --ds-sizing-2: round(down, calc(var(--ds-sizing-scale) * 2em), 0.0625rem);
   --ds-sizing-3: round(down, calc(var(--ds-sizing-scale) * 3em), 0.0625rem);

From 8c4a8a84428e5b9eb337db5d051fba88b2efdd28 Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Wed, 23 Oct 2024 12:40:22 +0200
Subject: [PATCH 23/29] fix: use @supports

---
 packages/css/base/base.css | 12 +++++---
 packages/css/index.css     | 62 ++++++++++++++++++++------------------
 2 files changed, 40 insertions(+), 34 deletions(-)

diff --git a/packages/css/base/base.css b/packages/css/base/base.css
index f1487f93f9..14355a0dd9 100644
--- a/packages/css/base/base.css
+++ b/packages/css/base/base.css
@@ -17,10 +17,14 @@
   --dsc-focus-border-width: 3px; /* Default focus border width */
   --dsc-focus-boxShadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner);
   --dsc-focus-outline: var(--ds-color-focus-outer) solid var(--dsc-focus-border-width);
-  --ds-font-size-minus-1: max(.9em, .875rem); /* Fallback if not supporting round() */
-  --ds-font-size-minus-1: round(down, max(.9em, .875rem), 0.0625rem); /* Default to 90% of font-size, but minimum 14px */
-  --ds-font-size-plus-1: 1.1em; /* Fallback if not supporting round() */
-  --ds-font-size-plus-1: round(down, 1.1em, 0.0625rem); /* Default to 110% */
+  --ds-font-size-minus-1: max(.9em, .875rem); /* Default to 90% of font-size, but minimum 14px */
+  --ds-font-size-plus-1: 1.1em; /* Default to 110% */
+
+  /* font-size adjustments if supporting round() */
+  @supports (width: round(down, .1em, 1px)) {
+    --ds-font-size-minus-1: round(down, max(.9em, .875rem), 0.0625rem); /* Default to 90% of font-size, but minimum 14px */
+    --ds-font-size-plus-1: round(down, 1.1em, 0.0625rem); /* Default to 110% */
+  }
 
   color: var(--ds-color-neutral-text-default);
   background-color: var(--ds-color-neutral-background-default);
diff --git a/packages/css/index.css b/packages/css/index.css
index 1f7d0acb56..77adbf78c7 100644
--- a/packages/css/index.css
+++ b/packages/css/index.css
@@ -83,36 +83,38 @@
   --ds-sizing-30: calc(var(--ds-sizing-scale) * 30em);
 
   /* Sizing when supporting round() */
-  --ds-sizing-1: round(down, calc(var(--ds-sizing-scale) * 1em), 0.0625rem);
-  --ds-sizing-2: round(down, calc(var(--ds-sizing-scale) * 2em), 0.0625rem);
-  --ds-sizing-3: round(down, calc(var(--ds-sizing-scale) * 3em), 0.0625rem);
-  --ds-sizing-4: round(down, calc(var(--ds-sizing-scale) * 4em), 0.0625rem);
-  --ds-sizing-5: round(down, calc(var(--ds-sizing-scale) * 5em), 0.0625rem);
-  --ds-sizing-6: round(down, calc(var(--ds-sizing-scale) * 6em), 0.0625rem);
-  --ds-sizing-7: round(down, calc(var(--ds-sizing-scale) * 7em), 0.0625rem);
-  --ds-sizing-8: round(down, calc(var(--ds-sizing-scale) * 8em), 0.0625rem);
-  --ds-sizing-9: round(down, calc(var(--ds-sizing-scale) * 9em), 0.0625rem);
-  --ds-sizing-10: round(down, calc(var(--ds-sizing-scale) * 10em), 0.0625rem);
-  --ds-sizing-11: round(down, calc(var(--ds-sizing-scale) * 11em), 0.0625rem);
-  --ds-sizing-12: round(down, calc(var(--ds-sizing-scale) * 12em), 0.0625rem);
-  --ds-sizing-13: round(down, calc(var(--ds-sizing-scale) * 13em), 0.0625rem);
-  --ds-sizing-14: round(down, calc(var(--ds-sizing-scale) * 14em), 0.0625rem);
-  --ds-sizing-15: round(down, calc(var(--ds-sizing-scale) * 15em), 0.0625rem);
-  --ds-sizing-16: round(down, calc(var(--ds-sizing-scale) * 16em), 0.0625rem);
-  --ds-sizing-17: round(down, calc(var(--ds-sizing-scale) * 17em), 0.0625rem);
-  --ds-sizing-18: round(down, calc(var(--ds-sizing-scale) * 18em), 0.0625rem);
-  --ds-sizing-19: round(down, calc(var(--ds-sizing-scale) * 19em), 0.0625rem);
-  --ds-sizing-20: round(down, calc(var(--ds-sizing-scale) * 20em), 0.0625rem);
-  --ds-sizing-21: round(down, calc(var(--ds-sizing-scale) * 21em), 0.0625rem);
-  --ds-sizing-22: round(down, calc(var(--ds-sizing-scale) * 22em), 0.0625rem);
-  --ds-sizing-23: round(down, calc(var(--ds-sizing-scale) * 23em), 0.0625rem);
-  --ds-sizing-24: round(down, calc(var(--ds-sizing-scale) * 24em), 0.0625rem);
-  --ds-sizing-25: round(down, calc(var(--ds-sizing-scale) * 25em), 0.0625rem);
-  --ds-sizing-26: round(down, calc(var(--ds-sizing-scale) * 26em), 0.0625rem);
-  --ds-sizing-27: round(down, calc(var(--ds-sizing-scale) * 27em), 0.0625rem);
-  --ds-sizing-28: round(down, calc(var(--ds-sizing-scale) * 28em), 0.0625rem);
-  --ds-sizing-29: round(down, calc(var(--ds-sizing-scale) * 29em), 0.0625rem);
-  --ds-sizing-30: round(down, calc(var(--ds-sizing-scale) * 30em), 0.0625rem);
+  @supports (width: round(down, .1em, 1px)) {
+    --ds-sizing-1: round(down, calc(var(--ds-sizing-scale) * 1em), 0.0625rem);
+    --ds-sizing-2: round(down, calc(var(--ds-sizing-scale) * 2em), 0.0625rem);
+    --ds-sizing-3: round(down, calc(var(--ds-sizing-scale) * 3em), 0.0625rem);
+    --ds-sizing-4: round(down, calc(var(--ds-sizing-scale) * 4em), 0.0625rem);
+    --ds-sizing-5: round(down, calc(var(--ds-sizing-scale) * 5em), 0.0625rem);
+    --ds-sizing-6: round(down, calc(var(--ds-sizing-scale) * 6em), 0.0625rem);
+    --ds-sizing-7: round(down, calc(var(--ds-sizing-scale) * 7em), 0.0625rem);
+    --ds-sizing-8: round(down, calc(var(--ds-sizing-scale) * 8em), 0.0625rem);
+    --ds-sizing-9: round(down, calc(var(--ds-sizing-scale) * 9em), 0.0625rem);
+    --ds-sizing-10: round(down, calc(var(--ds-sizing-scale) * 10em), 0.0625rem);
+    --ds-sizing-11: round(down, calc(var(--ds-sizing-scale) * 11em), 0.0625rem);
+    --ds-sizing-12: round(down, calc(var(--ds-sizing-scale) * 12em), 0.0625rem);
+    --ds-sizing-13: round(down, calc(var(--ds-sizing-scale) * 13em), 0.0625rem);
+    --ds-sizing-14: round(down, calc(var(--ds-sizing-scale) * 14em), 0.0625rem);
+    --ds-sizing-15: round(down, calc(var(--ds-sizing-scale) * 15em), 0.0625rem);
+    --ds-sizing-16: round(down, calc(var(--ds-sizing-scale) * 16em), 0.0625rem);
+    --ds-sizing-17: round(down, calc(var(--ds-sizing-scale) * 17em), 0.0625rem);
+    --ds-sizing-18: round(down, calc(var(--ds-sizing-scale) * 18em), 0.0625rem);
+    --ds-sizing-19: round(down, calc(var(--ds-sizing-scale) * 19em), 0.0625rem);
+    --ds-sizing-20: round(down, calc(var(--ds-sizing-scale) * 20em), 0.0625rem);
+    --ds-sizing-21: round(down, calc(var(--ds-sizing-scale) * 21em), 0.0625rem);
+    --ds-sizing-22: round(down, calc(var(--ds-sizing-scale) * 22em), 0.0625rem);
+    --ds-sizing-23: round(down, calc(var(--ds-sizing-scale) * 23em), 0.0625rem);
+    --ds-sizing-24: round(down, calc(var(--ds-sizing-scale) * 24em), 0.0625rem);
+    --ds-sizing-25: round(down, calc(var(--ds-sizing-scale) * 25em), 0.0625rem);
+    --ds-sizing-26: round(down, calc(var(--ds-sizing-scale) * 26em), 0.0625rem);
+    --ds-sizing-27: round(down, calc(var(--ds-sizing-scale) * 27em), 0.0625rem);
+    --ds-sizing-28: round(down, calc(var(--ds-sizing-scale) * 28em), 0.0625rem);
+    --ds-sizing-29: round(down, calc(var(--ds-sizing-scale) * 29em), 0.0625rem);
+    --ds-sizing-30: round(down, calc(var(--ds-sizing-scale) * 30em), 0.0625rem);
+  }
 
   /* Spacing */
   --ds-spacing-1: var(--ds-sizing-1);

From 1438a1917ead4481eb0b5e6d387f50ace723aa50 Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Wed, 23 Oct 2024 15:18:54 +0200
Subject: [PATCH 24/29] fix: update size type to only include sm, md, lg

---
 packages/react/src/components/Avatar/Avatar.tsx           | 2 +-
 packages/react/src/components/Label/Label.tsx             | 2 +-
 .../src/components/Pagination/Pagination.stories.tsx      | 8 ++++++--
 .../components/ValidationMessage/ValidationMessage.tsx    | 2 +-
 packages/react/src/types.ts                               | 2 +-
 5 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/components/Avatar/Avatar.tsx b/packages/react/src/components/Avatar/Avatar.tsx
index de1d7ae648..f883f30f5f 100644
--- a/packages/react/src/components/Avatar/Avatar.tsx
+++ b/packages/react/src/components/Avatar/Avatar.tsx
@@ -18,7 +18,7 @@ export type AvatarProps = {
   /**
    * The size of the avatar.
    */
-  size?: Size;
+  size?: 'xs' | 'sm' | 'md' | 'lg';
   /**
    * The shape of the avatar.
    *
diff --git a/packages/react/src/components/Label/Label.tsx b/packages/react/src/components/Label/Label.tsx
index a95dd0361a..ef7562f81c 100644
--- a/packages/react/src/components/Label/Label.tsx
+++ b/packages/react/src/components/Label/Label.tsx
@@ -8,7 +8,7 @@ export type LabelProps = {
   /**
    * Changes text sizing
    */
-  size?: Size;
+  size?: 'xs' | 'sm' | 'md' | 'lg';
   /**
    * Adjusts font weight. Use this when you have a label hierarchy, such as checkboxes/radios in a fieldset
    * @default 'medium'
diff --git a/packages/react/src/components/Pagination/Pagination.stories.tsx b/packages/react/src/components/Pagination/Pagination.stories.tsx
index f77596f8a8..399d3997f6 100644
--- a/packages/react/src/components/Pagination/Pagination.stories.tsx
+++ b/packages/react/src/components/Pagination/Pagination.stories.tsx
@@ -2,13 +2,16 @@ import { useArgs } from '@storybook/preview-api';
 import type { Meta, StoryFn } from '@storybook/react';
 
 import { Pagination, type UsePaginationProps, usePagination } from '.';
+import type { Size } from '../../types';
 
 export default {
   title: 'Komponenter/Pagination',
   component: Pagination,
 } as Meta;
 
-export const Preview: StoryFn<UsePaginationProps> = (args) => {
+export const Preview: StoryFn<UsePaginationProps & { size?: Size }> = (
+  args,
+) => {
   const [, updateArgs] = useArgs();
   const { pages, nextButtonProps, prevButtonProps } = usePagination({
     ...args,
@@ -16,7 +19,7 @@ export const Preview: StoryFn<UsePaginationProps> = (args) => {
   });
 
   return (
-    <Pagination aria-label='Sidenavigering'>
+    <Pagination aria-label='Sidenavigering' size={args.size}>
       <Pagination.List>
         <Pagination.Item>
           <Pagination.Button aria-label='Forrige side' {...prevButtonProps}>
@@ -41,6 +44,7 @@ export const Preview: StoryFn<UsePaginationProps> = (args) => {
 };
 
 Preview.args = {
+  size: 'md',
   currentPage: 4,
   setCurrentPage: console.log, // Added to include in storybook args
   onChange: console.log, // Open console to see this event
diff --git a/packages/react/src/components/ValidationMessage/ValidationMessage.tsx b/packages/react/src/components/ValidationMessage/ValidationMessage.tsx
index 43b4f6eab3..2b72268979 100644
--- a/packages/react/src/components/ValidationMessage/ValidationMessage.tsx
+++ b/packages/react/src/components/ValidationMessage/ValidationMessage.tsx
@@ -8,7 +8,7 @@ export type ValidationMessageProps = {
   /**
    * Changes text sizing
    */
-  size?: Size;
+  size?: 'xs' | 'sm' | 'md' | 'lg';
   /** Toggle error color */
   error?: boolean;
   /**
diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts
index 5de25c74b6..a70d2ef8e1 100644
--- a/packages/react/src/types.ts
+++ b/packages/react/src/types.ts
@@ -1,4 +1,4 @@
-export type Size = 'xs' | 'sm' | 'md' | 'lg';
+export type Size = 'sm' | 'md' | 'lg';
 
 export type PortalProps = {
   /**

From 94d54f66d6a390682171c18c0248bf69bf6e364a Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Wed, 23 Oct 2024 15:22:55 +0200
Subject: [PATCH 25/29] fix(Theme): search input height

---
 packages/css/search.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/css/search.css b/packages/css/search.css
index 9de0667e77..132a0c758f 100644
--- a/packages/css/search.css
+++ b/packages/css/search.css
@@ -61,7 +61,7 @@
   position: relative;
   box-sizing: border-box;
   flex: 0 1 auto;
-  height: var(--ds-sizing-10);
+  height: 100%;
   width: 100%;
   appearance: none;
   padding: 0 var(--ds-spacing-3);

From 0e96b562abe19fb98c90763d6740ff3a1b75212c Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Wed, 23 Oct 2024 15:24:23 +0200
Subject: [PATCH 26/29] chore: add comment

---
 packages/css/base/base.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/css/base/base.css b/packages/css/base/base.css
index 14355a0dd9..519a95954d 100644
--- a/packages/css/base/base.css
+++ b/packages/css/base/base.css
@@ -64,6 +64,7 @@
   letter-spacing: var(--ds-body-sm-letter-spacing);
 }
 
+/* Setting default font on <body> not :root/<html> to ensure 1rem is still 16px */
 body,
 [data-size='md'] {
   font-weight: var(--ds-body-md-font-weight);

From 6fa73c615f96af616ab7703b1fe4f1bc332f84b0 Mon Sep 17 00:00:00 2001
From: Eirik Backer <eirik.backer@gmail.com>
Date: Thu, 24 Oct 2024 09:08:25 +0200
Subject: [PATCH 27/29] Create fair-beds-destroy.md

---
 .changeset/fair-beds-destroy.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/fair-beds-destroy.md

diff --git a/.changeset/fair-beds-destroy.md b/.changeset/fair-beds-destroy.md
new file mode 100644
index 0000000000..68c96596f7
--- /dev/null
+++ b/.changeset/fair-beds-destroy.md
@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+CSS: base sizing on font-size so all components can have all sizes, and naturally inherits size from context

From 4d79828336762302fa9a03333f11378f83132d1f Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Thu, 24 Oct 2024 09:20:44 +0200
Subject: [PATCH 28/29] fix: remove unused imports

---
 .../react/src/components/ErrorSummary/ErrorSummaryList.tsx    | 4 +---
 packages/react/src/components/Pagination/PaginationButton.tsx | 2 +-
 packages/react/src/components/Pagination/PaginationList.tsx   | 2 +-
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/components/ErrorSummary/ErrorSummaryList.tsx b/packages/react/src/components/ErrorSummary/ErrorSummaryList.tsx
index 98740c5628..15835682c0 100644
--- a/packages/react/src/components/ErrorSummary/ErrorSummaryList.tsx
+++ b/packages/react/src/components/ErrorSummary/ErrorSummaryList.tsx
@@ -1,8 +1,6 @@
-import { forwardRef, useContext } from 'react';
+import { forwardRef } from 'react';
 import { List, type ListUnorderedProps } from '../List';
 
-import { ErrorSummaryContext } from './ErrorSummary';
-
 export type ErrorSummaryListProps = ListUnorderedProps;
 
 export const ErrorSummaryList = forwardRef<
diff --git a/packages/react/src/components/Pagination/PaginationButton.tsx b/packages/react/src/components/Pagination/PaginationButton.tsx
index d62a6151ac..871adc9188 100644
--- a/packages/react/src/components/Pagination/PaginationButton.tsx
+++ b/packages/react/src/components/Pagination/PaginationButton.tsx
@@ -1,4 +1,4 @@
-import { type AriaAttributes, forwardRef, useContext } from 'react';
+import { type AriaAttributes, forwardRef } from 'react';
 
 import { Button, type ButtonProps } from '../Button/Button';
 
diff --git a/packages/react/src/components/Pagination/PaginationList.tsx b/packages/react/src/components/Pagination/PaginationList.tsx
index 46ccf3a010..4cb627d9e9 100644
--- a/packages/react/src/components/Pagination/PaginationList.tsx
+++ b/packages/react/src/components/Pagination/PaginationList.tsx
@@ -1,5 +1,5 @@
 import { Slot } from '@radix-ui/react-slot';
-import { forwardRef, useContext, useEffect, useRef } from 'react';
+import { forwardRef } from 'react';
 import type { HTMLAttributes } from 'react';
 
 export type PaginationListProps = {

From 3a4d58768c98f12aafe13c4e5f8f5146a0ff40a0 Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Thu, 24 Oct 2024 09:54:22 +0200
Subject: [PATCH 29/29] fix(HelpText): forward data-size

---
 packages/react/src/components/HelpText/HelpText.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/HelpText/HelpText.tsx b/packages/react/src/components/HelpText/HelpText.tsx
index 9cd53180e5..2dc6a2e273 100644
--- a/packages/react/src/components/HelpText/HelpText.tsx
+++ b/packages/react/src/components/HelpText/HelpText.tsx
@@ -20,7 +20,10 @@ export type HelpTextProps = {
    * @default 'right'
    */
   placement?: Placement;
-} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>;
+} & { 'data-size'?: string } & Omit<
+    ButtonHTMLAttributes<HTMLButtonElement>,
+    'color'
+  >;
 
 export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
   function HelpText(
@@ -36,7 +39,11 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
           variant='tertiary'
           {...rest}
         />
-        <Popover placement={placement} size={size} variant='info'>
+        <Popover
+          placement={placement}
+          size={size || (rest['data-size'] as Size)}
+          variant='info'
+        >
           {children}
         </Popover>
       </Popover.Context>