@dbcdk/react-components 0.0.156 → 0.0.157

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

@@ -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/icon/Icon.cjs

@@ -17,8 +17,8 @@ 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: [
+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 })
   ] });

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

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

package/dist/components/icon/Icon.js

@@ -11,8 +11,8 @@ const SeverityIcon = {
   brand: /* @__PURE__ */ jsx(Building2, {}),
   accent: /* @__PURE__ */ jsx(Sparkles, {})
 };
-function Icon({ severity, label, customIcon }) {
-  return /* @__PURE__ */ jsxs("div", { className: `${styles.container}`, children: [
+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 })
   ] });

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

@@ -7,6 +7,11 @@
   font-size: var(--font-size-sm);
 }
 
+.container[data-size='xs'] {
+  gap: 0;
+  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/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

@@ -213,7 +213,6 @@
 }
 
 .sm .contextMenuOverlay {
-  inset-block: 0;
   min-block-size: 0;
   block-size: min(100%, 32px);
 }
@@ -564,8 +563,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 +575,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/tabs/Tabs.module.css

@@ -189,7 +189,7 @@
 
 .headerContainerOutlined {
   padding-block-start: var(--spacing-sm);
-  padding-block-end: var(--spacing-sm);
+  padding-block-end: 0;
 }
 
 .headerContainerOutlined.disableTopPadding {

package/dist/styles/styles.css

@@ -171,8 +171,9 @@ body.dbc-app {
 
 .dbc-table--matrix th,
 .dbc-table--matrix td {
-  padding: var(--spacing-sm) var(--spacing-md);
+  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 {

package/dist/styles.css

@@ -171,8 +171,9 @@ body.dbc-app {
 
 .dbc-table--matrix th,
 .dbc-table--matrix td {
-  padding: var(--spacing-sm) var(--spacing-md);
+  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 {

package/package.json

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