@dbcdk/react-components 0.0.9 → 0.0.12

package/dist/components/table/tanstack.js

@@ -2,8 +2,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useReactTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel, } from '@tanstack/react-table';
 import * as React from 'react';
-import ColumnResizer from './components/column-resizer/ColumnResizer';
 import { Table } from './Table';
+import ColumnResizer from './components/column-resizer/ColumnResizer';
 function getColumnId(def, index) {
     const d = def;
     if (d.id != null && String(d.id).length)
@@ -12,9 +12,20 @@ function getColumnId(def, index) {
         return String(d.accessorKey);
     return `col_${index}`;
 }
-function mapDefsToColumnItems(defs) {
+function buildDefaultVisibleIdsFromDefs(defs) {
+    const ids = [];
+    defs.forEach((def, idx) => {
+        var _a;
+        const id = getColumnId(def, idx);
+        const hiddenByMeta = Boolean((_a = def.meta) === null || _a === void 0 ? void 0 : _a.hidden);
+        if (!hiddenByMeta)
+            ids.push(id);
+    });
+    return ids;
+}
+function mapDefsToColumnItems(defs, columnVisibility) {
     return defs.map((def, index) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
         const id = getColumnId(def, index);
         const accessorKey = def.accessorKey;
         const accessorFn = def.accessorFn;
@@ -39,41 +50,62 @@ function mapDefsToColumnItems(defs) {
         else {
             render = () => null;
         }
+        const isVisible = (_a = columnVisibility[id]) !== null && _a !== void 0 ? _a : true;
         return {
             id,
             header: def.header,
             accessor: accessorKey,
-            sortable: (_a = def.enableSorting) !== null && _a !== void 0 ? _a : !!accessorKey,
+            sortable: (_b = def.enableSorting) !== null && _b !== void 0 ? _b : !!accessorKey,
             render,
-            hidden: (_c = (_b = def.meta) === null || _b === void 0 ? void 0 : _b.hidden) !== null && _c !== void 0 ? _c : false,
-            align: (_e = (_d = def.meta) === null || _d === void 0 ? void 0 : _d.align) !== null && _e !== void 0 ? _e : undefined,
-            verticalAlign: (_g = (_f = def.meta) === null || _f === void 0 ? void 0 : _f.verticalAlign) !== null && _g !== void 0 ? _g : undefined,
-            fitContent: (_j = (_h = def.meta) === null || _h === void 0 ? void 0 : _h.fitContent) !== null && _j !== void 0 ? _j : false,
-            emptyPlaceholder: (_l = (_k = def.meta) === null || _k === void 0 ? void 0 : _k.emptyPlaceholder) !== null && _l !== void 0 ? _l : '-',
-            allowWrap: (_o = (_m = def.meta) === null || _m === void 0 ? void 0 : _m.allowWrap) !== null && _o !== void 0 ? _o : false,
-            fillWidth: (_q = (_p = def.meta) === null || _p === void 0 ? void 0 : _p.fillWidth) !== null && _q !== void 0 ? _q : false,
-            severity: (_s = (_r = def.meta) === null || _r === void 0 ? void 0 : _r.severity) !== null && _s !== void 0 ? _s : undefined,
+            hidden: !isVisible,
+            align: (_d = (_c = def.meta) === null || _c === void 0 ? void 0 : _c.align) !== null && _d !== void 0 ? _d : undefined,
+            verticalAlign: (_f = (_e = def.meta) === null || _e === void 0 ? void 0 : _e.verticalAlign) !== null && _f !== void 0 ? _f : undefined,
+            fitContent: (_h = (_g = def.meta) === null || _g === void 0 ? void 0 : _g.fitContent) !== null && _h !== void 0 ? _h : false,
+            emptyPlaceholder: (_k = (_j = def.meta) === null || _j === void 0 ? void 0 : _j.emptyPlaceholder) !== null && _k !== void 0 ? _k : '-',
+            allowWrap: (_m = (_l = def.meta) === null || _l === void 0 ? void 0 : _l.allowWrap) !== null && _m !== void 0 ? _m : false,
+            fillWidth: (_p = (_o = def.meta) === null || _o === void 0 ? void 0 : _o.fillWidth) !== null && _p !== void 0 ? _p : false,
+            severity: (_r = (_q = def.meta) === null || _q === void 0 ? void 0 : _q.severity) !== null && _r !== void 0 ? _r : undefined,
         };
     });
 }
 export function TanstackTable(props) {
     var _a, _b;
-    const { data, dataKey, columns, filterable = [], onSortingChange, ...tableProps } = props;
+    const { data, dataKey, columns, filterable = [], onSortingChange, initialSortBy, initialSortDirection, visibleColumnIds, ...tableProps } = props;
     const [sorting, setSorting] = React.useState([]);
     const [columnFilters, setColumnFilters] = React.useState([]);
     const [columnSizing, setColumnSizing] = React.useState({});
+    // IDs in the same order as defs
+    const allColumnIds = React.useMemo(() => columns.map((def, i) => getColumnId(def, i)), [columns]);
+    // Defaults derived from ColumnDef meta.hidden
+    const defaultVisibleIds = React.useMemo(() => buildDefaultVisibleIdsFromDefs(columns), [columns]);
+    // Treat [] as "unset" and fall back to defaults
+    const effectiveVisibleIds = React.useMemo(() => {
+        if (visibleColumnIds && visibleColumnIds.length > 0)
+            return visibleColumnIds;
+        return defaultVisibleIds;
+    }, [visibleColumnIds, defaultVisibleIds]);
+    // TanStack visibility state
+    const [columnVisibility, setColumnVisibility] = React.useState(() => {
+        const visible = new Set(effectiveVisibleIds);
+        const next = {};
+        for (const id of allColumnIds)
+            next[id] = visible.has(id);
+        return next;
+    });
     const table = useReactTable({
         data,
         columns: columns,
-        state: { sorting, columnFilters, columnSizing },
+        state: { sorting, columnFilters, columnSizing, columnVisibility },
         onSortingChange: setSorting,
         onColumnFiltersChange: setColumnFilters,
         onColumnSizingChange: setColumnSizing,
+        onColumnVisibilityChange: setColumnVisibility,
         getCoreRowModel: getCoreRowModel(),
         getSortedRowModel: getSortedRowModel(),
         getFilteredRowModel: getFilteredRowModel(),
         enableColumnResizing: true,
         columnResizeMode: 'onChange',
+        initialState: {},
         defaultColumn: {
             enableResizing: true,
             minSize: 80,
@@ -81,7 +113,28 @@ export function TanstackTable(props) {
             maxSize: 800,
         },
     });
-    const columnItems = React.useMemo(() => mapDefsToColumnItems(columns), [columns]);
+    // Apply external "visibleColumnIds" -> TanStack column visibility using toggleVisibility,
+    // as requested (no selector UI here).
+    React.useEffect(() => {
+        const desired = new Set(effectiveVisibleIds);
+        for (const id of allColumnIds) {
+            const col = table.getColumn(id);
+            if (!col)
+                continue;
+            const shouldBeVisible = desired.has(id);
+            if (col.getIsVisible() !== shouldBeVisible) {
+                col.toggleVisibility(shouldBeVisible);
+            }
+        }
+    }, [table, allColumnIds, effectiveVisibleIds]);
+    React.useEffect(() => {
+        if (initialSortDirection !== 'asc' && initialSortDirection !== 'desc')
+            return table.setSorting([]);
+        table.setSorting(() => initialSortBy && initialSortDirection
+            ? [{ id: initialSortBy, desc: initialSortDirection === 'desc' }]
+            : []);
+    }, [initialSortBy, initialSortDirection, table]);
+    const columnItems = React.useMemo(() => mapDefsToColumnItems(columns, columnVisibility), [columns, columnVisibility]);
     const visibleData = table.getRowModel().rows.map(r => r.original);
     const s = (_a = table.getState().sorting) === null || _a === void 0 ? void 0 : _a[0];
     const sortById = (_b = s === null || s === void 0 ? void 0 : s.id) !== null && _b !== void 0 ? _b : undefined;
@@ -149,14 +202,13 @@ export function TanstackTable(props) {
             }) }));
     }, [columnItems, filterable, table, gridTemplateColumns]);
     return (_jsx(Table, { ...tableProps, dataKey: dataKey, data: visibleData, columns: columnItems, sortById: sortById, sortDirection: sortDirection, onSortChange: (col, dir) => {
-            var _a, _b, _c;
-            const id = String(col.id);
-            if (!id)
-                return;
-            if (!dir)
+            var _a;
+            if (dir == null) {
                 table.setSorting([]);
-            else
-                table.setSorting([{ id, desc: dir === 'desc' }]);
-            onSortingChange === null || onSortingChange === void 0 ? void 0 : onSortingChange((_c = (_b = (_a = table.getState().sorting) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : null, dir);
+                onSortingChange === null || onSortingChange === void 0 ? void 0 : onSortingChange(null, null);
+                return;
+            }
+            table.setSorting([{ id: col.id, desc: dir === 'desc' }]);
+            onSortingChange === null || onSortingChange === void 0 ? void 0 : onSortingChange((_a = col.id) !== null && _a !== void 0 ? _a : null, dir);
         }, headerExtras: headerExtras, columnStyles: columnStyles, headerBelowRow: headerBelowRow }));
 }

package/dist/components/toast/Toast.js

@@ -1,8 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Toast.tsx
 import { X } from 'lucide-react';
 import styles from './Toast.module.css';
 import { Button } from '../button/Button';
 import { Headline } from '../headline/Headline';
 export function Toast({ title, message, severity = 'info', action, onClose, }) {
-    return (_jsxs("div", { className: `${styles.toast} ${styles[severity]}`, role: "status", children: [_jsxs("div", { className: styles.content, children: [_jsx(Headline, { size: 4, severity: title ? severity : undefined, disableMargin: true, addition: onClose && (_jsx("div", { style: { marginLeft: 'auto' }, children: _jsx(Button, { type: "button", variant: "inline", "aria-label": "Dismiss notification", onClick: onClose, children: _jsx(X, { className: styles.closeIcon, "aria-hidden": "true" }) }) })), children: title }), message && _jsx("div", { className: styles.message, children: message })] }), _jsx("div", { className: styles.actions, children: action && (_jsx(Button, { type: "button", variant: "primary", onClick: action.onClick, children: action.label })) })] }));
+    const showHeader = Boolean(title);
+    const showMessage = Boolean(message);
+    const CloseButton = onClose ? (_jsx(Button, { type: "button", variant: "inline", className: styles.closeButton, "aria-label": "Dismiss notification", onClick: onClose, children: _jsx(X, { className: styles.closeIcon, "aria-hidden": "true" }) })) : null;
+    return (_jsxs("div", { className: `${styles.toast} ${styles[severity]}`, role: "status", children: [_jsxs("div", { className: styles.content, children: [showHeader && (_jsxs("div", { className: styles.row, children: [_jsx(Headline, { size: 4, severity: severity, disableMargin: true, children: title }), CloseButton] })), showMessage && (_jsxs("div", { className: styles.row, children: [_jsx("div", { className: styles.message, children: message }), !showHeader && CloseButton] }))] }), action && (_jsx("div", { className: styles.actions, children: _jsx(Button, { type: "button", variant: "primary", onClick: action.onClick, children: action.label }) }))] }));
 }

package/dist/components/toast/Toast.module.css

@@ -32,6 +32,7 @@
   border-left-width: var(--border-width-thick);
 }
 
+/* Severity accents */
 .info {
   border-left-color: var(--color-status-info-border);
 }
@@ -48,40 +49,58 @@
   border-left-color: var(--color-status-error-border);
 }
 
-.iconContainer {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.icon {
-  width: var(--icon-size-md);
-  height: var(--icon-size-md);
-}
-
+/* Layout */
 .content {
   flex: 1;
   min-width: 0;
   display: flex;
   flex-direction: column;
+  gap: var(--spacing-xxs);
+}
+
+.row {
+  display: flex;
+  align-items: center;
   gap: var(--spacing-xs);
+  min-width: 0;
 }
 
+/* Long-text handling suitable for toasts */
+.title,
+.message {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  white-space: normal;
+}
+
+/* Optional: clamp to avoid giant toasts */
 .title {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   line-height: var(--line-height-tight);
+
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
 }
 
 .message {
   font-size: var(--font-size-sm);
   line-height: var(--line-height-normal);
+
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  overflow: hidden;
 }
 
-.actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--spacing-xs);
+/* Close button stays aligned at the end of the row */
+.closeButton {
+  margin-inline-start: auto;
+  flex: 0 0 auto;
+  align-self: flex-start;
 }
 
 .closeIcon {
@@ -89,6 +108,12 @@
   height: var(--icon-size-sm);
 }
 
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--spacing-xs);
+}
+
 /* Simple enter animation */
 @keyframes toast-enter {
   from {

package/dist/components/toast/provider/ToastProvider.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useState, useRef, useEffect, } from 'react';
 import { Toast } from '../Toast';

package/dist/hooks/useTableSettings.d.ts

@@ -1,7 +1,26 @@
-export type ViewMode = 'compact' | 'comfortable';
-interface TableSettings {
+import { ColumnDef } from '@tanstack/react-table';
+export type ViewMode = 'compact' | 'wrapped';
+export type TableSettingsState = {
     viewMode: ViewMode;
-    toggleViewMode: () => void;
+    visibleColumnIds: string[];
+};
+export type TableSettingsStorage = {
+    get: (key: string) => TableSettingsState | undefined;
+    set: (key: string, next: TableSettingsState) => void;
+};
+export declare const localStorageTableSettingsStorage: TableSettingsStorage;
+interface UseTableSettingsOptions {
+    storageKey: string;
+    tableColumns?: ColumnDef<any>[];
+    defaultViewMode?: ViewMode;
+    defaultVisibleColumnIds?: string[];
+    storage?: TableSettingsStorage;
 }
-export declare function useTableSettings(storageKey?: string): TableSettings;
+export declare function useTableSettings({ storageKey, tableColumns, defaultViewMode, defaultVisibleColumnIds, storage, }: UseTableSettingsOptions): {
+    viewMode: ViewMode;
+    toggleViewMode: () => void;
+    setViewMode: (mode: ViewMode) => void;
+    visibleColumnIds: string[];
+    setVisibleColumnIds: (ids: string[]) => void;
+};
 export {};

package/dist/hooks/useTableSettings.js

@@ -1,24 +1,71 @@
 'use client';
-import { useCallback, useEffect, useState } from 'react';
-export function useTableSettings(storageKey) {
-    const [viewMode, setViewMode] = useState('compact');
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { readLocalStorage, writeLocalStorage } from '../utils/localStorage.utils';
+function getDefaultVisibleIds(tableColumns) {
+    var _a;
+    return ((_a = tableColumns === null || tableColumns === void 0 ? void 0 : tableColumns.filter(c => { var _a; return !((_a = c.meta) === null || _a === void 0 ? void 0 : _a.hidden); }).map(c => c.id).filter(Boolean)) !== null && _a !== void 0 ? _a : []);
+}
+function mergeDefaults(stored, defaults) {
+    const viewMode = (stored === null || stored === void 0 ? void 0 : stored.viewMode) === 'compact' || (stored === null || stored === void 0 ? void 0 : stored.viewMode) === 'wrapped'
+        ? stored.viewMode
+        : defaults.viewMode;
+    const visibleColumnIds = Array.isArray(stored === null || stored === void 0 ? void 0 : stored.visibleColumnIds) && stored.visibleColumnIds.length > 0
+        ? stored.visibleColumnIds
+        : defaults.visibleColumnIds;
+    return { viewMode, visibleColumnIds };
+}
+export const localStorageTableSettingsStorage = {
+    get: key => {
+        const v = readLocalStorage(key);
+        return v && typeof v === 'object' ? v : undefined;
+    },
+    set: (key, next) => {
+        writeLocalStorage(key, next);
+    },
+};
+export function useTableSettings({ storageKey, tableColumns, defaultViewMode = 'compact', defaultVisibleColumnIds, storage = localStorageTableSettingsStorage, }) {
+    const defaults = useMemo(() => {
+        return {
+            viewMode: defaultViewMode,
+            visibleColumnIds: defaultVisibleColumnIds !== null && defaultVisibleColumnIds !== void 0 ? defaultVisibleColumnIds : getDefaultVisibleIds(tableColumns),
+        };
+    }, [defaultViewMode, defaultVisibleColumnIds, tableColumns]);
+    const [state, setState] = useState(defaults);
     useEffect(() => {
-        if (typeof window !== 'undefined' && storageKey) {
-            const storedMode = window.localStorage.getItem(`dbc-table-settings:${storageKey}`);
-            if (storedMode === 'compact' || storedMode === 'comfortable') {
-                setViewMode(storedMode);
-            }
-        }
-    }, [storageKey]);
+        const stored = storage.get(storageKey);
+        const next = mergeDefaults(stored, defaults);
+        setState(next);
+    }, [storageKey, storage, defaults]);
+    const persist = useCallback((next) => storage.set(storageKey, next), [storage, storageKey]);
+    const setViewMode = useCallback((mode) => {
+        setState(prev => {
+            if (prev.viewMode === mode)
+                return prev;
+            const next = { ...prev, viewMode: mode };
+            persist(next);
+            return next;
+        });
+    }, [persist]);
     const toggleViewMode = useCallback(() => {
-        if (typeof window !== 'undefined' && storageKey) {
-            const newMode = viewMode === 'comfortable' ? 'compact' : 'comfortable';
-            window.localStorage.setItem(`dbc-table-settings:${storageKey}`, newMode);
-        }
-        setViewMode(prevMode => (prevMode === 'comfortable' ? 'compact' : 'comfortable'));
-    }, [storageKey, viewMode]);
+        setState(prev => {
+            const nextMode = prev.viewMode === 'wrapped' ? 'compact' : 'wrapped';
+            const next = { ...prev, viewMode: nextMode };
+            persist(next);
+            return next;
+        });
+    }, [persist]);
+    const setVisibleColumnIds = useCallback((ids) => {
+        setState(prev => {
+            const next = { ...prev, visibleColumnIds: ids };
+            persist(next);
+            return next;
+        });
+    }, [persist]);
     return {
-        viewMode,
+        viewMode: state.viewMode,
         toggleViewMode,
+        setViewMode,
+        visibleColumnIds: state.visibleColumnIds,
+        setVisibleColumnIds,
     };
 }

package/dist/hooks/useTimeDuration.js

@@ -6,7 +6,13 @@ function defaultDuration(ms) {
     const sec = Math.floor(ms / 1000) % 60;
     const min = Math.floor(ms / (1000 * 60)) % 60;
     const hr = Math.floor(ms / (1000 * 60 * 60));
-    return hr > 0 ? `${hr}t ${min}m ${sec}s` : `${min}m ${sec}s`;
+    if (hr > 0) {
+        return `${hr}t ${min}m ${sec}s`;
+    }
+    if (min > 0) {
+        return `${min}m ${sec}s`;
+    }
+    return `${sec}s`;
 }
 export function useTimeDuration({ start, end, dateFormat = { dateStyle: 'short', timeStyle: 'medium' }, fallback = '—', formatDuration = defaultDuration, }) {
     const [hydrated, setHydrated] = useState(false);
@@ -16,14 +22,14 @@ export function useTimeDuration({ start, end, dateFormat = { dateStyle: 'short',
             return fallback;
         if (!hydrated)
             return fallback;
-        return new Intl.DateTimeFormat(undefined, dateFormat).format(start);
+        return new Intl.DateTimeFormat('da-DK', dateFormat).format(start);
     }, [start, hydrated, fallback, dateFormat]);
     const ended = useMemo(() => {
         if (!end)
             return fallback;
         if (!hydrated)
             return fallback;
-        return new Intl.DateTimeFormat(undefined, dateFormat).format(end);
+        return new Intl.DateTimeFormat('da-DK', dateFormat).format(end);
     }, [end, hydrated, fallback, dateFormat]);
     const duration = useMemo(() => {
         if (!start || !end)

package/dist/hooks/useViewportFill.js

@@ -1,3 +1,4 @@
+'use client';
 import { useCallback, useEffect, useLayoutEffect, useRef, useState, } from 'react';
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 /**

package/dist/index.d.ts

@@ -61,3 +61,9 @@ export * from './components/hyperlink/Hyperlink';
 export * from './components/overlay/tooltip/Tooltip';
 export * from './components/overlay/tooltip/TooltipProvider';
 export * from './components/overlay/tooltip/useTooltipTrigger';
+export * from './components/forms/radio-buttons/RadioButton';
+export * from './components/forms/radio-buttons/RadioButtonGroup';
+export * from './components/interval-select/IntervalSelect';
+export * from './components/accordion/Accordion';
+export * from './components/state-page/StatePage';
+export * from './components/sticky-footer-layout/StickyFooterLayout';

package/dist/index.js

@@ -1,4 +1,3 @@
-'use client';
 export * from './components/button/Button';
 export * from './components/nav-bar/NavBar';
 export * from './components/avatar/Avatar';
@@ -62,3 +61,9 @@ export * from './components/hyperlink/Hyperlink';
 export * from './components/overlay/tooltip/Tooltip';
 export * from './components/overlay/tooltip/TooltipProvider';
 export * from './components/overlay/tooltip/useTooltipTrigger';
+export * from './components/forms/radio-buttons/RadioButton';
+export * from './components/forms/radio-buttons/RadioButtonGroup';
+export * from './components/interval-select/IntervalSelect';
+export * from './components/accordion/Accordion';
+export * from './components/state-page/StatePage';
+export * from './components/sticky-footer-layout/StickyFooterLayout';

package/dist/src/styles/styles.css

@@ -30,6 +30,8 @@ body {
   color: var(--color-fg-default);
   background-color: var(--color-bg-page);
   --density: var(--density-comfortable);
+  font-size: var(--font-size-sm);
+  margin: 0;
 }
 
 h1 {
@@ -45,7 +47,7 @@ h3 {
 }
 
 h4 {
-  font-size: var(--font-size-md);
+  font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
 }
 
@@ -53,46 +55,79 @@ body.dbc-app {
   max-width: 1600px;
 }
 
+.dbc-font-mono {
+  font-family: monospace;
+}
+
 .dbc-table {
   --card-label-width: 260px;
+
   border-collapse: collapse;
   font-size: var(--font-size-sm);
   line-height: var(--line-height-normal);
-  tr + tr th,
-  tr + tr td {
-    padding-block: var(--spacing-xxs);
-  }
+}
 
-  th {
-    white-space: nowrap;
-    color: var(--color-fg-subtle);
-    font-weight: var(--font-weight-default);
-    padding-right: var(--spacing-lg);
-    vertical-align: top;
-    text-align: left;
-  }
+.dbc-table tr + tr th,
+.dbc-table tr + tr td {
+  padding-block: var(--spacing-xxs);
+}
 
-  td {
-    color: var(--color-fg-default);
-    vertical-align: top;
-    min-width: 0;
-  }
+/* LABELS (th) → match .metaLabel */
+.dbc-table th {
+  white-space: nowrap;
+  text-align: left;
+  vertical-align: top;
+  max-width: var(--card-label-width);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--font-size-xs);
+  color: var(--color-fg-subtle);
+  letter-spacing: var(--letter-spacing-wide);
+  text-transform: uppercase;
+  font-weight: var(--font-weight-default);
+  padding-right: var(--spacing-lg);
+}
 
-  th {
-    max-width: var(--card-label-width);
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
+/* VALUES (td) → match .metaValue */
+.dbc-table td {
+  vertical-align: top;
+  min-width: 0;
+
+  margin: 0; /* harmless on td, keeps parity with metaValue */
+  font-size: var(--font-size-sm);
+  color: var(--color-fg-default);
+  font-weight: var(--font-weight-medium);
+
+  word-break: break-word;
+}
+
+/* Optional: baseline alignment closer to metaRow */
+.dbc-table th,
+.dbc-table td {
+  vertical-align: baseline;
+}
+
+.dbc-full-width {
+  width: 100%;
+}
+
+.dbc-highlight {
+  background-color: var(--color-status-warning-bg);
+}
+
+.dbc-muted-text {
+  color: var(--color-fg-subtle);
 }
 
 .dbc-table--bordered {
   width: auto;
-  border: 1px solid var(--color-border-default);
+  border: var(--border-width-thin) solid var(--color-border-default);
+  border-collapse: collapse;
 }
 
 .dbc-table--bordered th,
 .dbc-table--bordered td {
-  border: 1px solid var(--color-border-default);
+  border: var(--border-width-thin) solid var(--color-border-default);
   padding: var(--spacing-xs) var(--spacing-sm);
 }
 

package/dist/styles/animation.d.ts

@@ -0,0 +1,5 @@
+export declare const MOTION_MS: {
+    readonly panelSlide: 300;
+    readonly modal: 200;
+    readonly tooltipOpen: 300;
+};

package/dist/styles/animation.js

@@ -0,0 +1,5 @@
+export const MOTION_MS = {
+    panelSlide: 300,
+    modal: 200,
+    tooltipOpen: 300,
+};