@dbcdk/react-components 0.0.30 → 0.0.32

package/dist/components/accordion/Accordion.module.css

@@ -12,7 +12,7 @@
 .sm {
   --acc-trigger-py: var(--spacing-xs);
   --acc-trigger-px: var(--spacing-sm);
-  --acc-content-py: var(--spacing-xs);
+  --acc-content-py: var(--spacing-sm);
 }
 
 .md {

package/dist/components/card/components/CardMeta.d.ts

@@ -10,6 +10,7 @@ export type CardMetaRowProps = {
     className?: string;
     nowrapValue?: boolean;
     labelWidth?: string;
+    boldValue?: boolean;
 };
 export declare function CardMeta({ columns, className, children, ...rest }: CardMetaProps): JSX.Element;
-export declare function CardMetaRow({ label, value, className, nowrapValue, labelWidth, }: CardMetaRowProps): JSX.Element;
+export declare function CardMetaRow({ label, value, className, nowrapValue, labelWidth, boldValue, }: CardMetaRowProps): JSX.Element;

package/dist/components/card/components/CardMeta.js

@@ -15,6 +15,12 @@ export function CardMeta({ columns = 2, className, children, ...rest }) {
     const colsClass = getColsClass(columns);
     return (_jsx("dl", { ...rest, className: [styles.grid, colsClass, className].filter(Boolean).join(' '), children: children }));
 }
-export function CardMetaRow({ label, value, className, nowrapValue, labelWidth, }) {
-    return (_jsxs("div", { className: [styles.row, className].filter(Boolean).join(' '), style: labelWidth ? { ['--label-width']: labelWidth } : undefined, children: [_jsx("dt", { className: styles.label, children: label }), _jsx("dd", { className: [styles.value, nowrapValue ? styles.nowrap : ''].filter(Boolean).join(' '), children: value })] }));
+export function CardMetaRow({ label, value, className, nowrapValue, labelWidth, boldValue = true, }) {
+    return (_jsxs("div", { className: [styles.row, className].filter(Boolean).join(' '), style: labelWidth ? { ['--label-width']: labelWidth } : undefined, children: [_jsx("dt", { className: styles.label, children: label }), _jsx("dd", { className: [
+                    styles.value,
+                    !boldValue ? styles.valueRegular : '',
+                    nowrapValue ? styles.nowrap : '',
+                ]
+                    .filter(Boolean)
+                    .join(' '), children: value })] }));
 }

package/dist/components/card/components/CardMeta.module.css

@@ -46,6 +46,10 @@
   word-break: break-word;
 }
 
+.valueRegular {
+  font-weight: var(--font-weight-default);
+}
+
 .nowrap {
   white-space: nowrap;
 }

package/dist/components/meta-bar/MetaBar.d.ts

@@ -2,6 +2,7 @@ import { type ReactNode, type JSX } from 'react';
 export interface MetaItem {
     label?: ReactNode;
     value: ReactNode;
+    muted?: boolean;
 }
 interface MetaBarProps {
     items: MetaItem[];

package/dist/components/meta-bar/MetaBar.js

@@ -5,5 +5,5 @@ export function MetaBar({ items, separator = '•' }) {
     const visibleItems = items.filter(item => item.value !== null && item.value !== undefined && item.value !== '');
     if (visibleItems.length === 0)
         return null;
-    return (_jsx("div", { className: styles.meta, children: visibleItems.map((item, index) => (_jsxs(Fragment, { children: [_jsxs("span", { children: [item.label && _jsxs("span", { children: [item.label, ": "] }), _jsx("span", { children: item.value })] }), index < visibleItems.length - 1 && (_jsx("span", { "aria-hidden": "true", className: styles.dot, children: separator }))] }, index))) }));
+    return (_jsx("div", { className: styles.meta, children: visibleItems.map((item, index) => (_jsxs(Fragment, { children: [_jsxs("span", { className: item.muted === false ? styles.itemDefault : styles.itemMuted, children: [item.label && _jsxs("span", { children: [item.label, ": "] }), _jsx("span", { children: item.value })] }), index < visibleItems.length - 1 && (_jsx("span", { "aria-hidden": "true", className: styles.dot, children: separator }))] }, index))) }));
 }

package/dist/components/meta-bar/MetaBar.module.css

@@ -1,5 +1,4 @@
 .meta {
-  color: var(--color-fg-subtle);
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -7,6 +6,14 @@
   font-size: var(--font-size-xs);
 }
 
+.itemMuted {
+  color: var(--color-fg-subtle);
+}
+
+.itemDefault {
+  color: var(--color-fg-default);
+}
+
 .dot {
   opacity: 0.6;
 }

package/dist/components/table/Table.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo } from 'react';
+import { useCallback, useId, useMemo } from 'react';
 import { Pagination } from '../../components/pagination/Pagination';
 import { TableEmptyState } from './components/empty-state/EmptyState';
 import { TableBody } from './components/TableBody';
@@ -11,6 +11,7 @@ import styles from './Table.module.css';
 import { buildDefaultGridTemplate, getVisibleColumns } from './table.utils';
 export function Table({ data, dataKey, columns, selectedRows, selectionMode = 'single', allRowsSelected, sortById, sortDirection, loading, emptyConfig, variant = 'primary', size = 'md', viewMode, striped, fillViewport = false, gridTemplateColumns, toolbar, headerExtras, take, skip, totalItemsCount, paginationPlacement = 'bottom', showFirstLast = false, pageSizeOptions, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, onSelectAllRows, onSortChange, onPageChange, ...rest }) {
     const visibleColumns = useMemo(() => getVisibleColumns(columns), [columns]);
+    const selectionInputName = useId();
     const hasSelection = Boolean(selectedRows && onRowSelect);
     const template = useMemo(() => {
         return (gridTemplateColumns !== null && gridTemplateColumns !== void 0 ? gridTemplateColumns : buildDefaultGridTemplate({
@@ -22,7 +23,7 @@ export function Table({ data, dataKey, columns, selectedRows, selectionMode = 's
     const handlePageChange = useCallback((e) => {
         onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(e);
     }, [onPageChange]);
-    const bodyContent = loading && !data.length ? (_jsx(TableLoadingBody, { rows: take !== null && take !== void 0 ? take : 5, columns: visibleColumns, hasSelection: hasSelection, gridStyle: gridStyle })) : (_jsx(TableBody, { data: data, dataKey: dataKey, columns: visibleColumns, gridStyle: gridStyle, striped: striped, selectedRows: selectedRows, hasSelection: hasSelection, viewMode: viewMode, getRowSeverity: getRowSeverity, onRowClick: onRowClick, onRowMouseEnter: onRowMouseEnter, onRowSelect: onRowSelect }));
+    const bodyContent = loading && !data.length ? (_jsx(TableLoadingBody, { rows: take !== null && take !== void 0 ? take : 5, columns: visibleColumns, hasSelection: hasSelection, gridStyle: gridStyle })) : (_jsx(TableBody, { data: data, dataKey: dataKey, columns: visibleColumns, gridStyle: gridStyle, striped: striped, selectedRows: selectedRows, hasSelection: hasSelection, selectionMode: selectionMode, selectionInputName: selectionInputName, viewMode: viewMode, getRowSeverity: getRowSeverity, onRowClick: onRowClick, onRowMouseEnter: onRowMouseEnter, onRowSelect: onRowSelect }));
     const paginationEl = onPageChange && data.length > 0 ? (_jsx("div", { className: cx(styles.paginationSlot, paginationPlacement === 'top' && styles.paginationSlotTop), children: _jsx(Pagination, { itemsCount: totalItemsCount, take: take, skip: skip, onPageChange: handlePageChange, showFirstLast: showFirstLast, pageSizeOptions: pageSizeOptions }) })) : null;
     const tableClassName = cx(styles.tableRoot, styles[variant], styles[size], getRowSeverity && styles.severityTable);
     const tableShell = (_jsx("div", { ...rest, className: tableClassName, role: "table", "aria-rowcount": data.length, children: _jsxs("div", { className: styles.tableContent, children: [_jsx("div", { className: styles.header, role: "rowgroup", children: _jsx(TableHeader, { columns: visibleColumns, gridStyle: gridStyle, hasSelection: hasSelection, selectionMode: selectionMode, allRowsSelected: allRowsSelected, onSelectAllRows: onSelectAllRows, sortById: sortById, sortDirection: sortDirection, onSortChange: onSortChange, headerExtras: headerExtras }) }), _jsx("div", { className: styles.bodyScroll, children: !data.length && !loading ? (_jsx("div", { className: styles.emptyStateSlot, children: _jsx(TableEmptyState, { config: emptyConfig }) })) : (bodyContent) })] }) }));

package/dist/components/table/Table.module.css

@@ -190,11 +190,11 @@
 .cell.selectionCell {
   overflow: visible !important;
   display: flex;
-  align-items: center;
-  justify-content: center;
+  align-items: flex-start;
+  justify-content: flex-start;
   min-width: 0;
-  padding-inline: 0;
-  padding-block: 0;
+  padding-inline: var(--spacing-sm);
+  padding-block: 6px;
   cursor: pointer;
 }
 
@@ -210,16 +210,37 @@
 
 .selectionHitArea {
   display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: 100%;
-  block-size: 100%;
-  min-block-size: var(--component-size-md);
-  padding: 4px;
+  align-items: flex-start;
+  justify-content: flex-start;
+  inline-size: fit-content;
+  block-size: auto;
+  min-block-size: 0;
+  padding: 0;
 }
 
 .sm .selectionHitArea {
-  min-block-size: var(--component-size-sm);
+  min-block-size: 0;
+}
+
+.selectionControlWrap {
+  display: inline-flex;
+  align-items: flex-start;
+}
+
+.selectionControlWrap span {
+  gap: 0;
+}
+
+.selectionControlWrap input[type='radio'] + span {
+  width: 18px;
+  height: 18px;
+  border-width: 1px;
+  border-color: color-mix(in srgb, var(--color-fg-default) 28%, transparent);
+}
+
+.selectionControlWrap input[type='radio'] + span > span {
+  width: 8px;
+  height: 8px;
 }
 
 .clickableRow {

package/dist/components/table/TanstackTable.js

@@ -19,6 +19,8 @@ export function TanstackTable(props) {
     const columnVisibility = React.useMemo(() => buildColumnVisibilityFromVisibleIds(columns, visibleColumnIds), [columns, visibleColumnIds]);
     const [columnFilters, setColumnFilters] = React.useState([]);
     const [columnSizing, setColumnSizing] = React.useState({});
+    const containerRef = React.useRef(null);
+    const [availableWidth, setAvailableWidth] = React.useState(undefined);
     const table = useReactTable({
         data,
         columns: columns,
@@ -72,6 +74,23 @@ export function TanstackTable(props) {
         return _jsx(ColumnResizer, { id: header.column.id, handler: handler });
     }, [table]);
     const hasSelection = Boolean(selectedRows && onRowSelect && dataKey);
+    React.useEffect(() => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        const updateWidth = () => {
+            const next = el.clientWidth;
+            setAvailableWidth(next > 0 ? next : undefined);
+        };
+        updateWidth();
+        if (typeof ResizeObserver === 'undefined') {
+            window.addEventListener('resize', updateWidth);
+            return () => window.removeEventListener('resize', updateWidth);
+        }
+        const observer = new ResizeObserver(() => updateWidth());
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, []);
     const gridTemplateColumns = React.useMemo(() => {
         return buildDistributedGridTemplateColumns({
             table,
@@ -79,7 +98,8 @@ export function TanstackTable(props) {
             hasSelection,
             defaultMinPx: 80,
             columnSizing,
+            availableWidth,
         });
-    }, [table, allowedIds, hasSelection, columnSizing]);
-    return (_jsx(Table, { ...tableProps, onSortChange: handleSortChange, dataKey: dataKey, data: visibleData, columns: columnItems, sortById: sortById, sortDirection: sortDirection, gridTemplateColumns: gridTemplateColumns, headerExtras: headerExtras, selectedRows: selectedRows, onRowSelect: onRowSelect }));
+    }, [table, allowedIds, hasSelection, columnSizing, availableWidth]);
+    return (_jsx("div", { ref: containerRef, style: { width: '100%', minWidth: 0 }, children: _jsx(Table, { ...tableProps, onSortChange: handleSortChange, dataKey: dataKey, data: visibleData, columns: columnItems, sortById: sortById, sortDirection: sortDirection, gridTemplateColumns: gridTemplateColumns, headerExtras: headerExtras, selectedRows: selectedRows, onRowSelect: onRowSelect }) }));
 }

package/dist/components/table/components/TableBody.d.ts

@@ -9,11 +9,13 @@ type Props<T extends Record<string, any>> = {
     striped?: boolean;
     selectedRows?: Set<number | string>;
     hasSelection: boolean;
+    selectionMode: 'single' | 'multiple';
+    selectionInputName: string;
     viewMode?: ViewMode;
     getRowSeverity?: (row: T) => any;
     onRowClick?: (row: T) => void;
     onRowMouseEnter?: (row: T) => void;
     onRowSelect?: (rowId: number | string, isSelected: boolean) => void;
 };
-export declare function TableBody<T extends Record<string, any>>({ data, dataKey, columns, gridStyle, striped, selectedRows, hasSelection, viewMode, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, }: Props<T>): ReactNode;
+export declare function TableBody<T extends Record<string, any>>({ data, dataKey, columns, gridStyle, striped, selectedRows, hasSelection, selectionMode, selectionInputName, viewMode, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, }: Props<T>): ReactNode;
 export {};

package/dist/components/table/components/TableBody.js

@@ -2,9 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from '../table.classes';
 import styles from '../Table.module.css';
 import { TableRow } from './TableRow';
-export function TableBody({ data, dataKey, columns, gridStyle, striped, selectedRows, hasSelection, viewMode, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, }) {
+export function TableBody({ data, dataKey, columns, gridStyle, striped, selectedRows, hasSelection, selectionMode, selectionInputName, viewMode, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, }) {
     return (_jsx("div", { className: cx(styles.body, striped && styles.striped), role: "rowgroup", children: data.map(row => {
             const rowId = row[dataKey];
-            return (_jsx(TableRow, { row: row, rowId: rowId, columns: columns, gridStyle: gridStyle, selectedRows: selectedRows, hasSelection: hasSelection, viewMode: viewMode, getRowSeverity: getRowSeverity, onRowClick: onRowClick, onRowMouseEnter: onRowMouseEnter, onRowSelect: onRowSelect }, `gridRow-${rowId}`));
+            return (_jsx(TableRow, { row: row, rowId: rowId, columns: columns, gridStyle: gridStyle, selectedRows: selectedRows, hasSelection: hasSelection, selectionMode: selectionMode, selectionInputName: selectionInputName, viewMode: viewMode, getRowSeverity: getRowSeverity, onRowClick: onRowClick, onRowMouseEnter: onRowMouseEnter, onRowSelect: onRowSelect }, `gridRow-${rowId}`));
         }) }));
 }

package/dist/components/table/components/TableRow.d.ts

@@ -9,11 +9,13 @@ type Props<T extends Record<string, any>> = {
     gridStyle: CSSProperties;
     selectedRows?: Set<number | string>;
     hasSelection: boolean;
+    selectionMode: 'single' | 'multiple';
+    selectionInputName: string;
     viewMode?: ViewMode;
     getRowSeverity?: (row: T) => any;
     onRowClick?: (row: T) => void;
     onRowMouseEnter?: (row: T) => void;
     onRowSelect?: (rowId: number | string, isSelected: boolean) => void;
 };
-export declare function TableRow<T extends Record<string, any>>({ row, rowId, columns, gridStyle, selectedRows, hasSelection, viewMode, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, }: Props<T>): React.ReactNode;
+export declare function TableRow<T extends Record<string, any>>({ row, rowId, columns, gridStyle, selectedRows, hasSelection, selectionMode, selectionInputName, viewMode, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, }: Props<T>): React.ReactNode;
 export {};

package/dist/components/table/components/TableRow.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Checkbox } from '../../../components/forms/checkbox/Checkbox';
+import { RadioButton } from '../../../components/forms/radio-buttons/RadioButton';
 import { SeverityBgColor } from '../../../constants/severity';
 import { useTableRowInteractions } from '../hooks/useTableRowInteractions';
 import { cx } from '../table.classes';
 import styles from '../Table.module.css';
 import { getCellDisplayValue, shouldAllowWrap } from '../table.utils';
-export function TableRow({ row, rowId, columns, gridStyle, selectedRows, hasSelection, viewMode, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, }) {
+export function TableRow({ row, rowId, columns, gridStyle, selectedRows, hasSelection, selectionMode, selectionInputName, viewMode, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, }) {
     var _a;
     const isSelected = (_a = selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.has(rowId)) !== null && _a !== void 0 ? _a : false;
     const rowSeverity = getRowSeverity === null || getRowSeverity === void 0 ? void 0 : getRowSeverity(row);
@@ -23,13 +24,28 @@ export function TableRow({ row, rowId, columns, gridStyle, selectedRows, hasSele
             ['--row-severity-color']: rowSeverity
                 ? SeverityBgColor[rowSeverity]
                 : undefined,
-        }, role: "row", tabIndex: onRowClick ? 0 : -1, onKeyDown: handleRowKeyDown, onMouseEnter: () => onRowMouseEnter === null || onRowMouseEnter === void 0 ? void 0 : onRowMouseEnter(row), onClick: handleRowClick, children: [hasSelection ? (_jsx("div", { className: cx(styles.cell, styles.selectionCell), role: "cell", onClick: e => {
-                    e.stopPropagation();
-                    onRowSelect === null || onRowSelect === void 0 ? void 0 : onRowSelect(rowId, !isSelected);
-                }, children: _jsx("div", { className: styles.selectionHitArea, children: _jsx(Checkbox, { variant: "primary", checked: isSelected, size: "sm", onChange: (checked, e) => {
+        }, role: "row", tabIndex: onRowClick ? 0 : -1, onKeyDown: handleRowKeyDown, onMouseEnter: () => onRowMouseEnter === null || onRowMouseEnter === void 0 ? void 0 : onRowMouseEnter(row), onClick: handleRowClick, children: [hasSelection ? (_jsx("div", { className: cx(styles.cell, styles.selectionCell), role: "cell", "data-selection-control": "true", children: _jsx("div", { className: styles.selectionHitArea, "data-selection-control": "true", onClick: e => {
+                        if (e.target !== e.currentTarget)
+                            return;
+                        e.stopPropagation();
+                        onRowSelect === null || onRowSelect === void 0 ? void 0 : onRowSelect(rowId, !isSelected);
+                    }, children: _jsx("div", { className: styles.selectionControlWrap, "data-selection-control": "true", onMouseDown: e => {
+                            if (selectionMode !== 'single' || !isSelected)
+                                return;
+                            e.preventDefault();
+                        }, onClick: e => {
                             e.stopPropagation();
-                            onRowSelect === null || onRowSelect === void 0 ? void 0 : onRowSelect(rowId, checked);
-                        } }) }) })) : null, columns.map(column => {
+                            if (selectionMode === 'single' && isSelected) {
+                                e.preventDefault();
+                                onRowSelect === null || onRowSelect === void 0 ? void 0 : onRowSelect(rowId, false);
+                            }
+                        }, children: selectionMode === 'single' ? (_jsx(RadioButton, { noContainer: true, name: selectionInputName, value: String(rowId), checked: isSelected, size: "sm", variant: "primary", onChange: (_value, e) => {
+                                e.stopPropagation();
+                                onRowSelect === null || onRowSelect === void 0 ? void 0 : onRowSelect(rowId, true);
+                            } })) : (_jsx(Checkbox, { variant: "primary", checked: isSelected, size: "sm", onChange: (checked, e) => {
+                                e.stopPropagation();
+                                onRowSelect === null || onRowSelect === void 0 ? void 0 : onRowSelect(rowId, checked);
+                            } })) }) }) })) : null, columns.map(column => {
                 var _a;
                 const allowWrap = shouldAllowWrap(column.allowWrap, isSelected, viewMode);
                 const cellValue = getCellDisplayValue(row, column);

package/dist/components/table/hooks/useTableRowInteractions.js

@@ -2,6 +2,11 @@ import { useCallback } from 'react';
 import { isModifierClick, shouldToggleOnKey } from '../table.utils';
 export function useTableRowInteractions({ row, rowId, isSelected, canSelect, onRowClick, onRowSelect, }) {
     const handleRowClick = useCallback((e) => {
+        var _a;
+        const target = e.target;
+        if ((_a = target === null || target === void 0 ? void 0 : target.closest) === null || _a === void 0 ? void 0 : _a.call(target, '[data-selection-control="true"]')) {
+            return;
+        }
         if (isModifierClick(e) && canSelect) {
             e.preventDefault();
             e.stopPropagation();

package/dist/components/table/tanstackTable.utils.d.ts

@@ -16,5 +16,6 @@ export declare function buildDistributedGridTemplateColumns(args: {
     hasSelection: boolean;
     defaultMinPx: number;
     columnSizing: ColumnSizingState;
+    availableWidth?: number;
 }): string;
 export {};

package/dist/components/table/tanstackTable.utils.js

@@ -92,34 +92,87 @@ function clamp(value, min, max) {
     return Math.min(lowerBounded, max);
 }
 export function buildDistributedGridTemplateColumns(args) {
-    var _a, _b, _c, _d;
-    const { table, allowedIds, hasSelection, defaultMinPx, columnSizing } = args;
+    var _a, _b, _c, _d, _e, _f, _g;
+    const { table, allowedIds, hasSelection, defaultMinPx, columnSizing, availableWidth } = args;
     const parts = [];
     const leaf = table.getVisibleLeafColumns().filter((c) => allowedIds.has(c.id));
+    const fixedSelectionWidth = hasSelection ? SELECTION_COLUMN_PX : 0;
+    const flexTracks = [];
+    let fixedWidth = fixedSelectionWidth;
     if (hasSelection)
         parts.push(`${SELECTION_COLUMN_PX}px`);
     for (const c of leaf) {
         const def = c.columnDef;
         const meta = ((_b = ((_a = def.meta) !== null && _a !== void 0 ? _a : {})) !== null && _b !== void 0 ? _b : {});
         const min = Math.max(1, Number((_c = def.minSize) !== null && _c !== void 0 ? _c : defaultMinPx));
+        const preferred = Math.max(min, Number((_f = (_d = def.size) !== null && _d !== void 0 ? _d : (_e = c.getSize) === null || _e === void 0 ? void 0 : _e.call(c)) !== null && _f !== void 0 ? _f : defaultMinPx));
         const hasMax = def.maxSize != null;
         const max = hasMax ? Math.max(min, Number(def.maxSize)) : undefined;
-        const weight = Math.max(1, Number((_d = meta.weight) !== null && _d !== void 0 ? _d : 1));
+        const weight = Math.max(1, Number((_g = meta.weight) !== null && _g !== void 0 ? _g : 1));
         const resizedPxRaw = columnSizing[c.id];
         const resizedPx = resizedPxRaw != null ? Math.round(clamp(Number(resizedPxRaw), min, max)) : undefined;
         if (resizedPx != null) {
             parts.push(`${resizedPx}px`);
+            fixedWidth += resizedPx;
             continue;
         }
         if (hasMax && max === min) {
             parts.push(`${Math.round(min)}px`);
+            fixedWidth += Math.round(min);
             continue;
         }
-        if (hasMax && max != null) {
-            parts.push(`minmax(${Math.round(min)}px, ${Math.round(max)}px)`);
-            continue;
+        flexTracks.push({
+            width: hasMax && max != null ? clamp(preferred, min, max) : preferred,
+            weight,
+            max,
+        });
+        parts.push('__FLEX__');
+    }
+    if (availableWidth != null && Number.isFinite(availableWidth) && availableWidth > 0) {
+        const totalBaseWidth = fixedWidth + flexTracks.reduce((sum, track) => sum + track.width, 0);
+        let remaining = Math.max(0, availableWidth - totalBaseWidth);
+        let active = flexTracks.filter(track => track.max == null || track.width < track.max);
+        while (remaining > 0.5 && active.length > 0) {
+            const totalWeight = active.reduce((sum, track) => sum + track.weight, 0);
+            if (totalWeight <= 0)
+                break;
+            let consumed = 0;
+            const nextActive = [];
+            for (const track of active) {
+                const share = (remaining * track.weight) / totalWeight;
+                const maxGrow = track.max == null ? share : Math.max(0, track.max - track.width);
+                const growth = Math.min(share, maxGrow);
+                track.width += growth;
+                consumed += growth;
+                if (track.max == null || track.width < track.max - 0.5) {
+                    nextActive.push(track);
+                }
+            }
+            if (consumed <= 0.5)
+                break;
+            remaining -= consumed;
+            active = nextActive;
         }
-        parts.push(`minmax(${Math.round(min)}px, ${weight}fr)`);
+        let flexIndex = 0;
+        return parts
+            .map(part => {
+            if (part !== '__FLEX__')
+                return part;
+            const track = flexTracks[flexIndex++];
+            return `${Math.round(track.width)}px`;
+        })
+            .join(' ');
     }
-    return parts.join(' ');
+    let flexIndex = 0;
+    return parts
+        .map(part => {
+        if (part !== '__FLEX__')
+            return part;
+        const track = flexTracks[flexIndex++];
+        const roundedWidth = Math.round(track.width);
+        if (track.max != null)
+            return `minmax(${roundedWidth}px, ${Math.round(track.max)}px)`;
+        return `minmax(${roundedWidth}px, ${track.weight}fr)`;
+    })
+        .join(' ');
 }

package/dist/src/styles/styles.css

@@ -106,6 +106,10 @@ body.dbc-app {
   word-break: break-word;
 }
 
+.dbc-table.dbc-table--plain-values td {
+  font-weight: var(--font-weight-default);
+}
+
 /* Optional: baseline alignment closer to metaRow */
 .dbc-table th,
 .dbc-table td {

package/dist/styles/styles.css

@@ -106,6 +106,10 @@ body.dbc-app {
   word-break: break-word;
 }
 
+.dbc-table.dbc-table--plain-values td {
+  font-weight: var(--font-weight-default);
+}
+
 /* Optional: baseline alignment closer to metaRow */
 .dbc-table th,
 .dbc-table td {

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

@@ -153,7 +153,7 @@ html[data-theme='light'] {
   --table-header-bg: #f5f6f8;
   --table-row-bg: #ffffff;
   --table-row-bg-alt: #f7f9fc;
-  --table-row-bg-hover: #f6f8fb;
+  --table-row-bg-hover: #eef2f7;
   --table-row-bg-selected: var(--dbc-blue-100);
   --table-row-bg-selected-hover: var(--dbc-blue-150);
 

package/package.json

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