@dbcdk/react-components 0.0.14 → 0.0.16

package/dist/components/filter-field/FilterField.js

@@ -69,7 +69,7 @@ function isFilterActive(value) {
     return value != null;
 }
 const VALUELESS_OPERATORS = ['isEmpty', 'isNotEmpty'];
-export function FilterField({ field, control, operator, value, onChange, operators, options = [], single = true, size = 'md', label, placeholder = 'Type value…', disabled, 'data-cy': dataCy, ...inputProps }) {
+export function FilterField({ field, control, operator, value, onChange, operators, options = [], single = true, size = 'md', label, placeholder = 'Type value…', disabled, 'data-cy': dataCy, width, ...inputProps }) {
     var _a, _b;
     const ops = useMemo(() => operators !== null && operators !== void 0 ? operators : DEFAULT_TEXT_OPERATORS, [operators]);
     // internal operator state (source of truth for UI)
@@ -137,7 +137,7 @@ export function FilterField({ field, control, operator, value, onChange, operato
                 clearTimeout(debounceRef.current);
         };
     }, []);
-    return (_jsxs("div", { ...(dataCy ? { 'data-cy': dataCy } : {}), className: `${styles.filterField} ${styles[size]} ${active ? styles.active : ''}`, children: [label ? _jsx("span", { className: `${styles.label} ${styles[size]}`, children: label }) : null, _jsx(OperatorDropdown, { value: selectedOperator, onChange: handleOperatorChange, operators: ops, size: size, disabled: disabled }), _jsx("div", { className: `${control === 'input' ? 'dbc-flex dbc-flex-grow' : styles.valueWrapper}`, children: control === 'input' ? (_jsx(Input, { ...inputProps, value: localValue, onChange: e => {
+    return (_jsxs("div", { ...(dataCy ? { 'data-cy': dataCy } : {}), className: `${styles.filterField} ${styles[size]} ${active ? styles.active : ''}`, children: [label ? _jsx("span", { className: `${styles.label} ${styles[size]}`, children: label }) : null, _jsx(OperatorDropdown, { value: selectedOperator, onChange: handleOperatorChange, operators: ops, size: size, disabled: disabled }), _jsx("div", { className: `${control === 'input' ? 'dbc-flex dbc-flex-grow' : styles.valueWrapper}`, style: { width }, children: control === 'input' ? (_jsx(Input, { ...inputProps, value: localValue, onChange: e => {
                         const next = e.currentTarget.value;
                         isTypingRef.current = true;
                         setLocalValue(next);

package/dist/components/filtering/chip-multi-toggle/ChipMultiToggle.d.ts

@@ -13,15 +13,17 @@ interface ChipMultiToggleProps {
     onChange: (nextSelectedValues: string[]) => void;
     onToggle?: (toggledValue: string, isSelected: boolean) => void;
     size?: 'sm' | 'md' | 'lg';
-    selectedSeverity: 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+    selectedSeverity: 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'brand';
     unselectedSeverity?: 'neutral' | 'info' | 'success' | 'warning' | 'danger' | null;
     fullWidth?: boolean;
     disabled?: boolean;
+    showSelectedIcon?: boolean;
     showAllOption?: boolean;
     allLabel?: string;
     allIcon?: React.ReactNode;
+    dataCy?: string;
     /**
-     * ✅ If true, clicking "All" toggles between:
+     * If true, clicking "All" toggles between:
      * - All (no filtering) => []
      * - None (match nothing) => [noneValue]
      */
@@ -32,5 +34,5 @@ interface ChipMultiToggleProps {
      */
     noneValue?: string;
 }
-export declare function ChipMultiToggle({ label, options, selectedValues, onChange, onToggle, size, selectedSeverity, unselectedSeverity, fullWidth, disabled, showAllOption, allLabel, allIcon, allTogglesNone, noneValue, }: ChipMultiToggleProps): JSX.Element;
+export declare function ChipMultiToggle({ label, options, selectedValues, onChange, onToggle, size, selectedSeverity, unselectedSeverity, fullWidth, disabled, showAllOption, allLabel, allIcon, showSelectedIcon, allTogglesNone, noneValue, dataCy, }: ChipMultiToggleProps): JSX.Element;
 export {};

package/dist/components/filtering/chip-multi-toggle/ChipMultiToggle.js

@@ -1,9 +1,10 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check } from 'lucide-react';
 import React from 'react';
 import { Chip } from '../../../components/chip/Chip';
 import styles from './ChipMultiToggle.module.css';
-export function ChipMultiToggle({ label, options, selectedValues = [], onChange, onToggle, size = 'sm', selectedSeverity = 'info', unselectedSeverity = null, fullWidth = false, disabled = false, showAllOption = false, allLabel = 'Alle', allIcon, allTogglesNone = false, noneValue = '__none__', }) {
+export function ChipMultiToggle({ label, options, selectedValues = [], onChange, onToggle, size = 'sm', selectedSeverity = 'info', unselectedSeverity = null, fullWidth = false, disabled = false, showAllOption = false, allLabel = 'Alle', allIcon, showSelectedIcon = false, allTogglesNone = false, noneValue = '__none__', dataCy, }) {
     const selectedSet = React.useMemo(() => new Set(selectedValues), [selectedValues]);
     const isNoneSelected = allTogglesNone && selectedSet.has(noneValue);
     const isAllSelected = showAllOption && !isNoneSelected && selectedSet.size === 0;
@@ -45,9 +46,9 @@ export function ChipMultiToggle({ label, options, selectedValues = [], onChange,
             onChange([]);
         }
     };
-    return (_jsxs("div", { className: `${styles.wrapper} ${fullWidth ? styles.fullWidth : ''}`, children: [label && _jsx("span", { className: styles.label, children: label }), _jsxs("div", { className: styles.container, children: [showAllOption && (_jsx("button", { type: "button", className: styles.chipButton, onClick: toggleAll, "aria-pressed": isAllSelected || isNoneSelected, disabled: disabled, children: _jsx(Chip, { size: size, severity: (isAllSelected || isNoneSelected ? selectedSeverity : unselectedSeverity), customIcon: allIcon, type: unselectedSeverity === null ? 'outlined' : 'rounded', children: isNoneSelected ? `${allLabel} (ingen)` : allLabel }) }, "__all__")), options.map(opt => {
+    return (_jsxs("div", { className: `${styles.wrapper} ${fullWidth ? styles.fullWidth : ''}`, "data-cy": dataCy, children: [label && _jsx("span", { className: styles.label, children: label }), _jsxs("div", { className: styles.container, children: [showAllOption && (_jsx("button", { type: "button", className: styles.chipButton, onClick: toggleAll, "aria-pressed": isAllSelected || isNoneSelected, disabled: disabled, children: _jsx(Chip, { size: size, severity: (isAllSelected || isNoneSelected ? selectedSeverity : unselectedSeverity), customIcon: allIcon, type: unselectedSeverity === null ? 'outlined' : 'rounded', children: isNoneSelected ? `${allLabel} (ingen)` : allLabel }) }, "__all__")), options.map(opt => {
                         // If none-state is active, everything else should look unselected
                         const isSelected = !isNoneSelected && selectedSet.has(opt.value);
-                        return (_jsx("button", { type: "button", className: styles.chipButton, onClick: () => toggleValue(opt.value), "aria-pressed": isSelected, disabled: disabled, children: _jsx(Chip, { size: size, severity: (isSelected ? selectedSeverity : unselectedSeverity), customIcon: opt.icon, type: unselectedSeverity === null ? 'outlined' : 'rounded', children: opt.label }) }, opt.value));
+                        return (_jsx("button", { type: "button", className: styles.chipButton, onClick: () => toggleValue(opt.value), "aria-pressed": isSelected, disabled: disabled, children: _jsx(Chip, { size: size, severity: (isSelected ? selectedSeverity : unselectedSeverity), customIcon: showSelectedIcon ? isSelected ? _jsx(Check, {}) : null : opt.icon, type: unselectedSeverity === null ? 'outlined' : 'rounded', children: opt.label }) }, opt.value));
                     })] })] }));
 }

package/dist/components/forms/checkbox/Checkbox.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { JSX, ReactNode } from 'react';
-type Variant = 'default' | 'primary' | 'outlined';
+type Variant = 'default' | 'primary' | 'outlined' | 'success';
 type Size = 'sm' | 'md' | 'lg';
 interface CheckboxProps {
     checked?: boolean;

package/dist/components/forms/checkbox/Checkbox.module.css

@@ -60,3 +60,14 @@
     color: var(--color-fg-default);
   }
 }
+
+.success.checked {
+  background-color: var(--color-status-success);
+  &:not(:hover) {
+    border-color: transparent;
+  }
+
+  .icon {
+    color: var(--color-fg-on-brand);
+  }
+}

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

@@ -2,7 +2,6 @@
   display: inline-flex;
   gap: var(--spacing-xs);
   position: relative;
-  font-weight: normal;
   background: none;
   border: none;
   padding: 0;

package/dist/components/overlay/modal/Modal.js

@@ -88,5 +88,5 @@ export function Modal({ isOpen, onRequestClose, header, content, children, prima
     const resolvedSecondaryAction = secondaryAction !== null && secondaryAction !== void 0 ? secondaryAction : (primaryAction ? { label: 'Luk', onClick: onRequestCloseRef.current } : undefined);
     const shouldRenderFooter = Boolean(primaryAction || resolvedSecondaryAction);
     const body = children !== null && children !== void 0 ? children : content;
-    return (_jsx("div", { className: styles.overlay, onClick: handleOverlayClick, children: _jsxs("div", { "data-cy": dataCy, ref: dialogRef, className: `${styles.modal} ${disableContentSpacing ? '' : styles.contentSpacing}`, onClick: stopPropagation, role: "dialog", "aria-modal": "true", "aria-labelledby": header ? titleId : undefined, children: [_jsxs("div", { className: styles.header, children: [header && (_jsx(Headline, { severity: severity, size: 3, disableMargin: true, children: header })), _jsx(Button, { type: "button", variant: "inline", onClick: () => onRequestCloseRef.current(), "aria-label": "Luk", children: _jsx(X, {}) })] }), _jsx("div", { className: styles.body, children: body }), shouldRenderFooter && (_jsxs("div", { className: styles.footer, children: [resolvedSecondaryAction && (_jsxs(Button, { type: "button", variant: "outlined", onClick: resolvedSecondaryAction.onClick, disabled: isLoading, children: [resolvedSecondaryAction.icon && (_jsx("span", { className: styles.icon, children: resolvedSecondaryAction.icon })), _jsx("span", { children: resolvedSecondaryAction.label })] })), primaryAction && (_jsxs(Button, { type: "button", variant: "primary", onClick: primaryAction.onClick, disabled: primaryAction.disabled || isLoading, loading: isLoading, children: [primaryAction.icon && _jsx("span", { className: styles.icon, children: primaryAction.icon }), _jsx("span", { children: primaryAction.label })] }))] }))] }) }));
+    return (_jsx("div", { className: styles.overlay, onClick: handleOverlayClick, children: _jsxs("div", { "data-cy": dataCy, ref: dialogRef, className: `${styles.modal} ${disableContentSpacing ? '' : styles.contentSpacing}`, onClick: stopPropagation, role: "dialog", "aria-modal": "true", "aria-labelledby": header ? titleId : undefined, children: [_jsxs("div", { className: styles.header, children: [header && (_jsx(Headline, { severity: severity, size: 3, disableMargin: true, children: header })), _jsx(Button, { type: "button", variant: "inline", onClick: () => onRequestCloseRef.current(), "aria-label": "Luk", shape: "round", icon: _jsx(X, {}) })] }), _jsx("div", { className: styles.body, children: body }), shouldRenderFooter && (_jsxs("div", { className: styles.footer, children: [resolvedSecondaryAction && (_jsxs(Button, { type: "button", variant: "outlined", onClick: resolvedSecondaryAction.onClick, disabled: isLoading, children: [resolvedSecondaryAction.icon && (_jsx("span", { className: styles.icon, children: resolvedSecondaryAction.icon })), _jsx("span", { children: resolvedSecondaryAction.label })] })), primaryAction && (_jsxs(Button, { type: "button", variant: "primary", onClick: primaryAction.onClick, disabled: primaryAction.disabled || isLoading, loading: isLoading, children: [primaryAction.icon && _jsx("span", { className: styles.icon, children: primaryAction.icon }), _jsx("span", { children: primaryAction.label })] }))] }))] }) }));
 }

package/dist/components/overlay/side-panel/SidePanel.js

@@ -76,7 +76,7 @@ export function SidePanel({ isOpen, onClose, children, header, headerAddition, a
                 }, "data-cy": "details-panel", role: "dialog", "aria-modal": "true", children: [hasDetails ? (_jsxs("aside", { className: styles.detailsCol, "data-cy": "details-panel-details", children: [_jsxs("div", { className: styles.detailsHeader, children: [_jsx("div", { className: styles.detailsTitle, children: detailsHeader }), _jsxs("div", { className: styles.detailsHeaderActions, children: [detailsHeaderAddition, onCloseDetails ? (_jsx(Button, { type: "button", size: "sm", variant: "outlined", onClick: e => {
                                                     e.stopPropagation();
                                                     onCloseDetails();
-                                                }, children: "Luk" })) : null] })] }), _jsx("div", { className: styles.detailsContent, children: details })] })) : null, _jsxs("section", { className: styles.mainCol, "data-cy": "details-panel-main", children: [_jsx("div", { className: styles.header, children: _jsxs("div", { className: "dbc-flex dbc-justify-between", children: [_jsx(Headline, { size: 3, disableMargin: true, severity: severity, marker: showHeaderMarker, children: header }), _jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xs", children: [headerAddition, _jsx(Button, { type: "button", size: "sm", variant: "inline", onClick: e => {
+                                                }, children: "Luk" })) : null] })] }), _jsx("div", { className: styles.detailsContent, children: details })] })) : null, _jsxs("section", { className: styles.mainCol, "data-cy": "details-panel-main", children: [_jsx("div", { className: styles.header, children: _jsxs("div", { className: "dbc-flex dbc-justify-between", children: [_jsx(Headline, { size: 3, disableMargin: true, severity: severity, marker: showHeaderMarker, children: header }), _jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xs", children: [headerAddition, _jsx(Button, { type: "button", size: "md", shape: "round", variant: "inline", onClick: e => {
                                                         e.stopPropagation();
                                                         onClose(e);
                                                     }, "aria-label": "Luk panel", "data-cy": "side-panel-close-button", children: _jsx(X, {}) })] })] }) }), _jsx("div", { className: styles.content, "data-cy": "details-panel-content", children: children }), actions && _jsx("div", { className: styles.actions, children: actions })] })] })] }), document.body);

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

@@ -34,7 +34,6 @@
 .sidebar {
   min-width: 0;
   overflow: hidden;
-  border-right: var(--border-width-thin) solid var(--color-border-subtle);
   background: var(--color-bg-surface);
 }
 
@@ -72,7 +71,6 @@
 .header {
   min-width: 0;
   background: var(--color-bg-surface);
-  border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
   flex: 0 0 auto;
 }
 

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.js

@@ -62,5 +62,5 @@ export function ExpandableSidebarItem({ items, label, icon, component: Component
         }
         return (_jsx(SidebarItem, { component: item.component, label: item.label, icon: item.icon, href: item.href }, key));
     };
-    return (_jsxs("div", { className: `${styles.container} ${expanded ? styles.expanded : ''}`, children: [_jsx(Component, { onClick: () => toggleAccordion(undefined, true), children: _jsx(SidebarItemContent, { icon: icon, label: label, href: href, disableActiveStyles: expanded, suffixIcon: isSidebarCollapsed ? null : (_jsx(Button, { variant: "outlined", onClick: toggleAccordion, children: _jsx(ChevronDown, { className: `${styles.chevron} ${expanded ? styles.chevronExpanded : ''}` }) })) }) }), expanded && !isSidebarCollapsed && (_jsx("div", { onAnimationEnd: handleAnimationEnd, className: `${styles.childrenContainer} ${closing ? 'animate--collapse' : ''} ${expanded ? 'animate--expand' : 'visually-hidden'}`, children: items.map((item, idx) => renderNavItem(item, `${href}-${idx}`)) }))] }));
+    return (_jsxs("div", { className: `${styles.container}`, children: [_jsx(Component, { onClick: () => toggleAccordion(undefined, true), children: _jsx(SidebarItemContent, { headerStyle: expanded, icon: icon, label: label, href: href, disableActiveStyles: expanded, suffixIcon: isSidebarCollapsed ? null : (_jsx(Button, { variant: "outlined", onClick: toggleAccordion, children: _jsx(ChevronDown, { className: `${styles.chevron} ${expanded ? styles.chevronExpanded : ''}` }) })) }) }), expanded && !isSidebarCollapsed && (_jsx("div", { onAnimationEnd: handleAnimationEnd, className: `${styles.childrenContainer} ${closing ? 'animate--collapse' : ''} ${expanded ? 'animate--expand' : 'visually-hidden'}`, children: items.map((item, idx) => renderNavItem(item, `${href}-${idx}`)) }))] }));
 }

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

@@ -10,5 +10,5 @@ export function SidebarContainer({ logo, // DBC Digital (company)
 productLogo, // DataIO (product)
 activeLink, }) {
     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", "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 }) })] }), _jsx("div", { className: styles.footer, children: _jsx("div", { className: styles.companyLogo, children: logo !== null && logo !== void 0 ? logo : _jsx(Logo, {}) }) })] }));
 }

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

@@ -71,10 +71,6 @@
 
 /* Collapse button */
 .productHeader button {
-  border-radius: 0;
-  min-height: var(--component-size-md);
-  padding: var(--spacing-xs);
-  color: var(--color-fg-muted);
   flex: 0 0 auto;
 }
 

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.d.ts

@@ -6,5 +6,6 @@ export interface SidebarItemContentProps {
     suffixIcon?: React.ReactNode;
     href?: string;
     disableActiveStyles?: boolean;
+    headerStyle?: boolean;
 }
-export declare function SidebarItemContent({ icon, label, suffixIcon, href, disableActiveStyles, }: SidebarItemContentProps): JSX.Element;
+export declare function SidebarItemContent({ icon, label, suffixIcon, href, disableActiveStyles, headerStyle, }: SidebarItemContentProps): JSX.Element;

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './SidebarItemContent.module.css';
 import { useSidebar } from '../../providers/SidebarProvider';
-export function SidebarItemContent({ icon, label, suffixIcon, href, disableActiveStyles = false, }) {
+export function SidebarItemContent({ icon, label, suffixIcon, href, disableActiveStyles = false, headerStyle, }) {
     const { activeLink, isSidebarCollapsed } = useSidebar();
-    return (_jsxs("span", { className: `${styles.container} ${!disableActiveStyles && activeLink === href ? styles.active : ''} ${isSidebarCollapsed ? styles.collapsed : ''}`, children: [_jsxs("span", { children: [_jsx("span", { className: styles.icon, children: icon }), !isSidebarCollapsed && _jsx("span", { className: styles.label, children: label })] }), suffixIcon && !isSidebarCollapsed && _jsx("span", { className: styles.suffixIcon, children: suffixIcon })] }));
+    return (_jsxs("span", { className: `${styles.container} ${!disableActiveStyles && activeLink === href ? styles.active : ''} ${isSidebarCollapsed ? styles.collapsed : ''} ${headerStyle ? styles.headerStyle : ''}`, children: [_jsxs("span", { children: [_jsx("span", { className: styles.icon, children: icon }), !isSidebarCollapsed && _jsx("span", { className: styles.label, children: label })] }), suffixIcon && !isSidebarCollapsed && _jsx("span", { className: styles.suffixIcon, children: suffixIcon })] }));
 }

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.module.css

@@ -73,3 +73,12 @@
   outline: none;
   box-shadow: var(--focus-ring);
 }
+
+.headerStyle .label {
+  font-weight: 500;
+  color: var(--color-fg-subtle);
+  font-size: var(--font-size-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  transition: 0.15s ease-in-out;
+}

package/dist/components/split-pane/SplitPane.js

@@ -6,7 +6,7 @@ import styles from './SplitPane.module.css';
 function clamp(n, min, max) {
     return Math.max(min, Math.min(max, n));
 }
-export function SplitPane({ children, initialPrimarySize = 300, minPrimarySize = 160, minSecondarySize = 160, direction = 'horizontal', showDivider = 'hover', gutterSize = 8, storageKey, }) {
+export function SplitPane({ children, initialPrimarySize = 300, minPrimarySize = 160, minSecondarySize = 160, direction = 'horizontal', showDivider = 'hover', gutterSize = 16, storageKey, }) {
     return (_jsx(SplitPaneProvider, { direction: direction, initialPrimarySize: initialPrimarySize, minPrimarySize: minPrimarySize, minSecondarySize: minSecondarySize, storageKey: storageKey, children: _jsx(SplitPaneContainer, { showDivider: showDivider, gutterSize: gutterSize, children: children }) }));
 }
 function SplitPaneContainer({ children, showDivider, gutterSize, }) {

package/dist/components/state-page/StatePage.module.css

@@ -4,6 +4,6 @@
 }
 
 .illustration svg {
-  width: 300px;
+  width: 200px;
   height: auto;
 }

package/dist/components/table/Table.js

@@ -28,12 +28,24 @@ export function Table({ data, columns, selectedRows, onRowSelect, selectionMode
                                         const nextDir = getNextSortDirection(column.sortable, active, sortDirection !== null && sortDirection !== void 0 ? sortDirection : null);
                                         onSortChange(column, nextDir);
                                     };
-                                    return (_jsx("th", { style: getColumnStyle(column.id, columnStyles, column.align, 'middle'), "aria-sort": ariaSort, className: `${styles.th}`, children: _jsxs("div", { className: styles.thInner, children: [column.sortable ? (_jsxs("button", { type: "button", className: styles.thButton, onClick: toggleSort, onKeyDown: e => {
+                                    return (_jsx("th", { style: getColumnStyle(column.id, columnStyles, column.align, 'middle'), "aria-sort": ariaSort, className: `${styles.th}`, children: _jsxs("div", { className: styles.thInner, children: [column.sortable ? (_jsxs("button", { type: "button", className: [
+                                                        styles.thButton,
+                                                        column.align === 'right' ? styles.thButtonRight : '',
+                                                        column.align === 'center' ? styles.thButtonCenter : '',
+                                                    ].join(' '), onClick: toggleSort, onKeyDown: e => {
                                                         if (shouldToggleOnKey(e.key)) {
                                                             e.preventDefault();
                                                             toggleSort();
                                                         }
-                                                    }, children: [_jsx("span", { className: styles.thLabel, children: getHeaderLabel(column.header) }), _jsxs("span", { className: styles.sortIndicator, "aria-hidden": "true", children: [active && sortDirection === 'asc' && _jsx(ArrowUp, {}), active && sortDirection === 'desc' && (_jsx(ArrowDown, { className: styles.descending })), !active && (_jsx(ArrowDown, { className: `${styles.descending} ${styles.inActiveSort}` }))] })] })) : (_jsx("span", { className: styles.thLabel, children: getHeaderLabel(column.header) })), headerExtras ? (_jsx("div", { className: styles.thExtras, children: headerExtras({ column, index }) })) : null] }) }, column.id));
+                                                    }, children: [_jsx("span", { className: [
+                                                                styles.thLabel,
+                                                                column.align === 'right' ? styles.thLabelRight : '',
+                                                                column.align === 'center' ? styles.thLabelCenter : '',
+                                                            ].join(' '), children: getHeaderLabel(column.header) }), _jsxs("span", { className: styles.sortIndicator, "aria-hidden": "true", children: [active && sortDirection === 'asc' && _jsx(ArrowUp, {}), active && sortDirection === 'desc' && (_jsx(ArrowDown, { className: styles.descending })), !active && (_jsx(ArrowDown, { className: `${styles.descending} ${styles.inActiveSort}` }))] })] })) : (_jsx("span", { className: [
+                                                        styles.thLabel,
+                                                        column.align === 'right' ? styles.thLabelRight : '',
+                                                        column.align === 'center' ? styles.thLabelCenter : '',
+                                                    ].join(' '), children: getHeaderLabel(column.header) })), headerExtras ? (_jsx("div", { className: styles.thExtras, children: headerExtras({ column, index }) })) : null] }) }, column.id));
                                 })] }) }), loading && !data.length ? (_jsx("tbody", { className: `${styles.tBody} ${striped ? styles.striped : ''}`, children: Array.from({ length: take !== null && take !== void 0 ? take : 5 }).map((_, rowIndex) => (_jsx("tr", { children: filteredColumns.map((column, colIndex) => (_jsx("td", { style: getColumnStyle(column.id, columnStyles, column.align, 'middle'), className: `${styles.tableCell}`, children: _jsx(SkeletonLoaderItem, { height: 20, width: "100%" }) }, `${column.id}-${colIndex}`))) }, `loading-row-${rowIndex}`))) })) : (_jsx("tbody", { className: `${styles.tBody} ${striped ? styles.striped : ''}`, children: data === null || data === void 0 ? void 0 : data.map(row => {
                             const rowSeverity = getRowSeverity === null || getRowSeverity === void 0 ? void 0 : getRowSeverity(row);
                             const rowId = row[dataKey];
@@ -58,7 +70,10 @@ export function Table({ data, columns, selectedRows, onRowSelect, selectionMode
                                     ['--row-severity-color']: rowSeverity
                                         ? SeverityBgColor[rowSeverity]
                                         : undefined,
-                                }, className: `${onRowClick ? styles.clickableRow : ''} ${isSelected ? styles.selectedRow : ''} ${rowSeverity ? styles.severity : ''}`, children: [selectedRows && onRowSelect && dataKey && (_jsx("td", { className: `${styles.selectionCell}`, onClick: e => e.stopPropagation(), children: _jsx(Checkbox, { variant: "primary", checked: selectedRows.has(rowId), size: "sm", onChange: () => onRowSelect === null || onRowSelect === void 0 ? void 0 : onRowSelect(rowId, !selectedRows.has(rowId)) }) })), filteredColumns.map(column => (_jsx("td", { style: getColumnStyle(column.id, columnStyles, column.align, column.verticalAlign), className: `${styles.tableCell} ${shouldAllowWrap(column.allowWrap, isSelected, viewMode)
+                                }, className: `${onRowClick ? styles.clickableRow : ''} ${isSelected ? styles.selectedRow : ''} ${rowSeverity ? styles.severity : ''}`, children: [selectedRows && onRowSelect && dataKey && (_jsx("td", { className: `${styles.selectionCell}`, children: _jsx(Checkbox, { variant: "primary", checked: selectedRows.has(rowId), size: "sm", onChange: (checked, e) => {
+                                                e.stopPropagation();
+                                                onRowSelect === null || onRowSelect === void 0 ? void 0 : onRowSelect(rowId, checked);
+                                            } }) })), filteredColumns.map(column => (_jsx("td", { style: getColumnStyle(column.id, columnStyles, column.align, column.verticalAlign), className: `${styles.tableCell} ${shouldAllowWrap(column.allowWrap, isSelected, viewMode)
                                             ? styles.allowWrap
                                             : styles.nowrap}`, children: getCellDisplayValue(row, column) }, column.id)))] }, getRowKey(rowId)));
                         }) }))] }), !data.length && !loading && _jsx(TableEmptyState, { config: emptyConfig })] }));

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

@@ -13,7 +13,7 @@
   font-size: var(--font-size-sm);
   color: var(--color-fg-default);
   background: var(--color-bg-surface);
-  table-layout: auto;
+  table-layout: fixed;
 }
 
 .tableScroll {
@@ -42,8 +42,7 @@
   position: relative;
 
   padding-block: var(--spacing-xs);
-  padding-inline: var(--spacing-md);
-  padding-right: var(--spacing-lg);
+  padding-inline: var(--spacing-sm);
 
   text-align: left;
   vertical-align: middle;
@@ -76,56 +75,62 @@
 .th > .thInner {
   display: flex;
   align-items: center;
-  gap: var(--spacing-xxs);
   inline-size: 100%;
 }
 
-/* Actual interactive control for sorting */
+/* Sort button (full width click target, but content aligns via modifiers) */
 .thButton {
   all: unset;
-  display: inline-flex;
+  display: flex;
   align-items: center;
   gap: var(--spacing-xxs);
   inline-size: 100%;
-
   cursor: pointer;
   user-select: none;
-
-  /* make it feel like a button */
   border-radius: var(--border-radius-default);
   padding-block: 2px;
   padding-inline: 2px;
+
+  /* default */
+  justify-content: flex-start;
 }
 
-.thButton:hover {
-  background-color: var(--color-bg-contextual);
+/* IMPORTANT: use consistent PascalCase suffixes */
+.thButtonRight {
+  justify-content: flex-end;
 }
 
-.thButton:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
+.thButtonCenter {
+  justify-content: center;
 }
 
+/* Label should NOT grow to fill space (it breaks alignment) */
 .thLabel {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  flex-grow: 1;
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+/* Match label text alignment to column alignment */
+.thLabelRight {
+  text-align: right;
+}
+
+.thLabelCenter {
+  text-align: center;
 }
 
 .thExtras {
-  margin-inline-start: auto;
   display: inline-flex;
   align-items: center;
 }
 
-.inActiveSort {
-  color: var(--color-fg-subtle);
-  opacity: 0.4;
-}
-
 .sortIndicator {
-  display: flex;
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
 }
 
 .sortIndicator svg {
@@ -187,12 +192,14 @@ th.selectionCell {
   padding-inline: var(--spacing-xxs);
 }
 
+.table.severityTable .tBody tr td:first-child {
+  padding-inline-start: var(--spacing-md);
+}
 .table.severityTable .tBody tr td.selectionCell,
 .table.severityTable td.selectionCell,
 .table.severityTable .th.selectionCell,
 .table.severityTable th.selectionCell {
   padding-inline: var(--spacing-xxs);
-  padding-inline-start: 14px;
 }
 
 .table.sm.severityTable .tBody tr td.selectionCell,
@@ -280,14 +287,12 @@ th.selectionCell {
 .table.severityTable .tBody tr.severity td:first-child::before {
   content: '';
   position: absolute;
-
-  left: 4px;
-  top: 4px;
-  bottom: 4px;
-  width: 5px;
-
+  left: 2px;
+  top: 1px;
+  bottom: 1px;
+  width: 3px;
   background-color: var(--row-severity-color);
-  border-radius: 3px;
+  border-radius: 1px;
 
   z-index: 0;
 }

package/dist/components/table/components/empty-state/EmptyState.d.ts

@@ -1,39 +1,24 @@
 import type { ReactNode, JSX } from 'react';
 export type TableEmptyConfig = {
-    /**
-     * Whether to show the empty state at all.
-     * Default: true
-     */
     enabled?: boolean;
-    /**
-     * Title + description text (defaults are your current Danish copy)
-     */
+    /** Keep it short + system-like */
     title?: string;
     description?: ReactNode;
     /**
-     * Optional custom actions area. If provided, it will be rendered first.
-     * Useful for passing your own buttons/links/etc.
+     * Optional custom actions (rendered after built-ins).
+     * Good for injecting extra links/buttons from the table page.
      */
     actions?: ReactNode;
-    /**
-     * Convenience callbacks for built-in default buttons.
-     * If provided, the corresponding button is shown (unless hidden via showBack/showRefresh).
-     */
     onBack?: () => void;
     onRefresh?: () => void;
-    /**
-     * Control default buttons
-     */
+    /** New: clear filters */
+    onClearFilters?: () => void;
+    showClearFilters?: boolean;
+    clearFiltersLabel?: ReactNode;
     showBack?: boolean;
     showRefresh?: boolean;
-    /**
-     * Override default labels for default buttons
-     */
     backLabel?: ReactNode;
     refreshLabel?: ReactNode;
-    /**
-     * Wrapper className for layout styling
-     */
     className?: string;
 };
 export declare function TableEmptyState({ config }: {

package/dist/components/table/components/empty-state/EmptyState.js

@@ -1,16 +1,19 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowLeft } from 'lucide-react';
 import { Button } from '../../../../components/button/Button';
-import { StatePage } from '../../../../components/state-page/StatePage';
 const defaultEmptyConfig = {
     enabled: true,
     title: 'Ingen resultater',
-    description: _jsx("span", { children: "Pr\u00F8v at \u00E6ndre dine filtre eller tilf\u00F8je data." }),
-    showBack: true,
-    showRefresh: true,
-    backLabel: (_jsxs(_Fragment, { children: [_jsx(ArrowLeft, {}), "Tilbage"] })),
+    description: _jsx("span", { children: "Ingen data at vise." }),
+    showBack: false,
+    showRefresh: false,
+    // default: show button if handler exists
+    showClearFilters: true,
+    backLabel: (_jsxs(_Fragment, { children: [_jsx(ArrowLeft, { size: 16 }), "Tilbage"] })),
     refreshLabel: _jsx(_Fragment, { children: "Indl\u00E6s igen" }),
-    className: 'dbc-flex dbc-flex-column dbc-justify-center dbc-items-center dbc-flex-grow ',
+    clearFiltersLabel: _jsx(_Fragment, { children: "Nulstil alle filtre" }),
+    // "system-like": less hero, less vertical drama
+    className: 'dbc-flex dbc-flex-column dbc-items-start dbc-justify-start dbc-text-left dbc-gap-sm dbc-py-lg',
 };
 export function TableEmptyState({ config }) {
     const merged = {
@@ -21,6 +24,7 @@ export function TableEmptyState({ config }) {
         return null;
     const showBack = merged.showBack && typeof merged.onBack === 'function';
     const showRefresh = merged.showRefresh && typeof merged.onRefresh === 'function';
-    const hasAnyActions = Boolean(merged.actions) || showBack || showRefresh;
-    return (_jsx(StatePage, { type: "empty", header: merged.title, actions: _jsxs("div", { children: [hasAnyActions && (_jsxs("div", { className: "dbc-flex dbc-gap-sm", children: [showBack && (_jsx(Button, { type: "button", onClick: merged.onBack, children: merged.backLabel })), showRefresh && (_jsx(Button, { type: "button", onClick: merged.onRefresh, children: merged.refreshLabel }))] })), merged.actions] }), children: merged.description }));
+    const showClearFilters = merged.showClearFilters && typeof merged.onClearFilters === 'function';
+    const hasAnyActions = Boolean(merged.actions) || showBack || showRefresh || showClearFilters;
+    return (_jsxs("div", { className: merged.className, children: [_jsx("div", { className: "dbc-text-sm", children: merged.description }), hasAnyActions && (_jsxs("div", { className: "dbc-flex dbc-gap-sm dbc-mt-xs", children: [showClearFilters && (_jsx(Button, { type: "button", variant: "secondary", onClick: merged.onClearFilters, children: merged.clearFiltersLabel })), showRefresh && (_jsx(Button, { type: "button", variant: "secondary", onClick: merged.onRefresh, children: merged.refreshLabel })), showBack && (_jsx(Button, { type: "button", variant: "secondary", onClick: merged.onBack, children: merged.backLabel })), merged.actions] }))] }));
 }

package/dist/components/table/components/empty-state/EmptyState.module.css

@@ -1,16 +1,4 @@
-.container {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transform: translateY(clamp(-32px, -6vh, -12px));
-  padding-top: 56px;
-  box-sizing: border-box;
-}
-
+.container,
 .icon {
-  inline-size: var(--component-size-lg);
-  block-size: var(--component-size-lg);
-  color: var(--color-fg-muted);
+  display: none;
 }

package/dist/components/tabs/Tabs.js

@@ -117,7 +117,7 @@ export function Tabs({ header, variant, panelStyle = false, tabs, value, default
                             const selected = index === activeIndex;
                             const tabDomId = `${uid}-tab-${String(tab.id)}`;
                             const panelDomId = `${uid}-panel-${String(tab.id)}`;
-                            return (_jsx("div", { className: `${styles.tab} ${selected ? styles.active : ''}`, children: _jsxs("button", { id: tabDomId, type: "button", className: styles.tabButton, role: "tab", "aria-selected": selected, "aria-controls": panelDomId, tabIndex: selected ? 0 : -1, disabled: tab.disabled, onClick: () => setValue(tab.id), onKeyDown: e => onKeyDownTab(e, index), children: [tab.headerIcon ? _jsx("span", { className: styles.icon, children: tab.headerIcon }) : null, _jsx("span", { className: styles.label, children: tab.header }), tab.badge !== undefined && tab.badge > 0 ? (_jsx("span", { className: styles.badge, children: _jsx(Chip, { severity: "info", size: "sm", children: tab.badge.toLocaleString('da-DK') }) })) : null] }) }, tab.id));
+                            return (_jsx("div", { className: `${styles.tab} ${selected ? styles.active : ''}`, children: _jsxs("button", { id: tabDomId, type: "button", className: styles.tabButton, role: "tab", "aria-selected": selected, "aria-controls": panelDomId, tabIndex: selected ? 0 : -1, disabled: tab.disabled, onClick: () => setValue(tab.id), onKeyDown: e => onKeyDownTab(e, index), children: [tab.headerIcon ? _jsx("span", { className: styles.icon, children: tab.headerIcon }) : null, _jsx("span", { className: styles.label, children: tab.header }), tab.badge !== undefined && tab.badge > 0 ? (_jsx("span", { className: styles.badge, children: _jsx(Chip, { severity: "neutral", size: "sm", children: tab.badge.toLocaleString('da-DK') }) })) : null] }) }, tab.id));
                         }) }), _jsx("div", { id: activeTab ? `${uid}-panel-${String(activeTab.id)}` : undefined, role: "tabpanel", "aria-labelledby": activeTab ? `${uid}-tab-${String(activeTab.id)}` : undefined, className: styles.tabContent, children: activeTab === null || activeTab === void 0 ? void 0 : activeTab.content })] })] }));
 }
 Tabs.Item = TabsItem;

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

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   min-width: 0;
+  overflow: auto;
 }
 
 .headerContainer {
@@ -172,7 +173,6 @@
 }
 
 .outlined .tabContent {
-  /* plain panel by default */
   background: transparent;
   padding: 0;
 }

package/dist/components/toast/Toast.js

@@ -7,6 +7,6 @@ import { Headline } from '../headline/Headline';
 export function Toast({ title, message, severity = 'info', action, onClose, }) {
     const showHeader = Boolean(title);
     const showMessage = Boolean(message);
-    const CloseButton = onClose ? (_jsx(Button, { type: "button", variant: "inline", className: styles.closeButton, "aria-label": "Dismiss notification", onClick: onClose, children: _jsx(X, { className: styles.closeIcon, "aria-hidden": "true" }) })) : null;
+    const CloseButton = onClose ? (_jsx(Button, { type: "button", variant: "inline", shape: "round", className: styles.closeButton, "aria-label": "Dismiss notification", onClick: onClose, children: _jsx(X, { className: styles.closeIcon, "aria-hidden": "true" }) })) : null;
     return (_jsxs("div", { className: `${styles.toast} ${styles[severity]}`, role: "status", children: [_jsxs("div", { className: styles.content, children: [showHeader && (_jsxs("div", { className: styles.row, children: [_jsx(Headline, { size: 4, severity: severity, disableMargin: true, children: title }), CloseButton] })), showMessage && (_jsxs("div", { className: styles.row, children: [_jsx("div", { className: styles.message, children: message }), !showHeader && CloseButton] }))] }), action && (_jsx("div", { className: styles.actions, children: _jsx(Button, { type: "button", variant: "primary", onClick: action.onClick, children: action.label }) }))] }));
 }

package/dist/hooks/useTableSelection.d.ts

@@ -16,7 +16,7 @@ export declare function useTableSelection<T>({ storageKey, items, getId, initial
     selectedItems: T[];
     selectedItemMap: Map<Id, T>;
     toggleItem: (item: T) => void;
-    toggleId: (id: Id) => void;
+    toggleId: (id: Id, selected?: boolean) => void;
     clearSelection: () => void;
     allSelected: boolean;
     anySelected: boolean;