@dbcdk/react-components 0.0.88 → 0.0.89

package/dist/components/headline/Headline.module.css

@@ -1,13 +1,25 @@
 .headlineContainer {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: var(--spacing-lg);
-  flex-wrap: wrap;
   max-width: 100%;
+  min-width: 0;
+}
+
+.headlineBlock {
+  display: flex;
+  flex-direction: column;
   flex: 1 1 auto;
   min-width: 0;
 }
 
+.headlineRow {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-lg);
+  min-width: 0;
+}
+
 /* Base headline */
 .headline {
   position: relative;
@@ -58,15 +70,22 @@
   pointer-events: none;
 }
 
-/* Subheadline */
-.subHeadline {
-  color: inherit;
-  opacity: 0.85;
+/* Subheader */
+.subheader {
+  color: var(--color-fg-muted);
   font-size: var(--font-size-md);
   margin-block-start: calc(var(--spacing-2xs) * -1);
   line-height: var(--line-height-normal);
 }
 
+.addition {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  align-items: center;
+  justify-content: flex-end;
+}
+
 /* Icon */
 .icon {
   flex: 0 0 auto;

package/dist/components/nav-bar/NavBar.module.css

@@ -156,7 +156,6 @@
 
 /* Hover + focus */
 .link:hover {
-  background-color: var(--color-bg-hover-subtle);
   color: var(--color-fg-default);
 }
 .link:focus-visible {
@@ -178,13 +177,18 @@
   inset-block-end: 0;
   inline-size: 0;
   block-size: 2px;
-  background-color: var(--color-brand);
+  background-color: var(--color-border-strong);
   transition: inline-size var(--transition-fast) var(--ease-standard);
 }
 
+.link:hover::after {
+  inline-size: 100%;
+}
+
 .link.active::after,
 .link[aria-current='page']::after {
   inline-size: 100%;
+  background-color: var(--color-brand);
 }
 
 /* Icons/images inside links */

package/dist/components/overlay/modal/Modal.d.ts

@@ -13,6 +13,7 @@ export type ModalProps = {
     isOpen: boolean;
     onRequestClose: () => void;
     header?: ReactNode;
+    subheader?: ReactNode;
     content?: ReactNode;
     children?: ReactNode;
     primaryAction?: ModalActionConfig;
@@ -23,4 +24,4 @@ export type ModalProps = {
     dataCy?: string;
     width?: number | string;
 };
-export declare function Modal({ isOpen, onRequestClose, header, content, children, primaryAction, secondaryAction, closeOnOverlayClick, severity, disableContentSpacing, isLoading, dataCy, width, }: ModalProps): React.ReactNode;
+export declare function Modal({ isOpen, onRequestClose, header, subheader, content, children, primaryAction, secondaryAction, closeOnOverlayClick, severity, disableContentSpacing, isLoading, dataCy, width, }: ModalProps): React.ReactNode;

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

@@ -6,7 +6,7 @@ import { createPortal } from 'react-dom';
 import { Button } from '../../../components/button/Button';
 import { Headline } from '../../../components/headline/Headline';
 import styles from './Modal.module.css';
-export function Modal({ isOpen, onRequestClose, header, content, children, primaryAction, secondaryAction, closeOnOverlayClick = true, severity, disableContentSpacing = false, isLoading, dataCy, width, }) {
+export function Modal({ isOpen, onRequestClose, header, subheader, content, children, primaryAction, secondaryAction, closeOnOverlayClick = true, severity, disableContentSpacing = false, isLoading, dataCy, width, }) {
     const titleId = useId();
     const dialogRef = useRef(null);
     const lastActiveElementRef = useRef(null);
@@ -103,11 +103,13 @@ export function Modal({ isOpen, onRequestClose, header, content, children, prima
     const stopPropagation = e => {
         e.stopPropagation();
     };
-    const resolvedSecondaryAction = secondaryAction !== null && secondaryAction !== void 0 ? secondaryAction : (primaryAction ? { label: 'Luk', onClick: onRequestClose } : undefined);
+    const resolvedSecondaryAction = primaryAction || secondaryAction
+        ? { label: 'Luk', onClick: onRequestClose, ...secondaryAction }
+        : undefined;
     const shouldRenderFooter = Boolean(primaryAction || resolvedSecondaryAction);
     const body = children !== null && children !== void 0 ? children : content;
     const resolvedWidth = typeof width === 'number' ? `${width}px` : typeof width === 'string' ? width : undefined;
     return createPortal(_jsx("div", { className: styles.overlay, onClick: handleOverlayClick, children: _jsxs("div", { "data-cy": dataCy, ref: dialogRef, className: `${styles.modal} ${disableContentSpacing ? '' : styles.contentSpacing}`, style: resolvedWidth
                 ? { ['--modal-width']: resolvedWidth }
-                : undefined, onClick: stopPropagation, role: "dialog", "aria-modal": "true", "aria-labelledby": header ? titleId : undefined, tabIndex: -1, 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", 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: primaryAction.severity || '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 })] }))] }))] }) }), document.body);
+                : undefined, onClick: stopPropagation, role: "dialog", "aria-modal": "true", "aria-labelledby": header ? titleId : undefined, tabIndex: -1, children: [_jsxs("div", { className: styles.header, children: [header && (_jsx(Headline, { severity: severity, size: 3, disableMargin: true, subheader: subheader, 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", 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: primaryAction.severity || '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 })] }))] }))] }) }), document.body);
 }

package/dist/components/overlay/modal/provider/ModalProvider.js

@@ -47,12 +47,14 @@ export function ModalProvider({ children }) {
                     severity: confirmConfig.confirmButtonSeverity || 'primary',
                     onClick: () => {
                         resolvePending(true);
+                        closeModal();
                     },
                 },
                 secondaryAction: {
                     label: cancelLabel,
                     onClick: () => {
                         resolvePending(false);
+                        closeModal();
                     },
                 },
             });

package/dist/components/overlay/side-panel/SidePanel.d.ts

@@ -3,6 +3,7 @@ import { Severity } from '../../../constants/severity.types';
 interface SidePanelProps {
     children?: ReactNode;
     header: ReactNode;
+    subheader?: ReactNode;
     headerAddition?: ReactNode;
     actions?: ReactNode;
     onClose: (event?: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLDivElement>) => void;
@@ -20,5 +21,5 @@ interface SidePanelProps {
     onCloseDetails?: () => void;
     detailsHeaderAddition?: ReactNode;
 }
-export declare function SidePanel({ isOpen, onClose, children, header, headerAddition, actions, showBackdrop, severity, showHeaderMarker, width, details, detailsHeader, detailsWidth, onCloseDetails, detailsHeaderAddition, ...props }: SidePanelProps & HTMLAttributes<HTMLElement>): ReactNode;
+export declare function SidePanel({ isOpen, onClose, children, header, subheader, headerAddition, actions, showBackdrop, severity, showHeaderMarker, width, details, detailsHeader, detailsWidth, onCloseDetails, detailsHeaderAddition, ...props }: SidePanelProps & HTMLAttributes<HTMLElement>): ReactNode;
 export {};

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

@@ -6,7 +6,7 @@ import { Button } from '../../../components/button/Button';
 import { Headline } from '../../../components/headline/Headline';
 import { MOTION_MS } from '../../../styles/animation';
 import styles from './SidePanel.module.css';
-export function SidePanel({ isOpen, onClose, children, header, headerAddition, actions, showBackdrop = true, severity, showHeaderMarker = true, width = '400px', details, detailsHeader = 'Output', detailsWidth = '420px', onCloseDetails, detailsHeaderAddition, ...props }) {
+export function SidePanel({ isOpen, onClose, children, header, subheader, headerAddition, actions, showBackdrop = true, severity, showHeaderMarker = true, width = '400px', details, detailsHeader = 'Output', detailsWidth = '420px', onCloseDetails, detailsHeaderAddition, ...props }) {
     const [mounted, setMounted] = useState(false);
     const [shouldRender, setShouldRender] = useState(isOpen);
     const [isActive, setIsActive] = useState(false);
@@ -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: "md", shape: "round", 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, subheader: subheader, 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/Page.d.ts

@@ -3,12 +3,16 @@ import { Severity } from '../../constants/severity.types';
 import { BreadcrumbItem } from '../breadcrumbs/Breadcrumbs';
 interface PageProps {
     header?: string;
+    subheader?: ReactNode;
     severity?: Severity;
     headerIcon?: ReactNode;
     children?: ReactNode;
     headerAddition?: ReactNode;
     disableContentBox?: boolean;
+    disableTopPadding?: boolean;
+    maxWidth?: 'sm' | 'md' | 'lg';
     breadcrumbs?: BreadcrumbItem[];
+    containScrolling?: boolean;
 }
-export declare function Page({ header, severity, headerIcon, headerAddition, breadcrumbs, disableContentBox, children, }: PageProps): ReactNode;
+export declare function Page({ header, subheader, severity, headerIcon, headerAddition, breadcrumbs, disableContentBox, disableTopPadding, maxWidth, containScrolling, children, }: PageProps): ReactNode;
 export {};

package/dist/components/page/Page.js

@@ -2,6 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './Page.module.css';
 import { Breadcrumbs } from '../breadcrumbs/Breadcrumbs';
 import { Headline } from '../headline/Headline';
-export function Page({ header, severity, headerIcon, headerAddition, breadcrumbs, disableContentBox, children, }) {
-    return (_jsxs("div", { className: "grow-container", children: [_jsxs("div", { className: styles.headerContainer, children: [breadcrumbs ? (_jsx(Breadcrumbs, { items: breadcrumbs })) : (_jsx(Headline, { disableMargin: true, size: 2, severity: severity, icon: headerIcon, children: header })), headerAddition] }), _jsx("div", { className: `${styles.content} ${disableContentBox ? styles.disableContentBox : ''}`, children: children })] }));
+export function Page({ header, subheader, severity, headerIcon, headerAddition, breadcrumbs, disableContentBox, disableTopPadding = true, maxWidth, containScrolling = false, children, }) {
+    const maxWidthClass = maxWidth
+        ? styles[`maxWidth${maxWidth.charAt(0).toUpperCase()}${maxWidth.slice(1)}`]
+        : '';
+    const hasHeadline = Boolean(header || subheader || headerAddition);
+    return (_jsxs("div", { className: `${styles.container} ${containScrolling ? styles.containScrolling : styles.documentScrolling} ${disableTopPadding ? styles.disableTopPadding : ''} ${maxWidthClass}`, children: [_jsx("div", { className: styles.headerContainer, children: _jsxs("div", { className: styles.headerMain, children: [breadcrumbs ? _jsx(Breadcrumbs, { items: breadcrumbs }) : null, hasHeadline ? (_jsx(Headline, { disableMargin: true, size: 2, severity: severity, icon: headerIcon, subheader: subheader, addition: headerAddition, children: header })) : null] }) }), _jsx("div", { className: `${styles.content} ${disableContentBox ? styles.disableContentBox : ''}`, children: children })] }));
 }

package/dist/components/page/Page.module.css

@@ -1,24 +1,74 @@
 .container {
-  padding: var(--spacing-md);
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-md);
+  min-width: 0;
+  min-height: 0;
+}
+
+.maxWidthSm,
+.maxWidthMd,
+.maxWidthLg {
+  margin-inline: auto;
+  width: 100%;
+}
+
+.maxWidthSm {
+  max-width: 560px;
+}
+.maxWidthMd {
+  max-width: 768px;
+}
+.maxWidthLg {
+  max-width: 1024px;
+}
+
+.containScrolling {
   height: 100%;
+  overflow: hidden;
+}
+
+.documentScrolling {
+  height: auto;
+  overflow: visible;
 }
 
 .headerContainer {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
   padding: var(--spacing-lg) 0;
+  gap: var(--spacing-md);
+  min-width: 0;
+  flex: 0 0 auto;
+}
+
+.disableTopPadding {
+  padding-block-start: 0;
+}
+
+.disableTopPadding .headerContainer {
+  padding-block-start: 0;
+}
+
+.headerMain {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  flex: 1 1 auto;
+  min-width: 0;
 }
 
 .content {
   flex: 1 1 auto;
+  min-height: 0;
+  min-width: 0;
   overflow: auto;
 }
 
+.documentScrolling .content {
+  overflow: visible;
+}
+
 .content:not(.disableContentBox) {
   padding: var(--spacing-lg);
   border: 1px solid var(--color-border-default);

package/dist/components/panel/Panel.d.ts

@@ -1,6 +1,7 @@
 import type { ReactNode, JSX } from 'react';
 interface PanelProps {
     header: ReactNode;
+    subheader?: ReactNode;
     headerIcon?: ReactNode;
     headerAddition?: ReactNode;
     severity?: Severity;
@@ -8,5 +9,5 @@ interface PanelProps {
     size?: 'sm' | 'md' | 'lg';
 }
 import { Severity } from '../../constants/severity.types';
-export declare function Panel({ header, headerIcon, headerAddition, children, severity, size, }: PanelProps): JSX.Element;
+export declare function Panel({ header, subheader, headerIcon, headerAddition, children, severity, size, }: PanelProps): JSX.Element;
 export {};

package/dist/components/panel/Panel.js

@@ -2,6 +2,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './Panel.module.css';
 import { Headline } from '../headline/Headline';
-export function Panel({ header, headerIcon, headerAddition, children, severity, size, }) {
-    return (_jsxs("section", { className: `${styles.container} ${size ? styles[size] : ''}`, children: [_jsx("div", { className: styles.header, children: _jsx(Headline, { disableMargin: true, size: size === 'sm' ? 4 : 3, icon: headerIcon, addition: headerAddition, severity: severity, children: header }) }), _jsx("div", { className: styles.content, children: children })] }));
+export function Panel({ header, subheader, headerIcon, headerAddition, children, severity, size, }) {
+    return (_jsxs("section", { className: `${styles.container} ${size ? styles[size] : ''}`, children: [_jsx("div", { className: styles.header, children: _jsx(Headline, { disableMargin: true, size: size === 'sm' ? 4 : 3, icon: headerIcon, addition: headerAddition, subheader: subheader, severity: severity, children: header }) }), _jsx("div", { className: styles.content, children: children })] }));
 }

package/dist/components/stack/Stack.d.ts

@@ -0,0 +1,16 @@
+import React, { ElementType } from 'react';
+type GapSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
+type StackOwnProps = {
+    direction?: 'row' | 'column';
+    gap?: GapSize;
+    align?: 'start' | 'center' | 'end';
+    justify?: 'start' | 'center' | 'end' | 'between';
+    grow?: boolean;
+    wrap?: boolean;
+};
+export type StackProps<C extends ElementType = 'div'> = StackOwnProps & {
+    as?: C;
+} & Omit<React.ComponentPropsWithRef<C>, keyof StackOwnProps | 'as'>;
+type StackComponent = <C extends ElementType = 'div'>(props: StackProps<C>) => React.ReactElement | null;
+export declare const Stack: StackComponent;
+export {};

package/dist/components/stack/Stack.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+export const Stack = forwardRef(function Stack({ as, direction, gap, align, justify, grow = false, wrap = false, className, ...rest }, ref) {
+    const Tag = (as !== null && as !== void 0 ? as : 'div');
+    const classes = [
+        'dbc-flex',
+        direction === 'column' ? 'dbc-flex-column' : undefined,
+        gap ? `dbc-gap-${gap}` : undefined,
+        align ? `dbc-items-${align}` : undefined,
+        justify ? `dbc-justify-${justify}` : undefined,
+        grow ? 'dbc-flex-grow' : undefined,
+        wrap ? 'dbc-flex-wrap' : undefined,
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return _jsx(Tag, { ref: ref, className: classes, ...rest });
+});

package/dist/components/state-page/StatePage.d.ts

@@ -1,9 +1,10 @@
 import { ReactNode } from 'react';
 interface StatePageProps {
     header?: string;
+    subheader?: ReactNode;
     type: 'error' | 'empty' | 'info' | 'notfound';
     children?: ReactNode;
     actions?: ReactNode;
 }
-export declare function StatePage({ header, type, children, actions }: StatePageProps): ReactNode;
+export declare function StatePage({ header, subheader, type, children, actions, }: StatePageProps): ReactNode;
 export {};

package/dist/components/state-page/StatePage.js

@@ -5,7 +5,7 @@ import { ErrorIllustration } from './error';
 import { NotFoundIllustration } from './notFound';
 import styles from './StatePage.module.css';
 import { Headline } from '../headline/Headline';
-export function StatePage({ header, type, children, actions }) {
+export function StatePage({ header, subheader, type, children, actions, }) {
     const illustration = useMemo(() => {
         switch (type) {
             case 'error':
@@ -16,5 +16,5 @@ export function StatePage({ header, type, children, actions }) {
                 return _jsx(NotFoundIllustration, {});
         }
     }, [type]);
-    return (_jsxs("div", { className: `dbc-flex dbc-flex-column dbc-gap-lg dbc-items-center dbc-justify-center ${styles.container}`, children: [_jsx("div", { className: styles.illustration, children: illustration }), _jsxs("div", { className: "dbc-flex dbc-flex-column dbc-gap-md dbc-items-center", children: [_jsx(Headline, { disableMargin: true, size: 1, children: header }), _jsx("div", { children: children }), _jsx("div", { className: "dbc-flex dbc-gap-sm dbc-justify-center", children: actions })] })] }));
+    return (_jsxs("div", { className: `dbc-flex dbc-flex-column dbc-gap-lg dbc-items-center dbc-justify-center ${styles.container}`, children: [_jsx("div", { className: styles.illustration, children: illustration }), _jsxs("div", { className: "dbc-flex dbc-flex-column dbc-gap-md dbc-items-center", children: [_jsx(Headline, { disableMargin: true, size: 1, subheader: subheader, children: header }), _jsx("div", { children: children }), _jsx("div", { className: "dbc-flex dbc-gap-sm dbc-justify-center", children: actions })] })] }));
 }

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

@@ -1,4 +1,4 @@
 import type { JSX } from 'react';
 import type { TableProps } from './Table.types';
-export declare function Table<T extends Record<string, any>>({ data, dataKey, columns, selectedRows, selectionMode, allRowsSelected, sortById, sortDirection, loading, emptyConfig, variant, size, viewMode, striped, fillViewport, tableWidth, tableRootRef, measuringLayout, toolbar, headerExtras, take, skip, totalItemsCount, paginationPlacement, showFirstLast, pageSizeOptions, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, onSelectAllRows, onSortChange, onPageChange, ...rest }: TableProps<T>): JSX.Element;
+export declare function Table<T extends Record<string, any>>({ data, dataKey, columns, selectedRows, selectionMode, allRowsSelected, sortById, sortDirection, loading, emptyConfig, variant, size, viewMode, striped, fillViewport, fillViewportBottomOffset, tableWidth, tableRootRef, measuringLayout, toolbar, headerExtras, take, skip, totalItemsCount, paginationPlacement, showFirstLast, pageSizeOptions, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, onSelectAllRows, onSortChange, onPageChange, ...rest }: TableProps<T>): JSX.Element;
 export type { ColumnItem } from './Table.types';

package/dist/components/table/Table.js

@@ -1,7 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useId, useMemo } from 'react';
+import { useCallback, useId, useMemo, useRef } from 'react';
 import { Pagination } from '../../components/pagination/Pagination';
+import { useViewportFill } from '../../hooks/useViewportFill';
 import { TableEmptyState } from './components/empty-state/EmptyState';
 import { TableBody } from './components/TableBody';
 import { TableHeader } from './components/TableHeader';
@@ -9,17 +10,34 @@ import { TableLoadingBody } from './components/TableLoadingBody';
 import { cx } from './table.classes';
 import styles from './Table.module.css';
 import { getVisibleColumns, SELECTION_COLUMN_PX } from './table.utils';
-export function Table({ data, dataKey, columns, selectedRows, selectionMode = 'single', allRowsSelected, sortById, sortDirection, loading, emptyConfig, variant = 'primary', size = 'md', viewMode, striped, fillViewport = false, tableWidth, tableRootRef, measuringLayout = false, toolbar, headerExtras, take, skip, totalItemsCount, paginationPlacement = 'bottom', showFirstLast = false, pageSizeOptions, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, onSelectAllRows, onSortChange, onPageChange, ...rest }) {
+export function Table({ data, dataKey, columns, selectedRows, selectionMode = 'single', allRowsSelected, sortById, sortDirection, loading, emptyConfig, variant = 'primary', size = 'md', viewMode, striped, fillViewport = false, fillViewportBottomOffset = 16, tableWidth, tableRootRef, measuringLayout = false, toolbar, headerExtras, take, skip, totalItemsCount, paginationPlacement = 'bottom', showFirstLast = false, pageSizeOptions, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, onSelectAllRows, onSortChange, onPageChange, ...rest }) {
     const visibleColumns = useMemo(() => getVisibleColumns(columns), [columns]);
     const selectionInputName = useId();
+    const internalTableRootRef = useRef(null);
+    const tableRootRefWrapper = useRef(tableRootRef);
     const hasSelection = Boolean(selectedRows && onRowSelect);
+    const hasPagination = Boolean(onPageChange && (loading || data.length > 0));
+    const paginationOffset = hasPagination ? 72 : 0;
+    const { style: viewportFillStyle } = useViewportFill(internalTableRootRef, {
+        bottomOffset: fillViewportBottomOffset + paginationOffset,
+        min: 120,
+    });
+    const setTableRootRef = useCallback((node) => {
+        internalTableRootRef.current = node;
+        if (typeof tableRootRefWrapper.current === 'function') {
+            tableRootRefWrapper.current(node);
+        }
+        else if (tableRootRefWrapper.current) {
+            tableRootRefWrapper.current.current = node;
+        }
+    }, []);
     const handlePageChange = useCallback((e) => {
         onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(e);
     }, [onPageChange]);
     const bodyContent = loading && !data.length ? (_jsx(TableLoadingBody, { rows: take !== null && take !== void 0 ? take : 5, columns: visibleColumns, hasSelection: hasSelection })) : (_jsx(TableBody, { data: data, dataKey: dataKey, columns: visibleColumns, striped: striped, selectedRows: selectedRows, hasSelection: hasSelection, selectionMode: selectionMode, selectionInputName: selectionInputName, viewMode: viewMode, getRowSeverity: getRowSeverity, onRowClick: onRowClick, onRowMouseEnter: onRowMouseEnter, onRowSelect: onRowSelect }));
-    const paginationEl = onPageChange && (loading || data.length > 0) ? (_jsx("div", { className: cx(styles.paginationSlot, paginationPlacement === 'top' && styles.paginationSlotTop), children: _jsx(Pagination, { itemsCount: totalItemsCount, take: take, skip: skip, onPageChange: handlePageChange, showFirstLast: showFirstLast, pageSizeOptions: pageSizeOptions }) })) : null;
+    const paginationEl = hasPagination ? (_jsx("div", { className: cx(styles.paginationSlot, paginationPlacement === 'top' && styles.paginationSlotTop), children: _jsx(Pagination, { itemsCount: totalItemsCount, take: take, skip: skip, onPageChange: handlePageChange, showFirstLast: showFirstLast, pageSizeOptions: pageSizeOptions }) })) : null;
     const tableClassName = cx(styles.tableRoot, styles[variant], styles[size], measuringLayout && styles.measuringLayout, getRowSeverity && styles.severityTable);
-    const tableShell = (_jsx("div", { ...rest, className: tableClassName, children: _jsx("div", { ref: tableRootRef, className: styles.tableScroll, children: !data.length && !loading ? (_jsx("div", { className: styles.emptyStateSlot, children: _jsx(TableEmptyState, { config: emptyConfig }) })) : (_jsxs("table", { className: styles.tableElement, "aria-rowcount": data.length, style: tableWidth != null ? { width: tableWidth } : undefined, children: [_jsxs("colgroup", { children: [hasSelection ? _jsx("col", { style: { width: SELECTION_COLUMN_PX } }) : null, visibleColumns.map(column => (_jsx("col", { style: column.width != null ? { width: column.width } : undefined }, column.id)))] }), _jsx(TableHeader, { columns: visibleColumns, hasSelection: hasSelection, selectionMode: selectionMode, allRowsSelected: allRowsSelected, onSelectAllRows: onSelectAllRows, sortById: sortById, sortDirection: sortDirection, onSortChange: onSortChange, headerExtras: headerExtras }), bodyContent] })) }) }));
+    const tableShell = (_jsx("div", { ...rest, className: tableClassName, children: _jsx("div", { ref: setTableRootRef, className: styles.tableScroll, style: fillViewport ? viewportFillStyle : undefined, children: !data.length && !loading ? (_jsx("div", { className: styles.emptyStateSlot, children: _jsx(TableEmptyState, { config: emptyConfig }) })) : (_jsxs("table", { className: styles.tableElement, "aria-rowcount": data.length, style: tableWidth != null ? { width: tableWidth } : undefined, children: [_jsxs("colgroup", { children: [hasSelection ? _jsx("col", { style: { width: SELECTION_COLUMN_PX } }) : null, visibleColumns.map(column => (_jsx("col", { style: column.width != null ? { width: column.width } : undefined }, column.id)))] }), _jsx(TableHeader, { columns: visibleColumns, hasSelection: hasSelection, selectionMode: selectionMode, allRowsSelected: allRowsSelected, onSelectAllRows: onSelectAllRows, sortById: sortById, sortDirection: sortDirection, onSortChange: onSortChange, headerExtras: headerExtras }), bodyContent] })) }) }));
     if (fillViewport) {
         return (_jsxs("div", { className: styles.fillViewportRoot, style: {
                 flexDirection: paginationPlacement === 'top' ? 'column-reverse' : 'column',

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

@@ -101,6 +101,10 @@
   min-block-size: 0;
 }
 
+.body .row:first-child .cell {
+  border-block-start: var(--spacing-xs) solid var(--table-row-bg);
+}
+
 .headerCell,
 .cell {
   position: relative;
@@ -136,6 +140,16 @@
   line-height: 20px;
 }
 
+.md .headerCell {
+  padding-block: var(--spacing-xs);
+  padding-inline: var(--spacing-sm);
+}
+
+.md .cell {
+  padding-block: var(--spacing-xs);
+  padding-inline: var(--spacing-sm);
+}
+
 .sm .headerCell {
   padding-block: var(--spacing-xxs);
   padding-inline: var(--spacing-sm);

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

@@ -42,6 +42,7 @@ export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTML
     viewMode?: ViewMode;
     striped?: boolean;
     fillViewport?: boolean;
+    fillViewportBottomOffset?: number;
     tableWidth?: number;
     tableRootRef?: Ref<HTMLDivElement>;
     measuringLayout?: boolean;

package/dist/components/tabs/Tabs.d.ts

@@ -12,6 +12,7 @@ export type TabItem = {
 type TabsVariant = 'filled' | 'outlined';
 export interface TabsProps {
     header?: string;
+    subheader?: ReactNode;
     variant: TabsVariant;
     panelStyle?: boolean;
     /** Data-driven API */
@@ -22,6 +23,7 @@ export interface TabsProps {
     defaultValue?: TabId;
     onValueChange?: (id: TabId, tab: TabItem, index: number) => void;
     addition?: ReactNode;
+    disableTopPadding?: boolean;
     /** Composition API */
     children?: ReactNode;
 }
@@ -38,7 +40,7 @@ type SlotName = 'Item';
 type TabsItemComponent = ((props: TabsItemProps) => JSX.Element) & {
     __TABS_SLOT__?: SlotName;
 };
-export declare function Tabs({ header, variant, panelStyle, tabs, value, defaultValue, onValueChange, addition, children, }: TabsProps): JSX.Element;
+export declare function Tabs({ header, subheader, variant, panelStyle, tabs, value, defaultValue, onValueChange, addition, disableTopPadding, children, }: TabsProps): JSX.Element;
 export declare namespace Tabs {
     var Item: TabsItemComponent;
 }

package/dist/components/tabs/Tabs.js

@@ -33,7 +33,7 @@ function normalizeFromChildren(children) {
     });
     return items;
 }
-export function Tabs({ header, variant, panelStyle = false, tabs, value, defaultValue, onValueChange, addition, children, }) {
+export function Tabs({ header, subheader, variant, panelStyle = false, tabs, value, defaultValue, onValueChange, addition, disableTopPadding, children, }) {
     const uid = useId();
     // Data API wins if provided; otherwise parse <Tabs.Item>
     const sourceTabs = useMemo(() => {
@@ -113,7 +113,9 @@ export function Tabs({ header, variant, panelStyle = false, tabs, value, default
             focusAndSelect(enabled.length - 1);
         }
     }, [uid, visibleTabs, setValue]);
-    return (_jsxs("div", { className: styles.root, children: [header ? (_jsxs("div", { className: styles.headerContainer, children: [_jsx(Headline, { disableMargin: true, size: 2, children: header }), addition] })) : null, _jsxs("div", { className: `${styles.tabs} ${styles[variant]} ${panelStyle ? styles.panelStyle : ''}`, children: [_jsx("div", { className: styles.tabList, role: "tablist", "aria-label": header !== null && header !== void 0 ? header : 'Tabs', children: visibleTabs.map((tab, index) => {
+    return (_jsxs("div", { className: styles.root, children: [header ? (_jsx("div", { className: [styles.headerContainer, disableTopPadding ? styles.disableTopPadding : '']
+                    .filter(Boolean)
+                    .join(' '), children: _jsx(Headline, { disableMargin: true, size: 2, subheader: subheader, addition: addition, children: header }) })) : null, _jsxs("div", { className: `${styles.tabs} ${styles[variant]} ${panelStyle ? styles.panelStyle : ''}`, children: [_jsx("div", { className: styles.tabList, role: "tablist", "aria-label": header !== null && header !== void 0 ? header : 'Tabs', children: visibleTabs.map((tab, index) => {
                             const selected = index === activeIndex;
                             const tabDomId = `${uid}-tab-${String(tab.id)}`;
                             const panelDomId = `${uid}-panel-${String(tab.id)}`;

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

@@ -13,6 +13,10 @@
   gap: var(--spacing-md);
 }
 
+.headerContainer.disableTopPadding {
+  padding-block-start: 0;
+}
+
 /* Outer wrapper for tablist + content */
 .tabs {
   display: flex;

package/dist/components/theme-button/ThemeButton.d.ts

@@ -4,4 +4,5 @@ export interface ThemeButtonProps {
     size?: ButtonSize;
     variant?: ButtonVariant;
 }
+export declare function ThemeMenuSection(): JSX.Element;
 export declare function ThemeButton({ size, variant }: ThemeButtonProps): JSX.Element;

package/dist/components/theme-button/ThemeButton.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Monitor, Moon, Palette, Sun } from 'lucide-react';
 import { Button } from '../../components/button/Button';
 import { Menu } from '../../components/menu/Menu';
@@ -10,6 +10,10 @@ const THEME_OPTIONS = [
     { value: 'light', label: 'Lyst', icon: _jsx(Sun, { size: 16 }) },
     { value: 'dark', label: 'Mørkt', icon: _jsx(Moon, { size: 16 }) },
 ];
+export function ThemeMenuSection() {
+    const { theme, switchTheme } = useTheme();
+    return (_jsxs(_Fragment, { children: [_jsx(Menu.Header, { children: "Udseende" }), THEME_OPTIONS.map(option => (_jsx(Menu.RadioItem, { name: "theme", value: option.value, checked: theme === option.value, label: option.label, onValueChange: value => switchTheme(value) }, option.value)))] }));
+}
 export function ThemeButton({ size, variant = 'outlined' }) {
     const { theme, switchTheme } = useTheme();
     return (_jsx(Popover, { matchTriggerWidth: false, minWidth: "140px", trigger: (handleClick, chevron) => (_jsxs(Button, { variant: variant, size: size, onClick: handleClick, "aria-label": "Skift tema", "aria-haspopup": "menu", children: [_jsx(Palette, {}), chevron] })), children: close => (_jsxs(Menu, { children: [_jsx(Menu.Header, { children: "Udseende" }), THEME_OPTIONS.map(option => (_jsx(Menu.Item, { active: theme === option.value, children: _jsxs("button", { onClick: () => {

package/dist/components/toast/Toast.d.ts

@@ -6,9 +6,10 @@ export type ToastActionConfig = {
 };
 export type ToastProps = {
     title?: ReactNode;
+    subheader?: ReactNode;
     message?: ReactNode;
     severity: Severity;
     action?: ToastActionConfig;
     onClose?: () => void;
 };
-export declare function Toast({ title, message, severity, action, onClose, }: ToastProps): React.ReactNode;
+export declare function Toast({ title, subheader, message, severity, action, onClose, }: ToastProps): React.ReactNode;

package/dist/components/toast/Toast.js

@@ -3,7 +3,7 @@ import { X } from 'lucide-react';
 import styles from './Toast.module.css';
 import { Button } from '../button/Button';
 import { Headline } from '../headline/Headline';
-export function Toast({ title, message, severity = 'info', action, onClose, }) {
+export function Toast({ title, subheader, message, severity = 'info', action, onClose, }) {
     const showHeader = Boolean(title);
     const showMessage = Boolean(message);
     const canClose = severity !== 'neutral';
@@ -16,5 +16,5 @@ export function Toast({ title, message, severity = 'info', action, onClose, }) {
                     onClose === null || onClose === void 0 ? void 0 : onClose();
                 }
             }
-            : undefined, tabIndex: isDismissibleNeutral ? 0 : undefined, "aria-label": isDismissibleNeutral ? 'Luk notifikation' : undefined, 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 }) }))] }));
+            : undefined, tabIndex: isDismissibleNeutral ? 0 : undefined, "aria-label": isDismissibleNeutral ? 'Luk notifikation' : undefined, children: [_jsxs("div", { className: styles.content, children: [showHeader && (_jsxs("div", { className: styles.row, children: [_jsx(Headline, { size: 4, severity: severity, disableMargin: true, subheader: subheader, 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/useViewportFill.d.ts

@@ -1,15 +1,11 @@
-import { CSSProperties, RefObject } from 'react';
+import { type CSSProperties, type RefObject } from 'react';
 type Options = {
     bottomOffset?: number;
     min?: number;
     includeMarginTop?: boolean;
-    /**
-     * Optional element to observe in addition to the target itself.
-     * Useful when a nearby wrapper changes height and pushes the table.
-     */
     watchRef?: RefObject<HTMLElement | null>;
 };
-export declare function useViewportFill<T extends HTMLElement>(ref: RefObject<T>, { bottomOffset, min, includeMarginTop, watchRef }?: Options): {
+export declare function useViewportFill<T extends HTMLElement>(ref: RefObject<T | null>, { bottomOffset, min, includeMarginTop, watchRef }?: Options): {
     maxHeight: number;
     style: CSSProperties;
     recompute: () => void;