@dbcdk/react-components 0.0.10 → 0.0.13

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

@@ -17,7 +17,4 @@ export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size
     tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
     modified?: boolean;
 };
-/**
- * Explicit exported type annotation is required with --isolatedDeclarations.
- */
 export declare const Input: React.ForwardRefExoticComponent<React.PropsWithoutRef<InputProps> & React.RefAttributes<HTMLInputElement>>;

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

@@ -18,12 +18,9 @@ function mergeRefs(...refs) {
         }
     };
 }
-/**
- * Explicit exported type annotation is required with --isolatedDeclarations.
- */
 export const Input = forwardRef(function Input({ 
 // InputContainer props
-label, error, helpText, orientation = 'horizontal', labelWidth = '160px', fullWidth = false, required, tooltip, tooltipPlacement = 'right', modified, 
+label, error, helpText, orientation = 'vertical', labelWidth = '160px', fullWidth = false, required, tooltip, tooltipPlacement = 'right', modified, 
 // Input-only props
 icon, autoFocus, minWidth, width, inputSize = 'md', variant = 'outlined', onClear, onButtonClick, buttonLabel, buttonIcon, 
 // Native input props

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

@@ -3,6 +3,7 @@
   /* inline-flex makes width behave weird in parents */
   display: inline-flex;
   align-items: stretch;
+  flex-grow: 1;
   gap: 0;
   /* width control */
   inline-size: var(--input-width, auto);
@@ -42,8 +43,8 @@
   border: var(--border-width-thin) solid var(--color-border-default);
   border-radius: var(--border-radius-default);
 
-  padding-inline: var(--control-padding-x);
-  padding-block: calc(var(--control-padding-y) + var(--density));
+  padding-inline: var(--spacing-sm);
+  padding-block: var(--spacing-xs);
 
   transition:
     background-color var(--transition-fast) var(--ease-standard),
@@ -66,7 +67,7 @@
 
 /* Optional: if ClearButton is absolutely positioned, reserve space */
 .withClear .input {
-  padding-inline-end: calc(var(--control-padding-x) + 28px);
+  padding-inline-end: calc(var(--spacing-md) + 28px);
 }
 
 /* Placeholder */
@@ -99,20 +100,20 @@
 
 /* Sizes */
 .xs {
-  block-size: calc(var(--component-size-xs) + var(--density));
+  block-size: var(--component-size-xs);
   font-size: var(--font-size-sm);
   padding: 0 var(--spacing-xxs);
 }
 .sm {
-  block-size: calc(var(--component-size-sm) + var(--density));
+  block-size: var(--component-size-sm);
   font-size: var(--font-size-sm);
 }
 .md {
-  block-size: calc(var(--component-size-md) + var(--density));
+  block-size: var(--component-size-md);
   font-size: var(--font-size-sm);
 }
 .lg {
-  block-size: calc(var(--component-size-lg) + var(--density));
+  block-size: var(--component-size-lg);
   font-size: var(--font-size-lg);
 }
 

package/dist/components/forms/input-container/InputContainer.module.css

@@ -80,7 +80,7 @@
  */
 .inputContainer[data-modified] label:not(.label) {
   background-color: color-mix(in srgb, var(--color-status-warning-bg) 35%, transparent);
-  border-radius: var(--border-radius-md);
+  border-radius: var(--border-radius-default);
   padding: 2px 6px;
 }
 

package/dist/components/forms/radio-buttons/RadioButtons.module.css

@@ -78,6 +78,7 @@
 .label {
   cursor: pointer;
   user-select: none;
+  flex: 1;
 }
 
 .primary.checked {

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

@@ -1,45 +1,61 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check } from 'lucide-react';
-import { useEffect, useId, useRef, useState } from 'react';
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
 import { useTooltipTrigger } from '../../../components/overlay/tooltip/useTooltipTrigger';
 import { Button } from '../../button/Button';
 import { ClearButton } from '../../clear-button/ClearButton';
 import { Menu } from '../../menu/Menu';
 import { Popover } from '../../popover/Popover';
 import { InputContainer } from '../input-container/InputContainer';
-export function Select({ 
-// InputContainer props
-label, error, helpText, orientation = 'vertical', labelWidth = '160px', fullWidth = true, required, tooltip, tooltipPlacement = 'right', modified = false, 
-// Select props
-id, options, selectedValue, onChange, placeholder = 'Vælg', size, variant = 'outlined', onClear, datakey, dataCy, disabled, }) {
+export function Select({ label, error, helpText, orientation = 'vertical', labelWidth = '160px', fullWidth = true, required, tooltip, tooltipPlacement = 'right', modified = false, id, options, selectedValue, onChange, placeholder = 'Vælg', size, variant = 'outlined', onClear, datakey, dataCy, disabled, }) {
     const generatedId = useId();
     const controlId = id !== null && id !== void 0 ? id : `select-${generatedId}`;
     const describedById = `${controlId}-desc`;
+    const listboxId = `${controlId}-listbox`;
     const popoverRef = useRef(null);
     const optionRefs = useRef([]);
-    const selectedIndex = options.findIndex(o => o.value === selectedValue);
+    const selectedIndex = useMemo(() => options.findIndex(o => o.value === selectedValue), [options, selectedValue]);
     const [activeIndex, setActiveIndex] = useState(selectedIndex >= 0 ? selectedIndex : 0);
+    const [open, setOpen] = useState(false);
+    // Only move focus when open
     useEffect(() => {
         var _a;
+        if (!open)
+            return;
         (_a = optionRefs.current[activeIndex]) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [activeIndex]);
+    }, [activeIndex, open]);
+    // keep activeIndex aligned when opening
+    const resetActiveToSelected = () => setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
     const handleKeyDown = (e) => {
         var _a, _b;
         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 'Enter':
             case ' ': {
+                // Space on a button should open/select depending on state
                 e.preventDefault();
+                if (!open) {
+                    setOpen(true);
+                    return;
+                }
                 const opt = options[activeIndex];
                 if (opt) {
                     onChange(opt.value);
@@ -48,22 +64,35 @@ id, options, selectedValue, onChange, placeholder = 'Vælg', size, variant = 'ou
                 break;
             }
             case 'Escape': {
+                if (!open)
+                    return;
                 e.preventDefault();
                 (_b = popoverRef.current) === null || _b === void 0 ? void 0 : _b.close();
                 break;
             }
+            case 'Home': {
+                if (!open)
+                    return;
+                e.preventDefault();
+                setActiveIndex(0);
+                break;
+            }
+            case 'End': {
+                if (!open)
+                    return;
+                e.preventDefault();
+                setActiveIndex(options.length - 1);
+                break;
+            }
         }
     };
     const selected = options.find(o => o.value === selectedValue);
-    // Tooltip trigger props (anchor to the Button)
     const tooltipEnabled = Boolean(tooltip);
     const { triggerProps, id: tooltipId } = useTooltipTrigger({
         content: tooltipEnabled ? tooltip : null,
         placement: tooltipPlacement,
         offset: 8,
     });
-    // If you want BOTH tooltip + error/helpText describedby:
-    // merge describedby ids (keeping existing describedById)
     const describedBy = (() => {
         const ids = [];
         if (error || helpText)
@@ -72,15 +101,25 @@ id, options, selectedValue, onChange, placeholder = 'Vælg', size, variant = 'ou
             ids.push(tooltipId);
         return ids.length ? ids.join(' ') : undefined;
     })();
-    return (_jsxs(InputContainer, { label: label, htmlFor: controlId, fullWidth: fullWidth, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, required: required, modified: modified, children: [_jsx(Popover, { ref: popoverRef, trigger: (onClick, icon) => (_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 => {
-                        setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
-                        onClick(e);
-                    }, size: size, type: "button", "data-forminput": true, "aria-haspopup": "listbox", "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 : placeholder }), onClear && selected && _jsx(ClearButton, { onClick: onClear }), icon] }) })), children: _jsx(Menu, { onKeyDown: handleKeyDown, role: "listbox", children: options.map((opt, index) => {
+    return (_jsxs(InputContainer, { label: label, htmlFor: controlId, fullWidth: fullWidth, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, required: required, modified: modified, children: [_jsx(Popover, { ref: popoverRef, open: open, onOpenChange: next => {
+                    setOpen(next);
+                    if (next)
+                        resetActiveToSelected();
+                }, contentId: listboxId, 
+                // Select manages roving focus; don't auto-focus content wrapper
+                autoFocusContent: false, 
+                // keep focus on trigger until you move it yourself (your ArrowDown opens then focuses option)
+                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 : placeholder }), 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, "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, 
+                            // 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: () => {
                                     var _a;
                                     onChange(opt.value);
                                     (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.close();

package/dist/components/hyperlink/Hyperlink.d.ts

@@ -1,10 +1,22 @@
 import * as React from 'react';
-interface HyperlinkProps {
-    component: React.ReactElement;
-    className?: string;
+type BaseProps = {
+    children: React.ReactNode;
     icon?: React.ReactNode;
-    disableIcon?: boolean;
-    onClick?: (e: React.MouseEvent) => void;
-}
-export declare function Hyperlink({ component, icon }: HyperlinkProps): React.ReactElement;
+    className?: string;
+    /**
+     * If true, Hyperlink will NOT render <a>.
+     * Instead, it will clone its only child (e.g. Next <Link>) and apply styling/props to it.
+     */
+    asChild?: boolean;
+    variant?: 'primary' | 'secondary';
+    inline?: boolean;
+};
+type AnchorProps = BaseProps & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    as?: 'a';
+};
+type ButtonProps = BaseProps & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    as: 'button';
+};
+type HyperlinkProps = AnchorProps | ButtonProps;
+export declare function Hyperlink(props: HyperlinkProps): React.ReactElement;
 export {};

package/dist/components/hyperlink/Hyperlink.js

@@ -1,15 +1,39 @@
 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';
-export function Hyperlink({ component, icon }) {
-    const originalProps = component.props;
-    return React.cloneElement(component, {
-        ...originalProps,
-        className: styles.link,
-        onClick: (e) => {
-            var _a;
-            e.stopPropagation();
-            (_a = originalProps === null || originalProps === void 0 ? void 0 : originalProps.onClick) === null || _a === void 0 ? void 0 : _a.call(originalProps, e);
-        },
-    }, _jsxs(_Fragment, { children: [_jsx("span", { className: styles.content, children: originalProps.children }), icon && _jsx("span", { className: styles.icon, children: icon })] }));
+function cx(...parts) {
+    return parts.filter(Boolean).join(' ');
+}
+function renderInner(children, icon) {
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: styles.content, children: children }), icon && _jsx("span", { className: styles.icon, children: icon })] }));
+}
+export function Hyperlink(props) {
+    var _a;
+    const { children, icon, className, asChild, as = 'a', variant = 'primary', inline = true, ...rest } = props;
+    const linkClassName = cx(styles.link, className, variant === 'secondary' ? styles.secondary : styles.primary, inline ? '' : styles.block);
+    if (asChild) {
+        const child = React.Children.only(children);
+        if (!React.isValidElement(child)) {
+            throw new Error('Hyperlink with asChild expects a single valid React element as its child.');
+        }
+        const childProps = (_a = child.props) !== null && _a !== void 0 ? _a : {};
+        return React.cloneElement(child, {
+            ...childProps,
+            ...rest,
+            className: cx(childProps.className, linkClassName),
+            children: renderInner(childProps.children, icon),
+            onClick: (e) => {
+                e.stopPropagation();
+                if (childProps.onClick) {
+                    childProps.onClick(e);
+                }
+            },
+        });
+    }
+    if (as === 'button') {
+        // (Optional) guardrail: avoid accidentally passing href to a button
+        // const { href, ...buttonRest } = rest as any
+        return (_jsx("button", { type: "button", className: linkClassName, ...rest, children: renderInner(children, icon) }));
+    }
+    return (_jsx("a", { onClick: e => e.stopPropagation(), className: linkClassName, ...rest, children: renderInner(children, icon) }));
 }

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

@@ -2,13 +2,61 @@
   display: inline-flex;
   gap: var(--spacing-xs);
   position: relative;
+  font-weight: normal;
+  background: none;
+  border: none;
+  padding: 0;
   text-decoration: none;
-  color: var(--color-brand);
   font-size: inherit;
+  font-family: inherit;
+  cursor: pointer;
+  color: var(--color-brand);
+  line-height: inherit;
+}
+
+.link.secondary {
+  color: var(--color-fg-default);
 }
 
 .link:hover {
-  text-decoration: underline;
+  color: var(--color-brand);
+}
+
+.link.primary {
+  position: relative;
+  color: var(--color-brand);
+  text-decoration: none;
+}
+
+.link.block {
+  background: var(--color-bg-contextual-subtle);
+  display: inline-block;
+  padding: var(--spacing-xs);
+  &:hover {
+    background-color: var(--color-bg-contextual);
+  }
+}
+
+.link::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: -2px;
+  width: 100%;
+  height: 1px;
+  background-color: currentColor;
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform 100ms ease;
+}
+
+.link:hover::after {
+  transform: scaleX(1);
+}
+
+.link:focus-visible {
+  outline: 2px solid var(--color-brand);
+  outline-offset: 2px;
 }
 
 .icon {

package/dist/components/interval-select/IntervalSelect.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ButtonVariant } from '../../components/button/Button';
 import { InputContainer } from '../../components/forms/input-container/InputContainer';
+import { UtcIsoString } from '../datetime-picker/dateTimeHelpers';
 type InputContainerProps = React.ComponentProps<typeof InputContainer>;
 export type IntervalOption = {
     label: string;
@@ -12,9 +13,14 @@ export type IntervalSelectProps = Omit<InputContainerProps, 'children' | 'htmlFo
     id?: string;
     options: IntervalOption[];
     selectedValue: IntervalSelectValue;
-    onChange: (date: Date, meta: {
+    /**
+     * Emits a UTC instant as ISO string (Z), consistent with DateTimePicker when enableTime=true.
+     * Also includes the computed local Date for convenience.
+     */
+    onChange: (isoUtc: UtcIsoString, meta: {
         minutesAgo: number;
         option: IntervalOption;
+        dateLocal: Date;
     }) => void;
     /** Base date for the calculation; defaults to "now". */
     baseDate?: Date;
@@ -23,8 +29,9 @@ export type IntervalSelectProps = Omit<InputContainerProps, 'children' | 'htmlFo
     variant?: ButtonVariant;
     onClear?: () => void;
     dataCy?: string;
+    disabled?: boolean;
     tooltip?: React.ReactNode;
     tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
 };
-export declare function IntervalSelect({ label, error, helpText, orientation, labelWidth, fullWidth, required, tooltip, tooltipPlacement, id, options, selectedValue, onChange, baseDate, placeholder, size, variant, onClear, dataCy, }: IntervalSelectProps): React.ReactNode;
+export declare function IntervalSelect({ label, error, helpText, orientation, labelWidth, fullWidth, required, tooltip, tooltipPlacement, id, options, selectedValue, onChange, baseDate, placeholder, size, variant, onClear, dataCy, disabled, }: IntervalSelectProps): React.ReactNode;
 export {};

package/dist/components/interval-select/IntervalSelect.js

@@ -8,20 +8,23 @@ import { InputContainer } from '../../components/forms/input-container/InputCont
 import { Menu } from '../../components/menu/Menu';
 import { useTooltipTrigger } from '../../components/overlay/tooltip/useTooltipTrigger';
 import { Popover } from '../../components/popover/Popover';
+import { isoFromLocalDate } from '../datetime-picker/dateTimeHelpers';
 export function IntervalSelect({ 
 // InputContainer props
 label, error, helpText, orientation = 'vertical', labelWidth = '160px', fullWidth = true, required, 
 // tooltip
 tooltip, tooltipPlacement = 'right', 
 // IntervalSelect props
-id, options, selectedValue, onChange, baseDate, placeholder = 'Vælg interval', size, variant = 'outlined', onClear, dataCy, }) {
+id, options, selectedValue, onChange, baseDate, placeholder = 'Vælg interval', size, variant = 'outlined', onClear, dataCy, disabled, }) {
     const generatedId = useId();
     const controlId = id !== null && id !== void 0 ? id : `interval-select-${generatedId}`;
     const describedById = `${controlId}-desc`;
+    const listboxId = `${controlId}-listbox`;
     const popoverRef = useRef(null);
     const optionRefs = useRef([]);
     const selectedIndex = useMemo(() => options.findIndex(o => o.minutesAgo === selectedValue), [options, selectedValue]);
     const [activeIndex, setActiveIndex] = useState(selectedIndex >= 0 ? selectedIndex : 0);
+    // Focus active option when opened (simple version: always focus when index changes)
     useEffect(() => {
         var _a;
         (_a = optionRefs.current[activeIndex]) === null || _a === void 0 ? void 0 : _a.focus();
@@ -44,8 +47,9 @@ id, options, selectedValue, onChange, baseDate, placeholder = 'Vælg interval',
     const handleCommit = (opt) => {
         var _a;
         const base = baseDate !== null && baseDate !== void 0 ? baseDate : new Date();
-        const dt = new Date(base.getTime() - opt.minutesAgo * 60000);
-        onChange(dt, { minutesAgo: opt.minutesAgo, option: opt });
+        const dateLocal = new Date(base.getTime() - opt.minutesAgo * 60000);
+        const isoUtc = isoFromLocalDate(dateLocal);
+        onChange(isoUtc, { minutesAgo: opt.minutesAgo, option: opt, dateLocal });
         (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.close();
     };
     const handleKeyDown = (e) => {
@@ -59,6 +63,14 @@ id, options, selectedValue, onChange, baseDate, placeholder = 'Vælg interval',
                 e.preventDefault();
                 setActiveIndex(i => Math.max(i - 1, 0));
                 break;
+            case 'Home':
+                e.preventDefault();
+                setActiveIndex(0);
+                break;
+            case 'End':
+                e.preventDefault();
+                setActiveIndex(options.length - 1);
+                break;
             case 'Enter':
             case ' ':
                 e.preventDefault();
@@ -71,12 +83,15 @@ id, options, selectedValue, onChange, baseDate, placeholder = 'Vælg interval',
                 break;
         }
     };
-    return (_jsxs(InputContainer, { label: label, htmlFor: controlId, fullWidth: fullWidth, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, required: required, children: [_jsx(Popover, { ref: popoverRef, trigger: (onClick, icon) => (_jsx(Button, { ...(tooltipEnabled ? triggerProps : {}), id: controlId, "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : 'interval-select-button', onKeyDown: handleKeyDown, fullWidth: fullWidth, variant: variant, onClick: e => {
+    return (_jsxs(InputContainer, { label: label, htmlFor: controlId, fullWidth: fullWidth, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, required: required, children: [_jsx(Popover, { ref: popoverRef, contentId: listboxId, trigger: (onClick, icon, isOpen) => (_jsx(Button, { disabled: disabled, ...(tooltipEnabled ? triggerProps : {}), id: controlId, "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : 'interval-select-button', onKeyDown: handleKeyDown, fullWidth: fullWidth, variant: variant, onClick: e => {
+                        // Reset active to selected when opening
                         setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
                         onClick(e);
-                    }, size: size, type: "button", "aria-haspopup": "listbox", "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: [_jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [_jsx(Clock, { size: 14 }), selected ? selected.label : placeholder] }), onClear && selected && _jsx(ClearButton, { onClick: onClear }), icon] }) })), children: _jsx(Menu, { onKeyDown: handleKeyDown, role: "listbox", children: options.map((opt, index) => {
+                    }, size: size, type: "button", "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: [_jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [_jsx(Clock, { size: 14 }), selected ? selected.label : placeholder] }), onClear && selected && _jsx(ClearButton, { onClick: onClear }), icon] }) })), children: _jsx(Menu, { id: listboxId, onKeyDown: handleKeyDown, role: "listbox", children: options.map((opt, index) => {
                         const isSelected = opt.minutesAgo === selectedValue;
                         const isActive = index === activeIndex;
-                        return (_jsx(Menu.Item, { active: isActive, "aria-selected": isSelected, children: _jsxs("button", { ref: el => (optionRefs.current[index] = el), type: "button", tabIndex: isActive ? 0 : -1, onClick: () => handleCommit(opt), onFocus: () => setActiveIndex(index), style: { display: 'flex', alignItems: 'center', width: '100%' }, children: [_jsx("span", { style: { width: 16, display: 'inline-flex', justifyContent: 'center' }, children: isSelected ? _jsx(Check, {}) : null }), opt.label] }) }, opt.minutesAgo));
+                        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: () => handleCommit(opt), onFocus: () => setActiveIndex(index), style: { display: 'flex', alignItems: 'center', width: '100%' }, children: [_jsx("span", { style: { width: 16, display: 'inline-flex', justifyContent: 'center' }, children: isSelected ? _jsx(Check, {}) : null }), opt.label] }) }, opt.minutesAgo));
                     }) }) }), (error || helpText) && (_jsx("span", { id: describedById, style: { display: 'none' }, children: error !== null && error !== void 0 ? error : helpText }))] }));
 }

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

@@ -1,12 +1,41 @@
 import * as React from 'react';
 export interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
     children: React.ReactNode;
+    /**
+     * Default role for items rendered by Menu.Item when it clones/wraps content.
+     * - default: "menuitem" (for role="menu")
+     * - for Select/listbox usage, pass itemRole="option" and role="listbox" on Menu.
+     */
+    itemRole?: 'menuitem' | 'option';
 }
+export type MenuSeparatorProps = React.LiHTMLAttributes<HTMLLIElement>;
 export interface MenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
     children: React.ReactNode;
     active?: boolean;
     disabled?: boolean;
+    /**
+     * Override the role applied to the interactive element for this item only.
+     * If not set, Menu's `itemRole` is used.
+     */
+    itemRole?: 'menuitem' | 'option';
+}
+export interface MenuCheckItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'onChange'> {
+    label: React.ReactNode;
+    checked: boolean;
+    disabled?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+}
+export interface MenuRadioItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'onChange'> {
+    name: string;
+    value: string;
+    checked: boolean;
+    disabled?: boolean;
+    label: string;
+    onValueChange?: (value: string) => void;
 }
 export declare const Menu: React.FC<MenuProps> & {
     Item: React.FC<MenuItemProps>;
+    CheckItem: React.FC<MenuCheckItemProps>;
+    RadioItem: React.FC<MenuRadioItemProps>;
+    Separator: React.FC<MenuSeparatorProps>;
 };

package/dist/components/menu/Menu.js

@@ -2,28 +2,73 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import styles from './Menu.module.css';
-const MenuBase = React.forwardRef(({ children, className, ...props }, ref) => (_jsx("ul", { ref: ref, role: "menu", className: [styles.container, className].filter(Boolean).join(' '), ...props, children: children })));
+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 })));
 MenuBase.displayName = 'Menu';
 const isInteractiveEl = (el) => React.isValidElement(el) &&
-    (typeof el.type === 'string' ? el.type === 'a' || el.type === 'button' : true); // allow custom/Next Link components
-const MenuItem = React.forwardRef(({ children, active, disabled, className, ...liProps }, ref) => {
-    // If child is interactive (a/button/NextLink), clone it and style it.
+    (typeof el.type === 'string' ? el.type === 'a' || el.type === 'button' : true);
+function applyMenuItemPropsToElement(child, opts) {
+    var _a, _b, _c, _d;
+    const { active, disabled, role, tabIndex = -1, className } = opts;
+    const childClass = [styles.item, active ? styles.active : ''].filter(Boolean).join(' ');
+    const nextImmediate = React.cloneElement(child, {
+        className: [child.props.className, styles.interactiveChild, className]
+            .filter(Boolean)
+            .join(' '),
+    });
+    // If immediate child is interactive, apply a11y+styles there
+    if (typeof child.type === 'string' && (child.type === 'a' || child.type === 'button')) {
+        return React.cloneElement(child, {
+            role: (_a = child.props.role) !== null && _a !== void 0 ? _a : role,
+            tabIndex: (_b = child.props.tabIndex) !== null && _b !== void 0 ? _b : tabIndex,
+            'aria-selected': active || undefined,
+            'aria-disabled': disabled || undefined,
+            className: [child.props.className, styles.interactive, childClass, className]
+                .filter(Boolean)
+                .join(' '),
+            ...(child.type === 'button' ? { disabled } : {}),
+        });
+    }
+    // For custom components, assume they forward props
+    return React.cloneElement(nextImmediate, {
+        role: (_c = nextImmediate.props.role) !== null && _c !== void 0 ? _c : role,
+        tabIndex: (_d = nextImmediate.props.tabIndex) !== null && _d !== void 0 ? _d : tabIndex,
+        'aria-selected': active || undefined,
+        'aria-disabled': disabled || undefined,
+        className: [nextImmediate.props.className, styles.interactive, childClass]
+            .filter(Boolean)
+            .join(' '),
+        disabled,
+    });
+}
+const MenuItem = React.forwardRef(({ children, active, disabled, className, itemRole, ...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';
     if (isInteractiveEl(children)) {
         const child = children;
-        const childClass = [styles.item, active ? styles.active : ''].filter(Boolean).join(' ');
-        return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: React.cloneElement(child, {
-                role: 'menuitem',
-                tabIndex: -1,
-                'aria-selected': active || undefined,
-                'aria-disabled': disabled || undefined,
-                className: [child.props.className, styles.interactive, childClass]
-                    .filter(Boolean)
-                    .join(' '),
-            }) }));
+        return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: applyMenuItemPropsToElement(child, { active, disabled, role: resolvedRole }) }));
     }
-    return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: _jsx("button", { role: "menuitem", tabIndex: -1, "aria-selected": active || undefined, "aria-disabled": disabled || undefined, className: [styles.interactive, styles.item, active ? styles.active : '']
+    // 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": active || undefined, "aria-disabled": disabled || undefined, className: [styles.interactive, styles.item, active ? styles.active : '']
                 .filter(Boolean)
                 .join(' '), type: "button", disabled: disabled, children: children }) }));
 });
 MenuItem.displayName = 'Menu.Item';
-export const Menu = Object.assign(MenuBase, { Item: MenuItem });
+const MenuCheckItem = React.forwardRef(({ label, checked, disabled, onCheckedChange, className, ...liProps }, ref) => {
+    return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: _jsx("div", { className: styles.interactiveChild, children: _jsx(Checkbox, { noContainer: true, checked: checked, disabled: disabled, label: label, onChange: (next, _e) => onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(next) }) }) }));
+});
+MenuCheckItem.displayName = 'Menu.CheckItem';
+const MenuRadioItem = React.forwardRef(({ name, value, checked, disabled, label, onValueChange, className, ...liProps }, ref) => {
+    return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: _jsx("div", { className: styles.interactiveChild, children: _jsx(RadioButton, { noContainer: true, name: name, value: value, checked: checked, disabled: disabled, label: label, onChange: (v, _e) => onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(v) }) }) }));
+});
+MenuRadioItem.displayName = 'Menu.RadioItem';
+const MenuSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx("li", { ref: ref, role: "separator", className: [styles.separator, className].filter(Boolean).join(' '), ...props })));
+MenuSeparator.displayName = 'Menu.Separator';
+export const Menu = Object.assign(MenuBase, {
+    Item: MenuItem,
+    CheckItem: MenuCheckItem,
+    RadioItem: MenuRadioItem,
+    Separator: MenuSeparator,
+});