@dbcdk/react-components 0.0.12 → 0.0.14

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

@@ -68,24 +68,29 @@ function isFilterActive(value) {
         return value.trim().length > 0;
     return value != null;
 }
+const VALUELESS_OPERATORS = ['isEmpty', 'isNotEmpty'];
 export function FilterField({ field, control, operator, value, onChange, operators, options = [], single = true, size = 'md', label, placeholder = 'Type value…', disabled, 'data-cy': dataCy, ...inputProps }) {
     var _a, _b;
-    const [selectedOperator, setSelectedOperator] = useState(operator);
     const ops = useMemo(() => operators !== null && operators !== void 0 ? operators : DEFAULT_TEXT_OPERATORS, [operators]);
+    // internal operator state (source of truth for UI)
+    const [selectedOperator, setSelectedOperator] = useState(operator);
+    // "active" based on value only (as requested)
     const active = isFilterActive(value);
-    // Local state ONLY for input control (to avoid URL->props lag)
-    const [localValue, setLocalValue] = useState((_a = value) !== null && _a !== void 0 ? _a : '');
-    const debounceRef = useRef(null);
-    const isTypingRef = useRef(false);
+    // Overwrite internal operator if parent sends a new one
     useEffect(() => {
         if (ops.includes(operator)) {
             setSelectedOperator(operator);
         }
     }, [operator, ops]);
+    // Local state ONLY for input control (to avoid URL->props lag)
+    const [localValue, setLocalValue] = useState((_a = value) !== null && _a !== void 0 ? _a : '');
+    const debounceRef = useRef(null);
+    const isTypingRef = useRef(false);
     const emit = (next) => {
         var _a, _b;
         const nextOperator = (_a = next.operator) !== null && _a !== void 0 ? _a : selectedOperator;
         const nextValue = (_b = next.value) !== null && _b !== void 0 ? _b : value;
+        // Always keep internal operator in sync when user picks one
         if (next.operator)
             setSelectedOperator(nextOperator);
         onChange({
@@ -94,6 +99,16 @@ export function FilterField({ field, control, operator, value, onChange, operato
             value: nextValue,
         });
     };
+    const handleOperatorChange = (op) => {
+        setSelectedOperator(op);
+        if (!active && !VALUELESS_OPERATORS.includes(op))
+            return;
+        if (VALUELESS_OPERATORS.includes(op)) {
+            emit({ operator: op, value: null });
+            return;
+        }
+        emit({ operator: op });
+    };
     const scheduleEmitValue = (nextVal) => {
         if (debounceRef.current)
             clearTimeout(debounceRef.current);
@@ -122,7 +137,7 @@ export function FilterField({ field, control, operator, value, onChange, operato
                 clearTimeout(debounceRef.current);
         };
     }, []);
-    return (_jsxs("div", { ...(dataCy ? { 'data-cy': dataCy } : {}), className: `${styles.filterField} ${styles[size]} ${active ? styles.active : ''}`, children: [label ? _jsx("span", { className: `${styles.label} ${styles[size]}`, children: label }) : null, _jsx(OperatorDropdown, { value: selectedOperator, onChange: op => emit({ operator: op }), operators: ops, size: size, disabled: disabled }), _jsx("div", { className: `${control === 'input' ? 'dbc-flex dbc-flex-grow' : styles.valueWrapper}`, children: control === 'input' ? (_jsx(Input, { ...inputProps, value: localValue, onChange: e => {
+    return (_jsxs("div", { ...(dataCy ? { 'data-cy': dataCy } : {}), className: `${styles.filterField} ${styles[size]} ${active ? styles.active : ''}`, children: [label ? _jsx("span", { className: `${styles.label} ${styles[size]}`, children: label }) : null, _jsx(OperatorDropdown, { value: selectedOperator, onChange: handleOperatorChange, operators: ops, size: size, disabled: disabled }), _jsx("div", { className: `${control === 'input' ? 'dbc-flex dbc-flex-grow' : styles.valueWrapper}`, children: control === 'input' ? (_jsx(Input, { ...inputProps, value: localValue, onChange: e => {
                         const next = e.currentTarget.value;
                         isTypingRef.current = true;
                         setLocalValue(next);

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

@@ -28,16 +28,16 @@
 }
 
 .filterField.sm {
-  block-size: calc(var(--component-size-sm) + var(--density));
+  block-size: var(--component-size-sm);
 }
 .filterField.md {
-  block-size: calc(var(--component-size-md) + var(--density));
+  block-size: var(--component-size-md);
 }
 
 .filterField .label {
   display: inline-flex;
   align-items: center;
-  padding-block: calc(var(--spacing-2xs) + var(--density));
+  padding-block: var(--spacing-2xs);
   padding-inline: var(--spacing-sm);
   font-size: var(--font-size-sm);
   color: var(--color-fg-muted);
@@ -51,7 +51,7 @@
   align-items: center;
   justify-content: center;
   height: 100%;
-  padding-block: calc(var(--spacing-2xs) + var(--density));
+  padding-block: var(--spacing-2xs);
   padding-inline: var(--spacing-sm);
   background: var(--opac-bg-default);
   color: var(--color-fg-default);
@@ -223,7 +223,7 @@
   border-bottom-left-radius: 0;
 
   /* a tiny bit more comfort */
-  padding-block: calc(var(--spacing-3xs) + var(--density));
+  padding-block: var(--spacing-3xs);
 }
 
 .filterField button {

package/dist/components/forms/form-select/FormSelect.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { InputContainer } from '../input-container/InputContainer';
+import { MultiselectOption } from '../multi-select/MultiSelect';
+type InputContainerProps = React.ComponentProps<typeof InputContainer>;
+export type FormSelectProps<T> = Omit<InputContainerProps, 'children' | 'htmlFor' | 'tooltip' | 'tooltipPlacement'> & {
+    id?: string;
+    name?: string;
+    options: MultiselectOption<T>[];
+    selectedValue: T | null;
+    onChange: (value: T) => void;
+    placeholder?: string;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'outlined' | 'filled' | 'standalone';
+    onClear?: () => void;
+    /**
+     * Needed if T is an object and you want to use native select.
+     * Native <select> requires string values; we serialize using value[datakey].
+     */
+    datakey?: string;
+    dataCy?: string;
+    disabled?: boolean;
+    tooltip?: React.ReactNode;
+    tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
+    includePlaceholderOption?: boolean;
+    /**
+     * Default false. If true, we allow clearing even when required=true:
+     * - placeholder becomes selectable
+     * - clear button is shown
+     *
+     * This is "odd" UX in many forms, so it's opt-in.
+     */
+    allowClearWhenRequired?: boolean;
+};
+export declare function FormSelect<T extends string | number | Record<string, any>>({ label, error, helpText, orientation, labelWidth, fullWidth, required, tooltip, tooltipPlacement, modified, id, name, options, selectedValue, onChange, placeholder, size, variant, onClear, datakey, dataCy, disabled, includePlaceholderOption, allowClearWhenRequired, }: FormSelectProps<T>): React.ReactNode;
+export {};

package/dist/components/forms/form-select/FormSelect.js

@@ -0,0 +1,86 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, X } from 'lucide-react';
+import * as React from 'react';
+import { useTooltipTrigger } from '../../../components/overlay/tooltip/useTooltipTrigger';
+import styles from './FormSelect.module.css';
+import { InputContainer } from '../input-container/InputContainer';
+function isEqualValue(a, b, datakey) {
+    if (a === b)
+        return true;
+    if (!a || !b)
+        return false;
+    if (typeof a === 'object' && typeof b === 'object' && datakey) {
+        return a[datakey] === b[datakey];
+    }
+    return false;
+}
+function serializeValue(value, datakey) {
+    if (typeof value === 'string' || typeof value === 'number')
+        return String(value);
+    if (datakey && value && typeof value === 'object') {
+        const v = value[datakey];
+        return v == null ? '' : String(v);
+    }
+    throw new Error('FormSelect: option value is an object but no `datakey` was provided. Native select requires string/number values.');
+}
+function findSelectedOption(options, selectedValue, datakey) {
+    return options.find(o => isEqualValue(o.value, selectedValue, datakey));
+}
+export function FormSelect({ 
+// InputContainer props
+label, error, helpText, orientation = 'vertical', labelWidth = '160px', fullWidth = true, required, tooltip, tooltipPlacement = 'right', modified = false, 
+// FormSelect props
+id, name, options, selectedValue, onChange, placeholder = 'Vælg', size = 'md', variant = 'outlined', onClear, datakey, dataCy, disabled, includePlaceholderOption = true, allowClearWhenRequired = false, }) {
+    const generatedId = React.useId();
+    const controlId = id !== null && id !== void 0 ? id : `select-${generatedId}`;
+    const describedById = `${controlId}-desc`;
+    const selected = React.useMemo(() => findSelectedOption(options, selectedValue, datakey), [options, selectedValue, datakey]);
+    const tooltipEnabled = Boolean(tooltip);
+    const { triggerProps, id: tooltipId } = useTooltipTrigger({
+        content: tooltipEnabled ? tooltip : null,
+        placement: tooltipPlacement,
+        offset: 8,
+    });
+    const describedBy = (() => {
+        const ids = [];
+        if (error || helpText)
+            ids.push(describedById);
+        if (tooltipEnabled)
+            ids.push(tooltipId);
+        return ids.length ? ids.join(' ') : undefined;
+    })();
+    const nativeValue = React.useMemo(() => {
+        if (selected && selected.value != null)
+            return serializeValue(selected.value, datakey);
+        return '';
+    }, [selected, datakey]);
+    const canClear = Boolean(onClear) && !disabled && (allowClearWhenRequired || !required);
+    const showClear = canClear && Boolean(selected);
+    const placeholderDisabled = Boolean(required) && !allowClearWhenRequired;
+    const handleNativeChange = e => {
+        const raw = e.target.value;
+        if (raw === '') {
+            // Clear only if consumer provided onClear
+            onClear === null || onClear === void 0 ? void 0 : onClear();
+            return;
+        }
+        const opt = options.find(o => serializeValue(o.value, datakey) === raw);
+        if (opt)
+            onChange(opt.value);
+    };
+    return (_jsxs(InputContainer, { label: label, htmlFor: controlId, fullWidth: fullWidth, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, required: required, modified: modified, children: [_jsxs("div", { className: [
+                    styles.container,
+                    fullWidth ? styles.fullWidth : '',
+                    canClear ? styles.withButton : '',
+                ]
+                    .filter(Boolean)
+                    .join(' '), children: [_jsxs("div", { className: styles.field, children: [_jsxs("select", { ...(tooltipEnabled ? triggerProps : {}), id: controlId, name: name, className: [styles.input, styles[size], styles[variant]].filter(Boolean).join(' '), value: nativeValue, onChange: handleNativeChange, disabled: disabled, "aria-invalid": Boolean(error) || undefined, "aria-describedby": describedBy, "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : 'formselect', "data-forminput": true, children: [includePlaceholderOption && (_jsx("option", { value: "", disabled: placeholderDisabled, children: placeholder })), options.map(opt => {
+                                        const v = serializeValue(opt.value, datakey);
+                                        return (_jsx("option", { value: v, children: opt.label }, v));
+                                    })] }), _jsx("span", { className: styles.chevron, "aria-hidden": "true", children: _jsx(ChevronDown, { size: 20 }) })] }), canClear && (_jsx("button", { type: "button", className: styles.trailingButton, onClick: e => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            onClear === null || onClear === void 0 ? void 0 : onClear();
+                        }, "aria-label": "Ryd valg", disabled: !showClear, "data-cy": dataCy ? `${dataCy}-clear` : 'formselect-clear', children: _jsx(X, { size: 18, "aria-hidden": "true" }) }))] }), (error || helpText) && (_jsx("span", { id: describedById, style: { display: 'none' }, children: error !== null && error !== void 0 ? error : helpText }))] }));
+}

package/dist/components/forms/form-select/FormSelect.module.css

@@ -0,0 +1,236 @@
+/* FormSelect.module.css */
+
+/* =========================================
+   Root container (select + optional clear)
+   ========================================= */
+
+.container {
+  display: inline-flex;
+  align-items: stretch;
+  flex-grow: 1;
+  gap: 0;
+
+  inline-size: var(--input-width, auto);
+  min-inline-size: var(--input-min-width, 0);
+  max-inline-size: var(--input-max-width, none);
+
+  position: relative;
+  border-radius: var(--border-radius-default);
+}
+
+/* Full width variant */
+.fullWidth {
+  display: flex;
+  inline-size: 100%;
+  min-inline-size: 0;
+}
+
+/* =========================================
+   Focus ring (GROUP LEVEL)
+   ========================================= */
+
+.container:focus-within {
+  box-shadow: 0 0 0 2px var(--color-border-selected);
+  z-index: 1;
+}
+
+/* IMPORTANT:
+   When focused, do NOT also turn the select's border blue,
+   otherwise you get the vertical seam line next to the button. */
+.container:focus-within .input {
+  border-color: var(--color-border-default);
+}
+.container:focus-within .trailingButton {
+  border-color: var(--color-border-default);
+}
+
+/* =========================================
+   Field wrapper (native select + chevron)
+   ========================================= */
+
+.field {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  color: var(--color-fg-default);
+}
+
+/* =========================================
+   Native select styling
+   ========================================= */
+
+.input {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  inline-size: 100%;
+  max-inline-size: 100%;
+
+  background: var(--color-bg-surface);
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
+  box-sizing: border-box;
+  text-overflow: ellipsis;
+
+  border: var(--border-width-thin) solid var(--color-border-default);
+  border-radius: var(--border-radius-default);
+
+  padding-inline: var(--spacing-sm);
+  padding-block: var(--spacing-xs);
+
+  /* Reserve space for chevron */
+  padding-inline-end: calc(var(--spacing-lg) + 28px);
+
+  transition:
+    background-color var(--transition-fast) var(--ease-standard),
+    border-color var(--transition-fast) var(--ease-standard),
+    box-shadow var(--transition-fast) var(--ease-standard);
+}
+
+/* Disabled select */
+.input:disabled {
+  background-color: var(--color-disabled-bg);
+  color: var(--color-disabled-fg);
+  cursor: not-allowed;
+}
+
+/* Hover state */
+.input:hover:not(:disabled) {
+  border-color: var(--color-border-strong);
+}
+
+/* Remove default focus ring (we use group-level ring) */
+.input:focus-visible {
+  outline: none;
+  /* DO NOT set border-color here */
+}
+
+/* =========================================
+   Variants
+   ========================================= */
+
+.filled {
+  background-color: var(--color-bg-surface);
+}
+
+.standalone {
+  border-radius: var(--border-radius-rounded);
+  background-color: var(--color-bg-surface);
+  box-shadow: var(--shadow-xs), var(--shadow-md);
+}
+
+.outlined {
+  background-color: transparent;
+}
+
+/* =========================================
+   Sizes
+   ========================================= */
+
+.sm {
+  block-size: var(--component-size-sm);
+  font-size: var(--font-size-sm);
+}
+
+.md {
+  block-size: var(--component-size-md);
+  font-size: var(--font-size-sm);
+}
+
+.lg {
+  block-size: var(--component-size-lg);
+  font-size: var(--font-size-lg);
+}
+
+/* =========================================
+   Chevron (decorative only)
+   ========================================= */
+
+.chevron {
+  position: absolute;
+  inset-inline-end: var(--spacing-sm);
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  color: var(--color-fg-subtle);
+}
+
+.chevron svg {
+  inline-size: 20px;
+  block-size: 20px;
+}
+
+/* =========================================
+   Clear button integration
+   ========================================= */
+
+/* Remove right radius from select when button exists */
+.withButton .input {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+
+  /* Prevent double border seam; the button provides the right side */
+  border-right-color: transparent;
+}
+
+/* Trailing clear button */
+.trailingButton {
+  position: relative;
+  z-index: 2;
+  flex: 0 0 auto;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  padding-inline: var(--spacing-sm);
+
+  border: var(--border-width-thin) solid var(--color-border-default);
+
+  /* Seam join: don't draw left border; select covers it */
+  border-left-color: transparent;
+  margin-left: calc(-1 * var(--border-width-thin));
+
+  border-top-right-radius: var(--border-radius-default);
+  border-bottom-right-radius: var(--border-radius-default);
+
+  background: var(--color-bg-surface);
+  cursor: pointer;
+
+  transition:
+    background-color var(--transition-fast) var(--ease-standard),
+    border-color var(--transition-fast) var(--ease-standard),
+    box-shadow var(--transition-fast) var(--ease-standard);
+}
+
+/* Hover state */
+.trailingButton:hover:not(:disabled) {
+  border-color: var(--color-border-strong);
+  background-color: var(--color-bg-surface-hover, var(--color-bg-surface));
+}
+
+/* Remove individual focus ring (group handles it) */
+.trailingButton:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
+/* Disabled clear button:
+   keep border/background stable; dim only icon */
+.trailingButton:disabled {
+  cursor: default;
+  background: var(--color-bg-surface);
+}
+
+.trailingButton:disabled svg {
+  opacity: 0.4;
+}

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,9 +18,6 @@ function mergeRefs(...refs) {
         }
     };
 }
-/**
- * Explicit exported type annotation is required with --isolatedDeclarations.
- */
 export const Input = forwardRef(function Input({ 
 // InputContainer props
 label, error, helpText, orientation = 'vertical', labelWidth = '160px', fullWidth = false, required, tooltip, tooltipPlacement = 'right', modified, 

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

@@ -43,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),
@@ -67,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 */
@@ -100,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/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();