@dbcdk/react-components 0.0.157 → 0.0.158

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);

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, size = "md" }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.container, "data-size": size, 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

@@ -2,11 +2,13 @@ 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, size }: 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, size = "md" }) {
-  return /* @__PURE__ */ jsxs("div", { className: styles.container, "data-size": size, 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

@@ -8,7 +8,7 @@
 }
 
 .container[data-size='xs'] {
-  gap: 0;
+  gap: var(--spacing-2xs);
   font-size: var(--font-size-xs);
 }
 

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/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;
 }
@@ -395,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;
@@ -404,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 {
@@ -469,6 +475,10 @@
   opacity: 0.45;
 }
 
+.activeSort {
+  color: var(--color-fg-default);
+}
+
 .cellContent {
   display: flex;
   inline-size: 100%;

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,7 +184,7 @@
    ========================= */
 
 .tabs.outlined {
-  gap: var(--spacing-lg);
+  gap: var(--spacing-md);
 }
 
 .headerContainerOutlined {

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,66 +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-xxs) var(--spacing-sm);
-  border-bottom: var(--border-width-thin) solid var(--table-border-subtle);
-  line-height: var(--line-height-tight);
-}
-
-.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,66 +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-xxs) var(--spacing-sm);
-  border-bottom: var(--border-width-thin) solid var(--table-border-subtle);
-  line-height: var(--line-height-tight);
-}
-
-.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.157",
+  "version": "0.0.158",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",