@dbcdk/react-components 0.0.79 → 0.0.81

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

@@ -191,103 +191,70 @@
 
 .modified {
   background-color: color-mix(in srgb, var(--color-status-warning-bg) 22%, var(--color-bg-surface));
-  border-color: color-mix(
-    in srgb,
-    var(--color-status-warning-border) 45%,
-    var(--color-border-default)
-  );
-  box-shadow: inset 4px 0 0 var(--color-status-warning-border);
+  border-color: color-mix(in srgb, var(--color-status-warning-border) 45%, var(--color-border-default));
+  border-left-color: var(--color-status-warning-border);
+  border-left-width: 4px;
 }
 
 /* Hover should stay warm, not switch back to the normal border */
 .modified:hover:not([aria-disabled='true']) {
   background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
-  border-color: color-mix(
-    in srgb,
-    var(--color-status-warning-border) 60%,
-    var(--color-border-default)
-  );
+  border-color: color-mix(in srgb, var(--color-status-warning-border) 60%, var(--color-border-default));
+  border-left-color: var(--color-status-warning-border);
 }
 
 /* Focus should also stay warm and readable */
 .modified:focus-within:not([aria-disabled='true']) {
   background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
-  border-color: color-mix(
-    in srgb,
-    var(--color-status-warning-border) 75%,
-    var(--color-border-default)
-  );
-  box-shadow:
-    inset 4px 0 0 var(--color-status-warning-border),
-    inset 0 0 0 1px
-      color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
+  border-color: color-mix(in srgb, var(--color-status-warning-border) 75%, var(--color-border-default));
+  border-left-color: var(--color-status-warning-border);
+  box-shadow: inset 0 0 0 1px
+    color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
 }
 
 /* Variant-specific tweaks when modified */
 .surface.modified {
-  box-shadow:
-    inset 4px 0 0 var(--color-status-warning-border),
-    0 1px 2px rgba(0, 0, 0, 0.03);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
 }
 
 .surface.modified:hover:not([aria-disabled='true']) {
-  box-shadow:
-    inset 4px 0 0 var(--color-status-warning-border),
-    0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 
 .surface.modified:focus-within:not([aria-disabled='true']) {
-  box-shadow:
-    inset 4px 0 0 var(--color-status-warning-border),
-    inset 0 0 0 1px
-      color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
+  box-shadow: inset 0 0 0 1px
+    color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
 }
 
 .subtle.modified {
   background-color: color-mix(in srgb, var(--color-status-warning-bg) 30%, var(--color-bg-toolbar));
   border-color: transparent;
-  box-shadow:
-    inset 4px 0 0 var(--color-status-warning-border),
-    inset 0 0 0 1px transparent;
+  border-left-color: var(--color-status-warning-border);
+  border-left-width: 4px;
+  box-shadow: none;
 }
 
 .subtle.modified:hover:not([aria-disabled='true']) {
-  background-color: color-mix(
-    in srgb,
-    var(--color-status-warning-bg) 36%,
-    var(--color-bg-toolbar-hover)
-  );
+  background-color: color-mix(in srgb, var(--color-status-warning-bg) 36%, var(--color-bg-toolbar-hover));
 }
 
 .subtle.modified:focus-within:not([aria-disabled='true']) {
-  border-color: color-mix(
-    in srgb,
-    var(--color-status-warning-border) 75%,
-    var(--color-border-default)
-  );
-  box-shadow:
-    inset 4px 0 0 var(--color-status-warning-border),
-    inset 0 0 0 1px
-      color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
+  border-color: color-mix(in srgb, var(--color-status-warning-border) 75%, var(--color-border-default));
+  border-left-color: var(--color-status-warning-border);
+  box-shadow: inset 0 0 0 1px
+    color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
 }
 
 .standalone.modified {
-  box-shadow:
-    inset 4px 0 0 var(--color-status-warning-border),
-    var(--shadow-xs),
-    var(--shadow-md);
+  box-shadow: var(--shadow-xs), var(--shadow-md);
 }
 
 .standalone.modified:hover:not([aria-disabled='true']) {
-  box-shadow:
-    inset 4px 0 0 var(--color-status-warning-border),
-    var(--shadow-sm),
-    var(--shadow-md);
+  box-shadow: var(--shadow-sm), var(--shadow-md);
 }
 
 .standalone.modified:focus-within:not([aria-disabled='true']) {
   box-shadow:
-    inset 4px 0 0 var(--color-status-warning-border),
     var(--shadow-xs),
     var(--shadow-md),
     inset 0 0 0 1px
@@ -298,20 +265,25 @@
 .embedded.modified {
   background-color: color-mix(in srgb, var(--color-status-warning-bg) 18%, transparent);
   border-color: transparent;
-  box-shadow: inset 3px 0 0 var(--color-status-warning-border);
+  border-left-color: var(--color-status-warning-border);
+  border-left-width: 3px;
+  box-shadow: none;
 }
 
 .embedded.modified:hover:not([aria-disabled='true']),
 .embedded.modified:focus-within:not([aria-disabled='true']) {
   background-color: color-mix(in srgb, var(--color-status-warning-bg) 22%, transparent);
   border-color: transparent;
-  box-shadow: inset 3px 0 0 var(--color-status-warning-border);
+  border-left-color: var(--color-status-warning-border);
+  box-shadow: none;
 }
 
 /* Disabled modified state */
 .modified[aria-disabled='true'] {
   background-color: var(--color-disabled-bg);
   border-color: var(--color-disabled-border);
+  border-left-color: var(--color-disabled-border);
+  border-left-width: var(--border-width-thin);
   box-shadow: none;
 }
 

package/dist/components/forms/select/Select.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check } from 'lucide-react';
 import { useEffect, useId, useMemo, useRef, useState } from 'react';
 import { useTooltipTrigger } from '../../../components/overlay/tooltip/useTooltipTrigger';
+import styles from './Select.module.css';
 import { Button } from '../../button/Button';
 import { ClearButton } from '../../clear-button/ClearButton';
 import { Menu } from '../../menu/Menu';
@@ -168,7 +169,7 @@ export function Select({ label, error, helpText, orientation = 'vertical', label
                 returnFocus: true, trigger: (toggle, icon, isOpen) => (_jsx(Button, { disabled: disabled, ...(tooltipEnabled ? triggerProps : {}), id: controlId, "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : 'select-button', onKeyDown: handleKeyDown, fullWidth: fullWidth, variant: variant, onClick: e => {
                         resetActiveToSelected();
                         toggle(e);
-                    }, size: size, type: "button", "data-forminput": true, "aria-haspopup": "listbox", "aria-expanded": !!isOpen, "aria-controls": listboxId, "aria-invalid": Boolean(error) || undefined, "aria-describedby": describedBy, children: _jsxs("span", { className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs", style: { width: '100%' }, children: [_jsx("span", { children: selected ? selected.label : _jsx("span", { className: "dbc-muted-text", children: placeholder }) }), _jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [onClear && selected && _jsx(ClearButton, { onClick: onClear }), _jsx("span", { style: { color: 'var(--color-fg-subtle)', display: 'inline-flex' }, children: icon })] })] }) })), children: _jsx(Menu, { onKeyDown: handleKeyDown, role: "listbox", children: options.map((opt, index) => {
+                    }, size: size, type: "button", "data-forminput": true, "aria-haspopup": "listbox", "aria-expanded": !!isOpen, "aria-controls": listboxId, "aria-invalid": Boolean(error) || undefined, "aria-describedby": describedBy, className: modified ? styles.triggerModified : undefined, children: _jsxs("span", { className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs", style: { width: '100%' }, children: [_jsx("span", { children: selected ? selected.label : _jsx("span", { className: "dbc-muted-text", children: placeholder }) }), _jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [onClear && selected && _jsx(ClearButton, { onClick: onClear }), _jsx("span", { style: { color: 'var(--color-fg-subtle)', display: 'inline-flex' }, children: icon })] })] }) })), children: _jsx(Menu, { onKeyDown: handleKeyDown, role: "listbox", children: options.map((opt, index) => {
                         const isSelected = typeof opt.value === 'object' && typeof selectedValue === 'object' && datakey
                             ? (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue[datakey]) === opt.value[datakey]
                             : opt.value === selectedValue;

package/dist/components/forms/select/Select.module.css

@@ -0,0 +1,19 @@
+.triggerModified {
+  background-color: color-mix(in srgb, var(--color-status-warning-bg) 22%, var(--color-bg-surface));
+  border-color: color-mix(in srgb, var(--color-status-warning-border) 45%, var(--color-border-default));
+  border-left-color: var(--color-status-warning-border);
+  border-left-width: 4px;
+}
+
+.triggerModified:hover:not([disabled]) {
+  background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
+  border-color: color-mix(in srgb, var(--color-status-warning-border) 60%, var(--color-border-default));
+  border-left-color: var(--color-status-warning-border);
+}
+
+.triggerModified:focus-visible {
+  background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
+  border-color: color-mix(in srgb, var(--color-status-warning-border) 75%, var(--color-border-default));
+  border-left-color: var(--color-status-warning-border);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
+}

package/dist/components/forms/text-area/Textarea.js

@@ -39,6 +39,6 @@ className, ...rest }) {
         placement: tooltipPlacement,
         offset: 8,
     });
-    return (_jsx(InputContainer, { modified: modified, label: label, htmlFor: textareaId, error: error, helpText: helpText, helpTextAddition: showCount ? `${value === null || value === void 0 ? void 0 : value.length} tegn i denne boks` : undefined, orientation: orientation, labelWidth: labelWidth, fullWidth: fullWidth, required: required, children: _jsx("div", { className: styles.container, children: _jsx("div", { ...(tooltipEnabled ? triggerProps : {}), children: inputField }) }) }));
+    return (_jsx(InputContainer, { modified: modified, label: label, htmlFor: textareaId, error: error, helpText: helpText, helpTextAddition: showCount ? `${value === null || value === void 0 ? void 0 : value.length} tegn i denne boks` : undefined, orientation: orientation, labelWidth: labelWidth, fullWidth: fullWidth, required: required, children: _jsx("div", { className: [styles.container, modified ? styles.modified : ''].filter(Boolean).join(' '), children: _jsx("div", { ...(tooltipEnabled ? triggerProps : {}), children: inputField }) }) }));
 };
 Textarea.displayName = 'Textarea';

package/dist/components/forms/text-area/Textarea.module.css

@@ -1,11 +1,32 @@
 .container {
   flex-grow: 1;
 }
+
+.container.modified textarea {
+  background-color: color-mix(in srgb, var(--color-status-warning-bg) 22%, var(--color-bg-surface));
+  border-color: color-mix(in srgb, var(--color-status-warning-border) 45%, var(--color-border-default));
+  border-left-color: var(--color-status-warning-border);
+  border-left-width: 4px;
+}
+
+.container.modified textarea:hover {
+  background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
+  border-color: color-mix(in srgb, var(--color-status-warning-border) 60%, var(--color-border-default));
+  border-left-color: var(--color-status-warning-border);
+}
+
+.container.modified textarea:focus-visible {
+  background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
+  border-color: color-mix(in srgb, var(--color-status-warning-border) 75%, var(--color-border-default));
+  border-left-color: var(--color-status-warning-border);
+  box-shadow: inset 0 0 0 1px
+    color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
+}
 .container textarea {
   width: 100%;
   padding: var(--spacing-xs);
   border: var(--border-width-thin) solid var(--color-border-default);
-  border-radius: var(--border-radius-sm);
+  border-radius: var(--border-radius-default);
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
   line-height: var(--line-height-normal);

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

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, ChevronDown, ChevronRight, Copy, Search, X } from 'lucide-react';
 import { Fragment, useEffect, useId, useMemo, useState } from 'react';
+import { getHighlightedSegments } from '../../utils/text/get-highlighted-segments';
 import styles from './JsonViewer.module.css';
 function isJsonArray(value) {
     return Array.isArray(value);
@@ -89,28 +90,8 @@ function collectSearchMatches(value, query, path = [], key) {
     visit(value, path, key);
     return matches;
 }
-function getHighlightedSegments(text, query) {
-    if (!query)
-        return [{ text, matched: false }];
-    const lower = text.toLowerCase();
-    const segments = [];
-    let start = 0;
-    while (start < text.length) {
-        const index = lower.indexOf(query, start);
-        if (index === -1) {
-            segments.push({ text: text.slice(start), matched: false });
-            break;
-        }
-        if (index > start) {
-            segments.push({ text: text.slice(start, index), matched: false });
-        }
-        segments.push({ text: text.slice(index, index + query.length), matched: true });
-        start = index + query.length;
-    }
-    return segments.length > 0 ? segments : [{ text, matched: false }];
-}
 function HighlightText({ text, query }) {
-    return getHighlightedSegments(text, query).map((segment, index) => segment.matched ? (_jsx("mark", { className: styles.highlight, children: segment.text }, `${segment.text}-${index}`)) : (_jsx(Fragment, { children: segment.text }, `${segment.text}-${index}`)));
+    return getHighlightedSegments(text, query).map((segment, index) => segment.matched ? (_jsx("mark", { className: "dbc-highlight", children: segment.text }, `${segment.text}-${index}`)) : (_jsx(Fragment, { children: segment.text }, `${segment.text}-${index}`)));
 }
 function useClipboardStatus() {
     const [copiedId, setCopiedId] = useState(null);

package/dist/components/json-viewer/JsonViewer.module.css

@@ -8,6 +8,8 @@
   --json-pane-hover: color-mix(in oklab, var(--color-fg-inverse) 8%, transparent);
   --json-pane-selected: color-mix(in oklab, var(--color-brand) 24%, transparent);
   --json-pane-highlight: color-mix(in oklab, var(--color-brand) 68%, var(--dbc-blue-300) 32%);
+  --color-highlight-bg: color-mix(in oklab, var(--json-pane-highlight) 58%, transparent);
+  --color-highlight-fg: var(--color-fg-inverse);
   --json-pane-key: color-mix(in oklab, var(--color-fg-inverse) 88%, var(--dbc-blue-300) 12%);
   --json-pane-string: color-mix(in oklab, var(--dbc-green-300) 78%, white 22%);
   --json-pane-number: color-mix(in oklab, var(--dbc-amber-400) 76%, white 24%);
@@ -314,13 +316,6 @@
   color: color-mix(in oklab, var(--dbc-green-300) 78%, white 22%);
 }
 
-.highlight {
-  color: var(--color-fg-inverse);
-  background: color-mix(in oklab, var(--json-pane-highlight) 58%, transparent);
-  border-radius: var(--border-radius-sm);
-  padding-inline: 0.1em;
-}
-
 .emptyState {
   padding: var(--spacing-md);
   color: var(--json-pane-muted);

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

@@ -5,6 +5,7 @@ import { createPortal } from 'react-dom';
 import styles from './Tooltip.module.css';
 export const TooltipContext = createContext(null);
 const VIEWPORT_PADDING = 8;
+const SHOW_DELAY_MS = 500;
 function clamp(n, min, max) {
     return Math.max(min, Math.min(n, max));
 }
@@ -65,13 +66,23 @@ function shallowEqualActive(a, b) {
 }
 export function TooltipProvider({ children }) {
     const [active, setActive] = useState(null);
+    const showTimerRef = useRef(null);
     const show = useCallback((next) => {
-        setActive(curr => {
-            const proposed = { ...next, open: true };
-            return shallowEqualActive(curr, proposed) ? curr : proposed;
-        });
+        if (showTimerRef.current)
+            clearTimeout(showTimerRef.current);
+        showTimerRef.current = setTimeout(() => {
+            showTimerRef.current = null;
+            setActive(curr => {
+                const proposed = { ...next, open: true };
+                return shallowEqualActive(curr, proposed) ? curr : proposed;
+            });
+        }, SHOW_DELAY_MS);
     }, []);
     const hide = useCallback((id) => {
+        if (showTimerRef.current) {
+            clearTimeout(showTimerRef.current);
+            showTimerRef.current = null;
+        }
         setActive(curr => {
             if (!curr || curr.id !== id)
                 return curr;

package/dist/components/overlay/tooltip/useTooltipTrigger.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { ReactNode } from 'react';
 import { TooltipPlacement } from './TooltipProvider';
 type UseTooltipOptions = {
@@ -16,7 +17,8 @@ export declare function useTooltipTrigger(options: UseTooltipOptions): {
         ref: (node: HTMLElement | null) => void;
         onPointerEnter: () => void;
         onPointerLeave: () => void;
-        onFocus: () => void;
+        onPointerDown: () => void;
+        onFocus: (e: React.FocusEvent) => void;
         onBlur: () => void;
         'aria-describedby'?: string;
     };

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

@@ -81,9 +81,15 @@ export function useTooltipTrigger(options) {
             return;
         closeTimer.current = window.setTimeout(() => setOpen(false), delayCloseMs);
     };
-    const onFocus = () => {
+    const onPointerDown = () => {
         clearTimers();
         if (!isControlled)
+            setOpen(false);
+    };
+    const onFocus = (e) => {
+        clearTimers();
+        // Only show for keyboard focus — skip pointer clicks and programmatic focus returns (e.g. from modal close)
+        if (!isControlled && e.currentTarget.matches(':focus-visible'))
             setTimeout(() => {
                 setOpen(true);
             }, MOTION_MS.tooltipOpen);
@@ -102,6 +108,7 @@ export function useTooltipTrigger(options) {
             },
             onPointerEnter,
             onPointerLeave,
+            onPointerDown,
             onFocus,
             onBlur,
             'aria-describedby': content ? id : undefined,

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

@@ -79,6 +79,12 @@ export const SearchBox = forwardRef(function SearchBoxInner({ inputWidth, maxWid
         setActiveIndex(null);
         (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.close();
     }
+    const handleClear = React.useCallback(() => {
+        var _a;
+        reset();
+        onSearch === null || onSearch === void 0 ? void 0 : onSearch('');
+        (_a = internalInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [onSearch]);
     // Reset active index when results change
     useEffect(() => {
         setActiveIndex(null);
@@ -100,7 +106,7 @@ export const SearchBox = forwardRef(function SearchBoxInner({ inputWidth, maxWid
                             var _a, _b;
                             if (!((_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.isOpen()))
                                 (_b = popoverRef.current) === null || _b === void 0 ? void 0 : _b.open();
-                        }, minWidth: fullWidth ? undefined : (inputWidth !== null && inputWidth !== void 0 ? inputWidth : '300px'), width: fullWidth ? undefined : (inputWidth !== null && inputWidth !== void 0 ? inputWidth : '300px'), fullWidth: fullWidth, icon: showInputIcon ? _jsx(Search, {}) : undefined, inputSize: inputSize, variant: variant, autoComplete: "off", onButtonClick: onButtonClick, buttonLabel: buttonLabel, buttonIcon: trailingButtonIcon, ...inputProps, onKeyDown: e => {
+                        }, minWidth: fullWidth ? undefined : (inputWidth !== null && inputWidth !== void 0 ? inputWidth : '300px'), width: fullWidth ? undefined : (inputWidth !== null && inputWidth !== void 0 ? inputWidth : '300px'), fullWidth: fullWidth, icon: showInputIcon ? _jsx(Search, {}) : undefined, inputSize: inputSize, variant: variant, autoComplete: "off", onClear: handleClear, onButtonClick: onButtonClick, buttonLabel: buttonLabel, buttonIcon: trailingButtonIcon, ...inputProps, onKeyDown: e => {
                             var _a;
                             if (result === null || result === void 0 ? void 0 : result.length) {
                                 if (e.key === 'ArrowDown') {
@@ -132,11 +138,12 @@ export const SearchBox = forwardRef(function SearchBoxInner({ inputWidth, maxWid
                                     return (_jsx("td", { className: styles.suggestionCell, style: { whiteSpace: cell.length < 10 ? 'nowrap' : undefined }, children: cell }, key));
                                 }) }, index))) }) }) })) : !searchQuery && !loading ? (initialTemplate || _jsx("div", { className: styles.resultContainer, children: "Indtast s\u00F8geord" })) : loading ? (_jsx("table", { style: { width: '100%' }, children: _jsx("tbody", { children: Array.from({ length: 5 }).map((_, index) => (_jsx("tr", { children: resultKeys === null || resultKeys === void 0 ? void 0 : resultKeys.map(key => (_jsx("td", { style: { padding: '8px' }, children: _jsx(SkeletonLoaderItem, { height: 20, width: "100%" }) }, key))) }, index))) }) })) : (_jsx("div", { className: styles.resultContainer, children: noResultText })) }));
         }
-        return (_jsx(Input, { ref: internalInputRef, icon: showInputIcon ? _jsx(Search, {}) : undefined, minWidth: fullWidth ? undefined : (inputWidth !== null && inputWidth !== void 0 ? inputWidth : '300px'), fullWidth: fullWidth, inputSize: inputSize, variant: variant, onButtonClick: onButtonClick, buttonLabel: buttonLabel, buttonIcon: trailingButtonIcon, ...inputProps, placeholder: (_a = rest.placeholder) !== null && _a !== void 0 ? _a : 'Indtast søgeord' }));
+        return (_jsx(Input, { ref: internalInputRef, icon: showInputIcon ? _jsx(Search, {}) : undefined, minWidth: fullWidth ? undefined : (inputWidth !== null && inputWidth !== void 0 ? inputWidth : '300px'), fullWidth: fullWidth, inputSize: inputSize, variant: variant, onClear: handleClear, onButtonClick: onButtonClick, buttonLabel: buttonLabel, buttonIcon: trailingButtonIcon, ...inputProps, placeholder: (_a = rest.placeholder) !== null && _a !== void 0 ? _a : 'Indtast søgeord' }));
     }, [
         rest,
         draft,
         handleChange,
+        handleClear,
         displayPopover,
         inputWidth,
         inputSize,

package/dist/components/sidebar/Sidebar.d.ts

@@ -12,11 +12,12 @@ interface SidebarProps {
     version?: string | number;
     hideSearch?: boolean;
     searchPlaceholder?: string;
+    showSettings?: boolean;
     footer?: React.ReactNode;
     resizable?: boolean;
     defaultWidth?: number;
     minWidth?: number;
     storageKey?: string;
 }
-export declare function Sidebar({ items, productLogo, activeLink, version, hideSearch, searchPlaceholder, footer, resizable, defaultWidth, minWidth, storageKey, }: SidebarProps): JSX.Element;
+export declare function Sidebar({ items, productLogo, activeLink, version, hideSearch, searchPlaceholder, showSettings, footer, resizable, defaultWidth, minWidth, storageKey, }: SidebarProps): JSX.Element;
 export {};

package/dist/components/sidebar/Sidebar.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SidebarContainer } from './components/sidebar-container/SidebarContainer';
 import { SidebarProvider } from './providers/SidebarProvider';
-export function Sidebar({ items, productLogo, activeLink, version, hideSearch, searchPlaceholder, footer, resizable, defaultWidth, minWidth, storageKey, }) {
-    return (_jsx(SidebarProvider, { items: items, children: _jsx(SidebarContainer, { productLogo: productLogo, activeLink: activeLink, version: version, hideSearch: hideSearch, searchPlaceholder: searchPlaceholder, footer: footer, resizable: resizable, defaultWidth: defaultWidth, minWidth: minWidth, storageKey: storageKey }) }));
+export function Sidebar({ items, productLogo, activeLink, version, hideSearch, searchPlaceholder, showSettings, footer, resizable, defaultWidth, minWidth, storageKey, }) {
+    return (_jsx(SidebarProvider, { items: items, children: _jsx(SidebarContainer, { productLogo: productLogo, activeLink: activeLink, version: version, hideSearch: hideSearch, searchPlaceholder: searchPlaceholder, showSettings: showSettings, footer: footer, resizable: resizable, defaultWidth: defaultWidth, minWidth: minWidth, storageKey: storageKey }) }));
 }

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.d.ts

@@ -7,11 +7,12 @@ interface SidebarContainerProps {
     version?: string | number;
     hideSearch?: boolean;
     searchPlaceholder?: string;
+    showSettings?: boolean;
     footer?: ReactNode;
     resizable?: boolean;
     defaultWidth?: number;
     minWidth?: number;
     storageKey?: string;
 }
-export declare function SidebarContainer({ logo, productLogo, activeLink, version, hideSearch, searchPlaceholder, footer, resizable, defaultWidth, minWidth, storageKey, }: SidebarContainerProps): JSX.Element;
+export declare function SidebarContainer({ logo, productLogo, activeLink, version, hideSearch, searchPlaceholder, showSettings, footer, resizable, defaultWidth, minWidth, storageKey, }: SidebarContainerProps): JSX.Element;
 export {};

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

@@ -39,7 +39,7 @@ function removeStoredWidth(key) {
         // ignore
     }
 }
-export function SidebarContainer({ logo, productLogo, activeLink, version, hideSearch, searchPlaceholder = 'Filtrer menu', footer, resizable, defaultWidth = 240, minWidth = 160, storageKey, }) {
+export function SidebarContainer({ logo, productLogo, activeLink, version, hideSearch, searchPlaceholder = 'Filtrer menu', showSettings = false, footer, resizable, defaultWidth = 240, minWidth = 160, storageKey, }) {
     const { isSidebarCollapsed, handleSidebarCollapseChange } = useSidebar();
     // Always start from defaultWidth so server and client render identical HTML.
     // localStorage is read in a useEffect after hydration to avoid SSR mismatch.
@@ -149,5 +149,5 @@ export function SidebarContainer({ logo, productLogo, activeLink, version, hideS
     const containerStyle = useMemo(() => ({
         '--sidebar-width': `${sidebarWidth}px`,
     }), [sidebarWidth]);
-    return (_jsxs("div", { ref: containerRef, role: "complementary", className: `${styles.container} ${isSidebarCollapsed ? styles.collapsed : ''} ${isResizing ? styles.resizing : ''}`, style: containerStyle, children: [_jsx("div", { className: styles.header, children: _jsxs("div", { className: styles.productHeader, children: [_jsx("div", { className: styles.productLogo, children: productLogo }), _jsx(Button, { size: "md", variant: "inline", shape: "round", "aria-label": "Collapse sidebar", icon: _jsx(ChevronLeft, { className: isSidebarCollapsed ? styles.collapsedIcon : '' }), onClick: () => handleSidebarCollapseChange(!isSidebarCollapsed) })] }) }), _jsxs("div", { className: styles.content, children: [!hideSearch && (_jsx("div", { className: styles.filter, children: _jsx(SidenavFiltering, { placeholder: searchPlaceholder }) })), _jsx("div", { className: `${styles.links} hideScrollBar`, children: _jsx(SidebarItems, { activeLink: activeLink }) })] }), footer && _jsx("div", { className: styles.footerSlot, children: footer }), _jsxs("div", { className: styles.footer, children: [_jsx("div", { className: styles.companyLogo, children: logo !== null && logo !== void 0 ? logo : _jsx(Logo, {}) }), version && _jsx("div", { className: `${styles.version} dbc-muted-text dbc-sm-text`, children: version })] }), resizable && (_jsx("div", { className: styles.resizeHandle, role: "separator", "aria-label": "Resize sidebar", "aria-orientation": "vertical", "aria-valuemin": Math.round(minWidth), "aria-valuemax": ariaMaxWidth !== undefined ? Math.round(ariaMaxWidth) : undefined, "aria-valuenow": Math.round(sidebarWidth), tabIndex: isSidebarCollapsed ? -1 : 0, onPointerDown: onResizePointerDown, onPointerMove: onResizePointerMove, onPointerUp: endResizeDrag, onPointerCancel: endResizeDrag, onDoubleClick: resetWidth, onKeyDown: onKeyDown }))] }));
+    return (_jsxs("div", { ref: containerRef, role: "complementary", className: `${styles.container} ${isSidebarCollapsed ? styles.collapsed : ''} ${isResizing ? styles.resizing : ''}`, style: containerStyle, children: [_jsx("div", { className: styles.header, children: _jsxs("div", { className: styles.productHeader, children: [_jsx("div", { className: styles.productLogo, children: productLogo }), _jsx(Button, { size: "md", variant: "inline", shape: "round", "aria-label": "Collapse sidebar", icon: _jsx(ChevronLeft, { className: isSidebarCollapsed ? styles.collapsedIcon : '' }), onClick: () => handleSidebarCollapseChange(!isSidebarCollapsed) })] }) }), _jsxs("div", { className: styles.content, children: [!hideSearch && (_jsx("div", { className: styles.filter, children: _jsx(SidenavFiltering, { placeholder: searchPlaceholder, showSettings: showSettings }) })), _jsx("div", { className: `${styles.links} hideScrollBar`, children: _jsx(SidebarItems, { activeLink: activeLink }) })] }), footer && _jsx("div", { className: styles.footerSlot, children: footer }), _jsxs("div", { className: styles.footer, children: [_jsx("div", { className: styles.companyLogo, children: logo !== null && logo !== void 0 ? logo : _jsx(Logo, {}) }), version && _jsx("div", { className: `${styles.version} dbc-muted-text dbc-sm-text`, children: version })] }), resizable && (_jsx("div", { className: styles.resizeHandle, role: "separator", "aria-label": "Resize sidebar", "aria-orientation": "vertical", "aria-valuemin": Math.round(minWidth), "aria-valuemax": ariaMaxWidth !== undefined ? Math.round(ariaMaxWidth) : undefined, "aria-valuenow": Math.round(sidebarWidth), tabIndex: isSidebarCollapsed ? -1 : 0, onPointerDown: onResizePointerDown, onPointerMove: onResizePointerMove, onPointerUp: endResizeDrag, onPointerCancel: endResizeDrag, onDoubleClick: resetWidth, onKeyDown: onKeyDown }))] }));
 }

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.js

@@ -1,11 +1,18 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { getHighlightedSegments } from '../../../../utils/text/get-highlighted-segments';
 import styles from './SidebarItemContent.module.css';
 import { useSidebar } from '../../providers/SidebarProvider';
 export function SidebarItemContent({ icon, label, suffixIcon, href, iconWidth, disableActiveStyles = false, headerStyle, truncateLabel = false, }) {
-    const { activeLink, isSidebarCollapsed } = useSidebar();
+    const { activeLink, activeQuery, isSidebarCollapsed, wrapItemText } = useSidebar();
     const iconStyle = iconWidth !== undefined
         ? { ['--sidebar-item-icon-width']: iconWidth }
         : undefined;
-    return (_jsxs("span", { className: `${styles.container} ${!disableActiveStyles && activeLink === href ? styles.active : ''} ${isSidebarCollapsed ? styles.collapsed : ''} ${headerStyle ? styles.headerStyle : ''}`, children: [_jsxs("span", { className: styles.iconLabel, children: [_jsx("span", { className: styles.icon, style: iconStyle, children: icon }), !isSidebarCollapsed && (_jsx("span", { className: `${styles.label} ${truncateLabel ? styles.truncate : ''}`, title: truncateLabel && typeof label === 'string' ? label : undefined, children: label }))] }), suffixIcon && !isSidebarCollapsed && _jsx("span", { className: styles.suffixIcon, children: suffixIcon })] }));
+    const shouldTruncate = truncateLabel && !wrapItemText && !activeQuery;
+    const highlightTerms = activeQuery.trim().split(/\s+/).filter(Boolean);
+    const renderedLabel = typeof label === 'string' && highlightTerms.length > 0
+        ? getHighlightedSegments(label, highlightTerms).map((segment, index) => segment.matched ? (_jsx("mark", { className: "dbc-highlight", children: segment.text }, `${segment.text}-${index}`)) : (_jsx(React.Fragment, { children: segment.text }, `${segment.text}-${index}`)))
+        : label;
+    return (_jsxs("span", { className: `${styles.container} ${!disableActiveStyles && activeLink === href ? styles.active : ''} ${isSidebarCollapsed ? styles.collapsed : ''} ${headerStyle ? styles.headerStyle : ''}`, children: [_jsxs("span", { className: styles.iconLabel, children: [_jsx("span", { className: styles.icon, style: iconStyle, children: icon }), !isSidebarCollapsed && (_jsx("span", { className: `${styles.label} ${shouldTruncate ? styles.truncate : ''}`, title: shouldTruncate && typeof label === 'string' ? label : undefined, children: renderedLabel }))] }), suffixIcon && !isSidebarCollapsed && _jsx("span", { className: styles.suffixIcon, children: suffixIcon })] }));
 }

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.module.css

@@ -10,7 +10,7 @@
   color: var(--color-fg-muted);
   cursor: pointer;
   position: relative;
-  border-radius: var(--border-radius-default);
+  border-radius: var(--border-radius-md);
   user-select: none;
   transition:
     background-color var(--transition-fast) var(--ease-standard),
@@ -34,7 +34,8 @@
   inset-block: 0;
   inline-size: 3px;
   background-color: var(--color-brand);
-  border-radius: 0;
+  border-start-start-radius: inherit;
+  border-end-start-radius: inherit;
 }
 
 .iconLabel {

package/dist/components/sidebar/components/sidenav-filteirng/SidenavFiltering.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 interface SidenavFilteringProps {
     placeholder?: string;
+    showSettings?: boolean;
 }
 declare const SidenavFiltering: React.FC<SidenavFilteringProps>;
 export default SidenavFiltering;

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

@@ -1,12 +1,14 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Search } from 'lucide-react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Search, Settings2 } from 'lucide-react';
 import React from 'react';
 import { Button } from '../../../button/Button';
+import { Menu } from '../../../menu/Menu';
+import { Popover } from '../../../popover/Popover';
 import { SearchBox } from '../../../search-box/SearchBox';
 import { useSidebar } from '../../providers/SidebarProvider';
-const SidenavFiltering = ({ placeholder = 'Filtrer menu' }) => {
-    const { activeQuery, setActiveQuery, isSidebarCollapsed, handleSidebarCollapseChange } = useSidebar();
+const SidenavFiltering = ({ placeholder = 'Filtrer menu', showSettings = false, }) => {
+    const { activeQuery, setActiveQuery, isSidebarCollapsed, handleSidebarCollapseChange, wrapItemText, setWrapItemText, } = useSidebar();
     const searchBoxRef = React.useRef(null);
     const handleSearch = (value) => {
         setActiveQuery === null || setActiveQuery === void 0 ? void 0 : setActiveQuery(value);
@@ -20,6 +22,9 @@ const SidenavFiltering = ({ placeholder = 'Filtrer menu' }) => {
                 }, 50);
             } }));
     }
-    return (_jsx(SearchBox, { ref: searchBoxRef, inputWidth: "100%", inputSize: "sm", value: activeQuery !== null && activeQuery !== void 0 ? activeQuery : '', onSearch: handleSearch, placeholder: placeholder }));
+    return (_jsxs("div", { style: { display: 'flex', alignItems: 'stretch', gap: 'var(--spacing-xs)' }, children: [_jsx(SearchBox, { ref: searchBoxRef, inputWidth: "100%", inputSize: "sm", value: activeQuery !== null && activeQuery !== void 0 ? activeQuery : '', onSearch: handleSearch, placeholder: placeholder, fullWidth: true }), showSettings ? (_jsx(Popover, { minWidth: "220px", trigger: toggle => (_jsx(Button, { type: "button", size: "sm", variant: "outlined", shape: "round", "aria-label": "\u00C5bn indstillinger for sidemenu", onClick: toggle, icon: _jsx(Settings2, {}) })), children: close => (_jsx(Menu, { children: _jsx(Menu.Item, { active: wrapItemText, children: _jsx("button", { type: "button", onClick: () => {
+                                setWrapItemText(!wrapItemText);
+                                close();
+                            }, children: "Ombryd tekst" }) }) })) })) : null] }));
 };
 export default SidenavFiltering;

package/dist/components/sidebar/providers/SidebarProvider.d.ts

@@ -6,8 +6,10 @@ export type SidebarContextValue = {
     expandedItems: Set<string>;
     resetExpandAll: () => void;
     activeQuery: string;
+    wrapItemText: boolean;
     areItemsCollapsed: boolean;
     setActiveQuery: (query: string) => void;
+    setWrapItemText: (value: boolean) => void;
     triggerExpandAll: () => void;
     setItemsCollapsed: (v: boolean) => void;
     filteredItems?: NavBarItem[];
@@ -27,6 +29,6 @@ type SidebarProviderProps = {
     initialCollapseChildren?: boolean;
     initialSidebarCollapsed?: boolean;
 };
-export declare function SidebarProvider({ children, items, initialCollapsed, initialSidebarCollapsed, }: SidebarProviderProps): JSX.Element;
+export declare function SidebarProvider({ children, items, initialQuery, initialCollapsed, initialSidebarCollapsed, }: SidebarProviderProps): JSX.Element;
 export declare function useSidebar(): SidebarContextValue;
 export {};

package/dist/components/sidebar/providers/SidebarProvider.js

@@ -2,13 +2,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { nestedFiltering } from '../../../utils/arrays/nested-filtering';
-/**
- * Production notes:
- * - No console logging.
- * - Auto-expands the correct expandable chain for the active link (including when the active link
- *   points to the expandable parent itself).
- * - Normalizes hrefs (trailing slashes) so comparisons are stable.
- */
 const hasChildren = (item) => Array.isArray(item.children) && item.children.length > 0;
 const hasHref = (item) => typeof item.href === 'string' && item.href.length > 0;
 const normalizeHref = (href) => {
@@ -55,8 +48,10 @@ const SidebarContext = createContext({
     defaultExpanded: null,
     expandedItems: new Set(),
     activeQuery: '',
+    wrapItemText: false,
     areItemsCollapsed: false,
     setActiveQuery: () => { },
+    setWrapItemText: () => { },
     triggerExpandAll: () => { },
     setItemsCollapsed: () => { },
     resetExpandAll: () => { },
@@ -71,9 +66,10 @@ const SidebarContext = createContext({
 const SIDEBAR_COLLAPSED_STORAGE_KEY = 'sidebar-is-collapsed';
 const SIDEBAR_BREAKPOINT = 1024;
 const getBreakpoint = (width) => width < SIDEBAR_BREAKPOINT ? 'small' : 'large';
-export function SidebarProvider({ children, items, initialCollapsed = false, initialSidebarCollapsed, }) {
+export function SidebarProvider({ children, items, initialQuery, initialCollapsed = false, initialSidebarCollapsed, }) {
     const [defaultExpanded, setDefaultExpanded] = useState(null);
-    const [activeQuery, setActiveQuery] = useState('');
+    const [activeQuery, setActiveQuery] = useState(initialQuery !== null && initialQuery !== void 0 ? initialQuery : '');
+    const [wrapItemText, setWrapItemText] = useState(false);
     const [areItemsCollapsed, setItemsCollapsed] = useState(initialCollapsed);
     const [activeHref, setActiveHref] = useState('');
     // expandedItems is the source of truth for "open groups"
@@ -84,7 +80,22 @@ export function SidebarProvider({ children, items, initialCollapsed = false, ini
         itemsRef.current = items;
     }, [items]);
     const [isSidebarCollapsed, setSidebarCollapsed] = useState(initialSidebarCollapsed !== null && initialSidebarCollapsed !== void 0 ? initialSidebarCollapsed : false);
-    const hasExplicitInitialSidebarCollapsed = initialSidebarCollapsed !== undefined;
+    // Runs once after hydration — safe to read localStorage and window.innerWidth here.
+    useEffect(() => {
+        if (initialSidebarCollapsed !== undefined)
+            return;
+        try {
+            const stored = window.localStorage.getItem(SIDEBAR_COLLAPSED_STORAGE_KEY);
+            if (stored !== null) {
+                setSidebarCollapsed(Boolean(JSON.parse(stored))); // eslint-disable-line react-hooks/set-state-in-effect -- intentional: SSR-safe initial read
+                return;
+            }
+        }
+        catch {
+            // ignore parse failures
+        }
+        setSidebarCollapsed(getBreakpoint(window.innerWidth) === 'small');
+    }, []); // intentionally empty — only runs once after first mount
     const triggerExpandAll = useCallback(() => setDefaultExpanded(true), []);
     const resetExpandAll = useCallback(() => setDefaultExpanded(null), []);
     const setActiveLink = useCallback((href) => setActiveHref(href), []);
@@ -140,41 +151,6 @@ export function SidebarProvider({ children, items, initialCollapsed = false, ini
             })
             : items;
     }, [items, activeQuery]);
-    // Searching should expand all.
-    useEffect(() => {
-        if (activeQuery)
-            triggerExpandAll();
-    }, [activeQuery, triggerExpandAll]);
-    // Initial collapsed state: explicit prop > localStorage > responsive default.
-    useEffect(() => {
-        if (typeof window === 'undefined')
-            return;
-        const currentBreakpoint = getBreakpoint(window.innerWidth);
-        if (hasExplicitInitialSidebarCollapsed) {
-            const value = initialSidebarCollapsed !== null && initialSidebarCollapsed !== void 0 ? initialSidebarCollapsed : false;
-            setSidebarCollapsed(value);
-            try {
-                window.localStorage.setItem(SIDEBAR_COLLAPSED_STORAGE_KEY, JSON.stringify(value));
-            }
-            catch {
-                // ignore persist failures
-            }
-            return;
-        }
-        try {
-            const stored = window.localStorage.getItem(SIDEBAR_COLLAPSED_STORAGE_KEY);
-            if (stored !== null) {
-                const parsed = JSON.parse(stored);
-                setSidebarCollapsed(Boolean(parsed));
-                return;
-            }
-        }
-        catch {
-            // ignore parse failures
-        }
-        // Nothing stored -> responsive default (do NOT persist automatic choice)
-        setSidebarCollapsed(currentBreakpoint === 'small');
-    }, [hasExplicitInitialSidebarCollapsed, initialSidebarCollapsed]);
     const persistCollapsed = useCallback((collapsed) => {
         if (typeof window === 'undefined')
             return;
@@ -208,12 +184,14 @@ export function SidebarProvider({ children, items, initialCollapsed = false, ini
         return () => window.removeEventListener('resize', onResize);
     }, []);
     const value = useMemo(() => ({
-        defaultExpanded,
+        defaultExpanded: activeQuery ? true : defaultExpanded,
         expandedItems,
         filteredItems,
         activeQuery,
+        wrapItemText,
         areItemsCollapsed,
         setActiveQuery,
+        setWrapItemText,
         triggerExpandAll,
         resetExpandAll,
         setItemsCollapsed,
@@ -229,8 +207,10 @@ export function SidebarProvider({ children, items, initialCollapsed = false, ini
         expandedItems,
         filteredItems,
         activeQuery,
+        wrapItemText,
         areItemsCollapsed,
         setActiveQuery,
+        setWrapItemText,
         triggerExpandAll,
         resetExpandAll,
         setItemsCollapsed,

package/dist/styles/styles.css

@@ -122,7 +122,12 @@ body.dbc-app {
 }
 
 .dbc-highlight {
-  background-color: var(--color-status-warning-bg);
+  color: var(--color-highlight-fg, inherit);
+  background-color: var(--color-highlight-bg, var(--color-status-warning-bg));
+  border-radius: var(--border-radius-sm);
+  padding-inline: var(--spacing-2xs);
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
 }
 
 .dbc-muted-text {

package/dist/styles/themes/dbc/dark.css

@@ -83,6 +83,8 @@ html[data-theme='dark'] {
   /* Selected */
   --color-bg-selected: var(--dbc-blue-100);
   --color-bg-selected-hover: var(--dbc-blue-150);
+  --color-highlight-bg: var(--color-bg-selected-hover);
+  --color-highlight-fg: var(--color-fg-default);
 
   --color-neutral: var(--dbc-neutral-200);
 

package/dist/styles/themes/dbc/light.css

@@ -83,6 +83,8 @@ html[data-theme='light'] {
   /* Selected */
   --color-bg-selected: var(--dbc-blue-100);
   --color-bg-selected-hover: var(--dbc-blue-150);
+  --color-highlight-bg: var(--color-bg-selected-hover);
+  --color-highlight-fg: var(--color-fg-default);
 
   --color-neutral: var(--dbc-neutral-200);
 

package/dist/styles.css

@@ -122,7 +122,12 @@ body.dbc-app {
 }
 
 .dbc-highlight {
-  background-color: var(--color-status-warning-bg);
+  color: var(--color-highlight-fg, inherit);
+  background-color: var(--color-highlight-bg, var(--color-status-warning-bg));
+  border-radius: var(--border-radius-sm);
+  padding-inline: var(--spacing-2xs);
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
 }
 
 .dbc-muted-text {

package/dist/utils/text/get-highlighted-segments.d.ts

@@ -0,0 +1,5 @@
+export type HighlightSegment = {
+    text: string;
+    matched: boolean;
+};
+export declare function getHighlightedSegments(text: string, query: string | string[]): HighlightSegment[];

package/dist/utils/text/get-highlighted-segments.js

@@ -0,0 +1,46 @@
+function normalizeTerms(query) {
+    const terms = Array.isArray(query) ? query : [query];
+    return [...new Set(terms.map(term => term.trim().toLowerCase()).filter(Boolean))].sort((a, b) => b.length - a.length);
+}
+export function getHighlightedSegments(text, query) {
+    const terms = normalizeTerms(query);
+    if (!text || terms.length === 0)
+        return [{ text, matched: false }];
+    const lower = text.toLowerCase();
+    const ranges = [];
+    for (const term of terms) {
+        let startIndex = 0;
+        while (startIndex < lower.length) {
+            const matchIndex = lower.indexOf(term, startIndex);
+            if (matchIndex === -1)
+                break;
+            ranges.push({ start: matchIndex, end: matchIndex + term.length });
+            startIndex = matchIndex + term.length;
+        }
+    }
+    if (ranges.length === 0)
+        return [{ text, matched: false }];
+    ranges.sort((a, b) => a.start - b.start || a.end - b.end);
+    const mergedRanges = [];
+    for (const range of ranges) {
+        const previous = mergedRanges[mergedRanges.length - 1];
+        if (!previous || range.start > previous.end) {
+            mergedRanges.push({ ...range });
+            continue;
+        }
+        previous.end = Math.max(previous.end, range.end);
+    }
+    const segments = [];
+    let cursor = 0;
+    for (const range of mergedRanges) {
+        if (range.start > cursor) {
+            segments.push({ text: text.slice(cursor, range.start), matched: false });
+        }
+        segments.push({ text: text.slice(range.start, range.end), matched: true });
+        cursor = range.end;
+    }
+    if (cursor < text.length) {
+        segments.push({ text: text.slice(cursor), matched: false });
+    }
+    return segments.length > 0 ? segments : [{ text, matched: false }];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.79",
+  "version": "0.0.81",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",