@digdir/designsystemet-react 0.0.0-main-20251021133336 → 0.0.0-main-20260410112645

package/README.md

@@ -3,8 +3,8 @@
 React implementation of the Designsystemet components
 
 - Uses `@digdir/designsystemet-css` for styling.
-- Uses `@digdir/designsystemet-theme` or CSS file generated from `@digdir/designsystemet tokens build` for theming.
-  - Build your own theme on https://theme.designsystemet.no/
+- Uses `@digdir/designsystemet-css/theme` or CSS file generated from `@digdir/designsystemet tokens build` for theming.
+  - Build your own theme on https://theme.designsystemet.no/en
 - All components support `ref`.
 - All components support SSR.
   - Use full component name, e.g. `CardBlock` instead of `Card.Block`

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

@@ -6,6 +6,10 @@ var react$1 = require('@floating-ui/react');
 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');
 var ComboboxContext = require('./ComboboxContext.js');
 var ComboboxIdContext = require('./ComboboxIdContext.js');
@@ -20,7 +24,6 @@ var useComboboxKeyboard = require('./useComboboxKeyboard.js');
 var useFloatingCombobox = require('./useFloatingCombobox.js');
 var useFormField = require('./useFormField/useFormField.js');
 var utilities = require('./utilities.js');
-var useDebounceCallback = require('../../utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js');
 
 /**
  * @deprecated Use `Suggestion` instead

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

@@ -3,10 +3,13 @@
 
 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');
 var ComboboxIdContext = require('../ComboboxIdContext.js');
 var utilities = require('../utilities.js');
-var useDebounceCallback = require('../../../utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js');
 
 const useComboboxOption = ({ id, ref, value, }) => {
     const generatedId = react.useId();

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

@@ -28,7 +28,7 @@ const ComboboxClearButton = react.forwardRef((props, ref) => {
                 e.stopPropagation();
                 handleSelectOption({ option: null, clear: true });
             }
-        }, type: 'button', "aria-label": clearButtonLabel, children: jsxRuntime.jsx(akselIcons.XMarkIcon, { fontSize: '1.5em', title: 'Clear selection' }) }));
+        }, type: 'button', "aria-label": clearButtonLabel, children: jsxRuntime.jsx(akselIcons.XMarkIcon, { height: '1.5em', width: '1.5em', title: 'Clear selection' }) }));
 });
 ComboboxClearButton.displayName = 'ComboboxClearButton';
 

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

@@ -74,7 +74,7 @@ const ComboboxInput = ({ hideClearButton, listId, error, hideChips, handleKeyDow
                                     onChange(e);
                                     !open && setOpen(true);
                                     rest.onChange?.(e);
-                                } }) })] }), showClearButton && jsxRuntime.jsx(ComboboxClearButton, { ref: clearButtonRef }), jsxRuntime.jsx("div", { className: 'ds-combobox__arrow', children: open ? (jsxRuntime.jsx(akselIcons.ChevronUpIcon, { title: 'arrow up', fontSize: '1.5em' })) : (jsxRuntime.jsx(akselIcons.ChevronDownIcon, { title: 'arrow down', fontSize: '1.5em' })) })] }) }));
+                                } }) })] }), showClearButton && jsxRuntime.jsx(ComboboxClearButton, { ref: clearButtonRef }), jsxRuntime.jsx("div", { className: 'ds-combobox__arrow', children: open ? (jsxRuntime.jsx(akselIcons.ChevronUpIcon, { title: 'arrow up', height: '1.5em', width: '1.5em' })) : (jsxRuntime.jsx(akselIcons.ChevronDownIcon, { title: 'arrow down', height: '1.5em', width: '1.5em' })) })] }) }));
 };
 ComboboxInput.displayName = 'ComboboxInput';
 

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

@@ -1,8 +1,12 @@
 'use client';
 'use strict';
 
-var ComboboxIdContext = require('./ComboboxIdContext.js');
 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');
 
 const useComboboxKeyboard = ({ readOnly, disabled, interactiveChildren, filteredOptions, inputValue, selectedOptions, multiple, open, options, setOpen, handleSelectOption, }) => {
     const { activeIndex } = ComboboxIdContext.useComboboxId();

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

@@ -22,11 +22,12 @@ var react = require('react');
  *  <Icon />
  * </Avatar>
  */
-const Avatar = react.forwardRef(function Avatar({ 'aria-label': ariaLabel, variant = 'circle', className, children, initials, ...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("span", { 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, "data-tooltip": 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/avatar-stack/avatar-stack.js

@@ -0,0 +1,33 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/**
+ * Use `AvatarStack` to constrain Avatars into a stack.
+ *
+ * @example
+ * <EXPERIMENTAL_AvatarStack>
+ *   <Avatar aria-label='name'>
+ *     <img src={cat1} alt='' />
+ *   </Avatar>
+ *   <Avatar aria-label='name'>
+ *     <BriefcaseIcon />
+ *   </Avatar>
+ *   <Avatar aria-label='name' initials='sm' />
+ * </EXPERIMENTAL_AvatarStack>
+ */
+const EXPERIMENTAL_AvatarStack = react.forwardRef(function AvatarStack({ className, gap, suffix, avatarSize, overlap, expandable, children, ...rest }, ref) {
+    const style = {
+        ...(rest.style || {}),
+        '--dsc-avatar-stack-gap': gap !== undefined ? `${gap}` : undefined,
+        '--dsc-avatar-stack-size': avatarSize ? `${avatarSize}` : undefined,
+        '--dsc-avatar-stack-overlap': overlap !== undefined ? `${overlap}` : undefined,
+        '--dsc-avatar-count': expandable === 'fixed' ? react.Children.count(children) : undefined,
+    };
+    return (jsxRuntime.jsx("span", { tabIndex: rest.tabIndex !== undefined ? rest.tabIndex : expandable ? 0 : undefined, ref: ref, className: cl(`ds-avatar-stack`, className), style: style, "data-expandable": expandable, "data-suffix": suffix, ...rest, children: children }));
+});
+
+exports.EXPERIMENTAL_AvatarStack = EXPERIMENTAL_AvatarStack;

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,18 @@ 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, commandfor, commandFor, ...rest }, ref) {
     const Component = asChild ? reactSlot.Slot : 'button';
+    const popoverVal = popoverTarget ?? popovertarget;
+    const popoverKey = react.version.startsWith('19')
+        ? 'popoverTarget'
+        : 'popovertarget';
+    const commandForVal = commandFor ?? commandfor;
     // 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, commandfor: commandForVal, "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

@@ -4,8 +4,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var cl = require('clsx/lite');
 var react = require('react');
-require('@u-elements/u-details');
 var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
+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

@@ -18,9 +18,9 @@ const Context = react.createContext({
  *   </Dialog>
  * </Dialog.TriggerContext>
  */
-const DialogTriggerContext = ({ children, }) => {
+const DialogTriggerContext = (rest) => {
     const contextRef = react.useRef(null);
-    return jsxRuntime.jsx(Context.Provider, { value: contextRef, children: children });
+    return jsxRuntime.jsx(Context.Provider, { value: contextRef, ...rest });
 };
 DialogTriggerContext.displayName = 'DialogTriggerContext';
 

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

@@ -19,7 +19,7 @@ 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 contextRef = react.useContext(dialogTriggerContext.Context); // Using contextRef instead of command as this is instantly available and plays nice with tests
     const Component = asChild ? reactSlot.Slot : button.Button;
     const openDialog = () => {
         /* check if element has `data-modal`, it it has, use `showModal` */
@@ -27,7 +27,8 @@ const DialogTrigger = react.forwardRef(function DialogTrigger({ asChild, ...rest
             ? contextRef.current?.showModal()
             : contextRef.current?.show();
     };
-    return (jsxRuntime.jsx(Component, { "aria-haspopup": 'dialog', onClick: openDialog, ref: ref, ...rest }));
+    return (jsxRuntime.jsx(Component, { "aria-haspopup": 'dialog', onClick: openDialog, ref: ref, suppressHydrationWarning // Might get augmented through designsystemet-web with aria-haspopup
+        : true, ...rest }));
 });
 
 exports.DialogTrigger = DialogTrigger;

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

@@ -5,9 +5,10 @@ var jsxRuntime = require('react/jsx-runtime');
 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');
-var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
 
 /**
  * Dialog component, used to display a dialog dialog.
@@ -27,65 +28,36 @@ var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.
  *
  * ...
  *
- * <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, closeButton = 'Lukk dialogvindu', closedby = 'closerequest', modal = true, onClose, open, ...rest }, ref) {
+const Dialog = react.forwardRef(function Dialog({ asChild, children, className, closeButton = 'Lukk dialogvindu', id, modal = true, onAnimationEnd, onClick, onClose, open, placement = 'center', ...rest }, ref) {
     const contextRef = 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 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;
-            if (event instanceof KeyboardEvent)
-                return (closedby === 'none' &&
-                    event.key === 'Escape' &&
-                    event.preventDefault()); // Skip ESC-key if closedby="none"
-            /* Check if clicked element or its closest parent has data-command='close' */
-            if (target instanceof Element) {
-                const closeElement = target.closest('[data-command="close"]');
-                if (closeElement)
-                    return dialog?.close();
-            }
-            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 autoId = react.useId();
+    const usedId = id ?? autoId;
+    // Toggle open based on prop
+    react.useEffect(() => dialogRef.current?.[open ? showProp : 'close'](), [open]);
+    return (jsxRuntime.jsxs(Component, { className: cl('ds-dialog', className), "data-placement": placement, "data-modal": modal, 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.');
             }
-        };
-        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-modal": modal, ...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: usedId })), children] }));
 });
 
 exports.Dialog = Dialog;

package/dist/cjs/components/dropdown/dropdown-heading.js

@@ -13,7 +13,7 @@ var heading = require('../heading/heading.js');
  *  <DropdownHeading>Heading</DropdownHeading>
  * </Dropdown>
  */
-const DropdownHeading = react.forwardRef(function DropdownHeading({ className, ...rest }, ref) {
+const DropdownHeading = react.forwardRef(function DropdownHeading(rest, ref) {
     return jsxRuntime.jsx(heading.Heading, { ref: ref, ...rest });
 });
 

package/dist/cjs/components/dropdown/dropdown-item.js

@@ -16,7 +16,7 @@ var react = require('react');
  *  </DropdownList>
  * </Dropdown>
  */
-const DropdownItem = react.forwardRef(function DropdownItem({ className, ...rest }, ref) {
+const DropdownItem = react.forwardRef(function DropdownItem(rest, ref) {
     return jsxRuntime.jsx("li", { ref: ref, ...rest });
 });
 

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

@@ -16,7 +16,7 @@ var react = require('react');
  *  </DropdownList>
  * </Dropdown>
  */
-const DropdownList = react.forwardRef(function DropdownList({ className, ...rest }, ref) {
+const DropdownList = react.forwardRef(function DropdownList(rest, ref) {
     return jsxRuntime.jsx("ul", { ref: ref, ...rest });
 });
 

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,12 +3,9 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-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');
-var useDebounceCallback = require('../../utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.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 +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,10 +2,10 @@
 '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 fieldObserver = require('./field-observer.js');
 var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
 
 /**
@@ -20,11 +20,13 @@ var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.
  * </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;