@dbcdk/react-components 0.0.155 → 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.cjs

@@ -15,13 +15,16 @@ function getMaxWidthClass(value, styles2) {
   return styles2.maxWidthMd;
 }
 const VALID_ENVIRONMENTS = ["production", "staging", "test"];
+const ENVIRONMENT_ALIASES = { prod: "production" };
 function resolveEnvBanner(environment, customEnv, customEnvSeverity) {
+  var _a;
   if (customEnv != null && customEnvSeverity != null) {
     return /* @__PURE__ */ jsxRuntime.jsx(EnvironmentBanner.EnvironmentBanner, { customLabel: customEnv, customSeverity: customEnvSeverity });
   }
   const normalised = environment == null ? void 0 : environment.toLowerCase();
-  if (normalised != null && VALID_ENVIRONMENTS.includes(normalised)) {
-    return /* @__PURE__ */ jsxRuntime.jsx(EnvironmentBanner.EnvironmentBanner, { environment: normalised });
+  const resolved = normalised != null ? (_a = ENVIRONMENT_ALIASES[normalised]) != null ? _a : normalised : void 0;
+  if (resolved != null && VALID_ENVIRONMENTS.includes(resolved)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(EnvironmentBanner.EnvironmentBanner, { environment: resolved });
   }
   return null;
 }

package/dist/components/page-layout/PageLayout.d.ts

@@ -11,7 +11,8 @@ export interface PageLayoutProps extends PropsWithChildren {
     containScrolling?: boolean;
     orientation?: Orientation;
     /** Pass a deployment environment string (e.g. process.env.DEPLOYMENT_ENV).
-     *  Renders a banner for 'production', 'staging', or 'test'. Ignored for unknown values or undefined. */
+     *  Renders a banner for 'production', 'staging', or 'test'. 'prod' is accepted as an alias for
+     *  'production'. Ignored for unknown values or undefined. */
     environment?: string;
     /** Custom banner label — requires customEnvSeverity. */
     customEnv?: string;

package/dist/components/page-layout/PageLayout.js

@@ -9,13 +9,16 @@ function getMaxWidthClass(value, styles2) {
   return styles2.maxWidthMd;
 }
 const VALID_ENVIRONMENTS = ["production", "staging", "test"];
+const ENVIRONMENT_ALIASES = { prod: "production" };
 function resolveEnvBanner(environment, customEnv, customEnvSeverity) {
+  var _a;
   if (customEnv != null && customEnvSeverity != null) {
     return /* @__PURE__ */ jsx(EnvironmentBanner, { customLabel: customEnv, customSeverity: customEnvSeverity });
   }
   const normalised = environment == null ? void 0 : environment.toLowerCase();
-  if (normalised != null && VALID_ENVIRONMENTS.includes(normalised)) {
-    return /* @__PURE__ */ jsx(EnvironmentBanner, { environment: normalised });
+  const resolved = normalised != null ? (_a = ENVIRONMENT_ALIASES[normalised]) != null ? _a : normalised : void 0;
+  if (resolved != null && VALID_ENVIRONMENTS.includes(resolved)) {
+    return /* @__PURE__ */ jsx(EnvironmentBanner, { environment: resolved });
   }
   return null;
 }

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

@@ -64,17 +64,42 @@
   grid-template-rows: auto 1fr;
 }
 
+/* documentScrolling only has `min-height` (so long content can still grow the
+   page), which leaves the grid container's own block-size indefinite — and an
+   indefinite container makes the `1fr` row above size itself from its content
+   (i.e. from the sidebar's own capped height below) instead of from real
+   leftover viewport space. Any drift between --page-layout-banner-height's
+   estimate and the banner's real rendered height then inflated the whole page,
+   but only once the sidenav's content was tall enough to hit that cap — giving
+   this one combination a real, definite block-size makes the `1fr` row's size
+   come from the banner's actual rendered height, so the estimate is only ever
+   used below as a cap, never as the page's actual size. */
+.documentScrolling.vertical.hasBanner {
+  height: 100vh;
+  height: 100dvh;
+}
+
 /* Sidebar */
 .sidebar {
   min-width: 0;
   min-block-size: 0; /* CRITICAL: else a tall sidenav grows the grid row instead of scrolling */
   overflow: hidden;
   background: var(--color-bg-surface);
+
+  /* Hug the sidebar's own content width instead of stretching to fill the "auto"
+     column — some browsers size that column wider than the content once a
+     descendant scrollbar reserves space, leaving a visible gap otherwise. */
+  justify-self: start;
 }
 
+/* The Sidebar/SidebarContainer inside already owns its own internal scrolling
+   (its root is height:100%; overflow:auto). This wrapper only needs to cap the
+   available height — if it *also* reserves its own scrollbar, that scrollbar's
+   width gets folded into this box's max-content size (used by `justify-self:
+   start` above), making it a scrollbar's-width wider than the fixed-width
+   Sidebar inside and leaving a gap on the right edge. */
 .containScrolling .sidebar {
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
+  overflow: hidden;
 }
 
 /* Pin the sidebar to the viewport and let it scroll independently of the document.
@@ -85,8 +110,9 @@
   top: 0;
   max-block-size: 100vh;
   max-block-size: 100dvh;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
+  /* See the .containScrolling .sidebar comment above — same double-scrollbar
+     reasoning applies here. */
+  overflow: hidden;
 }
 
 /* Leave room for the banner's height, and stick below it instead of at top:0 so it
@@ -106,9 +132,10 @@
   block-size: 100dvh;
 }
 
-/* In horizontal orientation, sidebar becomes a top block if used */
+/* In horizontal orientation, sidebar becomes a full-width top block if used */
 .horizontal .sidebar {
   grid-column: 1 / -1;
+  justify-self: stretch;
   border-right: none;
   border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
 }
@@ -188,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.155",
+  "version": "0.0.157",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",