From ed179a157324f3857c805ea3465728ca56a56a2e Mon Sep 17 00:00:00 2001
From: Eirik Backer <eirik.backer@gmail.com>
Date: Wed, 18 Sep 2024 15:12:08 +0200
Subject: [PATCH] fix(Tabs): api alignment (#2448)

- Part of #2221
- Renames `Tabs.Root` to `Tabs`
- Renames `Tabs.Content` to `Tabs.Panel` as this aligns with
ARIA-standard and is a more common convention
---
 .changeset/gold-chairs-jog.md                 |  8 ++
 .../Previews/Components/Components.tsx        |  4 +-
 packages/css/tabs.css                         |  2 +-
 .../src/components/Badge/Badge.stories.tsx    | 10 +--
 packages/react/src/components/Tabs/Tab.tsx    | 40 ----------
 .../react/src/components/Tabs/TabList.tsx     | 39 ---------
 packages/react/src/components/Tabs/Tabs.mdx   | 26 +++---
 .../src/components/Tabs/Tabs.stories.tsx      | 34 ++++----
 .../react/src/components/Tabs/Tabs.test.tsx   | 30 +++----
 packages/react/src/components/Tabs/Tabs.tsx   | 78 ++++++++++++++++++
 .../react/src/components/Tabs/TabsList.tsx    | 38 +++++++++
 .../Tabs/{TabContent.tsx => TabsPanel.tsx}    | 18 ++---
 .../react/src/components/Tabs/TabsRoot.tsx    | 79 -------------------
 .../react/src/components/Tabs/TabsTab.tsx     | 41 ++++++++++
 packages/react/src/components/Tabs/index.ts   | 49 +++++-------
 packages/react/src/components/Tabs/useTab.ts  | 32 --------
 packages/react/stories/showcase.stories.tsx   |  4 +-
 17 files changed, 248 insertions(+), 284 deletions(-)
 create mode 100644 .changeset/gold-chairs-jog.md
 delete mode 100644 packages/react/src/components/Tabs/Tab.tsx
 delete mode 100644 packages/react/src/components/Tabs/TabList.tsx
 create mode 100644 packages/react/src/components/Tabs/Tabs.tsx
 create mode 100644 packages/react/src/components/Tabs/TabsList.tsx
 rename packages/react/src/components/Tabs/{TabContent.tsx => TabsPanel.tsx} (61%)
 delete mode 100644 packages/react/src/components/Tabs/TabsRoot.tsx
 create mode 100644 packages/react/src/components/Tabs/TabsTab.tsx
 delete mode 100644 packages/react/src/components/Tabs/useTab.ts

diff --git a/.changeset/gold-chairs-jog.md b/.changeset/gold-chairs-jog.md
new file mode 100644
index 0000000000..9351938447
--- /dev/null
+++ b/.changeset/gold-chairs-jog.md
@@ -0,0 +1,8 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+Tabs:
+- Renames `Tabs.Root` to `Tabs`
+- Renames `Tabs.Content` to `Tabs.Panel`
diff --git a/apps/theme/components/Previews/Components/Components.tsx b/apps/theme/components/Previews/Components/Components.tsx
index 2576db1663..6d32accf0e 100644
--- a/apps/theme/components/Previews/Components/Components.tsx
+++ b/apps/theme/components/Previews/Components/Components.tsx
@@ -309,13 +309,13 @@ export const Components = () => {
         />
       </div>
       <div className={cl(classes.card, classes.tabs)}>
-        <Tabs.Root defaultValue='value1' size='sm'>
+        <Tabs defaultValue='value1' size='sm'>
           <Tabs.List>
             <Tabs.Tab value='value1'>Min profil</Tabs.Tab>
             <Tabs.Tab value='value2'>Tjenester</Tabs.Tab>
             <Tabs.Tab value='value3'>Innstillinger</Tabs.Tab>
           </Tabs.List>
-        </Tabs.Root>
+        </Tabs>
         <Paragraph size='sm'>
           For å kunne bli registrert i{' '}
           <Link href='#' color='neutral'>
diff --git a/packages/css/tabs.css b/packages/css/tabs.css
index 6484086774..21fc16d5b6 100644
--- a/packages/css/tabs.css
+++ b/packages/css/tabs.css
@@ -17,7 +17,7 @@
   }
 }
 
-.ds-tabs__content {
+.ds-tabs__panel {
   padding: var(--dsc-tabs-content-padding);
   color: var(--dsc-tabs-content-color);
 }
diff --git a/packages/react/src/components/Badge/Badge.stories.tsx b/packages/react/src/components/Badge/Badge.stories.tsx
index 17e2f12f1f..f17e17c960 100644
--- a/packages/react/src/components/Badge/Badge.stories.tsx
+++ b/packages/react/src/components/Badge/Badge.stories.tsx
@@ -134,7 +134,7 @@ export const Status: Story = (args) => (
 );
 
 export const InTabs: Story = (args) => (
-  <Tabs.Root defaultValue='value1' size='md'>
+  <Tabs defaultValue='value1' size='md'>
     <Tabs.List>
       <Tabs.Tab value='value1'>
         <HeartFillIcon fontSize='1.75rem' />
@@ -148,10 +148,10 @@ export const InTabs: Story = (args) => (
         <Badge count={2} color='neutral' />
       </Tabs.Tab>
     </Tabs.List>
-    <Tabs.Content value='value1'>content 1</Tabs.Content>
-    <Tabs.Content value='value2'>content 2</Tabs.Content>
-    <Tabs.Content value='value3'>content 3</Tabs.Content>
-  </Tabs.Root>
+    <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>
 );
 
 export const InButton: Story = (args) => (
diff --git a/packages/react/src/components/Tabs/Tab.tsx b/packages/react/src/components/Tabs/Tab.tsx
deleted file mode 100644
index 04f0ce0538..0000000000
--- a/packages/react/src/components/Tabs/Tab.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import cl from 'clsx/lite';
-import type { HTMLAttributes } from 'react';
-import { forwardRef } from 'react';
-
-import { RovingFocusItem } from '../../utilities/RovingFocus/RovingFocusItem';
-import { Paragraph } from '../Typography';
-
-import { useTabItem } from './useTab';
-
-export type TabProps = {
-  /** Value that will be set in the `Tabs` components state when the tab is activated */
-  value: string;
-} & Omit<HTMLAttributes<HTMLButtonElement>, 'value'>;
-
-/**
- * A single item in a Tabs component.
- * @example
- * <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
- */
-export const Tab = forwardRef<HTMLButtonElement, TabProps>((props, ref) => {
-  const { children, className, ...rest } = props;
-  const { size, ...useTabRest } = useTabItem(props);
-
-  return (
-    <RovingFocusItem {...rest} asChild>
-      <Paragraph asChild variant='short' size={size}>
-        <button
-          {...useTabRest}
-          type='button'
-          className={cl('ds-tabs__tab', className)}
-          ref={ref}
-        >
-          {children}
-        </button>
-      </Paragraph>
-    </RovingFocusItem>
-  );
-});
-
-Tab.displayName = 'Tab';
diff --git a/packages/react/src/components/Tabs/TabList.tsx b/packages/react/src/components/Tabs/TabList.tsx
deleted file mode 100644
index 8fb84e0549..0000000000
--- a/packages/react/src/components/Tabs/TabList.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import cl from 'clsx/lite';
-import type { HTMLAttributes } from 'react';
-import { forwardRef, useContext } from 'react';
-
-import { RovingFocusRoot } from '../../utilities/RovingFocus';
-
-import { TabsContext } from './TabsRoot';
-
-/**
- * The container for all `Tab` components.
- * @example
- * ```tsx
- * <Tabs.List>
- *  <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
- *  <Tabs.Tab value='2'>Tab 2</Tabs.Tab>
- * </Tabs.List>
- * ```
- */
-export const TabList = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement>
->(({ children, className, ...rest }, ref) => {
-  const { value } = useContext(TabsContext);
-
-  return (
-    <RovingFocusRoot
-      role='tablist'
-      activeValue={value}
-      className={cl('ds-tabs__tablist', className)}
-      orientation='ambiguous'
-      ref={ref}
-      {...rest}
-    >
-      {children}
-    </RovingFocusRoot>
-  );
-});
-
-TabList.displayName = 'TabList';
diff --git a/packages/react/src/components/Tabs/Tabs.mdx b/packages/react/src/components/Tabs/Tabs.mdx
index 18b1bef7b7..9956e549e0 100644
--- a/packages/react/src/components/Tabs/Tabs.mdx
+++ b/packages/react/src/components/Tabs/Tabs.mdx
@@ -1,8 +1,8 @@
 import { Meta, Canvas, Controls, Primary, ArgTypes } from '@storybook/blocks';
 
-import { TabsRoot } from './TabsRoot';
-import { Tab } from './Tab';
-import { TabContent } from './TabContent';
+import { Tabs } from './Tabs';
+import { TabsTab } from './TabsTab';
+import { TabsPanel } from './TabsPanel';
 import * as TabsStories from './Tabs.stories';
 
 <Meta of={TabsStories} />
@@ -19,16 +19,16 @@ Tabs lar brukerne navigere mellom relaterte deler av innholdet, der én del vise
 ```tsx
 import { Tabs } from '@digdir/designsystemet-react';
 
-<Tabs.Root defaultValue='value1'>
+<Tabs 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.Content value='value1'>content 1</Tabs.Content>
-  <Tabs.Content value='value2'>content 2</Tabs.Content>
-  <Tabs.Content value='value3'>content 3</Tabs.Content>
-</Tabs.Root>;
+  <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>;
 ```
 
 ## Icons only
@@ -41,17 +41,17 @@ import { Tabs } from '@digdir/designsystemet-react';
 
 ### Props
 
-#### `Tabs.Root`
+#### `Tabs`
 
-<ArgTypes of={TabsRoot} />
+<ArgTypes of={Tabs} />
 
 #### `Tabs.Tab`
 
-<ArgTypes of={Tab} />
+<ArgTypes of={TabsTab} />
 
-#### `Tabs.Content`
+#### `Tabs.Panel`
 
-<ArgTypes of={TabContent} />
+<ArgTypes of={TabsPanel} />
 
 ### Størrelse på ikon
 
diff --git a/packages/react/src/components/Tabs/Tabs.stories.tsx b/packages/react/src/components/Tabs/Tabs.stories.tsx
index 8f1d54f857..435b8df1f8 100644
--- a/packages/react/src/components/Tabs/Tabs.stories.tsx
+++ b/packages/react/src/components/Tabs/Tabs.stories.tsx
@@ -14,20 +14,20 @@ import { Tabs } from '.';
 
 export default {
   title: 'Komponenter/Tabs',
-  component: Tabs.Root,
+  component: Tabs,
 } as Meta;
 
-export const Preview: StoryFn<typeof Tabs.Root> = (args) => (
-  <Tabs.Root {...args}>
+export const Preview: StoryFn<typeof Tabs> = (args) => (
+  <Tabs {...args}>
     <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.Content value='value1'>content 1</Tabs.Content>
-    <Tabs.Content value='value2'>content 2</Tabs.Content>
-    <Tabs.Content value='value3'>content 3</Tabs.Content>
-  </Tabs.Root>
+    <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>
 );
 
 Preview.args = {
@@ -36,7 +36,7 @@ Preview.args = {
 };
 
 export const IconsOnly: StoryFn<typeof Tabs> = () => (
-  <Tabs.Root defaultValue='value1'>
+  <Tabs defaultValue='value1'>
     <Tabs.List>
       <Tabs.Tab value='value1'>
         <AirplaneIcon title='Airplane' fontSize='1.75rem' />
@@ -48,10 +48,10 @@ export const IconsOnly: StoryFn<typeof Tabs> = () => (
         <DogIcon title='Dog' fontSize='1.75rem' />
       </Tabs.Tab>
     </Tabs.List>
-    <Tabs.Content value='value1'>content 1</Tabs.Content>
-    <Tabs.Content value='value2'>content 2</Tabs.Content>
-    <Tabs.Content value='value3'>content 3</Tabs.Content>
-  </Tabs.Root>
+    <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>
 );
 
 export const Controlled: StoryFn<typeof Tabs> = () => {
@@ -63,7 +63,7 @@ export const Controlled: StoryFn<typeof Tabs> = () => {
         Choose Tab 3
       </Button>
       <br />
-      <Tabs.Root value={value} onChange={setValue}>
+      <Tabs value={value} onChange={setValue}>
         <Tabs.List>
           <Tabs.Tab value='value1'>
             <BellIcon fontSize='1.75rem' />
@@ -78,10 +78,10 @@ export const Controlled: StoryFn<typeof Tabs> = () => {
             Tab 3
           </Tabs.Tab>
         </Tabs.List>
-        <Tabs.Content value='value1'>content 1</Tabs.Content>
-        <Tabs.Content value='value2'>content 2</Tabs.Content>
-        <Tabs.Content value='value3'>content 3</Tabs.Content>
-      </Tabs.Root>
+        <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>
     </>
   );
 };
diff --git a/packages/react/src/components/Tabs/Tabs.test.tsx b/packages/react/src/components/Tabs/Tabs.test.tsx
index d88de3d439..57145bb752 100644
--- a/packages/react/src/components/Tabs/Tabs.test.tsx
+++ b/packages/react/src/components/Tabs/Tabs.test.tsx
@@ -8,14 +8,14 @@ const user = userEvent.setup();
 describe('Tabs', () => {
   test('can navigate tabs with keyboard', async () => {
     render(
-      <Tabs.Root>
+      <Tabs>
         <Tabs.List>
           <Tabs.Tab value='value1'>Tab 1</Tabs.Tab>
           <Tabs.Tab value='value2'>Tab 2</Tabs.Tab>
         </Tabs.List>
-        <Tabs.Content value='value1'>content 1</Tabs.Content>
-        <Tabs.Content value='value2'>content 2</Tabs.Content>
-      </Tabs.Root>,
+        <Tabs.Panel value='value1'>content 1</Tabs.Panel>
+        <Tabs.Panel value='value2'>content 2</Tabs.Panel>
+      </Tabs>,
     );
 
     const tab1 = screen.getByRole('tab', { name: 'Tab 1' });
@@ -30,14 +30,14 @@ describe('Tabs', () => {
 
   test('renders content based on value', async () => {
     render(
-      <Tabs.Root defaultValue='value1'>
+      <Tabs defaultValue='value1'>
         <Tabs.List>
           <Tabs.Tab value='value1'>Tab 1</Tabs.Tab>
           <Tabs.Tab value='value2'>Tab 2</Tabs.Tab>
         </Tabs.List>
-        <Tabs.Content value='value1'>content 1</Tabs.Content>
-        <Tabs.Content value='value2'>content 2</Tabs.Content>
-      </Tabs.Root>,
+        <Tabs.Panel value='value1'>content 1</Tabs.Panel>
+        <Tabs.Panel value='value2'>content 2</Tabs.Panel>
+      </Tabs>,
     );
 
     expect(screen.queryByText('content 1')).toBeVisible();
@@ -49,12 +49,12 @@ describe('Tabs', () => {
 
   test('item renders with correct aria attributes', async () => {
     render(
-      <Tabs.Root defaultValue='value1'>
+      <Tabs defaultValue='value1'>
         <Tabs.List>
           <Tabs.Tab value='value1'>Tab 1</Tabs.Tab>
           <Tabs.Tab value='value2'>Tab 2</Tabs.Tab>
         </Tabs.List>
-      </Tabs.Root>,
+      </Tabs>,
     );
 
     const tab = screen.getByRole('tab', { name: 'Tab 2' });
@@ -63,13 +63,13 @@ describe('Tabs', () => {
     expect(tab).toHaveAttribute('aria-selected', 'true');
   });
 
-  test('renders ReactNodes as children when TabContents value is selected', () => {
+  test('renders ReactNodes as children when TabsPanels value is selected', () => {
     render(
-      <Tabs.Root defaultValue='value1'>
-        <Tabs.Content value='value1'>
+      <Tabs defaultValue='value1'>
+        <Tabs.Panel value='value1'>
           <div>content 1</div>
-        </Tabs.Content>
-      </Tabs.Root>,
+        </Tabs.Panel>
+      </Tabs>,
     );
 
     const content = screen.queryByText('content 1');
diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/Tabs/Tabs.tsx
new file mode 100644
index 0000000000..129dfbf441
--- /dev/null
+++ b/packages/react/src/components/Tabs/Tabs.tsx
@@ -0,0 +1,78 @@
+import cl from 'clsx/lite';
+import type { HTMLAttributes } from 'react';
+import { createContext, forwardRef, useState } from 'react';
+
+export type TabsProps = {
+  /** Controlled state for `Tabs` component. */
+  value?: string;
+  /** Default value. */
+  defaultValue?: string;
+  /** Callback with selected `TabItem` `value` */
+  onChange?: (value: string) => void;
+  /**
+   * Changes items size and paddings
+   * @default md
+   */
+  size?: 'sm' | 'md' | 'lg';
+} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'>;
+
+export type ContextProps = {
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  size?: TabsProps['size'];
+};
+
+export const Context = createContext<ContextProps>({});
+
+/**
+ * Display a group of tabs that can be toggled between.
+ * @example
+ * ```tsx
+ * <Tabs onChange={(value) => console.log(value)}>
+ *   <Tabs.List>
+ *     <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
+ *     <Tabs.Tab value='2'>Tab 2</Tabs.Tab>
+ *     <Tabs.Tab value='3'>Tab 3</Tabs.Tab>
+ *   </Tabs.List>
+ *   <Tabs.Panel value='1'>content 1</Tabs.Panel>
+ *   <Tabs.Panel value='2'>content 2</Tabs.Panel>
+ *   <Tabs.Panel value='3'>content 3</Tabs.Panel>
+ * </Tabs>
+ * ```
+ */
+export const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(
+  { size = 'md', value, defaultValue, className, onChange, ...rest },
+  ref,
+) {
+  const isControlled = value !== undefined;
+  const [uncontrolledValue, setUncontrolledValue] = useState<
+    string | undefined
+  >(defaultValue);
+
+  let onValueChange = onChange;
+  if (!isControlled) {
+    onValueChange = (newValue: string) => {
+      setUncontrolledValue(newValue);
+      onChange?.(newValue);
+    };
+    value = uncontrolledValue;
+  }
+  return (
+    <Context.Provider
+      value={{
+        value,
+        defaultValue,
+        onChange: onValueChange,
+        size,
+      }}
+    >
+      <div
+        className={cl('ds-tabs', className)}
+        data-size={size}
+        ref={ref}
+        {...rest}
+      />
+    </Context.Provider>
+  );
+});
diff --git a/packages/react/src/components/Tabs/TabsList.tsx b/packages/react/src/components/Tabs/TabsList.tsx
new file mode 100644
index 0000000000..821c97374a
--- /dev/null
+++ b/packages/react/src/components/Tabs/TabsList.tsx
@@ -0,0 +1,38 @@
+import cl from 'clsx/lite';
+import type { HTMLAttributes } from 'react';
+import { forwardRef, useContext } from 'react';
+
+import { RovingFocusRoot } from '../../utilities/RovingFocus';
+
+import { Context } from './Tabs';
+
+export type TabsListProps = HTMLAttributes<HTMLDivElement>;
+
+/**
+ * The container for all `Tab` components.
+ * @example
+ * ```tsx
+ * <Tabs.List>
+ *  <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
+ *  <Tabs.Tab value='2'>Tab 2</Tabs.Tab>
+ * </Tabs.List>
+ * ```
+ */
+export const TabsList = forwardRef<HTMLDivElement, TabsListProps>(
+  function TabsList({ children, className, ...rest }, ref) {
+    const { value } = useContext(Context);
+
+    return (
+      <RovingFocusRoot
+        role='tablist'
+        activeValue={value}
+        className={cl('ds-tabs__tablist', className)}
+        orientation='ambiguous'
+        ref={ref}
+        {...rest}
+      >
+        {children}
+      </RovingFocusRoot>
+    );
+  },
+);
diff --git a/packages/react/src/components/Tabs/TabContent.tsx b/packages/react/src/components/Tabs/TabsPanel.tsx
similarity index 61%
rename from packages/react/src/components/Tabs/TabContent.tsx
rename to packages/react/src/components/Tabs/TabsPanel.tsx
index 4f3fdc3e6d..50230c37bd 100644
--- a/packages/react/src/components/Tabs/TabContent.tsx
+++ b/packages/react/src/components/Tabs/TabsPanel.tsx
@@ -4,10 +4,10 @@ import { forwardRef, useContext } from 'react';
 
 import { Paragraph } from '../Typography';
 
-import { TabsContext } from './TabsRoot';
+import { Context } from './Tabs';
 
-export type TabContentProps = {
-  /** When this value is selected as the current state, render this `TabContent` component*/
+export type TabsPanelProps = {
+  /** When this value is selected as the current state, render this `TabsPanel` component*/
   value: string;
 } & Omit<HTMLAttributes<HTMLDivElement>, 'value'>;
 
@@ -15,12 +15,12 @@ export type TabContentProps = {
  * A single content item in a Tabs component.
  * @example
  * ```tsx
- * <Tabs.Content value='1'>content 1</Tabs.Content>
+ * <Tabs.Panel value='1'>content 1</Tabs.Panel>
  * ```
  */
-export const TabContent = forwardRef<HTMLDivElement, TabContentProps>(
-  ({ children, value, className, ...rest }, ref) => {
-    const { value: tabsValue, size } = useContext(TabsContext);
+export const TabsPanel = forwardRef<HTMLDivElement, TabsPanelProps>(
+  function TabsPanel({ children, value, className, ...rest }, ref) {
+    const { value: tabsValue, size } = useContext(Context);
     const active = value === tabsValue;
 
     return (
@@ -28,7 +28,7 @@ export const TabContent = forwardRef<HTMLDivElement, TabContentProps>(
         {active && (
           <Paragraph asChild variant='short' size={size}>
             <div
-              className={cl('ds-tabs__content', className)}
+              className={cl('ds-tabs__panel', className)}
               ref={ref}
               {...rest}
             >
@@ -40,5 +40,3 @@ export const TabContent = forwardRef<HTMLDivElement, TabContentProps>(
     );
   },
 );
-
-TabContent.displayName = 'TabContent';
diff --git a/packages/react/src/components/Tabs/TabsRoot.tsx b/packages/react/src/components/Tabs/TabsRoot.tsx
deleted file mode 100644
index 83df12f752..0000000000
--- a/packages/react/src/components/Tabs/TabsRoot.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import cl from 'clsx/lite';
-import type { HTMLAttributes } from 'react';
-import { createContext, forwardRef, useState } from 'react';
-
-export type TabsProps = {
-  /** Controlled state for `Tabs` component. */
-  value?: string;
-  /** Default value. */
-  defaultValue?: string;
-  /** Callback with selected `TabItem` `value` */
-  onChange?: (value: string) => void;
-  /**
-   * Changes items size and paddings
-   * @default md
-   */
-  size?: 'sm' | 'md' | 'lg';
-} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'>;
-
-export type TabsContextProps = {
-  value?: string;
-  defaultValue?: string;
-  onChange?: (value: string) => void;
-  size?: TabsProps['size'];
-};
-
-export const TabsContext = createContext<TabsContextProps>({});
-
-/**
- * Display a group of tabs that can be toggled between.
- * @example
- * ```tsx
- * <Tabs.Root onChange={(value) => console.log(value)}>
- *   <Tabs.List>
- *     <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
- *     <Tabs.Tab value='2'>Tab 2</Tabs.Tab>
- *     <Tabs.Tab value='3'>Tab 3</Tabs.Tab>
- *   </Tabs.List>
- *   <Tabs.Content value='1'>content 1</Tabs.Content>
- *   <Tabs.Content value='2'>content 2</Tabs.Content>
- *   <Tabs.Content value='3'>content 3</Tabs.Content>
- * </Tabs.Root>
- * ```
- */
-export const TabsRoot = forwardRef<HTMLDivElement, TabsProps>(
-  ({ size = 'md', value, defaultValue, className, onChange, ...rest }, ref) => {
-    const isControlled = value !== undefined;
-    const [uncontrolledValue, setUncontrolledValue] = useState<
-      string | undefined
-    >(defaultValue);
-
-    let onValueChange = onChange;
-    if (!isControlled) {
-      onValueChange = (newValue: string) => {
-        setUncontrolledValue(newValue);
-        onChange?.(newValue);
-      };
-      value = uncontrolledValue;
-    }
-    return (
-      <TabsContext.Provider
-        value={{
-          value,
-          defaultValue,
-          onChange: onValueChange,
-          size,
-        }}
-      >
-        <div
-          className={cl('ds-tabs', className)}
-          data-size={size}
-          ref={ref}
-          {...rest}
-        />
-      </TabsContext.Provider>
-    );
-  },
-);
-
-TabsRoot.displayName = 'TabsRoot';
diff --git a/packages/react/src/components/Tabs/TabsTab.tsx b/packages/react/src/components/Tabs/TabsTab.tsx
new file mode 100644
index 0000000000..adbe97248d
--- /dev/null
+++ b/packages/react/src/components/Tabs/TabsTab.tsx
@@ -0,0 +1,41 @@
+import cl from 'clsx/lite';
+import type { HTMLAttributes } from 'react';
+import { forwardRef, useContext, useId } from 'react';
+
+import { RovingFocusItem } from '../../utilities/RovingFocus/RovingFocusItem';
+import { Paragraph } from '../Typography';
+import { Context } from './Tabs';
+
+export type TabsTabProps = {
+  /** Value that will be set in the `Tabs` components state when the tab is activated */
+  value: string;
+} & Omit<HTMLAttributes<HTMLButtonElement>, 'value'>;
+
+/**
+ * A single item in a Tabs component.
+ * @example
+ * <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
+ */
+export const TabsTab = forwardRef<HTMLButtonElement, TabsTabProps>(
+  function TabsTab({ className, value, ...rest }, ref) {
+    const tabs = useContext(Context);
+    const buttonId = `tab-${useId()}`;
+
+    return (
+      <RovingFocusItem value={value} {...rest} asChild>
+        <Paragraph asChild variant='short' size={tabs.size}>
+          <button
+            {...rest}
+            aria-selected={tabs.value === value}
+            className={cl('ds-tabs__tab', className)}
+            id={buttonId}
+            onClick={() => tabs.onChange?.(value)}
+            ref={ref}
+            role='tab'
+            type='button'
+          />
+        </Paragraph>
+      </RovingFocusItem>
+    );
+  },
+);
diff --git a/packages/react/src/components/Tabs/index.ts b/packages/react/src/components/Tabs/index.ts
index 0abac13129..2ef1a98ca0 100644
--- a/packages/react/src/components/Tabs/index.ts
+++ b/packages/react/src/components/Tabs/index.ts
@@ -1,45 +1,36 @@
-import { Tab } from './Tab';
-import { TabContent } from './TabContent';
-import { TabList } from './TabList';
-import { TabsRoot } from './TabsRoot';
-
-export type { TabsProps } from './TabsRoot';
-export type { TabProps } from './Tab';
-export type { TabContentProps } from './TabContent';
-
-type TabsComponent = {
-  Root: typeof TabsRoot;
-  Tab: typeof Tab;
-  List: typeof TabList;
-  Content: typeof TabContent;
-};
+import { Tabs as TabsParent } from './Tabs';
+import { TabsList } from './TabsList';
+import { TabsPanel } from './TabsPanel';
+import { TabsTab } from './TabsTab';
 
 /**
  * Display a group of tabs that can be toggled between.
  * @example
  * ```tsx
- * <Tabs.Root onChange={(value) => console.log(value)}>
+ * <Tabs onChange={(value) => console.log(value)}>
  *   <Tabs.List>
  *     <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
  *     <Tabs.Tab value='2'>Tab 2</Tabs.Tab>
  *     <Tabs.Tab value='3'>Tab 3</Tabs.Tab>
  *   </Tabs.List>
- *   <Tabs.Content value='1'>content 1</Tabs.Content>
- *   <Tabs.Content value='2'>content 2</Tabs.Content>
- *   <Tabs.Content value='3'>content 3</Tabs.Content>
- * </Tabs.Root>
+ *   <Tabs.Panel value='1'>content 1</Tabs.Panel>
+ *   <Tabs.Panel value='2'>content 2</Tabs.Panel>
+ *   <Tabs.Panel value='3'>content 3</Tabs.Panel>
+ * </Tabs>
  * ```
  */
-const Tabs: TabsComponent = {} as TabsComponent;
-
-Tabs.Root = TabsRoot;
-Tabs.Tab = Tab;
-Tabs.List = TabList;
-Tabs.Content = TabContent;
+const Tabs = Object.assign(TabsParent, {
+  List: TabsList,
+  Tab: TabsTab,
+  Panel: TabsPanel,
+});
 
-Tabs.Root.displayName = 'Tabs.Root';
 Tabs.Tab.displayName = 'Tabs.Tab';
 Tabs.List.displayName = 'Tabs.List';
-Tabs.Content.displayName = 'Tabs.Content';
+Tabs.Panel.displayName = 'Tabs.Panel';
 
-export { Tabs, TabsRoot, Tab, TabList, TabContent };
+export type { TabsProps } from './Tabs';
+export type { TabsListProps } from './TabsList';
+export type { TabsTabProps } from './TabsTab';
+export type { TabsPanelProps } from './TabsPanel';
+export { Tabs, TabsTab, TabsList, TabsPanel };
diff --git a/packages/react/src/components/Tabs/useTab.ts b/packages/react/src/components/Tabs/useTab.ts
deleted file mode 100644
index c208418f71..0000000000
--- a/packages/react/src/components/Tabs/useTab.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import type { HTMLAttributes } from 'react';
-import { useContext, useId } from 'react';
-
-import type { TabsContextProps } from './TabsRoot';
-import { TabsContext } from './TabsRoot';
-
-import type { TabProps } from '.';
-
-type UseTab = (
-  props: TabProps,
-) => Pick<
-  HTMLAttributes<HTMLButtonElement>,
-  'id' | 'aria-selected' | 'role' | 'onClick'
-> & { size?: TabsContextProps['size'] };
-
-/** Handles props for `Tab` in context with `Tabs` */
-export const useTabItem: UseTab = (props: TabProps) => {
-  const { value, ...rest } = props;
-  const tabs = useContext(TabsContext);
-  const buttonId = `tab-${useId()}`;
-
-  return {
-    ...rest,
-    id: buttonId,
-    'aria-selected': tabs.value === value,
-    role: 'tab',
-    size: tabs.size,
-    onClick: () => {
-      tabs.onChange?.(value);
-    },
-  };
-};
diff --git a/packages/react/stories/showcase.stories.tsx b/packages/react/stories/showcase.stories.tsx
index 38e5d95a7c..10c4c2a1c8 100644
--- a/packages/react/stories/showcase.stories.tsx
+++ b/packages/react/stories/showcase.stories.tsx
@@ -286,13 +286,13 @@ export const Showcase: StoryFn = () => {
         </div>
       </div>
       <div className={cl(classes.card, classes.tabs)}>
-        <Tabs.Root defaultValue='value1' size='sm'>
+        <Tabs defaultValue='value1' size='sm'>
           <Tabs.List>
             <Tabs.Tab value='value1'>Min profil</Tabs.Tab>
             <Tabs.Tab value='value2'>Tjenester</Tabs.Tab>
             <Tabs.Tab value='value3'>Innstillinger</Tabs.Tab>
           </Tabs.List>
-        </Tabs.Root>
+        </Tabs>
         <Paragraph size='sm'>
           For å kunne bli registrert i{' '}
           <Link href='#' color='neutral'>