Erstattet Radix tabs med intern implementasjon

.changeset/pink-cobras-train.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": minor
+---
+
+Tabs: Ny prop `lazy` som rendrer innhold i TabPanel selv når panel er skjult (har fortsatt display:none)

.changeset/rotten-planets-look.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": minor
+---
+
+Tabs: La til ny prop `fill` som lar Tabs.Tab-elementer strekke seg over tilgjengelig bredde.

.changeset/silver-peas-hang.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": minor
+---
+
+Tabs: Erstattet bruk av dependency `@radix-ui/react-tabs` med egen implementasjon.

@navikt/core/css/tabs.css

@@ -7,7 +7,7 @@
 .navds-tabs__tablist {
   display: flex;
   max-width: 100%;
-  width: auto;
+  width: 100%;
   scroll-behavior: smooth;
   -ms-overflow-style: none; /* for Internet Explorer, Edge */
   scrollbar-width: none; /* for Firefox */
@@ -83,6 +83,10 @@
   gap: var(--a-spacing-1);
 }
 
+.navds-tabs__tab-inner > * {
+  display: inline-flex;
+}
+
 .navds-tabs__tab-inner svg {
   flex-shrink: 0;
 }
@@ -117,6 +121,10 @@
   font-size: 1.5rem;
 }
 
+.navds-tabs__tab--fill {
+  flex: 1 1 100%;
+}
+
 .navds-tabs__tabpanel:focus-visible {
   outline: 2px solid transparent;
   box-shadow: inset 0 0 0 2px var(--a-border-focus);

@navikt/core/react/package.json

@@ -564,7 +564,6 @@
     "@floating-ui/react": "0.25.4",
     "@navikt/aksel-icons": "^6.4.1",
     "@navikt/ds-tokens": "^6.4.1",
-    "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^2.1.0",
     "date-fns": "^3.0.0",

@navikt/core/react/src/tabs/Tabs.context.ts

@@ -0,0 +1,24 @@
+import { createContext } from "../util/create-context";
+import { createDescendantContext } from "../util/hooks/descendants/useDescendant";
+import { TabsProps } from "./Tabs.types";
+import { useTabs } from "./useTabs";
+
+export const [
+  TabsDescendantsProvider,
+  useTabsDescendantsContext,
+  useTabsDescendants,
+  useTabsDescendant,
+] = createDescendantContext<HTMLButtonElement, { value: string }>();
+
+type TabsProviderProps = ReturnType<typeof useTabs> &
+  Pick<
+    TabsProps,
+    "selectionFollowsFocus" | "loop" | "size" | "iconPosition" | "fill"
+  >;
+
+/* State context */
+export const [TabsProvider, useTabsContext] = createContext<TabsProviderProps>({
+  name: "TabsContext",
+  hookName: "useTabsContext",
+  providerName: "TabsProvider",
+});