@dbcdk/react-components 0.0.108 → 0.0.109

package/dist/components/button/Button.module.css

@@ -108,6 +108,9 @@
   padding-inline: var(--spacing-sm);
 }
 
+.button.sm {
+  gap: var(--spacing-xxs);
+}
 .button.sm svg {
   inline-size: var(--icon-size-sm);
   block-size: var(--icon-size-sm);

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

@@ -70,7 +70,10 @@
   --card-padding: var(--spacing-xl);
 }
 
-.md .content,
+.md .content {
+  gap: var(--spacing-md);
+}
+
 .lg .content {
   gap: var(--spacing-lg);
 }

package/dist/components/menu/Menu.cjs

@@ -30,7 +30,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-const INTERACTIVE_SELECTOR = 'a:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"]):not([aria-disabled="true"]), [role="menuitem"]:not([aria-disabled="true"]), [role="option"]:not([aria-disabled="true"])';
+const INTERACTIVE_SELECTOR = 'a:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"]):not([aria-disabled="true"]), [role="menuitem"]:not([aria-disabled="true"]), [role="menuitemradio"]:not([aria-disabled="true"]), [role="menuitemcheckbox"]:not([aria-disabled="true"]), [role="option"]:not([aria-disabled="true"])';
 function getMenuItems(el) {
   return Array.from(el.querySelectorAll(INTERACTIVE_SELECTOR));
 }
@@ -211,7 +211,26 @@ const MenuCheckItem = React__namespace.forwardRef(
 );
 MenuCheckItem.displayName = "Menu.CheckItem";
 const MenuRadioItem = React__namespace.forwardRef(
-  ({ name, value, checked, disabled, label, onValueChange, className, ...liProps }, ref) => {
+  ({
+    name,
+    value,
+    checked,
+    active,
+    disabled,
+    label,
+    interactiveRef,
+    interactiveProps,
+    onValueChange,
+    className,
+    ...liProps
+  }, ref) => {
+    var _a, _b;
+    const interactiveClass = [
+      styles__default.default.interactiveChild,
+      styles__default.default.item,
+      active ? styles__default.default.active : "",
+      checked ? styles__default.default.selected : ""
+    ].filter(Boolean).join(" ");
     return /* @__PURE__ */ jsxRuntime.jsx(
       "li",
       {
@@ -222,14 +241,32 @@ const MenuRadioItem = React__namespace.forwardRef(
         children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: styles__default.default.interactiveChild,
+            ref: interactiveRef,
+            role: (_a = interactiveProps == null ? void 0 : interactiveProps.role) != null ? _a : "menuitemradio",
+            tabIndex: (_b = interactiveProps == null ? void 0 : interactiveProps.tabIndex) != null ? _b : 0,
+            "aria-checked": checked || void 0,
+            "aria-selected": checked || void 0,
+            "aria-disabled": disabled || void 0,
+            className: interactiveClass,
+            ...interactiveProps,
             onClick: (event) => {
-              var _a;
+              var _a2, _b2;
+              (_a2 = interactiveProps == null ? void 0 : interactiveProps.onClick) == null ? void 0 : _a2.call(interactiveProps, event);
+              if (event.defaultPrevented) return;
               if (disabled) return;
               const target = event.target;
-              if ((_a = target.closest("label")) != null ? _a : target.closest("input")) return;
+              if ((_b2 = target.closest("label")) != null ? _b2 : target.closest("input")) return;
               onValueChange == null ? void 0 : onValueChange(value);
             },
+            onKeyDown: (event) => {
+              var _a2;
+              (_a2 = interactiveProps == null ? void 0 : interactiveProps.onKeyDown) == null ? void 0 : _a2.call(interactiveProps, event);
+              if (event.defaultPrevented || disabled) return;
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                onValueChange == null ? void 0 : onValueChange(value);
+              }
+            },
             children: /* @__PURE__ */ jsxRuntime.jsx(
               RadioButton.RadioButton,
               {

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

@@ -40,8 +40,11 @@ export interface MenuRadioItemProps extends Omit<React.LiHTMLAttributes<HTMLLIEl
     name: string;
     value: string;
     checked: boolean;
+    active?: boolean;
     disabled?: boolean;
     label: string;
+    interactiveRef?: React.Ref<HTMLDivElement>;
+    interactiveProps?: React.HTMLAttributes<HTMLDivElement>;
     onValueChange?: (value: string) => void;
 }
 export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLUListElement>> & {

package/dist/components/menu/Menu.js

@@ -5,7 +5,7 @@ import styles from './Menu.module.css';
 import { Checkbox } from '../forms/checkbox/Checkbox';
 import { RadioButton } from '../forms/radio-buttons/RadioButton';
 
-const INTERACTIVE_SELECTOR = 'a:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"]):not([aria-disabled="true"]), [role="menuitem"]:not([aria-disabled="true"]), [role="option"]:not([aria-disabled="true"])';
+const INTERACTIVE_SELECTOR = 'a:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"]):not([aria-disabled="true"]), [role="menuitem"]:not([aria-disabled="true"]), [role="menuitemradio"]:not([aria-disabled="true"]), [role="menuitemcheckbox"]:not([aria-disabled="true"]), [role="option"]:not([aria-disabled="true"])';
 function getMenuItems(el) {
   return Array.from(el.querySelectorAll(INTERACTIVE_SELECTOR));
 }
@@ -186,7 +186,26 @@ const MenuCheckItem = React.forwardRef(
 );
 MenuCheckItem.displayName = "Menu.CheckItem";
 const MenuRadioItem = React.forwardRef(
-  ({ name, value, checked, disabled, label, onValueChange, className, ...liProps }, ref) => {
+  ({
+    name,
+    value,
+    checked,
+    active,
+    disabled,
+    label,
+    interactiveRef,
+    interactiveProps,
+    onValueChange,
+    className,
+    ...liProps
+  }, ref) => {
+    var _a, _b;
+    const interactiveClass = [
+      styles.interactiveChild,
+      styles.item,
+      active ? styles.active : "",
+      checked ? styles.selected : ""
+    ].filter(Boolean).join(" ");
     return /* @__PURE__ */ jsx(
       "li",
       {
@@ -197,14 +216,32 @@ const MenuRadioItem = React.forwardRef(
         children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: styles.interactiveChild,
+            ref: interactiveRef,
+            role: (_a = interactiveProps == null ? void 0 : interactiveProps.role) != null ? _a : "menuitemradio",
+            tabIndex: (_b = interactiveProps == null ? void 0 : interactiveProps.tabIndex) != null ? _b : 0,
+            "aria-checked": checked || void 0,
+            "aria-selected": checked || void 0,
+            "aria-disabled": disabled || void 0,
+            className: interactiveClass,
+            ...interactiveProps,
             onClick: (event) => {
-              var _a;
+              var _a2, _b2;
+              (_a2 = interactiveProps == null ? void 0 : interactiveProps.onClick) == null ? void 0 : _a2.call(interactiveProps, event);
+              if (event.defaultPrevented) return;
               if (disabled) return;
               const target = event.target;
-              if ((_a = target.closest("label")) != null ? _a : target.closest("input")) return;
+              if ((_b2 = target.closest("label")) != null ? _b2 : target.closest("input")) return;
               onValueChange == null ? void 0 : onValueChange(value);
             },
+            onKeyDown: (event) => {
+              var _a2;
+              (_a2 = interactiveProps == null ? void 0 : interactiveProps.onKeyDown) == null ? void 0 : _a2.call(interactiveProps, event);
+              if (event.defaultPrevented || disabled) return;
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                onValueChange == null ? void 0 : onValueChange(value);
+              }
+            },
             children: /* @__PURE__ */ jsx(
               RadioButton,
               {

package/dist/components/metric-tile/MetricTile.cjs

@@ -8,15 +8,22 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
+function toSize(v) {
+  return typeof v === "number" ? `${v}px` : v;
+}
 function MetricTile({
   severity,
   label,
   value,
   tooltip,
   size = "md",
-  width
+  minWidth,
+  maxWidth
 }) {
-  const style = width != null ? { width: typeof width === "number" ? `${width}px` : width } : void 0;
+  const style = minWidth != null || maxWidth != null ? {
+    ...minWidth != null ? { minWidth: toSize(minWidth) } : {},
+    ...maxWidth != null ? { maxWidth: toSize(maxWidth) } : {}
+  } : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(client.Tooltip, { content: tooltip, placement: "bottom", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.tile, "data-severity": severity, "data-size": size, style, children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.value, children: value })

package/dist/components/metric-tile/MetricTile.d.ts

@@ -1,13 +1,15 @@
 import type { ReactNode, JSX } from 'react';
 import { Severity } from '../../constants/severity.types';
 type MetricTileSize = 'sm' | 'md' | 'lg';
+type SizeValue = number | string;
 interface MetricTileProps {
     severity: Severity;
     label: string;
     value: string | number;
     tooltip?: ReactNode;
     size?: MetricTileSize;
-    width?: number | string;
+    minWidth?: SizeValue;
+    maxWidth?: SizeValue;
 }
-export declare function MetricTile({ severity, label, value, tooltip, size, width, }: MetricTileProps): JSX.Element;
+export declare function MetricTile({ severity, label, value, tooltip, size, minWidth, maxWidth, }: MetricTileProps): JSX.Element;
 export {};

package/dist/components/metric-tile/MetricTile.js

@@ -2,15 +2,22 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { Tooltip } from '../../client';
 import styles from './MetricTile.module.css';
 
+function toSize(v) {
+  return typeof v === "number" ? `${v}px` : v;
+}
 function MetricTile({
   severity,
   label,
   value,
   tooltip,
   size = "md",
-  width
+  minWidth,
+  maxWidth
 }) {
-  const style = width != null ? { width: typeof width === "number" ? `${width}px` : width } : void 0;
+  const style = minWidth != null || maxWidth != null ? {
+    ...minWidth != null ? { minWidth: toSize(minWidth) } : {},
+    ...maxWidth != null ? { maxWidth: toSize(maxWidth) } : {}
+  } : void 0;
   return /* @__PURE__ */ jsx(Tooltip, { content: tooltip, placement: "bottom", children: /* @__PURE__ */ jsxs("span", { className: styles.tile, "data-severity": severity, "data-size": size, style, children: [
     /* @__PURE__ */ jsx("span", { className: styles.label, children: label }),
     /* @__PURE__ */ jsx("span", { className: styles.value, children: value })

package/dist/components/metric-tile/MetricTile.module.css

@@ -3,9 +3,9 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: var(--spacing-2xs);
-  padding: var(--spacing-sm) var(--spacing-md);
-  min-width: 72px;
+  gap: 2px;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  min-width: 64px;
   overflow: hidden;
   box-sizing: border-box;
   border-radius: var(--border-radius-md);
@@ -14,35 +14,37 @@
 }
 
 .tile[data-size='sm'] {
-  padding: var(--spacing-xs) var(--spacing-sm);
+  gap: 1px;
+  padding: 6px var(--spacing-sm);
   min-width: 56px;
   border-radius: var(--border-radius-sm);
 }
 
 .tile[data-size='lg'] {
+  gap: var(--spacing-2xs);
   padding: var(--spacing-md) var(--spacing-lg);
   min-width: 96px;
   border-radius: var(--border-radius-lg);
 }
 
 .tile[data-severity='success'] {
-  background-color: var(--color-status-success-bg);
-  color: var(--color-status-success-fg);
+  background-color: var(--color-status-success-bg-soft);
+  color: var(--color-status-success-fg-soft);
 }
 
 .tile[data-severity='error'] {
-  background-color: var(--color-status-error-bg);
-  color: var(--color-status-error-fg);
+  background-color: var(--color-status-error-bg-soft);
+  color: var(--color-status-error-fg-soft);
 }
 
 .tile[data-severity='warning'] {
-  background-color: var(--color-status-warning-bg);
-  color: var(--color-status-warning-fg);
+  background-color: var(--color-status-warning-bg-soft);
+  color: var(--color-status-warning-fg-soft);
 }
 
 .tile[data-severity='info'] {
-  background-color: var(--color-status-info-bg);
-  color: var(--color-status-info-fg);
+  background-color: var(--color-status-info-bg-soft);
+  color: var(--color-status-info-fg-soft);
 }
 
 .tile[data-severity='neutral'] {
@@ -57,7 +59,7 @@
 
 .label {
   font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-semibold, 600);
   text-transform: uppercase;
   letter-spacing: var(--letter-spacing-wide);
   line-height: 1;
@@ -69,9 +71,10 @@
 }
 
 .value {
-  font-size: var(--font-size-lg);
+  font-size: var(--font-size-md);
   font-weight: var(--font-weight-bold);
   line-height: 1;
+  font-variant-numeric: tabular-nums;
   max-width: 100%;
   overflow: hidden;
   white-space: nowrap;
@@ -79,7 +82,8 @@
 }
 
 .tile[data-size='sm'] .label {
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-xs);
+  letter-spacing: normal;
 }
 
 .tile[data-size='sm'] .value {

package/dist/components/overlay/tooltip/Tooltip.cjs

@@ -4,6 +4,21 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var useTooltipTrigger = require('./useTooltipTrigger');
 
+function mergeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (!ref) continue;
+      if (typeof ref === "function") ref(node);
+      else ref.current = node;
+    }
+  };
+}
+function composeHandlers(childHandler, tooltipHandler) {
+  return (event) => {
+    childHandler == null ? void 0 : childHandler(event);
+    tooltipHandler == null ? void 0 : tooltipHandler(event);
+  };
+}
 function Tooltip({
   children,
   content,
@@ -11,10 +26,9 @@ function Tooltip({
   open,
   offset = 8,
   delayOpenMs,
-  delayCloseMs,
-  className,
-  ...rest
+  delayCloseMs
 }) {
+  var _a;
   const { triggerProps } = useTooltipTrigger.useTooltipTrigger({
     content,
     placement,
@@ -23,12 +37,20 @@ function Tooltip({
     delayOpenMs,
     delayCloseMs
   });
-  const rootClass = react.useMemo(
-    () => ["TooltipContainer", className].filter(Boolean).join(" "),
-    [className]
-  );
   if (!content) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: rootClass, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "TooltipTrigger", tabIndex: 0, ...triggerProps, children }) });
+  const child = children;
+  const childProps = child.props;
+  const childRef = (_a = childProps.ref) != null ? _a : child.ref;
+  return react.cloneElement(child, {
+    ...childProps,
+    ref: mergeRefs(childRef, triggerProps.ref),
+    onPointerEnter: composeHandlers(childProps.onPointerEnter, triggerProps.onPointerEnter),
+    onPointerLeave: composeHandlers(childProps.onPointerLeave, triggerProps.onPointerLeave),
+    onPointerDown: composeHandlers(childProps.onPointerDown, triggerProps.onPointerDown),
+    onFocus: composeHandlers(childProps.onFocus, triggerProps.onFocus),
+    onBlur: composeHandlers(childProps.onBlur, triggerProps.onBlur),
+    "aria-describedby": [childProps["aria-describedby"], triggerProps["aria-describedby"]].filter(Boolean).join(" ") || void 0
+  });
 }
 
 exports.Tooltip = Tooltip;

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

@@ -1,13 +1,12 @@
-import { type ReactNode, type HTMLAttributes, type ReactElement } from 'react';
+import { type ReactElement, type ReactNode } from 'react';
 import { TooltipPlacement } from './TooltipProvider';
-export interface TooltipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'content'> {
-    children: ReactNode;
+export interface TooltipProps {
+    children: ReactElement;
     content: ReactNode;
     placement?: TooltipPlacement;
     open?: boolean;
     offset?: number;
     delayOpenMs?: number;
     delayCloseMs?: number;
-    className?: string;
 }
-export declare function Tooltip({ children, content, placement, open, offset, delayOpenMs, delayCloseMs, className, ...rest }: TooltipProps): ReactElement;
+export declare function Tooltip({ children, content, placement, open, offset, delayOpenMs, delayCloseMs, }: TooltipProps): ReactElement;

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

@@ -1,7 +1,22 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
-import { useMemo } from 'react';
+import { cloneElement } from 'react';
 import { useTooltipTrigger } from './useTooltipTrigger';
 
+function mergeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (!ref) continue;
+      if (typeof ref === "function") ref(node);
+      else ref.current = node;
+    }
+  };
+}
+function composeHandlers(childHandler, tooltipHandler) {
+  return (event) => {
+    childHandler == null ? void 0 : childHandler(event);
+    tooltipHandler == null ? void 0 : tooltipHandler(event);
+  };
+}
 function Tooltip({
   children,
   content,
@@ -9,10 +24,9 @@ function Tooltip({
   open,
   offset = 8,
   delayOpenMs,
-  delayCloseMs,
-  className,
-  ...rest
+  delayCloseMs
 }) {
+  var _a;
   const { triggerProps } = useTooltipTrigger({
     content,
     placement,
@@ -21,12 +35,20 @@ function Tooltip({
     delayOpenMs,
     delayCloseMs
   });
-  const rootClass = useMemo(
-    () => ["TooltipContainer", className].filter(Boolean).join(" "),
-    [className]
-  );
   if (!content) return /* @__PURE__ */ jsx(Fragment, { children });
-  return /* @__PURE__ */ jsx("span", { className: rootClass, ...rest, children: /* @__PURE__ */ jsx("span", { className: "TooltipTrigger", tabIndex: 0, ...triggerProps, children }) });
+  const child = children;
+  const childProps = child.props;
+  const childRef = (_a = childProps.ref) != null ? _a : child.ref;
+  return cloneElement(child, {
+    ...childProps,
+    ref: mergeRefs(childRef, triggerProps.ref),
+    onPointerEnter: composeHandlers(childProps.onPointerEnter, triggerProps.onPointerEnter),
+    onPointerLeave: composeHandlers(childProps.onPointerLeave, triggerProps.onPointerLeave),
+    onPointerDown: composeHandlers(childProps.onPointerDown, triggerProps.onPointerDown),
+    onFocus: composeHandlers(childProps.onFocus, triggerProps.onFocus),
+    onBlur: composeHandlers(childProps.onBlur, triggerProps.onBlur),
+    "aria-describedby": [childProps["aria-describedby"], triggerProps["aria-describedby"]].filter(Boolean).join(" ") || void 0
+  });
 }
 
 export { Tooltip };

package/dist/components/table/Table.cjs

@@ -49,6 +49,7 @@ function Table({
   showGoToPage,
   showPageSize,
   pageSizeOptions,
+  showHeader = true,
   getRowSeverity,
   onRowClick,
   onRowMouseEnter,
@@ -143,6 +144,7 @@ function Table({
         {
           className: styles__default.default.tableElement,
           "aria-rowcount": data.length,
+          "data-show-header": showHeader,
           style: tableWidth != null ? { width: tableWidth } : void 0,
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("colgroup", { children: [
@@ -155,7 +157,7 @@ function Table({
                 column.id
               ))
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(
+            showHeader && /* @__PURE__ */ jsxRuntime.jsx(
               TableHeader.TableHeader,
               {
                 columns: visibleColumns,

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

@@ -1,4 +1,4 @@
 import type { JSX } from 'react';
 import type { TableProps } from './Table.types';
-export declare function Table<T extends Record<string, any>>({ data, dataKey, columns, selectedRows, selectionMode, allRowsSelected, sortById, sortDirection, loading, emptyConfig, variant, size, viewMode, striped, fillViewport, fillViewportBottomOffset, containScrolling, stickyHeader, tableWidth, tableRootRef, measuringLayout, toolbar, headerExtras, take, skip, totalItemsCount, paginationPlacement, showFirstLast, showGoToPage, showPageSize, pageSizeOptions, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, onSelectAllRows, onSortChange, onPageChange, ...rest }: TableProps<T>): JSX.Element;
+export declare function Table<T extends Record<string, any>>({ data, dataKey, columns, selectedRows, selectionMode, allRowsSelected, sortById, sortDirection, loading, emptyConfig, variant, size, viewMode, striped, fillViewport, fillViewportBottomOffset, containScrolling, stickyHeader, tableWidth, tableRootRef, measuringLayout, toolbar, headerExtras, take, skip, totalItemsCount, paginationPlacement, showFirstLast, showGoToPage, showPageSize, pageSizeOptions, showHeader, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, onSelectAllRows, onSortChange, onPageChange, ...rest }: TableProps<T>): JSX.Element;
 export type { ColumnItem } from './Table.types';

package/dist/components/table/Table.js

@@ -43,6 +43,7 @@ function Table({
   showGoToPage,
   showPageSize,
   pageSizeOptions,
+  showHeader = true,
   getRowSeverity,
   onRowClick,
   onRowMouseEnter,
@@ -137,6 +138,7 @@ function Table({
         {
           className: styles.tableElement,
           "aria-rowcount": data.length,
+          "data-show-header": showHeader,
           style: tableWidth != null ? { width: tableWidth } : void 0,
           children: [
             /* @__PURE__ */ jsxs("colgroup", { children: [
@@ -149,7 +151,7 @@ function Table({
                 column.id
               ))
             ] }),
-            /* @__PURE__ */ jsx(
+            showHeader && /* @__PURE__ */ jsx(
               TableHeader,
               {
                 columns: visibleColumns,

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

@@ -71,6 +71,10 @@
 .primary {
 }
 
+.embedded .cell {
+  border-block-end: none;
+}
+
 .embedded {
   --table-component-header-bg: transparent;
   --table-component-header-fg: var(--color-fg-subtle);
@@ -138,7 +142,7 @@
   min-block-size: 0;
 }
 
-.body .row:first-child .cell {
+[data-show-header='true'] .body .row:first-child .cell {
   border-block-start: var(--spacing-xs) solid var(--table-component-row-bg);
 }
 
@@ -324,6 +328,17 @@
   word-break: normal;
 }
 
+.allowOverflow {
+  overflow: visible;
+}
+
+.allowOverflow .cellContent,
+.allowOverflow .cellValueEllipsis,
+.allowOverflow .cellValueNoEllipsis {
+  overflow: visible;
+  text-overflow: clip;
+}
+
 .thInner {
   display: flex;
   align-items: center;
@@ -485,15 +500,25 @@
   text-overflow: ellipsis;
 }
 
-.cellContent[data-align='left'] .cellValueEllipsis {
+.cellValueNoEllipsis {
+  display: block;
+  inline-size: 100%;
+  min-width: 0;
+  max-inline-size: 100%;
+}
+
+.cellContent[data-align='left'] .cellValueEllipsis,
+.cellContent[data-align='left'] .cellValueNoEllipsis {
   text-align: left;
 }
 
-.cellContent[data-align='center'] .cellValueEllipsis {
+.cellContent[data-align='center'] .cellValueEllipsis,
+.cellContent[data-align='center'] .cellValueNoEllipsis {
   text-align: center;
 }
 
-.cellContent[data-align='right'] .cellValueEllipsis {
+.cellContent[data-align='right'] .cellValueEllipsis,
+.cellContent[data-align='right'] .cellValueNoEllipsis {
   text-align: right;
 }
 

package/dist/components/table/Table.types.d.ts

@@ -59,6 +59,7 @@ export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTML
     showGoToPage?: boolean;
     showPageSize?: boolean;
     pageSizeOptions?: number[];
+    showHeader?: boolean;
     getRowSeverity?: (row: T) => Severity | undefined;
     onRowClick?: (row: T) => void;
     onRowMouseEnter?: (row: T) => void;

package/dist/components/table/components/TableRow.cjs

@@ -116,13 +116,14 @@ function TableRow({
         columns.map((column) => {
           var _a2, _b, _c, _d;
           const allowWrap = table_utils.shouldAllowWrap(column.allowWrap, isSelected, viewMode);
-          column.allowOverflow;
+          const allowOverflow = column.allowOverflow;
           const cellValue = table_utils.getCellDisplayValue(row, column);
           return /* @__PURE__ */ jsxRuntime.jsx(
             "td",
             {
               className: table_classes.cx(
                 styles__default.default.cell,
+                allowOverflow && styles__default.default.allowOverflow,
                 allowWrap ? styles__default.default.allowWrap : styles__default.default.nowrap,
                 column.divider === "left" && styles__default.default.dividerLeft,
                 column.divider === "right" && styles__default.default.dividerRight
@@ -136,7 +137,13 @@ function TableRow({
                   className: styles__default.default.cellContent,
                   "data-align": (_c = column.align) != null ? _c : "left",
                   "data-vertical-align": (_d = column.verticalAlign) != null ? _d : "top",
-                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.cellValueEllipsis, children: cellValue })
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: allowOverflow ? styles__default.default.cellValueNoEllipsis : styles__default.default.cellValueEllipsis,
+                      children: cellValue
+                    }
+                  )
                 }
               )
             },

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

@@ -110,13 +110,14 @@ function TableRow({
         columns.map((column) => {
           var _a2, _b, _c, _d;
           const allowWrap = shouldAllowWrap(column.allowWrap, isSelected, viewMode);
-          column.allowOverflow;
+          const allowOverflow = column.allowOverflow;
           const cellValue = getCellDisplayValue(row, column);
           return /* @__PURE__ */ jsx(
             "td",
             {
               className: cx(
                 styles.cell,
+                allowOverflow && styles.allowOverflow,
                 allowWrap ? styles.allowWrap : styles.nowrap,
                 column.divider === "left" && styles.dividerLeft,
                 column.divider === "right" && styles.dividerRight
@@ -130,7 +131,13 @@ function TableRow({
                   className: styles.cellContent,
                   "data-align": (_c = column.align) != null ? _c : "left",
                   "data-vertical-align": (_d = column.verticalAlign) != null ? _d : "top",
-                  children: /* @__PURE__ */ jsx("div", { className: styles.cellValueEllipsis, children: cellValue })
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: allowOverflow ? styles.cellValueNoEllipsis : styles.cellValueEllipsis,
+                      children: cellValue
+                    }
+                  )
                 }
               )
             },

package/dist/styles/styles.css

@@ -236,6 +236,10 @@ body.dbc-app {
   color: var(--color-fg-subtle);
 }
 
+.dbc-tabular-nums {
+  font-variant-numeric: tabular-nums;
+}
+
 .dbc-sm-text {
   font-size: var(--font-size-xs);
 }

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

@@ -144,6 +144,33 @@ html {
   --color-status-info-border: color-mix(in srgb, var(--dbc-info-500) 24%, transparent);
   --color-status-info-fg: var(--dbc-info-700);
 
+  /* Soft status surfaces — for compact chips/badges, not alerts */
+  --color-status-success-bg-soft: color-mix(
+    in srgb,
+    var(--color-status-success) 10%,
+    var(--color-bg-surface)
+  );
+  --color-status-warning-bg-soft: color-mix(
+    in srgb,
+    var(--color-status-warning) 10%,
+    var(--color-bg-surface)
+  );
+  --color-status-error-bg-soft: color-mix(
+    in srgb,
+    var(--color-status-error) 8%,
+    var(--color-bg-surface)
+  );
+  --color-status-info-bg-soft: color-mix(
+    in srgb,
+    var(--color-status-info) 10%,
+    var(--color-bg-surface)
+  );
+
+  --color-status-success-fg-soft: var(--color-status-success-fg);
+  --color-status-warning-fg-soft: var(--color-status-warning-fg);
+  --color-status-error-fg-soft: var(--color-status-error-fg);
+  --color-status-info-fg-soft: var(--color-status-info-fg);
+
   /* Chart colors */
   --color-chart-empty: color-mix(in srgb, var(--color-fg-muted) 15%, rgb(255 255 255 / 0));
   --color-chart-neutral: color-mix(in srgb, var(--color-fg-muted) 25%, rgb(255 255 255 / 0));

package/dist/styles.css

@@ -236,6 +236,10 @@ body.dbc-app {
   color: var(--color-fg-subtle);
 }
 
+.dbc-tabular-nums {
+  font-variant-numeric: tabular-nums;
+}
+
 .dbc-sm-text {
   font-size: var(--font-size-xs);
 }

package/package.json

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