@dbcdk/react-components 0.0.191 → 0.0.192

package/dist/client.cjs

@@ -22,6 +22,7 @@ var useColorScheme = require('./hooks/useColorScheme');
 var useGetActiveTheme = require('./hooks/useGetActiveTheme');
 var useTheme = require('./hooks/useTheme');
 var usePersistentState = require('./hooks/usePersistentState');
+var useTreeViewSettings = require('./hooks/useTreeViewSettings');
 var Chip = require('./components/chip/Chip');
 var Panel = require('./components/panel/Panel');
 var Card = require('./components/card/Card');
@@ -231,6 +232,12 @@ Object.keys(usePersistentState).forEach(function (k) {
 		get: function () { return usePersistentState[k]; }
 	});
 });
+Object.keys(useTreeViewSettings).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return useTreeViewSettings[k]; }
+	});
+});
 Object.keys(Chip).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,

package/dist/client.d.ts

@@ -19,6 +19,7 @@ export * from './hooks/useColorScheme';
 export * from './hooks/useGetActiveTheme';
 export * from './hooks/useTheme';
 export * from './hooks/usePersistentState';
+export * from './hooks/useTreeViewSettings';
 export * from './components/chip/Chip';
 export * from './components/panel/Panel';
 export * from './components/card/Card';

package/dist/client.js

@@ -20,6 +20,7 @@ export * from './hooks/useColorScheme';
 export * from './hooks/useGetActiveTheme';
 export * from './hooks/useTheme';
 export * from './hooks/usePersistentState';
+export * from './hooks/useTreeViewSettings';
 export * from './components/chip/Chip';
 export * from './components/panel/Panel';
 export * from './components/card/Card';

package/dist/components/forms/input/Input.module.css

@@ -41,7 +41,12 @@
   flex: 1 1 auto;
   min-inline-size: 0;
   inline-size: 100%;
+  /* Size classes also apply to the field; keep the input inside its border. */
+  max-block-size: 100%;
   box-sizing: border-box;
+  /* Matches `.field`'s radius so the autofill box-shadow below (which paints
+     within this element's own box) doesn't show sharp corners under it. */
+  border-radius: inherit;
   text-overflow: ellipsis;
   color: var(--color-fg-default);
   background: transparent;
@@ -59,6 +64,94 @@
   color: var(--color-fg-subtle) !important;
 }
 
+/* Match the design system's selection color instead of the browser default. */
+.input::selection {
+  background-color: var(--color-bg-selected);
+  color: var(--color-fg-default);
+}
+
+.input::-moz-selection {
+  background-color: var(--color-bg-selected);
+  color: var(--color-fg-default);
+}
+
+/* Neutralize the browser's native autofill tint (Chrome's light-blue fill,
+   applied via this pseudo-class) so a filled field keeps the field's normal
+   background instead of the browser's own color - this also fires for
+   Chrome's "previous values typed in this field" history dropdown, which
+   uses the same autofill styling even though it's not real autofill data.
+   The huge transition delay is the standard trick to stop Chrome animating
+   its own background/text color in on top of this.
+
+   The field overlay below keeps the focus ring above this opaque fill. */
+.input:-webkit-autofill,
+.input:-webkit-autofill:hover {
+  -webkit-text-fill-color: var(--color-fg-default);
+  -webkit-box-shadow: 0 0 0 1000px var(--color-bg-surface) inset;
+  box-shadow: 0 0 0 1000px var(--color-bg-surface) inset;
+  transition:
+    background-color 600000s 0s,
+    color 600000s 0s;
+}
+
+.subtle .input:-webkit-autofill,
+.subtle .input:-webkit-autofill:hover {
+  -webkit-box-shadow: 0 0 0 1000px var(--color-bg-toolbar) inset;
+  box-shadow: 0 0 0 1000px var(--color-bg-toolbar) inset;
+}
+
+.embedded .input:-webkit-autofill,
+.embedded .input:-webkit-autofill:hover,
+.embedded .input:-webkit-autofill:focus {
+  -webkit-box-shadow: 0 0 0 1000px transparent inset;
+  box-shadow: 0 0 0 1000px transparent inset;
+}
+
+.header .input:-webkit-autofill,
+.header .input:-webkit-autofill:hover {
+  -webkit-box-shadow: 0 0 0 1000px transparent inset;
+  box-shadow: 0 0 0 1000px transparent inset;
+}
+
+.header .input:-webkit-autofill {
+  -webkit-text-fill-color: var(--color-navbar-fg);
+}
+
+/* Paint over the autofill fill using the whole field's geometry, including
+   adornments. A ring on the input itself creates an extra inner rectangle.
+   Keep this overlay non-interactive so clear buttons remain clickable. */
+.field:has(.input:-webkit-autofill)::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  box-shadow: inset 0 0 0 var(--border-width-thin)
+    var(--input-autofill-ring, var(--color-field-focus));
+  opacity: 0;
+  transition: opacity var(--transition-fast) var(--ease-standard);
+}
+
+.field:has(.input:-webkit-autofill):focus-within:not([aria-disabled='true'])::after {
+  opacity: 1;
+}
+
+.header {
+  --input-autofill-ring: var(--color-navbar-fg);
+}
+
+.modified {
+  --input-autofill-ring: color-mix(
+    in srgb,
+    var(--color-status-warning-border) 55%,
+    var(--color-border-default)
+  );
+}
+
+.embedded:has(.input:-webkit-autofill)::after {
+  content: none;
+}
+
 .input:disabled {
   background-color: transparent;
   color: var(--color-disabled-fg);

package/dist/components/json-viewer/JsonViewer.cjs

@@ -12,6 +12,7 @@ var styles = require('./JsonViewer.module.css');
 var useClipboardStatus = require('./useClipboardStatus');
 var utils = require('./utils');
 var Button = require('../button/Button');
+var Icon = require('../icon/Icon');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -151,7 +152,7 @@ function JsonViewer({
                         "aria-haspopup": "menu",
                         "aria-expanded": isOpen ? true : false,
                         onClick: toggle,
-                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, { "aria-hidden": "true" })
+                        children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { customIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings2, { "aria-hidden": "true" }) })
                       }
                     ),
                     children: (close) => /* @__PURE__ */ jsxRuntime.jsxs(Menu.Menu, { children: [

package/dist/components/json-viewer/JsonViewer.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Search, X, ArrowDown, ArrowUp, ListTree, Braces, Sun, Moon, ClipboardCopy, MoreVertical } from 'lucide-react';
+import { Search, X, ArrowDown, ArrowUp, ListTree, Braces, Sun, Moon, ClipboardCopy, Settings2 } from 'lucide-react';
 import { useState, useId, useEffect, useMemo } from 'react';
 import { Menu } from '../../components/menu/Menu';
 import { Popover } from '../../components/popover/Popover';
@@ -10,6 +10,7 @@ import styles from './JsonViewer.module.css';
 import { useClipboardStatus } from './useClipboardStatus';
 import { normalizeSearch, isJsonValue, collectSearchMatches, collectExpandableNodeIds, collectInitiallyExpandedNodeIds } from './utils';
 import { Button } from '../button/Button';
+import { Icon } from '../icon/Icon';
 
 const COPY_ALL_ID = "__json-viewer-copy-all__";
 function JsonViewer({
@@ -145,7 +146,7 @@ function JsonViewer({
                         "aria-haspopup": "menu",
                         "aria-expanded": isOpen ? true : false,
                         onClick: toggle,
-                        children: /* @__PURE__ */ jsx(MoreVertical, { "aria-hidden": "true" })
+                        children: /* @__PURE__ */ jsx(Icon, { customIcon: /* @__PURE__ */ jsx(Settings2, { "aria-hidden": "true" }) })
                       }
                     ),
                     children: (close) => /* @__PURE__ */ jsxs(Menu, { children: [

package/dist/components/line-viewer/LineViewer.cjs

@@ -10,6 +10,7 @@ var usePersistentState = require('../../hooks/usePersistentState');
 var styles = require('./LineViewer.module.css');
 var tokenizeLineFormat = require('./tokenizeLineFormat');
 var Button = require('../button/Button');
+var Icon = require('../icon/Icon');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -87,7 +88,7 @@ function LineViewer({
                     "aria-haspopup": "menu",
                     "aria-expanded": isOpen ? true : false,
                     onClick: toggle,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, { "aria-hidden": "true" })
+                    children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { customIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings2, { "aria-hidden": "true" }) })
                   }
                 ),
                 children: (close) => /* @__PURE__ */ jsxRuntime.jsxs(Menu.Menu, { children: [

package/dist/components/line-viewer/LineViewer.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { TextWrap, ListTree, Code2, Sun, Moon, ClipboardCopy, MoreVertical } from 'lucide-react';
+import { TextWrap, ListTree, Code2, Sun, Moon, ClipboardCopy, Settings2 } from 'lucide-react';
 import { useMemo, useRef } from 'react';
 import { Menu } from '../../components/menu/Menu';
 import { Popover } from '../../components/popover/Popover';
@@ -8,6 +8,7 @@ import { usePersistentState } from '../../hooks/usePersistentState';
 import styles from './LineViewer.module.css';
 import { tokenizeLineFormat } from './tokenizeLineFormat';
 import { Button } from '../button/Button';
+import { Icon } from '../icon/Icon';
 
 const TOKEN_CLASS = {
   tag: styles.tag,
@@ -81,7 +82,7 @@ function LineViewer({
                     "aria-haspopup": "menu",
                     "aria-expanded": isOpen ? true : false,
                     onClick: toggle,
-                    children: /* @__PURE__ */ jsx(MoreVertical, { "aria-hidden": "true" })
+                    children: /* @__PURE__ */ jsx(Icon, { customIcon: /* @__PURE__ */ jsx(Settings2, { "aria-hidden": "true" }) })
                   }
                 ),
                 children: (close) => /* @__PURE__ */ jsxs(Menu, { children: [

package/dist/components/popover/Popover.cjs

@@ -145,7 +145,7 @@ const Popover = React.forwardRef(function Popover2({
   React.useImperativeHandle(
     ref,
     () => ({
-      close: () => closePopover("api"),
+      close: (opts) => closePopover((opts == null ? void 0 : opts.returnFocus) === false ? "dismiss" : "api"),
       open: openPopover,
       isOpen: () => isOpen
     }),
@@ -265,6 +265,7 @@ const Popover = React.forwardRef(function Popover2({
     if (isOpen) return;
     if (!returnFocus) return;
     if (lastCloseReasonRef.current === "outside") return;
+    if (lastCloseReasonRef.current === "dismiss") return;
     (_b = (_a = triggerElRef.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
   }, [isOpen, returnFocus]);
   const chevronClassName = variant === "header" ? styles__default.default.chevronHeader : void 0;

package/dist/components/popover/Popover.d.ts

@@ -22,7 +22,14 @@ export interface PopoverProps {
     variant?: 'default' | 'header';
 }
 export interface PopoverHandle {
-    close: () => void;
+    /**
+     * Pass `{ returnFocus: false }` to close without focus returning to the
+     * trigger afterward - e.g. when the caller is about to navigate away or
+     * move focus itself, so the trigger shouldn't reclaim it back.
+     */
+    close: (opts?: {
+        returnFocus?: boolean;
+    }) => void;
     open: () => void;
     isOpen: () => boolean;
 }

package/dist/components/popover/Popover.js

@@ -121,7 +121,7 @@ const Popover = forwardRef(function Popover2({
   useImperativeHandle(
     ref,
     () => ({
-      close: () => closePopover("api"),
+      close: (opts) => closePopover((opts == null ? void 0 : opts.returnFocus) === false ? "dismiss" : "api"),
       open: openPopover,
       isOpen: () => isOpen
     }),
@@ -241,6 +241,7 @@ const Popover = forwardRef(function Popover2({
     if (isOpen) return;
     if (!returnFocus) return;
     if (lastCloseReasonRef.current === "outside") return;
+    if (lastCloseReasonRef.current === "dismiss") return;
     (_b = (_a = triggerElRef.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
   }, [isOpen, returnFocus]);
   const chevronClassName = variant === "header" ? styles.chevronHeader : void 0;

package/dist/components/search-box/SearchBox.cjs

@@ -27,6 +27,7 @@ const SearchBox = react.forwardRef(function SearchBoxInner({
   resultKeys,
   resultTemplate,
   initialTemplate,
+  initialTemplateOnly = false,
   popoverMinWidth = "500px",
   noResultText = "Ingen resultater",
   loading,
@@ -99,34 +100,36 @@ const SearchBox = react.forwardRef(function SearchBoxInner({
   }, [enableHotkey]);
   const hasInitialTemplate = initialTemplate !== void 0 && initialTemplate !== null;
   const hasQuery = draft.trim().length > 0;
-  const canShowPopover = hasQuery || hasInitialTemplate;
+  const canShowPopover = initialTemplateOnly ? !hasQuery && hasInitialTemplate : hasQuery || hasInitialTemplate;
   const handleChange = react.useCallback(
     (e) => {
       var _a2, _b, _c;
       const nextDraft = e.target.value;
       const nextHasQuery = nextDraft.trim().length > 0;
       setDraft(nextDraft);
-      if (nextHasQuery || hasInitialTemplate) {
+      const nextCanShow = initialTemplateOnly ? !nextHasQuery && hasInitialTemplate : nextHasQuery || hasInitialTemplate;
+      if (nextCanShow) {
         if (!((_a2 = popoverRef.current) == null ? void 0 : _a2.isOpen())) (_b = popoverRef.current) == null ? void 0 : _b.open();
       } else {
         (_c = popoverRef.current) == null ? void 0 : _c.close();
       }
       onChange == null ? void 0 : onChange(e);
     },
-    [hasInitialTemplate, onChange]
+    [hasInitialTemplate, initialTemplateOnly, onChange]
   );
   const handleSelect = react.useCallback(
     (item) => {
       onSelect == null ? void 0 : onSelect(item);
-      reset();
+      reset({ returnFocus: false });
+      onSearch == null ? void 0 : onSearch("");
     },
-    [onSelect]
+    [onSelect, onSearch]
   );
-  function reset() {
+  function reset(opts) {
     var _a2;
     setDraft("");
     setActiveIndex(null);
-    (_a2 = popoverRef.current) == null ? void 0 : _a2.close();
+    (_a2 = popoverRef.current) == null ? void 0 : _a2.close(opts);
   }
   const handleClear = react.useCallback(() => {
     var _a2;

package/dist/components/search-box/SearchBox.d.ts

@@ -15,6 +15,13 @@ export type SearchBoxProps<T extends Record<string, unknown>> = Omit<InputProps,
     onSelect?: (item: T) => void;
     displayPopover?: boolean;
     initialTemplate?: React.ReactNode;
+    /**
+     * When true, the popover only ever shows `initialTemplate` (on an empty
+     * field) and never opens once there's a query - for a box with no live
+     * results/resultTemplate of its own (e.g. one that just navigates via a
+     * URL param), so it doesn't pop open an empty dropdown while typing.
+     */
+    initialTemplateOnly?: boolean;
     noResultText?: string;
     popoverMinWidth?: string;
     loading?: boolean;

package/dist/components/search-box/SearchBox.js

@@ -21,6 +21,7 @@ const SearchBox = forwardRef(function SearchBoxInner({
   resultKeys,
   resultTemplate,
   initialTemplate,
+  initialTemplateOnly = false,
   popoverMinWidth = "500px",
   noResultText = "Ingen resultater",
   loading,
@@ -93,34 +94,36 @@ const SearchBox = forwardRef(function SearchBoxInner({
   }, [enableHotkey]);
   const hasInitialTemplate = initialTemplate !== void 0 && initialTemplate !== null;
   const hasQuery = draft.trim().length > 0;
-  const canShowPopover = hasQuery || hasInitialTemplate;
+  const canShowPopover = initialTemplateOnly ? !hasQuery && hasInitialTemplate : hasQuery || hasInitialTemplate;
   const handleChange = useCallback(
     (e) => {
       var _a2, _b, _c;
       const nextDraft = e.target.value;
       const nextHasQuery = nextDraft.trim().length > 0;
       setDraft(nextDraft);
-      if (nextHasQuery || hasInitialTemplate) {
+      const nextCanShow = initialTemplateOnly ? !nextHasQuery && hasInitialTemplate : nextHasQuery || hasInitialTemplate;
+      if (nextCanShow) {
         if (!((_a2 = popoverRef.current) == null ? void 0 : _a2.isOpen())) (_b = popoverRef.current) == null ? void 0 : _b.open();
       } else {
         (_c = popoverRef.current) == null ? void 0 : _c.close();
       }
       onChange == null ? void 0 : onChange(e);
     },
-    [hasInitialTemplate, onChange]
+    [hasInitialTemplate, initialTemplateOnly, onChange]
   );
   const handleSelect = useCallback(
     (item) => {
       onSelect == null ? void 0 : onSelect(item);
-      reset();
+      reset({ returnFocus: false });
+      onSearch == null ? void 0 : onSearch("");
     },
-    [onSelect]
+    [onSelect, onSearch]
   );
-  function reset() {
+  function reset(opts) {
     var _a2;
     setDraft("");
     setActiveIndex(null);
-    (_a2 = popoverRef.current) == null ? void 0 : _a2.close();
+    (_a2 = popoverRef.current) == null ? void 0 : _a2.close(opts);
   }
   const handleClear = useCallback(() => {
     var _a2;

package/dist/components/sidebar/components/sidenav-filteirng/SidenavFiltering.cjs

@@ -4,6 +4,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var lucideReact = require('lucide-react');
 var React = require('react');
+var Icon = require('../../../../components/icon/Icon');
 var Button = require('../../../button/Button');
 var Menu = require('../../../menu/Menu');
 var Popover = require('../../../popover/Popover');
@@ -73,7 +74,7 @@ const SidenavFiltering = ({
             variant: "outlined",
             "aria-label": "\xC5bn indstillinger for sidemenu",
             onClick: toggle,
-            icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings2, {})
+            icon: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { customIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings2, { "aria-hidden": "true" }) })
           }
         ),
         children: (close) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: wrapItemText, children: /* @__PURE__ */ jsxRuntime.jsx(

package/dist/components/sidebar/components/sidenav-filteirng/SidenavFiltering.js

@@ -2,6 +2,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Search, Settings2 } from 'lucide-react';
 import React from 'react';
+import { Icon } from '../../../../components/icon/Icon';
 import { Button } from '../../../button/Button';
 import { Menu } from '../../../menu/Menu';
 import { Popover } from '../../../popover/Popover';
@@ -67,7 +68,7 @@ const SidenavFiltering = ({
             variant: "outlined",
             "aria-label": "\xC5bn indstillinger for sidemenu",
             onClick: toggle,
-            icon: /* @__PURE__ */ jsx(Settings2, {})
+            icon: /* @__PURE__ */ jsx(Icon, { customIcon: /* @__PURE__ */ jsx(Settings2, { "aria-hidden": "true" }) })
           }
         ),
         children: (close) => /* @__PURE__ */ jsx(Menu, { children: /* @__PURE__ */ jsx(Menu.Item, { active: wrapItemText, children: /* @__PURE__ */ jsx(

package/dist/components/tabs/Tabs.cjs

@@ -150,62 +150,64 @@ function Tabs({
     ) : 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.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,
+        /* @__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(