@dbcdk/react-components 0.0.51 → 0.0.54

package/dist/components/__stories__/story-components/ComponentSizes.d.ts

@@ -0,0 +1,2 @@
+import type { JSX } from 'react';
+export declare function ComponentSizes(): JSX.Element;

package/dist/components/__stories__/story-components/ComponentSizes.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Headline } from '../../../components/headline/Headline';
+const TOKENS = [
+    { name: '2xs', token: '--component-size-2xs' },
+    { name: 'xxs', token: '--component-size-xxs' },
+    { name: 'xs', token: '--component-size-xs' },
+    { name: 'sm', token: '--component-size-sm' },
+    { name: 'md', token: '--component-size-md' },
+    { name: 'lg', token: '--component-size-lg' },
+];
+function Swatch({ token, name }) {
+    return (_jsxs("div", { style: {
+            display: 'grid',
+            gap: 8,
+            justifyItems: 'start',
+            minWidth: 120,
+        }, children: [_jsx("div", { style: { fontSize: 'var(--font-size-xs)', color: 'var(--color-fg-muted)' }, children: name }), _jsx("div", { style: {
+                    width: `var(${token})`,
+                    height: `var(${token})`,
+                    borderRadius: 'var(--border-radius-default)',
+                    background: 'var(--color-brand)',
+                } }), _jsx("code", { style: { fontSize: 'var(--font-size-xs)' }, children: token })] }));
+}
+export function ComponentSizes() {
+    return (_jsxs("div", { style: { display: 'grid', gap: 16 }, children: [_jsx(Headline, { disableMargin: true, children: "Komponentst\u00F8rrelser" }), _jsx("p", { style: { margin: 0, color: 'var(--color-fg-muted)' }, children: "Tokens til faste komponenth\u00F8jder og st\u00F8rrelser, som bruges p\u00E5 tv\u00E6rs af inputfelter, chips, indikatorer og andre UI-elementer." }), _jsx("div", { style: { display: 'flex', gap: 20, flexWrap: 'wrap', alignItems: 'end' }, children: TOKENS.map(item => (_jsx(Swatch, { token: item.token, name: item.name }, item.token))) })] }));
+}

package/dist/components/__stories__/story-components/Elevation.d.ts

@@ -0,0 +1,2 @@
+import type { JSX } from 'react';
+export declare function Elevation(): JSX.Element;

package/dist/components/__stories__/story-components/Elevation.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Headline } from '../../../components/headline/Headline';
+const SHADOWS = [
+    { name: 'xs', token: '--shadow-xs' },
+    { name: 'sm', token: '--shadow-sm' },
+    { name: 'md', token: '--shadow-md' },
+    { name: 'lg', token: '--shadow-lg' },
+    { name: 'xl', token: '--shadow-xl' },
+];
+const RADII = [
+    { name: 'sm', token: '--border-radius-sm' },
+    { name: 'default', token: '--border-radius-default' },
+    { name: 'md', token: '--border-radius-md' },
+    { name: 'lg', token: '--border-radius-lg' },
+    { name: 'xl', token: '--border-radius-xl' },
+    { name: 'rounded', token: '--border-radius-rounded' },
+];
+export function Elevation() {
+    return (_jsxs("div", { style: { display: 'grid', gap: 24 }, children: [_jsxs("section", { style: { display: 'grid', gap: 16 }, children: [_jsx(Headline, { disableMargin: true, children: "Skygger" }), _jsx("div", { style: { display: 'flex', gap: 20, flexWrap: 'wrap' }, children: SHADOWS.map(item => (_jsxs("div", { style: {
+                                display: 'grid',
+                                gap: 8,
+                                width: 140,
+                            }, children: [_jsx("div", { style: {
+                                        height: 72,
+                                        borderRadius: 'var(--border-radius-md)',
+                                        background: 'var(--color-bg-surface)',
+                                        boxShadow: `var(${item.token})`,
+                                        border: '1px solid var(--color-border-subtle)',
+                                    } }), _jsx("div", { style: { fontSize: 'var(--font-size-xs)' }, children: item.name }), _jsx("code", { style: { fontSize: 'var(--font-size-xs)' }, children: item.token })] }, item.token))) })] }), _jsxs("section", { style: { display: 'grid', gap: 16 }, children: [_jsx(Headline, { disableMargin: true, children: "Border radius" }), _jsx("div", { style: { display: 'flex', gap: 20, flexWrap: 'wrap', alignItems: 'end' }, children: RADII.map(item => (_jsxs("div", { style: {
+                                display: 'grid',
+                                gap: 8,
+                                width: 120,
+                            }, children: [_jsx("div", { style: {
+                                        height: 64,
+                                        background: 'var(--color-bg-contextual)',
+                                        border: '1px solid var(--color-border-default)',
+                                        borderRadius: `var(${item.token})`,
+                                    } }), _jsx("div", { style: { fontSize: 'var(--font-size-xs)' }, children: item.name }), _jsx("code", { style: { fontSize: 'var(--font-size-xs)' }, children: item.token })] }, item.token))) })] }), _jsxs("section", { style: { display: 'grid', gap: 16 }, children: [_jsx(Headline, { disableMargin: true, children: "Fokusmarkering" }), _jsx("div", { style: {
+                            display: 'inline-flex',
+                            width: 180,
+                            height: 44,
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            borderRadius: 'var(--border-radius-default)',
+                            background: 'var(--color-bg-surface)',
+                            border: '1px solid var(--color-border-default)',
+                            boxShadow: 'var(--focus-ring)',
+                        }, children: _jsx("code", { style: { fontSize: 'var(--font-size-xs)' }, children: "--focus-ring" }) })] })] }));
+}

package/dist/components/__stories__/story-components/Spacing.d.ts

@@ -1,2 +1,6 @@
 import type { JSX } from 'react';
-export declare function Spacing(): JSX.Element;
+type SpacingMode = 'padding' | 'margin' | 'both';
+export declare function Spacing({ mode }: {
+    mode?: SpacingMode;
+}): JSX.Element;
+export {};

package/dist/components/__stories__/story-components/Spacing.js

@@ -62,9 +62,9 @@ function Cell({ kind, axis, size }) {
     return (_jsx("div", { className: styles.cellInner, children: _jsx("div", { className: styles.cellPreview, children: kind === 'padding' ? _jsx(PaddingPreview, { cls: cls }) : _jsx(MarginPreview, { cls: cls }) }) }));
 }
 function Grid({ kind, title, severity }) {
-    return (_jsxs("section", { className: styles.section, children: [_jsx(Headline, { marker: true, severity: severity, disableMargin: true, size: 2, children: title }), _jsx("div", { className: styles.tableContainer, children: _jsxs("table", { className: styles.table, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: styles.axisCol, children: "Axis" }), SIZES.map(size => (_jsxs("th", { className: styles.sizeHead, children: [size, " ", _jsxs("span", { className: styles.sizePx, children: ["(", SIZE_PX[size], ")"] })] }, size)))] }) }), _jsx("tbody", { children: AXES.map(axis => (_jsxs("tr", { children: [_jsx("th", { className: styles.axisHead, children: axis }), SIZES.map(size => (_jsx("td", { className: styles.cell, children: _jsx(Cell, { kind: kind, axis: axis, size: size }) }, size)))] }, axis))) })] }) })] }));
+    return (_jsxs("section", { className: styles.section, children: [_jsx(Headline, { marker: true, severity: severity, disableMargin: true, size: 2, children: title }), _jsx("div", { className: styles.tableContainer, children: _jsxs("table", { className: styles.table, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: styles.axisCol, children: "Akse" }), SIZES.map(size => (_jsxs("th", { className: styles.sizeHead, children: [size, " ", _jsxs("span", { className: styles.sizePx, children: ["(", SIZE_PX[size], ")"] })] }, size)))] }) }), _jsx("tbody", { children: AXES.map(axis => (_jsxs("tr", { children: [_jsx("th", { className: styles.axisHead, children: axis }), SIZES.map(size => (_jsx("td", { className: styles.cell, children: _jsx(Cell, { kind: kind, axis: axis, size: size }) }, size)))] }, axis))) })] }) })] }));
 }
-export function Spacing() {
+export function Spacing({ mode = 'both' }) {
     return (_jsxs("div", { className: styles.container, style: {
             ['--pad-indicator']: 'var(--color-bg-info)',
             ['--pad-border']: 'var(--color-info)',
@@ -72,5 +72,5 @@ export function Spacing() {
             ['--margin-border']: 'var(--color-warning)',
             ['--dot-pad']: 'var(--color-bg-selected)',
             ['--dot-mar']: 'var(--opac-bg-default)',
-        }, children: [_jsx("header", { className: styles.header, children: _jsx(Headline, { disableMargin: true, children: "Spacing helpers" }) }), _jsxs("section", { className: styles.intro, children: [_jsx("h2", { className: styles.h2, children: "Naming Convention" }), _jsxs("p", { className: styles.paragraph, children: ["Spacing helpers follow a simple ", _jsx("strong", { children: "prefix\u2013axis\u2013size" }), " pattern:"] }), _jsx("div", { className: styles.example, children: _jsx(Code, { children: "dbc-[prefix][axis?]-[size]" }) }), _jsxs("ul", { className: styles.list, children: [_jsxs("li", { children: [_jsx("strong", { children: "Prefix" }), ": ", _jsx(Code, { children: "p" }), " for ", _jsx("em", { children: "padding" }), ", ", _jsx(Code, { children: "m" }), " for", ' ', _jsx("em", { children: "margin" }), "."] }), _jsxs("li", { children: [_jsx("strong", { children: "Axis" }), " (optional): ", _jsx(Code, { children: "x" }), " = inline (left + right), ", _jsx(Code, { children: "y" }), ' ', "= block (top + bottom), or single sides ", _jsx(Code, { children: "t" }), " / ", _jsx(Code, { children: "b" }), " / ", _jsx(Code, { children: "s" }), ' ', "/ ", _jsx(Code, { children: "e" }), "."] }), _jsxs("li", { children: [_jsx("strong", { children: "Size" }), ": one of ", _jsx(Code, { children: "xxs" }), ", ", _jsx(Code, { children: "xs" }), ", ", _jsx(Code, { children: "sm" }), ",", ' ', _jsx(Code, { children: "md" }), ", ", _jsx(Code, { children: "lg" }), ", ", _jsx(Code, { children: "xl" }), ", ", _jsx(Code, { children: "2xl" }), "."] })] }), _jsxs("p", { className: styles.paragraph, children: ["For example: ", _jsx(Code, { children: "dbc-px-md" }), " adds medium horizontal padding, while", ' ', _jsx(Code, { children: "dbc-mt-lg" }), " adds a large top margin."] })] }), _jsx(Grid, { kind: "padding", title: "Padding", severity: "info" }), _jsx(Grid, { kind: "margin", title: "Margin", severity: "warning" })] }));
+        }, children: [_jsx("header", { className: styles.header, children: _jsx(Headline, { disableMargin: true, children: "Spacing-hj\u00E6lpere" }) }), _jsxs("section", { className: styles.intro, children: [_jsx("h2", { className: styles.h2, children: "Navngivningskonvention" }), _jsxs("p", { className: styles.paragraph, children: ["Spacing-hj\u00E6lpere f\u00F8lger et enkelt m\u00F8nster med ", _jsx("strong", { children: "prefix\u2013akse\u2013st\u00F8rrelse" }), ":"] }), _jsx("div", { className: styles.example, children: _jsx(Code, { children: "dbc-[prefix][axis?]-[size]" }) }), _jsxs("ul", { className: styles.list, children: [_jsxs("li", { children: [_jsx("strong", { children: "Prefix" }), ": ", _jsx(Code, { children: "p" }), " for ", _jsx("em", { children: "padding" }), ", ", _jsx(Code, { children: "m" }), " for", ' ', _jsx("em", { children: "margin" }), "."] }), _jsxs("li", { children: [_jsx("strong", { children: "Akse" }), " (valgfri): ", _jsx(Code, { children: "x" }), " = inline (venstre + h\u00F8jre),", ' ', _jsx(Code, { children: "y" }), " = blok (top + bund), eller enkeltsider ", _jsx(Code, { children: "t" }), " / ", _jsx(Code, { children: "b" }), " /", ' ', _jsx(Code, { children: "s" }), " / ", _jsx(Code, { children: "e" }), "."] }), _jsxs("li", { children: [_jsx("strong", { children: "St\u00F8rrelse" }), ": \u00E9n af ", _jsx(Code, { children: "xxs" }), ", ", _jsx(Code, { children: "xs" }), ", ", _jsx(Code, { children: "sm" }), ",", ' ', _jsx(Code, { children: "md" }), ", ", _jsx(Code, { children: "lg" }), ", ", _jsx(Code, { children: "xl" }), ", ", _jsx(Code, { children: "2xl" }), "."] })] }), _jsxs("p", { className: styles.paragraph, children: ["Eksempel: ", _jsx(Code, { children: "dbc-px-md" }), " giver medium horizontal padding, mens", ' ', _jsx(Code, { children: "dbc-mt-lg" }), " giver stor top-margin."] })] }), (mode === 'both' || mode === 'padding') && (_jsx(Grid, { kind: "padding", title: "Padding", severity: "info" })), (mode === 'both' || mode === 'margin') && (_jsx(Grid, { kind: "margin", title: "Margin", severity: "warning" }))] }));
 }

package/dist/components/code-block/CodeBlock.module.css

@@ -1,5 +1,7 @@
 .wrapper {
   position: relative;
+  display: inline-block;
+  max-inline-size: 100%;
   --code-actions-h: var(--component-size-sm);
   --code-actions-inset: var(--spacing-xs);
 }
@@ -17,9 +19,9 @@
   line-height: 1.35;
   overflow: auto;
   scrollbar-gutter: stable;
-
-  display: flex;
-  align-items: center;
+  display: inline-flex;
+  align-items: flex-start;
+  max-inline-size: 100%;
 }
 
 /* Sizes */

package/dist/components/copy-button/CopyButton.d.ts

@@ -5,7 +5,9 @@ interface CopyButtonProps {
     variant?: ButtonVariant;
     size?: ButtonSize;
     children?: ReactNode;
-    style?: 'button' | 'link';
+    displayStyle?: 'button' | 'link' | 'field';
+    disableIcon?: boolean;
+    disableToast?: boolean;
 }
 export declare function CopyButton(props: CopyButtonProps & ComponentProps<typeof Button>): ReactNode;
 export {};

package/dist/components/copy-button/CopyButton.js

@@ -4,19 +4,36 @@ import { Check, Copy } from 'lucide-react';
 import { useState } from 'react';
 import styles from './CopyButton.module.css';
 import { Button } from '../button/Button';
+import { Input } from '../forms/input/Input';
 import { Hyperlink } from '../hyperlink/Hyperlink';
+import { useOptionalToast } from '../toast/provider/ToastProvider';
 export function CopyButton(props) {
-    var _a, _b;
-    const { text, variant = 'outlined', size = 'sm', children, ...rest } = props;
+    var _a, _b, _c;
+    const { text, variant = 'outlined', size = 'sm', children, displayStyle, disableIcon = false, disableToast = false, className, style, fullWidth, disabled, ...rest } = props;
     const [copied, setCopied] = useState(false);
+    const toast = useOptionalToast();
+    const buttonLabel = children !== null && children !== void 0 ? children : 'Kopiér';
+    const icon = disableIcon ? null : copied ? _jsx(Check, {}) : _jsx(Copy, {});
+    const handleCopySuccess = () => {
+        if (!disableIcon) {
+            setCopied(true);
+            window.setTimeout(() => setCopied(false), 1000);
+            return;
+        }
+        if (!disableToast) {
+            toast === null || toast === void 0 ? void 0 : toast.showToast({
+                severity: 'neutral',
+                message: 'Kopieret',
+            });
+        }
+    };
     const handleCopy = async () => {
         try {
             if (!window.isSecureContext || !navigator.clipboard) {
                 throw new Error('Clipboard API unavailable');
             }
             await navigator.clipboard.writeText(text);
-            setCopied(true);
-            setTimeout(() => setCopied(false), 1000);
+            handleCopySuccess();
         }
         catch (err) {
             console.error('Failed to copy:', err);
@@ -31,8 +48,7 @@ export function CopyButton(props) {
                 const success = document.execCommand('copy');
                 document.body.removeChild(textarea);
                 if (success) {
-                    setCopied(true);
-                    setTimeout(() => setCopied(false), 1000);
+                    handleCopySuccess();
                 }
             }
             catch (fallbackErr) {
@@ -40,16 +56,23 @@ export function CopyButton(props) {
             }
         }
     };
-    if (props.style === 'link') {
-        return (_jsx(Hyperlink, { asChild: true, variant: "secondary", inline: props.variant === 'inline', children: _jsxs("button", { "aria-label": children ? '' : ((_a = rest['aria-label']) !== null && _a !== void 0 ? _a : 'Kopier til udklipsholder'), onClick: e => {
+    if (displayStyle === 'link') {
+        return (_jsx(Hyperlink, { asChild: true, variant: "primary", icon: icon, children: _jsx("button", { type: "button", "aria-label": children ? '' : ((_a = rest['aria-label']) !== null && _a !== void 0 ? _a : 'Kopier til udklipsholder'), onClick: e => {
                     e.preventDefault();
                     e.stopPropagation();
                     handleCopy();
-                }, className: `${styles.link} ${copied ? styles.copied : ''}`, children: [children, copied ? _jsx(Check, {}) : _jsx(Copy, {})] }) }));
+                }, className: [styles.link, copied ? styles.copied : '', className !== null && className !== void 0 ? className : '']
+                    .filter(Boolean)
+                    .join(' '), style: style, disabled: disabled, children: buttonLabel }) }));
+    }
+    if (displayStyle === 'field') {
+        return (_jsx(Input, { value: text, readOnly: true, disabled: disabled, fullWidth: fullWidth, className: className, style: style, inputSize: size, variant: "outlined", buttonLabel: String(buttonLabel), buttonIcon: icon, onButtonClick: () => {
+                void handleCopy();
+            }, "aria-label": (_b = rest['aria-label']) !== null && _b !== void 0 ? _b : 'Kopier til udklipsholder' }));
     }
-    return (_jsxs(Button, { ...rest, "aria-label": children ? '' : ((_b = rest['aria-label']) !== null && _b !== void 0 ? _b : 'Kopier til udklipsholder'), onClick: e => {
+    return (_jsxs(Button, { ...rest, "aria-label": children ? '' : ((_c = rest['aria-label']) !== null && _c !== void 0 ? _c : 'Kopier til udklipsholder'), onClick: e => {
             e.preventDefault();
             e.stopPropagation();
             handleCopy();
-        }, variant: variant, size: size, children: [_jsx("span", { className: `${styles.container} ${copied ? styles.copied : ''}`, children: copied ? _jsx(Check, {}) : _jsx(Copy, {}) }), children] }));
+        }, variant: variant, size: size, className: className, style: style, disabled: disabled, children: [_jsx("span", { className: `${styles.container} ${copied ? styles.copied : ''}`, children: icon }), buttonLabel] }));
 }

package/dist/components/copy-button/CopyButton.module.css

@@ -1,6 +1,22 @@
-.copied > button {
-  background-color: var(--color-status-success-bg);
-  border-color: var(--color-status-success-border);
+.container,
+.link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
+  background-color: unset;
+}
+
+.link {
+  appearance: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  vertical-align: middle;
+}
+
+.copied {
   color: var(--color-status-success);
-  transition: all ease-in 0.1s;
+  transition: color ease-in 0.1s;
 }

package/dist/components/filter-field/FilterField.d.ts

@@ -24,12 +24,13 @@ export interface FilterFieldProps extends Omit<React.InputHTMLAttributes<HTMLInp
     label?: string;
     placeholder?: string;
     disabled?: boolean;
+    minWidth?: string;
     width?: string;
     maxWidth?: string;
     debounceTime?: number;
 }
 export declare const NUMBER_OPERATORS: Operator[];
-export declare function FilterField({ field, control, operator, value, onChange, operators, options, single, size, variant, label, placeholder, disabled, 'data-cy': dataCy, width, maxWidth, debounceTime, ...inputProps }: FilterFieldProps & {
+export declare function FilterField({ field, control, operator, value, onChange, operators, options, single, size, variant, label, placeholder, disabled, 'data-cy': dataCy, minWidth, width, maxWidth, debounceTime, ...inputProps }: FilterFieldProps & {
     'data-cy'?: string;
 }): React.ReactElement;
 export {};

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

@@ -57,7 +57,7 @@ function OperatorDropdown({ value, onChange, operators, size = 'sm', disabled, }
         setActiveIndex(operators.indexOf(op));
         (_a = popRef.current) === null || _a === void 0 ? void 0 : _a.close();
     };
-    return (_jsx(Popover, { ref: popRef, minWidth: "220px", trigger: (toggle, icon) => (_jsxs("button", { type: "button", onClick: toggle, disabled: disabled, "aria-label": "Skift operator", className: `${styles.operatorTrigger} ${styles[size]}`, children: [_jsx("span", { className: styles.operatorText, children: LABELS[value] }), icon] })), children: _jsx(Menu, { children: operators.map(op => {
+    return (_jsx(Popover, { ref: popRef, minWidth: "160px", trigger: (toggle, icon) => (_jsxs("button", { type: "button", onClick: toggle, disabled: disabled, "aria-label": "Skift operator", className: `${styles.operatorTrigger} ${styles[size]}`, children: [_jsx("span", { className: styles.operatorText, children: LABELS[value] }), icon] })), children: _jsx(Menu, { children: operators.map(op => {
                 const selected = op === value;
                 return (_jsx(Menu.Item, { active: selected, children: _jsxs("button", { type: "button", onClick: () => handleSelect(op), disabled: disabled, children: [_jsx("span", { style: { width: 16, display: 'inline-flex', justifyContent: 'center' }, children: selected ? _jsx(Check, { size: 16 }) : null }), LABELS[op]] }) }, op));
             }) }) }));
@@ -69,7 +69,7 @@ function isFilterActive(value) {
         return value.trim().length > 0;
     return value != null;
 }
-export function FilterField({ field, control, operator, value, onChange, operators, options = [], single = true, size = 'md', variant = 'surface', label, placeholder = 'Type value…', disabled, 'data-cy': dataCy, width, maxWidth, debounceTime = INPUT_DEBOUNCE_MS, ...inputProps }) {
+export function FilterField({ field, control, operator, value, onChange, operators, options = [], single = true, size = 'md', variant = 'surface', label, placeholder = 'Type value…', disabled, 'data-cy': dataCy, minWidth, width, maxWidth, debounceTime = INPUT_DEBOUNCE_MS, ...inputProps }) {
     var _a, _b, _c, _d, _e, _f;
     const ops = useMemo(() => operators !== null && operators !== void 0 ? operators : DEFAULT_TEXT_OPERATORS, [operators]);
     const [selectedOperator, setSelectedOperator] = useState(operator);
@@ -171,7 +171,7 @@ export function FilterField({ field, control, operator, value, onChange, operato
                         pendingValueRef.current = '';
                         setLocalValue('');
                         emit({ value: '' });
-                    } })) : (_jsx(Typeahead, { options: options, mode: single ? 'single' : 'multi', selectedValue: single ? ((_f = value) !== null && _f !== void 0 ? _f : null) : Array.isArray(value) ? value : [], onChange: v => emit({ value: v }), placeholder: placeholder, variant: "embedded", inputProps: {
+                    } })) : (_jsx(Typeahead, { options: options, mode: single ? 'single' : 'multi', selectedValue: single ? ((_f = value) !== null && _f !== void 0 ? _f : null) : Array.isArray(value) ? value : [], onChange: v => emit({ value: v }), minWidth: minWidth, placeholder: placeholder, variant: "embedded", inputProps: {
                         inputSize: size,
                         fieldClassName: styles.embeddedInputField,
                         inputClassName: styles.embeddedInputElement,

package/dist/components/forms/input/Input.d.ts

@@ -8,7 +8,7 @@ export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size
     minWidth?: string | number;
     width?: string | number;
     maxWidth?: string | number;
-    inputSize?: Size;
+    inputSize?: Exclude<Size, 'xl'>;
     variant?: InputVariant;
     onClear?: () => void;
     onButtonClick?: () => void;

package/dist/components/forms/input/Input.js

@@ -59,6 +59,6 @@ export const Input = forwardRef(function Input({ label, error, helpText, orienta
                         .filter(Boolean)
                         .join(' '), "data-forminput": "field", "data-modified": modified ? 'true' : undefined, "aria-disabled": inputProps.disabled ? 'true' : undefined, ...(tooltip ? triggerProps : {}), children: [icon && _jsx("span", { className: styles.icon, children: icon }), startAdornment && _jsx("span", { className: styles.startAdornment, children: startAdornment }), _jsx("input", { ...inputProps, id: inputId, ref: mergeRefs(inputRef, ref), className: [styles.input, inputSize ? styles[inputSize] : '', inputClassName !== null && inputClassName !== void 0 ? inputClassName : '']
                                 .filter(Boolean)
-                                .join(' ') }), endAdornment && _jsx("span", { className: styles.endAdornment, children: endAdornment }), onClear && inputProps.value && _jsx(ClearButton, { onClick: onClear, absolute: true })] }), hasButton && (_jsxs(Button, { onClick: onButtonClick, className: styles.trailingButton, type: "button", variant: trailingButtonVariant, children: [buttonIcon !== null && buttonIcon !== void 0 ? buttonIcon : null, buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : null] }))] }) }));
+                                .join(' ') }), endAdornment && _jsx("span", { className: styles.endAdornment, children: endAdornment }), onClear && inputProps.value && _jsx(ClearButton, { onClick: onClear, absolute: true })] }), hasButton && (_jsxs(Button, { onClick: onButtonClick, className: styles.trailingButton, type: "button", variant: trailingButtonVariant, size: inputSize, children: [buttonIcon !== null && buttonIcon !== void 0 ? buttonIcon : null, buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : null] }))] }) }));
 });
 Input.displayName = 'Input';

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

@@ -74,7 +74,7 @@
 }
 
 .withClear .input {
-  padding-inline-end: calc(var(--spacing-xs) + 16px + var(--spacing-xs));
+  padding-inline-end: calc(var(--spacing-xxs) + 16px + var(--spacing-xxs));
 }
 
 /* Global focus reset - variants own visible focus treatment */
@@ -389,7 +389,7 @@
   display: flex;
   align-items: center;
   gap: 4px;
-  margin-left: 4px;
+  margin-left: var(--spacing-xs);
 }
 
 .endAdornment {

package/dist/components/forms/typeahead/Typeahead.d.ts

@@ -25,10 +25,11 @@ interface TypeaheadProps<T> {
     inputProps?: Omit<InputProps, 'onChange' | 'value'>;
     inputSize?: InputProps['inputSize'];
     width?: InputProps['width'];
+    minWidth?: string;
     autoComplete?: InputProps['autoComplete'];
     autoCorrect?: InputProps['autoCorrect'];
     autoCapitalize?: InputProps['autoCapitalize'];
     spellCheck?: InputProps['spellCheck'];
 }
-export declare function Typeahead<T extends string | number>({ options, mode, multiValueDisplayMode, multiSelectedValuesDisplayMode, multiSelectedValueChipContent, selectedValue, onChange, placeholder, variant, disabled, fullWidth, onClear, emptyMessage, filterOptions, inputProps, inputSize, width, autoComplete, autoCorrect, autoCapitalize, spellCheck, }: TypeaheadProps<T>): React.ReactElement;
+export declare function Typeahead<T extends string | number>({ options, mode, multiValueDisplayMode, multiSelectedValuesDisplayMode, multiSelectedValueChipContent, selectedValue, onChange, placeholder, variant, disabled, fullWidth, onClear, emptyMessage, filterOptions, inputProps, inputSize, width, minWidth, autoComplete, autoCorrect, autoCapitalize, spellCheck, }: TypeaheadProps<T>): React.ReactElement;
 export {};

package/dist/components/forms/typeahead/Typeahead.js

@@ -6,7 +6,8 @@ import { Chip } from '../../../components/chip/Chip';
 import { Input } from '../../../components/forms/input/Input';
 import { Menu } from '../../../components/menu/Menu';
 import { Popover } from '../../../components/popover/Popover';
-export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'chips', multiSelectedValuesDisplayMode = 'hidden', multiSelectedValueChipContent = 'label', selectedValue = null, onChange, placeholder, variant = 'outlined', disabled = false, fullWidth = false, onClear, emptyMessage = 'Ingen resultater', filterOptions, inputProps, inputSize, width, autoComplete, autoCorrect, autoCapitalize, spellCheck, }) {
+import styles from './Typeahead.module.css';
+export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'chips', multiSelectedValuesDisplayMode = 'hidden', multiSelectedValueChipContent = 'label', selectedValue = null, onChange, placeholder, variant = 'outlined', disabled = false, fullWidth = false, onClear, emptyMessage = 'Ingen resultater', filterOptions, inputProps, inputSize, width, minWidth, autoComplete, autoCorrect, autoCapitalize, spellCheck, }) {
     var _a;
     const inputRef = useRef(null);
     const listboxRef = useRef(null);
@@ -43,7 +44,7 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
     const multiSelectionAdornment = mode === 'multi' && selectedOptions.length > 0 ? (multiValueDisplayMode === 'count' ? (_jsxs("span", { className: "dbc-muted-text dbc-sm-text", style: {
             whiteSpace: 'nowrap',
             flexShrink: 0,
-            marginRight: 6,
+            marginRight: 'var(--spacing-xxs)',
         }, children: ["(", selectedOptions.length, ")"] })) : ((() => {
         const MAX_CHIPS = 2;
         const chipsToShow = selectedOptions.slice(0, MAX_CHIPS);
@@ -56,6 +57,7 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
                 overflow: 'hidden',
             }, children: [chipsToShow.map(option => (_jsx(Chip, { size: "sm", type: "rounded", onClose: () => commitSelection(option), children: option.label }, option.value))), extraCount > 0 && (_jsxs("span", { className: "dbc-muted-text dbc-sm-text dbc-px-xxs", children: ["+", extraCount] }))] }));
     })())) : undefined;
+    const usesCountAdornment = mode === 'multi' && multiValueDisplayMode === 'count' && selectedOptions.length > 0;
     useEffect(() => {
         var _a;
         if (mode === 'multi') {
@@ -268,7 +270,7 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
                 ? 8
                 : 0,
             width: fullWidth ? '100%' : undefined,
-        }, children: [_jsx(Popover, { open: open, onOpenChange: nextOpen => {
+        }, children: [_jsx(Popover, { open: open, minWidth: minWidth, onOpenChange: nextOpen => {
                     setOpen(nextOpen);
                     if (nextOpen) {
                         if (mode === 'single' && selectedOption) {
@@ -329,7 +331,12 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
                             if (e.defaultPrevented)
                                 return;
                             handleKeyDown(e);
-                        }, placeholder: placeholder, variant: variant, inputSize: (_a = inputSize !== null && inputSize !== void 0 ? inputSize : inputProps === null || inputProps === void 0 ? void 0 : inputProps.inputSize) !== null && _a !== void 0 ? _a : 'md', width: width !== null && width !== void 0 ? width : inputProps === null || inputProps === void 0 ? void 0 : inputProps.width, autoComplete: (_b = autoComplete !== null && autoComplete !== void 0 ? autoComplete : inputProps === null || inputProps === void 0 ? void 0 : inputProps.autoComplete) !== null && _b !== void 0 ? _b : 'off', autoCorrect: (_c = autoCorrect !== null && autoCorrect !== void 0 ? autoCorrect : inputProps === null || inputProps === void 0 ? void 0 : inputProps.autoCorrect) !== null && _c !== void 0 ? _c : 'off', autoCapitalize: (_d = autoCapitalize !== null && autoCapitalize !== void 0 ? autoCapitalize : inputProps === null || inputProps === void 0 ? void 0 : inputProps.autoCapitalize) !== null && _d !== void 0 ? _d : 'none', spellCheck: (_e = spellCheck !== null && spellCheck !== void 0 ? spellCheck : inputProps === null || inputProps === void 0 ? void 0 : inputProps.spellCheck) !== null && _e !== void 0 ? _e : false, disabled: disabled, fullWidth: fullWidth, onClear: () => {
+                        }, placeholder: placeholder, variant: variant, inputSize: (_a = inputSize !== null && inputSize !== void 0 ? inputSize : inputProps === null || inputProps === void 0 ? void 0 : inputProps.inputSize) !== null && _a !== void 0 ? _a : 'md', width: width !== null && width !== void 0 ? width : inputProps === null || inputProps === void 0 ? void 0 : inputProps.width, autoComplete: (_b = autoComplete !== null && autoComplete !== void 0 ? autoComplete : inputProps === null || inputProps === void 0 ? void 0 : inputProps.autoComplete) !== null && _b !== void 0 ? _b : 'off', autoCorrect: (_c = autoCorrect !== null && autoCorrect !== void 0 ? autoCorrect : inputProps === null || inputProps === void 0 ? void 0 : inputProps.autoCorrect) !== null && _c !== void 0 ? _c : 'off', autoCapitalize: (_d = autoCapitalize !== null && autoCapitalize !== void 0 ? autoCapitalize : inputProps === null || inputProps === void 0 ? void 0 : inputProps.autoCapitalize) !== null && _d !== void 0 ? _d : 'none', spellCheck: (_e = spellCheck !== null && spellCheck !== void 0 ? spellCheck : inputProps === null || inputProps === void 0 ? void 0 : inputProps.spellCheck) !== null && _e !== void 0 ? _e : false, disabled: disabled, fullWidth: fullWidth, inputClassName: [
+                            inputProps === null || inputProps === void 0 ? void 0 : inputProps.inputClassName,
+                            usesCountAdornment ? styles.inputWithoutStartPadding : '',
+                        ]
+                            .filter(Boolean)
+                            .join(' '), onClear: () => {
                             setInputValue('');
                             setQuery('');
                             setActiveIndex(-1);
@@ -346,7 +353,7 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
                             ? Array.isArray(selectedValue) && selectedValue.includes(option.value)
                             : option.value === selectedValue;
                         const optionId = `${listboxId}-option-${index}`;
-                        return (mode === 'multi' ? (_jsx(Menu.CheckItem, { checked: isSelected, active: isActive, interactiveRef: node => {
+                        return mode === 'multi' ? (_jsx(Menu.CheckItem, { checked: isSelected, active: isActive, interactiveRef: node => {
                                 optionRefs.current[index] = node;
                             }, interactiveProps: {
                                 id: optionId,
@@ -360,7 +367,7 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
                                     optionRefs.current[index] = node;
                                 }, id: optionId, type: "button", role: "option", "aria-selected": isSelected, onMouseEnter: () => setActiveIndex(index), onMouseDown: e => {
                                     e.preventDefault();
-                                }, onClick: () => commitSelection(option), children: _jsx("span", { children: option.label }) }) }, option.value)));
+                                }, onClick: () => commitSelection(option), children: _jsx("span", { children: option.label }) }) }, option.value));
                     })) : (_jsx(Menu.Item, { disabled: true, children: emptyMessage })) }) }), mode === 'multi' &&
                 multiSelectedValuesDisplayMode === 'below-input' &&
                 selectedOptions.length > 0 && (_jsx("div", { style: {

package/dist/components/forms/typeahead/Typeahead.module.css

@@ -0,0 +1,3 @@
+.inputWithoutStartPadding {
+  padding-inline-start: 0;
+}

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

@@ -1,5 +1,6 @@
 .link {
   display: inline-flex;
+  align-items: center;
   gap: var(--spacing-xs);
   position: relative;
   background: none;
@@ -11,6 +12,11 @@
   cursor: pointer;
   color: var(--color-brand);
   line-height: inherit;
+  transition:
+    color var(--transition-fast) var(--ease-standard),
+    transform 60ms ease,
+    opacity 60ms ease,
+    background-color var(--transition-fast) var(--ease-standard);
 }
 
 .link.secondary {
@@ -38,16 +44,23 @@
 
 .link {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   max-width: 100%;
 }
 
 .link {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   max-width: 100%;
 }
 
+.content {
+  display: inline-flex;
+  align-items: center;
+}
+
 .link::after {
   content: '';
   position: absolute;
@@ -64,6 +77,19 @@
 .link:hover::after {
   transform: scaleX(1);
 }
+
+.link:active {
+  color: var(--color-link-hover);
+}
+
+.link:active::after {
+  transform: scaleX(1);
+}
+
+.link.block:active {
+  background-color: var(--color-bg-contextual);
+}
+
 .link:focus-visible {
   outline: 2px solid var(--color-brand);
   outline-offset: 2px;

package/dist/components/menu/Menu.module.css

@@ -23,7 +23,6 @@
   text-align: start;
   text-decoration: none;
 
-  /* choose your density */
   padding-block: var(--spacing-xs);
   padding-inline: var(--spacing-md);
 
@@ -123,7 +122,7 @@
 .active,
 .interactive.active,
 .row > .interactiveChild.active {
-  background-color: var(--color-bg-hover-subtle);
+  background-color: var(--color-bg-toolbar-hover);
 }
 
 /* Selected item */

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

@@ -16,7 +16,7 @@
   border: 1px solid var(--color-border-default);
   background-color: var(--color-bg-surface);
   border-radius: var(--border-radius-default);
-  padding: var(--spacing-sm) 0;
+  padding: 0;
   z-index: var(--z-popover);
   overflow: auto;
   box-shadow: var(--shadow-md);

package/dist/components/search-box/SearchBox.d.ts

@@ -3,7 +3,7 @@ import { InputVariant } from '../../components/forms/input/Input';
 import { Size } from '../../types/sizes.types';
 type SearchBoxProps<T extends Record<string, unknown>> = {
     inputWidth?: string | number;
-    inputSize?: Size;
+    inputSize?: Exclude<Size, 'xl'>;
     variant?: InputVariant;
     result?: T[];
     resultKeys?: Array<Extract<keyof T, string>>;

package/dist/components/split-pane/provider/SplitPaneContext.js

@@ -111,6 +111,14 @@ export function SplitPaneProvider({ children, direction, initialPrimarySize, min
         minSecondarySize,
         containerRef,
         storageKey,
-    }), [direction, primarySize, handleSizeChange, resetDefault, minPrimarySize, minSecondarySize, storageKey]);
+    }), [
+        direction,
+        primarySize,
+        handleSizeChange,
+        resetDefault,
+        minPrimarySize,
+        minSecondarySize,
+        storageKey,
+    ]);
     return _jsx(SplitPaneContext.Provider, { value: value, children: children });
 }

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

@@ -7,7 +7,7 @@ export type TabItem = {
     content: ReactNode;
     disabled?: boolean;
     hidden?: boolean;
-    badge?: number;
+    badge?: number | string;
 };
 type TabsVariant = 'filled' | 'outlined';
 export interface TabsProps {

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, { 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 ? (_jsx("span", { className: styles.badge, children: _jsx(Chip, { 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/toast/Toast.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Toast.tsx
 import { X } from 'lucide-react';
 import styles from './Toast.module.css';
 import { Button } from '../button/Button';
@@ -7,6 +6,15 @@ 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", 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 }) }))] }));
+    const canClose = severity !== 'neutral';
+    const isDismissibleNeutral = severity === 'neutral' && Boolean(onClose);
+    const CloseButton = onClose && canClose ? (_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]} ${isDismissibleNeutral ? styles.dismissibleNeutral : ''}`, role: "status", onClick: isDismissibleNeutral ? onClose : undefined, onKeyDown: isDismissibleNeutral
+            ? e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    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 }) }))] }));
 }

package/dist/components/toast/Toast.module.css

@@ -49,6 +49,36 @@
   border-left-color: var(--color-status-error-border);
 }
 
+.neutral {
+  background-color: var(--color-bg-inverse);
+  color: var(--color-fg-inverse);
+  border-left-width: 0;
+  min-width: 50px;
+  max-width: 200px;
+  width: fit-content;
+  align-self: flex-end;
+}
+
+.dismissibleNeutral {
+  cursor: pointer;
+  transition:
+    background-color var(--transition-fast) var(--ease-standard),
+    transform 60ms ease;
+}
+
+.dismissibleNeutral:hover {
+  background-color: color-mix(in srgb, var(--color-bg-inverse) 92%, white);
+}
+
+.dismissibleNeutral:active {
+  transform: translateY(1px);
+}
+
+.dismissibleNeutral:focus-visible {
+  outline: 2px solid var(--color-fg-inverse);
+  outline-offset: 2px;
+}
+
 /* Layout */
 .content {
   flex: 1;

package/dist/components/toast/provider/ToastProvider.d.ts

@@ -20,4 +20,5 @@ type ToastProviderProps = {
 };
 export declare function ToastProvider({ children, defaultDuration, }: ToastProviderProps): React.ReactNode;
 export declare function useToast(): ToastContextValue;
+export declare function useOptionalToast(): ToastContextValue | undefined;
 export {};

package/dist/components/toast/provider/ToastProvider.js

@@ -38,12 +38,14 @@ export function ToastProvider({ children, defaultDuration = 4000, }) {
         return id;
     }, [scheduleAutoDismiss]);
     const clearToasts = useCallback(() => {
-        toasts.forEach(t => clearTimeoutForId(t.id));
+        timeouts.current.forEach(timeoutId => window.clearTimeout(timeoutId));
+        timeouts.current.clear();
         setToasts([]);
-    }, [toasts]);
+    }, []);
     useEffect(() => () => {
-        toasts.forEach(t => clearTimeoutForId(t.id));
-    }, [toasts]);
+        timeouts.current.forEach(timeoutId => window.clearTimeout(timeoutId));
+        timeouts.current.clear();
+    }, []);
     return (_jsxs(ToastContext.Provider, { value: { showToast, hideToast, clearToasts }, children: [children, toasts.length > 0 && (_jsx("div", { className: styles.container, "aria-live": "polite", "aria-atomic": "false", children: toasts.map(toast => {
                     var _a;
                     return (_jsx(Toast, { title: toast.title, message: toast.message, severity: (_a = toast.severity) !== null && _a !== void 0 ? _a : 'info', action: toast.action && {
@@ -63,3 +65,6 @@ export function useToast() {
     }
     return ctx;
 }
+export function useOptionalToast() {
+    return useContext(ToastContext);
+}

package/dist/styles/themes/dbc/dark.css

@@ -67,6 +67,7 @@ html[data-theme='dark'] {
   --color-bg-surface: #111827;
   --color-bg-surface-subtle: var(--dbc-surface-muted);
   --color-bg-surface-strong: var(--dbc-surface-strong);
+  --color-bg-inverse: #2b3444;
 
   --color-bg-toolbar: #1f2937;
   --color-bg-toolbar-hover: #263244;
@@ -95,6 +96,7 @@ html[data-theme='dark'] {
   --color-fg-default: var(--dbc-neutral-900);
   --color-fg-muted: var(--dbc-neutral-700);
   --color-fg-subtle: var(--dbc-neutral-600);
+  --color-fg-inverse: #f9fafb;
 
   --color-fg-on-strong: #111827;
   --color-fg-on-brand: #111827;

package/dist/styles/themes/dbc/light.css

@@ -67,6 +67,7 @@ html[data-theme='light'] {
   --color-bg-surface: #ffffff;
   --color-bg-surface-subtle: var(--dbc-surface-muted);
   --color-bg-surface-strong: var(--dbc-surface-strong);
+  --color-bg-inverse: #1f2937;
 
   --color-bg-toolbar: #f3f4f6;
   --color-bg-toolbar-hover: #eef0f3;
@@ -95,6 +96,7 @@ html[data-theme='light'] {
   --color-fg-default: var(--dbc-neutral-900);
   --color-fg-muted: var(--dbc-neutral-700);
   --color-fg-subtle: var(--dbc-neutral-600);
+  --color-fg-inverse: #ffffff;
 
   --color-fg-on-strong: #ffffff;
   --color-fg-on-brand: #ffffff;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.51",
+  "version": "0.0.54",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",