@dbcdk/react-components 0.0.88 → 0.0.90

package/dist/components/grid/Grid.d.ts

@@ -0,0 +1,23 @@
+import type { CSSProperties, ReactNode } from 'react';
+export type GridGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface GridProps {
+    children?: ReactNode;
+    gap?: GridGap;
+    /** Stretch direct children so cards/items in the same row get equal height */
+    equalHeight?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function Grid({ children, gap, equalHeight, className, style }: GridProps): import("react/jsx-runtime").JSX.Element;
+export interface GridItemProps {
+    children?: ReactNode;
+    /** Default span: <768px */
+    base?: number;
+    /** Medium span: ≥768px */
+    md?: number;
+    /** Large span: ≥1200px */
+    lg?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function GridItem({ children, base, md, lg, className, style }: GridItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/grid/Grid.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './Grid.module.css';
+const GAP_TOKEN = {
+    none: '0',
+    xs: 'var(--spacing-xs)',
+    sm: 'var(--spacing-sm)',
+    md: 'var(--spacing-md)',
+    lg: 'var(--spacing-lg)',
+    xl: 'var(--spacing-xl)',
+};
+export function Grid({ children, gap = 'md', equalHeight = false, className, style }) {
+    return (_jsx("div", { className: [styles.grid, equalHeight && styles.equalHeight, className]
+            .filter(Boolean)
+            .join(' '), style: { gap: GAP_TOKEN[gap], ...style }, children: children }));
+}
+export function GridItem({ children, base = 12, md, lg, className, style }) {
+    return (_jsx("div", { className: [styles.item, className].filter(Boolean).join(' '), style: {
+            '--span-base': base,
+            ...(md != null ? { '--span-md': md } : {}),
+            ...(lg != null ? { '--span-lg': lg } : {}),
+            ...style,
+        }, children: children }));
+}

package/dist/components/grid/Grid.module.css

@@ -0,0 +1,35 @@
+.grid {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  align-items: start;
+}
+
+.equalHeight {
+  align-items: stretch;
+}
+
+.item {
+  grid-column: span var(--span-base, 12);
+  min-inline-size: 0;
+}
+
+.equalHeight .item {
+  display: flex;
+}
+
+.equalHeight .item > * {
+  flex: 1;
+  min-inline-size: 0;
+}
+
+@media (min-width: 768px) {
+  .item {
+    grid-column: span var(--span-md, var(--span-base, 12));
+  }
+}
+
+@media (min-width: 1200px) {
+  .item {
+    grid-column: span var(--span-lg, var(--span-md, var(--span-base, 12)));
+  }
+}

package/dist/components/headline/CollapsibleHeadline.d.ts

@@ -0,0 +1,21 @@
+import React, { PropsWithChildren } from 'react';
+import type { HeadlineProps } from './Headline';
+export interface CollapsibleHeadlineProps extends Omit<HeadlineProps, 'addition' | 'children'> {
+    /** The headline text — always visible. */
+    header: React.ReactNode;
+    /** Controlled expanded state. Required when `storageKey` is not set. */
+    expanded?: boolean;
+    /** Called when the toggle is clicked. */
+    onToggle?: () => void;
+    /** id of the panel element, used for aria-controls. Generated automatically if omitted. */
+    controls?: string;
+    /** Extra content rendered between the headline text and the toggle button. */
+    addition?: React.ReactNode;
+    /**
+     * When set the component manages its own expanded state, persisted to
+     * localStorage under this key. `expanded` is used as the initial value
+     * if nothing is stored yet; `onToggle` is still called after each toggle.
+     */
+    storageKey?: string;
+}
+export declare function CollapsibleHeadline({ header, expanded, onToggle, controls, addition, storageKey, children, size, variant, weight, ...headlineProps }: PropsWithChildren<CollapsibleHeadlineProps>): import("react/jsx-runtime").JSX.Element;

package/dist/components/headline/CollapsibleHeadline.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown } from 'lucide-react';
+import { useId, useState } from 'react';
+import { Headline } from './Headline';
+import styles from './Headline.module.css';
+import { Button } from '../button/Button';
+export function CollapsibleHeadline({ header, expanded, onToggle, controls, addition, storageKey, children, size = 2, variant = 'muted', weight = 400, ...headlineProps }) {
+    const generatedId = useId();
+    const panelId = controls !== null && controls !== void 0 ? controls : generatedId;
+    const [internalExpanded, setInternalExpanded] = useState(() => {
+        if (!storageKey || typeof window === 'undefined')
+            return expanded !== null && expanded !== void 0 ? expanded : false;
+        const stored = localStorage.getItem(storageKey);
+        return stored !== null ? stored === 'true' : (expanded !== null && expanded !== void 0 ? expanded : false);
+    });
+    const isExpanded = storageKey ? internalExpanded : (expanded !== null && expanded !== void 0 ? expanded : false);
+    const handleToggle = () => {
+        if (storageKey) {
+            const next = !internalExpanded;
+            setInternalExpanded(next);
+            localStorage.setItem(storageKey, String(next));
+        }
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle();
+    };
+    return (_jsxs("div", { className: styles.collapsibleRoot, children: [_jsxs(Headline, { ...headlineProps, variant: variant, weight: weight, size: size, addition: addition, children: [header, _jsx(Button, { shape: "round", type: "button", variant: "inline", "aria-expanded": isExpanded, "aria-controls": panelId, onClick: handleToggle, children: _jsx(ChevronDown, { "aria-hidden": true, className: [styles.toggleChevron, isExpanded ? styles.toggleChevronExpanded : '']
+                                .filter(Boolean)
+                                .join(' ') }) })] }), isExpanded && (_jsx("div", { id: panelId, className: styles.collapsiblePanel, children: children }))] }));
+}

package/dist/components/headline/Headline.d.ts

@@ -1,17 +1,19 @@
-import React, { JSX, PropsWithChildren } from 'react';
+import React, { PropsWithChildren } from 'react';
 import { Severity } from '../../constants/severity.types';
 type HeadlineTone = 'dark' | 'light';
-interface HeadlineProps extends React.AriaAttributes {
+type HeadlineVariant = 'default' | 'muted';
+export interface HeadlineProps extends React.AriaAttributes {
     size?: 1 | 2 | 3 | 4 | 5 | 6;
     marker?: boolean;
     disableMargin?: boolean;
     severity?: Severity;
-    weight?: 500 | 600 | 700;
-    subHeadline?: string | JSX.Element;
+    weight?: 400 | 500 | 600 | 700;
+    subheader?: React.ReactNode;
     addition?: React.ReactNode;
     icon?: React.ReactNode;
     allowWrap?: boolean;
     tone?: HeadlineTone;
+    variant?: HeadlineVariant;
 }
-export declare function Headline({ size, marker, disableMargin, children, severity, weight, subHeadline, addition, icon, tone, allowWrap, }: PropsWithChildren<HeadlineProps>): React.ReactNode;
+export declare function Headline({ size, marker, disableMargin, children, severity, weight, subheader, addition, icon, tone, variant, allowWrap, }: PropsWithChildren<HeadlineProps>): React.JSX.Element;
 export {};

package/dist/components/headline/Headline.js

@@ -1,9 +1,9 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './Headline.module.css';
 import { SeverityBgColor } from '../../constants/severity';
 import { Icon } from '../icon/Icon';
-export function Headline({ size = 2, marker, disableMargin, children, severity, weight = 600, subHeadline, addition, icon, tone, allowWrap = true, }) {
+export function Headline({ size = 2, marker, disableMargin, children, severity, weight = 600, subheader, addition, icon, tone, variant, allowWrap = true, }) {
     const Tag = `h${size}`;
     const containerClassName = [styles.headlineContainer, tone ? styles[`tone-${tone}`] : '']
         .filter(Boolean)
@@ -12,14 +12,15 @@ export function Headline({ size = 2, marker, disableMargin, children, severity,
         styles.headline,
         disableMargin ? styles.noMargin : '',
         marker ? styles.marker : '',
+        variant === 'muted' ? styles['variant-muted'] : '',
     ]
         .filter(Boolean)
         .join(' ');
     const textClassName = [styles.text, allowWrap ? styles.wrap : styles.truncate]
         .filter(Boolean)
         .join(' ');
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: containerClassName, children: [_jsxs(Tag, { style: {
-                            '--font-weight': weight,
-                            '--marker-color': severity ? SeverityBgColor[severity] : undefined,
-                        }, className: headlineClassName, children: [icon || (severity && !marker) ? (_jsx("span", { className: styles.icon, children: _jsx(Icon, { customIcon: icon, severity: severity }) })) : null, _jsx("span", { className: textClassName, children: children })] }), addition] }), subHeadline && _jsx("div", { className: styles.subHeadline, children: subHeadline })] }));
+    return (_jsx("div", { className: containerClassName, children: _jsxs("div", { className: styles.headlineBlock, children: [_jsxs("div", { className: styles.headlineRow, children: [_jsxs(Tag, { style: {
+                                '--font-weight': weight,
+                                '--marker-color': severity ? SeverityBgColor[severity] : undefined,
+                            }, className: headlineClassName, children: [icon || (severity && !marker) ? (_jsx("span", { className: styles.icon, children: _jsx(Icon, { customIcon: icon, severity: severity }) })) : null, _jsx("span", { className: textClassName, children: children })] }), addition ? _jsx("div", { className: styles.addition, children: addition }) : null] }), subheader ? _jsx("div", { className: styles.subheader, children: subheader }) : null] }) }));
 }

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

@@ -1,11 +1,24 @@
 .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;
+  gap: var(--spacing-xxs);
+}
+
+.headlineRow {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-lg);
+  min-width: 0;
 }
 
 /* Base headline */
@@ -17,7 +30,7 @@
   margin-block: var(--spacing-xs);
 
   /* Typography */
-  font-weight: var(--font-weight-medium, 500);
+  font-weight: var(--font-weight, 600);
   letter-spacing: var(--letter-spacing-tight);
   line-height: var(--line-height-tight);
   color: inherit;
@@ -27,6 +40,56 @@
   min-width: 0; /* required for truncation inside flex */
 }
 
+/* CollapsibleHeadline wrapper */
+.collapsibleRoot {
+  display: flex;
+  flex-direction: column;
+}
+
+.collapsiblePanel {
+  display: contents;
+}
+
+/* CollapsibleHeadline toggle button */
+.toggleButton {
+  all: unset;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  padding: var(--spacing-2xs);
+  border-radius: var(--border-radius-sm);
+  cursor: pointer;
+  color: var(--color-fg-subtle);
+  transition: color var(--transition-fast) var(--ease-standard);
+}
+
+.toggleButton:hover {
+  color: var(--color-fg-default);
+}
+
+.toggleButton:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.toggleChevron {
+  display: block;
+  width: var(--icon-size-md);
+  height: var(--icon-size-md);
+  transition: transform var(--transition-normal) var(--ease-standard);
+}
+
+.toggleChevronExpanded {
+  transform: rotate(180deg);
+}
+
+/* Variant overrides */
+.variant-muted {
+  color: var(--color-fg-subtle);
+}
+
 /* Tone overrides */
 .tone-dark .headline {
   color: var(--color-fg-default);
@@ -58,15 +121,21 @@
   pointer-events: none;
 }
 
-/* Subheadline */
-.subHeadline {
-  color: inherit;
-  opacity: 0.85;
-  font-size: var(--font-size-md);
+/* Subheader */
+.subheader {
+  font-size: var(--font-size-sm);
   margin-block-start: calc(var(--spacing-2xs) * -1);
+  color: var(--color-fg-subtle);
   line-height: var(--line-height-normal);
 }
 
+.addition {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  align-items: center;
+}
+
 /* Icon */
 .icon {
   flex: 0 0 auto;
@@ -90,4 +159,7 @@
 .wrap {
   white-space: normal;
   overflow: visible;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
 }

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/popover/Popover.js

@@ -219,7 +219,7 @@ export const Popover = forwardRef(function Popover({ trigger: Trigger, children,
             return;
         (_b = (_a = triggerElRef.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
     }, [isOpen, returnFocus]);
-    const icon = isOpen ? _jsx(ChevronUp, { size: 20 }) : _jsx(ChevronDown, { size: 20 });
+    const icon = isOpen ? (_jsx(ChevronUp, { className: "dbc-muted-text", size: 20 })) : (_jsx(ChevronDown, { className: "dbc-muted-text", size: 20 }));
     const setOverlayRef = React.useCallback((node) => {
         assignRef(overlayRef, node);
     }, [overlayRef]);

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 {};