@dbcdk/react-components 0.0.156 → 0.0.158

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

@@ -114,10 +114,6 @@
   border-bottom: var(--acc-item-separator, none);
 }
 
-.item[data-state='open'] .headerRow {
-  background: var(--color-bg-contextual);
-}
-
 :global(.outlined) .item[data-state='open'] .headerRow {
   box-shadow: inset 3px 0 0 var(--color-border-selected);
 }

package/dist/components/alert/Alert.module.css

@@ -57,7 +57,6 @@
 
 .body {
   font-size: var(--font-size-sm);
-  line-height: var(--line-height-normal);
 }
 
 .neutral {

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

@@ -2,7 +2,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--spacing-xs);
+  gap: var(--spacing-xxs);
 
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
@@ -214,10 +214,13 @@
   background-color: transparent;
   border-color: transparent;
   padding: var(--spacing-xxs);
+  color: var(--color-fg-default);
+}
+
+.button.inline:not(.sm):not(.lg):not(.xs) {
   min-block-size: unset;
   block-size: unset;
   height: unset;
-  color: var(--color-fg-default);
 }
 
 .button.inline:hover {

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

@@ -70,8 +70,12 @@
   --card-padding: var(--spacing-xl);
 }
 
+.sm .content {
+  gap: var(--spacing-xs);
+}
+
 .md .content {
-  gap: var(--spacing-md);
+  gap: var(--spacing-sm);
 }
 
 .lg .content {

package/dist/components/forms/input/Input.module.css

@@ -464,3 +464,15 @@
   min-inline-size: calc(16px + (var(--spacing-xxs) * 2));
   min-block-size: calc(16px + (var(--spacing-xxs) * 2));
 }
+
+.clearSlot > * {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--transition-fast) var(--ease-standard);
+}
+
+.field:hover .clearSlot > *,
+.field:focus-within .clearSlot > * {
+  opacity: 1;
+  pointer-events: auto;
+}

package/dist/components/forms/radio-buttons/RadioButtons.module.css

@@ -56,9 +56,16 @@
   transform: scale(1);
 }
 
-/* hover (only when not disabled) */
-.input:not(:disabled):hover + .radio {
-  border-color: var(--color-brand-hover);
+/* hover (only when not disabled/checked) — triggers from anywhere in the
+   control, not just the input itself, so hovering the label or an
+   interactive endAdornment (e.g. a menu trigger) also highlights the radio
+   icon. Reads a CSS variable (rather than a hardcoded color) so an
+   ancestor outside this module — e.g. a Menu row that already shows its
+   own hover feedback — can suppress this by setting the variable; that
+   works across CSS-module file boundaries where class-name hashing would
+   otherwise prevent one module's selectors from targeting another's. */
+.container:hover .radio:not(.disabled):not(.checked) {
+  border-color: var(--radio-hover-border-color, var(--color-brand-hover));
 }
 
 /* focus ring */

package/dist/components/headline/CollapsibleHeadline.cjs

@@ -61,6 +61,7 @@ function CollapsibleHeadline({
               shape: "round",
               type: "button",
               variant: "inline",
+              style: { padding: "var(--spacing-2xs)" },
               "aria-expanded": isExpanded,
               "aria-controls": panelId,
               onClick: handleToggle,

package/dist/components/headline/CollapsibleHeadline.js

@@ -55,6 +55,7 @@ function CollapsibleHeadline({
               shape: "round",
               type: "button",
               variant: "inline",
+              style: { padding: "var(--spacing-2xs)" },
               "aria-expanded": isExpanded,
               "aria-controls": panelId,
               onClick: handleToggle,

package/dist/components/headline/Headline.module.css

@@ -52,34 +52,10 @@
   display: contents;
 }
 
-/* CollapsibleHeadline toggle button */
-.toggleButton {
-  all: unset;
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 auto;
-  padding: var(--spacing-2xs);
-  border-radius: var(--border-radius-sm);
-  cursor: pointer;
-  color: var(--color-fg-subtle);
-  transition: color var(--transition-fast) var(--ease-standard);
-}
-
-.toggleButton:hover {
-  color: var(--color-fg-default);
-}
-
-.toggleButton:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-}
-
 .toggleChevron {
   display: block;
-  width: var(--icon-size-md);
-  height: var(--icon-size-md);
+  width: 0.85em;
+  height: 0.85em;
   transition: transform var(--transition-normal) var(--ease-standard);
 }
 

package/dist/components/icon/Icon.cjs

@@ -17,11 +17,22 @@ const SeverityIcon = {
   brand: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Building2, {}),
   accent: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, {})
 };
-function Icon({ severity, label, customIcon }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.container}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${styles__default.default.icon} ${severity ? styles__default.default[severity] : ""} dbc-icon`, children: customIcon ? customIcon : severity ? SeverityIcon[severity] : null }),
-    label && /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
-  ] });
+function Icon({
+  severity,
+  label,
+  customIcon,
+  size = "md",
+  iconPosition = "start"
+}) {
+  const iconEl = /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${styles__default.default.icon} ${severity ? styles__default.default[severity] : ""} dbc-icon`, children: customIcon ? customIcon : severity ? SeverityIcon[severity] : null });
+  const labelEl = label && /* @__PURE__ */ jsxRuntime.jsx("span", { children: label });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.container, "data-size": size, children: iconPosition === "end" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    labelEl,
+    iconEl
+  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    iconEl,
+    labelEl
+  ] }) });
 }
 
 exports.Icon = Icon;

package/dist/components/icon/Icon.d.ts

@@ -1,10 +1,14 @@
 import type { ReactNode, JSX } from 'react';
 import { Severity } from '../../constants/severity.types';
 export declare const SeverityIcon: Record<Severity, ReactNode>;
+type IconSize = 'xs' | 'md';
+type IconPosition = 'start' | 'end';
 interface IconProps {
     severity?: Severity;
     customIcon?: ReactNode;
     label?: string;
+    size?: IconSize;
+    iconPosition?: IconPosition;
 }
-export declare function Icon({ severity, label, customIcon }: IconProps): JSX.Element;
+export declare function Icon({ severity, label, customIcon, size, iconPosition, }: IconProps): JSX.Element;
 export {};

package/dist/components/icon/Icon.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Sparkles, Building2, CircleAlert, Info, CircleX, CircleCheck } from 'lucide-react';
 import styles from './Icon.module.css';
 
@@ -11,11 +11,22 @@ const SeverityIcon = {
   brand: /* @__PURE__ */ jsx(Building2, {}),
   accent: /* @__PURE__ */ jsx(Sparkles, {})
 };
-function Icon({ severity, label, customIcon }) {
-  return /* @__PURE__ */ jsxs("div", { className: `${styles.container}`, children: [
-    /* @__PURE__ */ jsx("span", { className: `${styles.icon} ${severity ? styles[severity] : ""} dbc-icon`, children: customIcon ? customIcon : severity ? SeverityIcon[severity] : null }),
-    label && /* @__PURE__ */ jsx("span", { children: label })
-  ] });
+function Icon({
+  severity,
+  label,
+  customIcon,
+  size = "md",
+  iconPosition = "start"
+}) {
+  const iconEl = /* @__PURE__ */ jsx("span", { className: `${styles.icon} ${severity ? styles[severity] : ""} dbc-icon`, children: customIcon ? customIcon : severity ? SeverityIcon[severity] : null });
+  const labelEl = label && /* @__PURE__ */ jsx("span", { children: label });
+  return /* @__PURE__ */ jsx("div", { className: styles.container, "data-size": size, children: iconPosition === "end" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    labelEl,
+    iconEl
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    iconEl,
+    labelEl
+  ] }) });
 }
 
 export { Icon, SeverityIcon };

package/dist/components/icon/Icon.module.css

@@ -7,6 +7,11 @@
   font-size: var(--font-size-sm);
 }
 
+.container[data-size='xs'] {
+  gap: var(--spacing-2xs);
+  font-size: var(--font-size-xs);
+}
+
 .icon {
   display: flex;
 }
@@ -16,6 +21,10 @@
   width: auto;
 }
 
+.container[data-size='xs'] .icon svg {
+  height: var(--icon-size-sm);
+}
+
 .success {
   color: var(--color-status-success);
 }

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

@@ -133,6 +133,18 @@
   background-color: var(--color-bg-toolbar-hover);
 }
 
+/* The row already conveys hover via the background color above, covering
+   the whole item consistently. Suppress RadioButton's own icon hover
+   border here — otherwise it only lights up when the pointer happens to
+   be over the icon/label/endAdornment rather than anywhere in the row.
+   RadioButton's hashed class names can't be targeted directly from this
+   module, so this relies on a CSS custom property that RadioButton's own
+   hover rule reads — custom properties inherit through the DOM regardless
+   of CSS-module class hashing. */
+.row:hover > .interactiveChild {
+  --radio-hover-border-color: var(--color-border-default);
+}
+
 /* Focus ring: support both cases */
 .interactive:focus-visible {
   outline: none;

package/dist/components/nav-bar/NavBar.module.css

@@ -177,7 +177,7 @@
 /* Active underline */
 .link.active,
 .link[aria-current='page'] {
-  color: var(--color-fg-default);
+  color: var(--color-brand);
   box-shadow: none;
 }
 

package/dist/components/page/Page.cjs

@@ -27,15 +27,16 @@ function Page({
 }) {
   const showContentBox = contentBox && !disableContentBox;
   const maxWidthClass = maxWidth ? styles__default.default[`maxWidth${maxWidth.charAt(0).toUpperCase()}${maxWidth.slice(1)}`] : "";
-  const hasHeadline = Boolean(header || subheader || headerAddition);
+  const showHeaderContainer = Boolean(header || headerAddition);
+  const showHeadline = Boolean(header || subheader);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: `${styles__default.default.container} ${containScrolling ? styles__default.default.containScrolling : styles__default.default.documentScrolling} ${disableTopPadding ? styles__default.default.disableTopPadding : ""} ${maxWidthClass}`,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.headerContainer, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.headerMain, children: [
+        showHeaderContainer ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.headerContainer, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.headerMain, children: [
           breadcrumbs ? /* @__PURE__ */ jsxRuntime.jsx(Breadcrumbs.Breadcrumbs, { items: breadcrumbs }) : null,
-          hasHeadline ? /* @__PURE__ */ jsxRuntime.jsx(
+          showHeadline ? /* @__PURE__ */ jsxRuntime.jsx(
             Headline.Headline,
             {
               disableMargin: true,
@@ -46,8 +47,8 @@ function Page({
               addition: headerAddition,
               children: header
             }
-          ) : null
-        ] }) }),
+          ) : headerAddition
+        ] }) }) : null,
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {

package/dist/components/page/Page.js

@@ -21,15 +21,16 @@ function Page({
 }) {
   const showContentBox = contentBox && !disableContentBox;
   const maxWidthClass = maxWidth ? styles[`maxWidth${maxWidth.charAt(0).toUpperCase()}${maxWidth.slice(1)}`] : "";
-  const hasHeadline = Boolean(header || subheader || headerAddition);
+  const showHeaderContainer = Boolean(header || headerAddition);
+  const showHeadline = Boolean(header || subheader);
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: `${styles.container} ${containScrolling ? styles.containScrolling : styles.documentScrolling} ${disableTopPadding ? styles.disableTopPadding : ""} ${maxWidthClass}`,
       children: [
-        /* @__PURE__ */ jsx("div", { className: styles.headerContainer, children: /* @__PURE__ */ jsxs("div", { className: styles.headerMain, children: [
+        showHeaderContainer ? /* @__PURE__ */ jsx("div", { className: styles.headerContainer, children: /* @__PURE__ */ jsxs("div", { className: styles.headerMain, children: [
           breadcrumbs ? /* @__PURE__ */ jsx(Breadcrumbs, { items: breadcrumbs }) : null,
-          hasHeadline ? /* @__PURE__ */ jsx(
+          showHeadline ? /* @__PURE__ */ jsx(
             Headline,
             {
               disableMargin: true,
@@ -40,8 +41,8 @@ function Page({
               addition: headerAddition,
               children: header
             }
-          ) : null
-        ] }) }),
+          ) : headerAddition
+        ] }) }) : null,
         /* @__PURE__ */ jsx(
           "div",
           {

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

@@ -215,12 +215,8 @@
   align-items: center;
 
   background: var(--color-bg-surface);
-  padding: var(--spacing-xl) var(--spacing-xl);
-  overflow: visible;
-}
-
-.vertical .content {
   padding: var(--spacing-md);
+  overflow: visible;
 }
 
 .footer {

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

@@ -48,7 +48,6 @@
 .tableRoot {
   --table-component-header-bg: var(--table-header-bg);
   --table-component-header-fg: var(--table-header-fg);
-  --table-component-header-border: var(--table-border-header);
   --table-component-header-font-weight: var(--font-weight-medium);
   --table-component-row-bg: var(--table-row-bg);
   --table-component-row-bg-alt: var(--table-row-bg-alt);
@@ -78,7 +77,6 @@
 .embedded {
   --table-component-header-bg: transparent;
   --table-component-header-fg: var(--color-fg-subtle);
-  --table-component-header-border: transparent;
   --table-component-header-font-weight: var(--font-weight-default);
   --table-component-row-bg: transparent;
   --table-component-row-bg-alt: color-mix(
@@ -162,13 +160,10 @@
 .headerCell {
   vertical-align: middle;
   background-color: var(--table-component-header-bg);
-  border-block-end: 1px solid var(--table-component-header-border);
   padding-block: var(--spacing-xxs);
   padding-inline: var(--spacing-sm);
   font-size: var(--font-size-xs);
   font-weight: var(--table-component-header-font-weight);
-  letter-spacing: var(--letter-spacing-wide);
-  text-transform: uppercase;
   color: var(--table-component-header-fg);
   white-space: nowrap;
 }
@@ -213,7 +208,6 @@
 }
 
 .sm .contextMenuOverlay {
-  inset-block: 0;
   min-block-size: 0;
   block-size: min(100%, 32px);
 }
@@ -396,7 +390,7 @@
   all: unset;
   display: inline-flex;
   align-items: center;
-  gap: 4px;
+  gap: var(--spacing-2xs);
   min-width: 0;
   max-inline-size: 100%;
   cursor: pointer;
@@ -405,6 +399,17 @@
   padding-block: 2px;
   padding-inline: 2px;
   justify-content: flex-start;
+  transition: color var(--transition-fast) var(--ease-standard);
+}
+
+.thButton:hover {
+  color: var(--color-fg-default);
+}
+
+.thButton:focus-visible {
+  outline: none;
+  color: var(--color-fg-default);
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
 }
 
 .thButtonRight {
@@ -470,6 +475,10 @@
   opacity: 0.45;
 }
 
+.activeSort {
+  color: var(--color-fg-default);
+}
+
 .cellContent {
   display: flex;
   inline-size: 100%;
@@ -564,8 +573,8 @@
 
 .contextMenuTrigger {
   color: var(--color-fg-subtle);
-  min-inline-size: 36px;
-  min-block-size: 36px;
+  min-inline-size: var(--component-size-sm);
+  min-block-size: var(--component-size-sm);
   border-radius: var(--border-radius-rounded);
 }
 
@@ -576,21 +585,33 @@
 
 .contextMenuAnchorCell .cellValueEllipsis,
 .contextMenuAnchorCell .cellValueNoEllipsis {
-  padding-inline-end: calc(36px + var(--spacing-sm));
+  padding-inline-end: calc(var(--component-size-sm) + var(--spacing-sm));
 }
 
 .contextMenuOverlay {
   position: absolute;
-  inset-block-start: 0;
+  inset-block: 0;
   inset-inline-end: 0;
   display: inline-flex;
-  align-items: center;
   justify-content: center;
   min-inline-size: 40px;
-  block-size: min(100%, 40px);
   z-index: 3;
 }
 
+/*
+ * Popover's own wrapper divs (.container/.triggerSlot) default to
+ * align-items: stretch so a trigger can fill a fixed-height form row.
+ * That stretches our small "sm" trigger button to the full row height
+ * instead of letting it size itself, so it's overridden here rather
+ * than in Popover.module.css to avoid affecting other Popover consumers.
+ * (.contextMenuOverlay itself has no align-items to override: its only
+ * child, Popover's .container, always sets an explicit height: 100%.)
+ */
+.contextMenuOverlay > div,
+.contextMenuOverlay > div > div {
+  align-items: center;
+}
+
 .contextMenuOverlay:hover .contextMenuTrigger,
 .contextMenuOverlay:focus-within .contextMenuTrigger {
   background-color: var(--opac-bg-light);

package/dist/components/table/components/TableHeaderCell.cjs

@@ -21,7 +21,6 @@ function TableHeaderCell({
   const active = table_utils.isActiveSort(sortById, column.id);
   const ariaSort = table_utils.getAriaSort(column.sortable, active, sortDirection != null ? sortDirection : null);
   const align = table_classes.getAlignValue(column);
-  const dividerClass = table_classes.getDividerClass(column);
   const alignClasses = table_classes.getHeaderAlignClasses(align);
   const handleToggleSort = () => {
     if (!column.sortable || !onSortChange) return;
@@ -31,7 +30,7 @@ function TableHeaderCell({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "th",
     {
-      className: table_classes.cx(styles__default.default.headerCell, dividerClass),
+      className: styles__default.default.headerCell,
       scope: "col",
       "aria-sort": ariaSort,
       "data-align": align,
@@ -52,8 +51,8 @@ function TableHeaderCell({
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: alignClasses.label, children: table_utils.getHeaderLabel(column.header) }),
               /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.sortIndicator, "aria-hidden": "true", children: [
-                active && sortDirection === "asc" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, {}),
-                active && sortDirection === "desc" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, {}),
+                active && sortDirection === "asc" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: styles__default.default.activeSort }),
+                active && sortDirection === "desc" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: styles__default.default.activeSort }),
                 !active && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: styles__default.default.inActiveSort })
               ] })
             ]

package/dist/components/table/components/TableHeaderCell.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { ArrowUp, ArrowDown } from 'lucide-react';
-import { getAlignValue, getDividerClass, getHeaderAlignClasses, cx } from '../table.classes';
+import { getAlignValue, getHeaderAlignClasses } from '../table.classes';
 import styles from '../Table.module.css';
 import { isActiveSort, getAriaSort, getHeaderLabel, shouldToggleOnKey, getNextSortDirection } from '../table.utils';
 
@@ -15,7 +15,6 @@ function TableHeaderCell({
   const active = isActiveSort(sortById, column.id);
   const ariaSort = getAriaSort(column.sortable, active, sortDirection != null ? sortDirection : null);
   const align = getAlignValue(column);
-  const dividerClass = getDividerClass(column);
   const alignClasses = getHeaderAlignClasses(align);
   const handleToggleSort = () => {
     if (!column.sortable || !onSortChange) return;
@@ -25,7 +24,7 @@ function TableHeaderCell({
   return /* @__PURE__ */ jsxs(
     "th",
     {
-      className: cx(styles.headerCell, dividerClass),
+      className: styles.headerCell,
       scope: "col",
       "aria-sort": ariaSort,
       "data-align": align,
@@ -46,8 +45,8 @@ function TableHeaderCell({
             children: [
               /* @__PURE__ */ jsx("span", { className: alignClasses.label, children: getHeaderLabel(column.header) }),
               /* @__PURE__ */ jsxs("span", { className: styles.sortIndicator, "aria-hidden": "true", children: [
-                active && sortDirection === "asc" && /* @__PURE__ */ jsx(ArrowUp, {}),
-                active && sortDirection === "desc" && /* @__PURE__ */ jsx(ArrowDown, {}),
+                active && sortDirection === "asc" && /* @__PURE__ */ jsx(ArrowUp, { className: styles.activeSort }),
+                active && sortDirection === "desc" && /* @__PURE__ */ jsx(ArrowDown, { className: styles.activeSort }),
                 !active && /* @__PURE__ */ jsx(ArrowDown, { className: styles.inActiveSort })
               ] })
             ]

package/dist/components/tabs/Tabs.module.css

@@ -184,12 +184,12 @@
    ========================= */
 
 .tabs.outlined {
-  gap: var(--spacing-lg);
+  gap: var(--spacing-md);
 }
 
 .headerContainerOutlined {
   padding-block-start: var(--spacing-sm);
-  padding-block-end: var(--spacing-sm);
+  padding-block-end: 0;
 }
 
 .headerContainerOutlined.disableTopPadding {

package/dist/styles/styles.css

@@ -89,6 +89,7 @@ body.dbc-app {
 .dbc-table th,
 .dbc-table td {
   padding-block: var(--spacing-xxs);
+  padding-inline: var(--spacing-xxs);
   vertical-align: baseline;
 }
 
@@ -101,9 +102,7 @@ body.dbc-app {
   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);
 }
 
 .dbc-table td {
@@ -115,8 +114,37 @@ body.dbc-app {
   word-break: break-word;
 }
 
-.dbc-table--hover tbody tr:hover {
+/* Larger vertical padding (default is --spacing-xxs) */
+.dbc-table--md th,
+.dbc-table--md td {
+  padding-block: var(--spacing-xs);
+}
+
+/* --hover can go on the <table> (every row hovers) or directly on a <tr>
+   (opt in only specific rows, leaving the rest unaffected). */
+.dbc-table--hover tbody tr:hover,
+tr.dbc-table--hover:hover {
   background-color: var(--color-bg-contextual);
+  cursor: pointer;
+}
+
+/* Round the hovered row's leading/trailing edge (tr itself can't take a
+   border-radius reliably in table layout) — same token as Menu.item's
+   hover background. */
+.dbc-table--hover tbody tr:hover th:first-child,
+.dbc-table--hover tbody tr:hover td:first-child,
+tr.dbc-table--hover:hover th:first-child,
+tr.dbc-table--hover:hover td:first-child {
+  border-top-left-radius: var(--border-radius-md);
+  border-bottom-left-radius: var(--border-radius-md);
+}
+
+.dbc-table--hover tbody tr:hover th:last-child,
+.dbc-table--hover tbody tr:hover td:last-child,
+tr.dbc-table--hover:hover th:last-child,
+tr.dbc-table--hover:hover td:last-child {
+  border-top-right-radius: var(--border-radius-md);
+  border-bottom-right-radius: var(--border-radius-md);
 }
 
 .dbc-table--clickableRow tbody tr:hover {
@@ -128,7 +156,8 @@ body.dbc-app {
   background-color: var(--table-row-bg-alt);
 }
 
-.dbc-table--striped.dbc-table--hover tbody tr:hover {
+.dbc-table--striped.dbc-table--hover tbody tr:hover,
+.dbc-table--striped tr.dbc-table--hover:hover {
   background-color: var(--table-row-bg-hover);
 }
 
@@ -162,65 +191,13 @@ body.dbc-app {
   vertical-align: middle;
 }
 
-/* Matrix / comparison table */
-
-.dbc-table--matrix {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.dbc-table--matrix th,
-.dbc-table--matrix td {
-  padding: var(--spacing-sm) var(--spacing-md);
-  border-bottom: var(--border-width-thin) solid var(--table-border-subtle);
-}
-
-.dbc-table--matrix thead th {
-  color: var(--table-header-fg);
-  background-color: transparent;
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
-  letter-spacing: var(--letter-spacing-wide);
-  text-transform: uppercase;
-}
-
-.dbc-table--matrix tbody th {
-  color: var(--color-fg-default);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-  letter-spacing: normal;
-  text-transform: none;
-}
-
-.dbc-table--matrix td {
-  color: var(--table-cell-fg);
-  text-align: right;
-  font-variant-numeric: tabular-nums;
-  white-space: nowrap;
-}
-
-.dbc-table--matrix th:not(:first-child) {
+/* Per-cell text alignment. Apply directly to a th/td to right-align that
+   column's header/content. */
+.dbc-table th.dbc-table--align-right,
+.dbc-table td.dbc-table--align-right {
   text-align: right;
 }
 
-.dbc-table--matrix tr:last-child th,
-.dbc-table--matrix tr:last-child td {
-  border-bottom: 0;
-}
-
-.dbc-table--matrix-group-header th {
-  border-bottom: 0;
-  text-align: center;
-}
-
-.dbc-table--matrix-group-header th:first-child {
-  text-align: left;
-}
-
-.dbc-table--matrix-current {
-  background-color: color-mix(in srgb, var(--color-bg-selected) 45%, var(--color-bg-surface));
-}
-
 /* ==========================================================================
    Text / utility classes
    ========================================================================== */

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

@@ -240,7 +240,7 @@ html {
   --button-fg-primary: var(--color-fg-on-brand);
 
   /* Tables */
-  --table-header-bg: light-dark(#f5f6f8, #182230);
+  --table-header-bg: light-dark(#f8f9fb, #1b2533);
   --table-row-bg: light-dark(#ffffff, #111827);
   --table-row-bg-alt: light-dark(#f7f9fc, #141d2a);
   --table-row-bg-hover: light-dark(#eef2f7, #172131);
@@ -248,10 +248,9 @@ html {
   --table-row-bg-selected-hover: var(--dbc-blue-150);
 
   --table-border-subtle: light-dark(#eef1f4, rgba(255, 255, 255, 0.08));
-  --table-border-header: light-dark(#e2e6ea, rgba(255, 255, 255, 0.12));
   --table-divider: light-dark(#e8ebef, rgba(255, 255, 255, 0.08));
 
-  --table-header-fg: var(--color-fg-muted);
+  --table-header-fg: var(--color-fg-subtle);
   --table-cell-fg: var(--color-fg-default);
 
   /* ==========================================================================

package/dist/styles.css

@@ -89,6 +89,7 @@ body.dbc-app {
 .dbc-table th,
 .dbc-table td {
   padding-block: var(--spacing-xxs);
+  padding-inline: var(--spacing-xxs);
   vertical-align: baseline;
 }
 
@@ -101,9 +102,7 @@ body.dbc-app {
   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);
 }
 
 .dbc-table td {
@@ -115,8 +114,37 @@ body.dbc-app {
   word-break: break-word;
 }
 
-.dbc-table--hover tbody tr:hover {
+/* Larger vertical padding (default is --spacing-xxs) */
+.dbc-table--md th,
+.dbc-table--md td {
+  padding-block: var(--spacing-xs);
+}
+
+/* --hover can go on the <table> (every row hovers) or directly on a <tr>
+   (opt in only specific rows, leaving the rest unaffected). */
+.dbc-table--hover tbody tr:hover,
+tr.dbc-table--hover:hover {
   background-color: var(--color-bg-contextual);
+  cursor: pointer;
+}
+
+/* Round the hovered row's leading/trailing edge (tr itself can't take a
+   border-radius reliably in table layout) — same token as Menu.item's
+   hover background. */
+.dbc-table--hover tbody tr:hover th:first-child,
+.dbc-table--hover tbody tr:hover td:first-child,
+tr.dbc-table--hover:hover th:first-child,
+tr.dbc-table--hover:hover td:first-child {
+  border-top-left-radius: var(--border-radius-md);
+  border-bottom-left-radius: var(--border-radius-md);
+}
+
+.dbc-table--hover tbody tr:hover th:last-child,
+.dbc-table--hover tbody tr:hover td:last-child,
+tr.dbc-table--hover:hover th:last-child,
+tr.dbc-table--hover:hover td:last-child {
+  border-top-right-radius: var(--border-radius-md);
+  border-bottom-right-radius: var(--border-radius-md);
 }
 
 .dbc-table--clickableRow tbody tr:hover {
@@ -128,7 +156,8 @@ body.dbc-app {
   background-color: var(--table-row-bg-alt);
 }
 
-.dbc-table--striped.dbc-table--hover tbody tr:hover {
+.dbc-table--striped.dbc-table--hover tbody tr:hover,
+.dbc-table--striped tr.dbc-table--hover:hover {
   background-color: var(--table-row-bg-hover);
 }
 
@@ -162,65 +191,13 @@ body.dbc-app {
   vertical-align: middle;
 }
 
-/* Matrix / comparison table */
-
-.dbc-table--matrix {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.dbc-table--matrix th,
-.dbc-table--matrix td {
-  padding: var(--spacing-sm) var(--spacing-md);
-  border-bottom: var(--border-width-thin) solid var(--table-border-subtle);
-}
-
-.dbc-table--matrix thead th {
-  color: var(--table-header-fg);
-  background-color: transparent;
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
-  letter-spacing: var(--letter-spacing-wide);
-  text-transform: uppercase;
-}
-
-.dbc-table--matrix tbody th {
-  color: var(--color-fg-default);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-  letter-spacing: normal;
-  text-transform: none;
-}
-
-.dbc-table--matrix td {
-  color: var(--table-cell-fg);
-  text-align: right;
-  font-variant-numeric: tabular-nums;
-  white-space: nowrap;
-}
-
-.dbc-table--matrix th:not(:first-child) {
+/* Per-cell text alignment. Apply directly to a th/td to right-align that
+   column's header/content. */
+.dbc-table th.dbc-table--align-right,
+.dbc-table td.dbc-table--align-right {
   text-align: right;
 }
 
-.dbc-table--matrix tr:last-child th,
-.dbc-table--matrix tr:last-child td {
-  border-bottom: 0;
-}
-
-.dbc-table--matrix-group-header th {
-  border-bottom: 0;
-  text-align: center;
-}
-
-.dbc-table--matrix-group-header th:first-child {
-  text-align: left;
-}
-
-.dbc-table--matrix-current {
-  background-color: color-mix(in srgb, var(--color-bg-selected) 45%, var(--color-bg-surface));
-}
-
 /* ==========================================================================
    Text / utility classes
    ========================================================================== */

package/package.json

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