@dbcdk/react-components 0.0.164 → 0.0.166

package/dist/components/button/Button.cjs

@@ -78,6 +78,7 @@ const Button = React__namespace.forwardRef(function Button2({
     placement: tooltipPlacement,
     offset: 8
   });
+  const { ref: hoverRef, onPointerEnter: hoverEnter, onPointerLeave: hoverLeave } = triggerProps;
   const describedBy = (() => {
     const existing = typeof buttonProps["aria-describedby"] === "string" ? buttonProps["aria-describedby"] : "";
     const ids = [existing, tooltipEnabled ? tooltipId : ""].filter(Boolean);
@@ -130,9 +131,9 @@ const Button = React__namespace.forwardRef(function Button2({
       buttonEl = /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
-          ref: triggerProps.ref,
-          onPointerEnter: triggerProps.onPointerEnter,
-          onPointerLeave: triggerProps.onPointerLeave,
+          ref: hoverRef,
+          onPointerEnter: hoverEnter,
+          onPointerLeave: hoverLeave,
           style: {
             display: fullWidth ? "flex" : "inline-flex",
             cursor: "not-allowed"

package/dist/components/button/Button.js

@@ -53,6 +53,7 @@ const Button = React.forwardRef(function Button2({
     placement: tooltipPlacement,
     offset: 8
   });
+  const { ref: hoverRef, onPointerEnter: hoverEnter, onPointerLeave: hoverLeave } = triggerProps;
   const describedBy = (() => {
     const existing = typeof buttonProps["aria-describedby"] === "string" ? buttonProps["aria-describedby"] : "";
     const ids = [existing, tooltipEnabled ? tooltipId : ""].filter(Boolean);
@@ -105,9 +106,9 @@ const Button = React.forwardRef(function Button2({
       buttonEl = /* @__PURE__ */ jsx(
         "span",
         {
-          ref: triggerProps.ref,
-          onPointerEnter: triggerProps.onPointerEnter,
-          onPointerLeave: triggerProps.onPointerLeave,
+          ref: hoverRef,
+          onPointerEnter: hoverEnter,
+          onPointerLeave: hoverLeave,
           style: {
             display: fullWidth ? "flex" : "inline-flex",
             cursor: "not-allowed"

package/dist/components/chip/Chip.module.css

@@ -33,7 +33,7 @@
 }
 
 .default {
-  border-radius: var(--border-radius-default);
+  border-radius: var(--border-radius-lg);
 }
 
 /* Types */

package/dist/components/filter-field/FilterField.cjs

@@ -60,14 +60,9 @@ function OperatorDropdown({
   disabled
 }) {
   const popRef = react.useRef(null);
-  const [activeIndex, setActiveIndex] = react.useState(() => Math.max(0, operators.indexOf(value)));
-  react.useEffect(() => {
-    setActiveIndex(Math.max(0, operators.indexOf(value)));
-  }, [operators, value]);
   const handleSelect = (op) => {
     var _a;
     onChange(op);
-    setActiveIndex(operators.indexOf(op));
     (_a = popRef.current) == null ? void 0 : _a.close();
   };
   return /* @__PURE__ */ jsxRuntime.jsx(

package/dist/components/filter-field/FilterField.js

@@ -54,14 +54,9 @@ function OperatorDropdown({
   disabled
 }) {
   const popRef = useRef(null);
-  const [activeIndex, setActiveIndex] = useState(() => Math.max(0, operators.indexOf(value)));
-  useEffect(() => {
-    setActiveIndex(Math.max(0, operators.indexOf(value)));
-  }, [operators, value]);
   const handleSelect = (op) => {
     var _a;
     onChange(op);
-    setActiveIndex(operators.indexOf(op));
     (_a = popRef.current) == null ? void 0 : _a.close();
   };
   return /* @__PURE__ */ jsx(

package/dist/components/overlay/modal/provider/ModalProvider.cjs

@@ -68,7 +68,7 @@ function ModalProvider({ children }) {
         setIsOpen(true);
       });
     },
-    [resolvePending]
+    [resolvePending, closeModal]
   );
   const modalNode = /* @__PURE__ */ jsxRuntime.jsxs(ModalContext.Provider, { value: { openModal, closeModal, confirm, markAsLoading }, children: [
     children,

package/dist/components/overlay/modal/provider/ModalProvider.js

@@ -66,7 +66,7 @@ function ModalProvider({ children }) {
         setIsOpen(true);
       });
     },
-    [resolvePending]
+    [resolvePending, closeModal]
   );
   const modalNode = /* @__PURE__ */ jsxs(ModalContext.Provider, { value: { openModal, closeModal, confirm, markAsLoading }, children: [
     children,

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

@@ -221,6 +221,7 @@
 
 .horizontal .content {
   padding-top: var(--spacing-lg);
+  padding-inline: var(--spacing-lg);
 }
 
 .footer {
@@ -228,6 +229,7 @@
   background: var(--color-bg-surface-subtle);
   display: flex;
   justify-content: center;
+  padding-inline: var(--spacing-md);
 
   /* When there is extra space (content is short), this pushes footer to the bottom.
      When content is long, footer follows content normally and is reached by scrolling.
@@ -236,6 +238,10 @@
   flex: 0 0 auto;
 }
 
+.horizontal .footer {
+  padding-inline: var(--spacing-lg);
+}
+
 /* Header slot wrappers */
 .headerContainer {
   display: flex;
@@ -244,6 +250,10 @@
   padding-inline: var(--spacing-md);
 }
 
+.horizontal .headerContainer {
+  padding-inline: var(--spacing-lg);
+}
+
 .headerContent {
   width: 100%;
   box-sizing: border-box;

package/dist/components/page-layout/components/footer/Footer.module.css

@@ -6,10 +6,7 @@
 
 .inner {
   inline-size: 100%;
-  max-inline-size: var(--container-xl);
-  margin-inline: auto;
   padding-block: var(--spacing-lg);
-  padding-inline: var(--spacing-xl);
   display: flex;
   flex-direction: row;
   align-items: flex-start;

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

@@ -43,7 +43,6 @@ const SearchBox = react.forwardRef(function SearchBoxInner({
   var _a;
   const isControlled = value !== void 0;
   const [draft, setDraft] = react.useState(() => isControlled ? String(value != null ? value : "") : "");
-  const [searchQuery, setSearchQuery] = react.useState("");
   const [activeIndex, setActiveIndex] = react.useState(null);
   const [popoverOpen, setPopoverOpen] = react.useState(false);
   const listboxId = react.useId();
@@ -68,13 +67,11 @@ const SearchBox = react.forwardRef(function SearchBoxInner({
   react.useEffect(() => {
     if (!onSearchRef.current) return;
     if (!debounce) {
-      setSearchQuery(draft);
       onSearchRef.current(draft);
       return;
     }
     const handler = setTimeout(() => {
       var _a2;
-      setSearchQuery(draft);
       (_a2 = onSearchRef.current) == null ? void 0 : _a2.call(onSearchRef, draft);
     }, debounceMs);
     return () => clearTimeout(handler);
@@ -120,7 +117,6 @@ const SearchBox = react.forwardRef(function SearchBoxInner({
   function reset() {
     var _a2;
     setDraft("");
-    setSearchQuery("");
     setActiveIndex(null);
     (_a2 = popoverRef.current) == null ? void 0 : _a2.close();
   }

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

@@ -37,7 +37,6 @@ const SearchBox = forwardRef(function SearchBoxInner({
   var _a;
   const isControlled = value !== void 0;
   const [draft, setDraft] = useState(() => isControlled ? String(value != null ? value : "") : "");
-  const [searchQuery, setSearchQuery] = useState("");
   const [activeIndex, setActiveIndex] = useState(null);
   const [popoverOpen, setPopoverOpen] = useState(false);
   const listboxId = useId();
@@ -62,13 +61,11 @@ const SearchBox = forwardRef(function SearchBoxInner({
   useEffect(() => {
     if (!onSearchRef.current) return;
     if (!debounce) {
-      setSearchQuery(draft);
       onSearchRef.current(draft);
       return;
     }
     const handler = setTimeout(() => {
       var _a2;
-      setSearchQuery(draft);
       (_a2 = onSearchRef.current) == null ? void 0 : _a2.call(onSearchRef, draft);
     }, debounceMs);
     return () => clearTimeout(handler);
@@ -114,7 +111,6 @@ const SearchBox = forwardRef(function SearchBoxInner({
   function reset() {
     var _a2;
     setDraft("");
-    setSearchQuery("");
     setActiveIndex(null);
     (_a2 = popoverRef.current) == null ? void 0 : _a2.close();
   }

package/dist/components/skeleton-loader/SkeletonLoader.cjs

@@ -21,7 +21,7 @@ function SkeletonLoader({
       variant,
       speedSec
     },
-    `${String(width)}-${height}-${String(radius)}-${Math.random()}`
+    `${String(width)}-${height}-${String(radius)}`
   );
   const pills = (count) => Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
     SkeletonLoaderItem.SkeletonLoaderItem,

package/dist/components/skeleton-loader/SkeletonLoader.js

@@ -19,7 +19,7 @@ function SkeletonLoader({
       variant,
       speedSec
     },
-    `${String(width)}-${height}-${String(radius)}-${Math.random()}`
+    `${String(width)}-${height}-${String(radius)}`
   );
   const pills = (count) => Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsx(
     SkeletonLoaderItem,

package/dist/components/split-pane/SplitPane.cjs

@@ -161,7 +161,10 @@ function SplitPaneGutter() {
     [computeClamp, direction, minPrimarySize, primarySize, setPrimarySize]
   );
   const ariaOrientation = direction === "horizontal" ? "vertical" : "horizontal";
-  const { maxPrimary } = computeClamp();
+  const [maxPrimary, setMaxPrimary] = react.useState(Infinity);
+  react.useEffect(() => {
+    setMaxPrimary(computeClamp().maxPrimary);
+  }, [computeClamp]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.gutter, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {

package/dist/components/split-pane/SplitPane.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { useMemo, useRef, useCallback } from 'react';
+import { useMemo, useRef, useCallback, useState, useEffect } from 'react';
 import { SplitPaneProvider, useSplitPaneContext } from './provider/SplitPaneContext';
 import styles from './SplitPane.module.css';
 
@@ -155,7 +155,10 @@ function SplitPaneGutter() {
     [computeClamp, direction, minPrimarySize, primarySize, setPrimarySize]
   );
   const ariaOrientation = direction === "horizontal" ? "vertical" : "horizontal";
-  const { maxPrimary } = computeClamp();
+  const [maxPrimary, setMaxPrimary] = useState(Infinity);
+  useEffect(() => {
+    setMaxPrimary(computeClamp().maxPrimary);
+  }, [computeClamp]);
   return /* @__PURE__ */ jsx("div", { className: styles.gutter, children: /* @__PURE__ */ jsx(
     "div",
     {

package/dist/components/split-pane/provider/SplitPaneContext.cjs

@@ -78,7 +78,7 @@ function SplitPaneProvider({
     const ro = new ResizeObserver(clampToContainer);
     ro.observe(el);
     return () => ro.disconnect();
-  }, [getMaxPrimary, initialPrimarySize, manualPrimarySize]);
+  }, [getMaxPrimary, initialPrimarySize, manualPrimarySize, minPrimarySize]);
   React.useEffect(() => {
     if (!storageKey) return;
     if (manualPrimarySize === null) {

package/dist/components/split-pane/provider/SplitPaneContext.js

@@ -72,7 +72,7 @@ function SplitPaneProvider({
     const ro = new ResizeObserver(clampToContainer);
     ro.observe(el);
     return () => ro.disconnect();
-  }, [getMaxPrimary, initialPrimarySize, manualPrimarySize]);
+  }, [getMaxPrimary, initialPrimarySize, manualPrimarySize, minPrimarySize]);
   useEffect(() => {
     if (!storageKey) return;
     if (manualPrimarySize === null) {

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

@@ -48,7 +48,9 @@
 .tableRoot {
   --table-component-header-bg: var(--table-header-bg);
   --table-component-header-fg: var(--table-header-fg);
-  --table-component-header-font-weight: var(--font-weight-medium);
+  --table-component-header-font-size: var(--font-size-table-header);
+  --table-component-header-line-height: var(--line-height-table-header);
+  --table-component-header-font-weight: var(--font-weight-table-header);
   --table-component-row-bg: var(--table-row-bg);
   --table-component-row-bg-hover: var(--color-bg-hover-subtle);
   --table-component-row-bg-selected: var(--table-row-bg-selected);
@@ -156,7 +158,8 @@
   background-color: var(--table-component-header-bg);
   padding-block: var(--spacing-xxs);
   padding-inline: var(--spacing-sm);
-  font-size: var(--font-size-xs);
+  font-size: var(--table-component-header-font-size);
+  line-height: var(--table-component-header-line-height);
   font-weight: var(--table-component-header-font-weight);
   color: var(--table-component-header-fg);
   white-space: nowrap;
@@ -231,7 +234,7 @@
 
 .headerCell.selectionCell,
 .cell.selectionCell {
-  padding-inline: calc(var(--spacing-xxs) + 6px) var(--spacing-sm);
+  padding-inline: calc(var(--spacing-xxs) + 2px);
   cursor: pointer;
   overflow: visible;
   line-height: 0;
@@ -442,8 +445,8 @@
   display: inline-flex;
   flex: 0 0 auto;
   align-items: center;
-  color: var(--color-fg-subtle);
-  opacity: 0.9;
+  color: var(--color-disabled-fg);
+  opacity: 1;
 }
 
 .sortIndicator svg {
@@ -456,11 +459,11 @@
 }
 
 .inActiveSort {
-  opacity: 0.45;
+  opacity: 0.8;
 }
 
 .activeSort {
-  color: var(--color-fg-default);
+  color: var(--color-disabled-fg);
 }
 
 .cellContent {

package/dist/components/table/TanstackTable.cjs

@@ -177,7 +177,7 @@ function TanstackTable(props) {
       dataKey,
       data: visibleData,
       columns: columnItems,
-      tableWidth: (distributedLayout == null ? void 0 : distributedLayout.shouldOverflow) ? distributedLayout.totalWidth : void 0,
+      tableWidth: distributedLayout == null ? void 0 : distributedLayout.totalWidth,
       measuringLayout: !initialLayoutReady,
       sortById,
       sortDirection,

package/dist/components/table/TanstackTable.js

@@ -152,7 +152,7 @@ function TanstackTable(props) {
       dataKey,
       data: visibleData,
       columns: columnItems,
-      tableWidth: (distributedLayout == null ? void 0 : distributedLayout.shouldOverflow) ? distributedLayout.totalWidth : void 0,
+      tableWidth: distributedLayout == null ? void 0 : distributedLayout.totalWidth,
       measuringLayout: !initialLayoutReady,
       sortById,
       sortDirection,

package/dist/components/table/table.utils.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const SELECTION_COLUMN_PX = 40;
+const SELECTION_COLUMN_PX = 32;
 const ACTIONS_COLUMN_PX = 0;
 const DEFAULT_COLUMN_PX = 150;
 function getVisibleColumns(columns) {

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

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import type { ColumnItem } from './Table.types';
-export declare const SELECTION_COLUMN_PX: 40;
+export declare const SELECTION_COLUMN_PX: 32;
 export declare const ACTIONS_COLUMN_PX: 0;
 export declare const DEFAULT_COLUMN_PX: 150;
 export type SortDirection = 'asc' | 'desc' | null;

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

@@ -1,4 +1,4 @@
-const SELECTION_COLUMN_PX = 40;
+const SELECTION_COLUMN_PX = 32;
 const ACTIONS_COLUMN_PX = 0;
 const DEFAULT_COLUMN_PX = 150;
 function getVisibleColumns(columns) {

package/dist/hooks/usePersistentState.cjs

@@ -31,8 +31,7 @@ function usePersistentState({
   const [value, setValue] = react.useState(() => {
     if (!shouldHydrate || !sync) return initialValue;
     const stored = readStorage(storage, storageKey);
-    const currentValidate = validateRef.current;
-    return currentValidate == null || currentValidate(stored) ? stored : initialValue;
+    return validate == null || validate(stored) ? stored : initialValue;
   });
   const hydrated = !shouldHydrate || didHydrate;
   react.useEffect(() => {

package/dist/hooks/usePersistentState.js

@@ -29,8 +29,7 @@ function usePersistentState({
   const [value, setValue] = useState(() => {
     if (!shouldHydrate || !sync) return initialValue;
     const stored = readStorage(storage, storageKey);
-    const currentValidate = validateRef.current;
-    return currentValidate == null || currentValidate(stored) ? stored : initialValue;
+    return validate == null || validate(stored) ? stored : initialValue;
   });
   const hydrated = !shouldHydrate || didHydrate;
   useEffect(() => {

package/dist/hooks/useSorting.d.ts

@@ -1,5 +1,5 @@
 export type SortDirection = 'asc' | 'desc' | null;
-export type SortState<T = unknown> = {
+export type SortState<_T = unknown> = {
     sortBy: string | null;
     sortDirection: SortDirection;
 };

package/dist/hooks/useTimeDuration.cjs

@@ -32,16 +32,20 @@ function useTimeDuration({
   formatDuration = defaultDuration
 }) {
   const [hydrated, setHydrated] = react.useState(false);
-  const [tick, setTick] = react.useState(0);
-  react.useEffect(() => setHydrated(true), []);
+  const [now, setNow] = react.useState(0);
+  react.useEffect(() => {
+    setHydrated(true);
+    setNow(Date.now());
+  }, []);
   react.useEffect(() => {
     if (!liveUpdate) return;
     if (end && end.getTime() <= Date.now()) return;
     const timer = setInterval(() => {
-      if (end && end.getTime() <= Date.now()) {
+      const next = Date.now();
+      setNow(next);
+      if (end && end.getTime() <= next) {
         clearInterval(timer);
       }
-      setTick((tick2) => tick2 + 1);
     }, 1e3);
     return () => clearInterval(timer);
   }, [liveUpdate, end]);
@@ -57,7 +61,6 @@ function useTimeDuration({
   }, [end, hydrated, fallback, dateFormat]);
   const duration = react.useMemo(() => {
     if (!start || !hydrated) return fallback;
-    const now = Date.now();
     if (!end) {
       return formatDuration(now - start.getTime());
     }
@@ -65,7 +68,7 @@ function useTimeDuration({
       return formatDuration(end.getTime() - now);
     }
     return formatDuration(end.getTime() - start.getTime());
-  }, [start, end, fallback, hydrated, formatDuration, tick]);
+  }, [start, end, fallback, hydrated, formatDuration, now]);
   return { started, ended, isFinished: !!start && !!end, duration, hydrated };
 }
 

package/dist/hooks/useTimeDuration.js

@@ -30,16 +30,20 @@ function useTimeDuration({
   formatDuration = defaultDuration
 }) {
   const [hydrated, setHydrated] = useState(false);
-  const [tick, setTick] = useState(0);
-  useEffect(() => setHydrated(true), []);
+  const [now, setNow] = useState(0);
+  useEffect(() => {
+    setHydrated(true);
+    setNow(Date.now());
+  }, []);
   useEffect(() => {
     if (!liveUpdate) return;
     if (end && end.getTime() <= Date.now()) return;
     const timer = setInterval(() => {
-      if (end && end.getTime() <= Date.now()) {
+      const next = Date.now();
+      setNow(next);
+      if (end && end.getTime() <= next) {
         clearInterval(timer);
       }
-      setTick((tick2) => tick2 + 1);
     }, 1e3);
     return () => clearInterval(timer);
   }, [liveUpdate, end]);
@@ -55,7 +59,6 @@ function useTimeDuration({
   }, [end, hydrated, fallback, dateFormat]);
   const duration = useMemo(() => {
     if (!start || !hydrated) return fallback;
-    const now = Date.now();
     if (!end) {
       return formatDuration(now - start.getTime());
     }
@@ -63,7 +66,7 @@ function useTimeDuration({
       return formatDuration(end.getTime() - now);
     }
     return formatDuration(end.getTime() - start.getTime());
-  }, [start, end, fallback, hydrated, formatDuration, tick]);
+  }, [start, end, fallback, hydrated, formatDuration, now]);
   return { started, ended, isFinished: !!start && !!end, duration, hydrated };
 }
 

package/dist/index.cjs

@@ -36,6 +36,11 @@ var Alert = require('./components/alert/Alert');
 var InlineStatus = require('./components/inline-status/InlineStatus');
 var MediaCard = require('./components/media-card/MediaCard');
 var HighlightedText = require('./components/highlighted-text/HighlightedText');
+var ButtonSelect = require('./components/button-select/ButtonSelect');
+var Sidebar = require('./components/sidebar/Sidebar');
+var SplitButton = require('./components/split-button/SplitButton');
+var ChipMultiToggle = require('./components/filtering/chip-multi-toggle/ChipMultiToggle');
+var CheckboxGroup = require('./components/forms/checkbox-group/CheckboxGroup');
 
 
 
@@ -255,3 +260,33 @@ Object.keys(HighlightedText).forEach(function (k) {
 		get: function () { return HighlightedText[k]; }
 	});
 });
+Object.keys(ButtonSelect).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return ButtonSelect[k]; }
+	});
+});
+Object.keys(Sidebar).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return Sidebar[k]; }
+	});
+});
+Object.keys(SplitButton).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return SplitButton[k]; }
+	});
+});
+Object.keys(ChipMultiToggle).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return ChipMultiToggle[k]; }
+	});
+});
+Object.keys(CheckboxGroup).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return CheckboxGroup[k]; }
+	});
+});

package/dist/index.d.ts

@@ -35,3 +35,8 @@ export * from './components/alert/Alert';
 export * from './components/inline-status/InlineStatus';
 export * from './components/media-card/MediaCard';
 export * from './components/highlighted-text/HighlightedText';
+export * from './components/button-select/ButtonSelect';
+export * from './components/sidebar/Sidebar';
+export * from './components/split-button/SplitButton';
+export * from './components/filtering/chip-multi-toggle/ChipMultiToggle';
+export * from './components/forms/checkbox-group/CheckboxGroup';

package/dist/index.js

@@ -34,3 +34,8 @@ export * from './components/alert/Alert';
 export * from './components/inline-status/InlineStatus';
 export * from './components/media-card/MediaCard';
 export * from './components/highlighted-text/HighlightedText';
+export * from './components/button-select/ButtonSelect';
+export * from './components/sidebar/Sidebar';
+export * from './components/split-button/SplitButton';
+export * from './components/filtering/chip-multi-toggle/ChipMultiToggle';
+export * from './components/forms/checkbox-group/CheckboxGroup';

package/dist/styles/styles.css

@@ -99,10 +99,11 @@ body.dbc-app {
   max-width: var(--card-label-width);
   overflow: hidden;
   text-overflow: ellipsis;
-  font-size: var(--font-size-xs);
-  color: var(--color-fg-subtle);
+  font-size: var(--font-size-table-header);
+  line-height: var(--line-height-table-header);
+  color: var(--table-header-fg);
   letter-spacing: var(--letter-spacing-wide);
-  font-weight: var(--font-weight-default);
+  font-weight: var(--font-weight-table-header);
 }
 
 .dbc-table td {

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

@@ -74,6 +74,11 @@
   --font-size-xl: 24px;
   --font-size-2xl: 30px;
 
+  /* Semantic typography */
+  --font-size-table-header: 13px;
+  --line-height-table-header: 16px;
+  --font-weight-table-header: var(--font-weight-semibold);
+
   --font-weight-default: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;

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

@@ -246,7 +246,7 @@ html {
   --color-logo-fg: var(--color-fg-default);
 
   /* Tables */
-  --table-header-bg: light-dark(#f8f9fb, #1b2533);
+  --table-header-bg: light-dark(#f3f4f6, #1b2533);
   --table-row-bg: light-dark(#ffffff, #111827);
   --table-row-bg-alt: light-dark(#f7f9fc, #141d2a);
   --table-row-bg-hover: light-dark(#eef2f7, #172131);

package/dist/styles.css

@@ -99,10 +99,11 @@ body.dbc-app {
   max-width: var(--card-label-width);
   overflow: hidden;
   text-overflow: ellipsis;
-  font-size: var(--font-size-xs);
-  color: var(--color-fg-subtle);
+  font-size: var(--font-size-table-header);
+  line-height: var(--line-height-table-header);
+  color: var(--table-header-fg);
   letter-spacing: var(--letter-spacing-wide);
-  font-weight: var(--font-weight-default);
+  font-weight: var(--font-weight-table-header);
 }
 
 .dbc-table td {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.164",
+  "version": "0.0.166",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",
@@ -32,7 +32,7 @@
     },
     "./themes/*": "./dist/themes/*",
     "./styles/themes/*": "./dist/styles/themes/*",
-    "./styles.css": "./dist/styles/styles.css",
+    "./styles.css": "./dist/styles.css",
     "./assets/*": "./dist/assets/*",
     "./tanstack": {
       "types": "./dist/tanstack.d.ts",
@@ -83,7 +83,7 @@
     "@storybook/addon-docs": "^10.3.5",
     "@storybook/react-vite": "^10.3.5",
     "@swc/core": "^1.15.11",
-    "@tanstack/react-table": "^8.20.0",
+    "@tanstack/react-table": "^8.21.3",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.14",