@digdir/designsystemet-react 1.11.0 → 1.12.0

package/dist/cjs/components/Combobox/Combobox.js

@@ -7,6 +7,7 @@ var reactVirtual = require('@tanstack/react-virtual');
 var cl = require('clsx/lite');
 var react = require('react');
 var useDebounceCallback = require('../../utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js');
+require('@digdir/designsystemet-web');
 require('../../utilities/roving-focus/roving-focus-item.js');
 require('../../utilities/roving-focus/roving-focus-root.js');
 var spinner = require('../spinner/spinner.js');

package/dist/cjs/components/Combobox/Option/useComboboxOption.js

@@ -4,6 +4,7 @@
 var react$1 = require('@floating-ui/react');
 var react = require('react');
 var useDebounceCallback = require('../../../utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js');
+require('@digdir/designsystemet-web');
 require('../../../utilities/roving-focus/roving-focus-item.js');
 require('../../../utilities/roving-focus/roving-focus-root.js');
 var ComboboxContext = require('../ComboboxContext.js');

package/dist/cjs/components/Combobox/useComboboxKeyboard.js

@@ -3,6 +3,7 @@
 
 var useDebounceCallback = require('../../utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js');
 require('react');
+require('@digdir/designsystemet-web');
 require('../../utilities/roving-focus/roving-focus-item.js');
 require('../../utilities/roving-focus/roving-focus-root.js');
 var ComboboxIdContext = require('./ComboboxIdContext.js');

package/dist/cjs/components/avatar/avatar.js

@@ -22,12 +22,12 @@ var react = require('react');
  *  <Icon />
  * </Avatar>
  */
-const Avatar = react.forwardRef(function Avatar({ 'aria-label': ariaLabel, variant = 'circle', className, children, initials, asChild, ...rest }, ref) {
+const Avatar = react.forwardRef(function Avatar({ 'aria-label': ariaLabel, 'data-tooltip': dataTooltip, variant = 'circle', className, children, initials, asChild, ...rest }, ref) {
     const OuterComponent = asChild ? reactSlot.Slot : 'span';
     const useSlot = children && typeof children !== 'string';
     const textChild = children && typeof children === 'string';
     const Component = useSlot ? reactSlot.Slot : react.Fragment;
-    return (jsxRuntime.jsx(OuterComponent, { ref: ref, className: cl('ds-avatar', className), "data-variant": variant, "data-initials": initials, role: 'img', "aria-label": ariaLabel, ...rest, children: jsxRuntime.jsx(Component, { ...(useSlot ? { 'aria-hidden': true } : {}), children: textChild ? jsxRuntime.jsx("span", { children: children }) : children }) }));
+    return (jsxRuntime.jsx(OuterComponent, { ref: ref, className: cl('ds-avatar', className), "data-variant": variant, "data-initials": initials, role: asChild ? undefined : 'img', "aria-label": ariaLabel || dataTooltip, tabIndex: dataTooltip ? 0 : undefined, ...rest, children: jsxRuntime.jsx(Component, { ...(useSlot && !asChild ? { 'aria-hidden': true } : {}), children: textChild ? jsxRuntime.jsx("span", { children: children }) : children }) }));
 });
 
 exports.Avatar = Avatar;

package/dist/cjs/components/breadcrumbs/breadcrumbs-link.js

@@ -6,7 +6,8 @@ var react = require('react');
 var link = require('../link/link.js');
 
 const BreadcrumbsLink = react.forwardRef(function BreadcrumbsLink(rest, ref) {
-    return jsxRuntime.jsx(link.Link, { ref: ref, ...rest });
+    return (jsxRuntime.jsx(link.Link, { suppressHydrationWarning // Since <ds-breadcrumbs> adds aria-current="page"
+        : true, ref: ref, ...rest }));
 });
 
 exports.BreadcrumbsLink = BreadcrumbsLink;

package/dist/cjs/components/breadcrumbs/breadcrumbs-list.js

@@ -3,19 +3,9 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
 
 const BreadcrumbsList = react.forwardRef(function BreadcrumbsList(rest, ref) {
-    const innerRef = react.useRef(null);
-    const mergedRefs = useMergeRefs.useMergeRefs([innerRef, ref]);
-    // Set aria-current on last link
-    react.useEffect(() => {
-        const links = innerRef.current?.querySelectorAll(':scope > * > *') || [];
-        const lastLink = links[links?.length - 1];
-        lastLink?.setAttribute('aria-current', 'page');
-        return () => lastLink?.removeAttribute('aria-current'); // Remove on re-render as React can re-use DOM elements
-    });
-    return jsxRuntime.jsx("ol", { ref: mergedRefs, ...rest });
+    return jsxRuntime.jsx("ol", { ref: ref, ...rest });
 });
 
 exports.BreadcrumbsList = BreadcrumbsList;

package/dist/cjs/components/breadcrumbs/breadcrumbs.js

@@ -2,6 +2,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+require('@digdir/designsystemet-web');
 var cl = require('clsx/lite');
 var react = require('react');
 
@@ -23,6 +24,6 @@ var react = require('react');
  *  </Breadcrumbs.List>
  * </Breadcrumbs>
  */
-const Breadcrumbs = react.forwardRef(({ 'aria-label': ariaLabel = 'Du er her:', className, ...rest }, ref) => (jsxRuntime.jsx("nav", { "aria-label": ariaLabel, className: cl('ds-breadcrumbs', className), ref: ref, ...rest })));
+const Breadcrumbs = react.forwardRef(({ className, ...rest }, ref) => (jsxRuntime.jsx("ds-breadcrumbs", { suppressHydrationWarning: true, class: cl('ds-breadcrumbs', className), ref: ref, ...rest })));
 
 exports.Breadcrumbs = Breadcrumbs;

package/dist/cjs/components/button/button.js

@@ -13,12 +13,17 @@ var spinner = require('../spinner/spinner.js');
  * @example
  * <Button>Click me</Button>
  */
-const Button = react.forwardRef(function Button({ asChild, className, children, icon = false, loading = false, variant = 'primary', ...rest }, ref) {
+const Button = react.forwardRef(function Button({ asChild, className, children, icon = false, loading = false, variant = 'primary', popoverTarget, popovertarget, ...rest }, ref) {
     const Component = asChild ? reactSlot.Slot : 'button';
+    const popoverVal = popoverTarget ?? popovertarget;
+    const popoverKey = react.version.startsWith('19')
+        ? 'popoverTarget'
+        : 'popovertarget';
     // Fallbacks to undefined to prevent rendering attribute="false"
-    return (jsxRuntime.jsxs(Component, { "aria-busy": Boolean(loading) || undefined, "aria-disabled": Boolean(loading) || undefined, className: cl('ds-button', className), "data-icon": icon || undefined, "data-variant": variant, ref: ref, 
+    return (jsxRuntime.jsxs(Component, { suppressHydrationWarning // Might get augmented through designsystemet-web with aria-haspopup etc.
+        : true, "aria-busy": Boolean(loading) || undefined, "aria-disabled": Boolean(loading) || undefined, className: cl('ds-button', className), "data-icon": icon || undefined, "data-variant": variant, ref: ref, 
         /* don't set type when we use `asChild` */
-        type: asChild ? undefined : 'button', ...rest, children: [loading === true ? (jsxRuntime.jsx(spinner.Spinner, { "aria-hidden": 'true' })) : (loading // Allow custom loading spinner
+        type: asChild ? undefined : 'button', [popoverKey]: popoverVal, ...rest, children: [loading === true ? (jsxRuntime.jsx(spinner.Spinner, { "aria-hidden": 'true' })) : (loading // Allow custom loading spinner
             ), jsxRuntime.jsx(reactSlot.Slottable, { children: icon && loading ? null : children })] }));
 });
 

package/dist/cjs/components/card/card.js

@@ -6,7 +6,11 @@ var reactSlot = require('@radix-ui/react-slot');
 var cl = require('clsx/lite');
 var react = require('react');
 var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
+require('@digdir/designsystemet-web');
 
+const ATTR_CLICKDELEGATE = 'data-clickdelegatefor';
+const SELECTOR_LINK = `:is(h1,h2,h3,h4,h5,h6) a`;
+const SELECTOR_SKIP = 'a,button,label,details,dialog,[role="button"],[popover],[contenteditable]';
 /**
  * Card component to present content in a structured way.
  *
@@ -20,22 +24,26 @@ var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.
 const Card = react.forwardRef(function Card({ asChild = false, variant = 'default', className, ...rest }, ref) {
     const Component = asChild ? reactSlot.Slot : 'div';
     const cardRef = react.useRef(null);
+    const linkGeneratedId = react.useId();
     const mergedRefs = useMergeRefs.useMergeRefs([cardRef, ref]);
     // Forward click on card to heading links for better accessibility
     // https://adrianroselli.com/2020/02/block-links-cards-clickable-regions-etc.html
     react.useEffect(() => {
         const card = cardRef.current;
-        const handleClick = ({ ctrlKey, metaKey, target }) => {
-            const link = card?.querySelector(':is(h1,h2,h3,h4,h5,h6) a');
-            if (!link || link?.contains(target))
-                return; // Let links handle their own clicks
-            if (ctrlKey || metaKey)
-                window.open(link.href, '', 'noreferrer');
+        const link = card?.querySelector(SELECTOR_LINK);
+        const skip = !link || link.parentElement?.closest(SELECTOR_SKIP); // Using parentElement as link variable will always match a selector
+        const id = link?.id;
+        if (card?.hasAttribute(ATTR_CLICKDELEGATE) || skip)
+            return; // Already delegated or skipped
+        link.id = id || linkGeneratedId;
+        card?.setAttribute(ATTR_CLICKDELEGATE, link.id);
+        return () => {
+            if (id && link)
+                link.id = id;
             else
-                link.click(); // Using link.click instead of window.location.href as this will trigger the browser's handling of rel=, target=, etc.
+                link?.removeAttribute('id');
+            card?.removeAttribute(ATTR_CLICKDELEGATE);
         };
-        card?.addEventListener('click', handleClick);
-        return () => card?.removeEventListener('click', handleClick);
     }, []);
     return (jsxRuntime.jsx(Component, { className: cl(`ds-card`, className), "data-variant": variant, ref: mergedRefs, ...rest }));
 });

package/dist/cjs/components/details/details-summary.js

@@ -10,9 +10,9 @@ var react = require('react');
  * @example
  * <Details.Summary>Heading</Details.Summary>
  */
-const DetailsSummary = react.forwardRef(function DetailsSummary({ className, ...rest }, ref) {
-    /* Set `className` as `class` so react is happy */
-    return jsxRuntime.jsx("u-summary", { ref: ref, class: className, ...rest });
+const DetailsSummary = react.forwardRef(function DetailsSummary(rest, ref) {
+    return (jsxRuntime.jsx("summary", { suppressHydrationWarning // Since <details> polyfill adds attributes
+        : true, ref: ref, ...rest }));
 });
 
 exports.DetailsSummary = DetailsSummary;

package/dist/cjs/components/details/details.js

@@ -5,7 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var cl = require('clsx/lite');
 var react = require('react');
 var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
-require('@u-elements/u-details');
+require('@digdir/designsystemet-web');
 
 /**
  * Details component, contains `Details.Summary` and `Details.Content` components.
@@ -37,7 +37,7 @@ const Details = react.forwardRef(function Details({ className, open, defaultOpen
         details?.addEventListener('toggle', handleToggle, true);
         return () => details?.removeEventListener('toggle', handleToggle, true);
     }, []);
-    return (jsxRuntime.jsx("u-details", { class: cl('ds-details', className), open: (open ?? initialOpen.current) || undefined, "data-variant": variant, ref: mergedRefs, ...rest }));
+    return (jsxRuntime.jsx("details", { className: cl('ds-details', className), open: (open ?? initialOpen.current) || undefined, "data-variant": variant, ref: mergedRefs, ...rest }));
 });
 
 exports.Details = Details;

package/dist/cjs/components/dialog/dialog-trigger-context.js

@@ -4,9 +4,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 
-const Context = react.createContext({
-    current: null,
-});
+const Context = react.createContext({});
 /**
  * DialogTriggerContext component, used to provide a context for a dialog trigger.
  *
@@ -18,9 +16,10 @@ const Context = react.createContext({
  *   </Dialog>
  * </Dialog.TriggerContext>
  */
-const DialogTriggerContext = ({ children, }) => {
-    const contextRef = react.useRef(null);
-    return jsxRuntime.jsx(Context.Provider, { value: contextRef, children: children });
+const DialogTriggerContext = (rest) => {
+    const [state, setState] = react.useState({});
+    const setContext = (next) => setState({ ...state, ...next });
+    return jsxRuntime.jsx(Context.Provider, { value: { ...state, setContext }, ...rest });
 };
 DialogTriggerContext.displayName = 'DialogTriggerContext';
 

package/dist/cjs/components/dialog/dialog-trigger.js

@@ -19,15 +19,10 @@ var dialogTriggerContext = require('./dialog-trigger-context.js');
  * </Dialog.TriggerContext>
  */
 const DialogTrigger = react.forwardRef(function DialogTrigger({ asChild, ...rest }, ref) {
-    const contextRef = react.useContext(dialogTriggerContext.Context);
+    const { id, modal } = react.useContext(dialogTriggerContext.Context);
     const Component = asChild ? reactSlot.Slot : button.Button;
-    const openDialog = () => {
-        /* check if element has `data-modal`, it it has, use `showModal` */
-        contextRef.current?.getAttribute('data-modal') === 'true'
-            ? contextRef.current?.showModal()
-            : contextRef.current?.show();
-    };
-    return (jsxRuntime.jsx(Component, { "aria-haspopup": 'dialog', onClick: openDialog, ref: ref, ...rest }));
+    return (jsxRuntime.jsx(Component, { suppressHydrationWarning // Might get augmented through designsystemet-web with aria-haspopup
+        : true, command: modal ? 'show-modal' : 'show', commandfor: id, ref: ref, ...rest }));
 });
 
 exports.DialogTrigger = DialogTrigger;

package/dist/cjs/components/dialog/dialog.js

@@ -6,6 +6,7 @@ var reactSlot = require('@radix-ui/react-slot');
 var cl = require('clsx/lite');
 var react = require('react');
 var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
+require('@digdir/designsystemet-web');
 var button = require('../button/button.js');
 var dialogTriggerContext = require('./dialog-trigger-context.js');
 
@@ -27,69 +28,38 @@ var dialogTriggerContext = require('./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 = react.forwardRef(function Dialog({ asChild, children, className, placement = 'center', closeButton = 'Lukk dialogvindu', closedby = 'closerequest', modal = true, onClose, open, ...rest }, ref) {
-    const contextRef = react.useContext(dialogTriggerContext.Context);
+const Dialog = react.forwardRef(function Dialog({ asChild, children, className, closeButton = 'Lukk dialogvindu', id, modal = true, onAnimationEnd, onClick, onClose, open, placement = 'center', ...rest }, ref) {
+    const { setContext } = react.useContext(dialogTriggerContext.Context);
     const dialogRef = react.useRef(null); // This local ref is used to make sure the dialog works without a DialogTriggerContext
     const Component = asChild ? reactSlot.Slot : 'dialog';
-    const mergedRefs = useMergeRefs.useMergeRefs([contextRef, ref, dialogRef]);
+    const mergedRefs = useMergeRefs.useMergeRefs([ref, dialogRef]);
     const showProp = modal ? 'showModal' : 'show';
-    react.useEffect(() => dialogRef.current?.[open ? showProp : 'close'](), [open]); // Toggle open based on prop
-    react.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 = react.useId();
+    const usedId = id ?? autoId;
+    // Toggle open based on prop
+    react.useEffect(() => dialogRef.current?.[open ? showProp : 'close'](), [open]);
+    // Store context for DialogTrigger to consume, so it can open the dialog when the trigger is clicked
+    react.useEffect(() => setContext?.({ id: usedId, modal }), [usedId, modal]);
+    return (jsxRuntime.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 */
-    react.useEffect(() => {
-        const handleClose = (event) => onClose?.(event);
-        const currentRef = dialogRef.current;
-        currentRef?.addEventListener('close', handleClose);
-        return () => currentRef?.removeEventListener('close', handleClose);
-    }, [onClose]);
-    return (jsxRuntime.jsxs(Component, { className: cl('ds-dialog', className), ref: mergedRefs, "data-placement": placement, "data-modal": modal, closedby: closedby, ...rest, children: [closeButton !== false && (jsxRuntime.jsx(button.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 && (jsxRuntime.jsx(button.Button, { "aria-label": closeButton, "data-color": 'neutral', icon: true, variant: 'tertiary', command: 'close', commandfor: id ?? autoId })), children] }));
 });
 
 exports.Dialog = Dialog;

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

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

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

@@ -6,10 +6,6 @@ var reactSlot = require('@radix-ui/react-slot');
 var cl = require('clsx/lite');
 var react = require('react');
 
-const ErrorSummaryContext = react.createContext({
-    headingId: 'heading',
-    setHeadingId: () => { },
-});
 /**
  * ErrorSummary component, used to display a list of errors.
  *
@@ -27,11 +23,10 @@ const ErrorSummaryContext = react.createContext({
  * </ErrorSummary>
  */
 const ErrorSummary = react.forwardRef(function ErrorSummary({ asChild, className, ...rest }, ref) {
-    const randomId = react.useId();
-    const [headingId, setHeadingId] = react.useState(randomId);
-    const Component = asChild ? reactSlot.Slot : 'div';
-    return (jsxRuntime.jsx(ErrorSummaryContext.Provider, { value: { headingId, setHeadingId }, children: jsxRuntime.jsx(Component, { tabIndex: -1, "aria-labelledby": headingId, className: cl('ds-error-summary', className), ref: ref, ...rest }) }));
+    const Component = asChild ? reactSlot.Slot : 'ds-error-summary';
+    return (jsxRuntime.jsx(Component, { ...(asChild
+            ? { className: cl('ds-error-summary', className) }
+            : { class: cl('ds-error-summary', className) }), ref: ref, suppressHydrationWarning: true, ...rest }));
 });
 
 exports.ErrorSummary = ErrorSummary;
-exports.ErrorSummaryContext = ErrorSummaryContext;

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

@@ -3,14 +3,9 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var useDebounceCallback = require('../../utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js');
-require('../../utilities/roving-focus/roving-focus-item.js');
-require('../../utilities/roving-focus/roving-focus-root.js');
-var paragraph = require('../paragraph/paragraph.js');
+var index = require('../../utilities/index.js');
 var validationMessage = require('../validation-message/validation-message.js');
-var fieldObserver = require('./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.
  *
@@ -20,41 +15,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 = react.forwardRef(function FieldCounter({ limit, under = '%d tegn igjen', over = '%d tegn for mye', hint = 'Maks %d tegn tillatt.', ...rest }, ref) {
-    const [count, setCount] = react.useState(0);
-    const [liveRegionText, setLiveRegionText] = react.useState('');
-    const fieldInputRef = react.useRef(null);
-    const counterRef = react.useRef(null);
-    const hasExceededLimit = count > limit;
-    const remainder = limit - count;
-    const debouncedSetLiveRegionText = useDebounceCallback.useDebounceCallback((text) => setLiveRegionText(text), 1200);
-    // Listen to native input events (user typing) to update the counter in real time
-    react.useEffect(() => {
-        const field = counterRef.current?.closest('.ds-field');
-        const input = Array.from(field?.getElementsByTagName('*') || []).find(fieldObserver.isInputLike);
-        const onInput = ({ target }) => {
-            if (fieldObserver.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. */
-    react.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
-    react.useEffect(() => {
-        debouncedSetLiveRegionText(label(hasExceededLimit ? over : under, remainder));
-    }, [count, limit, over, under, hasExceededLimit, remainder]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: 'ds-sr-only', "aria-live": 'polite', ref: counterRef, children: liveRegionText }), hasExceededLimit ? (jsxRuntime.jsx(validationMessage.ValidationMessage, { ref: ref, ...rest, "aria-hidden": 'true', "data-field": null, children: label(over, remainder) })) : (jsxRuntime.jsx(paragraph.Paragraph, { ref: ref, ...rest, "aria-hidden": 'true', children: label(under, remainder) })), jsxRuntime.jsx("div", { className: 'ds-sr-only', "aria-hidden": 'true', "data-field": 'description', children: label(hint, limit) })] }));
+const FieldCounter = react.forwardRef(function FieldCounter({ limit, under, over, hint, ...rest }, _ref) {
+    if (hint)
+        index.warn('hint attribute is deprecated on Field.Counter');
+    return (jsxRuntime.jsx(validationMessage.ValidationMessage, { suppressHydrationWarning // Since <ds-field> adds attributes
+        : true, "data-field": 'counter', "data-limit": limit, "data-under": under, "data-over": over, ...rest }));
 });
 
 exports.FieldCounter = FieldCounter;

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

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

package/dist/cjs/components/field/field.js

@@ -2,11 +2,11 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+require('@digdir/designsystemet-web');
 var reactSlot = require('@radix-ui/react-slot');
 var cl = require('clsx/lite');
 var react = require('react');
 var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
-var fieldObserver = require('./field-observer.js');
 
 /**
  * Field component, used to wrap a form field.
@@ -20,11 +20,13 @@ var fieldObserver = require('./field-observer.js');
  * </Field>
  */
 const Field = react.forwardRef(function Field({ className, position, asChild, ...rest }, ref) {
-    const Component = asChild ? reactSlot.Slot : 'div';
+    const Component = asChild ? reactSlot.Slot : 'ds-field';
     const fieldRef = react.useRef(null);
     const mergedRefs = useMergeRefs.useMergeRefs([fieldRef, ref]);
-    react.useEffect(() => fieldObserver.fieldObserver(fieldRef.current), []);
-    return (jsxRuntime.jsx(Component, { className: cl('ds-field', className), "data-position": position, ref: mergedRefs, ...rest }));
+    return (jsxRuntime.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 }));
 });
 
 exports.Field = Field;

package/dist/cjs/components/label/label.js

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

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

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

package/dist/cjs/components/pagination/pagination.js

@@ -2,6 +2,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+require('@digdir/designsystemet-web');
 var reactSlot = require('@radix-ui/react-slot');
 var cl = require('clsx/lite');
 var react = require('react');
@@ -24,9 +25,12 @@ var react = require('react');
  *   </Pagination.List>
  * </Pagination>
  */
-const Pagination = react.forwardRef(function Pagination({ 'aria-label': ariaLabel = 'Sidenavigering', asChild, className, ...rest }, ref) {
-    const Component = asChild ? reactSlot.Slot : 'nav';
-    return (jsxRuntime.jsx(Component, { "aria-label": ariaLabel, className: cl('ds-pagination', className), ref: ref, ...rest }));
+const Pagination = react.forwardRef(function Pagination({ asChild, className, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'ds-pagination';
+    return (jsxRuntime.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 }));
 });
 
 exports.Pagination = Pagination;

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

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