@dbcdk/react-components 0.0.208 → 0.0.210

package/dist/components/overlay/tooltip/TooltipProvider.cjs

@@ -64,10 +64,18 @@ function shallowEqualActive(a, b) {
 function TooltipProvider({ children }) {
   const [active, setActive] = react.useState(null);
   const showTimerRef = react.useRef(null);
+  const pendingIdRef = react.useRef(null);
+  react.useEffect(() => {
+    return () => {
+      if (showTimerRef.current) clearTimeout(showTimerRef.current);
+    };
+  }, []);
   const show = react.useCallback((next) => {
     if (showTimerRef.current) clearTimeout(showTimerRef.current);
+    pendingIdRef.current = next.id;
     showTimerRef.current = setTimeout(() => {
       showTimerRef.current = null;
+      pendingIdRef.current = null;
       setActive((curr) => {
         const proposed = { ...next, open: true };
         return shallowEqualActive(curr, proposed) ? curr : proposed;
@@ -75,9 +83,10 @@ function TooltipProvider({ children }) {
     }, SHOW_DELAY_MS);
   }, []);
   const hide = react.useCallback((id) => {
-    if (showTimerRef.current) {
+    if (showTimerRef.current && pendingIdRef.current === id) {
       clearTimeout(showTimerRef.current);
       showTimerRef.current = null;
+      pendingIdRef.current = null;
     }
     setActive((curr) => {
       if (!curr || curr.id !== id) return curr;

package/dist/components/overlay/tooltip/TooltipProvider.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { createContext, useState, useRef, useCallback, useMemo, useContext, useEffect, useLayoutEffect } from 'react';
+import { createContext, useState, useRef, useEffect, useCallback, useMemo, useContext, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import styles from './Tooltip.module.css';
 
@@ -58,10 +58,18 @@ function shallowEqualActive(a, b) {
 function TooltipProvider({ children }) {
   const [active, setActive] = useState(null);
   const showTimerRef = useRef(null);
+  const pendingIdRef = useRef(null);
+  useEffect(() => {
+    return () => {
+      if (showTimerRef.current) clearTimeout(showTimerRef.current);
+    };
+  }, []);
   const show = useCallback((next) => {
     if (showTimerRef.current) clearTimeout(showTimerRef.current);
+    pendingIdRef.current = next.id;
     showTimerRef.current = setTimeout(() => {
       showTimerRef.current = null;
+      pendingIdRef.current = null;
       setActive((curr) => {
         const proposed = { ...next, open: true };
         return shallowEqualActive(curr, proposed) ? curr : proposed;
@@ -69,9 +77,10 @@ function TooltipProvider({ children }) {
     }, SHOW_DELAY_MS);
   }, []);
   const hide = useCallback((id) => {
-    if (showTimerRef.current) {
+    if (showTimerRef.current && pendingIdRef.current === id) {
       clearTimeout(showTimerRef.current);
       showTimerRef.current = null;
+      pendingIdRef.current = null;
     }
     setActive((curr) => {
       if (!curr || curr.id !== id) return curr;

package/dist/components/overlay/tooltip/useTooltipTrigger.cjs

@@ -26,12 +26,19 @@ function useTooltipTrigger(options) {
   const openTimer = react.useRef(null);
   const closeTimer = react.useRef(null);
   const openedByFocusRef = react.useRef(false);
-  const clearTimers = () => {
+  const clearTimers = react.useCallback(() => {
     if (openTimer.current) window.clearTimeout(openTimer.current);
     if (closeTimer.current) window.clearTimeout(closeTimer.current);
     openTimer.current = null;
     closeTimer.current = null;
-  };
+  }, []);
+  const hideTooltip = ctx.hide;
+  react.useEffect(() => {
+    return () => {
+      clearTimers();
+      hideTooltip(id);
+    };
+  }, [clearTimers, hideTooltip, id]);
   const lastSentRef = react.useRef(null);
   const show = react.useCallback(() => {
     if (!content) return;

package/dist/components/overlay/tooltip/useTooltipTrigger.js

@@ -24,12 +24,19 @@ function useTooltipTrigger(options) {
   const openTimer = useRef(null);
   const closeTimer = useRef(null);
   const openedByFocusRef = useRef(false);
-  const clearTimers = () => {
+  const clearTimers = useCallback(() => {
     if (openTimer.current) window.clearTimeout(openTimer.current);
     if (closeTimer.current) window.clearTimeout(closeTimer.current);
     openTimer.current = null;
     closeTimer.current = null;
-  };
+  }, []);
+  const hideTooltip = ctx.hide;
+  useEffect(() => {
+    return () => {
+      clearTimers();
+      hideTooltip(id);
+    };
+  }, [clearTimers, hideTooltip, id]);
   const lastSentRef = useRef(null);
   const show = useCallback(() => {
     if (!content) return;

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.cjs

@@ -186,7 +186,7 @@ function SidebarContainer({
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.content, children: [
           !hideSearch && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.filter, children: /* @__PURE__ */ jsxRuntime.jsx(SidenavFiltering__default.default, { placeholder: searchPlaceholder, showSettings }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.links} hideScrollBar`, children: /* @__PURE__ */ jsxRuntime.jsx(SidebarItems.SidebarItems, { activeLink }) })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.links, children: /* @__PURE__ */ jsxRuntime.jsx(SidebarItems.SidebarItems, { activeLink }) })
         ] }),
         footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.footerSlot, children: footer }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.footer, children: [

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.js

@@ -179,7 +179,7 @@ function SidebarContainer({
         ] }) }),
         /* @__PURE__ */ jsxs("div", { className: styles.content, children: [
           !hideSearch && /* @__PURE__ */ jsx("div", { className: styles.filter, children: /* @__PURE__ */ jsx(SidenavFiltering, { placeholder: searchPlaceholder, showSettings }) }),
-          /* @__PURE__ */ jsx("div", { className: `${styles.links} hideScrollBar`, children: /* @__PURE__ */ jsx(SidebarItems, { activeLink }) })
+          /* @__PURE__ */ jsx("div", { className: styles.links, children: /* @__PURE__ */ jsx(SidebarItems, { activeLink }) })
         ] }),
         footer && /* @__PURE__ */ jsx("div", { className: styles.footerSlot, children: footer }),
         /* @__PURE__ */ jsxs("div", { className: styles.footer, children: [

package/dist/components/split-pane/SplitPane.cjs

@@ -22,7 +22,8 @@ function SplitPane({
   showDivider = "hover",
   gutterSize = 16,
   storageKey,
-  fillViewport = false
+  fillViewport = false,
+  secondaryVisible = true
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     SplitPaneContext.SplitPaneProvider,
@@ -31,6 +32,7 @@ function SplitPane({
       initialPrimarySize,
       minPrimarySize,
       minSecondarySize,
+      gutterSize,
       storageKey,
       children: /* @__PURE__ */ jsxRuntime.jsx(
         SplitPaneContainer,
@@ -38,6 +40,7 @@ function SplitPane({
           showDivider,
           gutterSize,
           fillViewport,
+          secondaryVisible,
           children
         }
       )
@@ -48,7 +51,8 @@ function SplitPaneContainer({
   children,
   showDivider,
   gutterSize,
-  fillViewport
+  fillViewport,
+  secondaryVisible
 }) {
   const { direction, primarySize, containerRef } = SplitPaneContext.useSplitPaneContext();
   const style = react.useMemo(
@@ -66,6 +70,7 @@ function SplitPaneContainer({
       "data-direction": direction,
       "data-divider": showDivider,
       "data-fill-viewport": fillViewport,
+      "data-secondary-visible": secondaryVisible,
       style,
       children
     }
@@ -77,13 +82,14 @@ function SplitPanePrimary({ children }) {
 function SplitPaneSecondary({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.secondary, children });
 }
-function SplitPaneGutter() {
+function SplitPaneGutter({ label = "Resize panes" }) {
   const {
     direction,
     primarySize,
     setPrimarySize,
     minPrimarySize,
     minSecondarySize,
+    gutterSize,
     containerRef,
     resetDefault
   } = SplitPaneContext.useSplitPaneContext();
@@ -101,9 +107,10 @@ function SplitPaneGutter() {
     if (!el) return { maxPrimary: Infinity, total: 0 };
     const rect = el.getBoundingClientRect();
     const total = direction === "horizontal" ? rect.width : rect.height;
-    const maxPrimary2 = Math.max(minPrimarySize, total - minSecondarySize);
+    if (!Number.isFinite(total) || total <= 0) return { maxPrimary: Infinity, total };
+    const maxPrimary2 = Math.max(minPrimarySize, total - minSecondarySize - gutterSize);
     return { maxPrimary: maxPrimary2, total };
-  }, [containerRef, direction, minPrimarySize, minSecondarySize]);
+  }, [containerRef, direction, gutterSize, minPrimarySize, minSecondarySize]);
   const onPointerDown = react.useCallback(
     (e) => {
       const el = containerRef.current;
@@ -163,13 +170,21 @@ function SplitPaneGutter() {
   const ariaOrientation = direction === "horizontal" ? "vertical" : "horizontal";
   const [maxPrimary, setMaxPrimary] = react.useState(Infinity);
   react.useEffect(() => {
-    setMaxPrimary(computeClamp().maxPrimary);
-  }, [computeClamp]);
+    const container = containerRef.current;
+    if (!container) return;
+    const updateMax = () => setMaxPrimary(computeClamp().maxPrimary);
+    updateMax();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(updateMax);
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [computeClamp, containerRef]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.gutter, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: styles__default.default.resizer,
       role: "separator",
+      "aria-label": label,
       "aria-orientation": ariaOrientation,
       "aria-valuemin": Math.round(minPrimarySize),
       "aria-valuemax": Number.isFinite(maxPrimary) ? Math.round(maxPrimary) : void 0,

package/dist/components/split-pane/SplitPane.d.ts

@@ -10,12 +10,15 @@ export interface SplitPaneProps {
     gutterSize?: number;
     storageKey?: string;
     fillViewport?: boolean;
+    secondaryVisible?: boolean;
 }
-export declare function SplitPane({ children, initialPrimarySize, minPrimarySize, minSecondarySize, direction, showDivider, gutterSize, storageKey, fillViewport, }: SplitPaneProps): JSX.Element;
+export declare function SplitPane({ children, initialPrimarySize, minPrimarySize, minSecondarySize, direction, showDivider, gutterSize, storageKey, fillViewport, secondaryVisible, }: SplitPaneProps): JSX.Element;
 export declare function SplitPanePrimary({ children }: {
     children: ReactNode;
 }): JSX.Element;
 export declare function SplitPaneSecondary({ children }: {
     children: ReactNode;
 }): JSX.Element;
-export declare function SplitPaneGutter(): JSX.Element;
+export declare function SplitPaneGutter({ label }: {
+    label?: string;
+}): JSX.Element;

package/dist/components/split-pane/SplitPane.js

@@ -16,7 +16,8 @@ function SplitPane({
   showDivider = "hover",
   gutterSize = 16,
   storageKey,
-  fillViewport = false
+  fillViewport = false,
+  secondaryVisible = true
 }) {
   return /* @__PURE__ */ jsx(
     SplitPaneProvider,
@@ -25,6 +26,7 @@ function SplitPane({
       initialPrimarySize,
       minPrimarySize,
       minSecondarySize,
+      gutterSize,
       storageKey,
       children: /* @__PURE__ */ jsx(
         SplitPaneContainer,
@@ -32,6 +34,7 @@ function SplitPane({
           showDivider,
           gutterSize,
           fillViewport,
+          secondaryVisible,
           children
         }
       )
@@ -42,7 +45,8 @@ function SplitPaneContainer({
   children,
   showDivider,
   gutterSize,
-  fillViewport
+  fillViewport,
+  secondaryVisible
 }) {
   const { direction, primarySize, containerRef } = useSplitPaneContext();
   const style = useMemo(
@@ -60,6 +64,7 @@ function SplitPaneContainer({
       "data-direction": direction,
       "data-divider": showDivider,
       "data-fill-viewport": fillViewport,
+      "data-secondary-visible": secondaryVisible,
       style,
       children
     }
@@ -71,13 +76,14 @@ function SplitPanePrimary({ children }) {
 function SplitPaneSecondary({ children }) {
   return /* @__PURE__ */ jsx("div", { className: styles.secondary, children });
 }
-function SplitPaneGutter() {
+function SplitPaneGutter({ label = "Resize panes" }) {
   const {
     direction,
     primarySize,
     setPrimarySize,
     minPrimarySize,
     minSecondarySize,
+    gutterSize,
     containerRef,
     resetDefault
   } = useSplitPaneContext();
@@ -95,9 +101,10 @@ function SplitPaneGutter() {
     if (!el) return { maxPrimary: Infinity, total: 0 };
     const rect = el.getBoundingClientRect();
     const total = direction === "horizontal" ? rect.width : rect.height;
-    const maxPrimary2 = Math.max(minPrimarySize, total - minSecondarySize);
+    if (!Number.isFinite(total) || total <= 0) return { maxPrimary: Infinity, total };
+    const maxPrimary2 = Math.max(minPrimarySize, total - minSecondarySize - gutterSize);
     return { maxPrimary: maxPrimary2, total };
-  }, [containerRef, direction, minPrimarySize, minSecondarySize]);
+  }, [containerRef, direction, gutterSize, minPrimarySize, minSecondarySize]);
   const onPointerDown = useCallback(
     (e) => {
       const el = containerRef.current;
@@ -157,13 +164,21 @@ function SplitPaneGutter() {
   const ariaOrientation = direction === "horizontal" ? "vertical" : "horizontal";
   const [maxPrimary, setMaxPrimary] = useState(Infinity);
   useEffect(() => {
-    setMaxPrimary(computeClamp().maxPrimary);
-  }, [computeClamp]);
+    const container = containerRef.current;
+    if (!container) return;
+    const updateMax = () => setMaxPrimary(computeClamp().maxPrimary);
+    updateMax();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(updateMax);
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [computeClamp, containerRef]);
   return /* @__PURE__ */ jsx("div", { className: styles.gutter, children: /* @__PURE__ */ jsx(
     "div",
     {
       className: styles.resizer,
       role: "separator",
+      "aria-label": label,
       "aria-orientation": ariaOrientation,
       "aria-valuemin": Math.round(minPrimarySize),
       "aria-valuemax": Number.isFinite(maxPrimary) ? Math.round(maxPrimary) : void 0,

package/dist/components/split-pane/SplitPane.module.css

@@ -13,6 +13,15 @@
   max-height: 100%;
 }
 
+.container[data-secondary-visible='false'] > .primary {
+  flex: 1 1 auto;
+}
+
+.container[data-secondary-visible='false'] > .gutter,
+.container[data-secondary-visible='false'] > .secondary {
+  display: none;
+}
+
 .container[data-direction='horizontal'] {
   flex-direction: row;
 }

package/dist/components/split-pane/provider/SplitPaneContext.cjs

@@ -44,6 +44,7 @@ function SplitPaneProvider({
   initialPrimarySize,
   minPrimarySize,
   minSecondarySize,
+  gutterSize,
   storageKey
 }) {
   const containerRef = React.useRef(null);
@@ -55,8 +56,8 @@ function SplitPaneProvider({
     const rect = el.getBoundingClientRect();
     const total = direction === "horizontal" ? rect.width : rect.height;
     if (!Number.isFinite(total) || total <= 0) return null;
-    return Math.max(minPrimarySize, total - minSecondarySize);
-  }, [direction, minPrimarySize, minSecondarySize]);
+    return Math.max(minPrimarySize, total - minSecondarySize - gutterSize);
+  }, [direction, gutterSize, minPrimarySize, minSecondarySize]);
   React.useEffect(() => {
     if (!storageKey) return;
     const stored = readStoredSize(storageKey);
@@ -108,6 +109,7 @@ function SplitPaneProvider({
       resetDefault,
       minPrimarySize,
       minSecondarySize,
+      gutterSize,
       containerRef,
       storageKey
     }),
@@ -118,6 +120,7 @@ function SplitPaneProvider({
       resetDefault,
       minPrimarySize,
       minSecondarySize,
+      gutterSize,
       storageKey
     ]
   );

package/dist/components/split-pane/provider/SplitPaneContext.d.ts

@@ -6,6 +6,7 @@ export interface SplitPaneContextValue {
     setPrimarySize: (newSize: number) => void;
     minPrimarySize: number;
     minSecondarySize: number;
+    gutterSize: number;
     containerRef: React.RefObject<HTMLDivElement | null>;
     storageKey?: string;
     resetDefault: () => void;
@@ -18,7 +19,8 @@ type SplitPaneProviderProps = {
     initialPrimarySize: number;
     minPrimarySize: number;
     minSecondarySize: number;
+    gutterSize: number;
     storageKey?: string;
 };
-export declare function SplitPaneProvider({ children, direction, initialPrimarySize, minPrimarySize, minSecondarySize, storageKey, }: SplitPaneProviderProps): React.ReactNode;
+export declare function SplitPaneProvider({ children, direction, initialPrimarySize, minPrimarySize, minSecondarySize, gutterSize, storageKey, }: SplitPaneProviderProps): React.ReactNode;
 export {};

package/dist/components/split-pane/provider/SplitPaneContext.js

@@ -38,6 +38,7 @@ function SplitPaneProvider({
   initialPrimarySize,
   minPrimarySize,
   minSecondarySize,
+  gutterSize,
   storageKey
 }) {
   const containerRef = useRef(null);
@@ -49,8 +50,8 @@ function SplitPaneProvider({
     const rect = el.getBoundingClientRect();
     const total = direction === "horizontal" ? rect.width : rect.height;
     if (!Number.isFinite(total) || total <= 0) return null;
-    return Math.max(minPrimarySize, total - minSecondarySize);
-  }, [direction, minPrimarySize, minSecondarySize]);
+    return Math.max(minPrimarySize, total - minSecondarySize - gutterSize);
+  }, [direction, gutterSize, minPrimarySize, minSecondarySize]);
   useEffect(() => {
     if (!storageKey) return;
     const stored = readStoredSize(storageKey);
@@ -102,6 +103,7 @@ function SplitPaneProvider({
       resetDefault,
       minPrimarySize,
       minSecondarySize,
+      gutterSize,
       containerRef,
       storageKey
     }),
@@ -112,6 +114,7 @@ function SplitPaneProvider({
       resetDefault,
       minPrimarySize,
       minSecondarySize,
+      gutterSize,
       storageKey
     ]
   );

package/dist/components/tabs/Tabs.cjs

@@ -49,6 +49,8 @@ function Tabs({
   subheader,
   variant,
   panelStyle = false,
+  flushContent = false,
+  stackTabListAdditionOnMobile = false,
   tabs,
   value,
   defaultValue,
@@ -148,79 +150,91 @@ function Tabs({
         children: /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { disableMargin: true, size: 2, subheader, addition, children: header })
       }
     ) : null,
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.tabs} ${styles__default.default[variant]} ${panelStyle ? styles__default.default.panelStyle : ""}`, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.tabList, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.tabStrip, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: [
+          styles__default.default.tabs,
+          styles__default.default[variant],
+          panelStyle && styles__default.default.panelStyle,
+          flushContent && styles__default.default.flushContent,
+          stackTabListAdditionOnMobile && styles__default.default.stackTabListAdditionOnMobile
+        ].filter(Boolean).join(" "),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.tabList, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.tabStrip, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: onAddTab ? styles__default.default.tabButtons : `${styles__default.default.tabButtons} ${styles__default.default.tabButtonsEnd}`,
+                  role: "tablist",
+                  "aria-label": header != null ? header : "Tabs",
+                  children: visibleTabs.map((tab, index) => {
+                    const selected = index === activeIndex;
+                    const tabDomId = `${uid}-tab-${String(tab.id)}`;
+                    const panelDomId = `${uid}-panel-${String(tab.id)}`;
+                    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.tab} ${selected ? styles__default.default.active : ""}`, children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        "button",
+                        {
+                          id: tabDomId,
+                          type: "button",
+                          className: styles__default.default.tabButton,
+                          role: "tab",
+                          "aria-selected": selected,
+                          "aria-controls": panelDomId,
+                          tabIndex: selected ? 0 : -1,
+                          disabled: tab.disabled,
+                          onClick: () => setValue(tab.id),
+                          onKeyDown: (e) => onKeyDownTab(e, index),
+                          children: [
+                            tab.headerIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: tab.headerIcon }) : null,
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: tab.header }),
+                            tab.badge ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.badge, children: /* @__PURE__ */ jsxRuntime.jsx(Chip.Chip, { size: "sm", children: tab.badge.toLocaleString("da-DK") }) }) : null
+                          ]
+                        }
+                      ),
+                      tab.removable && onRemoveTab ? /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          className: styles__default.default.removeTabButton,
+                          "aria-label": `Fjern fane ${tab.header}`,
+                          disabled: tab.disabled,
+                          onClick: () => onRemoveTab(tab.id, tab, index),
+                          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { "aria-hidden": "true" })
+                        }
+                      ) : null
+                    ] }, tab.id);
+                  })
+                }
+              ),
+              onAddTab ? /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: styles__default.default.addTabButton,
+                  onClick: onAddTab,
+                  "aria-label": "Tilf\xF8j fane",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { "aria-hidden": "true" })
+                }
+              ) : null
+            ] }),
+            tabListAddition ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.tabListAddition, children: tabListAddition }) : null
+          ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: onAddTab ? styles__default.default.tabButtons : `${styles__default.default.tabButtons} ${styles__default.default.tabButtonsEnd}`,
-              role: "tablist",
-              "aria-label": header != null ? header : "Tabs",
-              children: visibleTabs.map((tab, index) => {
-                const selected = index === activeIndex;
-                const tabDomId = `${uid}-tab-${String(tab.id)}`;
-                const panelDomId = `${uid}-panel-${String(tab.id)}`;
-                return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.tab} ${selected ? styles__default.default.active : ""}`, children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs(
-                    "button",
-                    {
-                      id: tabDomId,
-                      type: "button",
-                      className: styles__default.default.tabButton,
-                      role: "tab",
-                      "aria-selected": selected,
-                      "aria-controls": panelDomId,
-                      tabIndex: selected ? 0 : -1,
-                      disabled: tab.disabled,
-                      onClick: () => setValue(tab.id),
-                      onKeyDown: (e) => onKeyDownTab(e, index),
-                      children: [
-                        tab.headerIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: tab.headerIcon }) : null,
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: tab.header }),
-                        tab.badge ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.badge, children: /* @__PURE__ */ jsxRuntime.jsx(Chip.Chip, { size: "sm", children: tab.badge.toLocaleString("da-DK") }) }) : null
-                      ]
-                    }
-                  ),
-                  tab.removable && onRemoveTab ? /* @__PURE__ */ jsxRuntime.jsx(
-                    "button",
-                    {
-                      type: "button",
-                      className: styles__default.default.removeTabButton,
-                      "aria-label": `Fjern fane ${tab.header}`,
-                      disabled: tab.disabled,
-                      onClick: () => onRemoveTab(tab.id, tab, index),
-                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { "aria-hidden": "true" })
-                    }
-                  ) : null
-                ] }, tab.id);
-              })
+              id: activeTab ? `${uid}-panel-${String(activeTab.id)}` : void 0,
+              role: "tabpanel",
+              "aria-labelledby": activeTab ? `${uid}-tab-${String(activeTab.id)}` : void 0,
+              className: styles__default.default.tabContent,
+              children: loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.loadingContent, children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoader.SkeletonLoader, { type: "squares", rows: 1, columns: 1 }) }) : activeTab == null ? void 0 : activeTab.content
             }
-          ),
-          onAddTab ? /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              className: styles__default.default.addTabButton,
-              onClick: onAddTab,
-              "aria-label": "Tilf\xF8j fane",
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { "aria-hidden": "true" })
-            }
-          ) : null
-        ] }),
-        tabListAddition ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.tabListAddition, children: tabListAddition }) : null
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          id: activeTab ? `${uid}-panel-${String(activeTab.id)}` : void 0,
-          role: "tabpanel",
-          "aria-labelledby": activeTab ? `${uid}-tab-${String(activeTab.id)}` : void 0,
-          className: styles__default.default.tabContent,
-          children: loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.loadingContent, children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoader.SkeletonLoader, { type: "squares", rows: 1, columns: 1 }) }) : activeTab == null ? void 0 : activeTab.content
-        }
-      )
-    ] })
+          )
+        ]
+      }
+    )
   ] });
 }
 Tabs.Item = TabsItem;

package/dist/components/tabs/Tabs.d.ts

@@ -16,6 +16,10 @@ export interface TabsProps {
     subheader?: ReactNode;
     variant: TabsVariant;
     panelStyle?: boolean;
+    /** Removes the built-in gap between the tab list and its content panel. */
+    flushContent?: boolean;
+    /** Moves tab-list additions below the tab buttons on narrow screens. */
+    stackTabListAdditionOnMobile?: boolean;
     /** Data-driven API */
     tabs?: TabItem[];
     /** Controlled */
@@ -53,7 +57,7 @@ type SlotName = 'Item';
 type TabsItemComponent = ((props: TabsItemProps) => JSX.Element) & {
     __TABS_SLOT__?: SlotName;
 };
-export declare function Tabs({ header, subheader, variant, panelStyle, tabs, value, defaultValue, storageKey, onValueChange, onRemoveTab, onAddTab, addition, tabListAddition, loading, children, }: TabsProps): JSX.Element;
+export declare function Tabs({ header, subheader, variant, panelStyle, flushContent, stackTabListAdditionOnMobile, tabs, value, defaultValue, storageKey, onValueChange, onRemoveTab, onAddTab, addition, tabListAddition, loading, children, }: TabsProps): JSX.Element;
 export declare namespace Tabs {
     var Item: TabsItemComponent;
 }