@dbcdk/react-components 0.0.62 → 0.0.63

package/dist/components/app-header/AppHeader.d.ts

@@ -1,6 +1,8 @@
 import type { ReactNode, JSX } from 'react';
+export type AppHeaderSize = 'md' | 'lg';
 interface AppHeaderProps {
     children: ReactNode;
+    size?: AppHeaderSize;
 }
-export declare function AppHeader({ children }: AppHeaderProps): JSX.Element;
+export declare function AppHeader({ children, size }: AppHeaderProps): JSX.Element;
 export {};

package/dist/components/app-header/AppHeader.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import styles from './AppHeader.module.css';
-export function AppHeader({ children }) {
-    return (_jsx("header", { children: _jsx("div", { className: styles.container, children: children }) }));
+export function AppHeader({ children, size = 'md' }) {
+    return (_jsx("header", { className: styles.header, children: _jsx("div", { className: styles.container, "data-size": size, children: children }) }));
 }

package/dist/components/app-header/AppHeader.module.css

@@ -1,3 +1,8 @@
+.header {
+  inline-size: 100%;
+  background-color: var(--color-bg-surface);
+}
+
 .container {
   /* layout */
   display: flex;
@@ -11,13 +16,14 @@
   box-sizing: border-box;
 
   /* chrome */
-  background-color: var(--color-bg-surface);
   color: var(--color-fg-default);
-  border-block-end: var(--border-width-thin) solid var(--color-border-default);
 
   /* density-aware vertical rhythm */
   padding-block: calc(var(--control-padding-y) + var(--density));
-  padding-inline: var(--spacing-md);
+}
+
+.container[data-size='lg'] {
+  min-block-size: 80px;
 }
 
 /* Optional content wrapper */

package/dist/components/button/Button.js

@@ -20,9 +20,14 @@ function mergeRefs(...refs) {
     };
 }
 export const Button = React.forwardRef(function Button({ variant = 'outlined', shape = 'default', size = 'md', fullWidth, icon, children, loading, active, spinIcon, tooltip, tooltipPlacement = 'top', isLink, type = 'button', ...rest }, ref) {
+    var _a;
     const { className: userClassName, ...buttonProps } = rest;
     const computedClassName = cx(styles.button, styles[variant], styles[size], fullWidth ? styles.fullWidth : '', active ? styles.active : '', loading ? styles.loading : '', shape !== 'default' ? styles[shape] : '', userClassName);
     const tooltipEnabled = Boolean(tooltip);
+    const childRef = isLink && React.isValidElement(children)
+        ? ((_a = children.ref) !== null && _a !== void 0 ? _a : null)
+        : null;
+    const mergedRef = React.useMemo(() => mergeRefs(childRef, ref), [childRef, ref]);
     // Tooltip anchored to the actual clickable element (button or link element)
     const { triggerProps, id: tooltipId } = useTooltipTrigger({
         content: tooltipEnabled ? tooltip : null,
@@ -42,13 +47,22 @@ export const Button = React.forwardRef(function Button({ variant = 'outlined', s
     if (isLink && React.isValidElement(children)) {
         // If this is a link-style button, we need to attach tooltip handlers + ref to the child.
         const childClassName = typeof children.props.className === 'string' ? children.props.className : '';
-        const childRef = children.ref;
+        const { disabled, onClick, ...linkButtonProps } = buttonProps;
+        const handleClick = e => {
+            if (disabled) {
+                e.preventDefault();
+                return;
+            }
+            onClick === null || onClick === void 0 ? void 0 : onClick(e);
+        };
         buttonEl = React.cloneElement(children, {
-            ...buttonProps,
-            ref: mergeRefs(childRef, ref),
+            ...linkButtonProps,
+            ref: mergedRef,
             className: cx(childClassName, computedClassName, styles.buttonLink),
             ...(tooltipEnabled ? triggerProps : {}),
             'aria-describedby': describedBy,
+            'aria-disabled': disabled ? 'true' : undefined,
+            onClick: handleClick,
             children: (_jsxs(_Fragment, { children: [icon && _jsx("span", { className: cx(styles.icon, spinIcon ? 'spin' : ''), children: icon }), children.props.children, loading && (_jsx("span", { style: { display: 'flex', opacity: 0.5 }, className: "spin", children: _jsx(LoaderCircle, {}) }))] })),
         });
     }

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

@@ -37,11 +37,7 @@
   background: color-mix(in srgb, var(--color-bg-selected) 45%, var(--color-bg-surface));
   border-color: var(--color-border-selected);
   box-shadow: var(--shadow-sm);
-  --filter-operator-bg: color-mix(
-    in srgb,
-    var(--color-bg-selected) 45%,
-    var(--color-bg-surface)
-  );
+  --filter-operator-bg: color-mix(in srgb, var(--color-bg-selected) 45%, var(--color-bg-surface));
 }
 
 .filterField.outlined {
@@ -59,11 +55,7 @@
   background: color-mix(in srgb, var(--color-bg-selected) 38%, var(--color-bg-surface));
   border-color: var(--color-border-selected);
   box-shadow: none;
-  --filter-operator-bg: color-mix(
-    in srgb,
-    var(--color-bg-selected) 38%,
-    var(--color-bg-surface)
-  );
+  --filter-operator-bg: color-mix(in srgb, var(--color-bg-selected) 38%, var(--color-bg-surface));
 }
 
 .filterField.subtle {
@@ -83,11 +75,7 @@
 }
 
 .filterField.subtle.active {
-  background: color-mix(
-    in srgb,
-    var(--color-bg-selected) 55%,
-    var(--color-bg-surface-strong)
-  );
+  background: color-mix(in srgb, var(--color-bg-selected) 55%, var(--color-bg-surface-strong));
   border-color: var(--color-border-selected);
   box-shadow: inset 0 0 0 1px transparent;
   --filter-operator-bg: color-mix(

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

@@ -168,6 +168,10 @@
   box-shadow: var(--shadow-xs), var(--shadow-md);
 }
 
+.standalone .input {
+  padding-inline: var(--spacing-md);
+}
+
 .standalone:hover:not([aria-disabled='true']) {
   border-color: var(--color-border-strong);
   box-shadow: var(--shadow-sm), var(--shadow-md);
@@ -393,6 +397,20 @@
   z-index: 2;
 }
 
+/* Standalone variant: pill-shaped trailing button to match the field */
+.withButton:has(.standalone) .trailingButton {
+  border-top-right-radius: var(--border-radius-rounded);
+  border-bottom-right-radius: var(--border-radius-rounded);
+  border-left-color: var(--color-border-default);
+  background-color: var(--color-bg-surface);
+  box-shadow: var(--shadow-xs), var(--shadow-md);
+}
+
+.withButton:has(.standalone) .trailingButton:hover {
+  border-color: var(--color-border-strong);
+  box-shadow: var(--shadow-sm), var(--shadow-md);
+}
+
 /* Date/time picker indicator (WebKit) */
 .input[type='datetime-local']::-webkit-calendar-picker-indicator {
   filter: invert(0.7);

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

@@ -294,10 +294,9 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
             (_c = focusables[nextIndex]) === null || _c === void 0 ? void 0 : _c.focus();
             return;
         }
-        if (activeIndexInScope !== -1 && activeElement === boundaryElement) {
-            setOpen(false);
-            setActiveIndex(-1);
-        }
+        // single mode: Tab always closes the dropdown and lets focus move naturally
+        setOpen(false);
+        setActiveIndex(-1);
     }, [open, getFocusableElements, mode]);
     const commitSelection = (option) => {
         var _a, _b;

package/dist/components/hyperlink/Hyperlink.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import styles from './Hyperlink.module.css';

package/dist/components/menu/Menu.d.ts

@@ -7,6 +7,8 @@ export interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
      * - for Select/listbox usage, pass itemRole="option" and role="listbox" on Menu.
      */
     itemRole?: 'menuitem' | 'option';
+    /** Adds a gap of --spacing-xs between items */
+    gap?: boolean;
 }
 export type MenuSeparatorProps = React.LiHTMLAttributes<HTMLLIElement>;
 export interface MenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
@@ -19,6 +21,8 @@ export interface MenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
      * If not set, Menu's `itemRole` is used.
      */
     itemRole?: 'menuitem' | 'option';
+    /** Adds a rounded border around the item */
+    variant?: 'default' | 'bordered';
 }
 export interface MenuCheckItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'onChange'> {
     label: React.ReactNode;

package/dist/components/menu/Menu.js

@@ -4,13 +4,54 @@ import * as React from 'react';
 import styles from './Menu.module.css';
 import { Checkbox } from '../forms/checkbox/Checkbox';
 import { RadioButton } from '../forms/radio-buttons/RadioButton';
-const MenuBase = React.forwardRef(({ children, className, itemRole = 'menuitem', ...props }, ref) => (_jsx("ul", { ref: ref, role: "menu", "data-itemrole": itemRole, className: [styles.container, className].filter(Boolean).join(' '), ...props, children: children })));
+const INTERACTIVE_SELECTOR = 'a:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"]):not([aria-disabled="true"]), [role="menuitem"]:not([aria-disabled="true"]), [role="option"]:not([aria-disabled="true"])';
+function getMenuItems(el) {
+    return Array.from(el.querySelectorAll(INTERACTIVE_SELECTOR));
+}
+const MenuBase = React.forwardRef(({ children, className, itemRole = 'menuitem', gap, onKeyDown, ...props }, ref) => {
+    const internalRef = React.useRef(null);
+    const handleKeyDown = (e) => {
+        const ul = internalRef.current;
+        if (!ul)
+            return;
+        const items = getMenuItems(ul);
+        if (items.length === 0)
+            return;
+        const focused = document.activeElement;
+        const currentIndex = items.indexOf(focused);
+        let nextIndex = null;
+        if (e.key === 'ArrowDown') {
+            nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+        }
+        else if (e.key === 'ArrowUp') {
+            nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+        }
+        else if (e.key === 'Home') {
+            nextIndex = 0;
+        }
+        else if (e.key === 'End') {
+            nextIndex = items.length - 1;
+        }
+        if (nextIndex !== null) {
+            e.preventDefault();
+            items[nextIndex].focus();
+        }
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+    };
+    return (_jsx("ul", { ref: node => {
+            internalRef.current = node;
+            if (typeof ref === 'function')
+                ref(node);
+            else if (ref)
+                ref.current = node;
+        }, role: "menu", "data-itemrole": itemRole, className: [styles.container, gap ? styles.gap : '', className].filter(Boolean).join(' '), onKeyDown: handleKeyDown, ...props, children: children }));
+});
 MenuBase.displayName = 'Menu';
 const isInteractiveEl = (el) => React.isValidElement(el) &&
     (typeof el.type === 'string' ? el.type === 'a' || el.type === 'button' : true);
 function applyMenuItemPropsToElement(child, opts) {
     var _a, _b, _c, _d;
-    const { active, selected, disabled, role, tabIndex = -1, className } = opts;
+    const { active, selected, disabled, role, tabIndex = 0, className } = opts;
     const childClass = [styles.item, active ? styles.active : '', selected ? styles.selected : '']
         .filter(Boolean)
         .join(' ');
@@ -44,16 +85,20 @@ function applyMenuItemPropsToElement(child, opts) {
         disabled,
     });
 }
-const MenuItem = React.forwardRef(({ children, active, selected, disabled, className, itemRole, ...liProps }, ref) => {
+const MenuItem = React.forwardRef(({ children, active, selected, disabled, className, itemRole, variant, ...liProps }, ref) => {
     // If caller sets itemRole prop, use it; otherwise attempt to inherit from parent Menu via data attr.
     // (We can’t reliably read parent props here without context; simplest is: caller passes itemRole on Menu.Item when needed.)
     const resolvedRole = itemRole !== null && itemRole !== void 0 ? itemRole : 'menuitem';
+    const isBordered = variant === 'bordered';
+    const rowClass = [styles.row, isBordered ? styles.rowBordered : '', className]
+        .filter(Boolean)
+        .join(' ');
     if (isInteractiveEl(children)) {
         const child = children;
-        return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: applyMenuItemPropsToElement(child, { active, selected, disabled, role: resolvedRole }) }));
+        return (_jsx("li", { ref: ref, role: "none", className: rowClass, ...liProps, children: applyMenuItemPropsToElement(child, { active, selected, disabled, role: resolvedRole }) }));
     }
     // Fallback: wrap non-interactive children in a <button>
-    return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: _jsx("button", { role: resolvedRole, tabIndex: -1, "aria-selected": selected || undefined, "aria-disabled": disabled || undefined, className: [
+    return (_jsx("li", { ref: ref, role: "none", className: rowClass, ...liProps, children: _jsx("button", { role: resolvedRole, tabIndex: 0, "aria-selected": selected || undefined, "aria-disabled": disabled || undefined, className: [
                 styles.interactive,
                 styles.item,
                 active ? styles.active : '',

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

@@ -173,3 +173,21 @@
   opacity: 0.8;
   border-radius: 999px;
 }
+
+/* Gap between items */
+.gap {
+  gap: var(--spacing-xs);
+}
+
+/* Bordered item variant */
+.rowBordered {
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--border-radius-default);
+  overflow: hidden;
+}
+
+/* Inside a bordered row, remove inner border-radius so hover bg fills the full area */
+.rowBordered .interactive,
+.rowBordered .interactiveChild {
+  border-radius: 0;
+}

package/dist/components/nav-bar/NavBar.d.ts

@@ -1,4 +1,5 @@
 import type { ElementType, ReactNode, JSX } from 'react';
+import { type AppHeaderSize } from '../app-header/AppHeader';
 export type NavBarItem = NavBarLinkItem | NavBarExpandableItem | NavBarGroupItem;
 type NavBarBase = {
     label: string;
@@ -33,6 +34,8 @@ interface NavBarProps {
     items: NavBarLinkItem[];
     productName?: string;
     addition?: ReactNode;
+    activeLink?: string;
+    size?: AppHeaderSize;
 }
-export declare function NavBar({ logo, items, productName, addition }: NavBarProps): JSX.Element;
+export declare function NavBar({ logo, items, productName, addition, activeLink, size, }: NavBarProps): JSX.Element;
 export {};

package/dist/components/nav-bar/NavBar.js

@@ -1,19 +1,29 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Menu as MenuIcon, X } from 'lucide-react';
+import { useRef, useState } from 'react';
 import styles from './NavBar.module.css';
 import { Logo } from '../../assets/logo';
+import { useDeviceSize } from '../../hooks/useDeviceSize';
 import { AppHeader } from '../app-header/AppHeader';
 import { Headline } from '../headline/Headline';
-export function NavBar({ logo, items, productName, addition }) {
-    return (_jsx(AppHeader, { children: _jsxs("nav", { className: styles.container, "aria-label": productName ? `${productName} navigation` : 'Main navigation', children: [logo, productName && (_jsxs("span", { className: styles.productName, style: { display: 'flex', alignItems: 'center', gap: 16 }, children: [_jsx(Logo, {}), _jsx(Headline, { disableMargin: true, size: 1, children: productName })] })), _jsx("ul", { className: styles.navItems, role: "list", children: items === null || items === void 0 ? void 0 : items.filter(i => i.enabled !== false).map((item, id) => {
-                        const { component: Component, label, icon, href, active, external } = item;
-                        const linkClass = [styles.link, active ? styles.active : ''].filter(Boolean).join(' ');
-                        const commonProps = {
-                            className: linkClass,
-                            href,
-                            ...(active ? { 'aria-current': 'page' } : {}),
-                            ...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {}),
-                        };
-                        return (_jsx("li", { className: styles.navItem, role: "listitem", children: Component ? (_jsxs(Component, { ...commonProps, children: [icon, _jsx("span", { className: styles.label, children: label })] })) : (_jsxs("a", { ...commonProps, children: [icon, _jsx("span", { className: styles.label, children: label })] })) }, id));
-                    }) }), addition] }) }));
+import { Popover } from '../popover/Popover';
+export function NavBar({ logo, items, productName, addition, activeLink, size, }) {
+    const [mobileOpen, setMobileOpen] = useState(false);
+    const deviceSize = useDeviceSize();
+    const isMobile = deviceSize === 'mobile';
+    const navRef = useRef(null);
+    const navLinks = items === null || items === void 0 ? void 0 : items.filter(i => i.enabled !== false).map((item, id) => {
+        const { component: Component, label, icon, href, active, external } = item;
+        const isActive = activeLink ? href === activeLink : Boolean(active);
+        const linkClass = [styles.link, isActive ? styles.active : ''].filter(Boolean).join(' ');
+        const commonProps = {
+            className: linkClass,
+            href,
+            ...(isActive ? { 'aria-current': 'page' } : {}),
+            ...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {}),
+        };
+        return (_jsx("li", { className: styles.navItem, role: "listitem", children: Component ? (_jsxs(Component, { ...commonProps, children: [icon, _jsx("span", { className: styles.label, children: label })] })) : (_jsxs("a", { ...commonProps, children: [icon, _jsx("span", { className: styles.label, children: label })] })) }, id));
+    });
+    return (_jsx(AppHeader, { size: size, children: _jsxs("nav", { ref: navRef, className: styles.container, "aria-label": productName ? `${productName} navigation` : 'Main navigation', children: [(logo || productName) && (_jsxs("div", { className: styles.logoRow, children: [logo, productName && (_jsxs("span", { className: styles.productName, children: [_jsx(Logo, {}), _jsx(Headline, { disableMargin: true, size: 1, children: productName })] }))] })), _jsx("div", { className: styles.navContent, children: _jsx("ul", { className: styles.navItems, role: "list", children: navLinks }) }), addition && !isMobile && _jsx("div", { className: styles.addition, children: addition }), isMobile && (_jsx(Popover, { open: mobileOpen, onOpenChange: setMobileOpen, matchTriggerWidth: true, fullWidth: false, autoFocusContent: true, anchorRef: navRef, trigger: (toggle, _icon, open) => (_jsx("button", { type: "button", className: styles.burgerButton, "aria-label": open ? 'Close navigation menu' : 'Open navigation menu', "aria-expanded": open, onClick: toggle, children: open ? _jsx(X, { size: 20 }) : _jsx(MenuIcon, { size: 20 }) })), children: close => (_jsxs("div", { className: styles.mobileMenu, children: [_jsx("ul", { className: styles.mobileNavItems, role: "list", onClick: close, children: navLinks }), addition && _jsx("div", { className: styles.mobileAddition, children: addition })] })) }))] }) }));
 }

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

@@ -7,6 +7,99 @@
   flex-grow: 1;
 }
 
+.logoRow {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  flex-shrink: 0;
+}
+
+.navContent {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  min-inline-size: 0;
+  flex: 1 1 auto;
+}
+
+/* Burger: hidden on desktop, visible on mobile */
+.burger {
+  display: none;
+  margin-inline-start: auto;
+}
+
+.burgerButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--component-size-md);
+  block-size: var(--component-size-md);
+  border: none;
+  background: transparent;
+  color: var(--color-fg-default);
+  border-radius: var(--border-radius-default);
+  cursor: pointer;
+  padding: 0;
+  transition: background-color var(--transition-fast) var(--ease-standard);
+}
+
+.burgerButton:hover {
+  background-color: var(--color-bg-hover-subtle);
+}
+
+.burgerButton:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* Mobile dropdown content */
+.mobileMenu {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xs);
+}
+
+.mobileNavItems {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.mobileAddition {
+  border-top: var(--border-width-thin) solid var(--color-border-subtle);
+  padding-top: var(--spacing-xs);
+}
+
+@media (max-width: 640px) {
+  .container {
+    flex-wrap: nowrap;
+    overflow: hidden;
+  }
+
+  .logoRow {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    overflow: hidden;
+  }
+
+  .navContent {
+    display: none;
+  }
+
+  .addition {
+    display: none;
+  }
+
+  .burger {
+    display: flex;
+    flex-shrink: 0;
+    margin-inline-start: 0;
+  }
+}
+
 .productName {
   display: inline-flex;
   align-items: center;
@@ -23,13 +116,20 @@
   display: flex;
   align-items: center;
   gap: var(--spacing-lg);
-  inline-size: 100%;
   min-inline-size: 0;
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
+.addition {
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  margin-inline-start: auto;
+}
+
 .navItem {
   list-style: none;
   min-inline-size: 0;

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

@@ -19,6 +19,15 @@ export function Modal({ isOpen, onRequestClose, header, content, children, prima
     useEffect(() => {
         setMounted(true);
     }, []);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const previous = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+        return () => {
+            document.body.style.overflow = previous;
+        };
+    }, [isOpen]);
     // Track open transition so we only autofocus once per open
     const wasOpenRef = useRef(false);
     useEffect(() => {
@@ -32,7 +41,7 @@ export function Modal({ isOpen, onRequestClose, header, content, children, prima
             lastActiveElementRef.current = document.activeElement;
             const dialog = dialogRef.current;
             if (dialog) {
-                const focusableSelectors = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+                const focusableSelectors = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
                 const focusable = dialog.querySelectorAll(focusableSelectors);
                 if (focusable.length > 0) {
                     const preferred = (_a = dialog.querySelector('input, select, textarea')) !== null && _a !== void 0 ? _a : focusable[0];
@@ -43,35 +52,51 @@ export function Modal({ isOpen, onRequestClose, header, content, children, prima
                 }
             }
         }
+        const focusableSelectors = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+        const getFocusable = () => { var _a, _b; return (_b = (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(focusableSelectors)) !== null && _b !== void 0 ? _b : []; };
         const handleKeyDown = (event) => {
             if (event.key === 'Escape') {
                 onRequestCloseRef.current();
                 return;
             }
             if (event.key === 'Tab' && dialogRef.current) {
-                const focusableSelectors = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
-                const focusable = dialogRef.current.querySelectorAll(focusableSelectors);
+                const focusable = getFocusable();
                 if (focusable.length === 0)
                     return;
                 const first = focusable[0];
                 const last = focusable[focusable.length - 1];
                 if (event.shiftKey) {
-                    if (document.activeElement === first) {
+                    if (document.activeElement === first ||
+                        !dialogRef.current.contains(document.activeElement)) {
                         event.preventDefault();
                         last.focus();
                     }
                 }
                 else {
-                    if (document.activeElement === last) {
+                    if (document.activeElement === last ||
+                        !dialogRef.current.contains(document.activeElement)) {
                         event.preventDefault();
                         first.focus();
                     }
                 }
             }
         };
+        // Redirect focus back into the dialog if it escapes (e.g. via mouse click on overlay)
+        const handleFocusIn = (event) => {
+            const dialog = dialogRef.current;
+            if (!dialog || dialog.contains(event.target))
+                return;
+            const focusable = getFocusable();
+            if (focusable.length > 0)
+                focusable[0].focus();
+            else
+                dialog.focus();
+        };
         document.addEventListener('keydown', handleKeyDown);
+        document.addEventListener('focusin', handleFocusIn);
         return () => {
             document.removeEventListener('keydown', handleKeyDown);
+            document.removeEventListener('focusin', handleFocusIn);
             if (lastActiveElementRef.current) {
                 lastActiveElementRef.current.focus();
             }

package/dist/components/page-layout/PageLayout.d.ts

@@ -1,6 +1,7 @@
 import type { FC, PropsWithChildren, ReactNode } from 'react';
 import { type PageLayoutHeroProps } from './components/page-layout-hero/PageLayoutHero';
 type Orientation = 'vertical' | 'horizontal';
+export type PageLayoutMaxWidth = boolean | 'sm' | 'md';
 export interface PageLayoutProps extends PropsWithChildren {
     /**
      * If true, PageLayout becomes a self-contained app shell (100vh) and
@@ -11,14 +12,15 @@ export interface PageLayoutProps extends PropsWithChildren {
     orientation?: Orientation;
 }
 export interface PageLayoutHeaderProps {
-    maxWidth?: boolean;
+    maxWidth?: PageLayoutMaxWidth;
     children: ReactNode;
 }
 export interface PageLayoutContentProps {
-    maxWidth?: boolean;
+    maxWidth?: PageLayoutMaxWidth;
     children: ReactNode;
 }
 export interface PageLayoutFooterProps {
+    maxWidth?: PageLayoutMaxWidth;
     children: ReactNode;
 }
 export interface PageLayoutSidebarProps {

package/dist/components/page-layout/PageLayout.js

@@ -2,6 +2,13 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { Children, isValidElement } from 'react';
 import { PageLayoutHero, } from './components/page-layout-hero/PageLayoutHero';
 import styles from './PageLayout.module.css';
+function getMaxWidthClass(value, styles) {
+    if (!value)
+        return '';
+    if (value === 'sm')
+        return styles.maxWidthSm;
+    return styles.maxWidthMd;
+}
 function getSlotName(el) {
     var _a;
     const t = el.type;
@@ -34,15 +41,15 @@ const PageLayoutSidebar = ({ children, }) => {
 };
 PageLayoutSidebar.__PAGE_LAYOUT_SLOT__ = 'Sidebar';
 const PageLayoutHeader = ({ maxWidth = false, children, }) => {
-    return (_jsx("div", { className: styles.headerContainer, children: _jsx("div", { className: `${styles.headerContent} ${maxWidth ? styles.maxWidth : ''}`, children: children }) }));
+    return (_jsx("div", { className: styles.headerContainer, children: _jsx("div", { className: `${styles.headerContent} ${getMaxWidthClass(maxWidth, styles)}`, children: children }) }));
 };
 PageLayoutHeader.__PAGE_LAYOUT_SLOT__ = 'Header';
 const PageLayoutContent = ({ maxWidth = false, children, }) => {
-    return (_jsx("div", { className: `${styles.contentInner} ${maxWidth ? styles.maxWidth : ''}`, children: children }));
+    return (_jsx("div", { className: `${styles.contentInner} ${getMaxWidthClass(maxWidth, styles)}`, children: children }));
 };
 PageLayoutContent.__PAGE_LAYOUT_SLOT__ = 'Content';
-const PageLayoutFooter = ({ children, }) => {
-    return _jsx(_Fragment, { children: children });
+const PageLayoutFooter = ({ maxWidth = false, children, }) => {
+    return (_jsx("div", { className: `${styles.footerContent} ${getMaxWidthClass(maxWidth, styles)}`, children: children }));
 };
 PageLayoutFooter.__PAGE_LAYOUT_SLOT__ = 'Footer';
 PageLayoutHero.__PAGE_LAYOUT_SLOT__ = 'Hero';
@@ -50,7 +57,7 @@ const PageLayoutBase = ({ children, containScrolling = false, orientation = 'ver
     var _a, _b;
     const { slots, rest } = splitSlots(children);
     // If no explicit <PageLayout.Content>, we’ll treat remaining children as content.
-    const content = (_a = slots.Content) !== null && _a !== void 0 ? _a : (rest.length ? _jsx(PageLayoutContent, { maxWidth: true, children: rest }) : undefined);
+    const content = (_a = slots.Content) !== null && _a !== void 0 ? _a : (rest.length ? _jsx(PageLayoutContent, { maxWidth: "md", children: rest }) : undefined);
     const rootClass = [
         styles.root,
         orientation === 'vertical' ? styles.vertical : styles.horizontal,

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

@@ -17,7 +17,8 @@
 }
 
 .documentScrolling {
-  min-height: 100%;
+  min-height: 100vh;
+  min-height: 100dvh;
   overflow: visible;
 }
 
@@ -71,6 +72,7 @@
 .header {
   min-width: 0;
   background: var(--color-bg-surface);
+  border-bottom: var(--border-width-thin) solid var(--color-border-default);
   flex: 0 0 auto;
 }
 
@@ -115,16 +117,18 @@
   flex: 1 1 auto; /* take remaining space inside mainScroll */
   display: flex; /* lets contentInner stretch */
   flex-direction: column;
+  align-items: center;
 
   background: var(--color-bg-surface);
-  padding: var(--spacing-md);
+  padding: var(--spacing-lg) var(--spacing-md);
   overflow: visible;
 }
 
 .footer {
   min-width: 0;
-  background: var(--color-bg-surface);
-  border-top: var(--border-width-thin) solid var(--color-border-subtle);
+  background: var(--color-bg-surface-subtle);
+  display: flex;
+  justify-content: center;
 
   /* When there is extra space (content is short), this pushes footer to the bottom.
      When content is long, footer follows content normally and is reached by scrolling.
@@ -138,6 +142,7 @@
   display: flex;
   justify-content: center;
   width: 100%;
+  padding-inline: var(--spacing-md);
 }
 
 .headerContent {
@@ -145,19 +150,54 @@
   box-sizing: border-box;
 }
 
-.maxWidth {
+.footerContent {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.maxWidthMd {
   max-width: 1600px;
   margin-inline: auto;
   width: 100%;
   box-sizing: border-box;
 }
 
+.maxWidthSm {
+  margin-inline: auto;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+@media (min-width: 640px) {
+  .maxWidthSm {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .maxWidthSm {
+    max-width: 668px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .maxWidthSm {
+    max-width: 924px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .maxWidthSm {
+    max-width: 1180px;
+  }
+}
+
 /* Content slot inner wrapper (so maxWidth works without interfering with scroll) */
 .contentInner {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-xl);
-
+  width: 100%;
   box-sizing: border-box;
   min-width: 0;
 

package/dist/components/page-layout/components/layout-footer/LayoutFooter.d.ts

@@ -0,0 +1,13 @@
+import type { JSX, ReactElement } from 'react';
+export interface LayoutFooterLink {
+    label: string;
+    href: string;
+    external?: boolean;
+}
+export interface LayoutFooterProps {
+    links?: LayoutFooterLink[];
+    metaParts?: string[];
+    /** Extra links rendered before the default links. Pass framework link elements (e.g. Next.js <Link>). */
+    extraLinks?: ReactElement[];
+}
+export declare function LayoutFooter({ links, metaParts, extraLinks, }: LayoutFooterProps): JSX.Element;

package/dist/components/page-layout/components/layout-footer/LayoutFooter.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Logo } from '../../../../assets/logo';
+import { Hyperlink } from '../../../../components/hyperlink/Hyperlink';
+import styles from './LayoutFooter.module.css';
+const DEFAULT_META_PARTS = [
+    'Tempovej 7-11',
+    'DK-2750 Ballerup',
+    '+45 44 86 77 11',
+    `© ${new Date().getFullYear()} DBC DIGITAL A/S`,
+];
+const DEFAULT_LINKS = [
+    {
+        label: 'Kundeservice',
+        href: 'https://kundeservice.dbc.dk',
+        external: true,
+    },
+    {
+        label: 'Cookies',
+        href: '/cookies',
+    },
+];
+export function LayoutFooter({ links = DEFAULT_LINKS, metaParts = DEFAULT_META_PARTS, extraLinks, }) {
+    return (_jsx("footer", { className: styles.footer, children: _jsxs("div", { className: styles.inner, children: [_jsxs("div", { className: styles.brand, children: [_jsx("div", { className: styles.logoRow, children: _jsx(Logo, {}) }), _jsx("address", { className: styles.meta, children: metaParts.map(part => (_jsx("span", { className: styles.part, children: part }, part))) })] }), _jsxs("nav", { className: styles.links, "aria-label": "Footer navigation", children: [extraLinks &&
+                            extraLinks.length > 0 &&
+                            (extraLinks === null || extraLinks === void 0 ? void 0 : extraLinks.map((link, index) => _jsx("span", { children: link }, index))), links.map(link => (_jsx("span", { children: _jsx(Hyperlink, { href: link.href, ...(link.external ? { target: '_blank', rel: 'noopener noreferrer' } : {}), children: link.label }) }, link.label)))] })] }) }));
+}

package/dist/components/page-layout/components/layout-footer/LayoutFooter.module.css

@@ -0,0 +1,87 @@
+.footer {
+  inline-size: 100%;
+  background: var(--color-bg-surface-subtle);
+}
+
+.inner {
+  inline-size: 100%;
+  max-inline-size: var(--container-xl);
+  margin-inline: auto;
+  padding-block: var(--spacing-lg);
+  padding-inline: var(--spacing-md);
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--spacing-2xl);
+}
+
+.brand {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  flex-shrink: 0;
+}
+
+.logoRow {
+  flex-shrink: 0;
+}
+
+.logoRow svg {
+  height: 24px;
+  width: auto;
+  color: var(--color-brand);
+  display: block;
+}
+
+.meta {
+  font-style: normal;
+  margin: 0;
+  color: var(--color-fg-subtle);
+  line-height: var(--line-height-tight);
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.part {
+  white-space: nowrap;
+}
+
+.links {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0;
+}
+
+.linkGroup {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-2xs);
+}
+
+.linkGroup + .linkGroup {
+  margin-block-start: var(--spacing-sm);
+  padding-inline: 0;
+  border-inline-start: none;
+}
+
+.linkItem {
+  white-space: nowrap;
+}
+
+@media (max-width: 640px) {
+  .inner {
+    flex-direction: column;
+    gap: var(--spacing-md);
+  }
+
+  .linkGroup {
+    padding-inline: 0;
+  }
+
+  .linkGroup:first-child {
+    padding-inline-start: 0;
+  }
+}

package/dist/components/page-layout/components/page-layout-hero/PageLayoutHero.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
+import type { PageLayoutMaxWidth } from '../../PageLayout';
 export interface PageLayoutHeroProps {
     children?: React.ReactNode;
     link?: (children: React.ReactNode) => React.ReactNode;
     image?: React.ReactNode;
     headline?: string | React.ReactNode;
     metaHeadline?: string | React.ReactNode;
-    maxWidth?: boolean;
+    maxWidth?: PageLayoutMaxWidth;
     textBgColor?: string;
 }
 export declare const PageLayoutHero: React.FC<PageLayoutHeroProps>;

package/dist/components/page-layout/components/page-layout-hero/PageLayoutHero.js

@@ -1,7 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import heroStyles from './PageLayoutHero.module.css';
 import layoutStyles from '../../PageLayout.module.css';
-export const PageLayoutHero = ({ children, link, metaHeadline, headline, image, maxWidth = true, textBgColor = 'var(--color-primary-900)', }) => {
-    const content = (_jsx("div", { className: `${heroStyles.heroContainer} ${maxWidth ? layoutStyles.maxWidth : ''}`, children: _jsxs("div", { className: heroStyles.splitWrapper, children: [_jsx("div", { className: heroStyles.imageColumn, children: image }), _jsx("div", { className: heroStyles.textColumn, style: { backgroundColor: textBgColor }, children: _jsxs("div", { className: heroStyles.textInner, children: [metaHeadline && _jsx("div", { className: heroStyles.metaHeadline, children: metaHeadline }), headline && (_jsx("div", { className: heroStyles.headline, children: _jsx("h2", { children: headline }) })), children] }) })] }) }));
+function getMaxWidthClass(value) {
+    if (!value)
+        return '';
+    if (value === 'sm')
+        return layoutStyles.maxWidthSm;
+    return layoutStyles.maxWidthMd;
+}
+export const PageLayoutHero = ({ children, link, metaHeadline, headline, image, maxWidth = 'md', textBgColor = 'var(--color-primary-900)', }) => {
+    const content = (_jsx("div", { className: `${heroStyles.heroContainer} ${getMaxWidthClass(maxWidth)}`, children: _jsxs("div", { className: heroStyles.splitWrapper, children: [_jsx("div", { className: heroStyles.imageColumn, children: image }), _jsx("div", { className: heroStyles.textColumn, style: { backgroundColor: textBgColor }, children: _jsxs("div", { className: heroStyles.textInner, children: [metaHeadline && _jsx("div", { className: heroStyles.metaHeadline, children: metaHeadline }), headline && (_jsx("div", { className: heroStyles.headline, children: _jsx("h2", { children: headline }) })), children] }) })] }) }));
     return link ? _jsx(_Fragment, { children: link(content) }) : _jsx(_Fragment, { children: content });
 };

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

@@ -18,7 +18,10 @@ type SearchBoxProps<T extends Record<string, unknown>> = {
     popoverMinWidth?: string;
     loading?: boolean;
     enableHotkey?: boolean;
+    fullWidth?: boolean;
     onButtonClick?: () => void;
+    buttonLabel?: string;
+    buttonIcon?: React.ReactNode;
 } & React.InputHTMLAttributes<HTMLInputElement>;
 type SearchBoxComponent = <T extends Record<string, unknown>>(props: SearchBoxProps<T> & React.RefAttributes<HTMLInputElement>) => React.ReactElement | null;
 export declare const SearchBox: SearchBoxComponent;

package/dist/components/search-box/SearchBox.js

@@ -1,19 +1,19 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Search } from 'lucide-react';
 import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
-import { Button } from '../../components/button/Button';
 import { Input } from '../../components/forms/input/Input';
 import { Menu } from '../../components/menu/Menu';
 import { Popover } from '../../components/popover/Popover';
 import { SkeletonLoaderItem } from '../../components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
 import styles from './SearchBox.module.css';
-export const SearchBox = forwardRef(function SearchBoxInner({ inputWidth, inputSize, variant, result, debounce = true, debounceMs = 800, onSearch, onSelect, displayPopover, resultKeys, resultTemplate, initialTemplate, popoverMinWidth = '500px', noResultText = 'Ingen resultater', loading, enableHotkey = true, onButtonClick, value, onChange, ...rest }, ref) {
+export const SearchBox = forwardRef(function SearchBoxInner({ inputWidth, inputSize, variant, result, debounce = true, debounceMs = 800, onSearch, onSelect, displayPopover, resultKeys, resultTemplate, initialTemplate, popoverMinWidth = '500px', noResultText = 'Ingen resultater', loading, enableHotkey = true, onButtonClick, buttonLabel, buttonIcon, fullWidth = false, value, onChange, ...rest }, ref) {
     const isControlled = value !== undefined;
     // What the user sees immediately in the textbox
     const [draft, setDraft] = useState(() => (isControlled ? String(value !== null && value !== void 0 ? value : '') : ''));
     // Used only for UI state ("Indtast søgeord" vs results/no results)
     const [searchQuery, setSearchQuery] = useState('');
+    const [activeIndex, setActiveIndex] = useState(null);
     const popoverRef = useRef(null);
     const internalInputRef = useRef(null);
     // Forward ref to parent
@@ -76,8 +76,13 @@ export const SearchBox = forwardRef(function SearchBoxInner({ inputWidth, inputS
         var _a;
         setDraft(''); // always clear UI immediately
         setSearchQuery('');
+        setActiveIndex(null);
         (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.close();
     }
+    // Reset active index when results change
+    useEffect(() => {
+        setActiveIndex(null);
+    }, [result]);
     // Props for the input are now created inside useMemo to avoid unnecessary dependency changes
     const inputField = useMemo(() => {
         var _a;
@@ -86,17 +91,48 @@ export const SearchBox = forwardRef(function SearchBoxInner({ inputWidth, inputS
             value: draft,
             onChange: handleChange,
         };
+        const showInputIcon = !onButtonClick || !!buttonLabel || !!buttonIcon;
+        const trailingButtonIcon = onButtonClick && !buttonLabel && !buttonIcon ? _jsx(Search, {}) : buttonIcon;
         if (displayPopover) {
-            return (_jsx(Popover, { ref: popoverRef, minWidth: popoverMinWidth, trigger: event => {
+            return (_jsx(Popover, { ref: popoverRef, minWidth: popoverMinWidth, fullWidth: fullWidth, trigger: event => {
                     var _a;
-                    return (_jsx(Input, { ref: internalInputRef, onFocusCapture: event, onClick: event, minWidth: inputWidth !== null && inputWidth !== void 0 ? inputWidth : '300px', width: inputWidth !== null && inputWidth !== void 0 ? inputWidth : '300px', icon: _jsx(Search, {}), inputSize: inputSize, variant: variant, ...inputProps, placeholder: (_a = rest.placeholder) !== null && _a !== void 0 ? _a : 'Indtast søgeord' }));
-                }, children: resultTemplate ? (resultTemplate) : (result === null || result === void 0 ? void 0 : result.length) ? (_jsx(Menu, { children: _jsx("table", { children: _jsx("tbody", { children: result.map((item, index) => (_jsx("tr", { onClick: () => handleSelect(item), role: "button", tabIndex: 0, children: resultKeys === null || resultKeys === void 0 ? void 0 : resultKeys.map(key => {
+                    return (_jsx(Input, { ref: internalInputRef, onFocusCapture: event, onClick: () => {
+                            var _a, _b;
+                            if (!((_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.isOpen()))
+                                (_b = popoverRef.current) === null || _b === void 0 ? void 0 : _b.open();
+                        }, minWidth: fullWidth ? undefined : (inputWidth !== null && inputWidth !== void 0 ? inputWidth : '300px'), width: fullWidth ? undefined : (inputWidth !== null && inputWidth !== void 0 ? inputWidth : '300px'), fullWidth: fullWidth, icon: showInputIcon ? _jsx(Search, {}) : undefined, inputSize: inputSize, variant: variant, autoComplete: "off", onButtonClick: onButtonClick, buttonLabel: buttonLabel, buttonIcon: trailingButtonIcon, ...inputProps, onKeyDown: e => {
+                            var _a;
+                            if (result === null || result === void 0 ? void 0 : result.length) {
+                                if (e.key === 'ArrowDown') {
+                                    e.preventDefault();
+                                    setActiveIndex(prev => prev === null || prev === result.length - 1 ? 0 : prev + 1);
+                                }
+                                else if (e.key === 'ArrowUp') {
+                                    e.preventDefault();
+                                    setActiveIndex(prev => prev === null || prev === 0 ? result.length - 1 : prev - 1);
+                                }
+                                else if (e.key === 'Enter') {
+                                    e.preventDefault();
+                                    if (activeIndex !== null) {
+                                        handleSelect(result[activeIndex]);
+                                    }
+                                    else if (onButtonClick) {
+                                        onButtonClick();
+                                    }
+                                }
+                                else if (e.key === 'Escape') {
+                                    reset();
+                                }
+                            }
+                            (_a = inputProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
+                        }, placeholder: (_a = rest.placeholder) !== null && _a !== void 0 ? _a : 'Indtast søgeord' }));
+                }, children: resultTemplate ? (resultTemplate) : (result === null || result === void 0 ? void 0 : result.length) ? (_jsx(Menu, { children: _jsx("table", { className: styles.suggestionTable, children: _jsx("tbody", { children: result.map((item, index) => (_jsx("tr", { onClick: () => handleSelect(item), role: "button", tabIndex: 0, className: `${styles.suggestionRow}${index === activeIndex ? ` ${styles.suggestionRowActive}` : ''}`, children: resultKeys === null || resultKeys === void 0 ? void 0 : resultKeys.map(key => {
                                     const raw = item[key];
                                     const cell = raw != null ? String(raw) : '';
-                                    return (_jsx("td", { style: { whiteSpace: cell.length < 10 ? 'nowrap' : undefined }, children: cell }, key));
+                                    return (_jsx("td", { className: styles.suggestionCell, style: { whiteSpace: cell.length < 10 ? 'nowrap' : undefined }, children: cell }, key));
                                 }) }, index))) }) }) })) : !searchQuery && !loading ? (initialTemplate || _jsx("div", { className: styles.resultContainer, children: "Indtast s\u00F8geord" })) : loading ? (_jsx("table", { style: { width: '100%' }, children: _jsx("tbody", { children: Array.from({ length: 5 }).map((_, index) => (_jsx("tr", { children: resultKeys === null || resultKeys === void 0 ? void 0 : resultKeys.map(key => (_jsx("td", { style: { padding: '8px' }, children: _jsx(SkeletonLoaderItem, { height: 20, width: "100%" }) }, key))) }, index))) }) })) : (_jsx("div", { className: styles.resultContainer, children: noResultText })) }));
         }
-        return (_jsx(Input, { ref: internalInputRef, icon: _jsx(Search, {}), minWidth: inputWidth !== null && inputWidth !== void 0 ? inputWidth : '300px', inputSize: inputSize, variant: variant, ...inputProps, placeholder: (_a = rest.placeholder) !== null && _a !== void 0 ? _a : 'Indtast søgeord' }));
+        return (_jsx(Input, { ref: internalInputRef, icon: showInputIcon ? _jsx(Search, {}) : undefined, minWidth: fullWidth ? undefined : (inputWidth !== null && inputWidth !== void 0 ? inputWidth : '300px'), fullWidth: fullWidth, inputSize: inputSize, variant: variant, onButtonClick: onButtonClick, buttonLabel: buttonLabel, buttonIcon: trailingButtonIcon, ...inputProps, placeholder: (_a = rest.placeholder) !== null && _a !== void 0 ? _a : 'Indtast søgeord' }));
     }, [
         rest,
         draft,
@@ -114,6 +150,11 @@ export const SearchBox = forwardRef(function SearchBoxInner({ inputWidth, inputS
         noResultText,
         resultKeys,
         handleSelect,
+        activeIndex,
+        onButtonClick,
+        buttonLabel,
+        buttonIcon,
+        fullWidth,
     ]);
-    return onButtonClick ? (_jsxs("div", { className: styles.withButton, children: [inputField, _jsx(Button, { variant: "outlined", icon: _jsx(Search, {}), onClick: onButtonClick })] })) : (_jsx("div", { children: inputField }));
+    return _jsx("div", { style: fullWidth ? { width: '100%' } : undefined, children: inputField });
 });

package/dist/components/search-box/SearchBox.module.css

@@ -2,18 +2,20 @@
   padding: var(--spacing-sm);
 }
 
-.withButton {
-  display: inline-flex;
-  align-items: center;
+.suggestionTable {
   border-collapse: collapse;
+  width: 100%;
 }
 
-.withButton input {
-  border-right-color: transparent;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+.suggestionRow {
+  cursor: pointer;
 }
 
-.withButton button {
-  border-radius: 0 var(--border-radius-default) var(--border-radius-default) 0;
+.suggestionRow:hover > .suggestionCell,
+.suggestionRowActive > .suggestionCell {
+  background-color: var(--table-row-bg-hover);
+}
+
+.suggestionCell {
+  padding: var(--spacing-xs) var(--spacing-sm);
 }

package/dist/hooks/useDeviceSize.d.ts

@@ -0,0 +1,2 @@
+export type DeviceSize = 'mobile' | 'tablet' | 'desktop';
+export declare function useDeviceSize(): DeviceSize;

package/dist/hooks/useDeviceSize.js

@@ -0,0 +1,32 @@
+'use client';
+import { useEffect, useState } from 'react';
+// Aligned with --bp-sm (640px), --bp-md (768px), --bp-lg (1024px) from base.css
+const BREAKPOINTS = {
+    tablet: 640,
+    desktop: 1024,
+};
+function getDeviceSize(width) {
+    if (width < BREAKPOINTS.tablet)
+        return 'mobile';
+    if (width < BREAKPOINTS.desktop)
+        return 'tablet';
+    return 'desktop';
+}
+export function useDeviceSize() {
+    const [deviceSize, setDeviceSize] = useState(() => {
+        if (typeof window === 'undefined')
+            return 'desktop';
+        return getDeviceSize(window.innerWidth);
+    });
+    useEffect(() => {
+        const mediaQueries = [
+            window.matchMedia(`(max-width: ${BREAKPOINTS.tablet - 1}px)`),
+            window.matchMedia(`(min-width: ${BREAKPOINTS.tablet}px) and (max-width: ${BREAKPOINTS.desktop - 1}px)`),
+            window.matchMedia(`(min-width: ${BREAKPOINTS.desktop}px)`),
+        ];
+        const update = () => setDeviceSize(getDeviceSize(window.innerWidth));
+        mediaQueries.forEach(mq => mq.addEventListener('change', update));
+        return () => mediaQueries.forEach(mq => mq.removeEventListener('change', update));
+    }, []);
+    return deviceSize;
+}

package/dist/index.d.ts

@@ -8,6 +8,7 @@ export * from './components/user-display/UserDisplay';
 export * from './components/tabs/Tabs';
 export * from './components/headline/Headline';
 export * from './components/page-layout/PageLayout';
+export * from './components/page-layout/components/layout-footer/LayoutFooter';
 export * from './components/forms/input/Input';
 export * from './components/search-box/SearchBox';
 export * from './hooks/useTheme';
@@ -65,3 +66,4 @@ export * from './components/accordion/Accordion';
 export * from './components/state-page/StatePage';
 export * from './components/sticky-footer-layout/StickyFooterLayout';
 export * from './components/forms/typeahead/Typeahead';
+export * from './hooks/useDeviceSize';

package/dist/index.js

@@ -8,6 +8,7 @@ export * from './components/user-display/UserDisplay';
 export * from './components/tabs/Tabs';
 export * from './components/headline/Headline';
 export * from './components/page-layout/PageLayout';
+export * from './components/page-layout/components/layout-footer/LayoutFooter';
 export * from './components/forms/input/Input';
 export * from './components/search-box/SearchBox';
 export * from './hooks/useTheme';
@@ -65,3 +66,4 @@ export * from './components/accordion/Accordion';
 export * from './components/state-page/StatePage';
 export * from './components/sticky-footer-layout/StickyFooterLayout';
 export * from './components/forms/typeahead/Typeahead';
+export * from './hooks/useDeviceSize';

package/dist/src/styles/styles.css

@@ -26,6 +26,11 @@
   box-sizing: border-box;
 }
 
+html,
+body {
+  scrollbar-gutter: stable both-edges;
+}
+
 body {
   color: var(--color-fg-default);
   background-color: var(--color-bg-page);

package/dist/styles/styles.css

@@ -26,6 +26,11 @@
   box-sizing: border-box;
 }
 
+html,
+body {
+  scrollbar-gutter: stable both-edges;
+}
+
 body {
   color: var(--color-fg-default);
   background-color: var(--color-bg-page);

package/package.json

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