@dbcdk/react-components 0.0.66 → 0.0.68

package/dist/components/button-select/ButtonSelect.d.ts

@@ -0,0 +1,16 @@
+import type { JSX } from 'react';
+import React from 'react';
+import type { ButtonSize } from '../../components/button/Button';
+export interface ButtonSelectOption<T extends string = string> {
+    value: T;
+    label: React.ReactNode;
+    disabled?: boolean;
+}
+export interface ButtonSelectProps<T extends string = string> {
+    options: ButtonSelectOption<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    size?: ButtonSize;
+    disabled?: boolean;
+}
+export declare function ButtonSelect<T extends string>({ options, value, onChange, size, disabled, }: ButtonSelectProps<T>): JSX.Element;

package/dist/components/button-select/ButtonSelect.js

@@ -0,0 +1,7 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '../../components/button/Button';
+import styles from './ButtonSelect.module.css';
+export function ButtonSelect({ options, value, onChange, size = 'md', disabled, }) {
+    return (_jsx("div", { className: styles.group, role: "group", children: options.map(option => (_jsx(Button, { className: option.value === value ? `${styles.btn} ${styles.btnSelected}` : styles.btn, variant: "outlined", shape: "default", size: size, active: option.value === value, disabled: disabled || option.disabled, onClick: () => onChange(option.value), children: option.label }, option.value))) }));
+}

package/dist/components/button-select/ButtonSelect.module.css

@@ -0,0 +1,40 @@
+.group {
+  display: inline-flex;
+  flex-wrap: nowrap;
+}
+
+/* Collapse the doubled border between adjacent buttons */
+.group .btn:not(:first-child) {
+  margin-left: -1px;
+}
+
+/* Flatten interior corners */
+.group .btn:not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.group .btn:not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+/* Raise hovered / focused / selected button so its full border is visible above siblings */
+.group .btn:hover,
+.group .btn:focus-visible,
+.group .btn:active,
+.group .btnSelected {
+  position: relative;
+  z-index: 1;
+}
+
+/* Selected state follows the system's selection language (same as Chip) */
+.group .btnSelected {
+  background-color: var(--color-bg-selected);
+  color: var(--color-brand);
+  border-color: var(--color-border-selected);
+}
+
+.group .btnSelected:hover {
+  background-color: var(--color-bg-selected);
+}

package/dist/components/json-viewer/JsonViewer.d.ts

@@ -0,0 +1,11 @@
+import type { JSX } from 'react';
+export interface JsonViewerProps {
+    value: unknown;
+    defaultExpandedDepth?: number;
+    expandAll?: boolean;
+    helperText?: string;
+    searchPlaceholder?: string;
+    emptySearchText?: string;
+    className?: string;
+}
+export declare function JsonViewer({ value, defaultExpandedDepth, expandAll, helperText, searchPlaceholder, emptySearchText, className, }: JsonViewerProps): JSX.Element;

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

@@ -0,0 +1,199 @@
+'use client';
+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 styles from './JsonViewer.module.css';
+function isJsonArray(value) {
+    return Array.isArray(value);
+}
+function isJsonObject(value) {
+    return value !== null && typeof value === 'object' && !Array.isArray(value);
+}
+function getValueType(value) {
+    if (value === null)
+        return 'null';
+    if (Array.isArray(value))
+        return 'array';
+    if (typeof value === 'object')
+        return 'object';
+    if (typeof value === 'string')
+        return 'string';
+    if (typeof value === 'number')
+        return 'number';
+    if (typeof value === 'boolean')
+        return 'boolean';
+    return 'string';
+}
+function formatPrimitive(value) {
+    if (value === null)
+        return 'null';
+    if (typeof value === 'string')
+        return JSON.stringify(value);
+    return String(value);
+}
+function getPrimitiveRawValue(value) {
+    if (value === null)
+        return 'null';
+    return String(value);
+}
+function getSummary(value) {
+    if (isJsonArray(value)) {
+        return `${value.length} element${value.length === 1 ? '' : 'er'}`;
+    }
+    if (!isJsonObject(value))
+        return '0 felter';
+    const count = Object.keys(value).length;
+    return `${count} felt${count === 1 ? '' : 'er'}`;
+}
+function getNodeId(path) {
+    return path.length === 0 ? '$' : `$.${path.join('.')}`;
+}
+function getPathLabel(path) {
+    return getNodeId(path);
+}
+function normalizeSearch(value) {
+    return value.trim().toLowerCase();
+}
+function valueToSearchString(value) {
+    return value === null ? 'null' : String(value).toLowerCase();
+}
+function collectSearchMatches(value, query, path = [], key) {
+    const matches = new Map();
+    const visit = (current, currentPath, currentKey) => {
+        const nodeId = getNodeId(currentPath);
+        const pathLabel = getPathLabel(currentPath).toLowerCase();
+        const keyLabel = (currentKey !== null && currentKey !== void 0 ? currentKey : '').toLowerCase();
+        let self = keyLabel.includes(query) || pathLabel.includes(query);
+        let descendant = false;
+        if (isJsonArray(current)) {
+            current.forEach((item, index) => {
+                const childMatches = visit(item, [...currentPath, String(index)], String(index));
+                descendant = descendant || childMatches;
+            });
+        }
+        else if (isJsonObject(current)) {
+            Object.entries(current).forEach(([childKey, childValue]) => {
+                const childMatches = visit(childValue, [...currentPath, childKey], childKey);
+                descendant = descendant || childMatches;
+            });
+        }
+        else {
+            self = self || valueToSearchString(current).includes(query);
+        }
+        const any = self || descendant;
+        if (any) {
+            matches.set(nodeId, { self, descendant });
+        }
+        return any;
+    };
+    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}`)));
+}
+function useClipboardStatus() {
+    const [copiedId, setCopiedId] = useState(null);
+    useEffect(() => {
+        if (!copiedId)
+            return;
+        const timer = window.setTimeout(() => setCopiedId(null), 1400);
+        return () => window.clearTimeout(timer);
+    }, [copiedId]);
+    return { copiedId, setCopiedId };
+}
+function isJsonValue(value) {
+    if (value === null)
+        return true;
+    if (Array.isArray(value))
+        return value.every(isJsonValue);
+    if (typeof value === 'object') {
+        return Object.values(value).every(isJsonValue);
+    }
+    return typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean';
+}
+export function JsonViewer({ value, defaultExpandedDepth = 2, expandAll = false, helperText, searchPlaceholder = 'Søg i nøgler, stier og værdier', emptySearchText = 'Ingen matchende noder fundet.', className, }) {
+    const [query, setQuery] = useState('');
+    const [globalExpandMode, setGlobalExpandMode] = useState(expandAll ? 'expanded' : 'default');
+    const normalizedQuery = normalizeSearch(query);
+    const inputId = useId();
+    const { copiedId, setCopiedId } = useClipboardStatus();
+    const safeValue = useMemo(() => {
+        if (isJsonValue(value))
+            return value;
+        return {
+            unsupported: {
+                besked: 'Den angivne værdi kan ikke vises som JSON',
+                modtagetType: typeof value,
+            },
+        };
+    }, [value]);
+    const matches = useMemo(() => (normalizedQuery ? collectSearchMatches(safeValue, normalizedQuery) : new Map()), [normalizedQuery, safeValue]);
+    const hasResults = normalizedQuery ? matches.size > 0 : true;
+    const handleCopy = async (nodeId, rawValue) => {
+        try {
+            await navigator.clipboard.writeText(rawValue);
+            setCopiedId(nodeId);
+        }
+        catch {
+            setCopiedId(null);
+        }
+    };
+    return (_jsxs("section", { className: [styles.viewer, className].filter(Boolean).join(' '), children: [_jsxs("div", { className: styles.toolbar, children: [_jsxs("div", { className: styles.toolbarTop, children: [_jsxs("label", { htmlFor: inputId, className: styles.searchField, children: [_jsx(Search, { className: styles.searchIcon, "aria-hidden": "true" }), _jsx("input", { id: inputId, type: "search", value: query, onChange: event => setQuery(event.target.value), placeholder: searchPlaceholder, className: styles.searchInput }), query ? (_jsx("button", { type: "button", className: styles.clearButton, "aria-label": "Ryd s\u00F8gning", onClick: () => setQuery(''), children: _jsx(X, { "aria-hidden": "true" }) })) : null] }), _jsxs("div", { className: styles.actions, children: [_jsx("button", { type: "button", className: styles.toolbarButton, onClick: () => setGlobalExpandMode('expanded'), disabled: Boolean(normalizedQuery), children: "Fold alle ud" }), _jsx("button", { type: "button", className: styles.toolbarButton, onClick: () => setGlobalExpandMode('collapsed'), disabled: Boolean(normalizedQuery), children: "Fold alle sammen" })] })] }), _jsxs("div", { className: styles.metaRow, children: [helperText ? _jsx("span", { className: styles.helperText, children: helperText }) : _jsx("span", {}), _jsx("span", { className: styles.statusText, children: normalizedQuery
+                                    ? `${matches.size} matchende node${matches.size === 1 ? '' : 'r'}`
+                                    : '' })] })] }), _jsx("div", { className: styles.treePane, role: "tree", "aria-label": "JSON-visning", children: hasResults ? (_jsx(JsonNode, { keyName: undefined, path: [], value: safeValue, depth: 0, defaultExpandedDepth: defaultExpandedDepth, query: normalizedQuery, matches: matches, globalExpandMode: globalExpandMode, copiedId: copiedId, onCopy: handleCopy })) : (_jsx("div", { className: styles.emptyState, children: emptySearchText })) })] }));
+}
+function JsonNode({ keyName, path, value, depth, defaultExpandedDepth, query, matches, globalExpandMode, copiedId, onCopy, }) {
+    const nodeId = getNodeId(path);
+    const nodeType = getValueType(value);
+    const match = matches.get(nodeId);
+    const shouldRender = query ? Boolean(match) : true;
+    const forceOpen = query ? Boolean(match === null || match === void 0 ? void 0 : match.descendant) : false;
+    const [isExpanded, setIsExpanded] = useState(() => depth < defaultExpandedDepth);
+    if (!shouldRender)
+        return null;
+    if (nodeType !== 'array' && nodeType !== 'object') {
+        const primitive = value;
+        const valueLabel = formatPrimitive(primitive);
+        const rawValue = getPrimitiveRawValue(primitive);
+        const copied = copiedId === nodeId;
+        return (_jsxs("div", { className: styles.node, style: { ['--json-indent']: depth }, children: [_jsx("div", { className: styles.row, "data-match": (match === null || match === void 0 ? void 0 : match.self) || undefined, children: _jsxs("button", { type: "button", className: styles.valueButton, onClick: () => onCopy(nodeId, rawValue), title: copied ? 'Kopieret' : 'Kopiér værdi', children: [_jsxs("span", { className: styles.rowLabel, children: [keyName !== undefined ? (_jsxs("span", { className: styles.keyChunk, children: [_jsx("span", { className: styles.key, children: _jsx(HighlightText, { text: keyName, query: query }) }), _jsx("span", { className: styles.punctuation, children: ":" })] })) : (_jsx("span", { className: styles.rootLabel, children: "$" })), _jsx("span", { className: [styles.value, styles[`value${capitalize(nodeType)}`]].join(' '), children: _jsx(HighlightText, { text: valueLabel, query: query }) })] }), _jsxs("span", { className: styles.copyState, "aria-live": "polite", children: [copied ? _jsx(Check, { "aria-hidden": "true" }) : _jsx(Copy, { "aria-hidden": "true" }), _jsx("span", { children: copied ? 'Kopieret' : 'Kopiér' })] })] }) }), query && !(match === null || match === void 0 ? void 0 : match.self) ? (_jsx("div", { className: styles.pathHint, children: _jsx(HighlightText, { text: getPathLabel(path), query: query }) })) : null] }));
+    }
+    const entries = isJsonArray(value)
+        ? value.map((item, index) => [String(index), item])
+        : isJsonObject(value)
+            ? Object.entries(value)
+            : [];
+    const summary = getSummary(value);
+    const expanded = query || forceOpen
+        ? true
+        : globalExpandMode === 'expanded'
+            ? true
+            : globalExpandMode === 'collapsed'
+                ? false
+                : isExpanded;
+    return (_jsxs("div", { className: styles.node, style: { ['--json-indent']: depth }, children: [_jsx("div", { className: styles.row, "data-match": (match === null || match === void 0 ? void 0 : match.self) || undefined, children: _jsxs("button", { type: "button", className: styles.toggle, onClick: () => setIsExpanded(current => !current), "aria-expanded": expanded, children: [expanded ? _jsx(ChevronDown, { "aria-hidden": "true" }) : _jsx(ChevronRight, { "aria-hidden": "true" }), _jsxs("span", { className: styles.rowLabel, children: [keyName !== undefined ? (_jsxs("span", { className: styles.keyChunk, children: [_jsx("span", { className: styles.key, children: _jsx(HighlightText, { text: keyName, query: query }) }), _jsx("span", { className: styles.punctuation, children: ":" })] })) : (_jsx("span", { className: styles.rootLabel, children: "$" })), _jsx("span", { className: styles.bracket, children: isJsonArray(value) ? '[' : '{' }), _jsx("span", { className: styles.summary, children: _jsx(HighlightText, { text: summary, query: query }) }), _jsx("span", { className: styles.bracket, children: isJsonArray(value) ? ']' : '}' })] })] }) }), query && !(match === null || match === void 0 ? void 0 : match.self) ? (_jsx("div", { className: styles.pathHint, children: _jsx(HighlightText, { text: getPathLabel(path), query: query }) })) : null, expanded ? (_jsx("div", { className: styles.children, role: depth === 0 ? 'group' : undefined, children: entries.map(([childKey, childValue]) => (_jsx(JsonNode, { keyName: isJsonArray(value) ? `[${childKey}]` : childKey, path: [...path, childKey], value: childValue, depth: depth + 1, defaultExpandedDepth: defaultExpandedDepth, query: query, matches: matches, globalExpandMode: globalExpandMode, copiedId: copiedId, onCopy: onCopy }, `${nodeId}-${childKey}`))) })) : null] }));
+}
+function capitalize(value) {
+    return value.charAt(0).toUpperCase() + value.slice(1);
+}

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

@@ -0,0 +1,359 @@
+.viewer {
+  --json-pane-bg:
+    linear-gradient(
+      180deg,
+      color-mix(in oklab, var(--color-bg-inverse) 96%, white 4%),
+      color-mix(in oklab, var(--color-bg-inverse) 92%, black 8%)
+    );
+  --json-pane-border: color-mix(in oklab, var(--color-fg-inverse) 14%, transparent);
+  --json-pane-border-strong: color-mix(in oklab, var(--color-fg-inverse) 24%, transparent);
+  --json-pane-text: var(--color-fg-inverse);
+  --json-pane-muted: color-mix(in oklab, var(--color-fg-inverse) 64%, transparent);
+  --json-pane-subtle: color-mix(in oklab, var(--color-fg-inverse) 44%, transparent);
+  --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%);
+  --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%);
+  --json-pane-boolean: color-mix(in oklab, var(--dbc-pink-500) 74%, white 26%);
+  --json-pane-null: color-mix(in oklab, var(--color-fg-inverse) 54%, transparent);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  background: var(--json-pane-bg);
+  color: var(--json-pane-text);
+  border: var(--border-width-thin) solid var(--json-pane-border);
+  border-radius: var(--border-radius-xl);
+  box-shadow: var(--shadow-lg);
+  padding: var(--spacing-sm);
+  font-family: var(--font-family-mono);
+}
+
+.toolbar {
+  display: grid;
+  gap: var(--spacing-xs);
+}
+
+.toolbarTop {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: var(--spacing-sm);
+  align-items: center;
+}
+
+.searchField {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--spacing-xs);
+  min-height: var(--component-size-md);
+  padding-inline: var(--spacing-sm);
+  border: var(--border-width-thin) solid var(--json-pane-border);
+  border-radius: var(--border-radius-lg);
+  background: color-mix(in oklab, var(--color-bg-inverse) 85%, var(--color-bg-surface) 15%);
+}
+
+.searchField:focus-within {
+  border-color: var(--json-pane-border-strong);
+  box-shadow: var(--focus-ring);
+}
+
+.searchIcon,
+.clearButton svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+  color: var(--json-pane-subtle);
+}
+
+.searchInput {
+  inline-size: 100%;
+  min-inline-size: 0;
+  min-block-size: var(--component-size-md);
+  background: transparent;
+  border: 0;
+  color: var(--json-pane-text);
+  font: inherit;
+  outline: none;
+}
+
+.searchInput::placeholder {
+  color: var(--json-pane-subtle);
+}
+
+.clearButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--component-size-xs);
+  block-size: var(--component-size-xs);
+  border: 0;
+  border-radius: var(--border-radius-round);
+  background: transparent;
+  cursor: pointer;
+}
+
+.clearButton:hover {
+  background: var(--json-pane-hover);
+}
+
+.metaRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-md);
+  font-size: var(--font-size-xs);
+  color: var(--json-pane-muted);
+}
+
+.actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.toolbarButton {
+  min-block-size: var(--component-size-sm);
+  padding-inline: var(--spacing-sm);
+  border: var(--border-width-thin) solid var(--json-pane-border);
+  border-radius: var(--border-radius-md);
+  background: color-mix(in oklab, var(--color-bg-inverse) 82%, var(--color-bg-surface) 18%);
+  color: var(--json-pane-text);
+  font: inherit;
+  cursor: pointer;
+}
+
+.toolbarButton:hover:not(:disabled) {
+  background: var(--json-pane-hover);
+}
+
+.toolbarButton:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.toolbarButton:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
+.helperText,
+.statusText {
+  min-inline-size: 0;
+}
+
+.treePane {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2xs);
+  border: var(--border-width-thin) solid var(--json-pane-border);
+  border-radius: var(--border-radius-lg);
+  background:
+    linear-gradient(
+      180deg,
+      color-mix(in oklab, var(--color-bg-inverse) 89%, white 11%),
+      color-mix(in oklab, var(--color-bg-inverse) 94%, black 6%)
+    );
+  padding: var(--spacing-sm);
+  overflow: auto;
+}
+
+.node {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.row,
+.pathHint {
+  padding-left: calc(var(--json-indent) * var(--spacing-md));
+}
+
+.row {
+  display: flex;
+  align-items: flex-start;
+  min-inline-size: 0;
+  border-radius: var(--border-radius-md);
+}
+
+.row[data-match='true'] {
+  background: linear-gradient(90deg, var(--json-pane-selected), transparent 70%);
+}
+
+.toggle,
+.valueButton {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  min-inline-size: 0;
+  inline-size: 100%;
+  padding-block: 6px;
+  padding-inline: var(--spacing-xs);
+  background: transparent;
+  border: 0;
+  border-radius: var(--border-radius-md);
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  font: inherit;
+}
+
+.toggle {
+  justify-content: flex-start;
+}
+
+.valueButton {
+  justify-content: flex-start;
+}
+
+.toggle:hover,
+.valueButton:hover {
+  background: var(--json-pane-hover);
+}
+
+.toggle:focus-visible,
+.valueButton:focus-visible,
+.clearButton:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.toggle svg,
+.copyState svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+  flex: 0 0 auto;
+}
+
+.rowLabel {
+  display: inline-flex;
+  align-items: baseline;
+  flex-wrap: nowrap;
+  gap: 6px;
+  min-inline-size: 0;
+  flex: 1 1 auto;
+}
+
+.keyChunk {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 4px;
+  flex: 0 0 auto;
+}
+
+.rootLabel,
+.key {
+  color: var(--json-pane-key);
+  font-weight: var(--font-weight-medium);
+}
+
+.punctuation,
+.bracket {
+  color: var(--json-pane-subtle);
+}
+
+.summary,
+.pathHint {
+  color: var(--json-pane-muted);
+}
+
+.children {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  position: relative;
+}
+
+.children::before {
+  content: '';
+  position: absolute;
+  left: calc(var(--spacing-md) - 2px);
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: color-mix(in oklab, var(--color-fg-inverse) 10%, transparent);
+  pointer-events: none;
+}
+
+.value {
+  min-inline-size: 0;
+  flex: 0 1 auto;
+  word-break: break-word;
+}
+
+.valueString {
+  color: var(--json-pane-string);
+}
+
+.valueNumber {
+  color: var(--json-pane-number);
+}
+
+.valueBoolean {
+  color: var(--json-pane-boolean);
+}
+
+.valueNull {
+  color: var(--json-pane-null);
+}
+
+.copyState {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
+  margin-left: auto;
+  color: var(--json-pane-subtle);
+  font-size: var(--font-size-xs);
+  white-space: nowrap;
+  opacity: 0;
+  transform: translateX(4px);
+  transition:
+    opacity var(--transition-fast) var(--ease-standard),
+    transform var(--transition-fast) var(--ease-standard);
+}
+
+.valueButton:hover .copyState,
+.valueButton:focus-visible .copyState,
+.valueButton:focus-within .copyState {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.valueButton[title='Kopieret'] .copyState {
+  opacity: 1;
+  transform: translateX(0);
+  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) 78%, transparent);
+  border-radius: var(--border-radius-sm);
+  padding-inline: 0.1em;
+}
+
+.emptyState {
+  padding: var(--spacing-md);
+  color: var(--json-pane-muted);
+  text-align: center;
+}
+
+@media (max-width: 640px) {
+  .toolbarTop {
+    grid-template-columns: 1fr;
+  }
+
+  .actions {
+    flex-wrap: wrap;
+  }
+
+  .metaRow {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .copyState span {
+    display: none;
+  }
+}

package/dist/components/menu/Menu.d.ts

@@ -11,6 +11,9 @@ export interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
     gap?: boolean;
 }
 export type MenuSeparatorProps = React.LiHTMLAttributes<HTMLLIElement>;
+export interface MenuHeaderProps extends React.LiHTMLAttributes<HTMLLIElement> {
+    children: React.ReactNode;
+}
 export interface MenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
     children: React.ReactNode;
     active?: boolean;
@@ -46,4 +49,5 @@ export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.Ref
     CheckItem: React.ForwardRefExoticComponent<MenuCheckItemProps & React.RefAttributes<HTMLLIElement>>;
     RadioItem: React.ForwardRefExoticComponent<MenuRadioItemProps & React.RefAttributes<HTMLLIElement>>;
     Separator: React.ForwardRefExoticComponent<MenuSeparatorProps & React.RefAttributes<HTMLLIElement>>;
+    Header: React.ForwardRefExoticComponent<MenuHeaderProps & React.RefAttributes<HTMLLIElement>>;
 };

package/dist/components/menu/Menu.js

@@ -137,9 +137,12 @@ const MenuRadioItem = React.forwardRef(({ name, value, checked, disabled, label,
 MenuRadioItem.displayName = 'Menu.RadioItem';
 const MenuSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx("li", { ref: ref, role: "separator", className: [styles.separator, className].filter(Boolean).join(' '), ...props })));
 MenuSeparator.displayName = 'Menu.Separator';
+const MenuHeader = React.forwardRef(({ className, children, ...props }, ref) => (_jsx("li", { ref: ref, role: "presentation", "aria-hidden": "true", className: [styles.header, className].filter(Boolean).join(' '), ...props, children: children })));
+MenuHeader.displayName = 'Menu.Header';
 export const Menu = Object.assign(MenuBase, {
     Item: MenuItem,
     CheckItem: MenuCheckItem,
     RadioItem: MenuRadioItem,
     Separator: MenuSeparator,
+    Header: MenuHeader,
 });

package/dist/components/menu/Menu.module.css

@@ -174,6 +174,19 @@
   border-radius: 999px;
 }
 
+.header {
+  padding-block: var(--spacing-xs);
+  padding-inline: var(--spacing-md);
+  color: var(--color-fg-muted);
+  font-size: var(--font-size-xs);
+  font-weight: 500;
+  line-height: var(--line-height-normal);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  cursor: default;
+  user-select: none;
+}
+
 /* Gap between items */
 .gap {
   gap: var(--spacing-xs);

package/dist/components/nav-bar/NavBar.d.ts

@@ -6,6 +6,7 @@ type NavBarBase = {
     icon?: ReactNode;
     enabled?: boolean;
     tags?: string[];
+    truncateLabel?: boolean;
 };
 /** Simple clickable item */
 export type NavBarLinkItem = NavBarBase & {

package/dist/components/overlay/tooltip/Tooltip.module.css

@@ -21,7 +21,6 @@
   position: fixed;
   z-index: var(--z-tooltip);
   pointer-events: none;
-
   background: var(--color-fg-default);
   color: var(--color-fg-on-strong);
   font-size: var(--font-size-xs);
@@ -30,7 +29,6 @@
   border-radius: var(--border-radius-default);
 
   /*
-    ✅ Width behavior:
     - Don't let it run wild horizontally
     - But don't clip: allow wrap
     - Keep some relation to viewport

package/dist/components/page-layout/PageLayout.module.css

@@ -43,6 +43,18 @@
   -webkit-overflow-scrolling: touch;
 }
 
+/* In document-scrolling vertical layouts, keep the sidebar pinned to the viewport
+   and let it manage its own scroll independently of body scrolling. */
+.documentScrolling.vertical .sidebar {
+  position: sticky;
+  top: 0;
+  align-self: start;
+  block-size: 100vh;
+  block-size: 100dvh;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
 /* In horizontal orientation, sidebar becomes a top block if used */
 .horizontal .sidebar {
   grid-column: 1 / -1;

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

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

package/dist/components/sidebar/Sidebar.js

@@ -1,7 +1,6 @@
-'use client';
 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, }) {
-    return (_jsx(SidebarProvider, { items: items, children: _jsx(SidebarContainer, { productLogo: productLogo, activeLink: activeLink, version: version, hideSearch: hideSearch }) }));
+export function Sidebar({ items, productLogo, activeLink, version, hideSearch, footer, resizable, defaultWidth, minWidth, storageKey, }) {
+    return (_jsx(SidebarProvider, { items: items, children: _jsx(SidebarContainer, { productLogo: productLogo, activeLink: activeLink, version: version, hideSearch: hideSearch, footer: footer, resizable: resizable, defaultWidth: defaultWidth, minWidth: minWidth, storageKey: storageKey }) }));
 }

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

@@ -4,6 +4,7 @@ interface SidebarItemProps {
     label: string;
     icon: React.ReactNode;
     href?: string;
+    truncateLabel?: boolean;
 }
-export declare function SidebarItem({ component: Component, label, icon, href, }: SidebarItemProps): React.ReactNode;
+export declare function SidebarItem({ component: Component, label, icon, href, truncateLabel, }: SidebarItemProps): React.ReactNode;
 export {};

package/dist/components/sidebar/components/SidebarItem.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SidebarItemContent } from './sidebar-item-content/SidebarItemContent';
-export function SidebarItem({ component: Component, label, icon, href, }) {
+export function SidebarItem({ component: Component, label, icon, href, truncateLabel, }) {
     if (!Component) {
         return null;
     }
-    return (_jsx(Component, { children: _jsx(SidebarItemContent, { icon: icon, label: label, href: href }) }));
+    return (_jsx(Component, { children: _jsx(SidebarItemContent, { icon: icon, label: label, href: href, truncateLabel: truncateLabel }) }));
 }

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.d.ts

@@ -6,6 +6,7 @@ type ExpandableSidebarItemProps = {
     component: React.ElementType;
     icon: React.ReactNode;
     href: string;
+    truncateLabel?: boolean;
 };
-export declare function ExpandableSidebarItem({ items, label, icon, component: Component, href, }: ExpandableSidebarItemProps): React.ReactNode;
+export declare function ExpandableSidebarItem({ items, label, icon, component: Component, href, truncateLabel, }: ExpandableSidebarItemProps): React.ReactNode;
 export {};

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.js

@@ -10,7 +10,7 @@ import { SidebarItemContent } from '../sidebar-item-content/SidebarItemContent';
 import { SidebarItem } from '../SidebarItem';
 const isGroup = (item) => item.type === 'group';
 const isExpandable = (item) => item.type === 'expandable';
-export function ExpandableSidebarItem({ items, label, icon, component: Component, href, }) {
+export function ExpandableSidebarItem({ items, label, icon, component: Component, href, truncateLabel, }) {
     const { defaultExpanded, resetExpandAll, isSidebarCollapsed, handleSidebarCollapseChange, expandItem, collapseItem, isExpanded, } = useSidebar();
     // Local-only state for animation coordination
     const [closing, setClosing] = useState(false);
@@ -60,7 +60,7 @@ export function ExpandableSidebarItem({ items, label, icon, component: Component
         if (isExpandable(item)) {
             return (_jsx(ExpandableChild, { items: (_b = item.children) !== null && _b !== void 0 ? _b : [], label: item.label, icon: item.icon, href: item.href, component: item.component }, key));
         }
-        return (_jsx(SidebarItem, { component: item.component, label: item.label, icon: item.icon, href: item.href }, key));
+        return (_jsx(SidebarItem, { component: item.component, label: item.label, icon: item.icon, href: item.href, truncateLabel: item.truncateLabel }, key));
     };
-    return (_jsxs("div", { className: `${styles.container}`, children: [_jsx(Component, { onClick: () => toggleAccordion(undefined, true), children: _jsx(SidebarItemContent, { headerStyle: expanded, icon: icon, label: label, href: href, disableActiveStyles: expanded, suffixIcon: isSidebarCollapsed ? null : (_jsx(Button, { variant: "outlined", onClick: toggleAccordion, children: _jsx(ChevronDown, { className: `${styles.chevron} ${expanded ? styles.chevronExpanded : ''}` }) })) }) }), expanded && !isSidebarCollapsed && (_jsx("div", { onAnimationEnd: handleAnimationEnd, className: `${styles.childrenContainer} ${closing ? 'animate--collapse' : ''} ${expanded ? 'animate--expand' : 'visually-hidden'}`, children: items.map((item, idx) => renderNavItem(item, `${href}-${idx}`)) }))] }));
+    return (_jsxs("div", { className: `${styles.container}`, children: [_jsx(Component, { onClick: () => toggleAccordion(undefined, true), children: _jsx(SidebarItemContent, { headerStyle: expanded, icon: icon, label: label, href: href, disableActiveStyles: expanded, truncateLabel: truncateLabel, suffixIcon: isSidebarCollapsed ? null : (_jsx(Button, { variant: "outlined", onClick: toggleAccordion, children: _jsx(ChevronDown, { className: `${styles.chevron} ${expanded ? styles.chevronExpanded : ''}` }) })) }) }), expanded && !isSidebarCollapsed && (_jsx("div", { onAnimationEnd: handleAnimationEnd, className: `${styles.childrenContainer} ${closing ? 'animate--collapse' : ''} ${expanded ? 'animate--expand' : 'visually-hidden'}`, children: items.map((item, idx) => renderNavItem(item, `${href}-${idx}`)) }))] }));
 }

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

@@ -1,4 +1,4 @@
-import type { ReactNode, JSX } from 'react';
+import type { JSX, ReactNode } from 'react';
 interface SidebarContainerProps {
     logo?: ReactNode;
     productName?: string;
@@ -6,6 +6,11 @@ interface SidebarContainerProps {
     activeLink?: string;
     version?: string | number;
     hideSearch?: boolean;
+    footer?: ReactNode;
+    resizable?: boolean;
+    defaultWidth?: number;
+    minWidth?: number;
+    storageKey?: string;
 }
-export declare function SidebarContainer({ logo, productLogo, activeLink, version, hideSearch, }: SidebarContainerProps): JSX.Element;
+export declare function SidebarContainer({ logo, productLogo, activeLink, version, hideSearch, footer, resizable, defaultWidth, minWidth, storageKey, }: SidebarContainerProps): JSX.Element;
 export {};

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

@@ -1,12 +1,153 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronLeft } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Logo } from '../../../../assets/logo';
 import { Button } from '../../../../components/button/Button';
 import { SidebarItems } from '../../../../components/sidebar/components/sidebar-items/SidebarItems';
 import SidenavFiltering from '../../../../components/sidebar/components/sidenav-filteirng/SidenavFiltering';
 import { useSidebar } from '../../../../components/sidebar/providers/SidebarProvider';
 import styles from './SidebarContainer.module.css';
-export function SidebarContainer({ logo, productLogo, activeLink, version, hideSearch, }) {
+function clamp(n, min, max) {
+    return Math.max(min, Math.min(max, n));
+}
+function readStoredWidth(key) {
+    try {
+        const raw = localStorage.getItem(key);
+        if (!raw)
+            return null;
+        const num = Number(raw);
+        return Number.isFinite(num) ? num : null;
+    }
+    catch {
+        return null;
+    }
+}
+function writeStoredWidth(key, value) {
+    try {
+        localStorage.setItem(key, String(Math.round(value)));
+    }
+    catch {
+        // ignore
+    }
+}
+function removeStoredWidth(key) {
+    try {
+        localStorage.removeItem(key);
+    }
+    catch {
+        // ignore
+    }
+}
+export function SidebarContainer({ logo, productLogo, activeLink, version, hideSearch, footer, resizable, defaultWidth = 240, minWidth = 160, storageKey, }) {
     const { isSidebarCollapsed, handleSidebarCollapseChange } = useSidebar();
-    return (_jsxs("div", { className: `${styles.container} ${isSidebarCollapsed ? styles.collapsed : ''}`, 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, {}) })), _jsx("div", { className: `${styles.links} hideScrollBar`, children: _jsx(SidebarItems, { activeLink: activeLink }) })] }), _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 })] })] }));
+    // Always start from defaultWidth so server and client render identical HTML.
+    // localStorage is read in a useEffect after hydration to avoid SSR mismatch.
+    const [sidebarWidth, setSidebarWidth] = useState(defaultWidth);
+    const [manualWidth, setManualWidth] = useState(null);
+    const [isResizing, setIsResizing] = useState(false);
+    const [ariaMaxWidth, setAriaMaxWidth] = useState(undefined);
+    const containerRef = useRef(null);
+    const draggingRef = useRef(false);
+    const pointerIdRef = useRef(null);
+    const startXRef = useRef(0);
+    const startWidthRef = useRef(0);
+    const maxWidthRef = useRef(Infinity);
+    // Use the viewport width as the ceiling — avoids the circular-dependency
+    // that occurs when the sidebar lives in an `auto`-width grid column whose
+    // size is determined by the sidebar itself (e.g. PageLayout vertical).
+    const getMaxWidth = useCallback(() => {
+        const viewportWidth = typeof window !== 'undefined'
+            ? window.innerWidth || document.documentElement.clientWidth
+            : Infinity;
+        return Math.max(minWidth, viewportWidth - minWidth);
+    }, [minWidth]);
+    // Read stored width after hydration — never during render to avoid SSR mismatch.
+    useEffect(() => {
+        if (!storageKey)
+            return;
+        const stored = readStoredWidth(storageKey);
+        if (stored === null)
+            return;
+        setManualWidth(stored);
+        setSidebarWidth(stored);
+    }, [storageKey]);
+    useEffect(() => {
+        if (!storageKey)
+            return;
+        if (manualWidth === null) {
+            removeStoredWidth(storageKey);
+            return;
+        }
+        writeStoredWidth(storageKey, manualWidth);
+    }, [manualWidth, storageKey]);
+    useEffect(() => {
+        setAriaMaxWidth(getMaxWidth());
+    }, [getMaxWidth]);
+    useEffect(() => {
+        return () => {
+            document.body.style.cursor = '';
+            document.body.style.userSelect = '';
+        };
+    }, []);
+    const updateWidth = useCallback((nextWidth) => {
+        setManualWidth(nextWidth);
+        setSidebarWidth(nextWidth);
+    }, []);
+    const onResizePointerDown = useCallback((e) => {
+        const maxWidth = getMaxWidth();
+        if (maxWidth === null)
+            return;
+        e.currentTarget.setPointerCapture(e.pointerId);
+        maxWidthRef.current = maxWidth;
+        draggingRef.current = true;
+        pointerIdRef.current = e.pointerId;
+        startXRef.current = e.clientX;
+        startWidthRef.current = sidebarWidth;
+        setIsResizing(true);
+        document.body.style.userSelect = 'none';
+        document.body.style.cursor = 'col-resize';
+    }, [getMaxWidth, sidebarWidth]);
+    const onResizePointerMove = useCallback((e) => {
+        if (!draggingRef.current)
+            return;
+        if (pointerIdRef.current !== null && e.pointerId !== pointerIdRef.current)
+            return;
+        const next = startWidthRef.current + (e.clientX - startXRef.current);
+        updateWidth(clamp(next, minWidth, maxWidthRef.current));
+    }, [minWidth, updateWidth]);
+    const endResizeDrag = useCallback(() => {
+        if (!draggingRef.current)
+            return;
+        draggingRef.current = false;
+        pointerIdRef.current = null;
+        setIsResizing(false);
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+    }, []);
+    const resetWidth = useCallback(() => {
+        setManualWidth(null);
+        setSidebarWidth(clamp(defaultWidth, minWidth, getMaxWidth()));
+    }, [defaultWidth, getMaxWidth, minWidth]);
+    const onKeyDown = useCallback((e) => {
+        const maxWidth = getMaxWidth();
+        const step = e.shiftKey ? 32 : 8;
+        let next = null;
+        if (e.key === 'ArrowLeft')
+            next = sidebarWidth - step;
+        if (e.key === 'ArrowRight')
+            next = sidebarWidth + step;
+        if (e.key === 'Home')
+            next = minWidth;
+        if (e.key === 'End')
+            next = maxWidth;
+        if (next === null)
+            return;
+        e.preventDefault();
+        updateWidth(clamp(next, minWidth, maxWidth));
+    }, [getMaxWidth, minWidth, sidebarWidth, updateWidth]);
+    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, {}) })), _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-container/SidebarContainer.module.css

@@ -1,4 +1,5 @@
 .container {
+  position: relative;
   flex-shrink: 1;
   height: 100%;
   overflow: auto;
@@ -14,6 +15,10 @@
     inline-size var(--transition-fast) var(--ease-standard);
 }
 
+.container.resizing {
+  transition: none;
+}
+
 /* Collapsed state */
 .container.collapsed {
   width: var(--component-size-lg);
@@ -37,10 +42,12 @@
 /* HEADER (product + collapse) */
 .header {
   flex: 0 0 auto;
-  border-bottom: 1px solid var(--color-border-default);
-  padding: 0 var(--spacing-sm);
+  box-sizing: border-box;
+  box-shadow: 0 1px 0 var(--color-border-default);
+  padding-inline: var(--spacing-xs);
   min-block-size: 60px;
   display: flex;
+  align-items: center;
   justify-content: space-between;
 }
 
@@ -57,15 +64,15 @@
   display: flex;
   align-items: center;
   max-inline-size: 100%;
+  block-size: 25px;
   min-width: 0;
 }
 
 /* Keep product logo visible in expanded state */
 .productLogo img,
 .productLogo svg {
-  inline-size: 50px;
-  max-inline-size: 100%;
-  block-size: auto;
+  block-size: 100%;
+  inline-size: 100%;
 }
 
 /* Collapse button */
@@ -131,6 +138,61 @@
   padding: 0;
 }
 
+/* RESIZE HANDLE */
+.resizeHandle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 8px;
+  cursor: col-resize;
+  z-index: 1;
+  user-select: none;
+  touch-action: none;
+  outline: none;
+}
+
+.resizeHandle::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: var(--border-width-thin);
+  background-color: var(--color-border-subtle);
+  opacity: 0;
+  transition:
+    opacity var(--transition-fast) var(--ease-standard),
+    background-color var(--transition-fast) var(--ease-standard);
+}
+
+.resizeHandle:hover::after,
+.resizeHandle:active::after {
+  opacity: 1;
+  background-color: var(--color-border-strong);
+}
+
+.resizeHandle:active::after {
+  background-color: var(--color-brand);
+}
+
+.resizeHandle:focus-visible {
+  box-shadow: var(--focus-ring);
+}
+
+.container.collapsed .resizeHandle {
+  display: none;
+}
+
+/* CUSTOM FOOTER SLOT */
+.footerSlot {
+  flex: 0 0 auto;
+}
+
+.container:not(.collapsed) .footerSlot {
+  padding-inline: var(--spacing-xs);
+}
+
 /* FOOTER (company logo) */
 .footer {
   flex: 0 0 auto;

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.d.ts

@@ -7,5 +7,6 @@ export interface SidebarItemContentProps {
     href?: string;
     disableActiveStyles?: boolean;
     headerStyle?: boolean;
+    truncateLabel?: boolean;
 }
-export declare function SidebarItemContent({ icon, label, suffixIcon, href, disableActiveStyles, headerStyle, }: SidebarItemContentProps): JSX.Element;
+export declare function SidebarItemContent({ icon, label, suffixIcon, href, disableActiveStyles, headerStyle, truncateLabel, }: SidebarItemContentProps): JSX.Element;

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

@@ -1,7 +1,8 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './SidebarItemContent.module.css';
 import { useSidebar } from '../../providers/SidebarProvider';
-export function SidebarItemContent({ icon, label, suffixIcon, href, disableActiveStyles = false, headerStyle, }) {
+export function SidebarItemContent({ icon, label, suffixIcon, href, disableActiveStyles = false, headerStyle, truncateLabel = false, }) {
     const { activeLink, isSidebarCollapsed } = useSidebar();
-    return (_jsxs("span", { className: `${styles.container} ${!disableActiveStyles && activeLink === href ? styles.active : ''} ${isSidebarCollapsed ? styles.collapsed : ''} ${headerStyle ? styles.headerStyle : ''}`, children: [_jsxs("span", { children: [_jsx("span", { className: styles.icon, children: icon }), !isSidebarCollapsed && _jsx("span", { className: styles.label, children: label })] }), suffixIcon && !isSidebarCollapsed && _jsx("span", { className: styles.suffixIcon, children: suffixIcon })] }));
+    return (_jsxs("span", { className: `${styles.container} ${!disableActiveStyles && activeLink === href ? styles.active : ''} ${isSidebarCollapsed ? styles.collapsed : ''} ${headerStyle ? styles.headerStyle : ''}`, children: [_jsxs("span", { children: [_jsx("span", { className: styles.icon, 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 })] }));
 }

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

@@ -41,6 +41,7 @@
   display: flex;
   align-items: center;
   gap: var(--spacing-sm);
+  min-inline-size: 0;
 }
 
 .container:not(.active):hover {
@@ -83,3 +84,13 @@
   letter-spacing: 0.04em;
   transition: 0.15s ease-in-out;
 }
+
+.label {
+  min-inline-size: 0;
+}
+
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/components/sidebar/components/sidebar-items/SidebarItems.js

@@ -16,11 +16,11 @@ export function SidebarItems({ activeLink }) {
             return isSidebarCollapsed ? ((_a = item.children) === null || _a === void 0 ? void 0 : _a.map((child, idx) => renderItem(child, `${key}-c${idx}`))) : (_jsxs("div", { className: styles.group, children: [_jsx("div", { className: styles.groupLabel, children: item.label }), (_b = item.children) === null || _b === void 0 ? void 0 : _b.map((child, idx) => renderItem(child, `${key}-c${idx}`))] }, key));
         }
         if (item.type === 'expandable') {
-            const { component: Component, label, icon, children, href } = item;
-            return (_jsx(ExpandableSidebarItem, { items: children, label: label, icon: icon, href: href, component: Component }, key));
+            const { component: Component, label, icon, children, href, truncateLabel } = item;
+            return (_jsx(ExpandableSidebarItem, { items: children, label: label, icon: icon, href: href, truncateLabel: truncateLabel, component: Component }, key));
         }
-        const { component: Component, label, icon, href } = item;
-        return _jsx(SidebarItem, { component: Component, label: label, icon: icon, href: href }, key);
+        const { component: Component, label, icon, href, truncateLabel } = item;
+        return (_jsx(SidebarItem, { component: Component, label: label, icon: icon, href: href, truncateLabel: truncateLabel }, key));
     };
     return filteredItems === null || filteredItems === void 0 ? void 0 : filteredItems.map((item, idx) => renderItem(item, `nav-${idx}-${item.label}`));
 }

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './components/button/Button';
+export * from './components/button-select/ButtonSelect';
 export * from './components/nav-bar/NavBar';
 export * from './components/avatar/Avatar';
 export * from './components/popover/Popover';
@@ -45,6 +46,7 @@ export * from './components/split-pane/SplitPane';
 export * from './components/pagination/Pagination';
 export * from './components/meta-bar/MetaBar';
 export * from './components/code-block/CodeBlock';
+export * from './components/json-viewer/JsonViewer';
 export * from './hooks/useTimeDuration';
 export * from './hooks/useSorting';
 export * from './hooks/usePagination';

package/dist/index.js

@@ -1,4 +1,5 @@
 export * from './components/button/Button';
+export * from './components/button-select/ButtonSelect';
 export * from './components/nav-bar/NavBar';
 export * from './components/avatar/Avatar';
 export * from './components/popover/Popover';
@@ -45,6 +46,7 @@ export * from './components/split-pane/SplitPane';
 export * from './components/pagination/Pagination';
 export * from './components/meta-bar/MetaBar';
 export * from './components/code-block/CodeBlock';
+export * from './components/json-viewer/JsonViewer';
 export * from './hooks/useTimeDuration';
 export * from './hooks/useSorting';
 export * from './hooks/usePagination';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.66",
+  "version": "0.0.68",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",
@@ -46,7 +46,7 @@
     "build": "npm run clean && npm run build:code && npm run postbuild",
     "build:code": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
     "dev": "tsc -p tsconfig.build.json --watch",
-    "test": "jest",
+    "test": "vitest run",
     "format": "prettier . --write",
     "format:fix": "prettier . --write",
     "lint": "eslint \"src/**/*.{ts,tsx}\" --max-warnings=0",
@@ -57,7 +57,7 @@
     "version-packages": "changeset version",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "pack:local": "rimraf ./*.tgz && npm run build && npm pack",
-    "postbuild": "cpy \"src/**/*.css\" dist --parents && cpy \"src/styles/styles.css\" dist && cpy \"src/styles/fonts/**/*\" dist/styles/fonts"
+    "postbuild": "node scripts/postbuild.mjs"
   },
   "peerDependencies": {
     "@tanstack/react-table": "^8.21.3",
@@ -77,11 +77,9 @@
     "@storybook/addon-docs": "^10.3.5",
     "@storybook/react-vite": "^10.3.5",
     "@swc/core": "^1.15.11",
-    "@swc/jest": "^0.2.39",
     "@tanstack/react-table": "^8.20.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@types/jest": "^30.0.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@typescript-eslint/eslint-plugin": "^8.41.0",
@@ -98,8 +96,6 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "globals": "^17.3.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^30.2.0",
-    "jest-environment-jsdom": "^30.2.0",
     "jsdom": "^29.0.2",
     "prettier": "^3.2.4",
     "react": "19.2.4",