@dbcdk/react-components 0.0.27 → 0.0.29

package/dist/components/chip/Chip.d.ts

@@ -2,14 +2,14 @@ import type { ReactNode, JSX } from 'react';
 import { Severity } from '../../constants/severity.types';
 interface ChipProps {
     children: ReactNode;
-    severity?: Severity | null;
+    severity?: Severity;
     disableIcon?: boolean;
     customIcon?: ReactNode;
     loading?: boolean;
     fullWidth?: boolean;
     onClose?: () => void;
     size?: 'sm' | 'md' | 'lg';
-    type?: 'default' | 'rounded' | 'outlined' | 'subtle';
+    type?: 'default' | 'rounded' | 'outlined';
     selected?: boolean;
 }
 export declare function Chip({ children, severity, loading, disableIcon, fullWidth, size, customIcon, type, selected, onClose, }: ChipProps): JSX.Element;

package/dist/components/chip/Chip.js

@@ -5,7 +5,7 @@ import { useState, useRef, useEffect } from 'react';
 import styles from './Chip.module.css';
 import { Icon } from '../icon/Icon';
 import { SkeletonLoaderItem } from '../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
-export function Chip({ children, severity = 'neutral', loading, disableIcon = true, fullWidth = false, size = 'md', customIcon, type = 'rounded', selected = false, onClose, }) {
+export function Chip({ children, severity = 'neutral', loading, disableIcon = true, fullWidth = false, size = 'sm', customIcon, type = 'rounded', selected = false, onClose, }) {
     const [chipWidth, setChipWidth] = useState(undefined);
     const chipRef = useRef(null);
     useEffect(() => {

package/dist/components/chip/Chip.module.css

@@ -4,9 +4,9 @@
   gap: var(--spacing-xs);
   white-space: nowrap;
 
-  color: var(--chip-fg-default, var(--color-fg-default));
-  background: transparent;
-  border: 1px solid transparent;
+  color: var(--chip-fg, var(--color-fg-default));
+  background: var(--chip-bg, transparent);
+  border: 1px solid var(--chip-border, transparent);
   border-radius: var(--border-radius-rounded);
 
   padding-inline: var(--spacing-sm);
@@ -39,17 +39,17 @@
 /* Types */
 
 .outlined {
-  background-color: var(--color-bg-surface);
-  border: 1px solid var(--color-border-subtle);
+  --chip-bg: var(--color-bg-surface);
+  --chip-border: var(--chip-outlined-border, var(--color-border-subtle));
+  --chip-fg: var(--chip-outlined-fg, var(--color-fg-muted));
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
-  color: var(--color-fg-muted);
 }
 
 .outlined:hover {
   background-color: var(--color-bg-surface);
-  border-color: var(--color-border-default);
+  border-color: var(--chip-outlined-border-hover, var(--color-border-default));
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-  color: var(--color-fg-default);
+  color: var(--chip-outlined-fg-hover, var(--color-fg-default));
 }
 
 .outlined:focus-visible {
@@ -58,27 +58,7 @@
   box-shadow:
     0 1px 2px rgba(0, 0, 0, 0.03),
     inset 0 0 0 1px var(--color-border-selected);
-  color: var(--color-fg-default);
-}
-
-.subtle {
-  background-color: var(--color-bg-toolbar);
-  border: 1px solid transparent;
-  box-shadow: inset 0 0 0 1px transparent;
-  color: var(--color-fg-muted);
-}
-
-.subtle:hover {
-  background-color: var(--color-bg-toolbar-hover);
-  border-color: transparent;
-  color: var(--color-fg-default);
-}
-
-.subtle:focus-visible {
-  outline: none;
-  border-color: var(--color-border-selected);
-  box-shadow: inset 0 0 0 1px var(--color-border-selected);
-  color: var(--color-fg-default);
+  color: var(--chip-outlined-fg-hover, var(--color-fg-default));
 }
 
 /* Content */
@@ -103,6 +83,11 @@
   color: currentColor;
 }
 
+.sm .leading svg {
+  inline-size: var(--icon-size-xs);
+  block-size: var(--icon-size-xs);
+}
+
 /* Sizes */
 
 .sm {
@@ -122,44 +107,68 @@
 /* Status variants */
 
 .neutral {
-  background-color: var(--color-bg-toolbar);
-  color: var(--color-fg-default);
-  border-color: transparent;
-  box-shadow: inset 0 0 0 1px var(--color-border-subtle);
+  --chip-bg: var(--color-bg-toolbar);
+  --chip-fg: var(--color-fg-default);
+  --chip-border: transparent;
+  --chip-outlined-border: var(--color-border-subtle);
+  --chip-outlined-border-hover: var(--color-border-default);
+  --chip-outlined-fg: var(--color-fg-muted);
+  --chip-outlined-fg-hover: var(--color-fg-default);
+  box-shadow: none;
 }
 
 .success {
-  background-color: var(--color-status-success-bg);
-  color: var(--color-status-success-fg);
-  border-color: transparent;
+  --chip-bg: var(--color-status-success-bg);
+  --chip-fg: var(--color-status-success-fg);
+  --chip-border: transparent;
+  --chip-outlined-border: var(--color-status-success-border);
+  --chip-outlined-border-hover: var(--color-status-success-border);
+  --chip-outlined-fg: var(--color-status-success-fg);
+  --chip-outlined-fg-hover: var(--color-status-success-fg);
   box-shadow: inset 0 0 0 1px var(--color-status-success-border);
 }
 
 .warning {
-  background-color: var(--color-status-warning-bg);
-  color: var(--color-status-warning-fg);
-  border-color: transparent;
+  --chip-bg: var(--color-status-warning-bg);
+  --chip-fg: var(--color-status-warning-fg);
+  --chip-border: transparent;
+  --chip-outlined-border: var(--color-status-warning-border);
+  --chip-outlined-border-hover: var(--color-status-warning-border);
+  --chip-outlined-fg: var(--color-status-warning-fg);
+  --chip-outlined-fg-hover: var(--color-status-warning-fg);
   box-shadow: inset 0 0 0 1px var(--color-status-warning-border);
 }
 
 .error {
-  background-color: var(--color-status-error-bg);
-  color: var(--color-status-error-fg);
-  border-color: transparent;
+  --chip-bg: var(--color-status-error-bg);
+  --chip-fg: var(--color-status-error-fg);
+  --chip-border: transparent;
+  --chip-outlined-border: var(--color-status-error-border);
+  --chip-outlined-border-hover: var(--color-status-error-border);
+  --chip-outlined-fg: var(--color-status-error-fg);
+  --chip-outlined-fg-hover: var(--color-status-error-fg);
   box-shadow: inset 0 0 0 1px var(--color-status-error-border);
 }
 
 .info {
-  background-color: var(--color-status-info-bg);
-  color: var(--color-status-info-fg);
-  border-color: transparent;
+  --chip-bg: var(--color-status-info-bg);
+  --chip-fg: var(--color-status-info-fg);
+  --chip-border: transparent;
+  --chip-outlined-border: var(--color-status-info-border);
+  --chip-outlined-border-hover: var(--color-status-info-border);
+  --chip-outlined-fg: var(--color-status-info-fg);
+  --chip-outlined-fg-hover: var(--color-status-info-fg);
   box-shadow: inset 0 0 0 1px var(--color-status-info-border);
 }
 
 .brand {
-  background-color: var(--color-brand);
-  color: var(--color-fg-on-brand);
-  border-color: transparent;
+  --chip-bg: var(--color-brand);
+  --chip-fg: var(--color-fg-on-brand);
+  --chip-border: transparent;
+  --chip-outlined-border: color-mix(in srgb, var(--color-brand) 50%, transparent);
+  --chip-outlined-border-hover: var(--color-brand);
+  --chip-outlined-fg: var(--color-brand);
+  --chip-outlined-fg-hover: var(--color-brand);
   box-shadow: inset 0 0 0 1px transparent;
 }
 

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

@@ -143,12 +143,5 @@ export function FilterField({ field, control, operator, value, onChange, operato
                             clearTimeout(debounceRef.current);
                         setLocalValue('');
                         emit({ value: '' });
-                    } })) : single ? (_jsx(Select, { options: options, selectedValue: (_b = value) !== null && _b !== void 0 ? _b : null, onChange: v => emit({ value: v }), placeholder: placeholder, size: size, variant: "inline", onClear: () => emit({ value: '' }) })) : (_jsx(MultiSelect, { options: options, size: size, variant: "inline", selectedValues: (Array.isArray(value) ? value : []), onChange: v => {
-                        const current = new Set((Array.isArray(value) ? value : []));
-                        if (current.has(v))
-                            current.delete(v);
-                        else
-                            current.add(v);
-                        emit({ value: Array.from(current) });
-                    }, onClear: () => emit({ value: [] }), children: placeholder })) })] }));
+                    } })) : single ? (_jsx(Select, { options: options, selectedValue: (_b = value) !== null && _b !== void 0 ? _b : null, onChange: v => emit({ value: v }), placeholder: placeholder, size: size, variant: "inline", onClear: () => emit({ value: '' }), disabled: disabled })) : (_jsx(MultiSelect, { options: options, size: size, variant: "inline", selectedValues: (Array.isArray(value) ? value : []), onChange: nextSelectedValues => emit({ value: nextSelectedValues }), onClear: () => emit({ value: [] }), fullWidth: true, disabled: disabled, children: placeholder })) })] }));
 }

package/dist/components/filter-field/FilterField.module.css

@@ -296,10 +296,6 @@
   min-width: 0;
 }
 
-.filterField.active .valueWrapper {
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-border-selected) 18%, transparent);
-}
-
 /* =========================
    TEXT
    ========================= */

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

@@ -18,7 +18,7 @@ interface ChipMultiToggleProps {
     allLabel?: string;
     allIcon?: React.ReactNode;
     dataCy?: string;
-    type?: 'default' | 'outlined' | 'subtle' | 'rounded';
+    type?: 'default' | 'outlined' | 'rounded';
     /**
      * If true, clicking "All" toggles between:
      * - All (no filtering) => []

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

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

package/dist/components/filtering/chip-multi-toggle/ChipMultiToggle.module.css

@@ -36,7 +36,6 @@
 }
 
 .chipButton:disabled {
-  cursor: not-allowed;
   opacity: 1;
   color: var(--color-disabled-fg);
 }

package/dist/components/forms/multi-select/MultiSelect.d.ts

@@ -8,13 +8,15 @@ export interface MultiselectOption<T> {
 interface MultiSelectProps<T> {
     options: MultiselectOption<T>[];
     selectedValues: T[];
-    onChange: (selectedValue: T) => void;
+    onChange: (nextSelectedValues: T[]) => void;
     placeholder?: string;
     children?: ReactNode;
     variant?: ButtonVariant;
     size?: 'sm' | 'md' | 'lg';
     onClear?: () => void;
     dataCy?: string;
+    fullWidth?: boolean;
+    disabled?: boolean;
 }
-export declare function MultiSelect<T extends string | number>({ options, selectedValues, onChange, children, variant, size, onClear, dataCy, }: MultiSelectProps<T>): ReactNode;
+export declare function MultiSelect<T extends string | number>({ options, selectedValues, onChange, placeholder, children, variant, size, onClear, dataCy, fullWidth, disabled, }: MultiSelectProps<T>): ReactNode;
 export {};

package/dist/components/forms/multi-select/MultiSelect.js

@@ -1,19 +1,157 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, Square } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { Button } from '../../../components/button/Button';
 import { Chip } from '../../../components/chip/Chip';
 import { ClearButton } from '../../../components/clear-button/ClearButton';
 import { Menu } from '../../../components/menu/Menu';
 import { Popover } from '../../../components/popover/Popover';
-export function MultiSelect({ options, selectedValues = [], onChange, children, variant = 'outlined', size = 'md', onClear, dataCy, }) {
-    return (_jsx(Popover, { dataCy: dataCy, trigger: (onClick, icon) => (_jsxs(Button, { variant: variant, onClick: onClick, size: size, children: [_jsxs("span", { children: [children || 'Vælg', ' ', selectedValues.length > 0 ? (_jsx(Chip, { size: "sm", severity: "info", children: `${selectedValues.length}` })) : null] }), onClear && selectedValues.length > 0 && _jsx(ClearButton, { onClick: onClear }), icon] })), children: _jsx(Menu, { children: options.map(option => (_jsx(Menu.Item, { active: selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(option.value), children: _jsxs("button", { onClick: () => {
-                        onChange(option.value);
+export function MultiSelect({ options, selectedValues = [], onChange, placeholder = 'Vælg', children, variant = 'outlined', size = 'md', onClear, dataCy, fullWidth = false, disabled = false, }) {
+    const selectedSet = useMemo(() => new Set(selectedValues), [selectedValues]);
+    const popoverRef = useRef(null);
+    const optionRefs = useRef([]);
+    const typeaheadRef = useRef('');
+    const typeaheadTimeoutRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(() => {
+        const selectedIndex = options.findIndex(option => selectedSet.has(option.value));
+        return selectedIndex >= 0 ? selectedIndex : 0;
+    });
+    useEffect(() => {
+        var _a;
+        if (!open)
+            return;
+        (_a = optionRefs.current[activeIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [activeIndex, open]);
+    useEffect(() => {
+        return () => {
+            if (typeaheadTimeoutRef.current)
+                clearTimeout(typeaheadTimeoutRef.current);
+        };
+    }, []);
+    const resetActiveIndex = () => {
+        const selectedIndex = options.findIndex(option => selectedSet.has(option.value));
+        setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
+    };
+    const toggleValue = (value) => {
+        if (disabled)
+            return;
+        const next = new Set(selectedSet);
+        if (next.has(value))
+            next.delete(value);
+        else
+            next.add(value);
+        onChange(Array.from(next));
+    };
+    const clearTypeahead = () => {
+        typeaheadRef.current = '';
+        if (typeaheadTimeoutRef.current) {
+            clearTimeout(typeaheadTimeoutRef.current);
+            typeaheadTimeoutRef.current = null;
+        }
+    };
+    const findTypeaheadMatch = (query, startIndex) => {
+        var _a, _b;
+        if (!query || options.length === 0)
+            return -1;
+        const normalizedQuery = query.trim().toLocaleLowerCase();
+        if (!normalizedQuery)
+            return -1;
+        for (let step = 1; step <= options.length; step += 1) {
+            const index = (startIndex + step + options.length) % options.length;
+            const label = (_b = (_a = options[index]) === null || _a === void 0 ? void 0 : _a.label) === null || _b === void 0 ? void 0 : _b.trim().toLocaleLowerCase();
+            if (label === null || label === void 0 ? void 0 : label.startsWith(normalizedQuery))
+                return index;
+        }
+        return -1;
+    };
+    const handleTypeahead = (key) => {
+        const nextBuffer = `${typeaheadRef.current}${key.toLocaleLowerCase()}`;
+        const repeatedChar = new Set(nextBuffer).size === 1;
+        let nextIndex = findTypeaheadMatch(nextBuffer, activeIndex);
+        let appliedBuffer = nextBuffer;
+        if (nextIndex < 0 && repeatedChar) {
+            appliedBuffer = key.toLocaleLowerCase();
+            nextIndex = findTypeaheadMatch(appliedBuffer, activeIndex);
+        }
+        if (typeaheadTimeoutRef.current)
+            clearTimeout(typeaheadTimeoutRef.current);
+        typeaheadRef.current = appliedBuffer;
+        typeaheadTimeoutRef.current = setTimeout(() => {
+            typeaheadRef.current = '';
+            typeaheadTimeoutRef.current = null;
+        }, 500);
+        if (nextIndex < 0)
+            return;
+        setActiveIndex(nextIndex);
+        if (!open)
+            setOpen(true);
+    };
+    const handleKeyDown = (e) => {
+        var _a;
+        if (e.key.length === 1 && !e.altKey && !e.ctrlKey && !e.metaKey && !/\s/.test(e.key)) {
+            e.preventDefault();
+            handleTypeahead(e.key);
+            return;
+        }
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                if (!open) {
+                    setOpen(true);
+                    return;
+                }
+                setActiveIndex(i => Math.min(i + 1, options.length - 1));
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                if (!open) {
+                    setOpen(true);
+                    return;
+                }
+                setActiveIndex(i => Math.max(i - 1, 0));
+                break;
+            case 'Home':
+                if (!open)
+                    return;
+                e.preventDefault();
+                setActiveIndex(0);
+                break;
+            case 'End':
+                if (!open)
+                    return;
+                e.preventDefault();
+                setActiveIndex(options.length - 1);
+                break;
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                clearTypeahead();
+                if (!open) {
+                    setOpen(true);
+                    return;
+                }
+                if (options[activeIndex])
+                    toggleValue(options[activeIndex].value);
+                break;
+            case 'Escape':
+                if (!open)
+                    return;
+                e.preventDefault();
+                (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.close();
+                break;
+        }
+    };
+    return (_jsx(Popover, { ref: popoverRef, open: open, onOpenChange: next => {
+            setOpen(next);
+            if (next)
+                resetActiveIndex();
+        }, dataCy: dataCy, fullWidth: fullWidth, autoFocusContent: false, returnFocus: true, trigger: (onClick, icon, isOpen) => (_jsx(Button, { variant: variant, onClick: onClick, onKeyDown: handleKeyDown, size: size, fullWidth: fullWidth, disabled: disabled, "aria-haspopup": "menu", "aria-expanded": !!isOpen, children: _jsxs("span", { className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs", style: { width: '100%' }, children: [_jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [_jsx("span", { children: children !== null && children !== void 0 ? children : placeholder }), selectedValues.length > 0 ? (_jsx(Chip, { size: "sm", children: `${selectedValues.length}` })) : null] }), _jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [onClear && selectedValues.length > 0 && _jsx(ClearButton, { onClick: onClear }), icon] })] }) })), children: _jsx(Menu, { onKeyDown: handleKeyDown, children: options.map((option, index) => (_jsx(Menu.Item, { active: index === activeIndex, children: _jsxs("button", { ref: el => (optionRefs.current[index] = el), type: "button", role: "menuitemcheckbox", "aria-checked": selectedSet.has(option.value), tabIndex: index === activeIndex ? 0 : -1, disabled: disabled, onFocus: () => setActiveIndex(index), onClick: () => {
+                        toggleValue(option.value);
                     }, children: [_jsx("span", { style: {
                                 pointerEvents: 'none',
                                 display: 'flex',
                                 alignItems: 'center',
-                                color: !(selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(option.value))
-                                    ? 'var(--color-border-strong)'
-                                    : 'inherit',
-                            }, children: (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(option.value)) ? _jsx(Check, {}) : _jsx(Square, {}) }), option.label] }) }, option.value))) }) }));
+                                color: !selectedSet.has(option.value) ? 'var(--color-border-strong)' : 'inherit',
+                            }, children: selectedSet.has(option.value) ? _jsx(Check, {}) : _jsx(Square, {}) }), option.label] }) }, option.value))) }) }));
 }

package/dist/components/forms/select/Select.js

@@ -15,9 +15,17 @@ export function Select({ label, error, helpText, orientation = 'vertical', label
     const listboxId = `${controlId}-listbox`;
     const popoverRef = useRef(null);
     const optionRefs = useRef([]);
+    const typeaheadRef = useRef('');
+    const typeaheadTimeoutRef = useRef(null);
     const selectedIndex = useMemo(() => options.findIndex(o => o.value === selectedValue), [options, selectedValue]);
     const [activeIndex, setActiveIndex] = useState(selectedIndex >= 0 ? selectedIndex : 0);
     const [open, setOpen] = useState(false);
+    useEffect(() => {
+        return () => {
+            if (typeaheadTimeoutRef.current)
+                clearTimeout(typeaheadTimeoutRef.current);
+        };
+    }, []);
     // Only move focus when open
     useEffect(() => {
         var _a;
@@ -27,8 +35,51 @@ export function Select({ label, error, helpText, orientation = 'vertical', label
     }, [activeIndex, open]);
     // keep activeIndex aligned when opening
     const resetActiveToSelected = () => setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
+    const findTypeaheadMatch = (query, startIndex) => {
+        var _a, _b;
+        if (!query || options.length === 0)
+            return -1;
+        const normalizedQuery = query.trim().toLocaleLowerCase();
+        if (!normalizedQuery)
+            return -1;
+        for (let step = 1; step <= options.length; step += 1) {
+            const index = (startIndex + step + options.length) % options.length;
+            const label = (_b = (_a = options[index]) === null || _a === void 0 ? void 0 : _a.label) === null || _b === void 0 ? void 0 : _b.trim().toLocaleLowerCase();
+            if (label === null || label === void 0 ? void 0 : label.startsWith(normalizedQuery))
+                return index;
+        }
+        return -1;
+    };
+    const handleTypeahead = (key) => {
+        const startIndex = open ? activeIndex : selectedIndex;
+        const nextBuffer = `${typeaheadRef.current}${key.toLocaleLowerCase()}`;
+        const repeatedChar = new Set(nextBuffer).size === 1;
+        let nextIndex = findTypeaheadMatch(nextBuffer, startIndex);
+        let appliedBuffer = nextBuffer;
+        if (nextIndex < 0 && repeatedChar) {
+            appliedBuffer = key.toLocaleLowerCase();
+            nextIndex = findTypeaheadMatch(appliedBuffer, startIndex);
+        }
+        if (typeaheadTimeoutRef.current)
+            clearTimeout(typeaheadTimeoutRef.current);
+        typeaheadRef.current = appliedBuffer;
+        typeaheadTimeoutRef.current = setTimeout(() => {
+            typeaheadRef.current = '';
+            typeaheadTimeoutRef.current = null;
+        }, 500);
+        if (nextIndex < 0)
+            return;
+        setActiveIndex(nextIndex);
+        if (!open)
+            setOpen(true);
+    };
     const handleKeyDown = (e) => {
         var _a, _b;
+        if (e.key.length === 1 && !e.altKey && !e.ctrlKey && !e.metaKey && !/\s/.test(e.key)) {
+            e.preventDefault();
+            handleTypeahead(e.key);
+            return;
+        }
         switch (e.key) {
             case 'ArrowDown': {
                 e.preventDefault();
@@ -52,6 +103,11 @@ export function Select({ label, error, helpText, orientation = 'vertical', label
             case ' ': {
                 // Space on a button should open/select depending on state
                 e.preventDefault();
+                typeaheadRef.current = '';
+                if (typeaheadTimeoutRef.current) {
+                    clearTimeout(typeaheadTimeoutRef.current);
+                    typeaheadTimeoutRef.current = null;
+                }
                 if (!open) {
                     setOpen(true);
                     return;
@@ -112,14 +168,12 @@ export function Select({ label, error, helpText, orientation = 'vertical', label
                 returnFocus: true, trigger: (toggle, icon, isOpen) => (_jsx(Button, { disabled: disabled, ...(tooltipEnabled ? triggerProps : {}), id: controlId, "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : 'select-button', onKeyDown: handleKeyDown, fullWidth: fullWidth, variant: variant, onClick: e => {
                         resetActiveToSelected();
                         toggle(e);
-                    }, size: size, type: "button", "data-forminput": true, "aria-haspopup": "listbox", "aria-expanded": !!isOpen, "aria-controls": listboxId, "aria-invalid": Boolean(error) || undefined, "aria-describedby": describedBy, children: _jsxs("span", { className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs", style: { width: '100%' }, children: [_jsx("span", { children: selected ? selected.label : _jsx("span", { className: "dbc-muted-text", children: placeholder }) }), onClear && selected && _jsx(ClearButton, { onClick: onClear }), icon] }) })), children: _jsx(Menu, { onKeyDown: handleKeyDown, role: "listbox", children: options.map((opt, index) => {
+                    }, size: size, type: "button", "data-forminput": true, "aria-haspopup": "listbox", "aria-expanded": !!isOpen, "aria-controls": listboxId, "aria-invalid": Boolean(error) || undefined, "aria-describedby": describedBy, children: _jsxs("span", { className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs", style: { width: '100%' }, children: [_jsx("span", { children: selected ? selected.label : _jsx("span", { className: "dbc-muted-text", children: placeholder }) }), _jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [onClear && selected && _jsx(ClearButton, { onClick: onClear }), icon] })] }) })), children: _jsx(Menu, { onKeyDown: handleKeyDown, role: "listbox", children: options.map((opt, index) => {
                         const isSelected = typeof opt.value === 'object' && typeof selectedValue === 'object' && datakey
                             ? (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue[datakey]) === opt.value[datakey]
                             : opt.value === selectedValue;
                         const isActive = index === activeIndex;
-                        return (_jsx(Menu.Item, { active: isActive, 
-                            // IMPORTANT: listbox uses role="option"
-                            itemRole: "option", "aria-selected": isSelected, children: _jsxs("button", { ref: el => (optionRefs.current[index] = el), type: "button", tabIndex: isActive ? 0 : -1, onClick: () => {
+                        return (_jsx(Menu.Item, { active: isActive, itemRole: "option", "aria-selected": isSelected, children: _jsxs("button", { ref: el => (optionRefs.current[index] = el), type: "button", tabIndex: isActive ? 0 : -1, onClick: () => {
                                     var _a;
                                     onChange(opt.value);
                                     (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.close();

package/dist/components/popover/Popover.d.ts

@@ -19,6 +19,7 @@ export interface PopoverProps {
     viewportPadding?: number;
     edgeBuffer?: number;
     dataCy?: string;
+    fullWidth?: boolean;
     autoFocusContent?: boolean;
     returnFocus?: boolean;
 }

package/dist/components/popover/Popover.js

@@ -37,7 +37,7 @@ function parseMinWidthPx(minWidth, elForEm) {
     }
     return 0;
 }
-export const Popover = forwardRef(function Popover({ trigger: Trigger, children, open, defaultOpen = false, onOpenChange, contentId, minWidth = '200px', matchTriggerWidth = true, viewportPadding = 8, edgeBuffer = 100, dataCy, autoFocusContent = false, returnFocus = true, }, ref) {
+export const Popover = forwardRef(function Popover({ trigger: Trigger, children, open, defaultOpen = false, onOpenChange, contentId, minWidth = '200px', matchTriggerWidth = true, viewportPadding = 8, edgeBuffer = 100, dataCy, fullWidth = false, autoFocusContent = false, returnFocus = true, }, ref) {
     const internalId = useId();
     const resolvedContentId = contentId !== null && contentId !== void 0 ? contentId : `popover-${internalId}`;
     const isControlled = open !== undefined;
@@ -201,7 +201,7 @@ export const Popover = forwardRef(function Popover({ trigger: Trigger, children,
         (_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 });
-    return (_jsxs("div", { className: styles.container, ref: containerRef, children: [Trigger(togglePopover, icon, isOpen), mounted &&
+    return (_jsxs("div", { className: [styles.container, fullWidth ? styles.fullWidth : ''].filter(Boolean).join(' '), ref: containerRef, children: [Trigger(togglePopover, icon, isOpen), mounted &&
                 isOpen &&
                 createPortal(_jsx("div", { id: resolvedContentId, ref: contentRef, className: styles.content, style: {
                         top: pos.top,

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

@@ -6,6 +6,11 @@
   min-width: 0;
 }
 
+.fullWidth {
+  display: flex;
+  width: 100%;
+}
+
 .content {
   position: fixed;
   border: 1px solid var(--color-border-default);

package/dist/components/split-button/SplitButton.js

@@ -4,7 +4,7 @@ import { Button } from '../button/Button';
 import { Menu } from '../menu/Menu';
 import { Popover } from '../popover/Popover';
 export function SplitButton({ children, options, onClick, icon, ...rest }) {
-    return (_jsxs("div", { className: styles.container, style: { display: 'inline-flex', alignItems: 'center' }, children: [_jsxs(Button, { ...rest, onClick: onClick, children: [icon, children] }), _jsx(Popover, { trigger: (handleClick, icon) => (_jsx("span", { className: styles.triggerContainer, children: _jsx(Button, { ...rest, onClick: handleClick, children: icon }) })), children: close => (_jsx(Menu, { children: options.map(option => (_jsx(Menu.Item, { active: option.active, children: _jsxs("button", { onClick: e => {
+    return (_jsxs("div", { className: styles.container, style: { display: 'inline-flex', alignItems: 'center' }, children: [_jsxs(Button, { ...rest, onClick: onClick, children: [icon, children] }), _jsx(Popover, { trigger: (handleClick, icon) => (_jsx("span", { className: styles.triggerContainer, children: _jsx(Button, { ...rest, onClick: handleClick, children: icon }) })), children: close => (_jsx(Menu, { children: options.map(option => (_jsx(Menu.Item, { active: option.active, children: _jsxs("button", { onClick: () => {
                                 option.onClick(close);
                             }, children: [option.icon, option.label] }) }, option.label))) })) })] }));
 }

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, { type: "subtle", severity: null, size: "sm", children: tab.badge.toLocaleString('da-DK') }) })) : null] }) }, tab.id));
+                            return (_jsx("div", { className: `${styles.tab} ${selected ? styles.active : ''}`, children: _jsxs("button", { id: tabDomId, type: "button", className: styles.tabButton, role: "tab", "aria-selected": selected, "aria-controls": panelDomId, tabIndex: selected ? 0 : -1, disabled: tab.disabled, onClick: () => setValue(tab.id), onKeyDown: e => onKeyDownTab(e, index), children: [tab.headerIcon ? _jsx("span", { className: styles.icon, children: tab.headerIcon }) : null, _jsx("span", { className: styles.label, children: tab.header }), tab.badge !== undefined && tab.badge > 0 ? (_jsx("span", { className: styles.badge, children: _jsx(Chip, { 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/styles/themes/dbc/base.css

@@ -34,6 +34,7 @@
   --container-xl: 1280px;
 
   /* ===== Sizing ===== */
+  --icon-size-xs: 12px;
   --icon-size-sm: 16px;
   --icon-size-md: 20px;
   --icon-size-lg: 24px;

package/dist/utils/date/formatDate.d.ts

@@ -5,7 +5,7 @@
  * Examples:
  * - formatDate(new Date(), { userFriendlyLabel: true }) => "I dag"
  * - formatDate(new Date(), { userFriendlyLabel: true, showTime: true }) => "I dag, kl. 14:30"
- * - formatDate(date, { showTime: true }) => "10/03/2026 14:30"
+ * - formatDate(date, { showTime: true }) => "10.03.2026 14:30"
  *
  * @param date - The Date or date-parsable value to format
  * @param options.showTime - If true, append time "hh:mm" or "hh:mm:ss"

package/dist/utils/date/formatDate.js

@@ -5,7 +5,7 @@
  * Examples:
  * - formatDate(new Date(), { userFriendlyLabel: true }) => "I dag"
  * - formatDate(new Date(), { userFriendlyLabel: true, showTime: true }) => "I dag, kl. 14:30"
- * - formatDate(date, { showTime: true }) => "10/03/2026 14:30"
+ * - formatDate(date, { showTime: true }) => "10.03.2026 14:30"
  *
  * @param date - The Date or date-parsable value to format
  * @param options.showTime - If true, append time "hh:mm" or "hh:mm:ss"
@@ -44,7 +44,7 @@ export function formatDate(date, options = {}) {
     const day = pad(d.getDate());
     const month = pad(d.getMonth() + 1);
     const year = d.getFullYear();
-    const base = `${day}/${month}/${year}`;
+    const base = `${day}.${month}.${year}`;
     if (!showTime)
         return base;
     return `${base} ${formatTime()}`;

package/package.json

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