@dbcdk/react-components 0.0.20 → 0.0.22

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

@@ -1,11 +1,9 @@
 /* Root control group */
 .container {
-  /* inline-flex makes width behave weird in parents */
   display: inline-flex;
   align-items: stretch;
   flex-grow: 1;
   gap: 0;
-  /* width control */
   inline-size: var(--input-width, auto);
   min-inline-size: var(--input-min-width, 0);
   max-inline-size: var(--input-max-width, none);
@@ -24,21 +22,23 @@
   display: flex;
   align-items: center;
   flex: 1 1 auto;
-  min-inline-size: 0; /* critical for ellipsis inside flex */
+  min-inline-size: 0;
   color: var(--color-fg-default);
 }
 
 /* Actual input */
 .input {
   flex: 1 1 auto;
-  min-inline-size: 0; /* critical */
+  min-inline-size: 0;
   inline-size: 100%;
+  box-sizing: border-box;
+  text-overflow: ellipsis;
+
+  color: var(--color-fg-default);
   background: var(--color-bg-surface);
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
   line-height: var(--line-height-normal);
-  box-sizing: border-box;
-  text-overflow: ellipsis;
 
   border: var(--border-width-thin) solid var(--color-border-default);
   border-radius: var(--border-radius-default);
@@ -49,7 +49,8 @@
   transition:
     background-color var(--transition-fast) var(--ease-standard),
     border-color var(--transition-fast) var(--ease-standard),
-    box-shadow var(--transition-fast) var(--ease-standard);
+    box-shadow var(--transition-fast) var(--ease-standard),
+    color var(--transition-fast) var(--ease-standard);
 }
 
 .input::placeholder {
@@ -58,11 +59,13 @@
 
 .input:disabled {
   background-color: var(--color-disabled-bg);
-  border: 0;
+  border-color: transparent;
   color: var(--color-disabled-fg);
   cursor: not-allowed;
-  opacity: 0.5;
+  opacity: 1;
+  box-shadow: none;
 }
+
 /* Button group styling */
 .withButton .input {
   border-top-right-radius: 0;
@@ -74,27 +77,99 @@
   padding-inline-end: calc(var(--spacing-md) + 28px);
 }
 
-/* Hover & focus */
-.input:hover {
+/* Global focus reset - variants own visible focus treatment */
+.input:focus-visible {
+  outline: none;
+}
+
+/* =========================
+   Variants
+   ========================= */
+
+/* Stronger field chrome for forms/settings */
+.outlined {
+  background-color: var(--color-bg-surface);
+  border-color: var(--color-border-default);
+}
+
+.outlined:hover:not(:disabled) {
   border-color: var(--color-border-strong);
 }
 
-.input:focus-visible {
+.outlined:focus-visible:not(:disabled) {
   border-color: var(--color-border-selected);
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
 }
 
-/* Variants */
-.filled {
+.surface {
   background-color: var(--color-bg-surface);
+  border: 1px solid var(--color-border-subtle);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+}
+
+.surface:hover:not(:disabled) {
+  border-color: var(--color-border-default);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.surface:focus-visible:not(:disabled) {
+  border-color: var(--color-border-selected);
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
+}
+
+/* Old filled/tinted behavior, now renamed subtle */
+.subtle {
+  background-color: var(--color-bg-toolbar);
+  border-color: transparent;
+  box-shadow: inset 0 0 0 1px transparent;
+}
+
+.subtle:hover:not(:disabled) {
+  background-color: var(--color-bg-toolbar-hover);
 }
+
+.subtle:focus-visible:not(:disabled) {
+  border-color: var(--color-border-selected);
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
+}
+
+/* Embedded = chromeless input for grouped controls like FilterField */
+.embedded {
+  background-color: transparent;
+  border-color: transparent;
+  border-radius: 0;
+  box-shadow: none;
+  padding-inline: calc(var(--spacing-sm) + var(--spacing-2xs));
+  padding-block: 0;
+}
+
+.embedded:hover:not(:disabled),
+.embedded:focus:not(:disabled),
+.embedded:focus-visible:not(:disabled) {
+  background-color: transparent;
+  border-color: transparent;
+  box-shadow: none;
+  outline: none;
+}
+
 .standalone {
-  border-radius: var(--border-radius-rounded);
   background-color: var(--color-bg-surface);
+  border-color: var(--color-border-default);
+  border-radius: var(--border-radius-rounded);
   box-shadow: var(--shadow-xs), var(--shadow-md);
 }
 
-.outlined {
-  background-color: transparent;
+.standalone:hover:not(:disabled) {
+  border-color: var(--color-border-strong);
+  box-shadow: var(--shadow-sm), var(--shadow-md);
+}
+
+.standalone:focus-visible:not(:disabled) {
+  border-color: var(--color-border-selected);
+  box-shadow:
+    var(--shadow-xs),
+    var(--shadow-md),
+    inset 0 0 0 1px var(--color-border-selected);
 }
 
 /* Sizes */
@@ -103,14 +178,17 @@
   font-size: var(--font-size-sm);
   padding: 0 var(--spacing-xxs);
 }
+
 .sm {
   block-size: var(--component-size-sm);
   font-size: var(--font-size-sm);
 }
+
 .md {
   block-size: var(--component-size-md);
   font-size: var(--font-size-sm);
 }
+
 .lg {
   block-size: var(--component-size-lg);
   font-size: var(--font-size-lg);
@@ -121,6 +199,10 @@
   padding-inline-start: calc(var(--icon-size-md) + var(--spacing-lg));
 }
 
+.embedded.inputWithIcon {
+  padding-inline-start: calc(var(--icon-size-md) + var(--spacing-xl));
+}
+
 .icon {
   position: absolute;
   inset-inline-start: var(--spacing-md);
@@ -133,7 +215,13 @@
   block-size: var(--icon-size-md);
   pointer-events: none;
   color: var(--color-fg-subtle);
+  transition: color var(--transition-fast) var(--ease-standard);
 }
+
+.field:focus-within .icon {
+  color: var(--color-fg-muted);
+}
+
 .icon svg {
   inline-size: var(--icon-size-md);
   block-size: var(--icon-size-md);
@@ -147,6 +235,7 @@
   border-left: var(--border-width-thin) solid transparent;
   margin-left: calc(-1 * var(--border-width-thin));
 }
+
 .trailingButton:hover {
   border-color: var(--color-border-default);
   z-index: 2;

package/dist/components/hyperlink/Hyperlink.module.css

@@ -36,12 +36,24 @@
   }
 }
 
+.link {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+}
+
+.link {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+}
+
 .link::after {
   content: '';
   position: absolute;
   left: 0;
-  bottom: -2px;
-  width: 100%;
+  right: 0;
+  bottom: 1px;
   height: 1px;
   background-color: currentColor;
   transform: scaleX(0);
@@ -52,7 +64,6 @@
 .link:hover::after {
   transform: scaleX(1);
 }
-
 .link:focus-visible {
   outline: 2px solid var(--color-brand);
   outline-offset: 2px;

package/dist/components/interval-select/IntervalSelect.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Check, Clock } from 'lucide-react';
+import { Check } from 'lucide-react';
 import { useEffect, useId, useMemo, useRef, useState } from 'react';
 import { Button } from '../../components/button/Button';
 import { ClearButton } from '../../components/clear-button/ClearButton';
@@ -87,7 +87,7 @@ id, options, selectedValue, onChange, baseDate, placeholder = 'Vælg interval',
                         // Reset active to selected when opening
                         setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
                         onClick(e);
-                    }, size: size, type: "button", "aria-haspopup": "listbox", "aria-expanded": !!isOpen, "aria-controls": listboxId, "aria-invalid": Boolean(error) || undefined, "aria-describedby": describedBy, children: _jsxs("span", { className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs", style: { width: '100%' }, children: [_jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [_jsx(Clock, { size: 14 }), selected ? selected.label : placeholder] }), onClear && selected && _jsx(ClearButton, { onClick: onClear }), icon] }) })), children: _jsx(Menu, { id: listboxId, onKeyDown: handleKeyDown, role: "listbox", children: options.map((opt, index) => {
+                    }, size: size, type: "button", "aria-haspopup": "listbox", "aria-expanded": !!isOpen, "aria-controls": listboxId, "aria-invalid": Boolean(error) || undefined, "aria-describedby": describedBy, children: _jsxs("span", { className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs", style: { width: '100%' }, children: [_jsx("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: selected ? selected.label : placeholder }), onClear && selected && _jsx(ClearButton, { onClick: onClear }), icon] }) })), children: _jsx(Menu, { id: listboxId, onKeyDown: handleKeyDown, role: "listbox", children: options.map((opt, index) => {
                         const isSelected = opt.minutesAgo === selectedValue;
                         const isActive = index === activeIndex;
                         return (_jsx(Menu.Item, { active: isActive, 

package/dist/components/popover/Popover.module.css

@@ -1,6 +1,9 @@
 .container {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  align-items: stretch;
+  height: 100%;
+  min-width: 0;
 }
 
 .content {

package/dist/components/segmented-progress-bar/SegmentedProgressBar.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 import { TooltipPlacement } from '../../components/overlay/tooltip/TooltipProvider';
 import type { Severity } from '../../constants/severity.types';
+type ProgressSeverity = 'done' | 'progress' | 'missing';
 export type Segment = {
     value: number;
-    severity?: Severity;
+    severity?: Severity | ProgressSeverity;
     color?: string;
     label?: React.ReactNode;
 };
@@ -11,7 +12,7 @@ export interface SegmentedProgressBarProps {
     segments: Segment[];
     total?: number;
     showRemainder?: boolean;
-    remainderSeverity?: Severity;
+    remainderSeverity?: Severity | ProgressSeverity;
     centerLabel?: React.ReactNode | ((filledPct: number) => React.ReactNode);
     height?: number;
     rounded?: boolean;
@@ -22,3 +23,4 @@ export interface SegmentedProgressBarProps {
     'data-testid'?: string;
 }
 export declare const SegmentedProgressBar: React.FC<SegmentedProgressBarProps>;
+export {};

package/dist/components/segmented-progress-bar/SegmentedProgressBar.js

@@ -1,13 +1,10 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTooltipTrigger } from '../../components/overlay/tooltip/useTooltipTrigger';
-import { SeverityBgColor, SeverityTextColor } from '../../constants/severity';
 import styles from './SegmentedProgressBar.module.css';
 function SegmentWithTooltip({ seg, index, tooltipPlacement, }) {
-    var _a, _b, _c, _d, _e;
-    const bg = (_a = seg.color) !== null && _a !== void 0 ? _a : SeverityBgColor[(_b = seg.severity) !== null && _b !== void 0 ? _b : 'neutral'];
-    const fg = SeverityTextColor[(_c = seg.severity) !== null && _c !== void 0 ? _c : 'neutral'];
-    const tooltipContent = typeof seg.label !== 'undefined' ? seg.label : String((_d = seg.value) !== null && _d !== void 0 ? _d : 0);
+    var _a, _b;
+    const tooltipContent = typeof seg.label !== 'undefined' ? seg.label : String((_a = seg.value) !== null && _a !== void 0 ? _a : 0);
     const tooltipEnabled = tooltipContent !== null && tooltipContent !== undefined && tooltipContent !== '';
     const { triggerProps } = useTooltipTrigger({
         content: tooltipEnabled ? tooltipContent : null,
@@ -16,11 +13,13 @@ function SegmentWithTooltip({ seg, index, tooltipPlacement, }) {
     });
     return (_jsx("span", { className: styles.segmentWrapper, style: {
             flex: `${Math.max(seg.value || 0, 0)} 0 0`,
-            height: '100%',
-            minWidth: '2px',
-        }, ...(tooltipEnabled ? triggerProps : {}), children: _jsx("div", { className: styles.progressSegment, "data-index": index, "data-severity": (_e = seg.severity) !== null && _e !== void 0 ? _e : 'neutral', style: { background: bg, color: fg } }) }));
+        }, ...(tooltipEnabled ? triggerProps : {}), children: _jsx("span", { className: styles.progressSegment, "data-index": index, "data-severity": (_b = seg.severity) !== null && _b !== void 0 ? _b : 'neutral', style: seg.color
+                ? {
+                    ['--segment-color']: seg.color,
+                }
+                : undefined }) }));
 }
-export const SegmentedProgressBar = ({ segments, total, showRemainder = true, remainderSeverity = 'neutral', centerLabel, height, rounded = true, trackColor = 'var(--color-neutral)', tooltipPlacement = 'top', className, ...aria }) => {
+export const SegmentedProgressBar = ({ segments, total, showRemainder = true, remainderSeverity = 'neutral', centerLabel, height, rounded = true, trackColor, tooltipPlacement = 'top', className, ...aria }) => {
     const sum = segments.reduce((acc, s) => acc + (s.value || 0), 0);
     const effectiveTotal = total !== null && total !== void 0 ? total : sum;
     const safeTotal = Math.max(effectiveTotal, 0.0001);
@@ -36,15 +35,14 @@ export const SegmentedProgressBar = ({ segments, total, showRemainder = true, re
             base.push(remainder);
         return base.join('/');
     })();
-    const rootClass = [styles.container, className].filter(Boolean).join(' ');
     const filteredSegments = computedSegments.filter(x => x.value > 0);
-    return (_jsx("div", { className: rootClass, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": effectiveTotal, "aria-valuenow": Math.min(sum, effectiveTotal), ...aria, children: _jsxs("div", { className: styles.progressBar, style: {
-                height: height ? `${height}px` : `var(--component-size-xs)`,
-                borderRadius: rounded ? `var(--border-radius-rounded)` : `var(--border-radius-none)`,
-                background: trackColor,
-            }, children: [_jsx("span", { className: styles.segmentsContainer, children: filteredSegments.map((seg, i) => (_jsx(SegmentWithTooltip, { seg: seg, index: i, tooltipPlacement: tooltipPlacement }, `${i}`))) }), _jsx("div", { className: `${styles.progressCenter} ${filteredSegments.length === 0 ? styles.emptySegments : ''}`, children: centerLabel
-                        ? typeof centerLabel === 'function'
-                            ? centerLabel(pctFilled)
-                            : centerLabel
-                        : autoNumbers })] }) }));
+    const rootClass = [styles.container, className].filter(Boolean).join(' ');
+    return (_jsx("div", { className: rootClass, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": effectiveTotal, "aria-valuenow": Math.min(sum, effectiveTotal), ...aria, children: _jsxs("div", { className: styles.progressBar, "data-rounded": rounded ? 'true' : 'false', style: {
+                height: height ? `${height}px` : '24px',
+                background: trackColor !== null && trackColor !== void 0 ? trackColor : 'var(--color-bg-surface-subtle)',
+            }, children: [_jsx("span", { className: styles.segmentsContainer, children: filteredSegments.map((seg, i) => (_jsx(SegmentWithTooltip, { seg: seg, index: i, tooltipPlacement: tooltipPlacement }, `${i}`))) }), _jsx("div", { className: `${styles.progressCenter} ${filteredSegments.length === 0 ? styles.emptySegments : ''}`, children: _jsx("span", { className: styles.progressCenterLabel, children: centerLabel
+                            ? typeof centerLabel === 'function'
+                                ? centerLabel(pctFilled)
+                                : centerLabel
+                            : autoNumbers }) })] }) }));
 };

package/dist/components/segmented-progress-bar/SegmentedProgressBar.module.css

@@ -1,59 +1,167 @@
 .container {
   width: 100%;
+  min-width: 0;
   display: flex;
   align-items: center;
 }
 
 .progressBar {
+  --progress-radius: 10px;
+  --progress-separator: color-mix(in srgb, var(--color-border-subtle) 55%, transparent);
+
   position: relative;
   width: 100%;
+  min-width: 0;
   display: flex;
-  border-radius: var(--border-radius-default);
-  background: var(--opac-bg-default);
+  align-items: stretch;
+  overflow: hidden;
+
+  border-radius: var(--progress-radius);
+  background: var(--color-bg-surface-subtle);
+  box-shadow: inset 0 0 0 1px var(--color-border-subtle);
 }
 
-.progressSegment {
+.progressBar[data-rounded='false'] {
+  border-radius: 0;
+}
+
+.segmentsContainer {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+}
+
+.segmentWrapper {
+  display: flex;
   height: 100%;
-  flex: 1 1 auto;
   min-width: 2px;
+  min-height: 0;
+}
+
+.progressSegment {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: var(--segment-color, var(--color-bg-surface-strong));
 }
 
+/* Subtle separators between segments */
+.segmentWrapper + .segmentWrapper .progressSegment::before {
+  content: '';
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block: 2px;
+  width: 1px;
+  background: var(--progress-separator);
+  pointer-events: none;
+}
+
+/* =====================================
+   Custom progress semantics (quiet)
+   ===================================== */
+
+.progressSegment[data-severity='done'] {
+  background: color-mix(in srgb, var(--color-fg-default) 15%, var(--color-bg-surface));
+}
+
+.progressSegment[data-severity='progress'] {
+  background: color-mix(in srgb, var(--color-fg-subtle) 18%, var(--color-bg-surface));
+}
+
+.progressSegment[data-severity='missing'] {
+  background: color-mix(in srgb, var(--color-border-subtle) 65%, var(--color-bg-surface));
+}
+
+.progressSegment[data-severity='neutral'] {
+  background: var(--color-bg-surface-strong);
+}
+
+/* =====================================
+   Existing semantic severities
+   Keep these semantic and more colorful
+   for consumers who want that behavior
+   ===================================== */
+
+.progressSegment[data-severity='success'] {
+  background: color-mix(in srgb, var(--color-status-success) 32%, var(--color-bg-surface));
+}
+
+.progressSegment[data-severity='info'] {
+  background: color-mix(in srgb, var(--color-status-info) 32%, var(--color-bg-surface));
+}
+
+.progressSegment[data-severity='warning'] {
+  background: color-mix(in srgb, var(--color-status-warning) 32%, var(--color-bg-surface));
+}
+
+.progressSegment[data-severity='error'] {
+  background: color-mix(in srgb, var(--color-status-error) 24%, var(--color-bg-surface));
+}
+
+/* Label overlay */
 .progressCenter {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--color-fg-on-strong);
-  font-size: inherit;
+  padding-inline: 8px;
   pointer-events: none;
 }
 
-.emptySegments.progressCenter {
-  color: unset;
+.progressCenterLabel {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  max-width: calc(100% - 8px);
+  color: var(--color-fg-default);
+  font-size: var(--font-size-xs);
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.01em;
+  line-height: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  text-shadow: none;
 }
 
-.segmentWrapper,
-.segmentsContainer {
-  display: flex;
-  height: 100%;
-  width: 100%;
+.emptySegments .progressCenterLabel {
+  color: var(--color-fg-subtle);
+}
+
+/* Rounded ends only on the outer edges */
+.segmentWrapper:first-child .progressSegment {
+  border-top-left-radius: var(--progress-radius);
+  border-bottom-left-radius: var(--progress-radius);
+}
+
+.segmentWrapper:last-child .progressSegment {
+  border-top-right-radius: var(--progress-radius);
+  border-bottom-right-radius: var(--progress-radius);
 }
 
-.segmentWrapper:first-of-type .progressSegment {
-  border-top-left-radius: var(--border-radius-rounded);
-  border-bottom-left-radius: var(--border-radius-rounded);
+.progressBar[data-rounded='false'] .segmentWrapper:first-child .progressSegment,
+.progressBar[data-rounded='false'] .segmentWrapper:last-child .progressSegment {
+  border-radius: 0;
 }
 
-.segmentWrapper:last-of-type .progressSegment {
-  border-top-right-radius: var(--border-radius-rounded);
-  border-bottom-right-radius: var(--border-radius-rounded);
+.progressBar,
+.progressSegment,
+.progressCenterLabel {
+  transition:
+    background-color 140ms ease,
+    color 140ms ease,
+    box-shadow 140ms ease;
 }
 
 @media (prefers-reduced-motion: reduce) {
   .progressBar,
   .progressSegment,
-  .progressCenter {
+  .progressCenterLabel {
     transition: none;
   }
 }

package/dist/components/sidebar/Sidebar.d.ts

@@ -9,6 +9,7 @@ interface SidebarProps {
     productName?: string;
     productLogo?: React.ReactNode;
     activeLink?: string;
+    version?: string | number;
 }
-export declare function Sidebar({ items, productLogo, activeLink }: SidebarProps): JSX.Element;
+export declare function Sidebar({ items, productLogo, activeLink, version }: SidebarProps): JSX.Element;
 export {};

package/dist/components/sidebar/Sidebar.js

@@ -2,6 +2,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SidebarContainer } from './components/sidebar-container/SidebarContainer';
 import { SidebarProvider } from './providers/SidebarProvider';
-export function Sidebar({ items, productLogo, activeLink }) {
-    return (_jsx(SidebarProvider, { items: items, children: _jsx(SidebarContainer, { productLogo: productLogo, activeLink: activeLink }) }));
+export function Sidebar({ items, productLogo, activeLink, version }) {
+    return (_jsx(SidebarProvider, { items: items, children: _jsx(SidebarContainer, { productLogo: productLogo, activeLink: activeLink, version: version }) }));
 }

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.d.ts

@@ -4,8 +4,7 @@ interface SidebarContainerProps {
     productName?: string;
     productLogo?: ReactNode;
     activeLink?: string;
+    version?: string | number;
 }
-export declare function SidebarContainer({ logo, // DBC Digital (company)
-productLogo, // DataIO (product)
-activeLink, }: SidebarContainerProps): JSX.Element;
+export declare function SidebarContainer({ logo, productLogo, activeLink, version, }: SidebarContainerProps): JSX.Element;
 export {};

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.js

@@ -6,9 +6,7 @@ import { SidebarItems } from '../../../../components/sidebar/components/sidebar-
 import SidenavFiltering from '../../../../components/sidebar/components/sidenav-filteirng/SidenavFiltering';
 import { useSidebar } from '../../../../components/sidebar/providers/SidebarProvider';
 import styles from './SidebarContainer.module.css';
-export function SidebarContainer({ logo, // DBC Digital (company)
-productLogo, // DataIO (product)
-activeLink, }) {
+export function SidebarContainer({ logo, productLogo, activeLink, version, }) {
     const { isSidebarCollapsed, handleSidebarCollapseChange } = useSidebar();
-    return (_jsxs("div", { className: `${styles.container} ${isSidebarCollapsed ? styles.collapsed : ''}`, children: [_jsx("div", { className: styles.header, children: _jsxs("div", { className: styles.productHeader, children: [_jsx("div", { className: styles.productLogo, children: productLogo }), _jsx(Button, { size: "md", variant: "inline", shape: "round", "aria-label": "Collapse sidebar", icon: _jsx(ChevronLeft, { className: isSidebarCollapsed ? styles.collapsedIcon : '' }), onClick: () => handleSidebarCollapseChange(!isSidebarCollapsed) })] }) }), _jsxs("div", { className: styles.content, children: [_jsx("div", { className: styles.filter, children: _jsx(SidenavFiltering, {}) }), _jsx("div", { className: `${styles.links} hideScrollBar`, children: _jsx(SidebarItems, { activeLink: activeLink }) })] }), _jsx("div", { className: styles.footer, children: _jsx("div", { className: styles.companyLogo, children: logo !== null && logo !== void 0 ? logo : _jsx(Logo, {}) }) })] }));
+    return (_jsxs("div", { className: `${styles.container} ${isSidebarCollapsed ? styles.collapsed : ''}`, children: [_jsx("div", { className: styles.header, children: _jsxs("div", { className: styles.productHeader, children: [_jsx("div", { className: styles.productLogo, children: productLogo }), _jsx(Button, { size: "md", variant: "inline", shape: "round", "aria-label": "Collapse sidebar", icon: _jsx(ChevronLeft, { className: isSidebarCollapsed ? styles.collapsedIcon : '' }), onClick: () => handleSidebarCollapseChange(!isSidebarCollapsed) })] }) }), _jsxs("div", { className: styles.content, children: [_jsx("div", { className: styles.filter, children: _jsx(SidenavFiltering, {}) }), _jsx("div", { className: `${styles.links} hideScrollBar`, children: _jsx(SidebarItems, { activeLink: activeLink }) })] }), _jsxs("div", { className: styles.footer, children: [_jsx("div", { className: styles.companyLogo, children: logo !== null && logo !== void 0 ? logo : _jsx(Logo, {}) }), version && _jsx("div", { className: `${styles.version} dbc-muted-text dbc-sm-text`, children: version })] })] }));
 }

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.module.css

@@ -138,7 +138,9 @@
   border-top: 1px solid var(--color-border-default);
   padding: var(--spacing-sm);
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing-sm);
 }
 
 .companyLogo {
@@ -156,6 +158,12 @@
   display: none;
 }
 
+.version {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
 .logo {
   display: none;
 }

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

@@ -1,6 +1,6 @@
 import type { HTMLAttributes, JSX, ReactNode } from 'react';
-import { Severity } from '../../constants/severity.types';
 import { PageChangeEvent } from '../../components/pagination/Pagination';
+import { Severity } from '../../constants/severity.types';
 import { ViewMode } from '../../hooks/useTableSettings';
 import { TableEmptyConfig } from './components/empty-state/EmptyState';
 import { SortDirection } from './table.utils';
@@ -14,6 +14,7 @@ export interface ColumnItem<T> {
     hidden?: boolean;
     align?: 'left' | 'right' | 'center';
     verticalAlign?: 'top' | 'middle' | 'bottom';
+    divider?: 'right' | 'left';
     allowWrap?: boolean;
     emptyPlaceholder?: ReactNode;
     canHide?: boolean;
@@ -39,12 +40,6 @@ export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTML
     sortDirection?: SortDirection;
     loading?: boolean;
     headerExtras?: (args: HeaderExtrasArgs<T>) => ReactNode;
-    /**
-     * Grid layout control
-     *
-     * Example:
-     *  "34px minmax(160px, 2fr) minmax(120px, 1fr) minmax(120px, 1fr)"
-     */
     gridTemplateColumns?: string;
     toolbar?: ReactNode;
     striped?: boolean;