@digdir/designsystemet-react 1.11.1 → 1.12.0

package/dist/esm/components/dialog/dialog.js

@@ -2,8 +2,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
-import { forwardRef, useContext, useRef, useEffect } from 'react';
+import { forwardRef, useContext, useRef, useId, useEffect } from 'react';
 import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
+import '@digdir/designsystemet-web';
 import { Button } from '../button/button.js';
 import { Context } from './dialog-trigger-context.js';
 
@@ -25,69 +26,38 @@ import { Context } from './dialog-trigger-context.js';
  *
  * ...
  *
- * <Button onClick={() => dialogRef.current?.showModal()}>Open Dialog</Button>
- * <Dialog ref={dialogRef}>
+ * <Button command="show-modal" commandfor="my-dialog">Open Dialog</Button>
+ * <Dialog id="my-dialog">
  *   Content
  * </Dialog>
  */
-const Dialog = forwardRef(function Dialog({ asChild, children, className, placement = 'center', closeButton = 'Lukk dialogvindu', closedby = 'closerequest', modal = true, onClose, open, ...rest }, ref) {
-    const contextRef = useContext(Context);
+const Dialog = forwardRef(function Dialog({ asChild, children, className, closeButton = 'Lukk dialogvindu', id, modal = true, onAnimationEnd, onClick, onClose, open, placement = 'center', ...rest }, ref) {
+    const { setContext } = useContext(Context);
     const dialogRef = useRef(null); // This local ref is used to make sure the dialog works without a DialogTriggerContext
     const Component = asChild ? Slot : 'dialog';
-    const mergedRefs = useMergeRefs([contextRef, ref, dialogRef]);
+    const mergedRefs = useMergeRefs([ref, dialogRef]);
     const showProp = modal ? 'showModal' : 'show';
-    useEffect(() => dialogRef.current?.[open ? showProp : 'close'](), [open]); // Toggle open based on prop
-    useEffect(() => {
-        const dialog = dialogRef.current;
-        const handleClosedby = (event) => {
-            if (event.defaultPrevented)
-                return; // Skip if default action is prevented
-            const { clientY: y, clientX: x, target } = event;
-            /* Check if clicked element or its closest parent has data-command='close' */
-            if (target instanceof Element && event.type === 'click') {
-                const closeElement = target.closest('[data-command="close"]');
-                if (closeElement)
-                    return dialog?.close();
+    const autoId = useId();
+    const usedId = id ?? autoId;
+    // Toggle open based on prop
+    useEffect(() => dialogRef.current?.[open ? showProp : 'close'](), [open]);
+    // Store context for DialogTrigger to consume, so it can open the dialog when the trigger is clicked
+    useEffect(() => setContext?.({ id: usedId, modal }), [usedId, modal]);
+    return (jsxs(Component, { className: cl('ds-dialog', className), "data-placement": placement, id: usedId, onClose: (event) => onClose?.(event.nativeEvent), onClick: (event) => {
+            onClick?.(event);
+            const { currentTarget: dialog, target: el, defaultPrevented } = event;
+            const isClose = el?.closest?.('[data-command="close"]');
+            if (!defaultPrevented && isClose) {
+                dialog.close();
+                console.warn('Designsystemet: data-command="close" is deprecated. Use command="close" and commandfor="DIALOG-ID" instead.');
             }
-            // if the browser supports closedBy, we let the browser handle it
-            // see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy
-            if (dialog && 'closedBy' in dialog)
-                return;
-            if (event instanceof KeyboardEvent)
-                return (closedby === 'none' &&
-                    event.key === 'Escape' &&
-                    event.preventDefault()); // Skip ESC-key if closedby="none"
-            if (window.getSelection()?.toString())
-                return; // Fix bug where if you select text spanning two divs it thinks you clicked outside
-            if (dialog && target === dialog && closedby === 'any') {
-                const { top, left, right, bottom } = dialog.getBoundingClientRect();
-                const isInDialog = top <= y && y <= bottom && left <= x && x <= right;
-                if (!isInDialog)
-                    dialog?.close(); // Both <dialog> and ::backdrop is considered same event.target
-            }
-        };
-        const handleAutoFocus = () => {
-            const autofocus = dialog?.querySelector('[autofocus]');
+        }, onAnimationEnd: (event) => {
+            const { currentTarget: dialog } = event;
+            const autofocus = dialog.querySelector('[autofocus]');
             if (document.activeElement !== autofocus)
-                autofocus?.focus();
-        };
-        dialog?.addEventListener('animationend', handleAutoFocus);
-        dialog?.addEventListener('click', handleClosedby);
-        dialog?.addEventListener('keydown', handleClosedby);
-        return () => {
-            dialog?.removeEventListener('animationend', handleAutoFocus);
-            dialog?.removeEventListener('click', handleClosedby);
-            dialog?.removeEventListener('keydown', handleClosedby);
-        };
-    }, [closedby]);
-    /* handle closing */
-    useEffect(() => {
-        const handleClose = (event) => onClose?.(event);
-        const currentRef = dialogRef.current;
-        currentRef?.addEventListener('close', handleClose);
-        return () => currentRef?.removeEventListener('close', handleClose);
-    }, [onClose]);
-    return (jsxs(Component, { className: cl('ds-dialog', className), ref: mergedRefs, "data-placement": placement, "data-modal": modal, closedby: closedby, ...rest, children: [closeButton !== false && (jsx(Button, { "aria-label": closeButton, "data-color": 'neutral', icon: true, variant: 'tertiary', "data-command": 'close' })), children] }));
+                autofocus?.focus(); // Handle autofocus on open
+            onAnimationEnd?.(event);
+        }, ref: mergedRefs, ...rest, children: [closeButton !== false && (jsx(Button, { "aria-label": closeButton, "data-color": 'neutral', icon: true, variant: 'tertiary', command: 'close', commandfor: id ?? autoId })), children] }));
 });
 
 export { Dialog };

package/dist/esm/components/error-summary/error-summary-heading.js

@@ -1,8 +1,7 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext, useEffect } from 'react';
+import { forwardRef } from 'react';
 import { Heading } from '../heading/heading.js';
-import { ErrorSummaryContext } from './error-summary.js';
 
 /**
  * ErrorSummary heading component, used to display a heading for the error summary.
@@ -12,13 +11,8 @@ import { ErrorSummaryContext } from './error-summary.js';
  *   <ErrorSummaryHeading>Heading</ErrorSummaryHeading>
  * </ErrorSummary>
  */
-const ErrorSummaryHeading = forwardRef(function ErrorSummaryHeading({ className, id, ...rest }, ref) {
-    const { headingId, setHeadingId } = useContext(ErrorSummaryContext);
-    useEffect(() => {
-        if (id && headingId !== id)
-            setHeadingId(id);
-    }, [headingId, id, setHeadingId]);
-    return jsx(Heading, { id: headingId, ref: ref, ...rest });
+const ErrorSummaryHeading = forwardRef(function ErrorSummaryHeading(rest, ref) {
+    return jsx(Heading, { ref: ref, suppressHydrationWarning: true, ...rest }); // Suppress hydration warning since we will get an ID from <ds-error-summary>
 });
 
 export { ErrorSummaryHeading };

package/dist/esm/components/error-summary/error-summary.js

@@ -2,12 +2,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
-import { createContext, forwardRef, useId, useState } from 'react';
+import { forwardRef } from 'react';
 
-const ErrorSummaryContext = createContext({
-    headingId: 'heading',
-    setHeadingId: () => { },
-});
 /**
  * ErrorSummary component, used to display a list of errors.
  *
@@ -25,10 +21,10 @@ const ErrorSummaryContext = createContext({
  * </ErrorSummary>
  */
 const ErrorSummary = forwardRef(function ErrorSummary({ asChild, className, ...rest }, ref) {
-    const randomId = useId();
-    const [headingId, setHeadingId] = useState(randomId);
-    const Component = asChild ? Slot : 'div';
-    return (jsx(ErrorSummaryContext.Provider, { value: { headingId, setHeadingId }, children: jsx(Component, { tabIndex: -1, "aria-labelledby": headingId, className: cl('ds-error-summary', className), ref: ref, ...rest }) }));
+    const Component = asChild ? Slot : 'ds-error-summary';
+    return (jsx(Component, { ...(asChild
+            ? { className: cl('ds-error-summary', className) }
+            : { class: cl('ds-error-summary', className) }), ref: ref, suppressHydrationWarning: true, ...rest }));
 });
 
-export { ErrorSummary, ErrorSummaryContext };
+export { ErrorSummary };

package/dist/esm/components/field/field-counter.js

@@ -1,14 +1,9 @@
 'use client';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, useRef, useEffect } from 'react';
-import { useDebounceCallback } from '../../utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js';
-import '../../utilities/roving-focus/roving-focus-item.js';
-import '../../utilities/roving-focus/roving-focus-root.js';
-import { Paragraph } from '../paragraph/paragraph.js';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { warn } from '../../utilities/index.js';
 import { ValidationMessage } from '../validation-message/validation-message.js';
-import { isInputLike } from './field-observer.js';
 
-const label = (text, count) => text.replace('%d', Math.abs(count).toString());
 /**
  * FieldCounter component, used to display a counter for a form field.
  *
@@ -18,41 +13,11 @@ const label = (text, count) => text.replace('%d', Math.abs(count).toString());
  *   <Field.Counter limit={100} under='%d tegn igjen' over='%d tegn for mye' />
  * </Field>
  */
-const FieldCounter = forwardRef(function FieldCounter({ limit, under = '%d tegn igjen', over = '%d tegn for mye', hint = 'Maks %d tegn tillatt.', ...rest }, ref) {
-    const [count, setCount] = useState(0);
-    const [liveRegionText, setLiveRegionText] = useState('');
-    const fieldInputRef = useRef(null);
-    const counterRef = useRef(null);
-    const hasExceededLimit = count > limit;
-    const remainder = limit - count;
-    const debouncedSetLiveRegionText = useDebounceCallback((text) => setLiveRegionText(text), 1200);
-    // Listen to native input events (user typing) to update the counter in real time
-    useEffect(() => {
-        const field = counterRef.current?.closest('.ds-field');
-        const input = Array.from(field?.getElementsByTagName('*') || []).find(isInputLike);
-        const onInput = ({ target }) => {
-            if (isInputLike(target))
-                setCount(target.value.length);
-        };
-        if (input)
-            onInput({ target: input }); // Initial setup
-        fieldInputRef.current = input;
-        field?.addEventListener('input', onInput);
-        return () => field?.removeEventListener('input', onInput);
-    }, []);
-    /* React does not dispatch a native input event when the value prop changes externally.
-    Since the parent re-renders this component when value changes, we can sync on render. */
-    useEffect(() => {
-        if (fieldInputRef.current) {
-            const valueLength = fieldInputRef.current.value.length;
-            setCount((prev) => (prev === valueLength ? prev : valueLength));
-        }
-    });
-    // Update live region text when count or limit changes
-    useEffect(() => {
-        debouncedSetLiveRegionText(label(hasExceededLimit ? over : under, remainder));
-    }, [count, limit, over, under, hasExceededLimit, remainder]);
-    return (jsxs(Fragment, { children: [jsx("div", { className: 'ds-sr-only', "aria-live": 'polite', ref: counterRef, children: liveRegionText }), hasExceededLimit ? (jsx(ValidationMessage, { ref: ref, ...rest, "aria-hidden": 'true', "data-field": null, children: label(over, remainder) })) : (jsx(Paragraph, { ref: ref, ...rest, "aria-hidden": 'true', children: label(under, remainder) })), jsx("div", { className: 'ds-sr-only', "aria-hidden": 'true', "data-field": 'description', children: label(hint, limit) })] }));
+const FieldCounter = forwardRef(function FieldCounter({ limit, under, over, hint, ...rest }, _ref) {
+    if (hint)
+        warn('hint attribute is deprecated on Field.Counter');
+    return (jsx(ValidationMessage, { suppressHydrationWarning // Since <ds-field> adds attributes
+        : true, "data-field": 'counter', "data-limit": limit, "data-under": under, "data-over": over, ...rest }));
 });
 
 export { FieldCounter };

package/dist/esm/components/field/field-description.js

@@ -9,7 +9,8 @@ import { forwardRef } from 'react';
  * <FieldDescription>Additional information</FieldDescription>
  */
 const FieldDescription = forwardRef(function FieldDescription(rest, ref) {
-    return jsx("div", { "data-field": 'description', ref: ref, ...rest });
+    return (jsx("div", { suppressHydrationWarning // Since <ds-field> adds attributes
+        : true, "data-field": 'description', ref: ref, ...rest }));
 });
 
 export { FieldDescription };

package/dist/esm/components/field/field.js

@@ -1,10 +1,10 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import '@digdir/designsystemet-web';
 import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
-import { forwardRef, useRef, useEffect } from 'react';
+import { forwardRef, useRef } from 'react';
 import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
-import { fieldObserver } from './field-observer.js';
 
 /**
  * Field component, used to wrap a form field.
@@ -18,11 +18,13 @@ import { fieldObserver } from './field-observer.js';
  * </Field>
  */
 const Field = forwardRef(function Field({ className, position, asChild, ...rest }, ref) {
-    const Component = asChild ? Slot : 'div';
+    const Component = asChild ? Slot : 'ds-field';
     const fieldRef = useRef(null);
     const mergedRefs = useMergeRefs([fieldRef, ref]);
-    useEffect(() => fieldObserver(fieldRef.current), []);
-    return (jsx(Component, { className: cl('ds-field', className), "data-position": position, ref: mergedRefs, ...rest }));
+    return (jsx(Component, { ...(asChild
+            ? { className: cl('ds-field', className) }
+            : { class: cl('ds-field', className) }), suppressHydrationWarning // Since <ds-field> adds attributes
+        : true, "data-position": position, ref: mergedRefs, ...rest }));
 });
 
 export { Field };

package/dist/esm/components/label/label.js

@@ -12,7 +12,8 @@ import { forwardRef } from 'react';
  */
 const Label = forwardRef(function Label({ className, weight = 'medium', asChild, ...rest }, ref) {
     const Component = asChild ? Slot : 'label';
-    return (jsx(Component, { ref: ref, className: cl('ds-label', className), "data-weight": weight, ...rest }));
+    return (jsx(Component, { ref: ref, className: cl('ds-label', className), suppressHydrationWarning // Since <ds-field> will add for attribute dynamically
+        : true, "data-weight": weight, ...rest }));
 });
 
 export { Label };

package/dist/esm/components/pagination/pagination-button.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
-import { Button } from '../button/button.js';
 
 /**
  * PaginationButton component, use within a Pagination.Item.
@@ -11,8 +11,10 @@ import { Button } from '../button/button.js';
  *   <PaginationButton aria-label='Forrige side'>Forrige</PaginationButton>
  * </PaginationItem>
  */
-const PaginationButton = forwardRef(function PaginationButton(rest, ref) {
-    return jsx(Button, { ref: ref, ...rest });
+const PaginationButton = forwardRef(function PaginationButton({ asChild, ...rest }, ref) {
+    const Component = asChild ? Slot : 'button';
+    return (jsx(Component, { className: 'ds-button', "data-variant": 'tertiary', suppressHydrationWarning // Since <ds-pagination> adds attributes
+        : true, ref: ref, ...rest }));
 });
 
 export { PaginationButton };

package/dist/esm/components/pagination/pagination.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import '@digdir/designsystemet-web';
 import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
@@ -22,9 +23,12 @@ import { forwardRef } from 'react';
  *   </Pagination.List>
  * </Pagination>
  */
-const Pagination = forwardRef(function Pagination({ 'aria-label': ariaLabel = 'Sidenavigering', asChild, className, ...rest }, ref) {
-    const Component = asChild ? Slot : 'nav';
-    return (jsx(Component, { "aria-label": ariaLabel, className: cl('ds-pagination', className), ref: ref, ...rest }));
+const Pagination = forwardRef(function Pagination({ asChild, className, ...rest }, ref) {
+    const Component = asChild ? Slot : 'ds-pagination';
+    return (jsx(Component, { ...(asChild
+            ? { className: cl('ds-pagination', className) }
+            : { class: cl('ds-pagination', className) }), suppressHydrationWarning // Since ds-pagination will change aria-label and role after hydration
+        : true, ref: ref, ...rest }));
 });
 
 export { Pagination };

package/dist/esm/components/popover/popover-trigger.js

@@ -26,18 +26,14 @@ import { Context } from './popover-trigger-context.js';
  *   </Popover>
  * </PopoverTriggerContext>
  */
-const PopoverTrigger = forwardRef(function PopoverTrigger({ id, inline, asChild, ...rest }, ref) {
+const PopoverTrigger = forwardRef(function PopoverTrigger({ id, inline, asChild, popovertarget, popoverTarget, ...rest }, ref) {
     const { popoverId } = useContext(Context);
     const Component = asChild ? Slot : inline ? 'button' : Button;
-    const popoverProps = Object.assign({
-        [version.startsWith('19') ? 'popoverTarget' : 'popovertarget']: popoverId,
-        ...(inline
-            ? {
-                'data-popover': 'inline',
-            }
-            : {}),
-    }, rest);
-    return jsx(Component, { ref: ref, ...popoverProps });
+    const popoverVal = popoverTarget ?? popovertarget ?? popoverId;
+    const popoverKey = version.startsWith('19')
+        ? 'popoverTarget'
+        : 'popovertarget';
+    return (jsx(Component, { ref: ref, "data-popover": inline ? 'inline' : undefined, [popoverKey]: popoverVal, ...rest }));
 });
 
 export { PopoverTrigger };

package/dist/esm/components/popover/popover.js

@@ -1,9 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { autoUpdate, computePosition, offset, flip, shift } from '@floating-ui/dom';
 import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef, useRef, useContext, useState, useEffect } from 'react';
+import '@digdir/designsystemet-web';
 import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
 import { Context } from './popover-trigger-context.js';
 
@@ -34,13 +34,13 @@ const Popover = forwardRef(function Popover({ id, className, onClose, onOpen, op
     // NOTE: This code is purely to add React controlled component ability to Popover API
     useEffect(() => {
         const popover = popoverRef.current;
+        const trigger = `[popovertarget="${popover?.id}"],[commandfor="${popover?.id}"]`;
         const handleClick = (event) => {
             const el = event.target;
-            const isTrigger = el?.closest?.(`[popovertarget="${popover?.id}"]`);
+            const isTrigger = el?.closest?.(trigger);
             const isOutside = !isTrigger && !popover?.contains(el);
-            if (isTrigger) {
+            if (isTrigger)
                 event.preventDefault(); // Prevent native Popover API
-            }
             if (controlledOpen && (isTrigger || isOutside)) {
                 setInternalOpen(false);
                 onClose?.();
@@ -53,11 +53,20 @@ const Popover = forwardRef(function Popover({ id, className, onClose, onOpen, op
         const handleKeydown = (event) => {
             if (event.key !== 'Escape' || !controlledOpen)
                 return;
+            const isOpen = popoverRef.current?.matches(':popover-open') ||
+                popoverRef.current?.classList.contains(':popover-open'); // Polyfill support
+            if (!isOpen)
+                return;
             event.preventDefault(); // Prevent closing fullscreen in Safari
+            document.querySelector(trigger)?.focus?.(); // Move focus back to trigger since `popoover="manual"` doesn't do this
             setInternalOpen(false);
             onClose?.();
         };
         popover?.togglePopover?.(controlledOpen);
+        if (controlledOpen) {
+            const options = { detail: document.querySelector(trigger) };
+            popover?.dispatchEvent(new CustomEvent('ds-toggle-source', options)); // Since togglePopover({ source }) is not supported in all browsers yet
+        }
         document.addEventListener('click', handleClick, true); // Use capture to execute before React event API
         document.addEventListener('keydown', handleKeydown);
         return () => {
@@ -65,69 +74,13 @@ const Popover = forwardRef(function Popover({ id, className, onClose, onOpen, op
             document.removeEventListener('keydown', handleKeydown);
         };
     }, [controlledOpen]);
-    // Position with floating-ui
-    useEffect(() => {
-        const popover = popoverRef.current;
-        const trigger = document.querySelector(`[popovertarget="${popover?.id}"]`);
-        if (popover && trigger && controlledOpen)
-            return autoUpdate(trigger, popover, () => {
-                computePosition(trigger, popover, {
-                    placement,
-                    strategy: 'fixed',
-                    middleware: [
-                        offset((data) => {
-                            // get pseudo element arrow size
-                            const styles = getComputedStyle(data.elements.floating, '::before');
-                            return parseFloat(styles.height);
-                        }),
-                        ...(autoPlacement
-                            ? [flip({ fallbackAxisSideDirection: 'start' }), shift()]
-                            : []),
-                        arrowPseudoElement,
-                    ],
-                }).then(({ x, y }) => {
-                    popover.style.translate = `${Math.round(x)}px ${Math.round(y)}px`;
-                });
-            });
-    }, [controlledOpen, placement, id, autoPlacement]);
     // Update context with id
     useEffect(() => {
         if (id)
             setPopoverId?.(id);
     }, [id]);
-    return (jsx(Component, { className: cl('ds-popover', className), id: id || popoverId, popover: 'manual', "data-variant": variant, ref: mergedRefs, ...rest }));
+    return (jsx(Component, { className: cl('ds-popover', className), id: id || popoverId, popover: 'manual', "data-placement": placement, "data-variant": variant, ref: mergedRefs, suppressHydrationWarning // Since _ds-floating adds attributes
+        : true, ...rest }));
 });
-const arrowPseudoElement = {
-    name: 'ArrowPseudoElement',
-    fn(data) {
-        const { elements, rects, placement } = data;
-        let arrowX = `${Math.round(rects.reference.width / 2 + rects.reference.x - data.x)}px`;
-        let arrowY = `${Math.round(rects.reference.height / 2 + rects.reference.y - data.y)}px`;
-        if (rects.reference.width > rects.floating.width) {
-            arrowX = `${Math.round(rects.floating.width / 2)}px`;
-        }
-        if (rects.reference.height > rects.floating.height) {
-            arrowY = `${Math.round(rects.floating.height / 2)}px`;
-        }
-        switch (placement.split('-')[0]) {
-            case 'top':
-                arrowY = '100%';
-                break;
-            case 'right':
-                arrowX = '0';
-                break;
-            case 'bottom':
-                arrowY = '0';
-                break;
-            case 'left':
-                arrowX = '100%';
-                break;
-        }
-        elements.floating.setAttribute('data-placement', placement.split('-')[0]); // We only need top/left/right/bottom
-        elements.floating.style.setProperty('--ds-popover-arrow-x', arrowX);
-        elements.floating.style.setProperty('--ds-popover-arrow-y', arrowY);
-        return data;
-    },
-};
 
 export { Popover };

package/dist/esm/components/select/select.js

@@ -12,18 +12,8 @@ import { forwardRef } from 'react';
  *   <Select.Option value='2'>Option 2</Select.Option>
  * </Select>
  */
-const Select = forwardRef(function Select({ className, onKeyDown, onMouseDown, width, ...rest }, ref) {
-    return (jsx("select", { className: cl('ds-input', className), "data-width": width, ref: ref, onKeyDown: (event) => {
-            if (event.key === 'Tab')
-                return;
-            if (rest.readOnly)
-                event.preventDefault(); // Make readonly work for select
-            onKeyDown?.(event);
-        }, onMouseDown: (event) => {
-            if (rest.readOnly)
-                event.preventDefault(); // Make readonly work for select
-            onMouseDown?.(event);
-        }, ...rest }));
+const Select = forwardRef(function Select({ className, onKeyDown, onMouseDown, width, readOnly, ...rest }, ref) {
+    return (jsx("select", { className: cl('ds-input', className), "aria-readonly": rest['aria-readonly'] ?? readOnly, "data-width": width, ref: ref, ...rest }));
 });
 
 export { Select };

package/dist/esm/components/skeleton/skeleton.js

@@ -4,6 +4,7 @@ import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
+import '@digdir/designsystemet-web';
 import { useSynchronizedAnimation } from '../../utilities/hooks/use-synchronized-animation/use-synchronized-animation.js';
 import '../../utilities/roving-focus/roving-focus-item.js';
 import '../../utilities/roving-focus/roving-focus-root.js';

package/dist/esm/components/spinner/spinner.js

@@ -3,6 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
+import '@digdir/designsystemet-web';
 import { useSynchronizedAnimation } from '../../utilities/hooks/use-synchronized-animation/use-synchronized-animation.js';
 import '../../utilities/roving-focus/roving-focus-item.js';
 import '../../utilities/roving-focus/roving-focus-root.js';

package/dist/esm/components/suggestion/suggestion-clear.js

@@ -1,7 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { Button } from '../button/button.js';
 
 /**
  * Component that provides a clear button for the Suggestion input.
@@ -16,7 +15,10 @@ import { Button } from '../button/button.js';
  * </Suggestion>
  */
 const SuggestionClear = forwardRef(function SuggestionClear({ 'aria-label': label = 'Tøm', ...rest }, ref) {
-    return (jsx(Button, { "aria-label": label, asChild: true, icon: true, hidden: true, ref: ref, variant: 'tertiary', ...rest, children: jsx("del", {}) }));
+    return (
+    //biome-ignore lint/a11y/useAriaPropsSupportedByRole: <del> needs aria-label when u-combobox makes it the clear button
+    jsx("del", { "aria-label": label, hidden: true, ref: ref, suppressHydrationWarning // Since <ds-suggestion> adds attributes
+        : true, ...rest }));
 });
 
 export { SuggestionClear };

package/dist/esm/components/suggestion/suggestion-empty.js

@@ -2,6 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext } from 'react';
 import { SuggestionContext } from './suggestion.js';
+import '@digdir/designsystemet-web';
 
 /**
  * Component that provides an empty Suggestion list.
@@ -15,7 +16,8 @@ import { SuggestionContext } from './suggestion.js';
  */
 const SuggestionEmpty = forwardRef(function SuggestionEmpty(rest, ref) {
     const { isEmpty } = useContext(SuggestionContext);
-    return isEmpty ? jsx("u-option", { "data-empty": true, value: '', ref: ref, ...rest }) : null;
+    return isEmpty ? (jsx("u-option", { "data-empty": true, ref: ref, suppressHydrationWarning // Since <u-option> adds attributes
+        : true, value: '', ...rest })) : null;
 });
 
 export { SuggestionEmpty };

package/dist/esm/components/suggestion/suggestion-input.js

@@ -19,14 +19,15 @@ const SuggestionInput = forwardRef(function SuggestionList({ value, onInput, onC
     const { handleFilter } = useContext(SuggestionContext);
     useEffect(handleFilter, [value]); // Filter if controlled value
     if (onChange)
-        console.warn('SuggestionInput: Avoid using onChange, as Suggestion controls the Input. Use onValueChange on Suggest instead, or onInput if fetching API results');
+        console.warn('SuggestionInput: Avoid using onChange, as Suggestion controls the Input. Use onSelectedChange on Suggestion instead, or onInput if fetching API results');
     if (value)
-        console.warn('SuggestionInput: Avoid using value, as Suggestion controls the Input. Use value on Suggest instead.');
+        console.warn('SuggestionInput: Avoid using value, as Suggestion controls the Input. Use selected on Suggestion instead.');
     return (jsx(Input, { placeholder: '' // We need an empty placeholder for the clear button to be able to show/hide
         , ref: ref, onInput: (event) => {
             onInput?.(event); // Should run first
             handleFilter?.(); // Filter if uncontrolled value
-        }, ...rest }));
+        }, suppressHydrationWarning // Since <ds-suggestion> adds attributes
+        : true, ...rest }));
 });
 
 export { SuggestionInput };

package/dist/esm/components/suggestion/suggestion-list.js

@@ -1,8 +1,7 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext, useEffect } from 'react';
-import '@u-elements/u-datalist';
-import { autoUpdate, computePosition, flip, shift } from '@floating-ui/dom';
+import '@digdir/designsystemet-web';
 import { SuggestionContext } from './suggestion.js';
 
 /**
@@ -17,46 +16,11 @@ import { SuggestionContext } from './suggestion.js';
  * </Suggestion>
  */
 const SuggestionList = forwardRef(function SuggestionList({ singular = '%d forslag', plural = '%d forslag', className, id, autoPlacement = true, ...rest }, ref) {
-    const { handleFilter, uComboboxRef } = useContext(SuggestionContext);
+    const { handleFilter } = useContext(SuggestionContext);
     useEffect(handleFilter); // Must run on every render
-    // Position with floating-ui
-    useEffect(() => {
-        const trigger = uComboboxRef?.current?.control;
-        const list = uComboboxRef?.current?.list;
-        if (list && trigger) {
-            return autoUpdate(trigger, list, () => {
-                computePosition(trigger, list, {
-                    placement: 'bottom',
-                    strategy: 'fixed',
-                    middleware: [
-                        ...(autoPlacement
-                            ? [
-                                flip({
-                                    fallbackAxisSideDirection: 'start',
-                                    fallbackPlacements: ['top'],
-                                }),
-                                shift(),
-                            ]
-                            : []),
-                        undefined,
-                        triggerWidth,
-                    ],
-                }).then(({ x, y, placement }) => {
-                    const varOperator = placement.startsWith('top') ? '-' : '+';
-                    list.style.translate = `${Math.round(x)}px calc(${Math.round(y)}px ${varOperator} var(--dsc-suggestion-list-gap))`;
-                });
-            });
-        }
-    }, []);
-    return (jsx("u-datalist", { "data-nofilter": true, "data-sr-singular": singular, "data-sr-plural": plural, class: className, ref: ref, popover: 'manual', ...rest }));
+    return (jsx("u-datalist", { class: className, popover: 'manual' // Is also set by field.ts, but is nice to have in case focus runs before toggle event
+        , "data-nofilter": true, "data-sr-plural": plural, "data-sr-singular": singular, ref: ref, suppressHydrationWarning // Since <u-datalist> adds attributes
+        : true, ...rest }));
 });
-const triggerWidth = {
-    name: 'TriggerWidth',
-    fn(data) {
-        const { elements, rects } = data;
-        elements.floating.style.width = `${rects.reference.width}px`;
-        return data;
-    },
-};
 
 export { SuggestionList };